diff --git a/.github/cla/signatures.json b/.github/cla/signatures.json
index 8b90a150f6..67d475a7a3 100644
--- a/.github/cla/signatures.json
+++ b/.github/cla/signatures.json
@@ -15,6 +15,22 @@
       "created_at": "2021-04-14T16:20:04Z",
       "repoId": 190729906,
       "pullRequestNo": 1383
+    },
+    {
+      "name": "aptkingston",
+      "id": 9075550,
+      "comment_id": 830252031,
+      "created_at": "2021-04-30T17:37:37Z",
+      "repoId": 190729906,
+      "pullRequestNo": 1431
+    },
+    {
+      "name": "kevmodrome",
+      "id": 534488,
+      "comment_id": 830545461,
+      "created_at": "2021-05-01T05:27:53Z",
+      "repoId": 190729906,
+      "pullRequestNo": 1431
     }
   ]
 }
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
index e23b0be753..eda2e6131b 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,6 +3,8 @@
   "semi": false,
   "singleQuote": false,
   "trailingComma": "es5",
+  "arrowParens": "avoid",
+  "jsxBracketSameLine": false,
   "plugins": ["prettier-plugin-svelte"],
-  "svelteSortOrder" : "scripts-markup-styles"
+  "svelteSortOrder" : "options-scripts-markup-styles"
 }
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 53fbb0d221..d471924fe0 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,11 +1,7 @@
 {
     "editor.formatOnSave": true,
-    "eslint.format.enable": true,
     "editor.codeActionsOnSave": {
         "source.fixAll": true
     },
-    "[svelte]": {
-        "editor.defaultFormatter": "JamesBirtles.svelte-vscode"
-    },
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "svelte.svelte-vscode"
 }
diff --git a/package.json b/package.json
index a4b0993fde..171f9510f3 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,11 @@
     "eslint-plugin-svelte3": "^2.7.3",
     "kill-port": "^1.6.1",
     "lerna": "3.14.1",
-    "prettier": "^1.19.1",
-    "prettier-plugin-svelte": "^1.4.0",
+    "prettier": "^2.2.1",
+    "prettier-plugin-svelte": "^2.2.0",
     "rimraf": "^3.0.2",
     "rollup-plugin-replace": "^2.2.0",
-    "svelte": "^3.30.0"
+    "svelte": "^3.37.0"
   },
   "scripts": {
     "bootstrap": "lerna link && lerna bootstrap",
@@ -38,5 +38,12 @@
     "test:e2e:ci": "lerna run cy:ci",
     "build:docker": "cd hosting/scripts/linux/ && ./release-to-docker-hub.sh && cd -",
     "build:docker:staging": "cd hosting/scripts/linux/ && ./release-to-docker-hub.sh staging && cd -"
+  },
+  "dependencies": {
+    "@spectrum-css/actionbutton": "^1.0.1",
+    "@spectrum-css/actiongroup": "^1.0.1",
+    "@spectrum-css/link": "^3.1.1",
+    "@spectrum-css/menu": "^3.0.1",
+    "@spectrum-css/toast": "^3.0.1"
   }
 }
diff --git a/packages/auth/src/db/utils.js b/packages/auth/src/db/utils.js
index 393e03e492..105e038907 100644
--- a/packages/auth/src/db/utils.js
+++ b/packages/auth/src/db/utils.js
@@ -123,7 +123,7 @@ const getConfigParams = ({ type, group, user }, otherProps = {}) => {
  * @param {Object} scopes - the type, group and userID scopes of the configuration.
  * @returns The most granular configuration document based on the scope.
  */
-const determineScopedConfig = async function(db, { type, user, group }) {
+const determineScopedConfig = async function (db, { type, user, group }) {
   const response = await db.allDocs(
     getConfigParams(
       { type, user, group },
diff --git a/packages/auth/src/hashing.js b/packages/auth/src/hashing.js
index 65976fc1f3..7f3af2855f 100644
--- a/packages/auth/src/hashing.js
+++ b/packages/auth/src/hashing.js
@@ -13,6 +13,6 @@ exports.compare = async (data, encrypted) => {
   return bcrypt.compare(data, encrypted)
 }
 
-exports.newid = function() {
+exports.newid = function () {
   return v4().replace(/-/g, "")
 }
diff --git a/packages/auth/src/middleware/passport/google.js b/packages/auth/src/middleware/passport/google.js
index 968dfa3e93..407772ebf0 100644
--- a/packages/auth/src/middleware/passport/google.js
+++ b/packages/auth/src/middleware/passport/google.js
@@ -51,7 +51,7 @@ async function authenticate(token, tokenSecret, profile, done) {
  * from couchDB rather than environment variables, using this factory is necessary for dynamically configuring passport.
  * @returns Dynamically configured Passport Google Strategy
  */
-exports.strategyFactory = async function(config) {
+exports.strategyFactory = async function (config) {
   try {
     const { clientID, clientSecret, callbackURL } = config
 
diff --git a/packages/auth/src/middleware/passport/jwt.js b/packages/auth/src/middleware/passport/jwt.js
index fdff3f3cfc..ed7d179482 100644
--- a/packages/auth/src/middleware/passport/jwt.js
+++ b/packages/auth/src/middleware/passport/jwt.js
@@ -3,12 +3,12 @@ const env = require("../../environment")
 
 exports.options = {
   secretOrKey: env.JWT_SECRET,
-  jwtFromRequest: function(ctx) {
+  jwtFromRequest: function (ctx) {
     return ctx.cookies.get(Cookies.Auth)
   },
 }
 
-exports.authenticate = async function(jwt, done) {
+exports.authenticate = async function (jwt, done) {
   try {
     return done(null, jwt)
   } catch (err) {
diff --git a/packages/auth/src/middleware/passport/local.js b/packages/auth/src/middleware/passport/local.js
index 5b8bf307d7..0f5cb82606 100644
--- a/packages/auth/src/middleware/passport/local.js
+++ b/packages/auth/src/middleware/passport/local.js
@@ -15,7 +15,7 @@ exports.options = {}
  * @param {*} done - callback from passport to return user information and errors
  * @returns The authenticated user, or errors if they occur
  */
-exports.authenticate = async function(email, password, done) {
+exports.authenticate = async function (email, password, done) {
   if (!email) return done(null, false, "Email Required.")
   if (!password) return done(null, false, "Password Required.")
 
diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 7d34c5c6d7..573e115377 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -2,6 +2,7 @@
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
   "version": "1.58.13",
+  "license": "AGPL-3.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
   "exports": {
@@ -9,31 +10,24 @@
       "import": "./dist/bbui.es.js"
     },
     "./package.json": "./package.json",
-    "./dist/style.css": "./dist/style.css"
+    "./spectrum-icons-rollup.js": "./src/spectrum-icons-rollup.js",
+    "./spectrum-icons-vite.js": "./src/spectrum-icons-vite.js"
   },
   "scripts": {
-    "dev:builder": "vite build",
-    "build": "vite build"
+    "build": "rollup -c"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^16.0.0",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^11.0.0",
-    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.5",
+    "@rollup/plugin-node-resolve": "^11.2.1",
     "cross-env": "^7.0.2",
     "nollup": "^0.14.1",
     "postcss": "^8.2.9",
-    "rollup": "^2.34.0",
-    "rollup-plugin-copy": "^3.3.0",
-    "rollup-plugin-delete": "^1.2.0",
-    "rollup-plugin-hot": "^0.1.1",
-    "rollup-plugin-node-builtins": "^2.1.2",
+    "rollup": "^2.45.2",
     "rollup-plugin-postcss": "^4.0.0",
-    "rollup-plugin-svelte-hot": "^0.11.0",
-    "semantic-release": "^17.0.8",
-    "svelte": "^3.29.0",
-    "svench": "^0.0.10-7",
-    "vite": "^2.1.5"
+    "rollup-plugin-svelte": "^7.1.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "svelte": "^3.37.0"
   },
   "keywords": [
     "svelte"
@@ -43,11 +37,44 @@
     "dist"
   ],
   "dependencies": {
-    "markdown-it": "^12.0.4",
-    "quill": "^1.3.7",
-    "sirv-cli": "^0.4.6",
-    "svelte-flatpickr": "^2.4.0",
-    "svelte-portal": "^1.0.0",
-    "turndown": "^7.0.0"
+    "@adobe/spectrum-css-workflow-icons": "^1.2.1",
+    "@spectrum-css/actionbutton": "^1.0.1",
+    "@spectrum-css/actiongroup": "^1.0.1",
+    "@spectrum-css/avatar": "^3.0.2",
+    "@spectrum-css/button": "^3.0.1",
+    "@spectrum-css/buttongroup": "^3.0.2",
+    "@spectrum-css/checkbox": "^3.0.2",
+    "@spectrum-css/dialog": "^3.0.1",
+    "@spectrum-css/divider": "^1.0.1",
+    "@spectrum-css/dropzone": "^3.0.2",
+    "@spectrum-css/fieldgroup": "^3.0.2",
+    "@spectrum-css/fieldlabel": "^3.0.1",
+    "@spectrum-css/icon": "^3.0.1",
+    "@spectrum-css/illustratedmessage": "^3.0.2",
+    "@spectrum-css/inputgroup": "^3.0.2",
+    "@spectrum-css/label": "^2.0.9",
+    "@spectrum-css/link": "^3.1.1",
+    "@spectrum-css/menu": "^3.0.1",
+    "@spectrum-css/modal": "^3.0.1",
+    "@spectrum-css/picker": "^1.0.1",
+    "@spectrum-css/popover": "^3.0.1",
+    "@spectrum-css/progressbar": "^1.0.2",
+    "@spectrum-css/progresscircle": "^1.0.2",
+    "@spectrum-css/radio": "^3.0.2",
+    "@spectrum-css/search": "^3.0.2",
+    "@spectrum-css/sidenav": "^3.0.2",
+    "@spectrum-css/switch": "^1.0.2",
+    "@spectrum-css/table": "^3.0.1",
+    "@spectrum-css/tabs": "^3.0.1",
+    "@spectrum-css/tags": "^3.0.2",
+    "@spectrum-css/textfield": "^3.0.1",
+    "@spectrum-css/toast": "^3.0.1",
+    "@spectrum-css/treeview": "^3.0.2",
+    "@spectrum-css/typography": "^3.0.1",
+    "@spectrum-css/underlay": "^2.0.9",
+    "@spectrum-css/vars": "^3.0.1",
+    "dayjs": "^1.10.4",
+    "svelte-flatpickr": "^3.1.0",
+    "svelte-portal": "^1.0.0"
   }
 }
diff --git a/packages/bbui/rollup.config.js b/packages/bbui/rollup.config.js
index 92b316cbe1..e285d548d6 100644
--- a/packages/bbui/rollup.config.js
+++ b/packages/bbui/rollup.config.js
@@ -1,140 +1,25 @@
-import * as path from "path"
-import svelte from "rollup-plugin-svelte-hot"
+import svelte from "rollup-plugin-svelte"
 import resolve from "@rollup/plugin-node-resolve"
 import commonjs from "@rollup/plugin-commonjs"
 import json from "@rollup/plugin-json"
-import copy from "rollup-plugin-copy"
-import hmr from "rollup-plugin-hot"
-import del from "rollup-plugin-delete"
+import { terser } from "rollup-plugin-terser"
 import postcss from "rollup-plugin-postcss"
-import { plugin as Svench } from "svench/rollup"
-import builtins from "rollup-plugin-node-builtins"
 
-const WATCH = !!process.env.ROLLUP_WATCH
-const SVENCH = !!process.env.SVENCH
-const HOT = WATCH
-const PRODUCTION = !WATCH
-
-const svench = Svench({
-  // The root dir that Svench will parse and watch.
-  //
-  // NOTE Watching the root of the project, to let Svench render *.md for us.
-  //
-  // NOTE By default, `node_modules` and `.git` dirs are ignored. This can be
-  // customized by passing a function to `ignore` option. Default ignore is:
-  //
-  //     ignore: path => /(?:^|\/)(?:node_modules|\.git)\//.test(path),
-  //
-  dir: ".",
-
-  // Make `src` dir a section (that is, it will always be "expanded" in the
-  // menu).
-  autoSections: ["src"],
-
-  // Use custom index.html
-  index: {
-    source: "public/index.html",
+export default {
+  input: "src/index.js",
+  output: {
+    sourcemap: true,
+    format: "esm",
+    file: "dist/bbui.es.js",
   },
-
-  extensions: [".svench", ".svench.svelte", ".svench.svx", ".md"],
-
-  serve: WATCH && {
-    host: "0.0.0.0",
-    port: 4242,
-    public: "public",
-    nollup: "0.0.0.0:42421",
-  },
-})
-
-// NOTE configs are in function form to avoid instantiating plugins of the
-// config that is not used for nothing (in particular, the HMR plugin launches
-// a dev server on startup, this is not desired when just building for prod)
-const configs = {
-  svench: () => ({
-    input: ".svench/svench.js",
-    output: {
-      format: "es",
-      dir: "public/svench",
-    },
-    plugins: [
-      builtins(),
-
-      // NOTE cleaning old builds is required to avoid serving stale static
-      // files from a previous build instead of in-memory files from the dev/hmr
-      // server
-      del({
-        targets: "public/svench/*",
-        runOnce: true,
-      }),
-
-      postcss({
-        hot: HOT,
-        extract: path.resolve("public/svench/theme.css"),
-        sourceMap: true,
-      }),
-
-      svench,
-
-      svelte({
-        dev: !PRODUCTION,
-        extensions: [".svelte", ".svench", ".svx", ".md"],
-        // Svench's "combined" preprocessor wraps both Mdsvex preprocessors
-        // (configured for Svench), and its own preprocessor (for static
-        // analysis -- eg extract source from views)
-        preprocess: svench.$.preprocess,
-        hot: HOT && {
-          optimistic: true,
-          noPreserveState: false,
-        },
-      }),
-
-      resolve({ browser: true }),
-
-      commonjs(),
-      json(),
-
-      HOT &&
-        hmr({
-          host: "0.0.0.0",
-          public: "public",
-          inMemory: true,
-          compatModuleHot: !HOT, // for terser
-        }),
-    ],
-
-    watch: {
-      clearScreen: false,
-      // buildDelay is needed to ensure Svench's code (routes) generator will
-      // pick file changes before Rollup and prevent a double build (if Rollup
-      // first sees a change to src/Foo.svench, then to Svench's routes.js)
-      buildDelay: 100,
-    },
-  }),
-
-  lib: () => ({
-    input: "src/index.js",
-    output: [{ file: "dist/bundle.mjs", format: "es" }],
-    plugins: [
-      svelte({
-        dev: !PRODUCTION,
-        extensions: [".svelte"],
-        emitCss: true,
-      }),
-      postcss(),
-      copy({
-        targets: [
-          {
-            src: ".svench/svench.css",
-            dest: "public",
-            rename: "global.css",
-          },
-        ],
-      }),
-      resolve(),
-      commonjs(),
-      json(),
-    ],
-  }),
+  plugins: [
+    resolve(),
+    commonjs(),
+    svelte({
+      emitCss: true,
+    }),
+    postcss(),
+    terser(),
+    json(),
+  ],
 }
-
-export default configs[SVENCH ? "svench" : "lib"]()
diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
new file mode 100644
index 0000000000..4bb592aa26
--- /dev/null
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -0,0 +1,69 @@
+<script>
+  import "@spectrum-css/actionbutton/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+  const dispatch = createEventDispatcher()
+
+  export let quiet = false
+  export let emphasized = false
+  export let selected = false
+  export let longPressable = false
+  export let disabled = false
+  export let icon = ""
+  export let dataCy = null
+  export let size = "M"
+
+  function longPress(element) {
+    if (!longPressable) return
+    let timer
+
+    const listener = () => {
+      timer = setTimeout(() => {
+        dispatch("longpress")
+      }, 700)
+    }
+
+    element.addEventListener("pointerdown", listener)
+
+    return {
+      destroy() {
+        clearTimeout(timer)
+        element.removeEventListener("pointerdown", longPress)
+      },
+    }
+  }
+</script>
+
+<button
+  data-cy={dataCy}
+  use:longPress
+  class:spectrum-ActionButton--quiet={quiet}
+  class:spectrum-ActionButton--emphasized={emphasized}
+  class:is-selected={selected}
+  class="spectrum-ActionButton spectrum-ActionButton--size{size}"
+  {disabled}
+  on:longPress
+  on:click|preventDefault
+>
+  {#if longPressable}
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
+    </svg>
+  {/if}
+  {#if icon}
+    <svg
+      class="spectrum-Icon spectrum-Icon--size{size}"
+      focusable="false"
+      aria-hidden="true"
+      aria-label={icon}
+    >
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
+  {#if $$slots}
+    <span class="spectrum-ActionButton-label"><slot /></span>
+  {/if}
+</button>
diff --git a/packages/bbui/src/ActionGroup/ActionGroup.svelte b/packages/bbui/src/ActionGroup/ActionGroup.svelte
new file mode 100644
index 0000000000..43d8cd8de5
--- /dev/null
+++ b/packages/bbui/src/ActionGroup/ActionGroup.svelte
@@ -0,0 +1,26 @@
+<script>
+  import "@spectrum-css/actiongroup/dist/index-vars.css"
+  export let vertical = false
+  export let justified = false
+  export let quiet = false
+  export let compact = false
+
+  // Attaches a spectrum-ActionGroup-item class to buttons inside the div
+  function group(element) {
+    const buttons = Array.from(element.getElementsByTagName("button"))
+    buttons.forEach(button => {
+      button.classList.add("spectrum-ActionGroup-item")
+    })
+  }
+</script>
+
+<div
+  use:group
+  class:spectrum-ActionGroup--vertical={vertical}
+  class:spectrum-ActionGroup--justified={justified}
+  class:spectrum-ActionGroup--quiet={quiet}
+  class:spectrum-ActionGroup--compact={compact}
+  class="spectrum-ActionGroup"
+>
+  <slot />
+</div>
diff --git a/packages/bbui/src/ActionMenu/ActionMenu.svelte b/packages/bbui/src/ActionMenu/ActionMenu.svelte
new file mode 100644
index 0000000000..6947e69a7e
--- /dev/null
+++ b/packages/bbui/src/ActionMenu/ActionMenu.svelte
@@ -0,0 +1,38 @@
+<script>
+  import { setContext } from "svelte"
+  import Popover from "../Popover/Popover.svelte"
+  import Menu from "../Menu/Menu.svelte"
+
+  export let disabled = false
+
+  let anchor
+  let dropdown
+
+  // This is needed because display: contents is considered "invisible".
+  // It should only ever be an action button, so should be fine.
+  function getAnchor(node) {
+    anchor = node.firstChild
+  }
+
+  export const hide = () => {
+    dropdown.hide()
+  }
+  export const show = () => {
+    dropdown.show()
+  }
+
+  const openMenu = () => {
+    if (!disabled) show()
+  }
+
+  setContext("actionMenu", { show, hide })
+</script>
+
+<div use:getAnchor on:click={openMenu}>
+  <slot name="control" />
+</div>
+<Popover bind:this={dropdown} {anchor} align="left">
+  <Menu>
+    <slot />
+  </Menu>
+</Popover>
diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js
index 9257af5f5b..49a15d36a3 100644
--- a/packages/bbui/src/Actions/click_outside.js
+++ b/packages/bbui/src/Actions/click_outside.js
@@ -5,14 +5,14 @@ export default function clickOutside(element, callbackFunction) {
     }
   }
 
-  document.body.addEventListener("click", onClick, true)
+  document.body.addEventListener("mousedown", onClick, true)
 
   return {
     update(newCallbackFunction) {
       callbackFunction = newCallbackFunction
     },
     destroy() {
-      document.body.removeEventListener("click", onClick, true)
+      document.body.removeEventListener("mousedown", onClick, true)
     },
   }
 }
diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js
index 9bf5a40a67..a25cc1bbd5 100644
--- a/packages/bbui/src/Actions/position_dropdown.js
+++ b/packages/bbui/src/Actions/position_dropdown.js
@@ -18,10 +18,10 @@ export default function positionDropdown(element, { anchor, align }) {
     if (spaceAbove > spaceBelow) {
       positionSide = "bottom"
       maxHeight = spaceAbove - 20
-      y = window.innerHeight - spaceAbove
+      y = window.innerHeight - spaceAbove + 5
     } else {
       positionSide = "top"
-      y = bottom
+      y = bottom + 5
       maxHeight = spaceBelow - 20
     }
 
diff --git a/packages/bbui/src/Avatar/Avatar.svelte b/packages/bbui/src/Avatar/Avatar.svelte
new file mode 100644
index 0000000000..d2aef72446
--- /dev/null
+++ b/packages/bbui/src/Avatar/Avatar.svelte
@@ -0,0 +1,12 @@
+<script>
+  import "@spectrum-css/avatar/dist/index-vars.css"
+  export let url = ""
+  export let disabled = false
+</script>
+
+<img
+  class:is-disabled={disabled}
+  class="spectrum-Avatar"
+  src={url}
+  alt="Avatar"
+/>
diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte
index 5e403287e1..da4d405f02 100644
--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@@ -1,212 +1,52 @@
 <script>
-  export let primary = false,
-    secondary = false,
-    blue = false,
-    disabled = false,
-    translucent = false,
-    text = false,
-    red = false,
-    yellow = false,
-    orange = false,
-    green = false,
-    purple = false,
-    small = false,
-    medium = false,
-    wide = false,
-    large = false,
-    href = false
+  import "@spectrum-css/button/dist/index-vars.css"
+
+  export let disabled = false
+  export let size = "M"
+  export let cta = false
+  export let primary = false
+  export let secondary = false
+  export let warning = false
+  export let overBackground = false
+  export let quiet = false
+  export let icon = undefined
+  export let active = false
 </script>
 
-{#if href}
-  <a
-    {href}
-    class:primary
-    class:secondary
-    class:translucent
-    class:blue
-    class:red
-    class:yellow
-    class:orange
-    class:green
-    class:purple
-    class:small
-    class:medium
-    class:wide
-    class:large
-    class:text
-    {disabled}>
-    <slot />
-  </a>
-{:else}
-  <button
-    class:primary
-    class:secondary
-    class:translucent
-    class:blue
-    class:red
-    class:yellow
-    class:orange
-    class:green
-    class:purple
-    class:small
-    class:medium
-    class:wide
-    class:large
-    class:text
-    {disabled}
-    on:click|preventDefault>
-    <slot />
-  </button>
-{/if}
+<button
+  class:spectrum-Button--cta={cta}
+  class:spectrum-Button--primary={primary}
+  class:spectrum-Button--secondary={secondary}
+  class:spectrum-Button--warning={warning}
+  class:spectrum-Button--overBackground={overBackground}
+  class:spectrum-Button--quiet={quiet}
+  class:active
+  class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
+  {disabled}
+  on:click|preventDefault
+>
+  {#if icon}
+    <svg
+      class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
+      focusable="false"
+      aria-hidden="true"
+      aria-label={icon}
+    >
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
+  {#if $$slots}
+    <span class="spectrum-Button-label"><slot /></span>
+  {/if}
+</button>
 
 <style>
-  button,
-  a {
-    font-family: var(--font-sans);
-    cursor: pointer;
-    font-weight: 600;
-    box-sizing: border-box;
+  .spectrum-Button-label {
+    white-space: nowrap;
     overflow: hidden;
-    border-radius: var(--border-radius-s);
-    color: white;
-    padding: var(--spacing-s) var(--spacing-l);
-    transition: all 0.2s ease 0s;
-    display: inline-flex;
-    text-rendering: optimizeLegibility;
-    text-decoration: none;
-    min-width: auto;
-    outline: none;
-    font-feature-settings: "case" 1, "rlig" 1, "calt" 0;
-    -webkit-box-align: center;
-    user-select: none;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    margin: 0;
-    border-width: 2px;
-    border-style: solid;
-    border-color: transparent;
+    text-overflow: ellipsis;
   }
-
-  .primary {
-    color: var(--background);
-    border-color: var(--ink);
-    background-color: var(--ink);
-  }
-  button.primary:hover:not([disabled]) {
-    background-color: var(--background);
-    color: var(--ink);
-  }
-  .secondary {
-    border-color: var(--grey-4);
-    background-color: var(--background);
-    color: var(--grey-8);
-    font-weight: 500;
-  }
-  button.secondary:hover:not([disabled]) {
-    background-color: var(--grey-2);
-    color: var(--ink);
-  }
-  .translucent {
-    border-color: rgba(0, 0, 0, 0.1);
-    background-color: rgba(255, 255, 255, 0.1);
-    color: var(--grey-6);
-    font-weight: 500;
-  }
-  button.translucent:hover:not([disabled]) {
-    background-color: var(--grey-2);
-    color: var(--ink);
-  }
-  .blue {
-    background-color: var(--blue);
-    border-color: var(--blue);
-  }
-  button.blue:hover:not([disabled]) {
-    background-color: var(--blue-light);
-    color: var(--blue);
-  }
-  .red {
-    border-color: var(--red);
-    background-color: var(--red);
-    color: white;
-  }
-  button.red:hover:not([disabled]) {
-    background-color: var(--red-light);
-    color: var(--red);
-  }
-  .yellow {
-    border-color: var(--yellow);
-    background-color: var(--yellow);
-    color: white;
-  }
-  button.yellow:hover:not([disabled]) {
-    background-color: var(--yellow-light);
-    color: var(--yellow);
-  }
-  .orange {
-    border-color: var(--orange);
-    background-color: var(--orange);
-    color: white;
-  }
-  button.orange:hover:not([disabled]) {
-    background-color: var(--orange-light);
-    color: var(--orange);
-  }
-  .green {
-    border-color: var(--green);
-    background-color: var(--green);
-    color: white;
-  }
-  button.green:hover:not([disabled]) {
-    background-color: var(--green-light);
-    color: var(--green);
-  }
-  .purple {
-    border-color: var(--purple);
-    background-color: var(--purple);
-    color: white;
-  }
-  button.purple:hover:not([disabled]) {
-    background-color: var(--purple-light);
-    color: var(--purple);
-  }
-  .text {
-    background-color: transparent;
-    color: var(--grey-7);
-    border: none;
-    padding: 0;
-    font-weight: 500;
-  }
-  button.text:hover:not([disabled]) {
-    color: var(--ink);
-  }
-  button.text:active:not([disabled]) {
-    color: var(--blue);
-  }
-
-  .small {
-    font-size: var(--font-size-xs);
-    padding: var(--spacing-xs) var(--spacing-m);
-  }
-
-  .medium {
-    font-size: var(--font-size-m);
-    padding: var(--spacing-s) var(--spacing-l);
-  }
-
-  .large {
-    font-size: var(--font-size-l);
-    padding: var(--spacing-m) var(--layout-l);
-  }
-  .wide {
-    width: 100%;
-    display: flex;
-  }
-
-  button:disabled {
-    background-color: var(--grey-4);
-    cursor: not-allowed;
-    border-color: var(--grey-4);
-    color: var(--grey-5);
+  .active {
+    color: var(--spectrum-global-color-blue-600) !important;
   }
 </style>
diff --git a/packages/bbui/src/Button/Close.svelte b/packages/bbui/src/Button/Close.svelte
deleted file mode 100644
index f2b76cdb38..0000000000
--- a/packages/bbui/src/Button/Close.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<script>
-  export let onClose
-  export let dark = false
-  export let small = false
-</script>
-
-<button class:small class:dark on:click={onClose}>×</button>
-
-<style>
-  button {
-    display: block;
-    box-sizing: border-box;
-    position: absolute;
-    font-size: var(--font-size-l);
-    z-index: 1000;
-    top: var(--spacing-l);
-    right: var(--spacing-l);
-    margin: 0;
-    padding: 0;
-    width: 1.5rem;
-    height: 1.5rem;
-    border: 0;
-    color: black;
-    border-radius: var(--border-radius-xl);
-    background: white;
-    transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
-      background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
-    -webkit-appearance: none;
-    outline: none;
-  }
-
-  button:hover {
-    background-color: var(--grey-2);
-    cursor: pointer;
-  }
-
-  button:active {
-    background-color: var(--grey-4);
-    cursor: pointer;
-  }
-  .small {
-    font-size: var(--font-size-m);
-    line-height: 110%;
-    width: 1.3rem;
-    height: 1.3rem;
-  }
-  .dark {
-    color: white;
-    background: black;
-  }
-  .dark:hover {
-    background-color: var(--grey-8);
-    cursor: pointer;
-  }
-  .dark:active {
-    background-color: var(--grey-9);
-    cursor: pointer;
-  }
-</style>
diff --git a/packages/bbui/src/Button/Close.svench b/packages/bbui/src/Button/Close.svench
deleted file mode 100644
index 5bb7542b11..0000000000
--- a/packages/bbui/src/Button/Close.svench
+++ /dev/null
@@ -1,36 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Close from "./Close.svelte";
-</script>
-
-<style>
-  div {
-    display: block;
-    position: relative;
-    min-width: 400px;
-    height: 200px;
-    border: var(--border-dark);
-    border-radius: var(--border-radius-l);
-  }
-</style>
-
-<View name="default">
-  <div>
-    <Close />
-  </div>
-</View>
-<View name="dark color">
-  <div>
-    <Close dark />
-  </div>
-</View>
-<View name="small">
-  <div>
-    <Close small />
-  </div>
-</View>
-<View name="small dark">
-  <div>
-    <Close small dark />
-  </div>
-</View>
diff --git a/packages/bbui/src/Button/TextButton.svelte b/packages/bbui/src/Button/TextButton.svelte
deleted file mode 100644
index 351a2c45bf..0000000000
--- a/packages/bbui/src/Button/TextButton.svelte
+++ /dev/null
@@ -1,128 +0,0 @@
-<script>
-  export let active = false,
-    text = false,
-    small = false,
-    medium = false,
-    large = false,
-    blue = false,
-    green = false,
-    yellow = false,
-    purple = false,
-    red = false,
-    orange = false,
-    disabled = false,
-    href = false
-</script>
-
-{#if href}
-  <a
-    {href}
-    class:active
-    class:small
-    class:medium
-    class:large
-    class:text
-    class:blue
-    class:green
-    class:yellow
-    class:purple
-    class:red
-    class:orange><slot /></a>
-{:else}
-  <button
-    class:active
-    class:small
-    class:medium
-    class:large
-    class:text
-    class:blue
-    class:green
-    class:yellow
-    class:purple
-    class:red
-    class:orange
-    {disabled}
-    on:click|preventDefault>
-    <slot />
-  </button>
-{/if}
-
-<style>
-  button,
-  a {
-    font-family: var(--font-sans);
-    cursor: pointer;
-    font-weight: 600;
-    box-sizing: border-box;
-    overflow: hidden;
-    transition: all 0.08s ease 0s;
-    display: inline-flex;
-    align-items: center;
-    text-rendering: optimizeLegibility;
-    text-decoration: none;
-    outline: none;
-    -webkit-box-align: center;
-    user-select: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .text {
-    background-color: transparent;
-    color: var(--grey-7);
-    border: none;
-    font-weight: 500;
-  }
-  button.text:hover:not([disabled]) {
-    color: var(--ink);
-  }
-  button.text:active:not([disabled]) {
-    color: var(--blue);
-  }
-  button.text.active:not([disabled]) {
-    color: var(--blue);
-  }
-  button.text:disabled {
-    cursor: not-allowed;
-    color: var(--grey-4);
-  }
-
-  .blue {
-    color: var(--blue);
-  }
-
-  .green {
-    color: var(--green);
-  }
-
-  .red {
-    color: var(--red);
-  }
-
-  .purple {
-    color: var(--purple);
-  }
-
-  .yellow {
-    color: var(--yellow);
-  }
-
-  .orange {
-    color: var(--orange);
-  }
-
-  .small {
-    font-size: var(--font-size-xs);
-    margin: 0;
-  }
-
-  .medium {
-    font-size: var(--font-size-s);
-    margin: 0;
-  }
-
-  .large {
-    font-size: var(--font-size-m);
-    margin: 0;
-  }
-</style>
diff --git a/packages/bbui/src/Button/TextButton.svench b/packages/bbui/src/Button/TextButton.svench
deleted file mode 100644
index e3c3477805..0000000000
--- a/packages/bbui/src/Button/TextButton.svench
+++ /dev/null
@@ -1,69 +0,0 @@
-<script>
-  import { View } from "svench";
-  import TextButton from "./TextButton.svelte";
-  import Icon from "../Icons/Icon.svelte";
-</script>
-
-<style>
-  div {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    gap: var(--spacing-xl);
-  }
-</style>
-
-<View name="Text">
-  <div>
-    <TextButton text small on:click={() => alert('Clicked!')}>
-      <Icon name="view" />
-      Add View
-    </TextButton>
-    <TextButton text medium on:click={() => alert('Clicked!')}>
-      <Icon name="addcolumn" />
-      Add Column
-    </TextButton>
-    <TextButton text large on:click={() => alert('Clicked!')}>
-      <Icon name="addrow" />
-      Add Row
-    </TextButton>
-    <TextButton text disabled on:click={() => alert('Clicked!')}>
-      <Icon name="arrow" direction="w" />
-      Disabled Text Button
-    </TextButton>
-    <TextButton active text on:click={() => alert('Clicked!')}>
-      <Icon name="calculate" />
-      Active Calculation
-    </TextButton>
-  </div>
-</View>
-
-<View name="Colours">
-  <div>
-    <TextButton text medium yellow on:click={() => alert('Clicked!')}>
-      <Icon name="view" />
-      Add View
-    </TextButton>
-    <TextButton text medium blue on:click={() => alert('Clicked!')}>
-      <Icon name="addcolumn" />
-      Add Column
-    </TextButton>
-    <TextButton text medium purple on:click={() => alert('Clicked!')}>
-      <Icon name="addrow" />
-      Add Row
-    </TextButton>
-    <TextButton text medium red on:click={() => alert('Clicked!')}>
-      <Icon name="arrow" />
-      Delete
-    </TextButton>
-    <TextButton text medium green on:click={() => alert('Clicked!')}>
-      <Icon name="calculate" />
-      Calculate
-    </TextButton>
-  </div>
-</View>
-
-<View name="Usage as a link">
-  <div>
-    <TextButton green text href="https://google.com">This is a link</TextButton>
-  </div>
-</View>
diff --git a/packages/bbui/src/ButtonGroup/ButtonGroup.svelte b/packages/bbui/src/ButtonGroup/ButtonGroup.svelte
new file mode 100644
index 0000000000..b845a770e1
--- /dev/null
+++ b/packages/bbui/src/ButtonGroup/ButtonGroup.svelte
@@ -0,0 +1,19 @@
+<script>
+  import "@spectrum-css/buttongroup/dist/index-vars.css"
+  export let vertical = false
+
+  function group(element) {
+    const buttons = Array.from(element.getElementsByTagName("button"))
+    buttons.forEach(button => {
+      button.classList.add("spectrum-ButtonGroup-item")
+    })
+  }
+</script>
+
+<div
+  use:group
+  class="spectrum-ButtonGroup"
+  class:spectrum-ButtonGroup--vertical={vertical}
+>
+  <slot />
+</div>
diff --git a/packages/bbui/src/ClearButton/ClearButton.svelte b/packages/bbui/src/ClearButton/ClearButton.svelte
new file mode 100644
index 0000000000..5a2f6bc04c
--- /dev/null
+++ b/packages/bbui/src/ClearButton/ClearButton.svelte
@@ -0,0 +1,19 @@
+<script>
+  export let small = false
+  export let disabled
+</script>
+
+<button
+  on:click
+  class="spectrum-ClearButton"
+  class:spectrum-ClearButton--small={small}
+  {disabled}
+>
+  <svg
+    class="spectrum-Icon spectrum-UIIcon-Cross75"
+    focusable="false"
+    aria-hidden="true"
+  >
+    <use xlink:href="#spectrum-css-icon-Cross75" />
+  </svg>
+</button>
diff --git a/packages/bbui/src/DatePicker/DatePicker.svelte b/packages/bbui/src/DatePicker/DatePicker.svelte
deleted file mode 100644
index 2f87a48a43..0000000000
--- a/packages/bbui/src/DatePicker/DatePicker.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script>
-  import Flatpickr from "svelte-flatpickr"
-  import { Label, Input } from "../"
-  import "flatpickr/dist/flatpickr.css"
-
-  const PICKER_OPTIONS = {
-    enableTime: true,
-  }
-
-  export let label
-  export let placeholder
-  export let value
-  export let thin = false
-</script>
-
-<div class:thin>
-  {#if label}
-    <Label extraSmall grey>{label}</Label>
-  {/if}
-  <Flatpickr {placeholder} options={PICKER_OPTIONS} on:change bind:value />
-</div>
-
-<style>
-  :global(.flatpickr-input) {
-    width: 100%;
-    min-width: 0;
-    box-sizing: border-box;
-    color: var(--ink);
-    border-radius: 5px;
-    border: none;
-    background-color: var(--grey-2);
-    padding: var(--spacing-m);
-    font-size: var(--font-size-s);
-    margin: 0;
-    outline: none;
-    border: var(--border-transparent);
-  }
-  :global(.flatpickr-input:focus) {
-    border: var(--border-blue);
-  }
-
-  div.thin :global(.flatpickr-input) {
-    font-size: var(--font-size-xs);
-  }
-</style>
diff --git a/packages/bbui/src/DatePicker/DatePicker.svench b/packages/bbui/src/DatePicker/DatePicker.svench
deleted file mode 100644
index ed0d480a6f..0000000000
--- a/packages/bbui/src/DatePicker/DatePicker.svench
+++ /dev/null
@@ -1,17 +0,0 @@
-<script>
-  import { View } from "svench";
-  import DatePicker from "./DatePicker.svelte";
-
-  function handleChange(event) {
-    const [fullDate, shortDate, instance] = event.detail
-    alert("Date is " + fullDate)
-  }
-</script>
-
-<View name="default">
-  <DatePicker on:change={handleChange} label="Start Date" placeholder="Pick a date" />
-</View>
-
-<View name="thin">
-  <DatePicker on:change={handleChange} label="Start Date" thin placeholder="Pick a date" />
-</View>
\ No newline at end of file
diff --git a/packages/bbui/src/List/Items/DetailSummary.svelte b/packages/bbui/src/DetailSummary/DetailSummary.svelte
similarity index 84%
rename from packages/bbui/src/List/Items/DetailSummary.svelte
rename to packages/bbui/src/DetailSummary/DetailSummary.svelte
index 8e3a08276a..1c39bc6aa7 100644
--- a/packages/bbui/src/List/Items/DetailSummary.svelte
+++ b/packages/bbui/src/DetailSummary/DetailSummary.svelte
@@ -1,4 +1,5 @@
 <script>
+  import Icon from "../Icon/Icon.svelte"
   import { createEventDispatcher } from "svelte"
 
   const dispatch = createEventDispatcher()
@@ -7,8 +8,6 @@
   export let name,
     show = false
 
-  const capitalize = name => name[0].toUpperCase() + name.slice(1)
-
   const onHeaderClick = () => {
     show = !show
     if (show) {
@@ -19,9 +18,9 @@
 
 <div class="property-group-container" class:thin>
   <div class="property-group-name" on:click={onHeaderClick}>
-    <div class:thin class="name">{capitalize(name)}</div>
+    <div class:thin class="name">{name}</div>
     <div class="icon">
-      <i class={show ? 'ri-arrow-down-s-fill' : 'ri-arrow-left-s-fill'} />
+      <Icon size="S" name={show ? "Remove" : "Add"} />
     </div>
   </div>
   <div class="property-panel" class:show>
@@ -57,10 +56,12 @@
     flex: 1 1 auto;
     overflow: hidden;
     text-overflow: ellipsis;
+    text-transform: capitalize;
     white-space: nowrap;
+    user-select: none;
   }
   .name.thin {
-    font-size: var(--font-size-xs);
+    font-size: var(--spectrum-global-dimension-font-size-75);
   }
 
   .icon {
diff --git a/packages/bbui/src/Divider/Divider.svelte b/packages/bbui/src/Divider/Divider.svelte
new file mode 100644
index 0000000000..2b4de9cfb0
--- /dev/null
+++ b/packages/bbui/src/Divider/Divider.svelte
@@ -0,0 +1,25 @@
+<script>
+  import "@spectrum-css/divider/dist/index-vars.css"
+  export let size = "M"
+
+  export let vertical = false
+  export let noMargin = false
+  export let noGrid = false
+</script>
+
+<hr
+  class:noMargin
+  class:noGrid
+  class="spectrum-Divider spectrum-Divider--{vertical
+    ? 'vertical'
+    : 'horizontal'} spectrum-Dialog-divider spectrum-Divider--size{size}"
+/>
+
+<style>
+  hr.noMargin {
+    margin: 0;
+  }
+  hr.noGrid {
+    grid-area: auto;
+  }
+</style>
diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 2f0cc1b4f3..3658fdb7fe 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -1,7 +1,9 @@
 <script>
   import { slide } from "svelte/transition"
   import Portal from "svelte-portal"
-  import clickOutside from "../Actions/click_outside"
+  import ActionButton from "../ActionButton/ActionButton.svelte"
+  import Body from "../Typography/Body.svelte"
+  import Heading from "../Typography/Heading.svelte"
 
   export let title
 
@@ -35,12 +37,14 @@
     <section class="drawer" transition:slide>
       <header>
         <div class="text">
-          <div class="title">{title}</div>
-          <slot name="description" />
+          <Heading size="XS">{title}</Heading>
+          <Body size="XXS">
+            <slot name="description" />
+          </Body>
         </div>
-        <div class="controls">
+        <div class="buttons">
           <slot name="buttons" />
-          <i class="ri-close-fill close" on:click={hide} />
+          <ActionButton quiet icon="Close" on:click={hide} />
         </div>
       </header>
       <slot name="body" />
@@ -64,25 +68,17 @@
     justify-content: space-between;
     align-items: center;
     border-bottom: var(--border-light);
-    padding: var(--spacing-m);
+    padding: var(--spectrum-alias-item-padding-s) 0;
+  }
+  header :global(*) + :global(*) {
+    margin: 0 var(--spectrum-alias-grid-baseline);
   }
 
-  .controls {
-    display: grid;
-    grid-auto-flow: column;
-    grid-gap: var(--spacing-m);
-    align-items: center;
-  }
-
-  .close {
-    font-size: var(--font-size-xl);
-    cursor: pointer;
-  }
-  .title {
-    font-weight: bold;
-    margin-right: var(--spacing-m);
-  }
   .text {
     display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    margin-left: var(--spectrum-alias-item-padding-s);
   }
 </style>
diff --git a/packages/bbui/src/Drawer/DrawerContent.svelte b/packages/bbui/src/Drawer/DrawerContent.svelte
new file mode 100644
index 0000000000..955abc0da4
--- /dev/null
+++ b/packages/bbui/src/Drawer/DrawerContent.svelte
@@ -0,0 +1,43 @@
+<div class="drawer-contents">
+  <div class:no-sidebar={!$$slots.sidebar} class="container">
+    {#if $$slots.sidebar}
+      <div class="sidebar">
+        <slot name="sidebar" />
+      </div>
+    {/if}
+    <div class="main">
+      <slot />
+    </div>
+  </div>
+</div>
+
+<style>
+  .drawer-contents {
+    height: 40vh;
+    overflow-y: auto;
+  }
+  .container {
+    height: 100%;
+    display: grid;
+    grid-template-columns: 290px 1fr;
+  }
+  .no-sidebar {
+    grid-template-columns: 1fr;
+  }
+  .sidebar {
+    border-right: var(--border-light);
+    overflow: auto;
+  }
+  .sidebar::-webkit-scrollbar {
+    display: none;
+  }
+  .main {
+    font-family: var(--font-sans);
+  }
+  .main :global(textarea) {
+    min-height: 200px;
+  }
+  .main :global(p) {
+    margin: 0;
+  }
+</style>
diff --git a/packages/bbui/src/DropdownMenu/DropdownMenu.svelte b/packages/bbui/src/DropdownMenu/DropdownMenu.svelte
deleted file mode 100644
index decc5bb4e2..0000000000
--- a/packages/bbui/src/DropdownMenu/DropdownMenu.svelte
+++ /dev/null
@@ -1,77 +0,0 @@
-<script>
-  import Portal from "svelte-portal"
-  import { createEventDispatcher } from "svelte"
-  import buildStyle from "../utils/buildStyle"
-  import positionDropdown from "../Actions/position_dropdown"
-  import clickOutside from "../Actions/click_outside"
-
-  const dispatch = createEventDispatcher()
-
-  export let anchor
-  export let align = "right"
-  export let borderColor = ""
-
-  export const show = () => {
-    dispatch("open")
-    open = true
-  }
-
-  export const hide = () => {
-    dispatch("close")
-    open = false
-  }
-
-  let open = null
-
-  function handleEscape(e) {
-    if (open && e.key === "Escape") {
-      hide()
-    }
-  }
-
-  $: menuStyle = buildStyle({
-    borderColor,
-  })
-</script>
-
-{#if open}
-  <Portal>
-    <div
-      tabindex="0"
-      class:open
-      use:positionDropdown={{ anchor, align }}
-      use:clickOutside={hide}
-      style={menuStyle}
-      on:keydown={handleEscape}
-      class="menu-container">
-      <slot />
-    </div>
-  </Portal>
-{/if}
-
-<style>
-  .menu-container {
-    position: fixed;
-    margin-top: var(--spacing-xs);
-    outline: none;
-    box-sizing: border-box;
-    opacity: 0;
-    min-width: 200px;
-    z-index: 2;
-    color: var(--ink);
-    font-weight: 400;
-    height: fit-content !important;
-    border: var(--border-dark);
-    border-radius: var(--border-radius-m);
-    transform: scale(0);
-    transition: opacity 0.13s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1);
-    overflow-y: auto;
-    background: var(--background);
-    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
-  }
-
-  .open {
-    transform: scale(1);
-    opacity: 1;
-  }
-</style>
diff --git a/packages/bbui/src/DropdownMenu/DropdownMenu.svench b/packages/bbui/src/DropdownMenu/DropdownMenu.svench
deleted file mode 100644
index af4e32db2e..0000000000
--- a/packages/bbui/src/DropdownMenu/DropdownMenu.svench
+++ /dev/null
@@ -1,161 +0,0 @@
-<script>
-  import { View } from "svench";
-  import DropdownMenu from "./DropdownMenu.svelte";
-  import Button from "../Button/Button.svelte";
-  import Icon from "../Icons/Icon.svelte";
-
-  let anchorRight;
-  let anchorLeft;
-  let dropdownRight;
-  let dropdownLeft;
-</script>
-
-<style>
-  ul {
-    list-style: none;
-    padding-left: 0;
-    margin: 0;
-    padding: var(--spacing-s) 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0px;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  li:hover {
-    background-color: var(--grey-2);
-  }
-
-  li:active {
-    color: var(--blue);
-  }
-</style>
-
-<View name="Right Align (default)">
-  <div bind:this={anchorRight}>
-    <Button primary on:click={dropdownRight.show}>Right Align</Button>
-  </div>
-  <DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
-    <ul>
-      <li>Item 1</li>
-      <li>Item 2</li>
-      <li>Item 3</li>
-    </ul>
-  </DropdownMenu>
-</View>
-
-<View name="Left Align">
-  <div bind:this={anchorLeft}>
-    <Button primary on:click={dropdownLeft.show}>Left Align</Button>
-  </div>
-  <DropdownMenu bind:this={dropdownLeft} anchor={anchorLeft} align="left">
-    <ul>
-      <li>Item 1</li>
-      <li>Item 2</li>
-      <li>Item 3</li>
-    </ul>
-  </DropdownMenu>
-</View>
-
-<View name="Left Align, TextButton, Small, Icons">
-  <div bind:this={anchorLeft}>
-    <Button text on:click={dropdownLeft.show}>
-      Field Name
-      <Icon name="arrowdown" />
-    </Button>
-  </div>
-  <DropdownMenu bind:this={dropdownLeft} anchor={anchorLeft} align="left">
-    <ul>
-      <li>
-        <Icon name="edit" />
-        Edit
-      </li>
-      <li>
-        <Icon name="delete" />
-        Delete
-      </li>
-      <li>
-        <Icon name="sortascending" />
-        Sort A - Z
-      </li>
-      <li>
-        <Icon name="sortdescending" />
-        Sort Z - A
-      </li>
-    </ul>
-  </DropdownMenu>
-</View>
-<View name="Dropdown menu with slim menu and border color">
-  <div bind:this={anchorLeft}>
-    <Button primary on:click={dropdownLeft.show}>
-      Field Name
-      <Icon name="arrowdown" />
-    </Button>
-  </div>
-  <DropdownMenu
-    bind:this={dropdownLeft}
-    width="175px"
-    borderColor="#d1d1d1ff"
-    anchor={anchorLeft}
-    align="left">
-    <ul>
-      <li>
-        <Icon name="edit" />
-        Edit
-      </li>
-      <li>
-        <Icon name="delete" />
-        Delete
-      </li>
-      <li>
-        <Icon name="sortascending" />
-        Sort A - Z
-      </li>
-      <li>
-        <Icon name="sortdescending" />
-        Sort Z - A
-      </li>
-    </ul>
-  </DropdownMenu>
-</View>
-<View name="Dropdown on close event example">
-  <div bind:this={anchorLeft}>
-    <Button primary on:click={dropdownLeft.show}>
-      Field Name
-      <Icon name="arrowdown" />
-    </Button>
-  </div>
-  <DropdownMenu
-    on:close={() => alert('Closed!')}
-    bind:this={dropdownLeft}
-    width="175px"
-    borderColor="#d1d1d1ff"
-    anchor={anchorLeft}
-    align="left">
-    <ul>
-      <li>
-        <Icon name="edit" />
-        Edit
-      </li>
-      <li>
-        <Icon name="delete" />
-        Delete
-      </li>
-      <li>
-        <Icon name="sortascending" />
-        Sort A - Z
-      </li>
-      <li>
-        <Icon name="sortdescending" />
-        Sort Z - A
-      </li>
-    </ul>
-  </DropdownMenu>
-</View>
\ No newline at end of file
diff --git a/packages/bbui/src/Dropzone/Dropzone.svelte b/packages/bbui/src/Dropzone/Dropzone.svelte
deleted file mode 100644
index 4f4f4bc7bf..0000000000
--- a/packages/bbui/src/Dropzone/Dropzone.svelte
+++ /dev/null
@@ -1,295 +0,0 @@
-<script>
-  import { Heading, Body, Button } from "../"
-  import { FILE_TYPES } from "./fileTypes"
-
-  const BYTES_IN_KB = 1000
-  const BYTES_IN_MB = 1000000
-
-  export let icons = {
-    image: "fas fa-file-image",
-    code: "fas fa-file-code",
-    file: "fas fa-file",
-    fileUpload: "fas fa-upload",
-  }
-
-  export let files = []
-  export let fileSizeLimit = BYTES_IN_MB * 20
-  export let processFiles
-  export let handleFileTooLarge
-
-  let selectedImageIdx = 0
-  let fileDragged = false
-  // Generate a random ID so that multiple dropzones on the page don't conflict
-  let id = Math.random()
-    .toString(36)
-    .substring(7)
-
-  $: selectedImage = files ? files[selectedImageIdx] : null
-
-  function determineFileIcon(extension) {
-    const ext = extension.toLowerCase()
-
-    if (FILE_TYPES.IMAGE.includes(ext)) return icons.image
-    if (FILE_TYPES.CODE.includes(ext)) return icons.code
-
-    return icons.file
-  }
-
-  async function processFileList(fileList) {
-    if (Array.from(fileList).some(file => file.size >= fileSizeLimit)) {
-      handleFileTooLarge(fileSizeLimit, file)
-      return
-    }
-
-    const processedFiles = await processFiles(fileList)
-
-    files = [...processedFiles, ...files]
-    selectedImageIdx = 0
-  }
-
-  async function removeFile() {
-    files.splice(selectedImageIdx, 1)
-    files = files
-    selectedImageIdx = 0
-  }
-
-  function navigateLeft() {
-    selectedImageIdx -= 1
-  }
-
-  function navigateRight() {
-    selectedImageIdx += 1
-  }
-
-  function handleFile(evt) {
-    processFileList(evt.target.files)
-  }
-
-  function handleDragOver(evt) {
-    evt.preventDefault()
-    fileDragged = true
-  }
-
-  function handleDragLeave(evt) {
-    evt.preventDefault()
-    fileDragged = false
-  }
-
-  function handleDrop(evt) {
-    evt.preventDefault()
-    processFileList(evt.dataTransfer.files)
-    fileDragged = false
-  }
-</script>
-
-<div
-  class="dropzone"
-  on:dragover={handleDragOver}
-  on:dragleave={handleDragLeave}
-  on:dragenter={handleDragOver}
-  on:drop={handleDrop}
-  class:fileDragged>
-  {#if selectedImage}
-    <ul>
-      <li>
-        <header>
-          <div>
-            <i class={determineFileIcon(selectedImage.extension)} />
-            <span class="filename">{selectedImage.name}</span>
-          </div>
-          <p>
-            {#if selectedImage.size <= BYTES_IN_MB}
-              {selectedImage.size / BYTES_IN_KB}KB
-            {:else}{selectedImage.size / BYTES_IN_MB}MB{/if}
-          </p>
-        </header>
-        <div class="delete-button" on:click={removeFile}>
-          <i class="ri-close-circle-fill" />
-        </div>
-        {#if selectedImageIdx !== 0}
-          <div class="nav left" on:click={navigateLeft}>
-            <i class="ri-arrow-left-circle-fill" />
-          </div>
-        {/if}
-        <img alt="preview" src={selectedImage.url} />
-        {#if selectedImageIdx !== files.length - 1}
-          <div class="nav right" on:click={navigateRight}>
-            <i class="ri-arrow-right-circle-fill" />
-          </div>
-        {/if}
-      </li>
-    </ul>
-  {/if}
-  <i class={icons.fileUpload} />
-  <input {id} type="file" multiple on:change={handleFile} {...$$restProps} />
-  <i class="ri-upload-cloud-line" />
-  <p class="drop">Drop your files here</p>
-  <label for={id}>Select a file from your computer</label>
-</div>
-
-<style>
-  .dropzone {
-    padding: var(--spacing-l);
-    border: 2px dashed var(--grey-4);
-    text-align: center;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    border-radius: 10px;
-    transition: all 0.3s;
-  }
-
-  .fileDragged {
-    border: 2px dashed var(--grey-7);
-    background: var(--blue-light);
-  }
-
-  input[type="file"] {
-    display: none;
-  }
-
-  label {
-    font-family: var(--font-sans);
-    font-size: var(--font-size-s);
-    cursor: pointer;
-    overflow: hidden;
-    color: var(--grey-7);
-    text-rendering: optimizeLegibility;
-    min-width: auto;
-    outline: none;
-    font-feature-settings: "case" 1, "rlig" 1, "calt" 0;
-    -webkit-box-align: center;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    text-decoration: underline;
-  }
-
-  .drop {
-    font-family: var(--font-sans);
-    font-size: var(--font-size-s);
-    margin: 12px 0;
-  }
-
-  div.nav {
-    padding: var(--spacing-xs);
-    position: absolute;
-    display: flex;
-    align-items: center;
-    bottom: var(--spacing-s);
-    border-radius: 5px;
-    transition: 0.2s transform;
-  }
-
-  .nav:hover {
-    cursor: pointer;
-    color: var(--blue);
-  }
-
-  .left {
-    left: var(--spacing-s);
-  }
-
-  .right {
-    right: var(--spacing-s);
-  }
-
-  li {
-    position: relative;
-    height: 300px;
-    background: var(--grey-7);
-    display: flex;
-    justify-content: center;
-    border-radius: 10px;
-  }
-
-  img {
-    border-radius: 10px;
-    width: 100%;
-    box-shadow: 0 var(--spacing-s) 12px rgba(0, 0, 0, 0.15);
-    object-fit: contain;
-  }
-
-  i {
-    font-size: 2rem;
-    color: var(--ink);
-  }
-
-  i:hover {
-    cursor: pointer;
-    color: var(--background);
-  }
-
-  .file-icon {
-    color: var(--background);
-    font-size: 2em;
-    margin-right: var(--spacing-s);
-  }
-
-  ul {
-    padding: 0;
-    display: grid;
-    grid-gap: var(--spacing-s);
-    list-style-type: none;
-    width: 100%;
-  }
-
-  header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: absolute;
-    background: linear-gradient(
-      180deg,
-      rgb(255, 255, 255),
-      rgba(255, 255, 255, 0)
-    );
-    width: 100%;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    height: 60px;
-  }
-
-  header > div {
-    color: var(--ink);
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    margin-left: var(--spacing-m);
-    width: 60%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .filename {
-    overflow: hidden;
-    margin-left: 5px;
-    text-overflow: ellipsis;
-  }
-
-  header > p {
-    color: var(--grey-5);
-    margin-right: var(--spacing-m);
-  }
-
-  .delete-button {
-    position: absolute;
-    top: var(--spacing-s);
-    right: var(--spacing-s);
-    padding: var(--spacing-s);
-    border-radius: 10px;
-    transition: all 0.3s;
-  }
-
-  .delete-button i {
-    font-size: 2em;
-    color: var(--ink);
-  }
-
-  .delete-button:hover {
-    cursor: pointer;
-    color: var(--red);
-  }
-</style>
diff --git a/packages/bbui/src/Dropzone/Dropzone.svench b/packages/bbui/src/Dropzone/Dropzone.svench
deleted file mode 100644
index 110195ab5a..0000000000
--- a/packages/bbui/src/Dropzone/Dropzone.svench
+++ /dev/null
@@ -1,17 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Dropzone from "./Dropzone.svelte";
-
-  async function processFiles(files) {
-    console.log("Processing", files);
-    return files;
-  }
-
-  function handleFileTooLarge() {
-    alert("File too large.");
-  }
-</script>
-
-<View name="dropzone">
-  <Dropzone {processFiles} {handleFileTooLarge} />
-</View>
diff --git a/packages/bbui/src/Dropzone/fileTypes.js b/packages/bbui/src/Dropzone/fileTypes.js
deleted file mode 100644
index 1ebd85070b..0000000000
--- a/packages/bbui/src/Dropzone/fileTypes.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export const FILE_TYPES = {
-  IMAGE: ["png", "tiff", "gif", "raw", "jpg", "jpeg", "svg"],
-  CODE: ["js", "rs", "py", "java", "rb", "hs", "yml"],
-  DOCUMENT: ["odf", "docx", "doc", "pdf", "csv"],
-}
diff --git a/packages/bbui/src/Form/Checkbox.svelte b/packages/bbui/src/Form/Checkbox.svelte
index 21d5450123..1f3e439c2a 100644
--- a/packages/bbui/src/Form/Checkbox.svelte
+++ b/packages/bbui/src/Form/Checkbox.svelte
@@ -1,140 +1,22 @@
 <script>
+  import Field from "./Field.svelte"
+  import Checkbox from "./Core/Checkbox.svelte"
   import { createEventDispatcher } from "svelte"
 
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let text = null
+  export let disabled = false
+  export let error = null
+
   const dispatch = createEventDispatcher()
-
-  export let checked = false
-  export let value
-  export let name
-  export let disabled
-
-  function handleChange() {
-    if (disabled) return
-    checked = !checked
-    dispatch("change", checked)
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
   }
 </script>
 
-<div class="container">
-  <input
-    {disabled}
-    on:change={handleChange}
-    {value}
-    bind:checked
-    type="checkbox"
-    {name}
-    class="checkbox"
-    id={value} />
-  <div class="checkbox-container" on:click={handleChange}>
-    <div class:disabled class="check-div" class:checked>
-      <div class="tick_mark" />
-    </div>
-  </div>
-  <slot />
-</div>
-
-<style>
-  .container {
-    display: flex;
-    gap: var(--spacing-s);
-  }
-  .checkbox-container {
-    position: relative;
-    z-index: 0;
-  }
-
-  .checkbox {
-    display: none;
-  }
-
-  .check-div {
-    position: relative;
-    width: 20px;
-    height: 20px;
-    background-color: var(--grey-2);
-    cursor: pointer;
-    transition: 0.2s ease transform, 0.2s ease background-color,
-      0.2s ease box-shadow;
-    overflow: hidden;
-    border-radius: 4px;
-  }
-
-  .check-div:before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    right: 0;
-    left: 0;
-    width: 12px;
-    height: 12px;
-    margin: 0 auto;
-    background-color: var(--background);
-    transform: translateY(-50%);
-    transition: 0.2s ease width, 0.2s ease height;
-    border-radius: 2px;
-  }
-
-  .check-div:active {
-    transform: translateY(-50%) scale(0.9);
-  }
-
-  .tick_mark {
-    position: absolute;
-    top: 50%;
-    left: 6px;
-    width: 5px;
-    height: 4px;
-    margin: 0 auto;
-    transform: rotateZ(-40deg);
-  }
-
-  .tick_mark:before,
-  .tick_mark:after {
-    content: "";
-    position: absolute;
-    background-color: var(--ink);
-    border-radius: 2px;
-    opacity: 0;
-    transition: 0.2s ease transform, 0.2s ease opacity;
-  }
-
-  .tick_mark:before {
-    left: 0;
-    bottom: 0;
-    width: 2px;
-    height: 6px;
-    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
-    transform: translateY(-68px);
-  }
-
-  .tick_mark:after {
-    left: 0;
-    bottom: 0;
-    width: 12px;
-    height: 2px;
-    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
-    transform: translateX(78px);
-  }
-
-  .check-div.disabled:active {
-    transform: none;
-  }
-
-  .checked {
-    background-color: var(--grey-2);
-  }
-  .checked.disabled {
-    background-color: var(--grey-5);
-  }
-
-  .checked:before {
-    width: 0;
-    height: 0;
-  }
-
-  .checked .tick_mark:before,
-  .checked .tick_mark:after {
-    transform: translate(0);
-    opacity: 1;
-  }
-</style>
+<Field {label} {labelPosition} {disabled} {error}>
+  <Checkbox {error} {disabled} {text} {value} on:change={onChange} />
+</Field>
diff --git a/packages/bbui/src/Form/Checkbox.svench.svx b/packages/bbui/src/Form/Checkbox.svench.svx
deleted file mode 100644
index b3246ec9d2..0000000000
--- a/packages/bbui/src/Form/Checkbox.svench.svx
+++ /dev/null
@@ -1,67 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Checkbox from "./Checkbox.svelte";
-
-  let checked = false
-
-  let menu = [
-    {text: 'Cookies and cream', checked: false},
-    {text: 'Mint choc chip', checked: false},
-    {text: 'Raspberry ripple', checked: true}
-  ];
-</script>
-
-<View name="Single checkbox">
-      <Checkbox bind:checked value="value">
-        <label for="value">One single checkbox with text</label>
-      </Checkbox>
-</View>
-
-<View name="Single disabled checkbox">
-  <Checkbox disabled checked value="value">
-    <label for="someOtherValue">A disabled checkbox</label>
-  </Checkbox>
-</View>
-
-<View name="No text">
-  <Checkbox bind:checked value="somevalue" />
-</View>
-
-## Multiple checkboxes
-Use an array and an each block to use multiple checkboxes
-```svelte
-<script>
-  let menu = [
-    {text: 'Cookies and cream', checked: false},
-    {text: 'Mint choc chip', checked: false},
-    {text: 'Raspberry ripple', checked: true}
-  ];
-</script>
-
-{#each menu as {text, checked}}
-  <Checkbox value={text} bind:checked>
-    <label for={text}>{text}</label>
-  </Checkbox>
-{/each}
-```
-
-<View name="Multiple checkboxes">
-  <div class="container">
-    {#each menu as {text, checked}}
-      <Checkbox value={text} bind:checked>
-        <label for={text}>{text}</label>
-      </Checkbox>
-    {/each}
-  </div>
-</View>
-
-<style>
-    label {
-      display: grid;
-      place-items: center;
-    }
-  .container {
-    display: grid;
-    grid-gap: 10px;
-  }
-</style>
\ No newline at end of file
diff --git a/packages/bbui/src/Form/Combobox.svelte b/packages/bbui/src/Form/Combobox.svelte
new file mode 100644
index 0000000000..e08e609732
--- /dev/null
+++ b/packages/bbui/src/Form/Combobox.svelte
@@ -0,0 +1,40 @@
+<script>
+  import Field from "./Field.svelte"
+  import Combobox from "./Core/Combobox.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let label = undefined
+  export let disabled = false
+  export let labelPosition = "above"
+  export let error = null
+  export let placeholder = "Choose an option"
+  export let options = []
+  export let getOptionLabel = option => extractProperty(option, "label")
+  export let getOptionValue = option => extractProperty(option, "value")
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+  const extractProperty = (value, property) => {
+    if (value && typeof value === "object") {
+      return value[property]
+    }
+    return value
+  }
+</script>
+
+<Field {label} {labelPosition} {disabled} {error}>
+  <Combobox
+    {error}
+    {disabled}
+    {value}
+    {options}
+    {placeholder}
+    {getOptionLabel}
+    {getOptionValue}
+    on:change={onChange}
+  />
+</Field>
diff --git a/packages/bbui/src/Form/Core/Checkbox.svelte b/packages/bbui/src/Form/Core/Checkbox.svelte
new file mode 100644
index 0000000000..7d564d2a9d
--- /dev/null
+++ b/packages/bbui/src/Form/Core/Checkbox.svelte
@@ -0,0 +1,47 @@
+<script>
+  import "@spectrum-css/checkbox/dist/index-vars.css"
+  import "@spectrum-css/fieldgroup/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = false
+  export let error = null
+  export let id = null
+  export let text = null
+  export let disabled = false
+
+  const dispatch = createEventDispatcher()
+  const onChange = event => {
+    dispatch("change", event.target.checked)
+  }
+</script>
+
+<label
+  class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized"
+  class:is-invalid={!!error}
+>
+  <input
+    checked={value}
+    {disabled}
+    on:change={onChange}
+    type="checkbox"
+    class="spectrum-Checkbox-input"
+    {id}
+  />
+  <span class="spectrum-Checkbox-box">
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-css-icon-Checkmark100" />
+    </svg>
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-css-icon-Dash100" />
+    </svg>
+  </span>
+  <span class="spectrum-Checkbox-label">{text || ""}</span>
+</label>
diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte
new file mode 100644
index 0000000000..1bce8ba3c4
--- /dev/null
+++ b/packages/bbui/src/Form/Core/Combobox.svelte
@@ -0,0 +1,136 @@
+<script>
+  import "@spectrum-css/inputgroup/dist/index-vars.css"
+  import "@spectrum-css/popover/dist/index-vars.css"
+  import "@spectrum-css/menu/dist/index-vars.css"
+  import { fly } from "svelte/transition"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let id = null
+  export let placeholder = "Choose an option"
+  export let disabled = false
+  export let error = null
+  export let options = []
+  export let getOptionLabel = option => option
+  export let getOptionValue = option => option
+
+  const dispatch = createEventDispatcher()
+  let open = false
+  let focus = false
+  $: fieldText = getFieldText(value, options, placeholder)
+
+  const getFieldText = (value, options, placeholder) => {
+    // Always use placeholder if no value
+    if (value == null || value === "") {
+      return placeholder || "Choose an option"
+    }
+
+    // Wait for options to load if there is a value but no options
+    if (!options?.length) {
+      return ""
+    }
+
+    // Render the label if the selected option is found, otherwise raw value
+    const selected = options.find(option => getOptionValue(option) === value)
+    return selected ? getOptionLabel(selected) : value
+  }
+
+  const selectOption = value => {
+    dispatch("change", value)
+    open = false
+  }
+
+  const onChange = e => {
+    selectOption(e.target.value)
+  }
+</script>
+
+<div class="spectrum-InputGroup" class:is-focused={open || focus}>
+  <div
+    class="spectrum-Textfield spectrum-InputGroup-textfield"
+    class:is-disabled={!!error}
+    class:is-focused={open || focus}
+  >
+    <input
+      type="text"
+      on:focus={() => (focus = true)}
+      on:blur={() => (focus = false)}
+      on:change={onChange}
+      {value}
+      {placeholder}
+      class="spectrum-Textfield-input spectrum-InputGroup-input"
+    />
+  </div>
+  <button
+    class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
+    tabindex="-1"
+    aria-haspopup="true"
+    disabled={!!error}
+    on:click={() => (open = true)}
+  >
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-css-icon-Chevron100" />
+    </svg>
+  </button>
+  {#if open}
+    <div class="overlay" on:mousedown|self={() => (open = false)} />
+    <div
+      transition:fly={{ y: -20, duration: 200 }}
+      class="spectrum-Popover spectrum-Popover--bottom is-open"
+    >
+      <ul class="spectrum-Menu" role="listbox">
+        {#if options && Array.isArray(options)}
+          {#each options as option}
+            <li
+              class="spectrum-Menu-item"
+              class:is-selected={getOptionValue(option) === value}
+              role="option"
+              aria-selected="true"
+              tabindex="0"
+              on:click={() => selectOption(getOptionValue(option))}
+            >
+              <span class="spectrum-Menu-itemLabel"
+                >{getOptionLabel(option)}</span
+              >
+              <svg
+                class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+                focusable="false"
+                aria-hidden="true"
+              >
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
+              </svg>
+            </li>
+          {/each}
+        {/if}
+      </ul>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .spectrum-InputGroup {
+    min-width: 0;
+    width: 100%;
+  }
+  .spectrum-Textfield-input {
+    width: 0;
+  }
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999;
+  }
+  .spectrum-Popover {
+    max-height: 240px;
+    width: 100%;
+    z-index: 999;
+    top: 100%;
+  }
+</style>
diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker.svelte
new file mode 100644
index 0000000000..f76e42a55a
--- /dev/null
+++ b/packages/bbui/src/Form/Core/DatePicker.svelte
@@ -0,0 +1,149 @@
+<script>
+  import Flatpickr from "svelte-flatpickr"
+  import "flatpickr/dist/flatpickr.css"
+  import "@spectrum-css/inputgroup/dist/index-vars.css"
+  import "@spectrum-css/textfield/dist/index-vars.css"
+  import "@spectrum-css/picker/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+  import { generateID } from "../../utils/helpers"
+
+  export let id = null
+  export let disabled = false
+  export let error = null
+  export let isPlaceholder = false
+  export let enableTime = true
+  export let value = null
+  export let placeholder = null
+
+  const dispatch = createEventDispatcher()
+  const flatpickrId = `${generateID()}-wrapper`
+  let open = false
+  let flatpickr
+  $: flatpickrOptions = {
+    element: `#${flatpickrId}`,
+    enableTime: enableTime || false,
+    altInput: true,
+    altFormat: enableTime ? "F j Y, H:i" : "F j, Y",
+    wrap: true,
+  }
+
+  const handleChange = event => {
+    const [dates] = event.detail
+    dispatch("change", dates[0])
+  }
+
+  const clearDateOnBackspace = event => {
+    if (["Backspace", "Clear", "Delete"].includes(event.key)) {
+      dispatch("change", null)
+      flatpickr.close()
+    }
+  }
+
+  const onOpen = () => {
+    open = true
+    document.addEventListener("keyup", clearDateOnBackspace)
+  }
+
+  const onClose = () => {
+    open = false
+    document.removeEventListener("keyup", clearDateOnBackspace)
+
+    // Manually blur all input fields since flatpickr creates a second
+    // duplicate input field.
+    // We need to blur both because the focus styling does not get properly
+    // applied.
+    const els = document.querySelectorAll(`#${flatpickrId} input`)
+    els.forEach(el => el.blur())
+  }
+</script>
+
+<Flatpickr
+  bind:flatpickr
+  {value}
+  on:open={onOpen}
+  on:close={onClose}
+  options={flatpickrOptions}
+  on:change={handleChange}
+  element={`#${flatpickrId}`}
+>
+  <div
+    id={flatpickrId}
+    class:is-disabled={disabled}
+    class:is-invalid={!!error}
+    class="flatpickr spectrum-InputGroup spectrum-Datepicker"
+    class:is-focused={open}
+    aria-readonly="false"
+    aria-required="false"
+    aria-haspopup="true"
+  >
+    <div
+      on:click={flatpickr?.open}
+      class="spectrum-Textfield spectrum-InputGroup-textfield"
+      class:is-disabled={disabled}
+      class:is-invalid={!!error}
+    >
+      {#if !!error}
+        <svg
+          class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
+          focusable="false"
+          aria-hidden="true"
+        >
+          <use xlink:href="#spectrum-icon-18-Alert" />
+        </svg>
+      {/if}
+      <input
+        data-input
+        type="text"
+        {disabled}
+        class="spectrum-Textfield-input spectrum-InputGroup-input"
+        {placeholder}
+        {id}
+        {value}
+      />
+    </div>
+    <button
+      type="button"
+      class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
+      tabindex="-1"
+      {disabled}
+      class:is-invalid={!!error}
+      on:click={flatpickr?.open}
+    >
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM"
+        focusable="false"
+        aria-hidden="true"
+        aria-label="Calendar"
+      >
+        <use xlink:href="#spectrum-icon-18-Calendar" />
+      </svg>
+    </button>
+  </div>
+</Flatpickr>
+{#if open}
+  <div class="overlay" on:mousedown|self={flatpickr?.close} />
+{/if}
+
+<style>
+  .spectrum-Textfield-input {
+    pointer-events: none;
+  }
+  .spectrum-Textfield:not(.is-disabled):hover {
+    cursor: pointer;
+  }
+  .flatpickr {
+    width: 100%;
+    overflow: hidden;
+  }
+  .flatpickr .spectrum-Textfield {
+    width: 100%;
+  }
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999;
+  }
+</style>
diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte
new file mode 100644
index 0000000000..9dd2cbbc73
--- /dev/null
+++ b/packages/bbui/src/Form/Core/Dropzone.svelte
@@ -0,0 +1,350 @@
+<script>
+  import "@spectrum-css/dropzone/dist/index-vars.css"
+  import "@spectrum-css/typography/dist/index-vars.css"
+  import "@spectrum-css/illustratedmessage/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+  import { generateID } from "../../utils/helpers"
+  import Icon from "../../Icon/Icon.svelte"
+
+  const BYTES_IN_KB = 1000
+  const BYTES_IN_MB = 1000000
+
+  export let value = []
+  export let id = null
+  export let disabled = false
+  export let fileSizeLimit = BYTES_IN_MB * 20
+  export let processFiles = null
+  export let handleFileTooLarge = null
+
+  const dispatch = createEventDispatcher()
+  const imageExtensions = [
+    "png",
+    "tiff",
+    "gif",
+    "raw",
+    "jpg",
+    "jpeg",
+    "svg",
+    "bmp",
+    "jfif",
+  ]
+  const onChange = event => {
+    dispatch("change", event.target.checked)
+  }
+
+  const fieldId = id || generateID()
+  let selectedImageIdx = 0
+  let fileDragged = false
+  $: selectedImage = value?.[selectedImageIdx] ?? null
+  $: fileCount = value?.length ?? 0
+  $: isImage = imageExtensions.includes(selectedImage?.extension?.toLowerCase())
+
+  async function processFileList(fileList) {
+    if (
+      handleFileTooLarge &&
+      Array.from(fileList).some(file => file.size >= fileSizeLimit)
+    ) {
+      handleFileTooLarge(fileSizeLimit, value)
+      return
+    }
+    if (processFiles) {
+      const processedFiles = await processFiles(fileList)
+      const newValue = [...value, ...processedFiles]
+      dispatch("change", newValue)
+      selectedImageIdx = newValue.length - 1
+    }
+  }
+
+  async function removeFile() {
+    dispatch(
+      "change",
+      value.filter((x, idx) => idx !== selectedImageIdx)
+    )
+    selectedImageIdx = 0
+  }
+
+  function navigateLeft() {
+    selectedImageIdx -= 1
+  }
+
+  function navigateRight() {
+    selectedImageIdx += 1
+  }
+
+  function handleFile(evt) {
+    processFileList(evt.target.files)
+  }
+
+  function handleDragOver(evt) {
+    evt.preventDefault()
+    fileDragged = true
+  }
+
+  function handleDragLeave(evt) {
+    evt.preventDefault()
+    fileDragged = false
+  }
+
+  function handleDrop(evt) {
+    evt.preventDefault()
+    processFileList(evt.dataTransfer.files)
+    fileDragged = false
+  }
+</script>
+
+<div class="container">
+  {#if selectedImage}
+    <div class="gallery">
+      <div class="title">
+        <div class="filename">{selectedImage.name}</div>
+        <div class="filesize">
+          {#if selectedImage.size <= BYTES_IN_MB}
+            {`${selectedImage.size / BYTES_IN_KB} KB`}
+          {:else}{`${selectedImage.size / BYTES_IN_MB} MB`}{/if}
+        </div>
+        {#if !disabled}
+          <div class="delete-button" on:click={removeFile}>
+            <Icon name="Close" />
+          </div>
+        {/if}
+      </div>
+      {#if isImage}
+        <img alt="preview" src={selectedImage.url} />
+      {:else}
+        <div class="placeholder">
+          <div class="extension">{selectedImage.extension}</div>
+          <div>Preview not supported</div>
+        </div>
+      {/if}
+      <div
+        class="nav left"
+        class:visible={selectedImageIdx > 0}
+        on:click={navigateLeft}
+      >
+        <Icon name="ChevronLeft" />
+      </div>
+      <div
+        class="nav right"
+        class:visible={selectedImageIdx < fileCount - 1}
+        on:click={navigateRight}
+      >
+        <Icon name="ChevronRight" />
+      </div>
+      <div class="footer">File {selectedImageIdx + 1} of {fileCount}</div>
+    </div>
+  {/if}
+  <div
+    class="spectrum-Dropzone"
+    class:disabled
+    role="region"
+    tabindex="0"
+    on:dragover={handleDragOver}
+    on:dragleave={handleDragLeave}
+    on:dragenter={handleDragOver}
+    on:drop={handleDrop}
+    class:is-dragged={fileDragged}
+  >
+    <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
+      <input
+        id={fieldId}
+        {disabled}
+        type="file"
+        multiple
+        on:change={handleFile}
+      />
+      <svg
+        class="spectrum-IllustratedMessage-illustration"
+        width="125"
+        height="60"
+        viewBox="0 0 199 97.7"
+        ><defs>
+          <style>
+            .cls-1,
+            .cls-2 {
+              fill: none;
+              stroke-linecap: round;
+              stroke-linejoin: round;
+            }
+            .cls-1 {
+              stroke-width: 3px;
+            }
+            .cls-2 {
+              stroke-width: 2px;
+            }
+          </style>
+        </defs>
+        <path
+          class="cls-1"
+          d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"
+        />
+        <line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5" />
+        <path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43" />
+        <path
+          class="cls-1"
+          d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"
+        />
+        <line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5" />
+        <path
+          class="cls-2"
+          d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"
+        />
+        <path
+          class="cls-2"
+          d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"
+        />
+        <path
+          class="cls-2"
+          d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"
+        />
+        <path
+          class="cls-1"
+          d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"
+        />
+        <rect
+          class="cls-1"
+          x="1.5"
+          y="34.5"
+          width="58"
+          height="39"
+          rx="2"
+          ry="2"
+        />
+      </svg>
+      <h2
+        class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading"
+      >
+        Drag and drop your file
+      </h2>
+      {#if !disabled}
+        <p
+          class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"
+        >
+          <label for={fieldId} class="spectrum-Link"
+            >Select a file to upload</label
+          >
+          <br />
+          from your computer
+        </p>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  .container {
+    --spectrum-dropzone-padding: var(--spectrum-global-dimension-size-400);
+    --spectrum-heading-l-text-size: var(
+      --spectrum-global-dimension-font-size-400
+    );
+  }
+  .container * {
+    font-family: "Inter", sans-serif !important;
+  }
+
+  .gallery,
+  .spectrum-Dropzone {
+    user-select: none;
+  }
+  input[type="file"] {
+    display: none;
+  }
+
+  .gallery {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    background-color: var(--spectrum-global-color-gray-50);
+    color: var(--spectrum-alias-text-color);
+    font-size: var(--spectrum-alias-item-text-size-m);
+    box-sizing: border-box;
+    border: var(--spectrum-alias-border-size-thin)
+      var(--spectrum-alias-border-color) solid;
+    border-radius: var(--spectrum-alias-border-radius-regular);
+    padding: 10px;
+    margin-bottom: 10px;
+    position: relative;
+  }
+  .placeholder,
+  img {
+    height: 120px;
+    max-width: 100%;
+    object-fit: contain;
+    margin: 20px 30px;
+  }
+  .title {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+  .filename {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 0;
+    margin-right: 10px;
+  }
+  .placeholder {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .extension {
+    color: var(--spectrum-global-color-gray-600);
+    text-transform: uppercase;
+    font-weight: 500;
+    margin-bottom: 5px;
+  }
+
+  .nav {
+    padding: var(--spacing-xs);
+    position: absolute;
+    top: 50%;
+    border-radius: 5px;
+    display: none;
+    transition: all 0.3s;
+  }
+  .nav.visible {
+    display: block;
+  }
+  .nav:hover {
+    cursor: pointer;
+    color: var(--blue);
+  }
+  .left {
+    left: 5px;
+  }
+  .right {
+    right: 5px;
+  }
+  i {
+    font-size: 2rem;
+    color: var(--ink);
+  }
+  i:hover {
+    cursor: pointer;
+    color: var(--background);
+  }
+  .delete-button {
+    transition: all 0.3s;
+    margin-left: 10px;
+  }
+  .delete-button i {
+    font-size: 2em;
+  }
+  .delete-button:hover {
+    cursor: pointer;
+    color: var(--red);
+  }
+
+  .spectrum-Dropzone.disabled {
+    pointer-events: none;
+    background-color: var(--spectrum-global-color-gray-200);
+  }
+  .disabled .spectrum-Heading--sizeL {
+    color: var(--spectrum-alias-text-color-disabled);
+  }
+</style>
diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
new file mode 100644
index 0000000000..d659a63582
--- /dev/null
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -0,0 +1,82 @@
+<script>
+  import Picker from "./Picker.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = []
+  export let id = null
+  export let placeholder = null
+  export let disabled = false
+  export let error = null
+  export let options = []
+  export let getOptionLabel = option => option
+  export let getOptionValue = option => option
+
+  const dispatch = createEventDispatcher()
+  $: selectedLookupMap = getSelectedLookupMap(value)
+  $: optionLookupMap = getOptionLookupMap(options)
+  $: fieldText = getFieldText(value, optionLookupMap, placeholder)
+  $: isOptionSelected = optionValue => selectedLookupMap[optionValue] === true
+  $: toggleOption = makeToggleOption(selectedLookupMap, value)
+
+  const getFieldText = (value, map, placeholder) => {
+    if (value?.length) {
+      if (!map) {
+        return ""
+      }
+      const vals = value.map(option => map[option] || option).join(", ")
+      return `(${value.length}) ${vals}`
+    } else {
+      return placeholder || "Choose some options"
+    }
+  }
+
+  const getSelectedLookupMap = value => {
+    let map = {}
+    if (value?.length) {
+      value.forEach(option => {
+        if (option) {
+          map[option] = true
+        }
+      })
+    }
+    return map
+  }
+
+  const getOptionLookupMap = options => {
+    let map = null
+    if (options?.length) {
+      map = {}
+      options.forEach((option, idx) => {
+        const optionValue = getOptionValue(option, idx)
+        if (optionValue != null) {
+          map[optionValue] = getOptionLabel(option, idx) || ""
+        }
+      })
+    }
+    return map
+  }
+
+  const makeToggleOption = (map, value) => {
+    return optionValue => {
+      if (map[optionValue]) {
+        const filtered = value.filter(option => option !== optionValue)
+        dispatch("change", filtered)
+      } else {
+        dispatch("change", [...value, optionValue])
+      }
+    }
+  }
+</script>
+
+<Picker
+  {id}
+  {error}
+  {disabled}
+  {fieldText}
+  {options}
+  isPlaceholder={!value?.length}
+  {isOptionSelected}
+  {getOptionLabel}
+  {getOptionValue}
+  onSelectOption={toggleOption}
+/>
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
new file mode 100644
index 0000000000..05fb196064
--- /dev/null
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -0,0 +1,132 @@
+<script>
+  import "@spectrum-css/picker/dist/index-vars.css"
+  import "@spectrum-css/popover/dist/index-vars.css"
+  import "@spectrum-css/menu/dist/index-vars.css"
+  import { fly } from "svelte/transition"
+  import { createEventDispatcher } from "svelte"
+  import clickOutside from "../../Actions/click_outside"
+
+  export let id = null
+  export let disabled = false
+  export let error = null
+  export let fieldText = ""
+  export let isPlaceholder = false
+  export let placeholderOption = null
+  export let options = []
+  export let isOptionSelected = () => false
+  export let onSelectOption = () => {}
+  export let getOptionLabel = option => option
+  export let getOptionValue = option => option
+  export let open = false
+  export let readonly = false
+
+  const dispatch = createEventDispatcher()
+  const onClick = e => {
+    dispatch("click")
+    if (readonly) {
+      return
+    }
+    open = true
+  }
+</script>
+
+<button
+  {id}
+  class="spectrum-Picker spectrum-Picker--sizeM"
+  {disabled}
+  class:is-invalid={!!error}
+  class:is-open={open}
+  aria-haspopup="listbox"
+  on:mousedown={onClick}
+>
+  <span class="spectrum-Picker-label" class:is-placeholder={isPlaceholder}>
+    {fieldText}
+  </span>
+  {#if error}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
+      focusable="false"
+      aria-hidden="true"
+      aria-label="Folder"
+    >
+      <use xlink:href="#spectrum-icon-18-Alert" />
+    </svg>
+  {/if}
+  <svg
+    class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
+    focusable="false"
+    aria-hidden="true"
+  >
+    <use xlink:href="#spectrum-css-icon-Chevron100" />
+  </svg>
+</button>
+{#if open}
+  <div
+    use:clickOutside={() => (open = false)}
+    transition:fly={{ y: -20, duration: 200 }}
+    class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
+  >
+    <ul class="spectrum-Menu" role="listbox">
+      {#if placeholderOption}
+        <li
+          class="spectrum-Menu-item"
+          class:is-selected={isPlaceholder}
+          role="option"
+          aria-selected="true"
+          tabindex="0"
+          on:click={() => onSelectOption(null)}
+        >
+          <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
+          <svg
+            class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <use xlink:href="#spectrum-css-icon-Checkmark100" />
+          </svg>
+        </li>
+      {/if}
+      {#if options && Array.isArray(options)}
+        {#each options as option, idx}
+          <li
+            class="spectrum-Menu-item"
+            class:is-selected={isOptionSelected(getOptionValue(option, idx))}
+            role="option"
+            aria-selected="true"
+            tabindex="0"
+            on:click={() => onSelectOption(getOptionValue(option, idx))}
+          >
+            <span class="spectrum-Menu-itemLabel"
+              >{getOptionLabel(option, idx)}</span
+            >
+            <svg
+              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+              focusable="false"
+              aria-hidden="true"
+            >
+              <use xlink:href="#spectrum-css-icon-Checkmark100" />
+            </svg>
+          </li>
+        {/each}
+      {/if}
+    </ul>
+  </div>
+{/if}
+
+<style>
+  .spectrum-Popover {
+    max-height: 240px;
+    width: 100%;
+    z-index: 999;
+    top: 100%;
+  }
+  .spectrum-Picker {
+    width: 100%;
+  }
+  .spectrum-Picker-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 0;
+  }
+</style>
diff --git a/packages/bbui/src/Form/Core/RadioGroup.svelte b/packages/bbui/src/Form/Core/RadioGroup.svelte
new file mode 100644
index 0000000000..4ead9ed311
--- /dev/null
+++ b/packages/bbui/src/Form/Core/RadioGroup.svelte
@@ -0,0 +1,39 @@
+<script>
+  import "@spectrum-css/fieldgroup/dist/index-vars.css"
+  import "@spectrum-css/radio/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let direction = "vertical"
+  export let value = null
+  export let options = []
+  export let error = null
+  export let disabled = false
+  export let getOptionLabel = option => option
+  export let getOptionValue = option => option
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => dispatch("change", e.target.value)
+</script>
+
+<div class={`spectrum-FieldGroup spectrum-FieldGroup--${direction}`}>
+  {#if options && Array.isArray(options)}
+    {#each options as option}
+      <div
+        title={getOptionLabel(option)}
+        class="spectrum-Radio spectrum-FieldGroup-item spectrum-Radio--emphasized"
+        class:is-invalid={!!error}
+      >
+        <input
+          on:change={onChange}
+          bind:group={value}
+          value={getOptionValue(option)}
+          type="radio"
+          class="spectrum-Radio-input"
+          {disabled}
+        />
+        <span class="spectrum-Radio-button" />
+        <label class="spectrum-Radio-label">{getOptionLabel(option)}</label>
+      </div>
+    {/each}
+  {/if}
+</div>
diff --git a/packages/bbui/src/Form/Core/Search.svelte b/packages/bbui/src/Form/Core/Search.svelte
new file mode 100644
index 0000000000..dbc8582ac3
--- /dev/null
+++ b/packages/bbui/src/Form/Core/Search.svelte
@@ -0,0 +1,87 @@
+<script>
+  import "@spectrum-css/search/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = ""
+  export let placeholder = null
+  export let disabled = false
+  export let id = null
+
+  const dispatch = createEventDispatcher()
+  let focus = false
+
+  const updateValue = value => {
+    dispatch("change", value)
+  }
+
+  const onFocus = () => {
+    focus = true
+  }
+
+  const onBlur = event => {
+    focus = false
+    updateValue(event.target.value)
+  }
+
+  const updateValueOnEnter = event => {
+    if (event.key === "Enter") {
+      updateValue(event.target.value)
+    }
+  }
+</script>
+
+<div class="spectrum-Search" class:is-disabled={disabled}>
+  <div
+    class="spectrum-Textfield"
+    class:is-focused={focus}
+    class:is-disabled={disabled}
+  >
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-icon"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-icon-18-Magnify" />
+    </svg>
+    <input
+      on:click
+      on:keyup={updateValueOnEnter}
+      {disabled}
+      {id}
+      value={value || ""}
+      placeholder={placeholder || ""}
+      on:blur={onBlur}
+      on:focus={onFocus}
+      on:input
+      type="search"
+      class="spectrum-Textfield-input spectrum-Search-input"
+      autocomplete="off"
+    />
+  </div>
+  <button
+    on:click={() => updateValue("")}
+    type="reset"
+    class="spectrum-ClearButton spectrum-Search-clearButton"
+  >
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Cross75"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-css-icon-Cross75" />
+    </svg>
+  </button>
+</div>
+
+<style>
+  .spectrum-Search,
+  .spectrum-Textfield {
+    width: 100%;
+  }
+  .spectrum-Search-input {
+    padding-right: 24px;
+  }
+  .is-disabled {
+    pointer-events: none;
+  }
+</style>
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
new file mode 100644
index 0000000000..abc8610064
--- /dev/null
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -0,0 +1,58 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import Picker from "./Picker.svelte"
+
+  export let value = null
+  export let id = null
+  export let placeholder = "Choose an option"
+  export let disabled = false
+  export let error = null
+  export let options = []
+  export let getOptionLabel = option => option
+  export let getOptionValue = option => option
+  export let readonly = false
+
+  const dispatch = createEventDispatcher()
+  let open = false
+  $: fieldText = getFieldText(value, options, placeholder)
+
+  const getFieldText = (value, options, placeholder) => {
+    // Always use placeholder if no value
+    if (value == null || value === "") {
+      return placeholder || "Choose an option"
+    }
+
+    // Wait for options to load if there is a value but no options
+    if (!options?.length) {
+      return ""
+    }
+
+    // Render the label if the selected option is found, otherwide raw value
+    const index = options.findIndex(
+      (option, idx) => getOptionValue(option, idx) === value
+    )
+    return index !== -1 ? getOptionLabel(options[index], index) : value
+  }
+
+  const selectOption = value => {
+    dispatch("change", value)
+    open = false
+  }
+</script>
+
+<Picker
+  on:click
+  bind:open
+  {id}
+  {error}
+  {disabled}
+  {readonly}
+  {fieldText}
+  {options}
+  {getOptionLabel}
+  {getOptionValue}
+  isPlaceholder={value == null || value === ""}
+  placeholderOption={placeholder}
+  isOptionSelected={option => option === value}
+  onSelectOption={selectOption}
+/>
diff --git a/packages/bbui/src/Form/Core/Switch.svelte b/packages/bbui/src/Form/Core/Switch.svelte
new file mode 100644
index 0000000000..a2f7e5ce01
--- /dev/null
+++ b/packages/bbui/src/Form/Core/Switch.svelte
@@ -0,0 +1,28 @@
+<script>
+  import "@spectrum-css/switch/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = false
+  export let error = null
+  export let id = null
+  export let text = null
+  export let disabled = false
+
+  const dispatch = createEventDispatcher()
+  const onChange = event => {
+    dispatch("change", event.target.checked)
+  }
+</script>
+
+<div class="spectrum-Switch spectrum-Switch--emphasized">
+  <input
+    checked={value}
+    {disabled}
+    on:change={onChange}
+    {id}
+    type="checkbox"
+    class="spectrum-Switch-input"
+  />
+  <span class="spectrum-Switch-switch" />
+  <label class="spectrum-Switch-label" for={id}>{text}</label>
+</div>
diff --git a/packages/bbui/src/Form/Core/TextArea.svelte b/packages/bbui/src/Form/Core/TextArea.svelte
new file mode 100644
index 0000000000..e4738b8e55
--- /dev/null
+++ b/packages/bbui/src/Form/Core/TextArea.svelte
@@ -0,0 +1,60 @@
+<script>
+  import "@spectrum-css/textfield/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = ""
+  export let placeholder = null
+  export let disabled = false
+  export let error = null
+  export let id = null
+  export const getCaretPosition = () => ({
+    start: textarea.selectionStart,
+    end: textarea.selectionEnd,
+  })
+
+  let focus = false
+  let textarea
+  const dispatch = createEventDispatcher()
+  const onChange = event => {
+    dispatch("change", event.target.value)
+    focus = false
+  }
+</script>
+
+<div
+  class="spectrum-Textfield spectrum-Textfield--multiline"
+  class:is-invalid={!!error}
+  class:is-disabled={disabled}
+  class:is-focused={focus}
+>
+  {#if error}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeM
+      spectrum-Textfield-validationIcon"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-icon-18-Alert" />
+    </svg>
+  {/if}
+  <!-- prettier-ignore -->
+  <textarea
+    bind:this={textarea}
+    placeholder={placeholder || ""}
+    class="spectrum-Textfield-input"
+    {disabled}
+    {id}
+    on:focus={() => (focus = true)}
+    on:blur={onChange}
+  >{value || ""}</textarea>
+</div>
+
+<style>
+  .spectrum-Textfield {
+    width: 100%;
+  }
+  textarea {
+    resize: vertical;
+    min-height: 80px !important;
+  }
+</style>
diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte
new file mode 100644
index 0000000000..18b9a6fe8a
--- /dev/null
+++ b/packages/bbui/src/Form/Core/TextField.svelte
@@ -0,0 +1,87 @@
+<script>
+  import "@spectrum-css/textfield/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = ""
+  export let placeholder = null
+  export let type = "text"
+  export let disabled = false
+  export let error = null
+  export let id = null
+  export let readonly = false
+
+  const dispatch = createEventDispatcher()
+  let focus = false
+
+  const updateValue = value => {
+    if (readonly) {
+      return
+    }
+    if (type === "number") {
+      const float = parseFloat(value)
+      value = isNaN(float) ? null : float
+    }
+    dispatch("change", value)
+  }
+
+  const onFocus = () => {
+    if (readonly) {
+      return
+    }
+    focus = true
+  }
+
+  const onBlur = event => {
+    if (readonly) {
+      return
+    }
+    focus = false
+    updateValue(event.target.value)
+  }
+
+  const updateValueOnEnter = event => {
+    if (readonly) {
+      return
+    }
+    if (event.key === "Enter") {
+      updateValue(event.target.value)
+    }
+  }
+</script>
+
+<div
+  class="spectrum-Textfield"
+  class:is-invalid={!!error}
+  class:is-disabled={disabled}
+  class:is-focused={focus}
+>
+  {#if error}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-icon-18-Alert" />
+    </svg>
+  {/if}
+  <input
+    on:click
+    on:keyup={updateValueOnEnter}
+    {disabled}
+    {readonly}
+    {id}
+    value={value || ""}
+    placeholder={placeholder || ""}
+    on:blur={onBlur}
+    on:focus={onFocus}
+    on:input
+    {type}
+    class="spectrum-Textfield-input"
+  />
+</div>
+
+<style>
+  .spectrum-Textfield {
+    width: 100%;
+  }
+</style>
diff --git a/packages/bbui/src/Form/Core/index.js b/packages/bbui/src/Form/Core/index.js
new file mode 100644
index 0000000000..a31c5941ec
--- /dev/null
+++ b/packages/bbui/src/Form/Core/index.js
@@ -0,0 +1,11 @@
+export { default as CoreTextField } from "./TextField.svelte"
+export { default as CoreSelect } from "./Select.svelte"
+export { default as CoreMultiselect } from "./Multiselect.svelte"
+export { default as CoreCheckbox } from "./Checkbox.svelte"
+export { default as CoreRadioGroup } from "./RadioGroup.svelte"
+export { default as CoreTextArea } from "./TextArea.svelte"
+export { default as CoreCombobox } from "./Combobox.svelte"
+export { default as CoreSwitch } from "./Switch.svelte"
+export { default as CoreSearch } from "./Search.svelte"
+export { default as CoreDatePicker } from "./DatePicker.svelte"
+export { default as CoreDropzone } from "./Dropzone.svelte"
diff --git a/packages/bbui/src/Form/DataList.svelte b/packages/bbui/src/Form/DataList.svelte
deleted file mode 100644
index 6f5855d86a..0000000000
--- a/packages/bbui/src/Form/DataList.svelte
+++ /dev/null
@@ -1,158 +0,0 @@
-<script>
-  import Icon from "../Icons/Icon.svelte"
-  import Label from "../Styleguide/Label.svelte"
-  import { createEventDispatcher } from "svelte"
-
-  export let label = undefined
-  export let value = ""
-  export let name = undefined
-  export let thin = false
-  export let extraThin = false
-  export let secondary = false
-  export let outline = false
-  export let disabled = false
-
-  const dispatch = createEventDispatcher()
-  let focus = false
-
-  const updateValue = e => {
-    value = e.target.value
-  }
-
-  function handleFocus(e) {
-    focus = true
-    dispatch("focus", e)
-  }
-
-  function handleBlur(e) {
-    focus = false
-    dispatch("blur", e)
-  }
-</script>
-
-{#if label}
-  <Label extraSmall grey forAttr={name}>{label}</Label>
-{/if}
-<div class="container" class:disabled class:secondary class:outline class:focus>
-  <select
-    {name}
-    class:thin
-    class:extraThin
-    class:secondary
-    {disabled}
-    on:change
-    on:focus={handleFocus}
-    on:blur={handleBlur}
-    bind:value>
-    <slot />
-  </select>
-  <slot name="custom-input" />
-  <input
-    class:thin
-    class:extraThin
-    class:secondary
-    class:disabled
-    {disabled}
-    on:change={updateValue}
-    on:input={updateValue}
-    on:focus={handleFocus}
-    on:blur={e => {
-      updateValue(e)
-      handleBlur(e)
-    }}
-    value={value || ''}
-    type="text" />
-  <div class="pointer editable-pointer">
-    <Icon name="arrowdown" />
-  </div>
-</div>
-
-<style>
-  .container {
-    position: relative !important;
-    display: block;
-    border-radius: var(--border-radius-s);
-    border: var(--border-transparent);
-    background-color: var(--background);
-  }
-  .container.outline {
-    border: var(--border-dark);
-  }
-  .container.focus {
-    border: var(--border-blue);
-  }
-
-  input,
-  select {
-    border-radius: var(--border-radius-s);
-    font-size: var(--font-size-m);
-    outline: none;
-    border: none;
-    color: var(--ink);
-    text-align: left;
-    background-color: transparent;
-  }
-  select {
-    display: block !important;
-    width: 100% !important;
-    padding: var(--spacing-m) 2rem var(--spacing-m) var(--spacing-m);
-    appearance: none !important;
-    -webkit-appearance: none !important;
-    -moz-appearance: none !important;
-    align-items: center;
-    white-space: pre;
-    opacity: 0;
-  }
-  input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: calc(100% - 30px);
-    height: 100%;
-    border: none;
-    box-sizing: border-box;
-    padding: var(--spacing-m) 0 var(--spacing-m) var(--spacing-m);
-  }
-
-  select.thin,
-  input.thin {
-    font-size: var(--font-size-xs);
-  }
-  select.extraThin,
-  input.extraThin {
-    font-size: var(--font-size-xs);
-    padding: var(--spacing-s) 0 var(--spacing-s) var(--spacing-m);
-  }
-  .secondary {
-    background: var(--grey-2);
-  }
-
-  select:disabled,
-  input:disabled,
-  .disabled {
-    background: var(--grey-4);
-    color: var(--grey-6);
-  }
-
-  .pointer {
-    right: 0 !important;
-    top: 0 !important;
-    bottom: 0 !important;
-    position: absolute !important;
-    pointer-events: none !important;
-    align-items: center !important;
-    display: flex !important;
-    box-sizing: border-box;
-  }
-
-  .editable-pointer {
-    border-style: solid;
-    border-width: 0 0 0 1px;
-    border-color: var(--grey-4);
-    padding-left: var(--spacing-xs);
-  }
-  .editable-pointer :global(svg) {
-    margin-right: var(--spacing-xs);
-    fill: var(--ink);
-  }
-</style>
diff --git a/packages/bbui/src/Form/DataList.svench b/packages/bbui/src/Form/DataList.svench
deleted file mode 100644
index eea8294dea..0000000000
--- a/packages/bbui/src/Form/DataList.svench
+++ /dev/null
@@ -1,57 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Select from "./Select.svelte";
-  import DataList from "./DataList.svelte";
-  import Spacer from "../Spacer/Spacer.svelte"
-
-  const options = ["Chocolate", "Vanilla", "Strawberry Cheesecake"];
-</script>
-
-<View name="default">
-  <DataList name="Test" label="Flavour">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </DataList>
-</View>
-
-<View name="secondary">
-  <DataList secondary name="Test" label="Flavour">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </DataList>
-</View>
-
-<View name="outline">
-  <DataList outline name="Test" label="Flavour">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </DataList>
-</View>
-
-<View name="disabled">
-  <DataList disabled name="Test" label="Flavour">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </DataList>
-</View>
-
-<View name="thin">
-  <DataList thin name="Test" label="Flavour">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </DataList>
-</View>
-
-<View name="extraThin">
-  <DataList extraThin name="Test" label="Flavour">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </DataList>
-</View>
-
diff --git a/packages/bbui/src/Form/DatePicker.svelte b/packages/bbui/src/Form/DatePicker.svelte
new file mode 100644
index 0000000000..e8dc4da9a7
--- /dev/null
+++ b/packages/bbui/src/Form/DatePicker.svelte
@@ -0,0 +1,30 @@
+<script>
+  import Field from "./Field.svelte"
+  import DatePicker from "./Core/DatePicker.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let disabled = false
+  export let error = null
+  export let enableTime = true
+  export let placeholder = null
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {disabled} {error}>
+  <DatePicker
+    {error}
+    {disabled}
+    {value}
+    {placeholder}
+    {enableTime}
+    on:change={onChange}
+  />
+</Field>
diff --git a/packages/bbui/src/Form/Dropzone.svelte b/packages/bbui/src/Form/Dropzone.svelte
new file mode 100644
index 0000000000..c8400ecc6a
--- /dev/null
+++ b/packages/bbui/src/Form/Dropzone.svelte
@@ -0,0 +1,32 @@
+<script>
+  import Field from "./Field.svelte"
+  import CoreDropzone from "./Core/Dropzone.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = []
+  export let label = null
+  export let labelPosition = "above"
+  export let disabled = false
+  export let error = null
+  export let fileSizeLimit = undefined
+  export let processFiles = undefined
+  export let handleFileTooLarge = undefined
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {disabled} {error}>
+  <CoreDropzone
+    {error}
+    {disabled}
+    {value}
+    {fileSizeLimit}
+    {processFiles}
+    {handleFileTooLarge}
+    on:change={onChange}
+  />
+</Field>
diff --git a/packages/bbui/src/Form/Field.svelte b/packages/bbui/src/Form/Field.svelte
new file mode 100644
index 0000000000..5ecc7ba866
--- /dev/null
+++ b/packages/bbui/src/Form/Field.svelte
@@ -0,0 +1,42 @@
+<script>
+  import "@spectrum-css/fieldlabel/dist/index-vars.css"
+  import FieldLabel from "./FieldLabel.svelte"
+
+  export let id = null
+  export let label = null
+  export let labelPosition = "above"
+  export let disabled = false
+  export let error = null
+</script>
+
+<div class="spectrum-Form-item" class:above={labelPosition === "above"}>
+  {#if label}
+    <FieldLabel forId={id} {label} position={labelPosition} />
+  {/if}
+  <div class="spectrum-Form-itemField">
+    <slot />
+    {#if error}
+      <div class="error">{error}</div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .spectrum-Form-item.above {
+    display: flex;
+    flex-direction: column;
+  }
+  .spectrum-Form-itemField {
+    position: relative;
+    width: 100%;
+  }
+
+  .error {
+    color: var(
+      --spectrum-semantic-negative-color-default,
+      var(--spectrum-global-color-red-500)
+    );
+    font-size: var(--spectrum-global-dimension-font-size-75);
+    margin-top: var(--spectrum-global-dimension-size-75);
+  }
+</style>
diff --git a/packages/bbui/src/Form/FieldLabel.svelte b/packages/bbui/src/Form/FieldLabel.svelte
new file mode 100644
index 0000000000..b070df8cae
--- /dev/null
+++ b/packages/bbui/src/Form/FieldLabel.svelte
@@ -0,0 +1,27 @@
+<script>
+  import "@spectrum-css/fieldlabel/dist/index-vars.css"
+
+  export let forId
+  export let label
+  export let position = "above"
+
+  $: className = position === "above" ? "" : `spectrum-FieldLabel--${position}`
+</script>
+
+<label
+  for={forId}
+  class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${className}`}
+>
+  {label || ""}
+</label>
+
+<style>
+  label {
+    white-space: nowrap;
+  }
+
+  .spectrum-FieldLabel--right,
+  .spectrum-FieldLabel--left {
+    padding-right: var(--spectrum-global-dimension-size-200);
+  }
+</style>
diff --git a/packages/bbui/src/Form/Input.svelte b/packages/bbui/src/Form/Input.svelte
index e8afcffd36..a768f16681 100644
--- a/packages/bbui/src/Form/Input.svelte
+++ b/packages/bbui/src/Form/Input.svelte
@@ -1,190 +1,34 @@
 <script>
+  import Field from "./Field.svelte"
+  import TextField from "./Core/TextField.svelte"
   import { createEventDispatcher } from "svelte"
-  import Button from "../Button/Button.svelte"
-  import Label from "../Styleguide/Label.svelte"
-  const dispatch = createEventDispatcher()
 
-  export let name = undefined
-  export let label = undefined
-  export let outline = false
-  export let presentation = false
-  export let thin = false
-  export let extraThin = false
-  export let large = false
-  export let border = false
-  export let edit = false
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let placeholder = null
+  export let type = "text"
   export let disabled = false
-  export let type = undefined
-  export let placeholder = ""
-  export let value = ""
-  export let error = false
-  export let validator = () => {}
+  export let readonly = false
+  export let error = null
 
-  // This section handles the edit mode and dispatching of things to the parent when saved
-  let editMode = false
-
-  const updateValue = e => {
-    if (type === "number") {
-      const num = parseFloat(e.target.value)
-      value = isNaN(num) ? "" : num
-    } else {
-      value = e.target.value
-    }
-  }
-
-  const save = () => {
-    editMode = false
-    dispatch("save", value)
-  }
-
-  const enableEdit = () => {
-    editMode = true
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
   }
 </script>
 
-<div class="container">
-  {#if label || edit}
-    <div class="label-container">
-      {#if label}
-        <Label extraSmall grey forAttr={name}>{label}</Label>
-      {/if}
-      {#if edit}
-        <div class="controls">
-          <Button small secondary disabled={editMode} on:click={enableEdit}>
-            Edit
-          </Button>
-          <Button small blue disabled={!editMode} on:click={save}>Save</Button>
-        </div>
-      {/if}
-    </div>
-  {/if}
-  <input
-    class:outline
-    class:presentation
-    class:thin
-    class:extraThin
-    class:large
-    class:border
-    on:change
-    on:input
-    on:change={updateValue}
-    on:input={updateValue}
-    on:blur={updateValue}
-    use:validator
-    disabled={disabled || (edit && !editMode)}
-    value={value == null ? '' : value}
+<Field {label} {labelPosition} {disabled} {error}>
+  <TextField
+    {error}
+    {disabled}
+    {readonly}
+    {value}
+    {placeholder}
     {type}
-    {name}
-    {placeholder} />
-  {#if error}
-    <div class="error">{error}</div>
-  {/if}
-</div>
-
-<style>
-  .container {
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .label-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-end;
-    margin-bottom: var(--spacing-s);
-  }
-  .label-container :global(label) {
-    margin-bottom: 0;
-  }
-
-  .controls {
-    align-items: center;
-    display: grid;
-    grid-template-columns: auto auto;
-    grid-gap: 12px;
-    margin-left: auto;
-    padding-left: 12px;
-  }
-  .controls :global(button) {
-    min-width: 100px;
-    font-size: var(--font-size-s);
-    border-radius: var(--rounded-small);
-  }
-
-  input {
-    min-width: 0;
-    box-sizing: border-box;
-    color: var(--ink);
-    font-size: var(--font-size-s);
-    border-radius: var(--border-radius-s);
-    border: none;
-    background-color: var(--grey-2);
-    padding: var(--spacing-m);
-    margin: 0;
-    outline: none;
-    font-family: var(--font-sans);
-    border: var(--border-transparent);
-    transition: all 0.2s ease-in-out;
-  }
-  input.presentation {
-    background-color: var(--background);
-    border: var(--background) 2px solid;
-  }
-  input.presentation:hover {
-    background-color: var(--grey-2);
-    border: var(--grey-4) 2px solid;
-  }
-  input.thin {
-    font-size: var(--font-size-xs);
-  }
-  input.extraThin {
-    font-size: var(--font-size-xs);
-    padding: var(--spacing-s) var(--spacing-m);
-  }
-  input.large {
-    font-size: var(--font-size-m);
-    padding: var(--spacing-l);
-  }
-  input.border {
-    border: var(--border-grey-2);
-  }
-  input.border:active {
-    border: var(--border-blue);
-  }
-  input.border:focus {
-    border: var(--border-blue);
-  }
-  input.outline {
-    border: var(--border-light-2);
-    background: var(--background);
-  }
-  input.outline:active {
-    border: var(--border-blue);
-  }
-  input.outline:focus {
-    border: var(--border-blue);
-  }
-  input:hover {
-    border: var(--grey-4) 2px solid;
-  }
-  input::placeholder {
-    color: var(--grey-6);
-  }
-  input:focus {
-    border: var(--border-blue);
-  }
-  input:disabled {
-    background: var(--grey-4);
-    color: var(--grey-6);
-  }
-
-  .error {
-    margin-top: 10px;
-    font-size: var(--font-size-xs);
-    font-family: var(--font-sans);
-    line-height: 1.17;
-    color: var(--red);
-  }
-</style>
+    on:change={onChange}
+    on:click
+    on:input
+  />
+</Field>
diff --git a/packages/bbui/src/Form/Input.svench b/packages/bbui/src/Form/Input.svench
deleted file mode 100644
index 1b95727a1a..0000000000
--- a/packages/bbui/src/Form/Input.svench
+++ /dev/null
@@ -1,62 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Input from "./Input.svelte";
-  import Button from "../Button/Button.svelte";
-</script>
-
-<View name="default">
-  <Input placeholder="Enter your name" label="Name" />
-</View>
-
-<View name="presentation">
-  <Input presentation placeholder="Enter your name" label="Name" />
-</View>
-
-<View name="outline">
-  <Input outline placeholder="Enter your name" label="Name" />
-</View>
-
-<View name="disabled">
-  <Input disabled placeholder="Enter your name" label="Name" />
-</View>
-
-<View name="disabled with value">
-  <Input value="Some text" disabled placeholder="Enter your name" label="Name" />
-</View>
-
-<View name="thin">
-  <Input thin placeholder="Enter your name" label="Name" />
-</View>
-
-<View name="extraThin">
-  <Input extraThin placeholder="Enter your name" label="Name" />
-</View>
-
-<View name="large">
-  <Input large placeholder="Enter your name" label="Name" />
-</View>
-
-<View name="border">
-  <Input border presentation placeholder="Enter your name" label="Name" />
-</View>
-
-
-<View name="number">
-  <Input type="number" placeholder="Enter your age" label="Age" />
-</View>
-
-<View name="with edit buttons">
-  <Input
-    thin
-    edit
-    placeholder="Enter your name"
-    label="Name"
-    on:save={console.log} />
-</View>
-<View name="with error message">
-  <Input
-    placeholder="Enter your name"
-    label="Name"
-    error="This is an error message!"
-    on:save={console.log} />
-</View>
diff --git a/packages/bbui/src/Form/Multiselect.svelte b/packages/bbui/src/Form/Multiselect.svelte
index 924fd4b2b5..add60db2a4 100644
--- a/packages/bbui/src/Form/Multiselect.svelte
+++ b/packages/bbui/src/Form/Multiselect.svelte
@@ -1,324 +1,36 @@
 <script>
-  import Portal from "svelte-portal"
-  import { afterUpdate } from "svelte"
   import { createEventDispatcher } from "svelte"
-  import { fly } from "svelte/transition"
-  import Label from "../Styleguide/Label.svelte"
-  const xPath =
-    "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-
-  import positionDropdown from "../Actions/position_dropdown"
-  import clickOutside from "../Actions/click_outside"
-
-  const dispatch = createEventDispatcher()
+  import Multiselect from "./Core/Multiselect.svelte"
+  import Field from "./Field.svelte"
 
   export let value = []
-  export let label = undefined
-  export let align = "left"
-  export let secondary = false
-  export let outline = false
+  export let label = null
   export let disabled = false
-  export let placeholder = undefined
-  export let extraThin = false
+  export let readonly = false
+  export let labelPosition = "above"
+  export let error = null
+  export let placeholder = null
+  export let options = []
+  export let getOptionLabel = option => option
+  export let getOptionValue = option => option
 
-  let options = []
-  let optionsVisible = false
-  let slot
-  let anchor
-  $: lookupMap = mapValues(value)
-  $: selectedOptions = options.filter(option => lookupMap[option.value])
-
-  afterUpdate(() => {
-    // Update available options
-    const domOptions = Array.from(slot.querySelectorAll("option"))
-    options = domOptions.map(option => ({
-      value: option.value,
-      name: option.textContent,
-    }))
-  })
-
-  function mapValues(value) {
-    let map = {}
-    if (value) {
-      value.forEach(option => {
-        map[option] = true
-      })
-    }
-    return map
-  }
-
-  function add(val) {
-    value = [...value, val]
-    dispatch("change", value)
-  }
-
-  function remove(val) {
-    value = value.filter(option => option !== val)
-    dispatch("change", value)
-  }
-
-  function showOptions(show) {
-    optionsVisible = show
-  }
-
-  function handleClick() {
-    showOptions(!optionsVisible)
-  }
-
-  function handleOptionMousedown(e) {
-    const value = e.target.dataset.value
-    if (value == null) {
-      return
-    }
-    if (lookupMap[value]) {
-      remove(value)
-    } else {
-      add(value)
-    }
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
   }
 </script>
 
-{#if label}
-  <Label extraSmall grey>{label}</Label>
-{/if}
-<div class="multiselect" bind:this={anchor}>
-  <div class="tokens-wrapper">
-    <div
-      class="tokens"
-      class:outline
-      class:disabled
-      class:secondary
-      class:extraThin
-      class:optionsVisible
-      on:click|self={handleClick}
-      class:empty={!value || !value.length}>
-      {#each selectedOptions as option}
-        <div
-          class="token"
-          class:extraThin
-          data-id={option.value}
-          on:click|self={handleClick}>
-          <span>{option.name}</span>
-          <div
-            class="token-remove"
-            title="Remove {option.name}"
-            on:click={() => remove(option.value)}>
-            <svg
-              class="icon-clear"
-              xmlns="http://www.w3.org/2000/svg"
-              width="18"
-              height="18"
-              viewBox="0 0 24 24">
-              <path d={xPath} />
-            </svg>
-          </div>
-        </div>
-      {/each}
-      {#if !value || !value.length}
-        {#if placeholder && placeholder.length}
-          <div class:disabled class="placeholder">{placeholder}</div>
-        {:else}
-          <div class="placeholder">&nbsp;</div>
-        {/if}
-      {/if}
-    </div>
-  </div>
-
-  <select bind:this={slot} type="multiple" class="hidden">
-    <slot />
-  </select>
-
-  {#if optionsVisible}
-    <Portal>
-      <ul
-        class="options"
-        use:positionDropdown={{ anchor, align }}
-        use:clickOutside={() => showOptions(false)}
-        transition:fly={{ duration: 200, y: 5 }}
-        on:mousedown|preventDefault={handleOptionMousedown}>
-        {#each options as option}
-          <li
-            class:selected={lookupMap[option.value]}
-            data-value={option.value}>
-            {option.name}
-          </li>
-        {/each}
-        {#if !options.length}
-          <li class="no-results">No results</li>
-        {/if}
-      </ul>
-    </Portal>
-  {/if}
-</div>
-
-<style>
-  .multiselect {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    font-family: var(--font-sans);
-    min-width: 0;
-  }
-  .multiselect:hover {
-    border-bottom-color: hsl(0, 0%, 50%);
-  }
-
-  .tokens-wrapper {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    flex: 0 1 auto;
-  }
-
-  .tokens {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    position: relative;
-    width: 0;
-    flex: 1 1 auto;
-    background-color: var(--background);
-    border-radius: var(--border-radius-m);
-    padding: 0 var(--spacing-m) calc(var(--spacing-m) - var(--spacing-xs))
-      calc(var(--spacing-m) / 2);
-    border: var(--border-transparent);
-  }
-  .tokens.disabled {
-    background-color: var(--grey-4);
-    pointer-events: none;
-  }
-  .tokens.outline {
-    border: var(--border-dark);
-  }
-  .tokens.secondary {
-    background-color: var(--grey-2);
-  }
-  .tokens.extraThin {
-    padding: 0 var(--spacing-m) calc(var(--spacing-s) - var(--spacing-xs))
-      calc(var(--spacing-m) / 2);
-  }
-  .tokens:hover {
-    cursor: pointer;
-  }
-  .tokens.optionsVisible {
-    border: var(--border-blue);
-  }
-  .tokens.empty {
-    padding: var(--spacing-m);
-    font-size: var(--font-size-xs);
-    user-select: none;
-  }
-  .tokens.empty.extraThin {
-    padding: var(--spacing-s) var(--spacing-m);
-  }
-  .tokens::after {
-    width: 100%;
-    left: 0;
-  }
-
-  .token {
-    font-size: var(--font-size-xs);
-    background-color: var(--ink);
-    color: var(--background);
-    border-radius: var(--border-radius-l);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin: calc(var(--spacing-m) - var(--spacing-xs)) 0 0
-      calc(var(--spacing-m) / 2);
-    max-height: 1.3rem;
-    padding: var(--spacing-xs) var(--spacing-s);
-    transition: background-color 0.3s;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-  .token.extraThin {
-    margin: calc(var(--spacing-s) - var(--spacing-xs)) 0 0
-      calc(var(--spacing-m) / 2);
-  }
-  .token span {
-    pointer-events: none;
-    user-select: none;
-    flex: 1 1 auto;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .token .token-remove {
-    align-items: center;
-    background-color: var(--grey-7);
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    height: 1rem;
-    width: 1rem;
-    margin: calc(-1 * var(--spacing-xs)) 0 calc(-1 * var(--spacing-xs))
-      var(--spacing-xs);
-    flex: 0 0 auto;
-  }
-  .token path {
-    fill: var(--background);
-  }
-  .token .token-remove:hover {
-    background-color: var(--grey-6);
-    cursor: pointer;
-  }
-
-  .placeholder {
-    pointer-events: none;
-    color: var(--ink);
-  }
-  .placeholder.disabled {
-    color: var(--grey-6);
-  }
-
-  .icon-clear path {
-    fill: white;
-  }
-  .options {
-    left: 0;
-    list-style: none;
-    margin-block-end: 0;
-    margin-block-start: 0;
-    overflow-y: auto;
-    padding-inline-start: 0;
-    position: absolute;
-    border: var(--border-dark);
-    border-radius: var(--border-radius-m);
-    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
-    margin: var(--spacing-xs) 0;
-    padding: var(--spacing-s) 0;
-    background-color: var(--background);
-    max-height: 200px;
-  }
-  li {
-    cursor: pointer;
-    padding: var(--spacing-s) var(--spacing-m);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-  }
-  li.selected {
-    background-color: var(--blue);
-    color: white;
-  }
-  li:not(.selected):hover {
-    background-color: var(--grey-1);
-  }
-  li.no-results:hover {
-    background-color: white;
-    cursor: initial;
-  }
-
-  .hidden {
-    height: 0;
-    overflow: hidden;
-    visibility: hidden;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    outline: 0;
-  }
-</style>
+<Field {label} {labelPosition} {disabled} {error}>
+  <Multiselect
+    {error}
+    {disabled}
+    {value}
+    {options}
+    {placeholder}
+    {getOptionLabel}
+    {getOptionValue}
+    on:change={onChange}
+    on:click
+  />
+</Field>
diff --git a/packages/bbui/src/Form/Multiselect.svench b/packages/bbui/src/Form/Multiselect.svench
deleted file mode 100644
index 86ad0de529..0000000000
--- a/packages/bbui/src/Form/Multiselect.svench
+++ /dev/null
@@ -1,63 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Multiselect from "./Multiselect.svelte";
-
-  const options = ["Red", "Blue", "Yellow", "Green", "Pink", "Very long color name to show text wrapping"];
-</script>
-
-<View name="default">
-  <Multiselect name="Test" label="Colours" placeholder="Choose some colours">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Multiselect>
-</View>
-
-<View name="right aligned">
-<div class="max-width">
-  <Multiselect align="right" name="Test" label="Colours" placeholder="Choose some colours">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Multiselect>
-</div>
-</View>
-
-<View name="secondary">
-  <Multiselect name="Test" label="Colours" secondary placeholder="Choose some colours">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Multiselect>
-</View>
-
-<View name="outline">
-  <Multiselect name="Test" label="Colours" outline placeholder="Choose some colours">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Multiselect>
-</View>
-
-<View name="disabled">
-  <Multiselect name="Test" label="Colours" disabled placeholder="Choose some colours">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Multiselect>
-</View>
-
-<View name="extraThin">
-  <Multiselect name="Test" label="Colours" extraThin placeholder="Choose some colours">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Multiselect>
-</View>
-
-<style>
-  .max-width {
-    align-self: flex-end;
-    max-width: 150px;
-  }
-</style>
diff --git a/packages/bbui/src/Form/Radio.svelte b/packages/bbui/src/Form/Radio.svelte
deleted file mode 100644
index b4a2637803..0000000000
--- a/packages/bbui/src/Form/Radio.svelte
+++ /dev/null
@@ -1,140 +0,0 @@
-<script>
-  import { createEventDispatcher } from "svelte"
-
-  const dispatch = createEventDispatcher()
-
-  export let value
-  export let group
-  export let name
-  export let disabled = false
-
-  function handleChange() {
-    if (disabled) return
-    group = value
-    dispatch("change", group)
-  }
-</script>
-
-<div class="container">
-  <input
-    {disabled}
-    on:change={handleChange}
-    {value}
-    bind:group
-    type="radio"
-    {name}
-    class="checkbox"
-    id={value} />
-  <div class="checkbox-container" on:click={handleChange}>
-    <div class:disabled class="check-div" class:checked={group === value}>
-      <div class="tick_mark" />
-    </div>
-  </div>
-  <slot />
-</div>
-
-<style>
-  .container {
-    display: flex;
-    gap: var(--spacing-s);
-  }
-  .checkbox-container {
-    position: relative;
-    z-index: 0;
-  }
-
-  .checkbox {
-    display: none;
-  }
-
-  .check-div {
-    position: relative;
-    width: 20px;
-    height: 20px;
-    background-color: var(--grey-2);
-    cursor: pointer;
-    transition: 0.2s ease transform, 0.2s ease background-color,
-      0.2s ease box-shadow;
-    overflow: hidden;
-    border-radius: 4px;
-  }
-
-  .check-div:before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    right: 0;
-    left: 0;
-    width: 12px;
-    height: 12px;
-    margin: 0 auto;
-    background-color: var(--background);
-    transform: translateY(-50%);
-    transition: 0.2s ease width, 0.2s ease height;
-    border-radius: 2px;
-  }
-
-  .check-div:active {
-    transform: translateY(-50%) scale(0.9);
-  }
-
-  .tick_mark {
-    position: absolute;
-    top: 50%;
-    left: 6px;
-    width: 5px;
-    height: 4px;
-    margin: 0 auto;
-    transform: rotateZ(-40deg);
-  }
-
-  .tick_mark:before,
-  .tick_mark:after {
-    content: "";
-    position: absolute;
-    background-color: var(--ink);
-    border-radius: 2px;
-    opacity: 0;
-    transition: 0.2s ease transform, 0.2s ease opacity;
-  }
-
-  .tick_mark:before {
-    left: 0;
-    bottom: 0;
-    width: 2px;
-    height: 6px;
-    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
-    transform: translateY(-68px);
-  }
-
-  .tick_mark:after {
-    left: 0;
-    bottom: 0;
-    width: 12px;
-    height: 2px;
-    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
-    transform: translateX(78px);
-  }
-
-  .check-div.disabled:active {
-    transform: none;
-  }
-
-  .checked {
-    background-color: var(--grey-2);
-  }
-  .checked.disabled {
-    background-color: var(--grey-5);
-  }
-
-  .checked:before {
-    width: 0;
-    height: 0;
-  }
-
-  .checked .tick_mark:before,
-  .checked .tick_mark:after {
-    transform: translate(0);
-    opacity: 1;
-  }
-</style>
diff --git a/packages/bbui/src/Form/Radio.svench.svx b/packages/bbui/src/Form/Radio.svench.svx
deleted file mode 100644
index 20d3c58c99..0000000000
--- a/packages/bbui/src/Form/Radio.svench.svx
+++ /dev/null
@@ -1,64 +0,0 @@
-<script>
-    import { View } from "svench";
-    import Radio from "./Radio.svelte";
-  
-    let selected = 'Cookies and cream'
-    let selected2 = 'Mint choc chip'
-  
-    let menu = [
-		'Cookies and cream',
-		'Mint choc chip',
-		'Raspberry ripple'
-	];
-  </script>
-  
-  ## Multiple checkboxes
-  Use an array and an each block to use the radio button.
-```svelte
-<script>
-    let selected = 'Cookies and cream'
-    let selected2 = 'Cookies and cream'
-
-    let menu = [
-        'Cookies and cream',
-        'Mint choc chip',
-        'Raspberry ripple'
-    ];
-</script>
-
-{#each menu as flavour}
-    <Radio name="Ice Cream Flavour" value={flavour} bind:group={selected} label={flavour} showLabel/>
-{/each}
-```
-  
-  
-  <View name="Multiple radio buttons">
-    <div class="container">
-        {#each menu as flavour}
-            <Radio name="Ice Cream Flavour"  value={flavour} bind:group={selected}>
-              <label for={flavour}>{flavour}</label>
-            </Radio>
-        {/each}
-    </div>
-  </View>
-
-  <View name="Disabled Radio inputs">
-    <div class="container">
-        {#each menu as flavour}
-            <Radio disabled name="Ice Cream Flavour"  value={flavour} bind:group={selected2}>
-              <label for={flavour}>{flavour}</label>
-            </Radio>
-        {/each}
-    </div>
-  </View>
-  
-  <style>
-    label {
-      display: grid;
-      place-items: center;
-    }
-    .container {
-      display: grid;
-      grid-gap: 10px;
-    }
-  </style>
\ No newline at end of file
diff --git a/packages/bbui/src/Form/RadioGroup.svelte b/packages/bbui/src/Form/RadioGroup.svelte
new file mode 100644
index 0000000000..7b661d724e
--- /dev/null
+++ b/packages/bbui/src/Form/RadioGroup.svelte
@@ -0,0 +1,38 @@
+<script>
+  import Field from "./Field.svelte"
+  import RadioGroup from "./Core/RadioGroup.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let label = null
+  export let disabled = false
+  export let labelPosition = "above"
+  export let error = null
+  export let options = []
+  export let getOptionLabel = option => extractProperty(option, "label")
+  export let getOptionValue = option => extractProperty(option, "value")
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+  const extractProperty = (value, property) => {
+    if (value && typeof value === "object") {
+      return value[property]
+    }
+    return value
+  }
+</script>
+
+<Field {label} {labelPosition} {disabled} {error}>
+  <RadioGroup
+    {error}
+    {disabled}
+    {value}
+    {options}
+    {getOptionLabel}
+    {getOptionValue}
+    on:change={onChange}
+  />
+</Field>
diff --git a/packages/bbui/src/Form/RichText.svelte b/packages/bbui/src/Form/RichText.svelte
deleted file mode 100644
index ab4b9c3d99..0000000000
--- a/packages/bbui/src/Form/RichText.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<script>
-  import * as Quill from "quill"
-  import * as MarkdownIt from "markdown-it"
-  import TurndownService from "turndown"
-  import { onMount } from "svelte"
-  import "quill/dist/quill.snow.css"
-
-  const convertMarkdown = new MarkdownIt()
-  convertMarkdown.set({
-    html: true,
-  })
-  const turndownService = new TurndownService()
-
-  export let value = ""
-  export let options = null
-  export let width = 400
-
-  let quill
-  let container
-  let defaultOptions = {
-    modules: {
-      toolbar: [
-        [{ header: [1, 2, 3, false] }],
-        ["bold", "italic", "underline", "strike"],
-      ],
-    },
-    placeholder: "Type something...",
-    theme: "snow", // or 'bubble'
-  }
-
-  let mergedOptions = { ...defaultOptions, ...options }
-
-  const updateContent = () => {
-    value = turndownService.turndown(quill.container.firstChild.innerHTML)
-  }
-
-  onMount(() => {
-    quill = new Quill(container, mergedOptions)
-    if (value)
-      quill.clipboard.dangerouslyPasteHTML(convertMarkdown.render(value + "\n"))
-
-    quill.on("text-change", updateContent)
-    return () => {
-      quill.off("text-change", updateContent)
-    }
-  })
-</script>
-
-<svelte:head>
-  {#if mergedOptions.theme !== 'snow'}
-    <link
-      rel="stylesheet"
-      href="//cdn.quilljs.com/1.3.6/quill.{mergedOptions.theme}.css" />
-  {/if}
-</svelte:head>
-
-<div style="width: {width}px">
-  <div bind:this={container} />
-</div>
diff --git a/packages/bbui/src/Form/RichText.svench.svx b/packages/bbui/src/Form/RichText.svench.svx
deleted file mode 100644
index 0a0a858866..0000000000
--- a/packages/bbui/src/Form/RichText.svench.svx
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-  import { View } from "svench";
-  import RichText from "./RichText.svelte";
-
-  const options = { placeholder: "this is not the default value!" };
-  let value;
-</script>
-
-### Rich Text Component
-
-This component uses the QuillJS library to add Rich Text editing functionality.
-
-It exposes a <code>content</code> variable that you can bind to in order to get Markdown out of the component.
-
-As well as the content you can also pass in an option object that looks like so:
-
-```js
-let options = {
-  modules: {
-   toolbar: [
-     [{ header: [1, 2, 3, false] }],
-     ['bold', 'italic', 'underline', 'strike']
-   ]
- },
-  placeholder: 'Type something...',
-  theme: 'snow'
-}
-```
-
-<View name="default">
-  <RichText bind:value />
-</View>
-
-<View name="passing in Markdown">
-  <RichText value="# This is an h1 heading!" />
-</View>
-
-<View name="passing in custom options">
-  <RichText {options} />
-</View>
diff --git a/packages/bbui/src/Form/Search.svelte b/packages/bbui/src/Form/Search.svelte
new file mode 100644
index 0000000000..96a92a7c43
--- /dev/null
+++ b/packages/bbui/src/Form/Search.svelte
@@ -0,0 +1,28 @@
+<script>
+  import Field from "./Field.svelte"
+  import Search from "./Core/Search.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let placeholder = null
+  export let disabled = false
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {disabled}>
+  <Search
+    {disabled}
+    {value}
+    {placeholder}
+    on:change={onChange}
+    on:click
+    on:input
+  />
+</Field>
diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte
index c245abd245..4b61ab3a33 100644
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@@ -1,95 +1,43 @@
 <script>
-  import Icon from "../Icons/Icon.svelte"
-  import Label from "../Styleguide/Label.svelte"
+  import Field from "./Field.svelte"
+  import Select from "./Core/Select.svelte"
+  import { createEventDispatcher } from "svelte"
 
-  export let value = ""
-  export let name = undefined
+  export let value = null
   export let label = undefined
-  export let thin = false
-  export let extraThin = false
-  export let secondary = false
-  export let outline = false
   export let disabled = false
+  export let readonly = false
+  export let labelPosition = "above"
+  export let error = null
+  export let placeholder = "Choose an option"
+  export let options = []
+  export let getOptionLabel = option => extractProperty(option, "label")
+  export let getOptionValue = option => extractProperty(option, "value")
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+  const extractProperty = (value, property) => {
+    if (value && typeof value === "object") {
+      return value[property]
+    }
+    return value
+  }
 </script>
 
-<div>
-  {#if label}
-    <Label extraSmall grey forAttr={name}>{label}</Label>
-  {/if}
-  <div class="relative">
-    <select
-      {name}
-      class:thin
-      class:extraThin
-      class:secondary
-      class:outline
-      {disabled}
-      on:change
-      bind:value>
-      <slot />
-    </select>
-    <div class="pointer">
-      <Icon name="arrowdown" />
-    </div>
-  </div>
-</div>
-
-<style>
-  select {
-    font-family: var(--font-sans);
-    display: block !important;
-    width: 100% !important;
-    border-radius: var(--border-radius-s);
-    border: none;
-    text-align: left;
-    color: var(--ink);
-    font-size: var(--font-size-s);
-    padding: var(--spacing-m) 2rem var(--spacing-m) var(--spacing-m) !important;
-    appearance: none !important;
-    -webkit-appearance: none !important;
-    -moz-appearance: none !important;
-    align-items: center;
-    white-space: pre;
-    outline: none;
-    border: var(--border-transparent);
-    background-color: var(--background);
-  }
-  select.thin {
-    padding: var(--spacing-m);
-    font-size: var(--font-size-xs);
-  }
-  select.extraThin {
-    padding: var(--spacing-s) 2rem var(--spacing-s) var(--spacing-m) !important;
-    font-size: var(--font-size-xs);
-  }
-  select.secondary {
-    background: var(--grey-2);
-  }
-  select.outline {
-    border: var(--border-light-2);
-  }
-  select:focus {
-    border: var(--border-blue);
-  }
-  select:disabled {
-    background: var(--grey-4);
-    color: var(--grey-6);
-  }
-
-  .relative {
-    position: relative !important;
-    display: block;
-  }
-
-  .pointer {
-    right: 0 !important;
-    top: 0 !important;
-    bottom: 0 !important;
-    position: absolute !important;
-    pointer-events: none !important;
-    padding-left: 0.5rem !important;
-    align-items: center !important;
-    display: flex !important;
-    color: var(--ink);
-  }
-</style>
+<Field {label} {labelPosition} {disabled} {error}>
+  <Select
+    {error}
+    {disabled}
+    {readonly}
+    {value}
+    {options}
+    {placeholder}
+    {getOptionLabel}
+    {getOptionValue}
+    on:change={onChange}
+    on:click
+  />
+</Field>
diff --git a/packages/bbui/src/Form/Select.svench b/packages/bbui/src/Form/Select.svench
deleted file mode 100644
index 750d7224ca..0000000000
--- a/packages/bbui/src/Form/Select.svench
+++ /dev/null
@@ -1,62 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Select from "./Select.svelte";
-  import Spacer from "../Spacer/Spacer.svelte"
-
-  const options = ["Chocolate", "Vanilla", "Strawberry Cheesecake"];
-</script>
-
-<View name="default">
-  <Select name="Test" label="Flavour">
-    <option value="">Choose an option</option>
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Select>
-</View>
-
-<View name="secondary">
-  <Select secondary name="Test" label="Flavour">
-    <option value="">Choose an option</option>
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Select>
-</View>
-
-<View name="outline">
-  <Select outline name="Test" label="Flavour">
-    <option value="">Choose an option</option>
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Select>
-</View>
-
-<View name="disabled">
-  <Select disabled name="Test" label="Flavour">
-    <option value="">Choose an option</option>
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Select>
-</View>
-
-<View name="thin">
-  <Select thin name="Test" label="Flavour">
-    <option value="">Choose an option</option>
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Select>
-</View>
-
-<View name="extraThin">
-  <Select extraThin name="Test" label="Flavour">
-    <option value="">Choose an option</option>
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Select>
-</View>
-
diff --git a/packages/bbui/src/Form/Slider.svelte b/packages/bbui/src/Form/Slider.svelte
deleted file mode 100644
index c8a4c0122e..0000000000
--- a/packages/bbui/src/Form/Slider.svelte
+++ /dev/null
@@ -1,88 +0,0 @@
-<script>
-  import Label from "../Styleguide/Label.svelte"
-
-  export let label
-  export let min = 0
-  export let max = 100
-  export let step = 1
-  export let value
-  export let showValue = false
-  export let showRange = false
-</script>
-
-<div>
-  {#if label}
-    <Label extraSmall grey>
-      {label}
-      {#if showValue && value != null}({value}){/if}
-    </Label>
-  {/if}
-  <div class="container">
-    {#if showRange && min != null}<span>{min}</span>{/if}
-    <input type="range" bind:value {min} {max} {step} />
-    {#if showRange && max != null}<span>{max}</span>{/if}
-  </div>
-</div>
-
-<style>
-  .container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-s);
-  }
-
-  span {
-    flex: 0 0 auto;
-    color: var(--grey-5);
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    font-weight: 400;
-  }
-
-  input[type="range"] {
-    width: 100%;
-    margin: 0;
-    background-color: transparent;
-    -webkit-appearance: none;
-    flex: 1 1 auto;
-  }
-  input[type="range"]:focus {
-    outline: none;
-  }
-  input[type="range"]::-webkit-slider-runnable-track {
-    background: var(--grey-4);
-    border-radius: 9px;
-    width: 100%;
-    height: 18px;
-    cursor: pointer;
-    padding: 0 2px;
-  }
-  input[type="range"]::-webkit-slider-thumb {
-    width: 14px;
-    height: 14px;
-    background: white;
-    border-radius: 100%;
-    cursor: pointer;
-    -webkit-appearance: none;
-    border: none;
-    margin-top: 2px;
-  }
-  input[type="range"]::-moz-range-track {
-    background: var(--grey-4);
-    border-radius: 9px;
-    width: 100%;
-    height: 18px;
-    cursor: pointer;
-    padding: 0 2px;
-  }
-  input[type="range"]::-moz-range-thumb {
-    width: 14px;
-    height: 14px;
-    background: white;
-    border-radius: 100%;
-    cursor: pointer;
-    border: none;
-  }
-</style>
diff --git a/packages/bbui/src/Form/Slider.svench b/packages/bbui/src/Form/Slider.svench
deleted file mode 100644
index 7ed59f78b8..0000000000
--- a/packages/bbui/src/Form/Slider.svench
+++ /dev/null
@@ -1,26 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Slider from "./Slider.svelte";
-</script>
-
-<View name="default">
-  <Slider label=Quantity value="50" />
-</View>
-
-<View name="show value">
-  <Slider label="Quantity" value="50" showValue />
-</View>
-
-<View name="show range">
-  <Slider label="Quantity" value="25" showValue showRange min="0" max="100" />
-</View>
-
-<View name="custom min and max">
-  <Slider label="Quantity" value="350" showValue showRange min="50" max="500" />
-</View>
-
-<View name="custom step">
-  <Slider label="Quantity" value="25" step="25" showValue showRange min="0" max="100" />
-</View>
-
-
diff --git a/packages/bbui/src/Form/TextArea.svelte b/packages/bbui/src/Form/TextArea.svelte
index 1133a99127..12ee20190a 100644
--- a/packages/bbui/src/Form/TextArea.svelte
+++ b/packages/bbui/src/Form/TextArea.svelte
@@ -1,132 +1,30 @@
 <script>
+  import Field from "./Field.svelte"
+  import TextArea from "./Core/TextArea.svelte"
   import { createEventDispatcher } from "svelte"
-  import Button from "../Button/Button.svelte"
-  import Label from "../Styleguide/Label.svelte"
-  import text_area_resize from "../Actions/autoresize_textarea.js"
+
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let placeholder = null
+  export let disabled = false
+  export let error = null
+  export let getCaretPosition = null
 
   const dispatch = createEventDispatcher()
-
-  export let name = false
-  export let label = false
-  export let thin = false
-  export let extraThin = false
-  export let edit = false
-  export let disabled = false
-  export let placeholder
-  export let validator = () => {}
-  export let value = ""
-  export const getCaretPosition = () => {
-    return { start: textarea.selectionStart, end: textarea.selectionEnd }
-  }
-
-  let textarea
-
-  // This section handles the edit mode and dispatching of things to the parent when saved
-  let editMode = false
-
-  const save = () => {
-    editMode = false
-    dispatch("save", value)
-  }
-
-  const enableEdit = () => {
-    editMode = true
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
   }
 </script>
 
-<div class="container">
-  {#if label || edit}
-    <div class="label-container">
-      {#if label}
-        <Label extraSmall grey forAttr={name}>{label}</Label>
-      {/if}
-      {#if edit}
-        <div class="controls">
-          <Button small secondary disabled={editMode} on:click={enableEdit}>
-            Edit
-          </Button>
-          <Button small blue disabled={!editMode} on:click={save}>Save</Button>
-        </div>
-      {/if}
-    </div>
-  {/if}
-  <textarea
-    class:thin
-    class:extraThin
-    bind:value
-    bind:this={textarea}
-    on:change
-    disabled={disabled || (edit && !editMode)}
+<Field {label} {labelPosition} {disabled} {error}>
+  <TextArea
+    bind:getCaretPosition
+    {error}
+    {disabled}
+    {value}
     {placeholder}
-    {name}
-    use:text_area_resize />
-</div>
-
-<style>
-  .container {
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .label-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-end;
-    margin-bottom: var(--spacing-s);
-  }
-  .label-container :global(label) {
-    margin-bottom: 0;
-  }
-
-  .controls {
-    align-items: center;
-    display: grid;
-    grid-template-columns: auto auto;
-    grid-gap: 12px;
-    margin-left: auto;
-    padding-left: 12px;
-  }
-  .controls :global(button) {
-    min-width: 100px;
-    font-size: var(--font-size-s);
-    border-radius: var(--rounded-small);
-  }
-
-  textarea {
-    min-width: 0;
-    color: var(--ink);
-    font-size: var(--font-size-s);
-    font-family: var(--font-sans);
-    border: none;
-    border-radius: var(--border-radius-s);
-    background-color: var(--grey-2);
-    padding: var(--spacing-m);
-    margin: 0;
-    border: var(--border-transparent);
-    outline: none;
-  }
-  textarea::placeholder {
-    color: var(--grey-6);
-  }
-  textarea.thin {
-    font-size: var(--font-size-xs);
-  }
-  textarea.extraThin {
-    font-size: var(--font-size-xs);
-    padding: var(--spacing-s) var(--spacing-m);
-  }
-  textarea:focus {
-    border: var(--border-blue);
-  }
-  textarea:disabled {
-    background: var(--grey-4);
-  }
-  textarea:disabled {
-    background: var(--grey-4);
-  }
-  textarea:disabled::placeholder {
-    color: var(--grey-6);
-  }
-</style>
+    on:change={onChange}
+  />
+</Field>
diff --git a/packages/bbui/src/Form/TextArea.svench b/packages/bbui/src/Form/TextArea.svench
deleted file mode 100644
index 549d365b83..0000000000
--- a/packages/bbui/src/Form/TextArea.svench
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-  import { View } from "svench";
-  import TextArea from "./TextArea.svelte";
-
-  import Button from "../Button/Button.svelte";
-</script>
-
-<View name="default">
-  <TextArea placeholder="Enter your email text" label="Email Body" />
-</View>
-
-<View name="disabled">
-  <TextArea disabled placeholder="Enter your email text" label="Email Body" />
-</View>
-
-<View name="no label">
-  <TextArea placeholder="Enter your email text" />
-</View>
-
-<View name="thin">
-  <TextArea thin placeholder="Enter your email text" label="Email Body" />
-</View>
-
-<View name="extraThin">
-  <TextArea extraThin placeholder="Enter your email text" label="Email Body" />
-</View>
-
-<View name="with buttons">
-  <TextArea edit placeholder="Enter your email text" label="Email Body" />
-</View>
diff --git a/packages/bbui/src/Form/Toggle.svelte b/packages/bbui/src/Form/Toggle.svelte
index 56e70f7e70..798f0a63ec 100644
--- a/packages/bbui/src/Form/Toggle.svelte
+++ b/packages/bbui/src/Form/Toggle.svelte
@@ -1,110 +1,22 @@
 <script>
-  export let name = undefined
-  export let text = ""
-  export let checked = false
+  import Field from "./Field.svelte"
+  import Switch from "./Core/Switch.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let text = null
   export let disabled = false
-  export let screenreader = true
-  export let thin = false
+  export let error = null
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
 </script>
 
-<label for={name} class="container">
-  <div class="toggle">
-    <input
-      id={name}
-      {name}
-      type="checkbox"
-      class:screenreader
-      {disabled}
-      bind:checked
-      on:change />
-    <div class="track">
-      <div class="thumb" />
-    </div>
-  </div>
-  {#if text}<span class="text" class:thin>{text}</span>{/if}
-</label>
-
-<style>
-  .container {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-s);
-  }
-  .container:disabled {
-    background-color: var(--grey-2);
-    cursor: not-allowed;
-  }
-
-  .toggle {
-    position: relative;
-    display: inline-block;
-    align-self: center;
-    cursor: pointer;
-    -webkit-user-select: none;
-    background: transparent;
-  }
-
-  .track {
-    width: 32px;
-    height: 18px;
-    background-color: var(--grey-4);
-    border-radius: 9px;
-    transition-delay: 0.12s;
-    transition-duration: 0.2s;
-    transition-property: background;
-    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-    position: relative;
-  }
-
-  .thumb {
-    cursor: pointer;
-    position: absolute;
-    transition-duration: 0.28s;
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-    top: 2px;
-    left: 2px;
-    width: 14px;
-    height: 14px;
-    background-color: white;
-    border-radius: var(--border-radius-xl);
-  }
-
-  input[type="checkbox"]:checked ~ .track .thumb {
-    transform: translateX(14px);
-  }
-  input[type="checkbox"]:checked ~ .track {
-    background-color: var(--blue);
-  }
-  input[type="checkbox"]:disabled ~ .track {
-    background-color: var(--grey-4);
-    cursor: not-allowed;
-  }
-  input[type="checkbox"]:disabled ~ .track .thumb {
-    background-color: var(--grey-2);
-    cursor: not-allowed;
-  }
-
-  .screenreader {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-
-  .text {
-    font-size: var(--font-size-s);
-    font-family: var(--font-sans);
-    cursor: pointer;
-    user-select: none;
-    color: var(--ink);
-  }
-  .text.thin {
-    font-size: var(--font-size-xs);
-  }
-</style>
+<Field {label} {labelPosition} {disabled} {error}>
+  <Switch {error} {disabled} {text} {value} on:change={onChange} />
+</Field>
diff --git a/packages/bbui/src/Form/Toggle.svench b/packages/bbui/src/Form/Toggle.svench
deleted file mode 100644
index 4e2af13021..0000000000
--- a/packages/bbui/src/Form/Toggle.svench
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Toggle from "./Toggle.svelte";
-</script>
-
-<View name="default">
-  <Toggle />
-</View>
-
-<View name="checked with text">
-  <Toggle text="Display on mobile?" />
-</View>
-
-<View name="thin">
-  <Toggle text="Display on mobile?" thin />
-</View>
-
-<View name="disabled">
-  <Toggle disabled={true} />
-</View>
-
diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
new file mode 100644
index 0000000000..847896178e
--- /dev/null
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -0,0 +1,43 @@
+<script context="module">
+  export const directions = ["n", "ne", "e", "se", "s", "sw", "w", "nw"]
+</script>
+
+<script>
+  export let direction = "n"
+  export let name = "Add"
+  export let hidden = false
+  export let size = "M"
+  export let hoverable = false
+  export let disabled = false
+
+  $: rotation = directions.indexOf(direction) * 45
+</script>
+
+<svg
+  on:click
+  class:hoverable
+  class:disabled
+  class="spectrum-Icon spectrum-Icon--size{size}"
+  focusable="false"
+  aria-hidden={hidden}
+  aria-label={name}
+  style={`transform: rotate(${rotation}deg)`}
+>
+  <use xlink:href="#spectrum-icon-18-{name}" />
+</svg>
+
+<style>
+  svg.hoverable {
+    pointer-events: all;
+    transition: color var(--spectrum-global-animation-duration-100, 130ms);
+  }
+  svg.hoverable:hover {
+    color: var(--spectrum-alias-icon-color-selected);
+    cursor: pointer;
+  }
+
+  svg.disabled {
+    color: var(--spectrum-global-color-gray-500) !important;
+    pointer-events: none !important;
+  }
+</style>
diff --git a/packages/bbui/src/Icons/Contribution.svelte b/packages/bbui/src/Icons/Contribution.svelte
deleted file mode 100644
index faa7560167..0000000000
--- a/packages/bbui/src/Icons/Contribution.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  width="24"
-  height="24">
-  <path fill="none" d="M0 0h24v24H0z" />
-  <path
-    d="M14.121 10.48a1 1 0 0 0-1.414 0l-.707.706a2 2 0 1
-    1-2.828-2.828l5.63-5.632a6.5 6.5 0 0 1 6.377 10.568l-2.108
-    2.135-4.95-4.95zM3.161 4.468a6.503 6.503 0 0 1 8.009-.938L7.757 6.944a4 4 0
-    0 0 5.513 5.794l.144-.137 4.243 4.242-4.243 4.243a2 2 0 0 1-2.828 0L3.16
-    13.66a6.5 6.5 0 0 1 0-9.192z"
-    fill="rgba(128,129,146,1)" />
-</svg>
diff --git a/packages/bbui/src/Icons/Icon.svelte b/packages/bbui/src/Icons/Icon.svelte
deleted file mode 100644
index d929018011..0000000000
--- a/packages/bbui/src/Icons/Icon.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script context="module">
-  import pathsByName from "./icon-paths"
-  export const iconOptions = Object.keys(pathsByName)
-  export const directions = ["n", "ne", "e", "se", "s", "sw", "w", "nw"]
-</script>
-
-<script>
-  export let name = "arrow"
-  export let direction = "n"
-
-  $: paths = pathsByName[name] || []
-  $: rotation = directions.indexOf(direction) * 45
-</script>
-
-<svg
-  class="c"
-  viewBox="0 0 24 24"
-  fill-rule="evenodd"
-  clip-rule="evenodd"
-  style={`transform: rotate(${rotation}deg)`}>
-  {#each paths as path}
-    <path d={path} />
-  {/each}
-</svg>
-
-<style>
-  .c {
-    width: 1.25em;
-    height: 1.25em;
-    fill: currentColor;
-    overflow: visible;
-    margin-right: var(--spacing-xs);
-  }
-</style>
diff --git a/packages/bbui/src/Icons/Icon.svench b/packages/bbui/src/Icons/Icon.svench
deleted file mode 100644
index d1ee1cb8f5..0000000000
--- a/packages/bbui/src/Icons/Icon.svench
+++ /dev/null
@@ -1,109 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Icon from "./Icon.svelte";
-</script>
-
-<View name="add icon">
-  <Icon name="add" />
-</View>
-
-<View name="Add Row icon">
-  <Icon name="addrow" />
-</View>
-
-<View name="Add Column icon">
-  <Icon name="addcolumn" />
-</View>
-
-<View name="View icon">
-  <Icon name="view" />
-</View>
-
-<View name="Table icon">
-  <Icon name="table" />
-</View>
-
-<View name="Edit icon">
-  <Icon name="edit" />
-</View>
-
-<View name="Delete icon">
-  <Icon name="delete" />
-</View>
-
-<View name="Close icon">
-  <Icon name="close" />
-</View>
-
-<View name="Arrow Up icon">
-  <Icon name="arrowup" />
-</View>
-
-<View name="Arrow Right icon">
-  <Icon name="arrowright" />
-</View>
-
-<View name="Arrow Down icon">
-  <Icon name="arrowdown" />
-</View>
-
-<View name="Arrow Left icon">
-  <Icon name="arrowleft" />
-</View>
-
-<View name="Search icon">
-  <Icon name="search" />
-</View>
-
-<View name="Preview icon">
-  <Icon name="preview" />
-</View>
-
-<View name="Settings icon">
-  <Icon name="settings" />
-</View>
-
-<View name="Add User icon">
-  <Icon name="adduser" />
-</View>
-
-<View name="Plugin icon">
-  <Icon name="plugin" />
-</View>
-
-<View name="Help icon">
-  <Icon name="help" />
-</View>
-
-<View name="Sort Ascending icon">
-  <Icon name="sortascending" />
-</View>
-
-<View name="Sort Descending icon">
-  <Icon name="sortdescending" />
-</View>
-
-<View name="Calculate icon">
-  <Icon name="calculate" />
-</View>
-
-<View name="Filter icon">
-  <Icon name="filter" />
-</View>
-
-<View name="Add Fill">
-  <Icon name="addfill" />
-</View>
-
-<View name="Group">
-  <Icon name="group" />
-</View>
-
-<View name="Lightning">
-  <Icon name="lightning" />
-</View>
-
-<View name="Download">
-  <Icon name="download" />
-</View>
-
diff --git a/packages/bbui/src/Icons/icon-paths.js b/packages/bbui/src/Icons/icon-paths.js
deleted file mode 100644
index dc2fbb3d96..0000000000
--- a/packages/bbui/src/Icons/icon-paths.js
+++ /dev/null
@@ -1,128 +0,0 @@
-export default {
-  arrow: [
-    "M0.200275 13.2782C0.200275 12.4153 0.89983 11.7157 1.76278 11.7157H23.6378C24.5007 11.7157 25.2003 12.4153 25.2003 13.2782C25.2003 14.1411 24.5007 14.8407 23.6378 14.8407H1.76278C0.89983 14.8407 0.200275 14.1411 0.200275 13.2782Z",
-    "M11.5954 1.23584C12.2056 0.62565 13.1949 0.62565 13.8051 1.23584L24.7426 12.1733C25.3528 12.7835 25.3528 13.7729 24.7426 14.3831L13.8051 25.3206C13.1949 25.9307 12.2056 25.9307 11.5954 25.3206C10.9852 24.7104 10.9852 23.721 11.5954 23.1108L21.4281 13.2782L11.5954 3.44555C10.9852 2.83536 10.9852 1.84604 11.5954 1.23584Z",
-  ],
-  check: [
-    "M24.3522 3.64786C23.4883 2.78405 22.0878 2.78405 21.224 3.64786L8.64198 16.2299L3.77601 11.3639C2.9122 10.5001 1.51168 10.5001 0.647861 11.3639C-0.215954 12.2277 -0.215954 13.6283 0.647861 14.4921L7.07791 20.9221C7.94172 21.7859 9.34224 21.7859 10.2061 20.9221L24.3522 6.77601L23.6974 6.12128L24.3522 6.77601C25.216 5.9122 25.216 4.51168 24.3522 3.64786L23.6974 4.30259L24.3522 3.64786Z",
-  ],
-  coffee: [
-    "M6.69069 1.96879C6.69069 1.36848 6.20405 0.881836 5.60374 0.881836C5.00343 0.881836 4.51678 1.36848 4.51678 1.96879V5.22966C4.51678 5.82997 5.00343 6.31662 5.60374 6.31662C6.20405 6.31662 6.69069 5.82997 6.69069 5.22966V1.96879ZM0.168955 9.57749C0.168955 8.97718 0.655602 8.49053 1.25591 8.49053H18.6472H19.7342C21.1756 8.49053 22.5579 9.06312 23.5771 10.0823C24.5964 11.1016 25.169 12.4839 25.169 13.9253C25.169 15.3667 24.5964 16.7491 23.5771 17.7683C22.5579 18.7875 21.1756 19.3601 19.7342 19.3601C19.7342 20.8015 19.1616 22.1838 18.1424 23.2031C17.1231 24.2223 15.7408 24.7949 14.2994 24.7949H5.60374C4.16234 24.7949 2.77998 24.2223 1.76077 23.2031C0.741547 22.1838 0.168955 20.8015 0.168955 19.3601V9.57749ZM19.7342 17.1862V10.6644C20.599 10.6644 21.4284 11.008 22.04 11.6195C22.6515 12.2311 22.995 13.0605 22.995 13.9253C22.995 14.7901 22.6515 15.6196 22.04 16.2311C21.4284 16.8426 20.599 17.1862 19.7342 17.1862ZM17.5603 10.6644V18.2731V19.3601C17.5603 20.2249 17.2167 21.0543 16.6052 21.6659C15.9936 22.2774 15.1642 22.621 14.2994 22.621H5.60374C4.7389 22.621 3.90949 22.2774 3.29795 21.6659C2.68642 21.0543 2.34287 20.2249 2.34287 19.3601V10.6644H17.5603ZM9.95156 0.881836C10.5519 0.881836 11.0385 1.36848 11.0385 1.96879V5.22966C11.0385 5.82997 10.5519 6.31662 9.95156 6.31662C9.35125 6.31662 8.86461 5.82997 8.86461 5.22966V1.96879C8.86461 1.36848 9.35125 0.881836 9.95156 0.881836ZM15.3863 1.96879C15.3863 1.36848 14.8997 0.881836 14.2994 0.881836C13.6991 0.881836 13.2124 1.36848 13.2124 1.96879V5.22966C13.2124 5.82997 13.6991 6.31662 14.2994 6.31662C14.8997 6.31662 15.3863 5.82997 15.3863 5.22966V1.96879Z",
-  ],
-  copy: [
-    "M2.98325 3.58322C3.19636 3.37011 3.48539 3.25039 3.78678 3.25039H14.014C14.3154 3.25039 14.6045 3.37011 14.8176 3.58322C15.0307 3.79633 15.1504 4.08537 15.1504 4.38675V5.52312C15.1504 6.15071 15.6592 6.65948 16.2868 6.65948C16.9144 6.65948 17.4231 6.15071 17.4231 5.52312V4.38675C17.4231 3.4826 17.064 2.61549 16.4246 1.97616C15.7853 1.33683 14.9182 0.977661 14.014 0.977661H3.78678C2.88263 0.977661 2.01551 1.33683 1.37619 1.97616C0.736856 2.61549 0.377686 3.4826 0.377686 4.38675V14.614C0.377686 15.5182 0.736857 16.3853 1.37619 17.0246C2.01551 17.6639 2.88263 18.0231 3.78678 18.0231H4.92314C5.55074 18.0231 6.0595 17.5143 6.0595 16.8868C6.0595 16.2592 5.55074 15.7504 4.92314 15.7504H3.78678C3.48539 15.7504 3.19636 15.6307 2.98325 15.4176C2.77014 15.2044 2.65041 14.9154 2.65041 14.614V4.38675C2.65041 4.08537 2.77014 3.79633 2.98325 3.58322ZM10.605 12.3413C10.605 11.7137 11.1137 11.2049 11.7413 11.2049H21.9686C22.5962 11.2049 23.105 11.7137 23.105 12.3413V22.5686C23.105 23.1962 22.5962 23.7049 21.9686 23.7049H11.7413C11.1137 23.7049 10.605 23.1962 10.605 22.5686V12.3413ZM11.7413 8.93221C9.85853 8.93221 8.33223 10.4585 8.33223 12.3413V22.5686C8.33223 24.4514 9.85853 25.9777 11.7413 25.9777H21.9686C23.8514 25.9777 25.3777 24.4514 25.3777 22.5686V12.3413C25.3777 10.4585 23.8514 8.93221 21.9686 8.93221H11.7413Z",
-  ],
-  downloadalt: [
-    "M2.21191 15.4277C2.90227 15.4277 3.46191 15.9874 3.46191 16.6777V21.6777C3.46191 22.0093 3.59361 22.3272 3.82803 22.5616C4.06245 22.796 4.38039 22.9277 4.71191 22.9277H22.2119C22.5434 22.9277 22.8614 22.796 23.0958 22.5616C23.3302 22.3272 23.4619 22.0093 23.4619 21.6777V16.6777C23.4619 15.9874 24.0216 15.4277 24.7119 15.4277C25.4023 15.4277 25.9619 15.9874 25.9619 16.6777V21.6777C25.9619 22.6723 25.5668 23.6261 24.8636 24.3294C24.1603 25.0326 23.2065 25.4277 22.2119 25.4277H4.71191C3.71735 25.4277 2.76352 25.0326 2.06026 24.3294C1.357 23.6261 0.961914 22.6723 0.961914 21.6777V16.6777C0.961914 15.9874 1.52156 15.4277 2.21191 15.4277Z",
-    "M6.32803 9.54385C6.81619 9.0557 7.60764 9.0557 8.0958 9.54385L13.4619 14.91L18.828 9.54385C19.3162 9.0557 20.1076 9.0557 20.5958 9.54385C21.084 10.032 21.084 10.8235 20.5958 11.3116L14.3458 17.5616C13.8576 18.0498 13.0662 18.0498 12.578 17.5616L6.32803 11.3116C5.83988 10.8235 5.83988 10.032 6.32803 9.54385Z",
-    "M13.4619 0.427734C14.1523 0.427734 14.7119 0.987378 14.7119 1.67773V16.6777C14.7119 17.3681 14.1523 17.9277 13.4619 17.9277C12.7716 17.9277 12.2119 17.3681 12.2119 16.6777V1.67773C12.2119 0.987378 12.7716 0.427734 13.4619 0.427734Z",
-  ],
-  external: [
-    "M25.3673 1.28312C25.3077 1.13904 25.22 1.00384 25.1042 0.88591C25.0988 0.88042 25.0933 0.87498 25.0878 0.86959C24.8623 0.648163 24.5532 0.511597 24.2122 0.511597H24.2119H16.7122C16.0218 0.511597 15.4622 1.07124 15.4622 1.7616C15.4622 2.45195 16.0218 3.0116 16.7122 3.0116H21.1944L9.57827 14.6277C9.09012 15.1159 9.09012 15.9073 9.57827 16.3955C10.0664 16.8836 10.8579 16.8836 11.346 16.3955L22.9622 4.77936V9.2616C22.9622 9.95195 23.5218 10.5116 24.2122 10.5116C24.9025 10.5116 25.4622 9.95195 25.4622 9.2616V1.76269C25.4622 1.75848 25.4621 1.75427 25.4621 1.75006C25.4606 1.59108 25.429 1.43233 25.3673 1.28312ZM4.21216 6.7616C3.88064 6.7616 3.5627 6.89329 3.32827 7.12771C3.09385 7.36213 2.96216 7.68008 2.96216 8.0116V21.7616C2.96216 22.0931 3.09385 22.4111 3.32827 22.6455C3.5627 22.8799 3.88064 23.0116 4.21216 23.0116H17.9622C18.2937 23.0116 18.6116 22.8799 18.846 22.6455C19.0805 22.4111 19.2122 22.0931 19.2122 21.7616V14.2616C19.2122 13.5712 19.7718 13.0116 20.4622 13.0116C21.1525 13.0116 21.7122 13.5712 21.7122 14.2616V21.7616C21.7122 22.7562 21.3171 23.71 20.6138 24.4132C19.9105 25.1165 18.9567 25.5116 17.9622 25.5116H4.21216C3.2176 25.5116 2.26377 25.1165 1.56051 24.4132C0.857246 23.71 0.462158 22.7562 0.462158 21.7616V8.0116C0.462158 7.01704 0.857246 6.06321 1.56051 5.35995C2.26377 4.65668 3.2176 4.2616 4.21216 4.2616H11.7122C12.4025 4.2616 12.9622 4.82124 12.9622 5.5116C12.9622 6.20195 12.4025 6.7616 11.7122 6.7616H4.21216Z",
-  ],
-  file: [
-    "M4.00045 1.63229C4.63978 0.99296 5.5069 0.633789 6.41104 0.633789H14.3656C14.667 0.633789 14.956 0.753513 15.1691 0.966622L23.1237 8.92117C23.3368 9.13428 23.4565 9.42332 23.4565 9.7247V22.2247C23.4565 23.1288 23.0973 23.996 22.458 24.6353C21.8187 25.2746 20.9516 25.6338 20.0474 25.6338H6.41104C5.5069 25.6338 4.63978 25.2746 4.00045 24.6353C3.36112 23.996 3.00195 23.1288 3.00195 22.2247V4.04288C3.00195 3.13873 3.36112 2.27162 4.00045 1.63229ZM6.41104 2.90652C6.10966 2.90652 5.82062 3.02624 5.60751 3.23935C5.3944 3.45246 5.27468 3.7415 5.27468 4.04288V22.2247C5.27468 22.5261 5.3944 22.8151 5.60751 23.0282C5.82062 23.2413 6.10966 23.3611 6.41104 23.3611H20.0474C20.3488 23.3611 20.6378 23.2413 20.8509 23.0282C21.064 22.8151 21.1838 22.5261 21.1838 22.2247V10.1954L13.8949 2.90652H6.41104Z",
-    "M14.3656 0.633789C14.9932 0.633789 15.502 1.14256 15.502 1.77015V8.58833H22.3202C22.9478 8.58833 23.4565 9.0971 23.4565 9.7247C23.4565 10.3523 22.9478 10.8611 22.3202 10.8611H14.3656C13.738 10.8611 13.2292 10.3523 13.2292 9.7247V1.77015C13.2292 1.14256 13.738 0.633789 14.3656 0.633789Z",
-  ],
-  list: [
-    "M0 10.25C0 9.55964 0.559644 9 1.25 9H18.75C19.4404 9 20 9.55964 20 10.25C20 10.9404 19.4404 11.5 18.75 11.5H1.25C0.559644 11.5 0 10.9404 0 10.25Z",
-    "M0 5.25C0 4.55964 0.559644 4 1.25 4H23.75C24.4404 4 25 4.55964 25 5.25C25 5.94036 24.4404 6.5 23.75 6.5H1.25C0.559644 6.5 0 5.94036 0 5.25Z",
-    "M0 15.25C0 14.5596 0.559644 14 1.25 14H23.75C24.4404 14 25 14.5596 25 15.25C25 15.9404 24.4404 16.5 23.75 16.5H1.25C0.559644 16.5 0 15.9404 0 15.25Z",
-    "M0 20.25C0 19.5596 0.559644 19 1.25 19H18.75C19.4404 19 20 19.5596 20 20.25C20 20.9404 19.4404 21.5 18.75 21.5H1.25C0.559644 21.5 0 20.9404 0 20.25Z",
-  ],
-  money: [
-    "M13.2917 0C13.867 0 14.3333 0.46637 14.3333 1.04167V23.9583C14.3333 24.5336 13.867 25 13.2917 25C12.7164 25 12.25 24.5336 12.25 23.9583V1.04167C12.25 0.46637 12.7164 0 13.2917 0Z",
-    "M7.37294 5.53956C8.25201 4.66049 9.4443 4.16663 10.6875 4.16663H18.5C19.0753 4.16663 19.5417 4.633 19.5417 5.20829C19.5417 5.78359 19.0753 6.24996 18.5 6.24996H10.6875C9.99683 6.24996 9.33445 6.52433 8.84608 7.0127C8.3577 7.50108 8.08333 8.16346 8.08333 8.85413C8.08333 9.54479 8.3577 10.2072 8.84608 10.6955C9.33445 11.1839 9.99683 11.4583 10.6875 11.4583H15.8958C17.139 11.4583 18.3313 11.9522 19.2104 12.8312C20.0895 13.7103 20.5833 14.9026 20.5833 16.1458C20.5833 17.389 20.0895 18.5813 19.2104 19.4604C18.3313 20.3394 17.139 20.8333 15.8958 20.8333H7.04167C6.46637 20.8333 6 20.3669 6 19.7916C6 19.2163 6.46637 18.75 7.04167 18.75H15.8958C16.5865 18.75 17.2489 18.4756 17.7373 17.9872C18.2256 17.4988 18.5 16.8365 18.5 16.1458C18.5 15.4551 18.2256 14.7927 17.7373 14.3044C17.2489 13.816 16.5865 13.5416 15.8958 13.5416H10.6875C9.4443 13.5416 8.25201 13.0478 7.37294 12.1687C6.49386 11.2896 6 10.0973 6 8.85413C6 7.61092 6.49386 6.41864 7.37294 5.53956Z",
-  ],
-  paperclip: [
-    "M17.5359 2.82806C16.6555 2.82806 15.8112 3.17779 15.1886 3.80031L5.02747 13.9615C3.99 14.999 3.40716 16.4061 3.40716 17.8733C3.40716 19.3405 3.99 20.7476 5.02747 21.785C6.06493 22.8225 7.47204 23.4053 8.93924 23.4053C10.4064 23.4053 11.8135 22.8225 12.851 21.785L23.0122 11.6239C23.444 11.1921 24.1441 11.1921 24.5759 11.6239C25.0076 12.0556 25.0076 12.7557 24.5759 13.1875L14.4147 23.3487C12.9625 24.8009 10.9929 25.6167 8.93924 25.6167C6.88555 25.6167 4.91598 24.8009 3.4638 23.3487C2.01162 21.8965 1.1958 19.9269 1.1958 17.8733C1.1958 15.8196 2.01162 13.85 3.4638 12.3978L13.625 2.23665C14.6622 1.19941 16.069 0.616699 17.5359 0.616699C19.0028 0.616699 20.4095 1.19941 21.4468 2.23665C22.484 3.27388 23.0667 4.68068 23.0667 6.14755C23.0667 7.61442 22.484 9.02121 21.4468 10.0584L11.2745 20.2196C10.6523 20.8419 9.80824 21.1915 8.92818 21.1915C8.04812 21.1915 7.20411 20.8419 6.58181 20.2196C5.95952 19.5973 5.60992 18.7533 5.60992 17.8733C5.60992 16.9932 5.95952 16.1492 6.58181 15.5269L15.9695 6.15029C16.4015 5.71875 17.1016 5.71916 17.5331 6.15121C17.9647 6.58326 17.9643 7.28333 17.5322 7.71487L8.14548 17.0906C7.93818 17.2981 7.82127 17.5799 7.82127 17.8733C7.82127 18.1668 7.93789 18.4484 8.14548 18.656C8.35306 18.8636 8.63461 18.9802 8.92818 18.9802C9.22175 18.9802 9.50329 18.8636 9.71088 18.656L19.8831 8.49479C20.5054 7.8723 20.8554 7.02773 20.8554 6.14755C20.8554 5.26716 20.5056 4.42284 19.8831 3.80031C19.2606 3.17779 18.4163 2.82806 17.5359 2.82806Z",
-  ],
-  person: [
-    "M3.04927 16.6449C4.23321 15.4462 5.83898 14.7727 7.51333 14.7727H17.6143C19.2887 14.7727 20.8945 15.4462 22.0784 16.6449C23.2623 17.8436 23.9275 19.4695 23.9275 21.1648V23.7216C23.9275 24.4276 23.3622 25 22.6648 25C21.9675 25 21.4022 24.4276 21.4022 23.7216V21.1648C21.4022 20.1476 21.0031 19.1721 20.2928 18.4528C19.5824 17.7336 18.6189 17.3295 17.6143 17.3295H7.51333C6.50872 17.3295 5.54526 17.7336 4.83489 18.4528C4.12453 19.1721 3.72545 20.1476 3.72545 21.1648V23.7216C3.72545 24.4276 3.16015 25 2.46282 25C1.76549 25 1.2002 24.4276 1.2002 23.7216V21.1648C1.2002 19.4695 1.86533 17.8436 3.04927 16.6449Z",
-    "M11.9956 2.5C9.92454 2.5 8.24561 4.17893 8.24561 6.25C8.24561 8.32107 9.92454 10 11.9956 10C14.0667 10 15.7456 8.32107 15.7456 6.25C15.7456 4.17893 14.0667 2.5 11.9956 2.5ZM5.74561 6.25C5.74561 2.79822 8.54383 0 11.9956 0C15.4474 0 18.2456 2.79822 18.2456 6.25C18.2456 9.70178 15.4474 12.5 11.9956 12.5C8.54383 12.5 5.74561 9.70178 5.74561 6.25Z",
-  ],
-  refresh: [
-    "M6.97937 3.40529C8.70577 2.45337 10.6948 2.08834 12.6467 2.36521C14.5986 2.64207 16.4076 3.54582 17.8012 4.94028C17.8093 4.94841 17.8176 4.95642 17.8259 4.9643L21.0026 7.95574H17.048C16.4203 7.95574 15.9115 8.4646 15.9115 9.09231C15.9115 9.72002 16.4203 10.2289 17.048 10.2289H23.8643H23.8675C24.0269 10.2289 24.1787 10.196 24.3165 10.1367C24.4544 10.0775 24.5828 9.98985 24.6925 9.874C24.7014 9.86462 24.7102 9.85508 24.7187 9.8454C24.9095 9.62998 25.0041 9.36088 25.004 9.09232C25.004 9.09121 25.004 9.09009 25.004 9.08898V2.27288C25.004 1.64517 24.4952 1.13631 23.8675 1.13631C23.2397 1.13631 22.7309 1.64517 22.7309 2.27288V6.46082L19.3966 3.32095C17.6563 1.58497 15.4 0.45984 12.9659 0.11459C10.526 -0.231487 8.03977 0.224801 5.88178 1.4147C3.72379 2.60459 2.01099 4.46363 1.00148 6.71166C-0.00803095 8.9597 -0.259554 11.4749 0.284811 13.8784C0.829176 16.2818 2.13994 18.4432 4.01957 20.0368C5.89921 21.6305 8.24589 22.5701 10.706 22.714C13.1661 22.8579 15.6063 22.1984 17.6589 20.8347C19.7116 19.4711 21.2654 17.4773 22.0863 15.1538C22.2954 14.5619 21.9851 13.9126 21.3933 13.7035C20.8014 13.4944 20.1521 13.8047 19.943 14.3966C19.2863 16.2554 18.0432 17.8504 16.4011 18.9413C14.759 20.0322 12.8068 20.5599 10.8387 20.4447C8.87066 20.3296 6.99332 19.5779 5.48961 18.303C3.9859 17.0281 2.93729 15.299 2.5018 13.3762C2.06631 11.4535 2.26753 9.44129 3.07513 7.64286C3.88274 5.84443 5.25298 4.35721 6.97937 3.40529Z",
-  ],
-  swoop: [
-    "M17.6488 0.406796C17.1064 -0.135599 16.227 -0.135599 15.6846 0.406796C15.1422 0.949191 15.1422 1.82859 15.6846 2.37098L20.258 6.94444H6.94444C5.10266 6.94444 3.33632 7.67609 2.03398 8.97843C0.731644 10.2808 0 12.0471 0 13.8889V23.6111C0 24.3782 0.621827 25 1.38889 25C2.15595 25 2.77778 24.3782 2.77778 23.6111V13.8889C2.77778 12.7838 3.21676 11.724 3.99817 10.9426C4.77957 10.1612 5.83938 9.72222 6.94444 9.72222H20.258L15.6846 14.2957C15.1422 14.8381 15.1422 15.7175 15.6846 16.2599C16.227 16.8023 17.1064 16.8023 17.6488 16.2599L24.5932 9.31543C24.8611 9.04749 24.9967 8.69732 24.9999 8.34616C25 8.34189 25 8.33761 25 8.33333C25 8.32906 25 8.32478 24.9999 8.32051C24.9983 8.13686 24.961 7.96173 24.8946 7.80169C24.8268 7.63788 24.7264 7.4844 24.5932 7.35124L17.6488 0.406796Z",
-  ],
-  twitter: [
-    "M21.351 2.5026C20.4177 1.5026 19.0844 0.835938 17.6177 0.835938C14.8177 0.835938 12.4844 3.16927 12.4844 6.1026C12.4844 6.5026 12.551 6.9026 12.6177 7.3026C8.35104 7.1026 4.61771 4.96927 2.08438 1.83594C1.61771 2.63594 1.41771 3.5026 1.41771 4.5026C1.41771 6.3026 2.35104 7.9026 3.68437 8.9026C2.81771 8.9026 2.08437 8.63594 1.35104 8.23594V8.3026C1.35104 10.8359 3.08438 12.9693 5.48438 13.4359C5.08438 13.5693 4.61771 13.6359 4.15104 13.6359C3.81771 13.6359 3.48438 13.6359 3.21771 13.5693C3.88438 15.6359 5.75104 17.1693 8.01771 17.2359C6.28438 18.6359 4.08438 19.5026 1.68438 19.5026C1.28438 19.5026 0.884375 19.5026 0.484375 19.4359C2.75104 20.9026 5.41771 21.7693 8.35104 21.7693C17.751 21.7693 22.951 13.7693 22.951 6.83594V6.16927C23.951 5.43594 24.8177 4.5026 25.4844 3.43594C24.551 3.83594 23.551 4.16927 22.551 4.23594C23.4177 3.5026 24.2177 2.5026 24.6177 1.23594C23.6177 1.83594 22.551 2.3026 21.351 2.5026Z",
-  ],
-  add: [
-    "M12.5 2.27273C6.85163 2.27273 2.27273 6.85163 2.27273 12.5C2.27273 18.1484 6.85163 22.7273 12.5 22.7273C18.1484 22.7273 22.7273 18.1484 22.7273 12.5C22.7273 6.85163 18.1484 2.27273 12.5 2.27273ZM0 12.5C0 5.59644 5.59644 0 12.5 0C19.4036 0 25 5.59644 25 12.5C25 19.4036 19.4036 25 12.5 25C5.59644 25 0 19.4036 0 12.5Z",
-    "M12.5 7.29167C13.0753 7.29167 13.5417 7.75804 13.5417 8.33333V16.6667C13.5417 17.242 13.0753 17.7083 12.5 17.7083C11.9247 17.7083 11.4583 17.242 11.4583 16.6667V8.33333C11.4583 7.75804 11.9247 7.29167 12.5 7.29167Z",
-    "M7.29167 12.5C7.29167 11.9247 7.75804 11.4583 8.33333 11.4583H16.6667C17.242 11.4583 17.7083 11.9247 17.7083 12.5C17.7083 13.0753 17.242 13.5417 16.6667 13.5417H8.33333C7.75804 13.5417 7.29167 13.0753 7.29167 12.5Z",
-  ],
-  addcolumn: [
-    "M10 3c.552 0 1 .448 1 1v16c0 .552-.448 1-1 1H4c-.552 0-1-.448-1-1V4c0-.552.448-1 1-1h6zM9 5H5v14h4V5zm9 2c2.761 0 5 2.239 5 5s-2.239 5-5 5-5-2.239-5-5 2.239-5 5-5zm1 2h-2v1.999L15 11v2l2-.001V15h2v-2.001L21 13v-2l-2-.001V9z",
-  ],
-  addrow: [
-    "M12 13c2.761 0 5 2.239 5 5s-2.239 5-5 5-5-2.239-5-5 2.239-5 5-5zm1 2h-2v1.999L9 17v2l2-.001V21h2v-2.001L15 19v-2l-2-.001V15zm7-12c.552 0 1 .448 1 1v6c0 .552-.448 1-1 1H4c-.552 0-1-.448-1-1V4c0-.552.448-1 1-1h16zM5 5v4h14V5H5z",
-  ],
-  view: [
-    "M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z",
-  ],
-  table: [
-    "M4 8h16V5H4v3zm10 11v-9h-4v9h4zm2 0h4v-9h-4v9zm-8 0v-9H4v9h4zM3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z",
-  ],
-  edit: [
-    "M15.728 9.686l-1.414-1.414L5 17.586V19h1.414l9.314-9.314zm1.414-1.414l1.414-1.414-1.414-1.414-1.414 1.414 1.414 1.414zM7.242 21H3v-4.243L16.435 3.322a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414L7.243 21z",
-  ],
-  delete: [
-    "M17 6h5v2h-2v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8H2V6h5V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v3zm1 2H6v12h12V8zM9 4v2h6V4H9z",
-  ],
-  close: [
-    "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z",
-  ],
-  arrowup: ["M12 8l6 6H6z"],
-  arrowdown: ["M12 16l-6-6h12z"],
-  arrowleft: ["M8 12l6-6v12z"],
-  arrowright: ["M16 12l-6 6V6z"],
-  search: [
-    "M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z",
-  ],
-  settings: [
-    "M2.132 13.63a9.942 9.942 0 0 1 0-3.26c1.102.026 2.092-.502 2.477-1.431.385-.93.058-2.004-.74-2.763a9.942 9.942 0 0 1 2.306-2.307c.76.798 1.834 1.125 2.764.74.93-.385 1.457-1.376 1.43-2.477a9.942 9.942 0 0 1 3.262 0c-.027 1.102.501 2.092 1.43 2.477.93.385 2.004.058 2.763-.74a9.942 9.942 0 0 1 2.307 2.306c-.798.76-1.125 1.834-.74 2.764.385.93 1.376 1.457 2.477 1.43a9.942 9.942 0 0 1 0 3.262c-1.102-.027-2.092.501-2.477 1.43-.385.93-.058 2.004.74 2.763a9.942 9.942 0 0 1-2.306 2.307c-.76-.798-1.834-1.125-2.764-.74-.93.385-1.457 1.376-1.43 2.477a9.942 9.942 0 0 1-3.262 0c.027-1.102-.501-2.092-1.43-2.477-.93-.385-2.004-.058-2.763.74a9.942 9.942 0 0 1-2.307-2.306c.798-.76 1.125-1.834.74-2.764-.385-.93-1.376-1.457-2.477-1.43zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
-  ],
-  preview: [
-    "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM10.622 8.415a.4.4 0 0 0-.622.332v6.506a.4.4 0 0 0 .622.332l4.879-3.252a.4.4 0 0 0 0-.666l-4.88-3.252z",
-  ],
-  adduser: [
-    "M14 14.252V22H4a8 8 0 0 1 10-7.748zM12 13c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm6 4v-3h2v3h3v2h-3v3h-2v-3h-3v-2h3z",
-  ],
-  plugin: [
-    "M13 18v2h6v2h-6a2 2 0 0 1-2-2v-2H8a4 4 0 0 1-4-4v-4h16v4a4 4 0 0 1-4 4h-3zm3-12h3a1 1 0 0 1 1 1v2H4V7a1 1 0 0 1 1-1h3V2h2v4h4V2h2v4zm-4 8.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z",
-  ],
-  help: [
-    "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm2-1.645A3.502 3.502 0 0 0 12 6.5a3.501 3.501 0 0 0-3.433 2.813l1.962.393A1.5 1.5 0 1 1 12 11.5a1 1 0 0 0-1 1V14h2v-.645z",
-  ],
-  sortdescending: [
-    "M19 3l4 5h-3v12h-2V8h-3l4-5zm-5 15v2H3v-2h11zm0-7v2H3v-2h11zm-2-7v2H3V4h9z",
-  ],
-  sortascending: [
-    "M20 4v12h3l-4 5-4-5h3V4h2zm-8 14v2H3v-2h9zm2-7v2H3v-2h11zm0-7v2H3V4h11z",
-  ],
-  calculate: [
-    "M4 2h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm1 2v16h14V4H5zm2 2h10v4H7V6zm0 6h2v2H7v-2zm0 4h2v2H7v-2zm4-4h2v2h-2v-2zm0 4h2v2h-2v-2zm4-4h2v6h-2v-6z",
-  ],
-  filter: [
-    "M21 4v2h-1l-5 7.5V22H9v-8.5L4 6H3V4h18zM6.404 6L11 12.894V20h2v-7.106L17.596 6H6.404z",
-  ],
-  addfill: [
-    "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11H7v2h4v4h2v-4h4v-2h-4V7h-2v4z",
-  ],
-  group: [
-    "M11 4h10v2H11V4zm0 4h6v2h-6V8zm0 6h10v2H11v-2zm0 4h6v2h-6v-2zM3 4h6v6H3V4zm2 2v2h2V6H5zm-2 8h6v6H3v-6zm2 2v2h2v-2H5z",
-  ],
-  download: [
-    "M13 10h5l-6 6-6-6h5V3h2v7zm-9 9h16v-7h2v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8h2v7z",
-  ],
-  lightning: [
-    "M13 9h8L11 24v-9H4l9-15v9zm-2 2V7.22L7.532 13H13v4.394L17.263 11H11z",
-  ],
-  closeline: [
-    "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z",
-  ],
-}
diff --git a/packages/bbui/src/Styleguide/Label.svelte b/packages/bbui/src/Label/Label.svelte
similarity index 97%
rename from packages/bbui/src/Styleguide/Label.svelte
rename to packages/bbui/src/Label/Label.svelte
index 7be6a383c8..23494a8455 100644
--- a/packages/bbui/src/Styleguide/Label.svelte
+++ b/packages/bbui/src/Label/Label.svelte
@@ -20,7 +20,8 @@
   class:white
   class:grey
   class:black
-  for={forAttr}>
+  for={forAttr}
+>
   <slot />
 </label>
 
@@ -34,35 +35,27 @@
     margin-bottom: var(--spacing-s);
     display: block;
   }
-
   .extraSmall {
     font-size: var(--font-size-xs);
   }
-
   .small {
     font-size: var(--font-size-s);
   }
-
   .medium {
     font-size: var(--font-size-m);
   }
-
   .large {
     font-size: var(--font-size-l);
   }
-
   .extraLarge {
     font-size: var(--font-size-xl);
   }
-
   .white {
     color: white;
   }
-
   .grey {
     color: var(--grey-6);
   }
-
   .black {
     color: var(--ink);
   }
diff --git a/packages/bbui/src/Layout/Layout.svelte b/packages/bbui/src/Layout/Layout.svelte
new file mode 100644
index 0000000000..ca18f3e3f6
--- /dev/null
+++ b/packages/bbui/src/Layout/Layout.svelte
@@ -0,0 +1,65 @@
+<script>
+  export let horizontal = false
+  export let paddingX = "M"
+  export let paddingY = "M"
+  export let noPadding = false
+  export let gap = "M"
+  export let noGap = false
+</script>
+
+<div
+  class:horizontal
+  class="container paddingX-{!noPadding && paddingX} paddingY-{!noPadding &&
+    paddingY} gap-{!noGap && gap}"
+>
+  <slot />
+</div>
+
+<style>
+  .container {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+  .paddingX-S {
+    padding-left: var(--spacing-s);
+    padding-right: var(--spacing-s);
+  }
+  .paddingX-M {
+    padding-left: var(--spacing-m);
+    padding-right: var(--spacing-m);
+  }
+  .paddingX-L {
+    padding-left: var(--spacing-l);
+    padding-right: var(--spacing-l);
+  }
+  .paddingY-S {
+    padding-top: var(--spacing-s);
+    padding-bottom: var(--spacing-s);
+  }
+  .paddingY-M {
+    padding-top: var(--spacing-m);
+    padding-bottom: var(--spacing-m);
+  }
+  .paddingY-L {
+    padding-top: var(--spacing-l);
+    padding-bottom: var(--spacing-l);
+  }
+  .gap-S {
+    grid-gap: var(--spectrum-alias-grid-gutter-xsmall);
+  }
+  .gap-M {
+    grid-gap: var(--spectrum-alias-grid-gutter-small);
+  }
+  .gap-L {
+    grid-gap: var(--spectrum-alias-grid-gutter-medium);
+  }
+  .horizontal.gap-S :global(*) + :global(*) {
+    margin-left: var(--spectrum-alias-grid-gutter-xsmall);
+  }
+  .horizontal.gap-M :global(*) + :global(*) {
+    margin-left: var(--spectrum-alias-grid-gutter-small);
+  }
+  .horizontal.gap-L :global(*) + :global(*) {
+    margin-left: var(--spectrum-alias-grid-gutter-medium);
+  }
+</style>
diff --git a/packages/bbui/src/Link/Link.svelte b/packages/bbui/src/Link/Link.svelte
new file mode 100644
index 0000000000..6447993430
--- /dev/null
+++ b/packages/bbui/src/Link/Link.svelte
@@ -0,0 +1,21 @@
+<script>
+  import "@spectrum-css/link/dist/index-vars.css"
+
+  export let href = "#"
+  export let size = "M"
+  export let quiet = false
+  export let primary = false
+  export let secondary = false
+  export let overBackground = false
+  export let target
+</script>
+
+<a
+  {href}
+  {target}
+  class:spectrum-Link--primary={primary}
+  class:spectrum-Link--secondary={secondary}
+  class:spectrum-Link--overBackground={overBackground}
+  class:spectrum-Link--quiet={quiet}
+  class="spectrum-Link spectrum-Link--size{size}"><slot /></a
+>
diff --git a/packages/bbui/src/Links/Home.svelte b/packages/bbui/src/Links/Home.svelte
deleted file mode 100644
index 29a00dcbd5..0000000000
--- a/packages/bbui/src/Links/Home.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script>
-  export let href,
-    icon,
-    title,
-    active = false
-</script>
-
-<a {href} target="_blank" class="nav-item" class:active>
-  {#if icon}
-    <span class="nav-item-icon">
-      <svelte:component this={icon} />
-    </span>
-  {/if}
-  {#if title}
-    <div class="nav-item-title">{title}</div>
-  {/if}
-</a>
-
-<style>
-  .nav-item {
-    cursor: pointer;
-    padding: 12px;
-    height: 2rem;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    box-sizing: border-box;
-    border-radius: var(--border-radius-s);
-  }
-
-  .nav-item:hover {
-    background-color: var(--grey-1);
-  }
-
-  .nav-item-title {
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-    font-weight: 400;
-    margin-left: 12px;
-  }
-
-  .nav-item-icon {
-    color: var(--grey-7);
-  }
-
-  .active {
-    background-color: var(--grey-2);
-  }
-</style>
diff --git a/packages/bbui/src/Links/Home.svench b/packages/bbui/src/Links/Home.svench
deleted file mode 100644
index 973d7977d0..0000000000
--- a/packages/bbui/src/Links/Home.svench
+++ /dev/null
@@ -1,19 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Home from "./Home.svelte";
-  import Contribution from "../Icons/Contribution.svelte";
-</script>
-
-<View name="default">
-  <Home
-    href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
-    title="Contribute"
-    icon={Contribution} />
-</View>
-<View name="active">
-  <Home
-    active
-    href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
-    title="Contribute"
-    icon={Contribution} />
-</View>
diff --git a/packages/bbui/src/List/Search.svelte b/packages/bbui/src/List/Search.svelte
deleted file mode 100644
index 6d8552702d..0000000000
--- a/packages/bbui/src/List/Search.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script>
-  import Input from "../Form/Input.svelte"
-
-  export let categories = [
-    {
-      name: "Customers List - Data Row",
-      items: [
-        { name: "Name", id: "chjaHICHc82h2" },
-        { name: "Created", id: "chjaHICgr56Hc82h2" },
-        { name: "Status", id: "chjaHICHc8646462h2" },
-      ],
-    },
-    {
-      name: "Home Screen Components",
-      items: [{ name: "Title", id: "chjaHICHc82h2" }],
-    },
-  ]
-</script>
-
-<div class="container">
-  <Input thin placeholder="Search" />
-  {#each categories as { name, items }}
-    <div class="title">{name}</div>
-    <ul>
-      {#each items as { name, id }}
-        <li>{name}</li>
-      {/each}
-    </ul>
-  {/each}
-</div>
-
-<style>
-</style>
diff --git a/packages/bbui/src/List/Search.svench b/packages/bbui/src/List/Search.svench
deleted file mode 100644
index 696458de5e..0000000000
--- a/packages/bbui/src/List/Search.svench
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-  import Search from "./Search.svelte";
-  import { View } from "svench";
-</script>
-
-<View name="Name">
-  <Search />
-</View>
diff --git a/packages/bbui/src/Menu/Item.svelte b/packages/bbui/src/Menu/Item.svelte
new file mode 100644
index 0000000000..8aed496531
--- /dev/null
+++ b/packages/bbui/src/Menu/Item.svelte
@@ -0,0 +1,39 @@
+<script>
+  import { createEventDispatcher, getContext } from "svelte"
+
+  const dispatch = createEventDispatcher()
+  const actionMenu = getContext("actionMenu")
+
+  export let dataCy
+  export let icon = undefined
+  export let disabled = undefined
+  export let noClose = false
+
+  const onClick = () => {
+    if (actionMenu && !noClose) {
+      actionMenu.hide()
+    }
+    dispatch("click")
+  }
+</script>
+
+<li
+  data-cy={dataCy}
+  on:click|preventDefault={onClick}
+  class="spectrum-Menu-item"
+  class:is-disabled={disabled}
+  role="menuitem"
+  tabindex="0"
+>
+  {#if icon}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon"
+      focusable="false"
+      aria-hidden="true"
+      aria-label={icon}
+    >
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
+  <span class="spectrum-Menu-itemLabel"><slot /></span>
+</li>
diff --git a/packages/bbui/src/Menu/Menu.svelte b/packages/bbui/src/Menu/Menu.svelte
new file mode 100644
index 0000000000..6c31b603a3
--- /dev/null
+++ b/packages/bbui/src/Menu/Menu.svelte
@@ -0,0 +1,7 @@
+<script>
+  import "@spectrum-css/menu/dist/index-vars.css"
+</script>
+
+<ul class="spectrum-Menu" role="menu">
+  <slot />
+</ul>
diff --git a/packages/bbui/src/Menu/Menu.svench b/packages/bbui/src/Menu/Menu.svench
new file mode 100644
index 0000000000..1da76869ba
--- /dev/null
+++ b/packages/bbui/src/Menu/Menu.svench
@@ -0,0 +1,19 @@
+<script>
+    import Menu from './Menu.svelte'
+    import Separator from './Separator.svelte'
+    import Section from './Section.svelte'
+    import Item from './Item.svelte'
+</script>
+
+<Menu>
+    <Section heading="Section heading">
+        <Item>Some Item 1</Item>
+        <Item>Some Item 2</Item>
+        <Item>Some Item 3</Item>
+    </Section>
+    <Separator />
+    <Section heading="Section heading">
+        <Item icon="SaveFloppy">Save</Item>
+        <Item disabled icon="DataDownload">Download</Item>
+    </Section>
+</Menu>
\ No newline at end of file
diff --git a/packages/bbui/src/Menu/Section.svelte b/packages/bbui/src/Menu/Section.svelte
new file mode 100644
index 0000000000..5aea52b029
--- /dev/null
+++ b/packages/bbui/src/Menu/Section.svelte
@@ -0,0 +1,10 @@
+<script>
+  export let heading
+</script>
+
+<li role="presentation">
+  <span class="spectrum-Menu-sectionHeading">{heading}</span>
+  <ul class="spectrum-Menu" role="group">
+    <slot />
+  </ul>
+</li>
diff --git a/packages/bbui/src/Menu/Separator.svelte b/packages/bbui/src/Menu/Separator.svelte
new file mode 100644
index 0000000000..3118c7262f
--- /dev/null
+++ b/packages/bbui/src/Menu/Separator.svelte
@@ -0,0 +1 @@
+<li class="spectrum-Menu-divider" role="separator" />
diff --git a/packages/bbui/src/Modal/CustomContent.svelte b/packages/bbui/src/Modal/CustomContent.svelte
index b15b61ca05..6eca00cc5c 100644
--- a/packages/bbui/src/Modal/CustomContent.svelte
+++ b/packages/bbui/src/Modal/CustomContent.svelte
@@ -17,7 +17,7 @@
 <div on:click={increment}>
   Click me
   {remaining}
-  more time{remaining === 1 ? '' : 's'}
+  more time{remaining === 1 ? "" : "s"}
   to close this modal!
 </div>
 
diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index 3aaf6cd586..adc726a7ab 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -1,15 +1,15 @@
 <script>
-  import { createEventDispatcher, setContext } from "svelte"
+  import "@spectrum-css/modal/dist/index-vars.css"
+  import "@spectrum-css/underlay/dist/index-vars.css"
+  import { createEventDispatcher, setContext, tick } from "svelte"
   import { fade, fly } from "svelte/transition"
   import Portal from "svelte-portal"
   import Context from "../context"
+
+  export let fixed = false
+
   const dispatch = createEventDispatcher()
-
-  export let padding = true
-  export let width = undefined
-  export let border = true
-
-  let visible = false
+  let visible = !!fixed
   $: dispatch(visible ? "show" : "hide")
 
   export function show() {
@@ -20,7 +20,7 @@
   }
 
   export function hide() {
-    if (!visible) {
+    if (!visible || fixed) {
       return
     }
     visible = false
@@ -32,27 +32,33 @@
     }
   }
 
+  async function focusFirstInput(node) {
+    const inputs = node.querySelectorAll("input")
+    if (inputs?.length) {
+      await tick()
+      inputs[0].focus()
+    }
+  }
+
   setContext(Context.Modal, { show, hide })
 </script>
 
 <svelte:window on:keydown={handleKey} />
 
 {#if visible}
-  <Portal target="body">
+  <Portal target=".modal-container">
     <div
-      class="overlay"
-      on:click|self={hide}
-      transition:fade={{ duration: 200 }}>
-      <div
-        class="scroll-wrapper"
-        on:click|self={hide}
-        transition:fly={{ y: 30, duration: 200 }}>
-        <div class="content-wrapper" on:click|self={hide}>
+      class="spectrum-Underlay is-open"
+      transition:fade={{ duration: 200 }}
+      on:mousedown|self={hide}
+    >
+      <div class="modal-wrapper" on:mousedown|self={hide}>
+        <div class="modal-inner-wrapper" on:mousedown|self={hide}>
           <div
-            class="modal"
-            class:padding
-            class:border
-            style={width ? `flex: 0 0 ${width}` : ''}>
+            use:focusFirstInput
+            class="spectrum-Modal is-open"
+            transition:fly={{ y: 30, duration: 200 }}
+          >
             <slot />
           </div>
         </div>
@@ -62,55 +68,42 @@
 {/if}
 
 <style>
-  .overlay {
-    position: fixed;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
+  .spectrum-Underlay {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    background-color: rgba(0, 0, 0, 0.25);
     z-index: 999;
+    overflow: auto;
+    overflow-x: hidden;
   }
 
-  .scroll-wrapper {
+  .modal-wrapper {
     flex: 1 1 auto;
     display: flex;
     flex-direction: row;
+    -moz-box-pack: center;
     justify-content: center;
     align-items: flex-start;
     max-height: 100%;
   }
-
-  .content-wrapper {
+  .modal-inner-wrapper {
     flex: 1 1 auto;
     display: flex;
     flex-direction: row;
+    -moz-box-pack: center;
     justify-content: center;
     align-items: flex-start;
     width: 0;
   }
 
-  .modal {
-    background-color: var(--background);
-    display: grid;
-    align-items: stretch;
-    box-shadow: 0 0 4rem 1.5rem rgba(0, 0, 0, 0.15);
-    position: relative;
-    flex: 0 0 400px;
-    margin: 2rem 0;
-    border-radius: var(--border-radius-m);
-    gap: var(--spacing-xl);
-  }
-  .modal.padding {
-    padding: var(--spacing-xl);
-  }
-  .modal.border {
-    border: var(--border-dark);
+  .spectrum-Modal {
+    overflow: visible;
+    max-height: none;
+    margin: 40px 0;
+    transform: none;
+    --spectrum-dialog-confirm-border-radius: var(
+      --spectrum-global-dimension-size-100
+    );
   }
 </style>
diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index 33009363e5..b5ed51e943 100644
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@@ -1,11 +1,13 @@
 <script>
-  import { createEventDispatcher, getContext } from "svelte"
+  import "@spectrum-css/dialog/dist/index-vars.css"
+  import { getContext } from "svelte"
   import Button from "../Button/Button.svelte"
-  import Icon from "../Icons/Icon.svelte"
+  import Divider from "../Divider/Divider.svelte"
+  import Icon from "../Icon/Icon.svelte"
   import Context from "../context"
-  const dispatch = createEventDispatcher()
 
   export let title = undefined
+  export let size = "S"
   export let cancelText = "Cancel"
   export let confirmText = "Confirm"
   export let showCancelButton = true
@@ -27,75 +29,83 @@
   }
 </script>
 
-<div class="modal-content">
-  {#if title}
-    <header>
-      <h5>{title}</h5>
-      <div class="header-content">
-        <slot name="header" />
-      </div>
-    </header>
-  {/if}
-  <slot />
-  {#if showCancelButton || showConfirmButton}
-    <footer>
-      <div class="footer-content">
+<div
+  class="spectrum-Dialog"
+  class:spectrum-Dialog--small={size === "S"}
+  class:spectrum-Dialog--medium={size === "M"}
+  class:spectrum-Dialog--large={size === "L"}
+  class:spectrum-Dialog--extraLarge={size === "XL"}
+  style="position: relative;"
+  role="dialog"
+  tabindex="-1"
+  aria-modal="true"
+>
+  <div class="spectrum-Dialog-grid">
+    <h1 class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader">
+      {title}
+    </h1>
+
+    <Divider size="M" />
+    <!-- TODO: Remove content-grid class once Layout components are in bbui -->
+    <section class="spectrum-Dialog-content content-grid">
+      <slot />
+    </section>
+    {#if showCancelButton || showConfirmButton}
+      <div
+        class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter"
+      >
         <slot name="footer" />
-      </div>
-      <div class="buttons">
         {#if showCancelButton}
-          <Button secondary on:click={hide}>{cancelText}</Button>
+          <Button group secondary on:click={hide}>{cancelText}</Button>
         {/if}
         {#if showConfirmButton}
           <Button
-            primary
+            group
+            cta
             {...$$restProps}
             disabled={confirmDisabled}
-            on:click={confirm}>
+            on:click={confirm}
+          >
             {confirmText}
           </Button>
         {/if}
       </div>
-    </footer>
-  {/if}
-  {#if showCloseIcon}
-    <div class="close-icon" on:click={hide}>
-      <Icon name="closeline" />
-    </div>
-  {/if}
+    {/if}
+    {#if showCloseIcon}
+      <div class="close-icon" on:click={hide}>
+        <Icon hoverable name="Close" />
+      </div>
+    {/if}
+  </div>
 </div>
 
 <style>
-  .modal-content {
+  .spectrum-Dialog--extraLarge {
+    width: 1000px;
+  }
+
+  .content-grid {
     display: grid;
     position: relative;
     gap: var(--spacing-xl);
     color: var(--ink);
   }
 
-  header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    margin-right: 40px;
+  .spectrum-Dialog-content {
+    overflow: visible;
   }
-  header h5 {
-    margin: 0;
-    font-weight: 500;
+  .spectrum-Dialog-heading {
+    font-family: var(--spectrum-alias-body-text-font-family);
   }
 
-  .header-content {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
+  .spectrum-Dialog-buttonGroup {
+    gap: var(--spectrum-global-dimension-static-size-200);
   }
 
   .close-icon {
     position: absolute;
-    top: 0;
-    right: 0;
+    top: 15px;
+    right: 15px;
     color: var(--ink);
     font-size: var(--font-size-m);
   }
@@ -106,27 +116,4 @@
   .close-icon :global(svg) {
     margin-right: 0;
   }
-
-  footer {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    gap: var(--spacing-m);
-  }
-
-  .footer-content {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-  }
-
-  .buttons {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    gap: var(--spacing-m);
-  }
 </style>
diff --git a/packages/bbui/src/Modal/QuizModal.svelte b/packages/bbui/src/Modal/QuizModal.svelte
index 6b5d4c94d2..285c04ebc5 100644
--- a/packages/bbui/src/Modal/QuizModal.svelte
+++ b/packages/bbui/src/Modal/QuizModal.svelte
@@ -31,7 +31,8 @@
   bind:this={modal}
   confirmText="Submit"
   onConfirm={answerQuiz}
-  on:show={resetState}>
+  on:show={resetState}
+>
   {#if error}
     <p class="error">Wrong answer! Try again.</p>
   {/if}
diff --git a/packages/bbui/src/Notification/NotificationDisplay.svelte b/packages/bbui/src/Notification/NotificationDisplay.svelte
new file mode 100644
index 0000000000..89e7666cc7
--- /dev/null
+++ b/packages/bbui/src/Notification/NotificationDisplay.svelte
@@ -0,0 +1,52 @@
+<script>
+  import "@spectrum-css/toast/dist/index-vars.css"
+  import Portal from "svelte-portal"
+  import { flip } from "svelte/animate"
+  import { fly } from "svelte/transition"
+  import { notifications } from "../Stores/notifications"
+</script>
+
+<Portal target=".modal-container">
+  <div class="notifications">
+    {#each $notifications as { type, icon, message, id } (id)}
+      <div
+        animate:flip
+        transition:fly={{ y: -30 }}
+        class="spectrum-Toast spectrum-Toast--{type} notification-offset"
+      >
+        {#if icon}
+          <svg
+            class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <use xlink:href="#spectrum-icon-18-{icon}" />
+          </svg>
+        {/if}
+        <div class="spectrum-Toast-body">
+          <div class="spectrum-Toast-content">{message}</div>
+        </div>
+      </div>
+    {/each}
+  </div>
+</Portal>
+
+<style>
+  .notifications {
+    position: fixed;
+    top: 10px;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    padding: 0;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    pointer-events: none;
+  }
+  .notification-offset {
+    margin-bottom: 10px;
+  }
+</style>
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 8a075242cd..e07dc28ccf 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -1,24 +1,27 @@
 <script>
+  import "@spectrum-css/popover/dist/index-vars.css"
   import Portal from "svelte-portal"
   import { createEventDispatcher } from "svelte"
   import positionDropdown from "../Actions/position_dropdown"
   import clickOutside from "../Actions/click_outside"
+
   const dispatch = createEventDispatcher()
 
   export let anchor
   export let align = "right"
-  let open = null
 
   export const show = () => {
+    dispatch("open")
     open = true
-    dispatch("show")
   }
 
   export const hide = () => {
+    dispatch("close")
     open = false
-    dispatch("hide")
   }
 
+  let open = null
+
   function handleEscape(e) {
     if (open && e.key === "Escape") {
       hide()
@@ -30,39 +33,19 @@
   <Portal>
     <div
       tabindex="0"
-      class:open
       use:positionDropdown={{ anchor, align }}
       use:clickOutside={hide}
       on:keydown={handleEscape}
-      class="menu-container">
+      class="spectrum-Popover is-open"
+      role="presentation"
+    >
       <slot />
     </div>
   </Portal>
 {/if}
 
 <style>
-  .menu-container {
-    position: fixed;
-    margin-top: var(--spacing-xs);
-    padding: var(--spacing-xl);
-    outline: none;
-    box-sizing: border-box;
-    opacity: 0;
-    min-width: 400px;
-    z-index: 2;
-    color: var(--ink);
-    height: fit-content !important;
-    border: var(--border-dark);
-    border-radius: var(--border-radius-m);
-    transform: scale(0);
-    transition: opacity 0.13s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1);
-    overflow-y: auto;
-    background-color: var(--background);
-    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
-  }
-
-  .open {
-    transform: scale(1);
-    opacity: 1;
+  .spectrum-Popover {
+    min-width: var(--spectrum-global-dimension-size-2000) !important;
   }
 </style>
diff --git a/packages/bbui/src/ProgressBar/ProgressBar.svelte b/packages/bbui/src/ProgressBar/ProgressBar.svelte
new file mode 100644
index 0000000000..c24d69e67c
--- /dev/null
+++ b/packages/bbui/src/ProgressBar/ProgressBar.svelte
@@ -0,0 +1,55 @@
+<script>
+  import "@spectrum-css/progressbar/dist/index-vars.css"
+  import { tweened } from "svelte/motion"
+  import { cubicOut } from "svelte/easing"
+
+  export let value = false
+  export let easing = cubicOut
+  export let duration = 1000
+  export let width = false
+  export let sideLabel = false
+  export let overBackground = false
+
+  export let size = "M"
+
+  const progress = tweened(0, {
+    duration: duration,
+    easing: easing,
+  })
+
+  $: if (value) $progress = value
+</script>
+
+<div
+  class:spectrum-ProgressBar--indeterminate={!value}
+  class:spectrum-ProgressBar--sideLabel={sideLabel}
+  class="spectrum-ProgressBar spectrum-ProgressBar--size{size}"
+  value={$progress}
+  role="progressbar"
+  aria-valuenow={$progress}
+  aria-valuemin="0"
+  aria-valuemax="100"
+  style={width ? `width: ${width}px;` : ""}
+>
+  {#if $$slots}
+    <div
+      class="spectrum-FieldLabel spectrum-ProgressBar-label spectrum-FieldLabel--size{size}"
+    >
+      <slot />
+    </div>
+  {/if}
+  {#if value}
+    <div
+      class="spectrum-FieldLabel spectrum-ProgressBar-percentage spectrum-FieldLabel--size{size}"
+    >
+      {Math.round($progress)}%
+    </div>
+  {/if}
+  <div class="spectrum-ProgressBar-track">
+    <div
+      class="spectrum-ProgressBar-fill"
+      style={value ? `width: ${$progress}%` : ""}
+    />
+  </div>
+  <div class="spectrum-ProgressBar-label" hidden="" />
+</div>
diff --git a/packages/bbui/src/ProgressCircle/ProgressCircle.svelte b/packages/bbui/src/ProgressCircle/ProgressCircle.svelte
new file mode 100644
index 0000000000..c3c0fb39d6
--- /dev/null
+++ b/packages/bbui/src/ProgressCircle/ProgressCircle.svelte
@@ -0,0 +1,33 @@
+<script>
+  // WIP! Does not yet work.
+  import "@spectrum-css/progresscircle/dist/index-vars.css"
+  import { tweened } from "svelte/motion"
+  import { cubicOut } from "svelte/easing"
+
+  export let value = false
+  export let small
+  export let large
+
+  export let overBackground
+</script>
+
+<div
+  class:spectrum-ProgressBar--indeterminate={!value}
+  class:spectrum-ProgressCircle--small={small}
+  class:spectrum-ProgressCircle--large={large}
+  class="spectrum-ProgressCircle"
+>
+  <div class="spectrum-ProgressCircle-track" />
+  <div class="spectrum-ProgressCircle-fills">
+    <div class="spectrum-ProgressCircle-fillMask1">
+      <div class="spectrum-ProgressCircle-fillSubMask1">
+        <div class="spectrum-ProgressCircle-fill" />
+      </div>
+    </div>
+    <div class="spectrum-ProgressCircle-fillMask2">
+      <div class="spectrum-ProgressCircle-fillSubMask2">
+        <div class="spectrum-ProgressCircle-fill" />
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/packages/bbui/src/SideNavigation/Item.svelte b/packages/bbui/src/SideNavigation/Item.svelte
new file mode 100644
index 0000000000..75440796b5
--- /dev/null
+++ b/packages/bbui/src/SideNavigation/Item.svelte
@@ -0,0 +1,44 @@
+<script>
+  import { getContext } from "svelte"
+  const multilevel = getContext("sidenav-type")
+  export let href = ""
+  export let external = false
+  export let heading = ""
+  export let icon = ""
+  export let selected = false
+  export let disabled = false
+</script>
+
+<li
+  class="spectrum-SideNav-item"
+  class:is-selected={selected}
+  class:is-disabled={disabled}
+>
+  {#if heading}
+    <h2 class="spectrum-SideNav-heading" id="nav-heading-{heading}">
+      {heading}
+    </h2>
+  {/if}
+  <a
+    target={external ? "_blank" : "_self"}
+    {href}
+    class="spectrum-SideNav-itemLink"
+    aria-current="page"
+  >
+    {#if icon}
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM spectrum-SideNav-itemIcon"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-icon-18-{icon}" />
+      </svg>
+    {/if}
+    <slot />
+  </a>
+  {#if multilevel && $$slots.subnav}
+    <ul class="spectrum-SideNav">
+      <slot name="subnav" />
+    </ul>
+  {/if}
+</li>
diff --git a/packages/bbui/src/SideNavigation/Navigation.svelte b/packages/bbui/src/SideNavigation/Navigation.svelte
new file mode 100644
index 0000000000..d4d090ec1f
--- /dev/null
+++ b/packages/bbui/src/SideNavigation/Navigation.svelte
@@ -0,0 +1,12 @@
+<script>
+  import { setContext } from "svelte"
+  import "@spectrum-css/sidenav/dist/index-vars.css"
+  export let multilevel = false
+  setContext("sidenav-type", multilevel)
+</script>
+
+<nav>
+  <ul class="spectrum-SideNav" class:spectrum-SideNav--multiLevel={multilevel}>
+    <slot />
+  </ul>
+</nav>
diff --git a/packages/bbui/src/Spacer/Spacer.svelte b/packages/bbui/src/Spacer/Spacer.svelte
deleted file mode 100644
index bdc00b7260..0000000000
--- a/packages/bbui/src/Spacer/Spacer.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script>
-  export let extraSmall = false
-  export let small = false
-  export let medium = false
-  export let large = false
-  export let extraLarge = false
-</script>
-
-<spacer
-  class:extraSmall
-  class:small
-  class:medium
-  class:large
-  class:extraLarge />
-
-<style>
-  spacer {
-    display: block;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-
-  .extraSmall {
-    height: var(--spacing-xs);
-    width: var(--spacing-xs);
-  }
-
-  .small {
-    height: var(--spacing-s);
-    width: var(--spacing-s);
-  }
-
-  .medium {
-    height: var(--spacing-m);
-    width: var(--spacing-m);
-  }
-
-  .large {
-    height: var(--spacing-l);
-    width: var(--spacing-l);
-  }
-
-  .extraLarge {
-    height: var(--spacing-xl);
-    width: var(--spacing-xl);
-  }
-</style>
diff --git a/packages/bbui/src/Spacer/Spacer.svench b/packages/bbui/src/Spacer/Spacer.svench
deleted file mode 100644
index 0ad06cf35b..0000000000
--- a/packages/bbui/src/Spacer/Spacer.svench
+++ /dev/null
@@ -1,51 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Spacer from "./Spacer.svelte";
-</script>
-
-<style>
-  .block {
-    background: black;
-    height: 100px;
-    width: 100px;
-    border-radius: var(--border-radius-s);
-  }
-
- .horizontal {
-    display: flex;
-  }
-</style>
-
-<View name="extraSmall">
-        <div class="block"></div>
-    <Spacer extraSmall />
-        <div class="block"></div>
-</View>
-
-<View name="Small">
-        <div class="block"></div>
-    <Spacer small />
-        <div class="block"></div>
-</View>
-
-<View name="Medium">
-        <div class="block"></div>
-    <Spacer medium />
-        <div class="block"></div>
-</View>
-
-<View name="Large">
-    <div class="horizontal">
-        <div class="block"></div>
-            <Spacer large />
-        <div class="block"></div>
-    </div>
-</View>
-
-<View name="extraLarge">
-    <div class="horizontal">
-        <div class="block"></div>
-            <Spacer extraLarge />
-        <div class="block"></div>
-    </div>
-</View>
diff --git a/packages/bbui/src/Stores/Notifications.svench.svx b/packages/bbui/src/Stores/Notifications.svench.svx
index 2c54a91c8c..c776ee2422 100644
--- a/packages/bbui/src/Stores/Notifications.svench.svx
+++ b/packages/bbui/src/Stores/Notifications.svench.svx
@@ -19,7 +19,7 @@ This custom can be used to display toast messages. It has 5 different methods: `
 
 
 <View name="danger">
-  <button on:click={() => notifications.danger('This is a danger!')}>Danger</button>
+  <button on:click={() => notifications.error('This is a danger!')}>Danger</button>
 </View>
 <View name="warning">
   <button on:click={() => notifications.warning('This is a warning!')}>Warning</button>
diff --git a/packages/bbui/src/Stores/notifications.js b/packages/bbui/src/Stores/notifications.js
index 520e5c97b2..ce0c9921f0 100644
--- a/packages/bbui/src/Stores/notifications.js
+++ b/packages/bbui/src/Stores/notifications.js
@@ -1,50 +1,56 @@
-import { writable, derived } from "svelte/store"
+import { writable } from "svelte/store"
 
 const NOTIFICATION_TIMEOUT = 3000
 
-const createNotificationStore = () => {
-  const _notifications = writable([])
-
-  const send = (message, type = "default") => {
-    _notifications.update(state => {
-      return [...state, { id: id(), type, message }]
-    })
-  }
-
-  const notifications = derived(_notifications, ($_notifications, set) => {
-    set($_notifications)
-    if ($_notifications.length > 0) {
-      const timeout = setTimeout(() => {
-        _notifications.update(state => {
-          state.shift()
-          return state
-        })
-        set($_notifications)
-      }, NOTIFICATION_TIMEOUT)
-      return () => {
-        clearTimeout(timeout)
-      }
+export const createNotificationStore = () => {
+  const timeoutIds = new Set()
+  const _notifications = writable([], () => {
+    return () => {
+      // clear all the timers
+      timeoutIds.forEach(timeoutId => {
+        clearTimeout(timeoutId)
+      })
+      _notifications.set([])
     }
   })
-  const { subscribe } = notifications
+  let block = false
+
+  const blockNotifications = (timeout = 1000) => {
+    block = true
+    setTimeout(() => (block = false), timeout)
+  }
+
+  const send = (message, type = "default", icon = "") => {
+    if (block) {
+      return
+    }
+    let _id = id()
+    _notifications.update(state => {
+      return [...state, { id: _id, type, message, icon }]
+    })
+    const timeoutId = setTimeout(() => {
+      _notifications.update(state => {
+        return state.filter(({ id }) => id !== _id)
+      })
+    }, NOTIFICATION_TIMEOUT)
+    timeoutIds.add(timeoutId)
+  }
+
+  const { subscribe } = _notifications
 
   return {
     subscribe,
     send,
-    danger: msg => send(msg, "danger"),
-    warning: msg => send(msg, "warning"),
-    info: msg => send(msg, "info"),
-    success: msg => send(msg, "success"),
+    info: msg => send(msg, "info", "Info"),
+    error: msg => send(msg, "error", "Alert"),
+    warning: msg => send(msg, "warning", "Alert"),
+    success: msg => send(msg, "success", "CheckmarkCircle"),
+    blockNotifications,
   }
 }
 
 function id() {
-  return (
-    "_" +
-    Math.random()
-      .toString(36)
-      .substr(2, 9)
-  )
+  return "_" + Math.random().toString(36).substr(2, 9)
 }
 
 export const notifications = createNotificationStore()
diff --git a/packages/bbui/src/Styleguide/Body.svelte b/packages/bbui/src/Styleguide/Body.svelte
deleted file mode 100644
index 6fc583bc91..0000000000
--- a/packages/bbui/src/Styleguide/Body.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<script>
-  export let extraSmall = false,
-    small = false,
-    medium = false,
-    large = false,
-    extraLarge = false,
-    white = false,
-    grey = false,
-    black = false,
-    lh = false
-</script>
-
-<p
-  class="bb-body"
-  class:extraSmall
-  class:small
-  class:medium
-  class:large
-  class:extraLarge
-  class:white
-  class:grey
-  class:black
-  class:lh>
-  <slot />
-</p>
-
-<style>
-  .bb-body {
-    font-family: var(--font-sans);
-    font-weight: 400;
-    text-rendering: var(--text-render);
-    color: var(--ink);
-    font-size: var(--font-size-m);
-    line-height: 0;
-  }
-
-  .extraSmall {
-    font-size: var(--font-size-xs);
-  }
-
-  .small {
-    font-size: var(--font-size-s);
-  }
-
-  .medium {
-    font-size: var(--font-size-m);
-  }
-
-  .large {
-    font-size: var(--font-size-l);
-  }
-
-  .extraLarge {
-    font-size: var(--font-size-xl);
-  }
-
-  .white {
-    color: white;
-  }
-
-  .grey {
-    color: var(--grey-6);
-  }
-
-  .black {
-    color: var(--ink);
-  }
-
-  .lh {
-    line-height: 1.75;
-  }
-</style>
diff --git a/packages/bbui/src/Styleguide/Borders.svench b/packages/bbui/src/Styleguide/Borders.svench
deleted file mode 100644
index 8e2c1f6dab..0000000000
--- a/packages/bbui/src/Styleguide/Borders.svench
+++ /dev/null
@@ -1,175 +0,0 @@
-<script>
-  import { View } from "svench";
-</script>
-
-<h1>Borders</h1>
-<p>Budibase has 2 border variables, light and dark.</p>
-<p><strong>Light</strong> is for layouts.</p>
-<p><strong>Dark</strong> is for components.</p>
-<code>border: var(--border-light);</code>
-<div class="border-light"></div>
-<code>border: var(--border-dark);</code>
-<div class="border-dark"></div>
-
-<hr>
-
-<h2>Border Radius</h2>
-<p>Budibase has 5 border-radius variables:</p>
-
-<table>
-  <tr>
-    <th>Name</th>
-    <th>Var</th>
-    <th>rem</th>
-    <th>px</th>
-    <th>Visual</th>
-  </tr>
-  <tr>
-    <td>Extra Small</td>
-    <td>var(--border-radius-xs)</td>
-    <td>0.125</td>
-    <td>2</td>
-    <td><div class="border-radius-xs">Extra small</div></td>
-  </tr>
-  <tr>
-    <td>Small</td>
-    <td>var(--border-radius-s)</td>
-    <td>0.35</td>
-    <td>5.6px</td>
-    <td><div class="border-radius-s">Small</div></td>
-  </tr>
-  <tr>
-    <td>Medium</td>
-    <td>var(--border-radius-m)</td>
-    <td>0.5</td>
-    <td>8</td>
-    <td><div class="border-radius-m">Medium</div></td>
-  </tr>
-  <tr>
-    <td>Large</td>
-    <td>var(--border-radius-l)</td>
-    <td>1</td>
-    <td>16</td>
-    <td><div class="border-radius-l">Large</div></td>
-  </tr>
-  <tr>
-    <td>Extra Large</td>
-    <td>var(--border-radius-xl)</td>
-    <td>100</td>
-    <td>1600</td>
-    <td><div class="border-radius-xl">Extra large</div></td>
-  </tr>
-</table>
-
-<style>
-
-table {
-  font-family: var(--font-sans);
-  border-collapse: collapse;
-  width: 100%;
-}
-
-code {
-    display: inline-block;
-    box-sizing: border-box;
-    padding: var(--spacing-s) var(--spacing-l);
-    margin: var(--spacing-xl) 0 var(--spacing-s) 0;
-    background-color: var(--grey-2);
-    color: var(--red-dark);
-    border-radius: var(--spacing-xs);
-}
-
-td, th {
-  border: 1px solid var(--grey-4);
-  text-align: left;
-  padding: var(--spacing-m);
-  width: 20%;
-}
-
-tr:nth-child(even) {
-  background-color: var(--grey-3);
-}
-
-hr {
-    margin: var(--layout-xl) 0px;
-}
-
-.border-light {
-    width: 40rem;
-    height: 10rem;
-    background-color: white;
-    border: var(--border-light);
-}
-
-.border-dark {
-    width: 40rem;
-    height: 10rem;
-    background-color: white;
-    border: var(--border-dark);
-}
-
-.border-radius-xs {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-family: var(--font-sans);
-    width: 8rem;
-    height: 3rem;
-    background-color: black;
-    border-radius: var(--border-radius-xs);
-    margin-right: var(--spacing-l);
-}
-
-.border-radius-s {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-family: var(--font-sans);
-    width: 8rem;
-    height: 3rem;
-    background-color: black;
-    border-radius: var(--border-radius-s);
-    margin-right: var(--spacing-l);
-}
-
-.border-radius-m {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-family: var(--font-sans);
-    width: 8rem;
-    height: 3rem;
-    background-color: black;
-    border-radius: var(--border-radius-m);
-    margin-right: var(--spacing-l);
-}
-
-.border-radius-l {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-family: var(--font-sans);
-    width: 8rem;
-    height: 3rem;
-    background-color: black;
-    border-radius: var(--border-radius-l);
-    margin-right: var(--spacing-l);
-}
-
-.border-radius-xl {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-family: var(--font-sans);
-    width: 8rem;
-    height: 3rem;
-    background-color: black;
-    border-radius: var(--border-radius-xl);
-    margin-right: var(--spacing-l);
-}
-</style>
diff --git a/packages/bbui/src/Styleguide/Budibase-logo.svelte b/packages/bbui/src/Styleguide/Budibase-logo.svelte
deleted file mode 100644
index b8dbde3ac0..0000000000
--- a/packages/bbui/src/Styleguide/Budibase-logo.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<svg
-  version="1.1"
-  id="Layer_1"
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
-  x="0px"
-  y="0px"
-  viewBox="0 0 115 40"
-  style="enable-background:new 0 0 115 40;"
-  xml:space="preserve">
-  <path
-    class="st0"
-    d="M111.16,40H3.91c-2.15,0-3.89-1.74-3.89-3.89V4.04c0-2.15,1.74-3.89,3.89-3.89h107.25
-    c2.15,0,3.89,1.74,3.89,3.89v32.07C115.05,38.26,113.31,40,111.16,40z" />
-  <path
-    class="st1"
-    d="M10.37,10.03v8.57c0.93-1.26,2.33-1.67,3.61-1.67c1.58,0,3.01,0.59,4.02,1.54c1.12,1.05,1.82,2.62,1.82,4.53
-    c0,1.78-0.62,3.42-1.82,4.61c-1.01,1.03-2.26,1.57-3.97,1.57c-2.05,0-3.09-0.95-3.66-1.78v1.39H6.63V10.03H10.37z
-    M10.97,20.98
-    c-0.44,0.46-0.82,1.13-0.82,2.11c0,0.95,0.41,1.64,0.85,2.05c0.59,0.57,1.41,0.85,2.11,0.85c0.64,0,1.36-0.26,1.93-0.8
-    c0.54-0.51,0.9-1.26,0.9-2.11c0-0.92-0.36-1.67-0.9-2.18c-0.59-0.57-1.23-0.77-1.98-0.77C12.26,20.14,11.56,20.37,10.97,20.98z" />
-  <path
-    class="st1"
-    d="M25.08,17.35v6.32c0,0.51,0.05,1.31,0.64,1.85c0.26,0.23,0.72,0.54,1.54,0.54c0.69,0,1.23-0.23,1.56-0.54
-    c0.54-0.51,0.62-1.28,0.62-1.85v-6.32h3.74v6.68c0,1.31-0.13,2.54-1.28,3.67c-1.31,1.28-3.23,1.49-4.59,1.49
-    c-1.41,0-3.31-0.21-4.62-1.49c-1.05-1.03-1.26-2.18-1.26-3.44v-6.91H25.08z" />
-  <path
-    class="st1"
-    d="M47.88,28.79h-3.74V27.4c-0.57,0.82-1.61,1.78-3.66,1.78c-1.71,0-2.96-0.54-3.97-1.57
-    c-1.19-1.18-1.82-2.83-1.82-4.61c0-1.9,0.7-3.47,1.82-4.53c1.01-0.95,2.44-1.54,4.02-1.54c1.27,0,2.67,0.41,3.61,1.67v-8.57h3.74
-    V28.79z
-    M39.53,20.91c-0.54,0.51-0.9,1.26-0.9,2.18c0,0.85,0.36,1.59,0.9,2.11c0.57,0.54,1.28,0.8,1.93,0.8
-    c0.69,0,1.52-0.28,2.11-0.85c0.44-0.41,0.85-1.1,0.85-2.05c0-0.98-0.39-1.64-0.82-2.11c-0.59-0.62-1.28-0.85-2.08-0.85
-    C40.77,20.14,40.12,20.34,39.53,20.91z" />
-  <path
-    class="st1"
-    d="M52.32,10.3c1.21,0,2.16,0.95,2.16,2.16c0,1.21-0.95,2.16-2.16,2.16c-1.21,0-2.16-0.95-2.16-2.16
-    C50.17,11.25,51.12,10.3,52.32,10.3z M54.19,17.35v11.44h-3.74V17.35H54.19z" />
-  <path
-    class="st1"
-    d="M60.49,10.03v8.57c0.93-1.26,2.33-1.67,3.61-1.67c1.58,0,3.01,0.59,4.02,1.54c1.12,1.05,1.82,2.62,1.82,4.53
-    c0,1.78-0.62,3.42-1.82,4.61c-1.01,1.03-2.26,1.57-3.97,1.57c-2.05,0-3.09-0.95-3.66-1.78v1.39h-3.74V10.03H60.49z
-    M61.06,20.98
-    c-0.44,0.46-0.82,1.13-0.82,2.11c0,0.95,0.41,1.64,0.85,2.05c0.59,0.57,1.41,0.85,2.11,0.85c0.64,0,1.36-0.26,1.93-0.8
-    c0.54-0.51,0.9-1.26,0.9-2.11c0-0.92-0.36-1.67-0.9-2.18c-0.59-0.57-1.23-0.77-1.98-0.77C62.34,20.14,61.65,20.37,61.06,20.98z" />
-  <path
-    class="st1"
-    d="M80.26,17.35H84v11.44h-3.74v-1.39c-1.01,1.54-2.46,1.77-3.42,1.77c-1.66,0-3.06-0.41-4.33-1.74
-    c-1.22-1.28-1.69-2.77-1.69-4.28c0-1.92,0.73-3.57,1.79-4.62c1.01-1,2.41-1.56,4.02-1.56c0.99,0,2.57,0.23,3.63,1.67V17.35z
-    M75.57,20.96c-0.39,0.39-0.85,1.05-0.85,2.08c0,1.03,0.44,1.7,0.77,2.05c0.51,0.54,1.31,0.9,2.18,0.9c0.74,0,1.44-0.31,1.93-0.8
-    c0.49-0.46,0.9-1.18,0.9-2.16c0-0.82-0.31-1.59-0.85-2.11c-0.57-0.54-1.39-0.8-2.05-0.8C76.8,20.14,76.06,20.47,75.57,20.96z" />
-  <path
-    class="st1"
-    d="M93.21,20.26c-0.57-0.33-1.31-0.64-2.03-0.64c-0.39,0-0.82,0.1-1.05,0.33c-0.13,0.13-0.23,0.33-0.23,0.51
-    c0,0.26,0.18,0.41,0.36,0.51c0.26,0.15,0.64,0.23,1.1,0.39l0.98,0.31c0.64,0.21,1.31,0.46,1.9,1c0.67,0.62,0.9,1.31,0.9,2.18
-    c0,1.52-0.67,2.49-1.18,3.01c-1.13,1.13-2.52,1.31-3.72,1.31c-1.54,0-3.21-0.33-4.7-1.64l1.57-2.49c0.36,0.31,0.87,0.67,1.26,0.85
-    c0.51,0.26,1.05,0.36,1.54,0.36c0.23,0,0.82,0,1.16-0.26c0.23-0.18,0.39-0.46,0.39-0.74c0-0.21-0.08-0.46-0.41-0.67
-    c-0.26-0.15-0.59-0.26-1.13-0.41l-0.92-0.28c-0.67-0.21-1.36-0.57-1.85-1.05c-0.54-0.57-0.82-1.21-0.82-2.08
-    c0-1.1,0.44-2.03,1.1-2.65c1.03-0.95,2.41-1.16,3.47-1.16c1.7,0,2.88,0.44,3.8,0.98L93.21,20.26z" />
-  <path
-    class="st1"
-    d="M108.43,23.73h-8.55c0,0.62,0.23,1.44,0.69,1.95c0.57,0.62,1.34,0.72,1.9,0.72c0.54,0,1.1-0.1,1.49-0.33
-    c0.05-0.03,0.49-0.31,0.8-0.95l3.49,0.36c-0.51,1.62-1.54,2.47-2.21,2.88c-1.1,0.67-2.34,0.85-3.62,0.85
-    c-1.72,0-3.24-0.31-4.57-1.64c-1-1-1.72-2.52-1.72-4.42c0-1.64,0.59-3.34,1.75-4.52c1.39-1.39,3.11-1.64,4.39-1.64
-    c1.28,0,3.13,0.23,4.55,1.72c1.36,1.44,1.62,3.24,1.62,4.65V23.73z
-    M105.03,21.48c-0.03-0.1-0.21-0.82-0.74-1.34
-    c-0.41-0.39-1-0.64-1.75-0.64c-0.95,0-1.52,0.39-1.87,0.74c-0.28,0.31-0.54,0.72-0.64,1.23H105.03z" />
-</svg>
diff --git a/packages/bbui/src/Styleguide/Color.svench b/packages/bbui/src/Styleguide/Color.svench
deleted file mode 100644
index 0c29669a4c..0000000000
--- a/packages/bbui/src/Styleguide/Color.svench
+++ /dev/null
@@ -1,201 +0,0 @@
-<script>
-  import { View } from "svench";
-</script>
-
-<View name="Base">
-  <div class="white">white</div>
-  <div class="grey1">var(--grey-1)</div>
-  <div class="grey2">var(--grey-2)</div>
-  <div class="grey3">var(--grey-3)</div>
-  <div class="grey4">var(--grey-4)</div>
-  <div class="grey5">var(--grey-5)</div>
-  <div class="grey6">var(--grey-6)</div>
-  <div class="grey7">var(--grey-7)</div>
-  <div class="grey8">var(--grey-8)</div>
-  <div class="grey9">var(--grey-9)</div>
-  <div class="ink">var(--ink)</div>
-</View>
-
-<View name="Blue">
-  <div class="blue-light">var(--blue-light)</div>
-  <div class="blue">var(--blue)</div>
-  <div class="blue-dark">var(--blue-dark)</div>
-</View>
-
-<View name="Yellow">
-  <div class="yellow-light">var(--yellow-light)</div>
-  <div class="yellow">var(--yellow)</div>
-  <div class="yellow-dark">var(--yellow-dark)</div>
-</View>
-
-<View name="Red">
-  <div class="red-light">var(--red-light)</div>
-  <div class="red">var(--red)</div>
-  <div class="red-dark">var(--red-dark)</div>
-</View>
-
-<View name="Orange">
-  <div class="orange-light">var(--orange-light)</div>
-  <div class="orange">var(--orange)</div>
-  <div class="orange-dark">var(--orange-dark)</div>
-</View>
-
-<View name="Green">
-  <div class="green-light">var(--green-light)</div>
-  <div class="green">var(--green)</div>
-  <div class="green-dark">var(--green-dark)</div>
-</View>
-
-<View name="Purple">
-  <div class="purple-light">var(--purple-light)</div>
-  <div class="purple">var(--purple)</div>
-  <div class="purple-dark">var(--purple-dark)</div>
-</View>
-
-<style>
-div {
-  height: 100px;
-  width: 800px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--font-sans);
-}
-
-.white {
- background-color: white;
-}
-
-.grey1 {
-  background-color: var(--grey-1);
-}
-
-.grey1 {
-  background-color: var(--grey-1);
-}
-
-.grey2 {
-  background-color: var(--grey-2);
-}
-
-.grey3 {
-  background-color: var(--grey-3);
-}
-
-.grey4 {
-  background-color: var(--grey-4);
-}
-
-.grey5 {
-  background-color: var(--grey-5);
-}
-
-.grey6 {
-  background-color: var(--grey-6);
-}
-
-.grey7 {
-  background-color: var(--grey-7);
-  color: white;
-}
-
-.grey8 {
-  background-color: var(--grey-8);
-  color: white;
-}
-
-.grey9 {
-  background-color: var(--grey-9);
-  color: white;
-}
-
-.ink {
-  background-color: var(--ink);
-  color: white;
-}
-
-.blue {
-  background-color: var(--blue);
-  color: white;
-}
-
-.blue-light {
-  background-color: var(--blue-light);
-}
-
-.blue-dark {
-  background-color: var(--blue-dark);
-  color: white;
-}
-
-.yellow {
-  background-color: var(--yellow);
-  color: white;
-}
-
-.yellow-light {
-  background-color: var(--yellow-light);
-}
-
-.yellow-dark {
-  background-color: var(--yellow-dark);
-  color: white;
-}
-
-.red {
-  background-color: var(--red);
-  color: white;
-}
-
-.red-light {
-  background-color: var(--red-light);
-}
-
-.red-dark {
-  background-color: var(--red-dark);
-  color: white;
-}
-
-.orange {
-  background-color: var(--orange);
-  color: white;
-}
-
-.orange-light {
-  background-color: var(--orange-light);
-}
-
-.orange-dark {
-  background-color: var(--orange-dark);
-  color: white;
-}
-
-.green {
-  background-color: var(--green);
-  color: white;
-}
-
-.green-light {
-  background-color: var(--green-light);
-}
-
-.green-dark {
-  background-color: var(--green-dark);
-  color: white;
-}
-
-.purple {
-  background-color: var(--purple);
-  color: white;
-}
-
-.purple-light {
-  background-color: var(--purple-light);
-}
-
-.purple-dark {
-  background-color: var(--purple-dark);
-  color: white;
-}
-
-</style>
diff --git a/packages/bbui/src/Styleguide/Heading.svelte b/packages/bbui/src/Styleguide/Heading.svelte
deleted file mode 100644
index d08f1389d8..0000000000
--- a/packages/bbui/src/Styleguide/Heading.svelte
+++ /dev/null
@@ -1,74 +0,0 @@
-<script>
-  export let extraSmall = false,
-    small = false,
-    medium = false,
-    large = false,
-    extraLarge = false,
-    white = false,
-    grey = false,
-    black = false,
-    lh = false
-</script>
-
-<h1
-  class="bb-heading"
-  class:extraSmall
-  class:small
-  class:medium
-  class:large
-  class:extraLarge
-  class:white
-  class:grey
-  class:black
-  class:lh>
-  <slot />
-</h1>
-
-<style>
-  .bb-heading {
-    font-family: var(--font-sans);
-    font-weight: 600;
-    text-rendering: var(--text-render);
-    color: var(--ink);
-    font-size: var(--heading-font-size-m);
-    line-height: 0;
-  }
-
-  .extraSmall {
-    font-size: var(--heading-font-size-xs);
-  }
-
-  .small {
-    font-size: var(--heading-font-size-s);
-  }
-
-  .medium {
-    font-size: var(--heading-font-size-m);
-  }
-
-  .large {
-    font-size: var(--heading-font-size-l);
-    font-weight: 700;
-  }
-
-  .extraLarge {
-    font-size: var(--heading-font-size-xl);
-    font-weight: 700;
-  }
-
-  .white {
-    color: white;
-  }
-
-  .grey {
-    color: var(--grey-6);
-  }
-
-  .black {
-    color: var(--ink);
-  }
-
-  .lh {
-    line-height: 1.3;
-  }
-</style>
diff --git a/packages/bbui/src/Styleguide/Logo.svelte b/packages/bbui/src/Styleguide/Logo.svelte
deleted file mode 100644
index 6164fe11eb..0000000000
--- a/packages/bbui/src/Styleguide/Logo.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-  import BudibaseLogo from "./Budibase-logo.svelte"
-</script>
-
-<div class="home-logo">
-  <BudibaseLogo />
-</div>
-
-<style>
-  .home-logo {
-    cursor: pointer;
-    height: 40px;
-    width: 100px;
-    margin-bottom: 20px;
-  }
-</style>
diff --git a/packages/bbui/src/Styleguide/Logo.svench b/packages/bbui/src/Styleguide/Logo.svench
deleted file mode 100644
index f71bf9f262..0000000000
--- a/packages/bbui/src/Styleguide/Logo.svench
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Logo from "./Logo.svelte";
-</script>
-
-<View name="default">
-  <Logo />
-</View>
diff --git a/packages/bbui/src/Styleguide/Spacing.svench b/packages/bbui/src/Styleguide/Spacing.svench
deleted file mode 100644
index ca727da18e..0000000000
--- a/packages/bbui/src/Styleguide/Spacing.svench
+++ /dev/null
@@ -1,191 +0,0 @@
-<script>
-  import { View } from "svench";
-</script>
-
-<h1>2 Scales, 1 Spatial System</h1>
-<p>Budibase has 2 scales, spacing and layout, and follows a 4pt grid system.</p>
-<p><strong>Spacing</strong> is used for smaller, more refined spacing needs, specifically within the context of a component.</p>
-<p><strong>Layout</strong> is used for laying out your page and positing components within that page.</p>
-<p>Spacing and layout will mostly exist alongside margin and padding.</p>
-<p><code>margin: var(--spacing-s);</code></p>
-<code>padding: var(--spacing-s) var(--spacing-l);</code>
-
-<hr>
-
-<h2>Spacing</h2>
-
-<table>
-  <tr>
-    <th>Var</th>
-    <th>rem</th>
-    <th>px</th>
-    <th>Visual</th>
-  </tr>
-  <tr>
-    <td>var(--spacing-xs)</td>
-    <td>0.25</td>
-    <td>4</td>
-    <td><div class="xs"></div></td>
-  </tr>
-  <tr>
-    <td>var(--spacing-s)</td>
-    <td>0.5</td>
-    <td>8</td>
-    <td><div class="s"></div></td>
-  </tr>
-  <tr>
-    <td>var(--spacing-m)</td>
-    <td>.75</td>
-    <td>12</td>
-    <td><div class="m"></div></td>
-  </tr>
-  <tr>
-    <td>var(--spacing-l)</td>
-    <td>1</td>
-    <td>16</td>
-    <td><div class="l"></div></td>
-  </tr>
-  <tr>
-    <td>var(--spacing-xl)</td>
-    <td>1.25</td>
-    <td>20</td>
-    <td><div class="xl"></div></td>
-  </tr>
-</table>
-
-<hr>
-
-<h2>Layout</h2>
-
-<table>
-  <tr>
-    <th>Var</th>
-    <th>rem</th>
-    <th>px</th>
-    <th>Visual</th>
-  </tr>
-  <tr>
-    <td>var(--layout-xs)</td>
-    <td>1.25</td>
-    <td>20</td>
-    <td><div class="layout-xs"></div></td>
-  </tr>
-  <tr>
-    <td>var(--layout-s)</td>
-    <td>1.5</td>
-    <td>24</td>
-    <td><div class="layout-s"></div></td>
-  </tr>
-  <tr>
-    <td>var(--layout-m)</td>
-    <td>2</td>
-    <td>32</td>
-    <td><div class="layout-m"></div></td>
-  </tr>
-  <tr>
-    <td>var(--layout-l)</td>
-    <td>3</td>
-    <td>48</td>
-    <td><div class="layout-l"></div></td>
-  </tr>
-  <tr>
-    <td>var(--layout-xl)</td>
-    <td>4</td>
-    <td>64</td>
-    <td><div class="layout-xl"></div></td>
-  </tr>
-</table>
-
-<style>
-
-table {
-  font-family: var(--font-sans);
-  border-collapse: collapse;
-  width: 100%;
-}
-
-code {
-    display: inline-block;
-    box-sizing: border-box;
-    padding: var(--spacing-s) var(--spacing-l);
-    margin: var(--spacing-s) 0;
-    background-color: var(--grey-2);
-    color: var(--red-dark);
-    border-radius: var(--spacing-xs);
-}
-
-td, th {
-  border: 1px solid var(--grey-4);
-  text-align: left;
-  padding: var(--spacing-m);
-  width: 25%;
-}
-
-tr:nth-child(even) {
-  background-color: var(--grey-3);
-}
-
-hr {
-    margin: var(--layout-xl) 0px;
-}
-
-.xs {
-    height: var(--spacing-xs);
-    width:  var(--spacing-xs);
-    background-color: var(--purple);
-}
-
-.s {
-    height: var(--spacing-s);
-    width:  var(--spacing-s);
-    background-color: var(--purple);
-}
-
-.m {
-    height: var(--spacing-m);
-    width:  var(--spacing-m);
-    background-color: var(--purple);
-}
-
-.l {
-    height: var(--spacing-l);
-    width:  var(--spacing-l);
-    background-color: var(--purple);
-}
-
-.xl {
-    height: var(--spacing-xl);
-    width:  var(--spacing-xl);
-    background-color: var(--purple);
-}
-
-.layout-xs {
-    height: var(--layout-xs);
-    width:  var(--layout-xs);
-    background-color: var(--blue);
-}
-
-.layout-s {
-    height: var(--layout-s);
-    width:  var(--layout-s);
-    background-color: var(--blue);
-}
-
-.layout-m {
-    height: var(--layout-m);
-    width:  var(--layout-m);
-    background-color: var(--blue);
-}
-
-.layout-l {
-    height: var(--layout-l);
-    width:  var(--layout-l);
-    background-color: var(--blue);
-}
-
-.layout-xl {
-    height: var(--layout-xl);
-    width:  var(--layout-xl);
-    background-color: var(--blue);
-}
-</style>
\ No newline at end of file
diff --git a/packages/bbui/src/Styleguide/Typography.svench b/packages/bbui/src/Styleguide/Typography.svench
deleted file mode 100644
index dfab94eb84..0000000000
--- a/packages/bbui/src/Styleguide/Typography.svench
+++ /dev/null
@@ -1,227 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Heading from "./Heading.svelte";
-  import Body from "./Body.svelte";
-  import Label from "./Label.svelte";
-
-  const username = "bbuserexample";
-</script>
-
-<style>
-  .typography-container {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .typography-column {
-    padding: var(--spacing-l);
-  }
-
-  .typography-column--grey {
-    background-color: var(--grey-5);
-  }
-
-  .label-wrapper {
-    padding: var(--spacing-m);
-  }
-</style>
-
-<h1 class="bb-heading bb-heading--large bb-heading--heavy">Typography</h1>
-<p>
-  Budibase uses Inter as its typeface and three types can be used,
-  <strong>heading</strong>
-  ,
-  <strong>body</strong>
-  and
-  <strong>label</strong>
-</p>
-<p>Each type has 5 sizes, xs, s, m l and xl.</p>
-<p>Each type is available in the colors white, grey or black.</p>
-
-<View name="Heading">
-  <div class="typography-container">
-    <div class="typography-column">
-      <Heading extraLarge black>Heading Extra Large Black</Heading>
-
-      <Heading large black>Heading Large Black</Heading>
-
-      <Heading medium black>Heading Medium Black</Heading>
-
-      <Heading small black>Heading Small Black</Heading>
-
-      <Heading extraSmall black>Heading Extra Small Black</Heading>
-    </div>
-
-    <div class="typography-column">
-      <Heading extraLarge grey>Heading Extra Large Grey</Heading>
-
-      <Heading large grey>Heading Large Grey</Heading>
-
-      <Heading medium grey>Heading Medium Grey</Heading>
-
-      <Heading small grey>Heading Small Grey</Heading>
-
-      <Heading extraSmall grey>Heading Extra Small Grey</Heading>
-    </div>
-
-    <div class="typography-column typography-column--grey">
-      <Heading extraLarge white>Heading Extra Large White</Heading>
-
-      <Heading large white>Heading Large White</Heading>
-
-      <Heading medium white>Heading Medium White</Heading>
-
-      <Heading small white>Heading Small White</Heading>
-
-      <Heading extraSmall white>Heading Extra Small White</Heading>
-    </div>
-
-    <div class="typography-column">
-      <Heading extraLarge black lh>Heading Extra Large Black Line Height</Heading>
-
-      <Heading large black lh>Heading Large Black Line Height</Heading>
-
-      <Heading medium black lh>Heading Medium Black Line Height</Heading>
-
-      <Heading small black lh>Heading Small Black Line Height</Heading>
-
-      <Heading extraSmall black lh>Heading Extra Small Black Line Height</Heading>
-    </div>
-  </div>
-</View>
-
-<View name="Body">
-  <div class="typography-container">
-    <div class="typography-column">
-      <Body extraLarge black>Body Extra Large Black</Body>
-
-      <Body large black>Body Large Black</Body>
-
-      <Body medium black>Body Medium Black</Body>
-
-      <Body small black>Body Small Black</Body>
-
-      <Body extraSmall black>Body Extra Small Black</Body>
-    </div>
-
-    <div class="typography-column">
-      <Body extraLarge lh black>Body Extra Large Black Line-height</Body>
-
-      <Body large lh black>Body Large Black Line-height</Body>
-
-      <Body medium lh black>Body Medium Black Line-height</Body>
-
-      <Body small lh black>Body Small Black Line-height</Body>
-
-      <Body extraSmall lh black>Body Extra Small Black Line-height</Body>
-    </div>
-
-    <div class="typography-column">
-      <Body extraLarge grey>Body Extra Large Grey</Body>
-
-      <Body large grey>Body Large Grey</Body>
-
-      <Body medium grey>Body Medium Grey</Body>
-
-      <Body small grey>Body Small Grey</Body>
-
-      <Body extraSmall grey>Body Extra Small Grey</Body>
-    </div>
-
-    <div class="typography-column typography-column--grey">
-      <Body extraLarge white>Body Extra Large White</Body>
-
-      <Body large white>Body Large White</Body>
-
-      <Body medium white>Body Medium White</Body>
-
-      <Body small white>Body Small White</Body>
-
-      <Body extraSmall white>Body Extra Small White</Body>
-    </div>
-  </div>
-</View>
-
-<View name="Label">
-  <div class="typography-container">
-    <div class="label-wrapper">
-      <Label extraLarge black forAttr={username}>Label Extra Large Black</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label large black forAttr={username}>Label Large Black</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label medium black forAttr={username}>Label Medium Black</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label small black forAttr={username}>Label Small Black</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label extraSmall black forAttr={username}>Label Extra Small Black</Label>
-      <input type="text" />
-    </div>
-  </div>
-
-  <div class="typography-container">
-    <div class="label-wrapper">
-      <Label extraLarge grey forAttr={username}>Label Extra Large Grey</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label large grey forAttr={username}>Label Large Grey</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label medium grey forAttr={username}>Label Medium Grey</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label small grey forAttr={username}>Label Small Grey</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label extraSmall grey forAttr={username}>Label Extra Small Grey</Label>
-      <input type="text" />
-    </div>
-  </div>
-
-  <div class="typography-container typography-column--grey">
-    <div class="label-wrapper">
-      <Label extraLarge white forAttr={username}>Label Extra Large White</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label large white forAttr={username}>Label Large White</Label>
-
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label medium white forAttr={username}>Label Medium White</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label small white forAttr={username}>Label Small White</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label extraSmall white forAttr={username}>Label Extra Small White</Label>
-      <input type="text" />
-    </div>
-  </div>
-</View>
diff --git a/packages/bbui/src/Switcher/Switcher.svelte b/packages/bbui/src/Switcher/Switcher.svelte
deleted file mode 100644
index 49569da02c..0000000000
--- a/packages/bbui/src/Switcher/Switcher.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script>
-  import { createEventDispatcher } from "svelte"
-
-  const dispatch = createEventDispatcher()
-
-  export let headings
-  export let value
-</script>
-
-<section>
-  <header>
-    {#each headings as heading}
-      <span
-        class:selected={value === heading.key}
-        on:click={() => {
-          value = heading.key
-          dispatch('change', { heading })
-        }}>
-        {heading.title}
-      </span>
-    {/each}
-  </header>
-  <slot />
-</section>
-
-<style>
-  header {
-    font-family: var(--font-sans);
-    display: flex;
-    margin-bottom: var(--spacing-l);
-  }
-
-  span {
-    margin-right: var(--spacing-xl);
-    font-size: var(--font-size-m);
-    font-weight: 500;
-    color: var(--grey-5);
-  }
-
-  span:hover {
-    cursor: pointer;
-  }
-
-  .selected {
-    color: var(--ink);
-  }
-</style>
diff --git a/packages/bbui/src/Switcher/Switcher.svench b/packages/bbui/src/Switcher/Switcher.svench
deleted file mode 100644
index 3cb668af44..0000000000
--- a/packages/bbui/src/Switcher/Switcher.svench
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Switcher from "./Switcher.svelte";
-
-  const items = [
-    {
-      title: "Apps",
-      key: "APPS"
-    },
-    {
-      title: "Deploy",
-      key: "DEPLOY"
-    },
-    {
-      title: "Settings",
-      key: "SETTINGS"
-    }
-  ]
-
-  let value = "APPS"
-</script>
-
-<View name="default">
-  <Switcher headings={items} bind:value={value}>
-    Content
-  </Switcher>
-</View>
diff --git a/packages/standard-components/src/table/AttachmentRenderer.svelte b/packages/bbui/src/Table/AttachmentRenderer.svelte
similarity index 79%
rename from packages/standard-components/src/table/AttachmentRenderer.svelte
rename to packages/bbui/src/Table/AttachmentRenderer.svelte
index 45bd97a849..ab9760a980 100644
--- a/packages/standard-components/src/table/AttachmentRenderer.svelte
+++ b/packages/bbui/src/Table/AttachmentRenderer.svelte
@@ -4,10 +4,15 @@
   const displayLimit = 5
   $: attachments = value?.slice(0, displayLimit) ?? []
   $: leftover = (value?.length ?? 0) - attachments.length
+
+  const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
+  const isImage = extension => {
+    return imageExtensions.includes(extension?.toLowerCase())
+  }
 </script>
 
 {#each attachments as attachment}
-  {#if attachment.type.startsWith('image')}
+  {#if isImage(attachment.extension)}
     <img src={attachment.url} alt={attachment.extension} />
   {:else}
     <div class="file">{attachment.extension}</div>
diff --git a/packages/standard-components/src/table/BooleanRenderer.svelte b/packages/bbui/src/Table/BooleanRenderer.svelte
similarity index 87%
rename from packages/standard-components/src/table/BooleanRenderer.svelte
rename to packages/bbui/src/Table/BooleanRenderer.svelte
index a71e28cb91..4e1aa3b4e1 100644
--- a/packages/standard-components/src/table/BooleanRenderer.svelte
+++ b/packages/bbui/src/Table/BooleanRenderer.svelte
@@ -5,24 +5,28 @@
 </script>
 
 <label
-  class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized">
+  class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized"
+>
   <input
     type="checkbox"
     class="spectrum-Checkbox-input"
     id="checkbox-1"
     disabled
-    checked={!!value} />
+    checked={!!value}
+  />
   <span class="spectrum-Checkbox-box">
     <svg
       class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
       focusable="false"
-      aria-hidden="true">
+      aria-hidden="true"
+    >
       <use xlink:href="#spectrum-css-icon-Checkmark100" />
     </svg>
     <svg
       class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
       focusable="false"
-      aria-hidden="true">
+      aria-hidden="true"
+    >
       <use xlink:href="#spectrum-css-icon-Dash100" />
     </svg>
   </span>
diff --git a/packages/bbui/src/Table/CellRenderer.svelte b/packages/bbui/src/Table/CellRenderer.svelte
new file mode 100644
index 0000000000..d2198fac01
--- /dev/null
+++ b/packages/bbui/src/Table/CellRenderer.svelte
@@ -0,0 +1,33 @@
+<script>
+  import StringRenderer from "./StringRenderer.svelte"
+  import BooleanRenderer from "./BooleanRenderer.svelte"
+  import DateTimeRenderer from "./DateTimeRenderer.svelte"
+  import RelationshipRenderer from "./RelationshipRenderer.svelte"
+  import AttachmentRenderer from "./AttachmentRenderer.svelte"
+
+  export let row
+  export let schema
+  export let value
+  export let customRenderers = []
+
+  const plainTypes = ["string", "options", "number", "longform"]
+  const typeMap = {
+    boolean: BooleanRenderer,
+    datetime: DateTimeRenderer,
+    link: RelationshipRenderer,
+    attachment: AttachmentRenderer,
+    string: StringRenderer,
+    options: StringRenderer,
+    number: StringRenderer,
+    longform: StringRenderer,
+  }
+  $: type = schema?.type ?? "string"
+  $: customRenderer = customRenderers?.find(x => x.column === schema?.name)
+  $: renderer = customRenderer?.component ?? typeMap[type]
+</script>
+
+{#if renderer && (customRenderer || (value != null && value !== ""))}
+  <svelte:component this={renderer} {row} {schema} {value} on:clickrelationship>
+    <slot />
+  </svelte:component>
+{/if}
diff --git a/packages/standard-components/src/table/DateTimeRenderer.svelte b/packages/bbui/src/Table/DateTimeRenderer.svelte
similarity index 67%
rename from packages/standard-components/src/table/DateTimeRenderer.svelte
rename to packages/bbui/src/Table/DateTimeRenderer.svelte
index 169adab163..8a06082d58 100644
--- a/packages/standard-components/src/table/DateTimeRenderer.svelte
+++ b/packages/bbui/src/Table/DateTimeRenderer.svelte
@@ -4,7 +4,7 @@
   export let value
 </script>
 
-<div>{dayjs(value).format('MMMM D YYYY, HH:mm')}</div>
+<div>{dayjs(value).format("MMMM D YYYY, HH:mm")}</div>
 
 <style>
   div {
diff --git a/packages/bbui/src/Table/RelationshipRenderer.svelte b/packages/bbui/src/Table/RelationshipRenderer.svelte
new file mode 100644
index 0000000000..4db0c63d95
--- /dev/null
+++ b/packages/bbui/src/Table/RelationshipRenderer.svelte
@@ -0,0 +1,40 @@
+<script>
+  import "@spectrum-css/label/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let row
+  export let value
+  export let schema
+
+  const dispatch = createEventDispatcher()
+  const displayLimit = 5
+
+  $: relationships = value?.slice(0, displayLimit) ?? []
+  $: leftover = (value?.length ?? 0) - relationships.length
+
+  const onClick = e => {
+    e.stopPropagation()
+    dispatch("clickrelationship", {
+      tableId: row.tableId,
+      rowId: row._id,
+      fieldName: schema?.name,
+    })
+  }
+</script>
+
+{#each relationships as relationship}
+  {#if relationship?.primaryDisplay}
+    <span class="spectrum-Label spectrum-Label--grey" on:click={onClick}>
+      {relationship.primaryDisplay}
+    </span>
+  {/if}
+{/each}
+{#if leftover}
+  <div>+{leftover} more</div>
+{/if}
+
+<style>
+  span:hover {
+    cursor: pointer;
+  }
+</style>
diff --git a/packages/bbui/src/Table/SelectEditRenderer.svelte b/packages/bbui/src/Table/SelectEditRenderer.svelte
new file mode 100644
index 0000000000..d66ac28a32
--- /dev/null
+++ b/packages/bbui/src/Table/SelectEditRenderer.svelte
@@ -0,0 +1,17 @@
+<script>
+  import Checkbox from "../Form/Checkbox.svelte"
+  import ActionButton from "../ActionButton/ActionButton.svelte"
+
+  export let selected
+  export let onToggleSelection
+  export let onEdit
+  export let allowSelectRows = false
+  export let allowEditRows = false
+</script>
+
+{#if allowSelectRows}
+  <Checkbox value={selected} />
+{/if}
+{#if allowEditRows}
+  <ActionButton size="S" on:click={onEdit}>Edit</ActionButton>
+{/if}
diff --git a/packages/standard-components/src/table/StringRenderer.svelte b/packages/bbui/src/Table/StringRenderer.svelte
similarity index 100%
rename from packages/standard-components/src/table/StringRenderer.svelte
rename to packages/bbui/src/Table/StringRenderer.svelte
diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
new file mode 100644
index 0000000000..e74a3a7e7d
--- /dev/null
+++ b/packages/bbui/src/Table/Table.svelte
@@ -0,0 +1,458 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import "@spectrum-css/table/dist/index-vars.css"
+  import CellRenderer from "./CellRenderer.svelte"
+  import SelectEditRenderer from "./SelectEditRenderer.svelte"
+
+  export let data = []
+  export let schema = {}
+  export let showAutoColumns = false
+  export let rowCount = 0
+  export let quiet = false
+  export let loading = false
+  export let allowSelectRows = true
+  export let allowEditRows = true
+  export let allowEditColumns = true
+  export let selectedRows = []
+  export let editColumnTitle = "Edit"
+  export let customRenderers = []
+
+  const dispatch = createEventDispatcher()
+
+  // Config
+  const rowHeight = 55
+  const headerHeight = 36
+  const rowPreload = 5
+
+  // Sorting state
+  let sortColumn
+  let sortOrder
+
+  // Table state
+  let height = 0
+  let loaded = false
+  $: schema = fixSchema(schema)
+  $: if (!loading) loaded = true
+  $: rows = data ?? []
+  $: visibleRowCount = getVisibleRowCount(loaded, height, rows.length, rowCount)
+  $: contentStyle = getContentStyle(visibleRowCount, rowCount)
+  $: sortedRows = sortRows(rows, sortColumn, sortOrder)
+  $: fields = getFields(schema, showAutoColumns)
+  $: showEditColumn = allowEditRows || allowSelectRows
+
+  // Scrolling state
+  let timeout
+  let nextScrollTop = 0
+  let scrollTop = 0
+  $: firstVisibleRow = calculateFirstVisibleRow(scrollTop)
+  $: lastVisibleRow = calculateLastVisibleRow(
+    firstVisibleRow,
+    visibleRowCount,
+    rows.length
+  )
+
+  // Reset state when data changes
+  $: data.length, reset()
+  const reset = () => {
+    nextScrollTop = 0
+    scrollTop = 0
+    clearTimeout(timeout)
+    timeout = null
+  }
+
+  const fixSchema = schema => {
+    let fixedSchema = {}
+    Object.entries(schema || {}).forEach(([fieldName, fieldSchema]) => {
+      if (typeof fieldSchema === "string") {
+        fixedSchema[fieldName] = {
+          type: fieldSchema,
+          name: fieldName,
+        }
+      } else {
+        fixedSchema[fieldName] = {
+          ...fieldSchema,
+          name: fieldName,
+        }
+      }
+    })
+    return fixedSchema
+  }
+
+  const getVisibleRowCount = (loaded, height, allRows, rowCount) => {
+    if (!loaded) {
+      return rowCount || 0
+    }
+    if (rowCount) {
+      return Math.min(allRows, rowCount)
+    }
+    return Math.min(allRows, Math.ceil(height / rowHeight))
+  }
+
+  const getContentStyle = (visibleRows, rowCount) => {
+    if (!rowCount || !visibleRows) {
+      return ""
+    }
+    return `height: ${headerHeight + visibleRows * (rowHeight + 1)}px;`
+  }
+
+  const sortRows = (rows, sortColumn, sortOrder) => {
+    if (!sortColumn || !sortOrder) {
+      return rows
+    }
+    return rows.slice().sort((a, b) => {
+      const colA = a[sortColumn]
+      const colB = b[sortColumn]
+      if (sortOrder === "Descending") {
+        return colA > colB ? -1 : 1
+      } else {
+        return colA > colB ? 1 : -1
+      }
+    })
+  }
+
+  const sortBy = fieldSchema => {
+    if (fieldSchema.sortable === false) {
+      return
+    }
+    if (fieldSchema.name === sortColumn) {
+      sortOrder = sortOrder === "Descending" ? "Ascending" : "Descending"
+    } else {
+      sortColumn = fieldSchema.name
+      sortOrder = "Descending"
+    }
+  }
+
+  const getDisplayName = schema => {
+    let name = schema?.displayName
+    if (schema && name === undefined) {
+      name = schema.name
+    }
+    return name || ""
+  }
+
+  const getFields = (schema, showAutoColumns) => {
+    let columns = []
+    let autoColumns = []
+    Object.entries(schema || {}).forEach(([field, fieldSchema]) => {
+      if (!field || !fieldSchema) {
+        return
+      }
+      if (!fieldSchema?.autocolumn) {
+        columns.push(fieldSchema)
+      } else if (showAutoColumns) {
+        autoColumns.push(fieldSchema)
+      }
+    })
+    return columns
+      .sort((a, b) => {
+        const orderA = a.order || Number.MAX_SAFE_INTEGER
+        const orderB = b.order || Number.MAX_SAFE_INTEGER
+        const nameA = getDisplayName(a)
+        const nameB = getDisplayName(b)
+        if (orderA !== orderB) {
+          return orderA < orderB ? orderA : orderB
+        }
+        return nameA < nameB ? a : b
+      })
+      .concat(autoColumns)
+      .map(column => column.name)
+  }
+
+  const onScroll = event => {
+    nextScrollTop = event.target.scrollTop
+    if (timeout) {
+      return
+    }
+    timeout = setTimeout(() => {
+      scrollTop = nextScrollTop
+      timeout = null
+    }, 50)
+  }
+
+  const calculateFirstVisibleRow = scrollTop => {
+    return Math.max(Math.floor(scrollTop / (rowHeight + 1)) - rowPreload, 0)
+  }
+
+  const calculateLastVisibleRow = (firstRow, visibleRowCount, allRowCount) => {
+    if (visibleRowCount === 0) {
+      return -1
+    }
+    return Math.min(firstRow + visibleRowCount + 2 * rowPreload, allRowCount)
+  }
+
+  const editColumn = (e, field) => {
+    e.stopPropagation()
+    dispatch("editcolumn", field)
+  }
+
+  const editRow = (e, row) => {
+    e.stopPropagation()
+    dispatch("editrow", row)
+  }
+
+  const toggleSelectRow = row => {
+    if (!allowSelectRows) {
+      return
+    }
+    if (selectedRows.includes(row)) {
+      selectedRows = selectedRows.filter(selectedRow => selectedRow !== row)
+    } else {
+      selectedRows = [...selectedRows, row]
+    }
+  }
+</script>
+
+<div class="wrapper" bind:offsetHeight={height}>
+  {#if !loaded}
+    <div class="loading" style={contentStyle} />
+  {:else}
+    <div
+      on:scroll={onScroll}
+      class:quiet
+      style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
+      class="container"
+    >
+      <div style={contentStyle}>
+        <table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
+          {#if sortedRows?.length}
+            <thead class="spectrum-Table-head">
+              <tr>
+                {#if showEditColumn}
+                  <th class="spectrum-Table-headCell">
+                    <div class="spectrum-Table-headCell-content">
+                      {editColumnTitle || ""}
+                    </div>
+                  </th>
+                {/if}
+                {#each fields as field}
+                  <th
+                    class="spectrum-Table-headCell"
+                    class:is-sortable={schema[field].sortable !== false}
+                    class:is-sorted-desc={sortColumn === field &&
+                      sortOrder === "Descending"}
+                    class:is-sorted-asc={sortColumn === field &&
+                      sortOrder === "Ascending"}
+                    on:click={() => sortBy(schema[field])}
+                  >
+                    <div class="spectrum-Table-headCell-content">
+                      <div class="title">{getDisplayName(schema[field])}</div>
+                      {#if schema[field]?.autocolumn}
+                        <svg
+                          class="spectrum-Icon spectrum-Table-autoIcon"
+                          focusable="false"
+                        >
+                          <use xlink:href="#spectrum-icon-18-MagicWand" />
+                        </svg>
+                      {/if}
+                      {#if sortColumn === field}
+                        <svg
+                          class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
+                          focusable="false"
+                          aria-hidden="true"
+                        >
+                          <use xlink:href="#spectrum-css-icon-Arrow100" />
+                        </svg>
+                      {/if}
+                      {#if allowEditColumns && schema[field]?.editable !== false}
+                        <svg
+                          class="spectrum-Icon spectrum-Table-editIcon"
+                          focusable="false"
+                          on:click={e => editColumn(e, field)}
+                        >
+                          <use xlink:href="#spectrum-icon-18-Edit" />
+                        </svg>
+                      {/if}
+                    </div>
+                  </th>
+                {/each}
+              </tr>
+            </thead>
+          {/if}
+          <tbody class="spectrum-Table-body">
+            {#if sortedRows?.length}
+              {#each sortedRows as row, idx}
+                <tr
+                  on:click={() => toggleSelectRow(row)}
+                  class="spectrum-Table-row"
+                  class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}
+                >
+                  {#if idx >= firstVisibleRow && idx <= lastVisibleRow}
+                    {#if showEditColumn}
+                      <td
+                        class="spectrum-Table-cell spectrum-Table-cell--divider"
+                      >
+                        <div class="spectrum-Table-cell-content">
+                          <SelectEditRenderer
+                            data={row}
+                            selected={selectedRows.includes(row)}
+                            onToggleSelection={() => toggleSelectRow(row)}
+                            onEdit={e => editRow(e, row)}
+                            {allowSelectRows}
+                            {allowEditRows}
+                          />
+                        </div>
+                      </td>
+                    {/if}
+                    {#each fields as field}
+                      <td
+                        class="spectrum-Table-cell"
+                        class:spectrum-Table-cell--divider={!!schema[field]
+                          .divider}
+                      >
+                        <div class="spectrum-Table-cell-content">
+                          <CellRenderer
+                            {customRenderers}
+                            {row}
+                            schema={schema[field]}
+                            value={row[field]}
+                            on:clickrelationship
+                          >
+                            <slot />
+                          </CellRenderer>
+                        </div>
+                      </td>
+                    {/each}
+                  {/if}
+                </tr>
+              {/each}
+            {:else}
+              <div class="placeholder">
+                <svg
+                  class="spectrum-Icon spectrum-Icon--sizeXXL"
+                  focusable="false"
+                >
+                  <use xlink:href="#spectrum-icon-18-Table" />
+                </svg>
+                <div>No rows found</div>
+              </div>
+            {/if}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .wrapper {
+    background-color: var(--spectrum-alias-background-color-secondary);
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+  }
+
+  .container {
+    height: 100%;
+    position: relative;
+    overflow: auto;
+  }
+  .container.quiet {
+    border: none !important;
+  }
+  table {
+    width: 100%;
+  }
+
+  .spectrum-Table-headCell .spectrum-Icon {
+    pointer-events: all;
+    margin-left: var(
+      --spectrum-table-header-sort-icon-gap,
+      var(--spectrum-global-dimension-size-125)
+    );
+  }
+  .spectrum-Table-editIcon,
+  .spectrum-Table-autoIcon {
+    width: var(--spectrum-global-dimension-size-150);
+    height: var(--spectrum-global-dimension-size-150);
+  }
+  .spectrum-Table-editIcon {
+    opacity: 0;
+  }
+  .spectrum-Table-headCell:hover .spectrum-Table-editIcon {
+    opacity: 1;
+    transition: opacity 0.2s ease;
+  }
+
+  th {
+    vertical-align: middle;
+    height: var(--header-height);
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background-color: var(--spectrum-alias-background-color-secondary);
+    border-bottom: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
+  }
+  .spectrum-Table-headCell-content {
+    white-space: nowrap;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    user-select: none;
+  }
+  .spectrum-Table-headCell-content .title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .placeholder {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: var(
+      --spectrum-table-cell-text-color,
+      var(--spectrum-alias-text-color)
+    );
+  }
+  .placeholder div {
+    margin-top: 10px;
+    font-size: var(
+      --spectrum-table-cell-text-size,
+      var(--spectrum-alias-font-size-default)
+    );
+  }
+
+  tbody {
+    z-index: 1;
+  }
+  tbody tr {
+    height: var(--row-height);
+  }
+  tbody tr.hidden {
+    height: calc(var(--row-height) + 1px);
+  }
+  tbody tr.offset {
+    background-color: red;
+    display: block;
+  }
+  td {
+    padding-top: 0;
+    padding-bottom: 0;
+    border-bottom: none !important;
+    border-top: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
+    border-radius: 0 !important;
+  }
+  tr:first-child td {
+    border-top: none !important;
+  }
+  tr:last-child td {
+    border-bottom: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
+  }
+  td.spectrum-Table-cell--divider {
+    width: 1px;
+  }
+  .spectrum-Table-cell-content {
+    height: var(--row-height);
+    white-space: nowrap;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 4px;
+  }
+</style>
diff --git a/packages/bbui/src/Table/index.js b/packages/bbui/src/Table/index.js
new file mode 100644
index 0000000000..16b81c6eb6
--- /dev/null
+++ b/packages/bbui/src/Table/index.js
@@ -0,0 +1 @@
+export { default as Table } from "./Table.svelte"
diff --git a/packages/bbui/src/Tabs/Tab.svelte b/packages/bbui/src/Tabs/Tab.svelte
new file mode 100644
index 0000000000..b0f59c76f0
--- /dev/null
+++ b/packages/bbui/src/Tabs/Tab.svelte
@@ -0,0 +1,51 @@
+<script>
+  import { getContext, onMount, createEventDispatcher } from "svelte"
+  import Portal from "svelte-portal"
+  export let title
+  export let icon = ""
+
+  const dispatch = createEventDispatcher()
+  const selected = getContext("tab")
+  let tab
+  let tabInfo
+  const setTabInfo = () => {
+    tabInfo = tab.getBoundingClientRect()
+    if ($selected.title === title) {
+      $selected.info = tabInfo
+    }
+  }
+
+  onMount(() => {
+    setTabInfo()
+  })
+
+  const onClick = () => {
+    $selected = { ...$selected, title, info: tab.getBoundingClientRect() }
+    dispatch("click")
+  }
+</script>
+
+<div
+  bind:this={tab}
+  on:click={onClick}
+  class:is-selected={$selected.title === title}
+  class="spectrum-Tabs-item"
+  tabindex="0"
+>
+  {#if icon}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeM"
+      focusable="false"
+      aria-hidden="true"
+      aria-label="Folder"
+    >
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
+  <span class="spectrum-Tabs-itemLabel">{title}</span>
+</div>
+{#if $selected.title === title}
+  <Portal target=".spectrum-Tabs-content-{$selected.id}">
+    <slot />
+  </Portal>
+{/if}
diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte
new file mode 100644
index 0000000000..3eddb3dfec
--- /dev/null
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@@ -0,0 +1,84 @@
+<script>
+  import "@spectrum-css/tabs/dist/index-vars.css"
+  import { writable } from "svelte/store"
+  import { onMount, setContext, createEventDispatcher } from "svelte"
+
+  export let selected
+  export let vertical = false
+  let _id = id()
+  const tab = writable({ title: selected, id: _id })
+  setContext("tab", tab)
+
+  let container
+
+  const dispatch = createEventDispatcher()
+
+  $: selected = $tab.title
+  $: selected = dispatch("select", selected)
+
+  let top, left, width, height
+  $: calculateIndicatorLength($tab)
+  $: calculateIndicatorOffset($tab)
+
+  function calculateIndicatorLength() {
+    if (!vertical) {
+      width = $tab.info?.width + "px"
+      height = $tab.info?.height
+    } else {
+      height = $tab.info?.height + 4 + "px"
+      width = $tab.info?.width
+    }
+  }
+
+  function calculateIndicatorOffset() {
+    if (!vertical) {
+      left = $tab.info?.left - container?.getBoundingClientRect().left + "px"
+    } else {
+      top = $tab.info?.top - container?.getBoundingClientRect().top + "px"
+    }
+  }
+
+  onMount(() => {
+    calculateIndicatorLength()
+    calculateIndicatorOffset()
+  })
+
+  function id() {
+    return "_" + Math.random().toString(36).substr(2, 9)
+  }
+</script>
+
+<div
+  bind:this={container}
+  class="selected-border spectrum-Tabs spectrum-Tabs--{vertical
+    ? 'vertical'
+    : 'horizontal'}"
+>
+  <slot />
+  {#if $tab.info}
+    <div
+      class="spectrum-Tabs-selectionIndicator indicator-transition"
+      style="width: {width}; height: {height}; left: {left}; top: {top};"
+    />
+  {/if}
+</div>
+
+<div class="spectrum-Tabs-content spectrum-Tabs-content-{_id}" />
+
+<style>
+  .spectrum-Tabs {
+    padding-left: var(--spacing-xl);
+    padding-right: var(--spacing-xl);
+    position: relative;
+    border-width: 1px !important;
+  }
+  .spectrum-Tabs-content {
+    margin-top: var(--spectrum-global-dimension-static-size-150);
+  }
+  .indicator-transition {
+    transition: all 200ms;
+  }
+  .spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator {
+    bottom: 0 !important;
+  }
+</style>
diff --git a/packages/bbui/src/Tags/Tag.svelte b/packages/bbui/src/Tags/Tag.svelte
new file mode 100644
index 0000000000..906065cc71
--- /dev/null
+++ b/packages/bbui/src/Tags/Tag.svelte
@@ -0,0 +1,34 @@
+<script>
+  import Avatar from "../Avatar/Avatar.svelte"
+  import ClearButton from "../ClearButton/ClearButton.svelte"
+  export let icon = ""
+  export let avatar = ""
+  export let invalid = false
+  export let disabled = false
+  export let closable = false
+</script>
+
+<div
+  class:is-invalid={invalid}
+  class:is-disabled={disabled}
+  class="spectrum-Tags-item"
+  role="listitem"
+>
+  {#if avatar}
+    <Avatar url={avatar} />
+  {/if}
+  {#if icon}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeS"
+      focusable="false"
+      aria-hidden="true"
+      aria-label="Tag"
+    >
+      <use xlink:href="#spectrum-icon-24-{icon}" />
+    </svg>
+  {/if}
+  <span class="spectrum-Tags-itemLabel"><slot /></span>
+  {#if closable}
+    <ClearButton on:click />
+  {/if}
+</div>
diff --git a/packages/bbui/src/Tags/Tags.svelte b/packages/bbui/src/Tags/Tags.svelte
new file mode 100644
index 0000000000..36d34507f3
--- /dev/null
+++ b/packages/bbui/src/Tags/Tags.svelte
@@ -0,0 +1,7 @@
+<script>
+  import "@spectrum-css/tags/dist/index-vars.css"
+</script>
+
+<div class="spectrum-Tags" role="list" aria-label="list">
+  <slot />
+</div>
diff --git a/packages/bbui/src/TreeView/Item.svelte b/packages/bbui/src/TreeView/Item.svelte
new file mode 100644
index 0000000000..ef6b0aa021
--- /dev/null
+++ b/packages/bbui/src/TreeView/Item.svelte
@@ -0,0 +1,40 @@
+<script>
+  export let selected = false
+  export let open = false
+  export let title
+  export let icon
+</script>
+
+<li
+  class:is-selected={selected}
+  class:is-open={open}
+  class="spectrum-TreeView-item"
+>
+  <a on:click class="spectrum-TreeView-itemLink" href="#">
+    {#if $$slots.default}
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-css-icon-Chevron100" />
+      </svg>
+    {/if}
+    {#if icon}
+      <svg
+        class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM"
+        focusable="false"
+        aria-hidden="true"
+        aria-label="Layers"
+      >
+        <use xlink:href="#spectrum-icon-18-{icon}" />
+      </svg>
+    {/if}
+    <span class="spectrum-TreeView-itemLabel">{title}</span>
+  </a>
+  {#if $$slots.default}
+    <ul class="spectrum-TreeView">
+      <slot />
+    </ul>
+  {/if}
+</li>
diff --git a/packages/bbui/src/TreeView/Tree.svelte b/packages/bbui/src/TreeView/Tree.svelte
new file mode 100644
index 0000000000..cecc357243
--- /dev/null
+++ b/packages/bbui/src/TreeView/Tree.svelte
@@ -0,0 +1,16 @@
+<script>
+  import "@spectrum-css/treeview/dist/index-vars.css"
+
+  export let quiet = false
+  export let standalone = true
+  export let width = "250px"
+</script>
+
+<ul
+  class:spectrum-TreeView--standalone={standalone}
+  class:spectrum-TreeView--quiet={quiet}
+  class="spectrum-TreeView"
+  style="width: {width}"
+>
+  <slot />
+</ul>
diff --git a/packages/bbui/src/Typography/Body.svelte b/packages/bbui/src/Typography/Body.svelte
new file mode 100644
index 0000000000..f8e15d9d78
--- /dev/null
+++ b/packages/bbui/src/Typography/Body.svelte
@@ -0,0 +1,13 @@
+<script>
+  import "@spectrum-css/typography/dist/index-vars.css"
+
+  export let size = "M"
+  export let serif = false
+</script>
+
+<p
+  class="spectrum-Body class:spectrum-Body--size{size}"
+  class:spectrum-Body--serif={serif}
+>
+  <slot />
+</p>
diff --git a/packages/bbui/src/Typography/Code.svelte b/packages/bbui/src/Typography/Code.svelte
new file mode 100644
index 0000000000..ebb100a108
--- /dev/null
+++ b/packages/bbui/src/Typography/Code.svelte
@@ -0,0 +1,10 @@
+<script>
+  import "@spectrum-css/typography/dist/index-vars.css"
+
+  // Sizes
+  export let size = "M"
+</script>
+
+<code class="spectrum-Code spectrum-Code--size{size}">
+  <slot />
+</code>
diff --git a/packages/bbui/src/Typography/Detail.svelte b/packages/bbui/src/Typography/Detail.svelte
new file mode 100644
index 0000000000..7cbafdadef
--- /dev/null
+++ b/packages/bbui/src/Typography/Detail.svelte
@@ -0,0 +1,15 @@
+<script>
+  import "@spectrum-css/typography/dist/index-vars.css"
+
+  // Sizes
+  export let size = "M"
+
+  export let serif = false
+</script>
+
+<p
+  class="spectrum-Detail spectrum-Detail--size{size}"
+  class:spectrum-Detail--serif={serif}
+>
+  <slot />
+</p>
diff --git a/packages/bbui/src/Typography/Heading.svelte b/packages/bbui/src/Typography/Heading.svelte
new file mode 100644
index 0000000000..6e0c158708
--- /dev/null
+++ b/packages/bbui/src/Typography/Heading.svelte
@@ -0,0 +1,10 @@
+<script>
+  import "@spectrum-css/typography/dist/index-vars.css"
+
+  // Sizes
+  export let size = "M"
+</script>
+
+<h1 class="spectrum-Heading spectrum-Heading--size{size}">
+  <slot />
+</h1>
diff --git a/packages/bbui/src/bbui.css b/packages/bbui/src/bbui.css
index ba3147cd5d..de758ec7fa 100644
--- a/packages/bbui/src/bbui.css
+++ b/packages/bbui/src/bbui.css
@@ -1,32 +1,3 @@
-.svench-content {
-  color: #666;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, "Roboto",
-    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-}
-
-h1.svench-content {
-  font-size: 2em;
-}
-h2.svench-content {
-  font-size: 1.66em;
-}
-h3.svench-content {
-  font-size: 1.33em;
-}
-h4.svench-content {
-  font-size: 1.33em;
-  font-weight: normal;
-}
-h5.svench-content {
-  font-size: 1em;
-  font-weight: bold;
-}
-h6.svench-content {
-  font-size: 1em;
-  font-weight: normal;
-  font-style: italic;
-}
-
 :root {
   --background: #ffffff;
   --ink: #000000;
@@ -74,7 +45,7 @@ h6.svench-content {
   --font-bold: "Inter Bold";
   --font-medium: "Inter Medium";
   --font-light: "Inter Light";
-  --font-sans: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
+  --font-sans: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
     "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-serif: "Georgia", Cambria, Times New Roman, Times, serif;
@@ -125,69 +96,6 @@ h6.svench-content {
   --border-transparent: 2px transparent solid;
 }
 
-h1 {
-  font-size: 3rem;
-  font-family: var(--font-sans);
-  font-weight: 700;
-  text-rendering: var(--text-render);
-  -webkit-font-smoothing: var(--text-smooth);
-  color: var(--ink);
-}
-
-h2 {
-  font-size: 2.25rem;
-  font-family: var(--font-sans);
-  font-weight: 600;
-  text-rendering: var(--text-render);
-  -webkit-font-smoothing: var(--text-smooth);
-  color: var(--ink);
-}
-
-h3 {
-  font-size: 1.7rem;
-  font-family: var(--font-sans);
-  font-weight: 600;
-  text-rendering: var(--text-render);
-  -webkit-font-smoothing: var(--text-smooth);
-  color: var(--ink);
-}
-
-h4 {
-  font-size: var(--font-size-xl);
-  font-family: var(--font-sans);
-  font-weight: 500;
-  text-rendering: var(--text-render);
-  -webkit-font-smoothing: var(--text-smooth);
-  color: var(--ink);
-}
-
-h5 {
-  font-size: var(--font-size-l);
-  font-family: var(--font-sans);
-  font-weight: 500;
-  text-rendering: var(--text-render);
-  -webkit-font-smoothing: var(--text-smooth);
-  color: var(--ink);
-}
-
-h6 {
-  font-size: var(--font-size-m);
-  font-family: var(--font-sans);
-  font-weight: 500;
-  text-rendering: var(--text-render);
-  -webkit-font-smoothing: var(--text-smooth);
-  color: var(--ink);
-}
-
-p {
-  font-size: var(--font-size);
-  font-family: var(--font-sans);
-  font-weight: 400;
-  text-rendering: var(--text-render);
-  -webkit-font-smoothing: var(--text-smooth);
-  color: var(--ink);
-}
-
 a {
   text-decoration: none;
-}
+}
\ No newline at end of file
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 1a156697c9..e1b68cb35f 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -1,35 +1,64 @@
 import "./bbui.css"
 
+// Spectrum icons
+import "@spectrum-css/icon/dist/index-vars.css"
+
 // Components
 export { default as Input } from "./Form/Input.svelte"
 export { default as TextArea } from "./Form/TextArea.svelte"
-export { default as RichText } from "./Form/RichText.svelte"
 export { default as Select } from "./Form/Select.svelte"
-export { default as DataList } from "./Form/DataList.svelte"
-export { default as Dropzone } from "./Dropzone/Dropzone.svelte"
+export { default as Combobox } from "./Form/Combobox.svelte"
+export { default as Dropzone } from "./Form/Dropzone.svelte"
 export { default as Drawer } from "./Drawer/Drawer.svelte"
+export { default as DrawerContent } from "./Drawer/DrawerContent.svelte"
+export { default as Avatar } from "./Avatar/Avatar.svelte"
+export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
+export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"
+export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte"
 export { default as Button } from "./Button/Button.svelte"
-export { default as Icon, iconOptions, directions } from "./Icons/Icon.svelte"
-export { default as TextButton } from "./Button/TextButton.svelte"
+export { default as ButtonGroup } from "./ButtonGroup/ButtonGroup.svelte"
+export { default as ClearButton } from "./ClearButton/ClearButton.svelte"
+export { default as Icon, directions } from "./Icon/Icon.svelte"
 export { default as Toggle } from "./Form/Toggle.svelte"
-export { default as Radio } from "./Form/Radio.svelte"
+export { default as RadioGroup } from "./Form/RadioGroup.svelte"
 export { default as Checkbox } from "./Form/Checkbox.svelte"
-export { default as Home } from "./Links/Home.svelte"
-export { default as DetailSummary } from "./List/Items/DetailSummary.svelte"
-export { default as Switcher } from "./Switcher/Switcher.svelte"
-export { default as DropdownMenu } from "./DropdownMenu/DropdownMenu.svelte"
+export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte"
 export { default as Popover } from "./Popover/Popover.svelte"
-export { default as Body } from "./Styleguide/Body.svelte"
-export { default as Heading } from "./Styleguide/Heading.svelte"
-export { default as Label } from "./Styleguide/Label.svelte"
-export { default as Close } from "./Button/Close.svelte"
+export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
+export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelte"
+export { default as Label } from "./Label/Label.svelte"
+export { default as Layout } from "./Layout/Layout.svelte"
+export { default as Link } from "./Link/Link.svelte"
+export { default as Menu } from "./Menu/Menu.svelte"
+export { default as MenuSection } from "./Menu/Section.svelte"
+export { default as MenuSeparator } from "./Menu/Separator.svelte"
+export { default as MenuItem } from "./Menu/Item.svelte"
 export { default as Modal } from "./Modal/Modal.svelte"
 export { default as ModalContent } from "./Modal/ModalContent.svelte"
-export { default as Spacer } from "./Spacer/Spacer.svelte"
-export { default as DatePicker } from "./DatePicker/DatePicker.svelte"
+export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
+export { default as SideNavigation } from "./SideNavigation/Navigation.svelte"
+export { default as SideNavigationItem } from "./SideNavigation/Item.svelte"
+export { default as DatePicker } from "./Form/DatePicker.svelte"
 export { default as Multiselect } from "./Form/Multiselect.svelte"
-export { default as Slider } from "./Form/Slider.svelte"
 export { default as Context } from "./context"
+export { default as Table } from "./Table/Table.svelte"
+export { default as Tabs } from "./Tabs/Tabs.svelte"
+export { default as Tab } from "./Tabs/Tab.svelte"
+export { default as Tags } from "./Tags/Tags.svelte"
+export { default as Tag } from "./Tags/Tag.svelte"
+export { default as TreeView } from "./TreeView/Tree.svelte"
+export { default as TreeItem } from "./TreeView/Item.svelte"
+export { default as Divider } from "./Divider/Divider.svelte"
+export { default as Search } from "./Form/Search.svelte"
+
+// Typography
+export { default as Body } from "./Typography/Body.svelte"
+export { default as Heading } from "./Typography/Heading.svelte"
+export { default as Detail } from "./Typography/Detail.svelte"
+export { default as Code } from "./Typography/Code.svelte"
+
+// Core form components to be used elsewhere (standard components)
+export * from "./Form/Core"
 
 // Actions
 export { default as autoResizeTextArea } from "./Actions/autoresize_textarea"
@@ -37,4 +66,4 @@ export { default as positionDropdown } from "./Actions/position_dropdown"
 export { default as clickOutside } from "./Actions/click_outside"
 
 // Stores
-export { notifications } from "./Stores/notifications"
+export { notifications, createNotificationStore } from "./Stores/notifications"
diff --git a/packages/standard-components/src/spectrum-icons.js b/packages/bbui/src/spectrum-icons-rollup.js
similarity index 91%
rename from packages/standard-components/src/spectrum-icons.js
rename to packages/bbui/src/spectrum-icons-rollup.js
index 932838339b..adf5752848 100644
--- a/packages/standard-components/src/spectrum-icons.js
+++ b/packages/bbui/src/spectrum-icons-rollup.js
@@ -1,8 +1,7 @@
-import "@spectrum-css/icon/dist/index-vars.css"
 import SpectrumUIIcons from "@spectrum-css/icon/dist/spectrum-css-icons.svg"
 import SpectrumWorkflowIcons from "@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg"
 
-export const loadSpectrumIcons = () => {
+export default () => {
   loadIconSet("Spectrum UI Icons", SpectrumUIIcons)
   loadIconSet("Spectrum Workflow Icons", SpectrumWorkflowIcons)
 }
diff --git a/packages/bbui/src/spectrum-icons-vite.js b/packages/bbui/src/spectrum-icons-vite.js
new file mode 100644
index 0000000000..99a66d3115
--- /dev/null
+++ b/packages/bbui/src/spectrum-icons-vite.js
@@ -0,0 +1,31 @@
+import SpectrumUIIcons from "@spectrum-css/icon/dist/spectrum-css-icons.svg?raw"
+import SpectrumWorkflowIcons from "@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg?raw"
+
+export default () => {
+  loadIconSet("Spectrum UI Icons", SpectrumUIIcons)
+  loadIconSet("Spectrum Workflow Icons", SpectrumWorkflowIcons)
+}
+
+const loadIconSet = (name, markup) => {
+  // Parse the SVG
+  const parser = new DOMParser()
+  try {
+    const doc = parser.parseFromString(markup, "image/svg+xml")
+    const svg = doc.firstChild
+
+    // Check a real SVG was parsed
+    if (svg && svg.tagName === "svg") {
+      // Hide the element
+      svg.style.display = "none"
+
+      // Insert it into the head
+      document.head.insertBefore(svg, null)
+    } else {
+      throw "Invalid tag type for SVG definition"
+    }
+  } catch (err) {
+    // Swallow error, but icons won't work
+    console.error(err)
+    console.error(`Failed to parse ${name}. Icons won't work.`)
+  }
+}
diff --git a/packages/bbui/src/utils/buildStyle.js b/packages/bbui/src/utils/buildStyle.js
deleted file mode 100644
index 9b3266c8b7..0000000000
--- a/packages/bbui/src/utils/buildStyle.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export default function buildStyle(styles) {
-  const convertCamel = str => {
-    return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
-  }
-
-  let str = ""
-  for (let s in styles) {
-    if (styles[s]) {
-      let key = convertCamel(s)
-      str += `${key}: ${styles[s]}; `
-    }
-  }
-  return str
-}
diff --git a/packages/bbui/src/utils/helpers.js b/packages/bbui/src/utils/helpers.js
new file mode 100644
index 0000000000..13531d7f09
--- /dev/null
+++ b/packages/bbui/src/utils/helpers.js
@@ -0,0 +1,6 @@
+export const generateID = () => {
+  const rand = Math.random().toString(32).substring(2)
+
+  // Starts with a letter so that its a valid DOM ID
+  return `A${rand}`
+}
diff --git a/packages/bbui/vite.config.js b/packages/bbui/vite.config.js
deleted file mode 100644
index 8d04078dd4..0000000000
--- a/packages/bbui/vite.config.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import svelte from "@sveltejs/vite-plugin-svelte"
-
-export default ({ mode }) => {
-  const isProduction = mode === "production"
-  return {
-    build: {
-      lib: {
-        entry: "src/index.js",
-        name: "bbui",
-        formats: ["es"],
-      },
-      minify: isProduction,
-    },
-    plugins: [svelte()],
-    resolve: {
-      dedupe: ["svelte", "svelte/internal"],
-    },
-    rollupOptions: {
-      external: ["svelte", "svelte/internal"],
-    },
-  }
-}
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index e444c1fb18..5dcac027b9 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -2,7 +2,12 @@
 # yarn lockfile v1
 
 
-"@babel/code-frame@^7.0.0":
+"@adobe/spectrum-css-workflow-icons@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@adobe/spectrum-css-workflow-icons/-/spectrum-css-workflow-icons-1.2.1.tgz#7e2cb3fcfb5c8b12d7275afafbb6ec44913551b4"
+  integrity sha512-uVgekyBXnOVkxp+CUssjN/gefARtudZC8duEn1vm0lBQFwGRZFlDEzU1QC+aIRWCrD1Z8OgRpmBYlSZ7QS003w==
+
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.13.tgz#dcfc826beef65e75c50e21d3837d7d95798dd658"
   integrity sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==
@@ -23,269 +28,6 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@nodelib/fs.scandir@2.1.4":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz#d4b3549a5db5de2683e0c1071ab4f140904bbf69"
-  integrity sha512-33g3pMJk3bg5nXbL/+CY6I2eJDzZAni49PfJnL5fghPTggPvBd/pFNSgJsdAgWptuFu7qq/ERvOYFlhvsLTCKA==
-  dependencies:
-    "@nodelib/fs.stat" "2.0.4"
-    run-parallel "^1.1.9"
-
-"@nodelib/fs.stat@2.0.4", "@nodelib/fs.stat@^2.0.2":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.4.tgz#a3f2dd61bab43b8db8fa108a121cfffe4c676655"
-  integrity sha512-IYlHJA0clt2+Vg7bccq+TzRdJvv19c2INqBSsoOLp1je7xjtr7J26+WXR72MCdvU9q1qTzIWDfhMf+DRvQJK4Q==
-
-"@nodelib/fs.walk@^1.2.3":
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.6.tgz#cce9396b30aa5afe9e3756608f5831adcb53d063"
-  integrity sha512-8Broas6vTtW4GIXTAHDoE32hnN2M5ykgCpWGbuXHQ15vEMqr23pB76e/GZcYsZCHALv50ktd24qhEyKr6wBtow==
-  dependencies:
-    "@nodelib/fs.scandir" "2.1.4"
-    fastq "^1.6.0"
-
-"@npmcli/arborist@^2.0.0", "@npmcli/arborist@^2.2.9":
-  version "2.2.9"
-  resolved "https://registry.yarnpkg.com/@npmcli/arborist/-/arborist-2.2.9.tgz#4e8b1d48c348994a5d35fa67b4e5a6f3f8c7018b"
-  integrity sha512-ddC/CCAEHh28XYtgSAOudchdphNXcgErdYxwsEiykc2YbRA9Z+4XjI0BdBdXvv22DvkpO7zotUSxlVTcJmdURw==
-  dependencies:
-    "@npmcli/installed-package-contents" "^1.0.7"
-    "@npmcli/map-workspaces" "^1.0.2"
-    "@npmcli/metavuln-calculator" "^1.1.0"
-    "@npmcli/move-file" "^1.1.0"
-    "@npmcli/name-from-folder" "^1.0.1"
-    "@npmcli/node-gyp" "^1.0.1"
-    "@npmcli/run-script" "^1.8.2"
-    bin-links "^2.2.1"
-    cacache "^15.0.3"
-    common-ancestor-path "^1.0.1"
-    json-parse-even-better-errors "^2.3.1"
-    json-stringify-nice "^1.1.1"
-    mkdirp-infer-owner "^2.0.0"
-    npm-install-checks "^4.0.0"
-    npm-package-arg "^8.1.0"
-    npm-pick-manifest "^6.1.0"
-    npm-registry-fetch "^9.0.0"
-    pacote "^11.2.6"
-    parse-conflict-json "^1.1.1"
-    promise-all-reject-late "^1.0.0"
-    promise-call-limit "^1.0.1"
-    read-package-json-fast "^2.0.2"
-    readdir-scoped-modules "^1.1.0"
-    semver "^7.3.5"
-    tar "^6.1.0"
-    treeverse "^1.0.4"
-    walk-up-path "^1.0.0"
-
-"@npmcli/ci-detect@^1.0.0", "@npmcli/ci-detect@^1.2.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@npmcli/ci-detect/-/ci-detect-1.3.0.tgz#6c1d2c625fb6ef1b9dea85ad0a5afcbef85ef22a"
-  integrity sha512-oN3y7FAROHhrAt7Rr7PnTSwrHrZVRTS2ZbyxeQwSSYD0ifwM3YNgQqbaRmjcWoPyq77MjchusjJDspbzMmip1Q==
-
-"@npmcli/config@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@npmcli/config/-/config-2.0.0.tgz#878f0317373ab0aaefaa9dcb23793ba7df87932b"
-  integrity sha512-3OKVmO63FJRIrcsVI/njCC7QGKSfdCrIUUV+sP5ql8QdaPqXuaFCImqCYFDzGkcrP8PTOS3jbrRsU0Yzm04n3g==
-  dependencies:
-    ini "^2.0.0"
-    mkdirp-infer-owner "^2.0.0"
-    nopt "^5.0.0"
-    semver "^7.3.4"
-    walk-up-path "^1.0.0"
-
-"@npmcli/disparity-colors@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@npmcli/disparity-colors/-/disparity-colors-1.0.1.tgz#b23c864c9658f9f0318d5aa6d17986619989535c"
-  integrity sha512-kQ1aCTTU45mPXN+pdAaRxlxr3OunkyztjbbxDY/aIcPS5CnCUrx+1+NvA6pTcYR7wmLZe37+Mi5v3nfbwPxq3A==
-  dependencies:
-    ansi-styles "^4.3.0"
-
-"@npmcli/git@^2.0.1", "@npmcli/git@^2.0.6":
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/@npmcli/git/-/git-2.0.6.tgz#47b97e96b2eede3f38379262fa3bdfa6eae57bf2"
-  integrity sha512-a1MnTfeRPBaKbFY07fd+6HugY1WAkKJzdiJvlRub/9o5xz2F/JtPacZZapx5zRJUQFIzSL677vmTSxEcDMrDbg==
-  dependencies:
-    "@npmcli/promise-spawn" "^1.1.0"
-    lru-cache "^6.0.0"
-    mkdirp "^1.0.3"
-    npm-pick-manifest "^6.0.0"
-    promise-inflight "^1.0.1"
-    promise-retry "^2.0.1"
-    semver "^7.3.2"
-    unique-filename "^1.1.1"
-    which "^2.0.2"
-
-"@npmcli/installed-package-contents@^1.0.6", "@npmcli/installed-package-contents@^1.0.7":
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/@npmcli/installed-package-contents/-/installed-package-contents-1.0.7.tgz#ab7408c6147911b970a8abe261ce512232a3f4fa"
-  integrity sha512-9rufe0wnJusCQoLpV9ZPKIVP55itrM5BxOXs10DmdbRfgWtHy1LDyskbwRnBghuB0PrF7pNPOqREVtpz4HqzKw==
-  dependencies:
-    npm-bundled "^1.1.1"
-    npm-normalize-package-bin "^1.0.1"
-
-"@npmcli/map-workspaces@^1.0.2":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@npmcli/map-workspaces/-/map-workspaces-1.0.3.tgz#6072a0794762cf8f572e6080fa66d1bbefa991d5"
-  integrity sha512-SdlRlOoQw4WKD4vtb/n5gUkobEABYBEOo8fRE4L8CtBkyWDSvIrReTfKvQ/Jc/LQqDaaZ5iv1iMSQzKCUr1n1A==
-  dependencies:
-    "@npmcli/name-from-folder" "^1.0.1"
-    glob "^7.1.6"
-    minimatch "^3.0.4"
-    read-package-json-fast "^2.0.1"
-
-"@npmcli/metavuln-calculator@^1.1.0":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@npmcli/metavuln-calculator/-/metavuln-calculator-1.1.1.tgz#2f95ff3c6d88b366dd70de1c3f304267c631b458"
-  integrity sha512-9xe+ZZ1iGVaUovBVFI9h3qW+UuECUzhvZPxK9RaEA2mjU26o5D0JloGYWwLYvQELJNmBdQB6rrpuN8jni6LwzQ==
-  dependencies:
-    cacache "^15.0.5"
-    pacote "^11.1.11"
-    semver "^7.3.2"
-
-"@npmcli/move-file@^1.0.1", "@npmcli/move-file@^1.1.0":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@npmcli/move-file/-/move-file-1.1.2.tgz#1a82c3e372f7cae9253eb66d72543d6b8685c674"
-  integrity sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==
-  dependencies:
-    mkdirp "^1.0.4"
-    rimraf "^3.0.2"
-
-"@npmcli/name-from-folder@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@npmcli/name-from-folder/-/name-from-folder-1.0.1.tgz#77ecd0a4fcb772ba6fe927e2e2e155fbec2e6b1a"
-  integrity sha512-qq3oEfcLFwNfEYOQ8HLimRGKlD8WSeGEdtUa7hmzpR8Sa7haL1KVQrvgO6wqMjhWFFVjgtrh1gIxDz+P8sjUaA==
-
-"@npmcli/node-gyp@^1.0.1", "@npmcli/node-gyp@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@npmcli/node-gyp/-/node-gyp-1.0.2.tgz#3cdc1f30e9736dbc417373ed803b42b1a0a29ede"
-  integrity sha512-yrJUe6reVMpktcvagumoqD9r08fH1iRo01gn1u0zoCApa9lnZGEigVKUd2hzsCId4gdtkZZIVscLhNxMECKgRg==
-
-"@npmcli/promise-spawn@^1.1.0", "@npmcli/promise-spawn@^1.2.0", "@npmcli/promise-spawn@^1.3.2":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@npmcli/promise-spawn/-/promise-spawn-1.3.2.tgz#42d4e56a8e9274fba180dabc0aea6e38f29274f5"
-  integrity sha512-QyAGYo/Fbj4MXeGdJcFzZ+FkDkomfRBrPM+9QYJSg+PxgAUL+LU3FneQk37rKR2/zjqkCV1BLHccX98wRXG3Sg==
-  dependencies:
-    infer-owner "^1.0.4"
-
-"@npmcli/run-script@^1.8.2", "@npmcli/run-script@^1.8.3", "@npmcli/run-script@^1.8.4":
-  version "1.8.4"
-  resolved "https://registry.yarnpkg.com/@npmcli/run-script/-/run-script-1.8.4.tgz#03ced92503a6fe948cbc0975ce39210bc5e824d6"
-  integrity sha512-Yd9HXTtF1JGDXZw0+SOn+mWLYS0e7bHBHVC/2C8yqs4wUrs/k8rwBSinD7rfk+3WG/MFGRZKxjyoD34Pch2E/A==
-  dependencies:
-    "@npmcli/node-gyp" "^1.0.2"
-    "@npmcli/promise-spawn" "^1.3.2"
-    infer-owner "^1.0.4"
-    node-gyp "^7.1.0"
-    read-package-json-fast "^2.0.1"
-
-"@octokit/auth-token@^2.4.4":
-  version "2.4.5"
-  resolved "https://registry.yarnpkg.com/@octokit/auth-token/-/auth-token-2.4.5.tgz#568ccfb8cb46f36441fac094ce34f7a875b197f3"
-  integrity sha512-BpGYsPgJt05M7/L/5FoE1PiAbdxXFZkX/3kDYcsvd1v6UhlnE5e96dTDr0ezX/EFwciQxf3cNV0loipsURU+WA==
-  dependencies:
-    "@octokit/types" "^6.0.3"
-
-"@octokit/core@^3.2.3":
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/@octokit/core/-/core-3.3.2.tgz#128377d0e05d8b548b26fc6622570220b103bc69"
-  integrity sha512-Jx83n4tuX/z7QtxnPsAKxXPzH3vANtKmlCB3W3vt18JbkEaBYm+C8dgAlA1FNtqNk3L21pxsKNbWkUQAhiV7ng==
-  dependencies:
-    "@octokit/auth-token" "^2.4.4"
-    "@octokit/graphql" "^4.5.8"
-    "@octokit/request" "^5.4.12"
-    "@octokit/request-error" "^2.0.5"
-    "@octokit/types" "^6.0.3"
-    before-after-hook "^2.2.0"
-    universal-user-agent "^6.0.0"
-
-"@octokit/endpoint@^6.0.1":
-  version "6.0.11"
-  resolved "https://registry.yarnpkg.com/@octokit/endpoint/-/endpoint-6.0.11.tgz#082adc2aebca6dcefa1fb383f5efb3ed081949d1"
-  integrity sha512-fUIPpx+pZyoLW4GCs3yMnlj2LfoXTWDUVPTC4V3MUEKZm48W+XYpeWSZCv+vYF1ZABUm2CqnDVf1sFtIYrj7KQ==
-  dependencies:
-    "@octokit/types" "^6.0.3"
-    is-plain-object "^5.0.0"
-    universal-user-agent "^6.0.0"
-
-"@octokit/graphql@^4.5.8":
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/@octokit/graphql/-/graphql-4.6.1.tgz#f975486a46c94b7dbe58a0ca751935edc7e32cc9"
-  integrity sha512-2lYlvf4YTDgZCTXTW4+OX+9WTLFtEUc6hGm4qM1nlZjzxj+arizM4aHWzBVBCxY9glh7GIs0WEuiSgbVzv8cmA==
-  dependencies:
-    "@octokit/request" "^5.3.0"
-    "@octokit/types" "^6.0.3"
-    universal-user-agent "^6.0.0"
-
-"@octokit/openapi-types@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-6.0.0.tgz#7da8d7d5a72d3282c1a3ff9f951c8133a707480d"
-  integrity sha512-CnDdK7ivHkBtJYzWzZm7gEkanA7gKH6a09Eguz7flHw//GacPJLmkHA3f3N++MJmlxD1Fl+mB7B32EEpSCwztQ==
-
-"@octokit/plugin-paginate-rest@^2.6.2":
-  version "2.13.3"
-  resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.13.3.tgz#f0f1792230805108762d87906fb02d573b9e070a"
-  integrity sha512-46lptzM9lTeSmIBt/sVP/FLSTPGx6DCzAdSX3PfeJ3mTf4h9sGC26WpaQzMEq/Z44cOcmx8VsOhO+uEgE3cjYg==
-  dependencies:
-    "@octokit/types" "^6.11.0"
-
-"@octokit/plugin-request-log@^1.0.2":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@octokit/plugin-request-log/-/plugin-request-log-1.0.3.tgz#70a62be213e1edc04bb8897ee48c311482f9700d"
-  integrity sha512-4RFU4li238jMJAzLgAwkBAw+4Loile5haQMQr+uhFq27BmyJXcXSKvoQKqh0agsZEiUlW6iSv3FAgvmGkur7OQ==
-
-"@octokit/plugin-rest-endpoint-methods@5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.0.0.tgz#cf2cdeb24ea829c31688216a5b165010b61f9a98"
-  integrity sha512-Jc7CLNUueIshXT+HWt6T+M0sySPjF32mSFQAK7UfAg8qGeRI6OM1GSBxDLwbXjkqy2NVdnqCedJcP1nC785JYg==
-  dependencies:
-    "@octokit/types" "^6.13.0"
-    deprecation "^2.3.1"
-
-"@octokit/request-error@^2.0.0", "@octokit/request-error@^2.0.5":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@octokit/request-error/-/request-error-2.0.5.tgz#72cc91edc870281ad583a42619256b380c600143"
-  integrity sha512-T/2wcCFyM7SkXzNoyVNWjyVlUwBvW3igM3Btr/eKYiPmucXTtkxt2RBsf6gn3LTzaLSLTQtNmvg+dGsOxQrjZg==
-  dependencies:
-    "@octokit/types" "^6.0.3"
-    deprecation "^2.0.0"
-    once "^1.4.0"
-
-"@octokit/request@^5.3.0", "@octokit/request@^5.4.12":
-  version "5.4.14"
-  resolved "https://registry.yarnpkg.com/@octokit/request/-/request-5.4.14.tgz#ec5f96f78333bb2af390afa5ff66f114b063bc96"
-  integrity sha512-VkmtacOIQp9daSnBmDI92xNIeLuSRDOIuplp/CJomkvzt7M18NXgG044Cx/LFKLgjKt9T2tZR6AtJayba9GTSA==
-  dependencies:
-    "@octokit/endpoint" "^6.0.1"
-    "@octokit/request-error" "^2.0.0"
-    "@octokit/types" "^6.7.1"
-    deprecation "^2.0.0"
-    is-plain-object "^5.0.0"
-    node-fetch "^2.6.1"
-    once "^1.4.0"
-    universal-user-agent "^6.0.0"
-
-"@octokit/rest@^18.0.0":
-  version "18.5.2"
-  resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-18.5.2.tgz#0369e554b7076e3749005147be94c661c7a5a74b"
-  integrity sha512-Kz03XYfKS0yYdi61BkL9/aJ0pP2A/WK5vF/syhu9/kY30J8He3P68hv9GRpn8bULFx2K0A9MEErn4v3QEdbZcw==
-  dependencies:
-    "@octokit/core" "^3.2.3"
-    "@octokit/plugin-paginate-rest" "^2.6.2"
-    "@octokit/plugin-request-log" "^1.0.2"
-    "@octokit/plugin-rest-endpoint-methods" "5.0.0"
-
-"@octokit/types@^6.0.3", "@octokit/types@^6.11.0", "@octokit/types@^6.13.0", "@octokit/types@^6.7.1":
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-6.13.0.tgz#779e5b7566c8dde68f2f6273861dd2f0409480d0"
-  integrity sha512-W2J9qlVIU11jMwKHUp5/rbVUeErqelCsO5vW5PKNb7wAXQVUz87Rc+imjlEvpvbH8yUb+KHmv8NEjVZdsdpyxA==
-  dependencies:
-    "@octokit/openapi-types" "^6.0.0"
-
-"@polka/url@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@polka/url/-/url-0.5.0.tgz#b21510597fd601e5d7c95008b76bf0d254ebfd31"
-  integrity sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==
-
 "@rollup/plugin-commonjs@^16.0.0":
   version "16.0.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-16.0.0.tgz#169004d56cd0f0a1d0f35915d31a036b0efe281f"
@@ -306,7 +48,7 @@
   dependencies:
     "@rollup/pluginutils" "^3.0.8"
 
-"@rollup/plugin-node-resolve@^11.0.0":
+"@rollup/plugin-node-resolve@^11.2.1":
   version "11.2.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz#82aa59397a29cd4e13248b106e6a4a1880362a60"
   integrity sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==
@@ -327,107 +69,182 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@rollup/pluginutils@^4.1.0":
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.0.tgz#0dcc61c780e39257554feb7f77207dceca13c838"
-  integrity sha512-TrBhfJkFxA+ER+ew2U2/fHbebhLT/l/2pRk0hfj9KusXUuRXd2v0R58AfaZK9VXDQ4TogOSEmICVrQAA3zFnHQ==
+"@spectrum-css/actionbutton@^1.0.1":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.2.tgz#7753a94c64cebecfca6749ef20e37a5ea80c59be"
+  integrity sha512-laDWk7PCgy2I0AGsMjTmYKkiMVYVoF1B4tffJf4cIp66znTiqPHEbLDh5EDNU88JLTY2bWoCOY4cJxvXk5gERw==
+
+"@spectrum-css/actiongroup@^1.0.1":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-1.0.2.tgz#37f6593c1defdeda682b9e196bcd8cce38c574aa"
+  integrity sha512-YHKYruXsJteXlkCvfOoQ1cqc3tV7LbmMmbRpyp2vh0ah9CF5ImyGmBRYOOROtZx7VqfDJ5645rdwB2YfJcCBMw==
+
+"@spectrum-css/avatar@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/avatar/-/avatar-3.0.2.tgz#4f1826223eae330e64b6d3cc899e9bc2e98dac95"
+  integrity sha512-wEczvSqxttTWSiL3cOvXV/RmGRwSkw2w6+slcHhnf0kb7ovymMM+9oz8vvEpEsSeo5u598bc+7ktrKFpAd6soQ==
+
+"@spectrum-css/button@^3.0.1":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.2.tgz#387712641457d3045bcecf77e13854dd59e9c20e"
+  integrity sha512-sUJuYrrmIL0RCkQpTQ9B5AdoWlu4Y6JatrcOB/OOwdzLbQ9bHw1bHj/y0Ua67hEtLOTjODU+2e5K3UM3KGnMTA==
+
+"@spectrum-css/buttongroup@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/buttongroup/-/buttongroup-3.0.2.tgz#fd3387973ca3131609e32112de42a1c0400a48d8"
+  integrity sha512-Wu7B4GJ/SAeVHz9SUGAkeIH8pLaZh4t+w2ykSKOPQIRuK2jCBoudkEClVxviNVwqekccf5XLFXg9GpYF1a3Uaw==
+
+"@spectrum-css/checkbox@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.2.tgz#53ca2fba0d9faa1fead10e7206eb1f6cdcfd6ddd"
+  integrity sha512-hPbGcnm7kJvJS4jp/P/bdaZvbyR1eIE9mteuZqcBgdmyp9m/k6+mW5jmsbtqb3Y4mMPWvOJFfz/sIvWJP0F0Zg==
+
+"@spectrum-css/dialog@^3.0.1":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/dialog/-/dialog-3.0.2.tgz#ae4db17c9772d822c538474f66bf838cea02217f"
+  integrity sha512-9aToA1fO5kE3ednoTKGKmaS8+X6noFJ4PvwZD1FgAZIA842PgHNW6e6hPw+MngZvqKqNcZsiuiJeRCq7TRkd4g==
+
+"@spectrum-css/divider@^1.0.1":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/divider/-/divider-1.0.2.tgz#40a9d5fba56cbcc3dbad53408886d2d35159ce40"
+  integrity sha512-piNbNcJ4W3lsnhrhru3SBh1et6lfKKexGKSP3gRFFlbjTT1+/AZGeztqYvdBwE523b7A9xJFekl5Fc0VJ1Flow==
   dependencies:
-    estree-walker "^2.0.1"
-    picomatch "^2.2.2"
+    "@spectrum-css/vars" "^3.0.2"
 
-"@semantic-release/commit-analyzer@^8.0.0":
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/@semantic-release/commit-analyzer/-/commit-analyzer-8.0.1.tgz#5d2a37cd5a3312da0e3ac05b1ca348bf60b90bca"
-  integrity sha512-5bJma/oB7B4MtwUkZC2Bf7O1MHfi4gWe4mA+MIQ3lsEV0b422Bvl1z5HRpplDnMLHH3EXMoRdEng6Ds5wUqA3A==
-  dependencies:
-    conventional-changelog-angular "^5.0.0"
-    conventional-commits-filter "^2.0.0"
-    conventional-commits-parser "^3.0.7"
-    debug "^4.0.0"
-    import-from "^3.0.0"
-    lodash "^4.17.4"
-    micromatch "^4.0.2"
+"@spectrum-css/dropzone@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/dropzone/-/dropzone-3.0.2.tgz#34f137851054442b219fed7f32006b93fc5e0bcf"
+  integrity sha512-BuBBzm5re6lM0AWgd6V+mI5eEGnnmFEtcFiJBEn9jYNEQYgflFhvnERUt89jMX5WmspiecwI2JBWJFrtFsOzug==
 
-"@semantic-release/error@^2.2.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@semantic-release/error/-/error-2.2.0.tgz#ee9d5a09c9969eade1ec864776aeda5c5cddbbf0"
-  integrity sha512-9Tj/qn+y2j+sjCI3Jd+qseGtHjOAeg7dU2/lVcqIQ9TV3QDaDXDYXcoOHU+7o2Hwh8L8ymL4gfuO7KxDs3q2zg==
+"@spectrum-css/fieldgroup@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-3.0.2.tgz#1c1afd3c444d8650fefac275dc66a7a913933846"
+  integrity sha512-Vyw0kQJdLW18J6w4H+YAsoLntvkw5rXmW3CH5H3SDTXkBztxtHSSe3e106Nw5MoZxTfHlom6CxbYXYCTjQfqGw==
 
-"@semantic-release/github@^7.0.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@semantic-release/github/-/github-7.2.0.tgz#925f3efd91adabfc4bbe0de24b79fe1a8a38b4e2"
-  integrity sha512-tMRnWiiWb43whRHvbDGXq4DGEbKRi56glDpXDJZit4PIiwDPX7Kx3QzmwRtDOcG+8lcpGjpdPabYZ9NBxoI2mw==
-  dependencies:
-    "@octokit/rest" "^18.0.0"
-    "@semantic-release/error" "^2.2.0"
-    aggregate-error "^3.0.0"
-    bottleneck "^2.18.1"
-    debug "^4.0.0"
-    dir-glob "^3.0.0"
-    fs-extra "^9.0.0"
-    globby "^11.0.0"
-    http-proxy-agent "^4.0.0"
-    https-proxy-agent "^5.0.0"
-    issue-parser "^6.0.0"
-    lodash "^4.17.4"
-    mime "^2.4.3"
-    p-filter "^2.0.0"
-    p-retry "^4.0.0"
-    url-join "^4.0.0"
+"@spectrum-css/fieldlabel@^3.0.1":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-3.0.2.tgz#9c6d28e2c43f019cafa2bb75b54c8bc540669912"
+  integrity sha512-mQ1h3Uc6JXVa1nIgQK501GOgvlqqc/2VNSCJrE73I3MPeIt9kRv1ISAsDqUZnuot88BCWnnXfCkU4lSXY1RLog==
 
-"@semantic-release/npm@^7.0.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@semantic-release/npm/-/npm-7.1.0.tgz#27c56ad18bceb97a061f1fc7e54a85dc4c8016d6"
-  integrity sha512-zr9kTlF3/84QE9XH765TwvG0ljysSrxEGPNL1prxpWS9fHD7Pa+58L7pgLQwmw4i1QIkhh9cANvY9l7uldvh5w==
-  dependencies:
-    "@semantic-release/error" "^2.2.0"
-    aggregate-error "^3.0.0"
-    execa "^5.0.0"
-    fs-extra "^9.0.0"
-    lodash "^4.17.15"
-    nerf-dart "^1.0.0"
-    normalize-url "^5.0.0"
-    npm "^7.0.0"
-    rc "^1.2.8"
-    read-pkg "^5.0.0"
-    registry-auth-token "^4.0.0"
-    semver "^7.1.2"
-    tempy "^1.0.0"
+"@spectrum-css/icon@^3.0.1":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.2.tgz#327dcb95ab86368a00eb5a6d898c2c02e4ae04b3"
+  integrity sha512-BdHoO2ttrbsj1+IfHmSCGNS0oEf8i2UW3agfOVtSlYOD+iGykupWwy8ANLB6p4GvjlR7YjPRGzDRGgmDwVqR0Q==
 
-"@semantic-release/release-notes-generator@^9.0.0":
-  version "9.0.2"
-  resolved "https://registry.yarnpkg.com/@semantic-release/release-notes-generator/-/release-notes-generator-9.0.2.tgz#a00da9f984b6d42d16e037ecd529f58665cde938"
-  integrity sha512-xGFSidhGqB27uwgWCU6y0gbf4r/no5flOAkJyFFc4+bPf8S+LfAVm7xhhlK5VPXLt2Iu1RBH8F+IgMK2ah5YpA==
-  dependencies:
-    conventional-changelog-angular "^5.0.0"
-    conventional-changelog-writer "^4.0.0"
-    conventional-commits-filter "^2.0.0"
-    conventional-commits-parser "^3.0.0"
-    debug "^4.0.0"
-    get-stream "^5.0.0"
-    import-from "^3.0.0"
-    into-stream "^6.0.0"
-    lodash "^4.17.4"
-    read-pkg-up "^7.0.0"
+"@spectrum-css/illustratedmessage@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/illustratedmessage/-/illustratedmessage-3.0.2.tgz#6a480be98b027e050b086e7899e40d87adb0a8c0"
+  integrity sha512-dqnE8X27bGcO0HN8+dYx8O4o0dNNIAqeivOzDHhe2El+V4dTzMrNIerF6G0NLm3GjVf6XliwmitsZK+K6FmbtA==
 
-"@sveltejs/vite-plugin-svelte@^1.0.0-next.5":
-  version "1.0.0-next.5"
-  resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.5.tgz#8cf608f7a3c33dfa5b648397aae1ba90e6a4883f"
-  integrity sha512-RVjafsqziWwnQm8VEy2y0qNaugNDvRd8tTaCt9rjgQkqaS/BDiyDCluXxA28PRC+ddZjvwUeq9k+0EfbLVObfg==
-  dependencies:
-    "@rollup/pluginutils" "^4.1.0"
-    chalk "^4.1.0"
-    debug "^4.3.2"
-    hash-sum "^2.0.0"
-    require-relative "^0.8.7"
-    slash "^3.0.0"
-    source-map "^0.7.3"
-    svelte-hmr "^0.13.3"
+"@spectrum-css/inputgroup@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.2.tgz#f1b13603832cbd22394f3d898af13203961f8691"
+  integrity sha512-O0G3Lw9gxsh8gTLQWIAKkN1O8cWhjpEUl+oR1PguIKFni72uNr2ikU9piOwy/r0gJG2Q/TVs6hAshoAAkmsSzw==
 
-"@tootallnate/once@1":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
-  integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
+"@spectrum-css/label@^2.0.9":
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/label/-/label-2.0.10.tgz#2368651d7636a19385b5d300cdf6272db1916001"
+  integrity sha512-xCbtEiQkZIlLdWFikuw7ifDCC21DOC/KMgVrrVJHXFc4KRQe9LTZSqmGF3tovm+CSq1adE59mYoTbojVQ9YuEQ==
+
+"@spectrum-css/link@^3.1.1":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/link/-/link-3.1.2.tgz#b4af145b809ae74b3776ea14ea30b84b329a67ba"
+  integrity sha512-dODJ3fqsZtds2RNcozqUPR/aIqgjaWnFOpUxd8olwyDTMoFJjZ9Ts1WAHSEBM2NwUIr2nm9Hu5AgWH+6cmuowg==
+
+"@spectrum-css/menu@^3.0.1":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.2.tgz#1d133a433f71aeb4722ef98be00a11371276821d"
+  integrity sha512-r3Fom1+SB06iv7jxVebiR+rFgqS4qzoPSXiPt41MhdLznQ0L+9FWBid4eX4dLmPfBNsYdWjnK8Py+7uYCLmkAA==
+
+"@spectrum-css/modal@^3.0.1":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/modal/-/modal-3.0.2.tgz#58b6621cab65f90788d310374f40df1f7090473f"
+  integrity sha512-YnIivJhoaao7Otu+HV7sgebPyFbO6sd/oMvTN/Rb2wwgnaMnIIuIRdGandSrcgotN2uNgs+P0knG6mv/xA1/dg==
+
+"@spectrum-css/picker@^1.0.1":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-1.0.2.tgz#b49429ae3c89f9c5f2c0530787ce45392c9612ff"
+  integrity sha512-wfOtS6CdSba5GkN/i8WeCHpfROq2jW4MNWmRWc4tjfaBm23ASJYQhPsKINqWLE02Cr8E65kVoXy2EBpPY+w7pg==
+
+"@spectrum-css/popover@^3.0.1":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.2.tgz#b031b07ed4b927aa67d082a71ebed08bd7ab28b3"
+  integrity sha512-5YiZh4iD8Abw02o0bZNccU59nEYzAsP5c8GO1/J5c7/PwxUzcrAlmzGNPXdsqyz5sm7QMeFZcgp4lr44TEnV5A==
+
+"@spectrum-css/progressbar@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/progressbar/-/progressbar-1.0.2.tgz#b5a59432517f9ae6dad49d9504691bc5ac42b424"
+  integrity sha512-+jExeBLtVCqo3BqtFq5WCtZ028Dzk+oUnX6y4z6ZamKPqOyOELOtFnhYnyhyRndQOqYwKUTXx9zsaWA/lpJOHw==
+
+"@spectrum-css/progresscircle@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/progresscircle/-/progresscircle-1.0.2.tgz#258ea9170fb70f795edda03e38a61d93bef4487c"
+  integrity sha512-JLULpyzjIY95lzlWR1yE1gv4l1K6p+scQ+edmuZZUHBzwM3pUtkvHJmUlA9TYdResUYW6Uka60VRdY6lZ8gnFQ==
+
+"@spectrum-css/radio@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/radio/-/radio-3.0.2.tgz#9c1386894920bbed604e4e174fbbd45d9d762152"
+  integrity sha512-0TDdzC9omNXnpKHEXNuuGeXdNh4x8jvTKVUqMRLb7vY4hY94hAdt6X01NBqka+jzK35HxGzpDdPADAz62yZLPQ==
+
+"@spectrum-css/search@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/search/-/search-3.0.2.tgz#70e93e321032d40b399498b2324e3b70e050551e"
+  integrity sha512-3UbT8yZmNOwrZxq+CUmumE+26ZySZ8OoKNM6U20SLMPLgdx6MrRugVE88r3Bl0sJ0RZX/5bU8nausdiHeX+Jlw==
+
+"@spectrum-css/sidenav@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-3.0.2.tgz#9d70f408d588ee79c69857751010333671f32713"
+  integrity sha512-YpIdH/F0jEICYmoduGrnkTmxwJq1kfKxEp0wOs+ZkQOsvKMv1an7nyhsfOKCQqcGNfYzJ9mJAk7/u5+vsxHa8g==
+
+"@spectrum-css/switch@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/switch/-/switch-1.0.2.tgz#f0b4c69271964573e02b08e90998096e49e1de44"
+  integrity sha512-zqmHpgWPNg1gEwdUNFYV3CBX5JaeALfIqcJIxE0FLZqr9d1C4+oLE0ItIFzt1bwr4bFAOmkEpvtiY+amluzGxQ==
+
+"@spectrum-css/table@^3.0.1":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.2.tgz#c666743d569fef81ddc8810fac8cda53b315f8d7"
+  integrity sha512-nt/QNC7NmUank0wozd4FySEX1UIYXuvuOKDyN1II3sxfwFSpJfp/Df9KVMhrYs4EsmB4XMGcoxp8ND/CrvH3ow==
+
+"@spectrum-css/tabs@^3.0.1":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-3.0.2.tgz#822316672e7b0dfba66faa988e638ddae18c700e"
+  integrity sha512-4RNcmwf0wxLpB7M54H02owlj0mKE8neL1+lytQpxOOhlwTO5zdsD82zjvx9tIc8tRnRKuhCCCwTuBxHYstnBmw==
+
+"@spectrum-css/tags@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/tags/-/tags-3.0.2.tgz#5bf35fb79c97cd9344de485bd4626ad5b9f07757"
+  integrity sha512-HbvMk+QHvCDD1/ScvSErpKROcpAbXuMD4Hl/Gz/1A1lQ0fJ/CJeCq/MMsL7zjK1nlItU/ySu8r8KIuRF+6F8SQ==
+
+"@spectrum-css/textfield@^3.0.1":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.0.2.tgz#907f62d2dc82852dd6236a820be99e252b531631"
+  integrity sha512-nkFgAb0cP4jUodkUBErMNfyF78jJLtgL1Mrr9/rvGpGobo10IAbb8zZY4CkZ64o8XmMy/85+wZTKcx+KHatqpg==
+
+"@spectrum-css/toast@^3.0.1":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.2.tgz#8e27cce799b1b1d0054a88b135dddf7fbf1bdc78"
+  integrity sha512-sJp8DRsU2iSF67hlOQHFdRkbJHncspoOywHEsqcjh2KFl8gRY12rQL0ORG6J2THUt0LVBWSy48iwph9s4rkwsA==
+
+"@spectrum-css/treeview@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/treeview/-/treeview-3.0.2.tgz#d54d8f17290babb1c885f5d9355e225421beb0d2"
+  integrity sha512-foO7UBJv1JMFaKgDPVt8jBghZSVbqhXR8TaGaxHSnMubv7ygmKkc1AITrWC2STILCn84ju2vchOohMZfW6sYwg==
+
+"@spectrum-css/typography@^3.0.1":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-3.0.2.tgz#ea3ca0a60e18064527819d48c8c4364cab4fcd38"
+  integrity sha512-5ZOLmQe0edzsDMyhghUd4hBb5uxGsFrxzf+WasfcUw9klSfTsRZ09n1BsaaWbgrLjlMQ+EEHS46v5VNo0Ms2CA==
+
+"@spectrum-css/underlay@^2.0.9":
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-2.0.10.tgz#8b75b646605a311850f6620caa18d4996cd64ed7"
+  integrity sha512-PmsmkzeGD/rY4pp3ILXHt9w8BW7uaEqXe08hQRS7rGki7wqCpG4mE0/8N3yEcA3QxWQclmG9gdkg5uz6wMmYzA==
+
+"@spectrum-css/vars@^3.0.1", "@spectrum-css/vars@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.2.tgz#ea9062c3c98dfc6ba59e5df14a03025ad8969999"
+  integrity sha512-vzS9KqYXot4J3AEER/u618MXWAS+IoMvYMNrOoscKiLLKYQWenaueakUWulFonToPd/9vIpqtdbwxznqrK5qDw==
 
 "@types/estree@*":
   version "0.0.47"
@@ -439,40 +256,10 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
-"@types/fs-extra@^8.0.1":
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-8.1.1.tgz#1e49f22d09aa46e19b51c0b013cb63d0d923a068"
-  integrity sha512-TcUlBem321DFQzBNuz8p0CLLKp0VvF/XH9E4KHNmgwyp4E3AfgI5cjiIVZWlbfThBop2qxFIh4+LeY6hVWWZ2w==
-  dependencies:
-    "@types/node" "*"
-
-"@types/glob@^7.1.1":
-  version "7.1.3"
-  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183"
-  integrity sha512-SEYeGAIQIQX8NN6LDKprLjbrd5dARM5EXsd8GI/A5l0apYI1fGMWgPHSe4ZKL4eozlAyI+doUE9XbYS4xCkQ1w==
-  dependencies:
-    "@types/minimatch" "*"
-    "@types/node" "*"
-
-"@types/minimatch@*":
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.4.tgz#f0ec25dbf2f0e4b18647313ac031134ca5b24b21"
-  integrity sha512-1z8k4wzFnNjVK/tlxvrWuK5WMt6mydWWP7+zvH5eFep4oj+UkrfiJTRtjCeBXNpwaA/FYqqtb4/QS4ianFpIRA==
-
-"@types/minimist@^1.2.0":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.1.tgz#283f669ff76d7b8260df8ab7a4262cc83d988256"
-  integrity sha512-fZQQafSREFyuZcdWFAExYjBiCL7AUCdgsk80iO0q4yihYYdcIiH28CcuPTGFgLOCC8RlW49GSQxdHwZP+I7CNg==
-
 "@types/node@*":
-  version "14.14.37"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.37.tgz#a3dd8da4eb84a996c36e331df98d82abd76b516e"
-  integrity sha512-XYmBiy+ohOR4Lh5jE379fV2IU+6Jn4g5qASinhitfyO71b/sCo6MKsMLF5tc7Zf2CE8hViVQyYSobJNke8OvUw==
-
-"@types/normalize-package-data@^2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
-  integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
+  version "14.14.41"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.41.tgz#d0b939d94c1d7bd53d04824af45f1139b8c45615"
+  integrity sha512-dueRKfaJL4RTtSa7bWeTK1M+VH+Gns73oCgzvYfHZywRCoPSd8EkXBL0mZ9unPTveBn+D9phZBaxuzpwjWkW0g==
 
 "@types/parse-json@^4.0.0":
   version "4.0.0"
@@ -491,31 +278,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/retry@^0.12.0":
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
-  integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
-
-JSONStream@^1.0.4:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
-  integrity sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==
-  dependencies:
-    jsonparse "^1.2.0"
-    through ">=2.2.7 <3"
-
-abbrev@1, abbrev@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
-  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
-
-abstract-leveldown@~0.12.0, abstract-leveldown@~0.12.1:
-  version "0.12.4"
-  resolved "https://registry.yarnpkg.com/abstract-leveldown/-/abstract-leveldown-0.12.4.tgz#29e18e632e60e4e221d5810247852a63d7b2e410"
-  integrity sha1-KeGOYy5g5OIh1YECR4UqY9ey5BA=
-  dependencies:
-    xtend "~3.0.0"
-
 accepts@~1.3.7:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
@@ -529,72 +291,11 @@ acorn@^7.3.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-acorn@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.1.0.tgz#52311fd7037ae119cbb134309e901aa46295b3fe"
-  integrity sha512-LWCF/Wn0nfHOmJ9rzQApGnxnvgfROzGilS8936rqN/lfcYkY9MYZzdMqN+2NJ4SlTc+m5HiSa+kNfDtI64dwUA==
-
-agent-base@6:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
-  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
-  dependencies:
-    debug "4"
-
-agentkeepalive@^4.1.3:
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/agentkeepalive/-/agentkeepalive-4.1.4.tgz#d928028a4862cb11718e55227872e842a44c945b"
-  integrity sha512-+V/rGa3EuU74H6wR04plBb7Ks10FbtUQgRj/FQOG7uUIEuaINI+AiqJR1k6t3SVNs7o7ZjIdus6706qqzVq8jQ==
-  dependencies:
-    debug "^4.1.0"
-    depd "^1.1.2"
-    humanize-ms "^1.2.1"
-
-aggregate-error@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"
-  integrity sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==
-  dependencies:
-    clean-stack "^2.0.0"
-    indent-string "^4.0.0"
-
-ajv@^6.12.3:
-  version "6.12.6"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
-  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
-  dependencies:
-    fast-deep-equal "^3.1.1"
-    fast-json-stable-stringify "^2.0.0"
-    json-schema-traverse "^0.4.1"
-    uri-js "^4.2.2"
-
 alphanum-sort@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
   integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
 
-ansi-escapes@^4.3.1:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
-  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
-  dependencies:
-    type-fest "^0.21.3"
-
-ansi-regex@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
-  integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
-
-ansi-regex@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
-  integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
-
-ansi-regex@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
-  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
-
 ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -602,54 +303,21 @@ ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
-ansi-styles@^4.0.0, ansi-styles@^4.1.0, ansi-styles@^4.3.0:
+ansi-styles@^4.1.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
   integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
   dependencies:
     color-convert "^2.0.1"
 
-ansicolors@~0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/ansicolors/-/ansicolors-0.3.2.tgz#665597de86a9ffe3aa9bfbe6cae5c6ea426b4979"
-  integrity sha1-ZlWX3oap/+Oqm/vmyuXG6kJrSXk=
-
-ansistyles@~0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/ansistyles/-/ansistyles-0.1.3.tgz#5de60415bda071bb37127854c864f41b23254539"
-  integrity sha1-XeYEFb2gcbs3EnhUyGT0GyMlRTk=
-
 anymatch@~3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
-  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
   dependencies:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-aproba@^1.0.3:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
-  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
-
-aproba@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/aproba/-/aproba-2.0.0.tgz#52520b8ae5b569215b354efc0caa3fe1e45a8adc"
-  integrity sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==
-
-archy@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/archy/-/archy-1.0.0.tgz#f9c8c13757cc1dd7bc379ac77b2c62a5c2868c40"
-  integrity sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=
-
-are-we-there-yet@~1.1.2:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
-  integrity sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==
-  dependencies:
-    delegates "^1.0.0"
-    readable-stream "^2.0.6"
-
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -657,156 +325,31 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
-argparse@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
-  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
-
-argv-formatter@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/argv-formatter/-/argv-formatter-1.0.0.tgz#a0ca0cbc29a5b73e836eebe1cbf6c5e0e4eb82f9"
-  integrity sha1-oMoMvCmltz6Dbuvhy/bF4OTrgvk=
-
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
   integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
 
-array-ify@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-ify/-/array-ify-1.0.0.tgz#9e528762b4a9066ad163a6962a364418e9626ece"
-  integrity sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4=
-
-array-union@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
-  integrity sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=
-  dependencies:
-    array-uniq "^1.0.1"
-
-array-union@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
-  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
-
-array-uniq@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
-  integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=
-
-arrify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
-  integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
-
-asap@^2.0.0:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
-  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
-
-asn1.js@^5.2.0:
-  version "5.4.1"
-  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
-  integrity sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==
-  dependencies:
-    bn.js "^4.0.0"
-    inherits "^2.0.1"
-    minimalistic-assert "^1.0.0"
-    safer-buffer "^2.1.0"
-
-asn1@~0.2.3:
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
-  integrity sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==
-  dependencies:
-    safer-buffer "~2.1.0"
-
-assert-plus@1.0.0, assert-plus@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
-  integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
-
 async-limiter@~1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
   integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
 
-asynckit@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
-  integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
-
-at-least-node@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
-  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
-
-aws-sign2@~0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
-  integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
-
-aws4@^1.8.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
-  integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
-
 balanced-match@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
-  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
-
-bcrypt-pbkdf@^1.0.0:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
-  integrity sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=
-  dependencies:
-    tweetnacl "^0.14.3"
-
-before-after-hook@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.0.tgz#09c40d92e936c64777aa385c4e9b904f8147eaf0"
-  integrity sha512-jH6rKQIfroBbhEXVmI7XmXe3ix5S/PgJqpzdDPnR8JGLHWNYLsYZ6tK5iWOF/Ra3oqEX0NobXGlzbiylIzVphQ==
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
   integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
 
-bin-links@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/bin-links/-/bin-links-2.2.1.tgz#347d9dbb48f7d60e6c11fe68b77a424bee14d61b"
-  integrity sha512-wFzVTqavpgCCYAh8SVBdnZdiQMxTkGR+T3b14CNpBXIBe2neJWaMGAZ55XWWHELJJ89dscuq0VCBqcVaIOgCMg==
-  dependencies:
-    cmd-shim "^4.0.1"
-    mkdirp "^1.0.3"
-    npm-normalize-package-bin "^1.0.0"
-    read-cmd-shim "^2.0.0"
-    rimraf "^3.0.0"
-    write-file-atomic "^3.0.3"
-
-binary-extensions@^2.0.0, binary-extensions@^2.2.0:
+binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
-bl@~0.8.1:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-0.8.2.tgz#c9b6bca08d1bc2ea00fc8afb4f1a5fd1e1c66e4e"
-  integrity sha1-yba8oI0bwuoA/Ir7Txpf0eHGbk4=
-  dependencies:
-    readable-stream "~1.0.26"
-
-bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
-  version "4.12.0"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
-  integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
-
-bn.js@^5.0.0, bn.js@^5.1.1:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.0.tgz#358860674396c6997771a9d051fcc1b57d4ae002"
-  integrity sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==
-
 body-parser@1.19.0:
   version "1.19.0"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
@@ -828,11 +371,6 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bottleneck@^2.18.1:
-  version "2.19.5"
-  resolved "https://registry.yarnpkg.com/bottleneck/-/bottleneck-2.19.5.tgz#5df0b90f59fd47656ebe63c78a98419205cadd91"
-  integrity sha512-VHiNCbI1lKdl44tGrhNfU3lup0Tj/ZBMJB5/2ZbNXRCPuRCO7ed2mgcK4r17y+KB2EfuYuRaVlwNbAeaWGSpbw==
-
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -841,150 +379,39 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-braces@^3.0.1, braces@~3.0.2:
+braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
   dependencies:
     fill-range "^7.0.1"
 
-brorand@^1.0.1, brorand@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
-  integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
-
-browserify-aes@^1.0.0, browserify-aes@^1.0.4:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
-  integrity sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==
-  dependencies:
-    buffer-xor "^1.0.3"
-    cipher-base "^1.0.0"
-    create-hash "^1.1.0"
-    evp_bytestokey "^1.0.3"
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-browserify-cipher@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.1.tgz#8d6474c1b870bfdabcd3bcfcc1934a10e94f15f0"
-  integrity sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==
-  dependencies:
-    browserify-aes "^1.0.4"
-    browserify-des "^1.0.0"
-    evp_bytestokey "^1.0.0"
-
-browserify-des@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.2.tgz#3af4f1f59839403572f1c66204375f7a7f703e9c"
-  integrity sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==
-  dependencies:
-    cipher-base "^1.0.1"
-    des.js "^1.0.0"
-    inherits "^2.0.1"
-    safe-buffer "^5.1.2"
-
-browserify-fs@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/browserify-fs/-/browserify-fs-1.0.0.tgz#f075aa8a729d4d1716d066620e386fcc1311a96f"
-  integrity sha1-8HWqinKdTRcW0GZiDjhvzBMRqW8=
-  dependencies:
-    level-filesystem "^1.0.1"
-    level-js "^2.1.3"
-    levelup "^0.18.2"
-
-browserify-rsa@^4.0.0, browserify-rsa@^4.0.1:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.1.0.tgz#b2fd06b5b75ae297f7ce2dc651f918f5be158c8d"
-  integrity sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==
-  dependencies:
-    bn.js "^5.0.0"
-    randombytes "^2.0.1"
-
-browserify-sign@^4.0.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.1.tgz#eaf4add46dd54be3bb3b36c0cf15abbeba7956c3"
-  integrity sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==
-  dependencies:
-    bn.js "^5.1.1"
-    browserify-rsa "^4.0.1"
-    create-hash "^1.2.0"
-    create-hmac "^1.1.7"
-    elliptic "^6.5.3"
-    inherits "^2.0.4"
-    parse-asn1 "^5.1.5"
-    readable-stream "^3.6.0"
-    safe-buffer "^5.2.0"
-
 browserslist@^4.0.0:
-  version "4.16.3"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.3.tgz#340aa46940d7db878748567c5dea24a48ddf3717"
-  integrity sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw==
+  version "4.16.4"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.4.tgz#7ebf913487f40caf4637b892b268069951c35d58"
+  integrity sha512-d7rCxYV8I9kj41RH8UKYnvDYCRENUlHRgyXy/Rhr/1BaeLGfiCptEdFE8MIrvGfWbBFNjVYx76SQWvNX1j+/cQ==
   dependencies:
-    caniuse-lite "^1.0.30001181"
-    colorette "^1.2.1"
-    electron-to-chromium "^1.3.649"
+    caniuse-lite "^1.0.30001208"
+    colorette "^1.2.2"
+    electron-to-chromium "^1.3.712"
     escalade "^3.1.1"
-    node-releases "^1.1.70"
-
-buffer-es6@^4.9.2:
-  version "4.9.3"
-  resolved "https://registry.yarnpkg.com/buffer-es6/-/buffer-es6-4.9.3.tgz#f26347b82df76fd37e18bcb5288c4970cfd5c404"
-  integrity sha1-8mNHuC33b9N+GLy1KIxJcM/VxAQ=
+    node-releases "^1.1.71"
 
 buffer-from@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
   integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
 
-buffer-xor@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
-  integrity sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=
-
 builtin-modules@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.2.0.tgz#45d5db99e7ee5e6bc4f362e008bf917ab5049887"
   integrity sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==
 
-builtins@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"
-  integrity sha1-y5T662HIaWRR2zZTThQi+U8K7og=
-
-byte-size@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/byte-size/-/byte-size-7.0.1.tgz#b1daf3386de7ab9d706b941a748dbfc71130dee3"
-  integrity sha512-crQdqyCwhokxwV1UyDzLZanhkugAgft7vt0qbbdt60C6Zf3CAiGmtUCylbtYwrU6loOUw3euGrNtW1J651ot1A==
-
 bytes@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
   integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
 
-cacache@^15.0.3, cacache@^15.0.5, cacache@^15.0.6:
-  version "15.0.6"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-15.0.6.tgz#65a8c580fda15b59150fb76bf3f3a8e45d583099"
-  integrity sha512-g1WYDMct/jzW+JdWEyjaX2zoBkZ6ZT9VpOyp2I/VMtDsNLffNat3kqPFfi1eDRSK9/SuKGyORDHcQMcPF8sQ/w==
-  dependencies:
-    "@npmcli/move-file" "^1.0.1"
-    chownr "^2.0.0"
-    fs-minipass "^2.0.0"
-    glob "^7.1.4"
-    infer-owner "^1.0.4"
-    lru-cache "^6.0.0"
-    minipass "^3.1.1"
-    minipass-collect "^1.0.2"
-    minipass-flush "^1.0.5"
-    minipass-pipeline "^1.2.2"
-    mkdirp "^1.0.3"
-    p-map "^4.0.0"
-    promise-inflight "^1.0.1"
-    rimraf "^3.0.2"
-    ssri "^8.0.1"
-    tar "^6.0.2"
-    unique-filename "^1.1.1"
-
 call-bind@^1.0.0, call-bind@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
@@ -1017,20 +444,6 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-camelcase-keys@^6.2.2:
-  version "6.2.2"
-  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-6.2.2.tgz#5e755d6ba51aa223ec7d3d52f25778210f9dc3c0"
-  integrity sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==
-  dependencies:
-    camelcase "^5.3.1"
-    map-obj "^4.0.0"
-    quick-lru "^4.0.1"
-
-camelcase@^5.3.1:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
-  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
-
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -1041,25 +454,12 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001181:
-  version "1.0.30001205"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001205.tgz#d79bf6a6fb13196b4bb46e5143a22ca0242e0ef8"
-  integrity sha512-TL1GrS5V6LElbitPazidkBMD9sa448bQDDLrumDqaggmKFcuU2JW1wTOHJPukAcOMtEmLcmDJEzfRrf+GjM0Og==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001208:
+  version "1.0.30001209"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001209.tgz#1bb4be0bd118e98e21cfb7ef617b1ef2164622f4"
+  integrity sha512-2Ktt4OeRM7EM/JaOZjuLzPYAIqmbwQMNnYbgooT+icoRGrKOyAxA1xhlnotBD1KArRSPsuJp3TdYcZYrL7qNxA==
 
-cardinal@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/cardinal/-/cardinal-2.1.1.tgz#7cc1055d822d212954d07b085dea251cc7bc5505"
-  integrity sha1-fMEFXYItISlU0HsIXeolHMe8VQU=
-  dependencies:
-    ansicolors "~0.3.2"
-    redeyed "~2.1.0"
-
-caseless@~0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
-  integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
-
-chalk@^2.0.0, chalk@^2.3.2, chalk@^2.4.1, chalk@^2.4.2:
+chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -1068,7 +468,7 @@ chalk@^2.0.0, chalk@^2.3.2, chalk@^2.4.1, chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^4.0.0, chalk@^4.1.0:
+chalk@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
   integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
@@ -1076,7 +476,7 @@ chalk@^4.0.0, chalk@^4.1.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chokidar@^3.0.0, chokidar@^3.5.1:
+chokidar@^3.0.0:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
   integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
@@ -1091,96 +491,6 @@ chokidar@^3.0.0, chokidar@^3.5.1:
   optionalDependencies:
     fsevents "~2.3.1"
 
-chownr@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
-  integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
-
-cidr-regex@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/cidr-regex/-/cidr-regex-3.1.1.tgz#ba1972c57c66f61875f18fd7dd487469770b571d"
-  integrity sha512-RBqYd32aDwbCMFJRL6wHOlDNYJsPNTt8vC82ErHF5vKt8QQzxm1FrkW8s/R5pVrXMf17sba09Uoy91PKiddAsw==
-  dependencies:
-    ip-regex "^4.1.0"
-
-cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
-  integrity sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==
-  dependencies:
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-clean-stack@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
-  integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
-
-cli-columns@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/cli-columns/-/cli-columns-3.1.2.tgz#6732d972979efc2ae444a1f08e08fa139c96a18e"
-  integrity sha1-ZzLZcpee/CrkRKHwjgj6E5yWoY4=
-  dependencies:
-    string-width "^2.0.0"
-    strip-ansi "^3.0.1"
-
-cli-table3@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.6.0.tgz#b7b1bc65ca8e7b5cef9124e13dc2b21e2ce4faee"
-  integrity sha512-gnB85c3MGC7Nm9I/FkiasNBOKjOiO1RNuXXarQms37q4QMpWdlbBgD/VnOStA2faG1dpXMv31RFApjX1/QdgWQ==
-  dependencies:
-    object-assign "^4.1.0"
-    string-width "^4.2.0"
-  optionalDependencies:
-    colors "^1.1.2"
-
-cli-table@^0.3.1:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/cli-table/-/cli-table-0.3.6.tgz#e9d6aa859c7fe636981fd3787378c2a20bce92fc"
-  integrity sha512-ZkNZbnZjKERTY5NwC2SeMeLeifSPq/pubeRoTpdr3WchLlnZg6hEgvHkK5zL7KNFdd9PmHN8lxrENUwI3cE8vQ==
-  dependencies:
-    colors "1.0.3"
-
-clipboard@^2.0.0, clipboard@^2.0.6:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.8.tgz#ffc6c103dd2967a83005f3f61976aa4655a4cdba"
-  integrity sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==
-  dependencies:
-    good-listener "^1.2.2"
-    select "^1.1.2"
-    tiny-emitter "^2.0.0"
-
-cliui@^7.0.2:
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
-  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
-  dependencies:
-    string-width "^4.2.0"
-    strip-ansi "^6.0.0"
-    wrap-ansi "^7.0.0"
-
-clone@^1.0.2:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
-  integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
-
-clone@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
-  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
-
-clone@~0.1.9:
-  version "0.1.19"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-0.1.19.tgz#613fb68639b26a494ac53253e15b1a6bd88ada85"
-  integrity sha1-YT+2hjmyaklKxTJT4Vsaa9iK2oU=
-
-cmd-shim@^4.0.1:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-4.1.0.tgz#b3a904a6743e9fede4148c6f3800bf2a08135bdd"
-  integrity sha512-lb9L7EM4I/ZRVuljLPEtUJOP+xiQVknZ4ZMpMgEp4JzNldPb27HU03hi6K1/6CoIuit/Zm/LQXySErFeXxDprw==
-  dependencies:
-    mkdirp-infer-owner "^2.0.0"
-
 coa@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
@@ -1190,11 +500,6 @@ coa@^2.0.2:
     chalk "^2.4.1"
     q "^1.1.2"
 
-code-point-at@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
-  integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
-
 color-convert@^1.9.0, color-convert@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -1209,11 +514,6 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-color-js@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/color-js/-/color-js-1.0.5.tgz#698cb41fb51d7fd745b16f9e0c939933a8c7abea"
-  integrity sha512-KgOTVz7fupb3lOXu4lixP6BR2CdMaTtCnGmLfHZWhq8NU3MABd6U9KjWtJVuYChGS/gIaoA8LakKKQfWhQgwYQ==
-
 color-name@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
@@ -1240,69 +540,26 @@ color@^3.0.0:
     color-convert "^1.9.1"
     color-string "^1.5.4"
 
-colorette@^1.1.0, colorette@^1.2.1, colorette@^1.2.2:
+colorette@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
   integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
 
-colors@1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
-  integrity sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=
-
-colors@^1.1.2:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
-  integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
-
-columnify@~1.5.4:
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/columnify/-/columnify-1.5.4.tgz#4737ddf1c7b69a8a7c340570782e947eec8e78bb"
-  integrity sha1-Rzfd8ce2mop8NAVweC6UfuyOeLs=
-  dependencies:
-    strip-ansi "^3.0.0"
-    wcwidth "^1.0.0"
-
-combined-stream@^1.0.6, combined-stream@~1.0.6:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
-  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
-  dependencies:
-    delayed-stream "~1.0.0"
-
-common-ancestor-path@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/common-ancestor-path/-/common-ancestor-path-1.0.1.tgz#4f7d2d1394d91b7abdf51871c62f71eadb0182a7"
-  integrity sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==
+commander@^2.20.0:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
   integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
 
-compare-func@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/compare-func/-/compare-func-2.0.0.tgz#fb65e75edbddfd2e568554e8b5b05fff7a51fcb3"
-  integrity sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==
-  dependencies:
-    array-ify "^1.0.0"
-    dot-prop "^5.1.0"
-
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
-concat-stream@^1.4.4:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
-  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
-  dependencies:
-    buffer-from "^1.0.0"
-    inherits "^2.0.3"
-    readable-stream "^2.2.2"
-    typedarray "^0.0.6"
-
 concat-with-sourcemaps@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz#d4ea93f05ae25790951b99e7b3b09e3908a4082e"
@@ -1310,16 +567,6 @@ concat-with-sourcemaps@^1.1.0:
   dependencies:
     source-map "^0.6.1"
 
-console-clear@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/console-clear/-/console-clear-1.1.1.tgz#995e20cbfbf14dd792b672cde387bd128d674bf7"
-  integrity sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==
-
-console-control-strings@^1.0.0, console-control-strings@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
-  integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
-
 content-disposition@0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
@@ -1332,51 +579,6 @@ content-type@~1.0.4:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
-conventional-changelog-angular@^5.0.0:
-  version "5.0.12"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-5.0.12.tgz#c979b8b921cbfe26402eb3da5bbfda02d865a2b9"
-  integrity sha512-5GLsbnkR/7A89RyHLvvoExbiGbd9xKdKqDTrArnPbOqBqG/2wIosu0fHwpeIRI8Tl94MhVNBXcLJZl92ZQ5USw==
-  dependencies:
-    compare-func "^2.0.0"
-    q "^1.5.1"
-
-conventional-changelog-writer@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-4.1.0.tgz#1ca7880b75aa28695ad33312a1f2366f4b12659f"
-  integrity sha512-WwKcUp7WyXYGQmkLsX4QmU42AZ1lqlvRW9mqoyiQzdD+rJWbTepdWoKJuwXTS+yq79XKnQNa93/roViPQrAQgw==
-  dependencies:
-    compare-func "^2.0.0"
-    conventional-commits-filter "^2.0.7"
-    dateformat "^3.0.0"
-    handlebars "^4.7.6"
-    json-stringify-safe "^5.0.1"
-    lodash "^4.17.15"
-    meow "^8.0.0"
-    semver "^6.0.0"
-    split "^1.0.0"
-    through2 "^4.0.0"
-
-conventional-commits-filter@^2.0.0, conventional-commits-filter@^2.0.7:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-2.0.7.tgz#f8d9b4f182fce00c9af7139da49365b136c8a0b3"
-  integrity sha512-ASS9SamOP4TbCClsRHxIHXRfcGCnIoQqkvAzCSbZzTFLfcTqJVugB0agRgsEELsqaeWgsXv513eS116wnlSSPA==
-  dependencies:
-    lodash.ismatch "^4.4.0"
-    modify-values "^1.0.0"
-
-conventional-commits-parser@^3.0.0, conventional-commits-parser@^3.0.7:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-3.2.1.tgz#ba44f0b3b6588da2ee9fd8da508ebff50d116ce2"
-  integrity sha512-OG9kQtmMZBJD/32NEw5IhN5+HnBqVjy03eC+I71I0oQRFA5rOgA4OtPOYG7mz1GkCfCNxn3gKIX8EiHJYuf1cA==
-  dependencies:
-    JSONStream "^1.0.4"
-    is-text-path "^1.0.1"
-    lodash "^4.17.15"
-    meow "^8.0.0"
-    split2 "^3.0.0"
-    through2 "^4.0.0"
-    trim-off-newlines "^1.0.0"
-
 convert-source-map@^1.5.1:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
@@ -1394,19 +596,6 @@ cookie@0.4.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
   integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
 
-core-util-is@1.0.2, core-util-is@~1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
-  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
-
-cors@^2.8.5:
-  version "2.8.5"
-  resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
-  integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==
-  dependencies:
-    object-assign "^4"
-    vary "^1"
-
 cosmiconfig@^5.0.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
@@ -1428,37 +617,6 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-create-ecdh@^4.0.0:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
-  integrity sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==
-  dependencies:
-    bn.js "^4.1.0"
-    elliptic "^6.5.3"
-
-create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
-  integrity sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==
-  dependencies:
-    cipher-base "^1.0.1"
-    inherits "^2.0.1"
-    md5.js "^1.3.4"
-    ripemd160 "^2.0.1"
-    sha.js "^2.4.0"
-
-create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.7.tgz#69170c78b3ab957147b2b8b04572e47ead2243ff"
-  integrity sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==
-  dependencies:
-    cipher-base "^1.0.3"
-    create-hash "^1.1.0"
-    inherits "^2.0.1"
-    ripemd160 "^2.0.0"
-    safe-buffer "^5.0.1"
-    sha.js "^2.4.8"
-
 cross-env@^7.0.2:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
@@ -1466,7 +624,7 @@ cross-env@^7.0.2:
   dependencies:
     cross-spawn "^7.0.1"
 
-cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.3:
+cross-spawn@^7.0.1:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -1475,28 +633,6 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-crypto-browserify@^3.11.0:
-  version "3.12.0"
-  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
-  integrity sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==
-  dependencies:
-    browserify-cipher "^1.0.0"
-    browserify-sign "^4.0.0"
-    create-ecdh "^4.0.0"
-    create-hash "^1.1.0"
-    create-hmac "^1.1.0"
-    diffie-hellman "^5.0.0"
-    inherits "^2.0.1"
-    pbkdf2 "^3.0.3"
-    public-encrypt "^4.0.0"
-    randombytes "^2.0.0"
-    randomfill "^1.0.3"
-
-crypto-random-string@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
-  integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
-
 css-color-names@0.0.4, css-color-names@^0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -1534,9 +670,9 @@ css-tree@1.0.0-alpha.37:
     source-map "^0.6.1"
 
 css-tree@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.2.tgz#9ae393b5dafd7dae8a622475caec78d3d8fbd7b5"
-  integrity sha512-wCoWush5Aeo48GLhfHPbmvZs59Z+M7k5+B1xDnXbdWNcEF423DoFdqSWE0PM5aNk5nI5cp1q7ms36zGApY/sKQ==
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
   dependencies:
     mdn-data "2.0.14"
     source-map "^0.6.1"
@@ -1551,10 +687,10 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-cssnano-preset-default@^4.0.7:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76"
-  integrity sha512-x0YHHx2h6p0fCl1zY9L9roD7rnlltugGu7zXSKQx6k2rYw0Hi3IqxcoAGF7u9Q5w1nt7vK0ulxV8Lo+EvllGsA==
+cssnano-preset-default@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.8.tgz#920622b1fc1e95a34e8838203f1397a504f2d3ff"
+  integrity sha512-LdAyHuq+VRyeVREFmuxUZR1TXjQm8QQU/ktoo/x7bz+SdOge1YKc5eMN6pRW7YWBmyq59CqYba1dJ5cUukEjLQ==
   dependencies:
     css-declaration-sorter "^4.0.1"
     cssnano-util-raw-cache "^4.0.1"
@@ -1584,7 +720,7 @@ cssnano-preset-default@^4.0.7:
     postcss-ordered-values "^4.1.2"
     postcss-reduce-initial "^4.0.3"
     postcss-reduce-transforms "^4.0.2"
-    postcss-svgo "^4.0.2"
+    postcss-svgo "^4.0.3"
     postcss-unique-selectors "^4.0.1"
 
 cssnano-util-get-arguments@^4.0.0:
@@ -1610,12 +746,12 @@ cssnano-util-same-parent@^4.0.0:
   integrity sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==
 
 cssnano@^4.1.10:
-  version "4.1.10"
-  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.10.tgz#0ac41f0b13d13d465487e111b778d42da631b8b2"
-  integrity sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.11.tgz#c7b5f5b81da269cb1fd982cb960c1200910c9a99"
+  integrity sha512-6gZm2htn7xIPJOHY824ERgj8cNPgPxyCSnkXc4v7YvNW+TdVfzgngHcEhy/8D11kUWRUMbke+tC+AUcUsnMz2g==
   dependencies:
     cosmiconfig "^5.0.0"
-    cssnano-preset-default "^4.0.7"
+    cssnano-preset-default "^4.0.8"
     is-resolvable "^1.0.0"
     postcss "^7.0.0"
 
@@ -1626,17 +762,10 @@ csso@^4.0.2:
   dependencies:
     css-tree "^1.1.2"
 
-dashdash@^1.12.0:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
-  integrity sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=
-  dependencies:
-    assert-plus "^1.0.0"
-
-dateformat@^3.0.0:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
-  integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
+dayjs@^1.10.4:
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
+  integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
 
 debug@2.6.9:
   version "2.6.9"
@@ -1645,13 +774,6 @@ debug@2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.0.0, debug@^4.1.0:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
-  integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
-  dependencies:
-    ms "2.1.2"
-
 debug@^3.0.1:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
@@ -1659,72 +781,11 @@ debug@^3.0.1:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.3.2:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
-  integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
-  dependencies:
-    ms "2.1.2"
-
-debuglog@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
-  integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=
-
-decamelize-keys@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
-  integrity sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=
-  dependencies:
-    decamelize "^1.1.0"
-    map-obj "^1.0.0"
-
-decamelize@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
-  integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
-
-dedent@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
-  integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
-
-deep-equal@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
-  integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
-  dependencies:
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.1"
-    is-regex "^1.0.4"
-    object-is "^1.0.1"
-    object-keys "^1.1.1"
-    regexp.prototype.flags "^1.2.0"
-
-deep-extend@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
-  integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
-
 deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
 
-defaults@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
-  integrity sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=
-  dependencies:
-    clone "^1.0.2"
-
-deferred-leveldown@~0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/deferred-leveldown/-/deferred-leveldown-0.2.0.tgz#2cef1f111e1c57870d8bbb8af2650e587cd2f5b4"
-  integrity sha1-LO8fER4cV4cNi7uK8mUOWHzS9bQ=
-  dependencies:
-    abstract-leveldown "~0.12.1"
-
 define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -1732,100 +793,16 @@ define-properties@^1.1.3:
   dependencies:
     object-keys "^1.0.12"
 
-del@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/del/-/del-4.1.1.tgz#9e8f117222ea44a31ff3a156c049b99052a9f0b4"
-  integrity sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==
-  dependencies:
-    "@types/glob" "^7.1.1"
-    globby "^6.1.0"
-    is-path-cwd "^2.0.0"
-    is-path-in-cwd "^2.0.0"
-    p-map "^2.0.0"
-    pify "^4.0.1"
-    rimraf "^2.6.3"
-
-del@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/del/-/del-6.0.0.tgz#0b40d0332cea743f1614f818be4feb717714c952"
-  integrity sha512-1shh9DQ23L16oXSZKB2JxpL7iMy2E0S9d517ptA1P8iw0alkPtQcrKH7ru31rYtKwF499HkTu+DRzq3TCKDFRQ==
-  dependencies:
-    globby "^11.0.1"
-    graceful-fs "^4.2.4"
-    is-glob "^4.0.1"
-    is-path-cwd "^2.2.0"
-    is-path-inside "^3.0.2"
-    p-map "^4.0.0"
-    rimraf "^3.0.2"
-    slash "^3.0.0"
-
-delayed-stream@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
-  integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
-
-delegate@^3.1.2:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
-  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
-
-delegates@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
-  integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
-
-depd@^1.1.2, depd@~1.1.2:
+depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
-deprecation@^2.0.0, deprecation@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
-  integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
-
-des.js@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
-  integrity sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==
-  dependencies:
-    inherits "^2.0.1"
-    minimalistic-assert "^1.0.0"
-
 destroy@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
   integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
 
-dezalgo@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/dezalgo/-/dezalgo-1.0.3.tgz#7f742de066fc748bc8db820569dddce49bf0d456"
-  integrity sha1-f3Qt4Gb8dIvI24IFad3c5Jvw1FY=
-  dependencies:
-    asap "^2.0.0"
-    wrappy "1"
-
-diff@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-5.0.0.tgz#7ed6ad76d859d030787ec35855f5b1daf31d852b"
-  integrity sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w==
-
-diffie-hellman@^5.0.0:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
-  integrity sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==
-  dependencies:
-    bn.js "^4.1.0"
-    miller-rabin "^4.0.0"
-    randombytes "^2.0.0"
-
-dir-glob@^3.0.0, dir-glob@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
-  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
-  dependencies:
-    path-type "^4.0.0"
-
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -1840,14 +817,9 @@ domelementtype@1:
   integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
 
 domelementtype@^2.0.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.1.0.tgz#a851c080a6d1c3d94344aed151d99f669edf585e"
-  integrity sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w==
-
-domino@^2.1.6:
-  version "2.1.6"
-  resolved "https://registry.yarnpkg.com/domino/-/domino-2.1.6.tgz#fe4ace4310526e5e7b9d12c7de01b7f485a57ffe"
-  integrity sha512-3VdM/SXBZX2omc9JF9nOPCtDaYQ67BGp5CoLpIQlO2KCAPETs8TcDHacF26jXadGbvUteZzRTeos2fhID5+ucQ==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
+  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
 
 domutils@^1.7.0:
   version "1.7.0"
@@ -1857,55 +829,22 @@ domutils@^1.7.0:
     dom-serializer "0"
     domelementtype "1"
 
-dot-prop@^5.1.0, dot-prop@^5.2.0:
+dot-prop@^5.2.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
   integrity sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==
   dependencies:
     is-obj "^2.0.0"
 
-duplexer2@~0.1.0:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
-  integrity sha1-ixLauHjA1p4+eJEFFmKjL8a93ME=
-  dependencies:
-    readable-stream "^2.0.2"
-
-ecc-jsbn@~0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
-  integrity sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
-  dependencies:
-    jsbn "~0.1.0"
-    safer-buffer "^2.1.0"
-
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
-electron-to-chromium@^1.3.649:
-  version "1.3.703"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.703.tgz#6d9b9a75c42a40775f5930329e642b22b227317f"
-  integrity sha512-SVBVhNB+4zPL+rvtWLw7PZQkw/Eqj1HQZs22xtcqW36+xoifzEOEEDEpkxSMfB6RFeSIOcG00w6z5mSqLr1Y6w==
-
-elliptic@^6.5.3:
-  version "6.5.4"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
-  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
-  dependencies:
-    bn.js "^4.11.9"
-    brorand "^1.1.0"
-    hash.js "^1.0.0"
-    hmac-drbg "^1.0.1"
-    inherits "^2.0.4"
-    minimalistic-assert "^1.0.1"
-    minimalistic-crypto-utils "^1.0.1"
-
-emoji-regex@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
-  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+electron-to-chromium@^1.3.712:
+  version "1.3.717"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.717.tgz#78d4c857070755fb58ab64bcc173db1d51cbc25f"
+  integrity sha512-OfzVPIqD1MkJ7fX+yTl2nKyOE4FReeVfMCzzxQS+Kp43hZYwHwThlGP+EGIZRXJsxCM7dqo8Y65NOX/HP12iXQ==
 
 emojis-list@^3.0.0:
   version "3.0.0"
@@ -1917,55 +856,11 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
-encoding@^0.1.12:
-  version "0.1.13"
-  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
-  integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
-  dependencies:
-    iconv-lite "^0.6.2"
-
-end-of-stream@^1.1.0:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
-  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
-  dependencies:
-    once "^1.4.0"
-
 entities@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
-entities@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
-  integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
-
-env-ci@^5.0.0:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/env-ci/-/env-ci-5.0.2.tgz#48b6687f8af8cdf5e31b8fcf2987553d085249d9"
-  integrity sha512-Xc41mKvjouTXD3Oy9AqySz1IeyvJvHZ20Twf5ZLYbNpPPIuCnL/qHCmNlD01LoNy0JTunw9HPYVptD19Ac7Mbw==
-  dependencies:
-    execa "^4.0.0"
-    java-properties "^1.0.0"
-
-env-paths@^2.2.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
-  integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
-
-err-code@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9"
-  integrity sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==
-
-errno@^0.1.1, errno@~0.1.1:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
-  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
-  dependencies:
-    prr "~1.0.1"
-
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -2009,11 +904,6 @@ es6-promise@^4.1.1:
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
   integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
 
-esbuild@^0.9.3:
-  version "0.9.7"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.9.7.tgz#ea0d639cbe4b88ec25fbed4d6ff00c8d788ef70b"
-  integrity sha512-VtUf6aQ89VTmMLKrWHYG50uByMF4JQlVysb8dmg6cOgW8JnFCipmz7p+HNBl+RR3LLCuBxFGVauAe2wfnF9bLg==
-
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -2029,12 +919,7 @@ escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
-esm@^3.2.25:
-  version "3.2.25"
-  resolved "https://registry.yarnpkg.com/esm/-/esm-3.2.25.tgz#342c18c29d56157688ba5ce31f8431fbb795cc10"
-  integrity sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==
-
-esprima@^4.0.0, esprima@~4.0.0:
+esprima@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
@@ -2059,60 +944,17 @@ etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
 
-eventemitter3@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
-  integrity sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=
-
 eventemitter3@^4.0.4:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
 
-evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
-  integrity sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==
-  dependencies:
-    md5.js "^1.3.4"
-    safe-buffer "^5.1.1"
-
-execa@^4.0.0, execa@^4.0.3:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-4.1.0.tgz#4e5491ad1572f2f17a77d388c6c857135b22847a"
-  integrity sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==
-  dependencies:
-    cross-spawn "^7.0.0"
-    get-stream "^5.0.0"
-    human-signals "^1.1.1"
-    is-stream "^2.0.0"
-    merge-stream "^2.0.0"
-    npm-run-path "^4.0.0"
-    onetime "^5.1.0"
-    signal-exit "^3.0.2"
-    strip-final-newline "^2.0.0"
-
-execa@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-5.0.0.tgz#4029b0007998a841fbd1032e5f4de86a3c1e3376"
-  integrity sha512-ov6w/2LCiuyO4RLYGdpFGjkcs0wMTgGE8PrkTHikeUy5iJekXyPIKUjifk5CsE0pt7sMCrMZ3YNqoCj6idQOnQ==
-  dependencies:
-    cross-spawn "^7.0.3"
-    get-stream "^6.0.0"
-    human-signals "^2.1.0"
-    is-stream "^2.0.0"
-    merge-stream "^2.0.0"
-    npm-run-path "^4.0.1"
-    onetime "^5.1.2"
-    signal-exit "^3.0.3"
-    strip-final-newline "^2.0.0"
-
 express-history-api-fallback@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/express-history-api-fallback/-/express-history-api-fallback-2.2.1.tgz#3a2ad27f7bebc90fc533d110d7c6d83097bcd057"
   integrity sha1-OirSf3vryQ/FM9EQ18bYMJe80Fc=
 
-express-http-proxy@^1.5.1, express-http-proxy@^1.6.2:
+express-http-proxy@^1.5.1:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/express-http-proxy/-/express-http-proxy-1.6.2.tgz#e87152e45958cee4b91da2fdaa20a1ffd581204a"
   integrity sha512-soP7UXySFdLbeeMYL1foBkEoZj6HELq9BDAOCr1sLRpqjPaFruN5o6+bZeC+7U4USWIl4JMKEiIvTeKJ2WQdlQ==
@@ -2128,7 +970,7 @@ express-ws@^4.0.0:
   dependencies:
     ws "^5.2.0"
 
-express@^4.16.3, express@^4.17.1:
+express@^4.16.3:
   version "4.17.1"
   resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
   integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
@@ -2164,77 +1006,6 @@ express@^4.16.3, express@^4.17.1:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
-extend@^3.0.2, extend@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
-  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
-
-extsprintf@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
-  integrity sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=
-
-extsprintf@^1.2.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
-  integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
-
-fast-deep-equal@^3.1.1:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
-  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
-
-fast-diff@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154"
-  integrity sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==
-
-fast-glob@^3.0.3, fast-glob@^3.1.1:
-  version "3.2.5"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661"
-  integrity sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==
-  dependencies:
-    "@nodelib/fs.stat" "^2.0.2"
-    "@nodelib/fs.walk" "^1.2.3"
-    glob-parent "^5.1.0"
-    merge2 "^1.3.0"
-    micromatch "^4.0.2"
-    picomatch "^2.2.1"
-
-fast-json-stable-stringify@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
-  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
-
-fastq@^1.6.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.11.0.tgz#bb9fb955a07130a918eb63c1f5161cc32a5d0858"
-  integrity sha512-7Eczs8gIPDrVzT+EksYBcupqMyxSHXXrHOLRRxU2/DicV8789MRBRR8+Hc2uWzUupOs4YS4JzBmBxjjCVBxD/g==
-  dependencies:
-    reusify "^1.0.4"
-
-figures@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
-  integrity sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=
-  dependencies:
-    escape-string-regexp "^1.0.5"
-
-figures@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
-  integrity sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==
-  dependencies:
-    escape-string-regexp "^1.0.5"
-
-fill-keys@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/fill-keys/-/fill-keys-1.0.2.tgz#9a8fa36f4e8ad634e3bf6b4f3c8882551452eb20"
-  integrity sha1-mo+jb06K1jTjv2tPPIiCVRRS6yA=
-  dependencies:
-    is-object "~1.0.1"
-    merge-descriptors "~1.0.0"
-
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
@@ -2255,52 +1026,11 @@ finalhandler@~1.1.2:
     statuses "~1.5.0"
     unpipe "~1.0.0"
 
-find-up@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
-  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
-  dependencies:
-    locate-path "^2.0.0"
-
-find-up@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
-  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
-  dependencies:
-    locate-path "^5.0.0"
-    path-exists "^4.0.0"
-
-find-versions@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/find-versions/-/find-versions-4.0.0.tgz#3c57e573bf97769b8cb8df16934b627915da4965"
-  integrity sha512-wgpWy002tA+wgmO27buH/9KzyEOQnKsG/R0yrcjPT9BOFm0zRBVQbZ95nRGXWMywS8YR5knRbpohio0bcJABxQ==
-  dependencies:
-    semver-regex "^3.1.2"
-
 flatpickr@^4.5.2:
   version "4.6.9"
   resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.9.tgz#9a13383e8a6814bda5d232eae3fcdccb97dc1499"
   integrity sha512-F0azNNi8foVWKSF+8X+ZJzz8r9sE1G4hl06RyceIaLvyltKvDl6vqk9Lm/6AUUCi5HWaIjiUbk7UpeE/fOXOpw==
 
-foreach@~2.0.1:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
-  integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
-
-forever-agent@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
-  integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
-
-form-data@~2.3.2:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
-  integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
-  dependencies:
-    asynckit "^0.4.0"
-    combined-stream "^1.0.6"
-    mime-types "^2.1.12"
-
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -2311,40 +1041,6 @@ fresh@0.5.2:
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
   integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
 
-from2@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
-  integrity sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=
-  dependencies:
-    inherits "^2.0.1"
-    readable-stream "^2.0.0"
-
-fs-extra@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
-  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
-  dependencies:
-    graceful-fs "^4.2.0"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
-fs-extra@^9.0.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
-  integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
-  dependencies:
-    at-least-node "^1.0.0"
-    graceful-fs "^4.2.0"
-    jsonfile "^6.0.1"
-    universalify "^2.0.0"
-
-fs-minipass@^2.0.0, fs-minipass@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
-  integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
-  dependencies:
-    minipass "^3.0.0"
-
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -2360,27 +1056,6 @@ function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
-fwd-stream@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/fwd-stream/-/fwd-stream-1.0.4.tgz#ed281cabed46feecf921ee32dc4c50b372ac7cfa"
-  integrity sha1-7Sgcq+1G/uz5Ie4y3ExQs3KsfPo=
-  dependencies:
-    readable-stream "~1.0.26-4"
-
-gauge@~2.7.3:
-  version "2.7.4"
-  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
-  integrity sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=
-  dependencies:
-    aproba "^1.0.3"
-    console-control-strings "^1.0.0"
-    has-unicode "^2.0.0"
-    object-assign "^4.1.0"
-    signal-exit "^3.0.0"
-    string-width "^1.0.1"
-    strip-ansi "^3.0.1"
-    wide-align "^1.1.0"
-
 generic-names@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-2.0.1.tgz#f8a378ead2ccaa7a34f0317b05554832ae41b872"
@@ -2388,11 +1063,6 @@ generic-names@^2.0.1:
   dependencies:
     loader-utils "^1.1.0"
 
-get-caller-file@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
-  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
-
 get-intrinsic@^1.0.2, get-intrinsic@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
@@ -2402,50 +1072,14 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.1:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
-get-port@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
-  integrity sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=
-
-get-stream@^5.0.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3"
-  integrity sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==
-  dependencies:
-    pump "^3.0.0"
-
-get-stream@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.0.tgz#3e0012cb6827319da2706e601a1583e8629a6718"
-  integrity sha512-A1B3Bh1UmL0bidM/YX2NsCOTnGJePL9rO/M+Mw3m9f2gUpfokS0hi5Eah0WSUEWZdZhIZtMjkIYS7mDfOqNHbg==
-
-getpass@^0.1.1:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
-  integrity sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=
-  dependencies:
-    assert-plus "^1.0.0"
-
-git-log-parser@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/git-log-parser/-/git-log-parser-1.2.0.tgz#2e6a4c1b13fc00028207ba795a7ac31667b9fd4a"
-  integrity sha1-LmpMGxP8AAKCB7p5WnrDFme5/Uo=
-  dependencies:
-    argv-formatter "~1.0.0"
-    spawn-error-forwarder "~1.0.0"
-    split2 "~1.0.0"
-    stream-combiner2 "~1.1.1"
-    through2 "~2.0.0"
-    traverse "~0.6.6"
-
-glob-parent@^5.1.0, glob-parent@~5.1.0:
+glob-parent@~5.1.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
   dependencies:
     is-glob "^4.0.1"
 
-glob@^7.0.3, glob@^7.1.1, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
+glob@^7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
   integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
@@ -2457,85 +1091,6 @@ glob@^7.0.3, glob@^7.1.1, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-globby@10.0.1:
-  version "10.0.1"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-10.0.1.tgz#4782c34cb75dd683351335c5829cc3420e606b22"
-  integrity sha512-sSs4inE1FB2YQiymcmTv6NWENryABjUNPeWhOvmn4SjtKybglsyPZxFB3U1/+L1bYi0rNZDqCLlHyLYDl1Pq5A==
-  dependencies:
-    "@types/glob" "^7.1.1"
-    array-union "^2.1.0"
-    dir-glob "^3.0.1"
-    fast-glob "^3.0.3"
-    glob "^7.1.3"
-    ignore "^5.1.1"
-    merge2 "^1.2.3"
-    slash "^3.0.0"
-
-globby@^11.0.0, globby@^11.0.1:
-  version "11.0.3"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.3.tgz#9b1f0cb523e171dd1ad8c7b2a9fb4b644b9593cb"
-  integrity sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==
-  dependencies:
-    array-union "^2.1.0"
-    dir-glob "^3.0.1"
-    fast-glob "^3.1.1"
-    ignore "^5.1.4"
-    merge2 "^1.3.0"
-    slash "^3.0.0"
-
-globby@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
-  integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=
-  dependencies:
-    array-union "^1.0.1"
-    glob "^7.0.3"
-    object-assign "^4.0.1"
-    pify "^2.0.0"
-    pinkie-promise "^2.0.0"
-
-good-listener@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
-  integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
-  dependencies:
-    delegate "^3.1.2"
-
-graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.3, graceful-fs@^4.2.4, graceful-fs@^4.2.6:
-  version "4.2.6"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
-  integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
-
-handlebars@^4.7.6:
-  version "4.7.7"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
-  integrity sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==
-  dependencies:
-    minimist "^1.2.5"
-    neo-async "^2.6.0"
-    source-map "^0.6.1"
-    wordwrap "^1.0.0"
-  optionalDependencies:
-    uglify-js "^3.1.4"
-
-har-schema@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
-  integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
-
-har-validator@~5.1.3:
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.5.tgz#1f0803b9f8cb20c0fa13822df1ecddb36bde1efd"
-  integrity sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==
-  dependencies:
-    ajv "^6.12.3"
-    har-schema "^2.0.0"
-
-hard-rejection@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
-  integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
-
 has-bigints@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
@@ -2556,11 +1111,6 @@ has-symbols@^1.0.1, has-symbols@^1.0.2:
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
   integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
 
-has-unicode@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
-  integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=
-
 has@^1.0.0, has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
@@ -2568,59 +1118,11 @@ has@^1.0.0, has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hash-base@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.1.0.tgz#55c381d9e06e1d2997a883b4a3fddfe7f0d3af33"
-  integrity sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==
-  dependencies:
-    inherits "^2.0.4"
-    readable-stream "^3.6.0"
-    safe-buffer "^5.2.0"
-
-hash-sum@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
-  integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
-
-hash.js@^1.0.0, hash.js@^1.0.3:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
-  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
-  dependencies:
-    inherits "^2.0.3"
-    minimalistic-assert "^1.0.1"
-
 hex-color-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
-hmac-drbg@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
-  integrity sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=
-  dependencies:
-    hash.js "^1.0.3"
-    minimalistic-assert "^1.0.0"
-    minimalistic-crypto-utils "^1.0.1"
-
-hook-std@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/hook-std/-/hook-std-2.0.0.tgz#ff9aafdebb6a989a354f729bb6445cf4a3a7077c"
-  integrity sha512-zZ6T5WcuBMIUVh49iPQS9t977t7C0l7OtHrpeMb5uk48JdflRX0NSFvCekfYNmGQETnLq9W/isMyHl69kxGi8g==
-
-hosted-git-info@^2.1.4:
-  version "2.8.8"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
-  integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==
-
-hosted-git-info@^4.0.0, hosted-git-info@^4.0.1, hosted-git-info@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-4.0.2.tgz#5e425507eede4fea846b7262f0838456c4209961"
-  integrity sha512-c9OGXbZ3guC/xOlCg1Ci/VgWlwsqDv1yMQL1CWqXDL0hDjXuNcq0zuR4xqPSuasI3kqFDhqSyTjREz5gzq0fXg==
-  dependencies:
-    lru-cache "^6.0.0"
-
 hsl-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
@@ -2631,16 +1133,6 @@ hsla-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
   integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
 
-html-comment-regex@^1.1.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
-  integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
-
-http-cache-semantics@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
-  integrity sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==
-
 http-errors@1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
@@ -2663,49 +1155,6 @@ http-errors@1.7.3, http-errors@~1.7.2:
     statuses ">= 1.5.0 < 2"
     toidentifier "1.0.0"
 
-http-proxy-agent@^4.0.0, http-proxy-agent@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz#8a8c8ef7f5932ccf953c296ca8291b95aa74aa3a"
-  integrity sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==
-  dependencies:
-    "@tootallnate/once" "1"
-    agent-base "6"
-    debug "4"
-
-http-signature@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
-  integrity sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=
-  dependencies:
-    assert-plus "^1.0.0"
-    jsprim "^1.2.2"
-    sshpk "^1.7.0"
-
-https-proxy-agent@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz#e2a90542abb68a762e0a0850f6c9edadfd8506b2"
-  integrity sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==
-  dependencies:
-    agent-base "6"
-    debug "4"
-
-human-signals@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
-  integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
-
-human-signals@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
-  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
-
-humanize-ms@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/humanize-ms/-/humanize-ms-1.2.1.tgz#c46e3159a293f6b896da29316d8b6fe8bb79bbed"
-  integrity sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=
-  dependencies:
-    ms "^2.0.0"
-
 iconv-lite@0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -2713,13 +1162,6 @@ iconv-lite@0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-iconv-lite@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.2.tgz#ce13d1875b0c3a674bd6a04b7f76b01b1b6ded01"
-  integrity sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ==
-  dependencies:
-    safer-buffer ">= 2.1.2 < 3.0.0"
-
 icss-replace-symbols@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
@@ -2730,23 +1172,6 @@ icss-utils@^5.0.0:
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
   integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
 
-idb-wrapper@^1.5.0:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/idb-wrapper/-/idb-wrapper-1.7.2.tgz#8251afd5e77fe95568b1c16152eb44b396767ea2"
-  integrity sha512-zfNREywMuf0NzDo9mVsL0yegjsirJxHpKHvWcyRozIqQy89g0a3U+oBPOCN4cc0oCiOuYgZHimzaW/R46G1Mpg==
-
-ignore-walk@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"
-  integrity sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==
-  dependencies:
-    minimatch "^3.0.4"
-
-ignore@^5.1.1, ignore@^5.1.4:
-  version "5.1.8"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
-  integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
-
 import-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-3.0.0.tgz#20845547718015126ea9b3676b7592fb8bd4cf92"
@@ -2777,31 +1202,11 @@ import-from@^3.0.0:
   dependencies:
     resolve-from "^5.0.0"
 
-imurmurhash@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
-  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
-
-indent-string@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
-  integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
-
 indexes-of@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
   integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
 
-indexof@~0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
-  integrity sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=
-
-infer-owner@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
-  integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
-
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -2810,7 +1215,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -2820,48 +1225,6 @@ inherits@2.0.3:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
-ini@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-2.0.0.tgz#e5fd556ecdd5726be978fa1001862eacb0a94bc5"
-  integrity sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==
-
-ini@~1.3.0:
-  version "1.3.8"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
-  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
-
-init-package-json@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/init-package-json/-/init-package-json-2.0.2.tgz#d81a7e6775af9b618f20bba288e440b8d1ce05f3"
-  integrity sha512-PO64kVeArePvhX7Ff0jVWkpnE1DfGRvaWcStYrPugcJz9twQGYibagKJuIMHCX7ENcp0M6LJlcjLBuLD5KeJMg==
-  dependencies:
-    glob "^7.1.1"
-    npm-package-arg "^8.1.0"
-    promzard "^0.3.0"
-    read "~1.0.1"
-    read-package-json "^3.0.0"
-    semver "^7.3.2"
-    validate-npm-package-license "^3.0.4"
-    validate-npm-package-name "^3.0.0"
-
-into-stream@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/into-stream/-/into-stream-6.0.0.tgz#4bfc1244c0128224e18b8870e85b2de8e66c6702"
-  integrity sha512-XHbaOAvP+uFKUFsOgoNPRjLkwB+I22JFPFe5OjTkQ0nwgj6+pSjb4NmB6VMxaPshLiOf+zcpOCBQuLwC1KHhZA==
-  dependencies:
-    from2 "^2.3.0"
-    p-is-promise "^3.0.0"
-
-ip-regex@^4.1.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-4.3.0.tgz#687275ab0f57fa76978ff8f4dddc8a23d5990db5"
-  integrity sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==
-
-ip@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
-  integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
-
 ipaddr.js@1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
@@ -2872,13 +1235,6 @@ is-absolute-url@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
   integrity sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=
 
-is-arguments@^1.0.4:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.0.tgz#62353031dfbee07ceb34656a6bde59efecae8dd9"
-  integrity sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==
-  dependencies:
-    call-bind "^1.0.0"
-
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -2913,13 +1269,6 @@ is-callable@^1.1.4, is-callable@^1.2.3:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.3.tgz#8b1e0500b73a1d76c70487636f368e519de8db8e"
   integrity sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==
 
-is-cidr@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/is-cidr/-/is-cidr-4.0.2.tgz#94c7585e4c6c77ceabf920f8cde51b8c0fda8814"
-  integrity sha512-z4a1ENUajDbEl/Q6/pVBpTR1nBjjEE1X7qb7bmWYanNnPoKAvUCPFKeXV6Fe4mgTkWKBqiHIcwsI3SndiO5FeA==
-  dependencies:
-    cidr-regex "^3.1.1"
-
 is-color-stop@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
@@ -2949,33 +1298,11 @@ is-directory@^0.3.1:
   resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
   integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
 
-is-docker@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.1.1.tgz#4125a88e44e450d384e09047ede71adc2d144156"
-  integrity sha512-ZOoqiXfEwtGknTiuDEy8pN2CfE3TxMHprvNer1mXiqwkOT77Rw3YVrUQ52EqAOU3QAWDQ+bQdx7HJzrv7LS2Hw==
-
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
 
-is-fullwidth-code-point@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
-  integrity sha1-754xOG8DGn8NZDr4L95QxFfvAMs=
-  dependencies:
-    number-is-nan "^1.0.0"
-
-is-fullwidth-code-point@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
-  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
-
-is-fullwidth-code-point@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
-  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
-
 is-glob@^4.0.1, is-glob@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
@@ -2983,11 +1310,6 @@ is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
-is-lambda@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-lambda/-/is-lambda-1.0.1.tgz#3d9877899e6a53efc0160504cde15f82e6f061d5"
-  integrity sha1-PZh3iZ5qU+/AFgUEzeFfgubwYdU=
-
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -3013,55 +1335,6 @@ is-obj@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
   integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
 
-is-object@~0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/is-object/-/is-object-0.1.2.tgz#00efbc08816c33cfc4ac8251d132e10dc65098d7"
-  integrity sha1-AO+8CIFsM8/ErIJR0TLhDcZQmNc=
-
-is-object@~1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.2.tgz#a56552e1c665c9e950b4a025461da87e72f86fcf"
-  integrity sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA==
-
-is-path-cwd@^2.0.0, is-path-cwd@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.2.0.tgz#67d43b82664a7b5191fd9119127eb300048a9fdb"
-  integrity sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==
-
-is-path-in-cwd@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz#bfe2dca26c69f397265a4009963602935a053acb"
-  integrity sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==
-  dependencies:
-    is-path-inside "^2.1.0"
-
-is-path-inside@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-2.1.0.tgz#7c9810587d659a40d27bcdb4d5616eab059494b2"
-  integrity sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==
-  dependencies:
-    path-is-inside "^1.0.2"
-
-is-path-inside@^3.0.2:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
-  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
-
-is-plain-obj@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
-  integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
-
-is-plain-object@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-3.0.1.tgz#662d92d24c0aa4302407b0d45d21f2251c85f85b"
-  integrity sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==
-
-is-plain-object@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
-  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
-
 is-reference@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-1.2.1.tgz#8b2dac0b371f4bc994fdeaba9eb542d03002d0b7"
@@ -3069,7 +1342,7 @@ is-reference@^1.2.1:
   dependencies:
     "@types/estree" "*"
 
-is-regex@^1.0.4, is-regex@^1.1.2:
+is-regex@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.2.tgz#81c8ebde4db142f2cf1c53fc86d6a45788266251"
   integrity sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==
@@ -3082,23 +1355,11 @@ is-resolvable@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
   integrity sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==
 
-is-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
-  integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
-
 is-string@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
   integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
 
-is-svg@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-3.0.0.tgz#9321dbd29c212e5ca99c4fa9794c714bcafa2f75"
-  integrity sha512-gi4iHK53LR2ujhLVVj+37Ykh9GLqYHX6JOVXbLAucaG/Cqw9xwdFOjDM2qeifLs1sF1npXXFvDu0r5HNgCMrzQ==
-  dependencies:
-    html-comment-regex "^1.1.0"
-
 is-symbol@^1.0.2, is-symbol@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
@@ -3106,70 +1367,19 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
   dependencies:
     has-symbols "^1.0.1"
 
-is-text-path@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-text-path/-/is-text-path-1.0.1.tgz#4e1aa0fb51bfbcb3e92688001397202c1775b66e"
-  integrity sha1-Thqg+1G/vLPpJogAE5cgLBd1tm4=
-  dependencies:
-    text-extensions "^1.0.0"
-
-is-typedarray@^1.0.0, is-typedarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
-  integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
-
-is-wsl@^2.1.1:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
-  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
-  dependencies:
-    is-docker "^2.0.0"
-
-is@~0.2.6:
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/is/-/is-0.2.7.tgz#3b34a2c48f359972f35042849193ae7264b63562"
-  integrity sha1-OzSixI81mXLzUEKEkZOucmS2NWI=
-
-isarray@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
-  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
-
-isarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
-  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
-
-isbuffer@~0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/isbuffer/-/isbuffer-0.0.0.tgz#38c146d9df528b8bf9b0701c3d43cf12df3fc39b"
-  integrity sha1-OMFG2d9Si4v5sHAcPUPPEt8/w5s=
-
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
-isstream@~0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
-  integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
-
-issue-parser@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/issue-parser/-/issue-parser-6.0.0.tgz#b1edd06315d4f2044a9755daf85fdafde9b4014a"
-  integrity sha512-zKa/Dxq2lGsBIXQ7CUZWTHfvxPC2ej0KfO7fIPqLlHB9J2hJ7rGhZ5rilhuufylr4RXYPzJUeFjKxz305OsNlA==
+jest-worker@^26.2.1:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
+  integrity sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==
   dependencies:
-    lodash.capitalize "^4.2.1"
-    lodash.escaperegexp "^4.1.2"
-    lodash.isplainobject "^4.0.6"
-    lodash.isstring "^4.0.1"
-    lodash.uniqby "^4.7.0"
-
-java-properties@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/java-properties/-/java-properties-1.0.2.tgz#ccd1fa73907438a5b5c38982269d0e771fe78211"
-  integrity sha512-qjdpeo2yKlYTH7nFdK0vbZWuTCesk4o63v5iVOlhMQPfuIZQfW/HI35SjfhA+4qpg36rnFSvUK5b1m+ckIblQQ==
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^7.0.0"
 
 js-tokens@^4.0.0:
   version "4.0.0"
@@ -3184,41 +1394,16 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-jsbn@~0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
-  integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
-
 json-parse-better-errors@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
 
-json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
+json-parse-even-better-errors@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
   integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
 
-json-schema-traverse@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
-  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
-
-json-schema@0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
-  integrity sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=
-
-json-stringify-nice@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/json-stringify-nice/-/json-stringify-nice-1.1.2.tgz#955040f00eac984ad81b6d2966a07b5a6e19e512"
-  integrity sha512-mc0EsmCq4Ru6jTdKtKvzKzGJPa7eUHXe5/WAprXwyYYR1iY2qTcvaw3QBkPKGfJYvRr5vXoaIvMtttM+/f1xOA==
-
-json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
-  integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
-
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
@@ -3226,262 +1411,11 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-jsonfile@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
-  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
-jsonfile@^6.0.1:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
-  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
-  dependencies:
-    universalify "^2.0.0"
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
-jsonparse@^1.2.0, jsonparse@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
-  integrity sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=
-
-jsprim@^1.2.2:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
-  integrity sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=
-  dependencies:
-    assert-plus "1.0.0"
-    extsprintf "1.3.0"
-    json-schema "0.2.3"
-    verror "1.10.0"
-
-just-diff-apply@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/just-diff-apply/-/just-diff-apply-3.0.0.tgz#a77348d24f0694e378b57293dceb65bdf5a91c4f"
-  integrity sha512-K2MLc+ZC2DVxX4V61bIKPeMUUfj1YYZ3h0myhchDXOW1cKoPZMnjIoNCqv9bF2n5Oob1PFxuR2gVJxkxz4e58w==
-
-just-diff@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/just-diff/-/just-diff-3.0.2.tgz#65f4914e4d7500b364d12b7b3f03bcbacdac743b"
-  integrity sha512-+EiNvacECnZbszZa5IMjzrJ3dy2HKMXyGaNYWBnXy+iWW+437jIvQUrWaM9M+XI/6gOH8EjqvhGUOSh7ETekyg==
-
-kind-of@^6.0.3:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
-  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
-
-kleur@^3.0.0:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
-  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
-
-level-blobs@^0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/level-blobs/-/level-blobs-0.1.7.tgz#9ab9b97bb99f1edbf9f78a3433e21ed56386bdaf"
-  integrity sha1-mrm5e7mfHtv594o0M+Ie1WOGva8=
-  dependencies:
-    level-peek "1.0.6"
-    once "^1.3.0"
-    readable-stream "^1.0.26-4"
-
-level-filesystem@^1.0.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/level-filesystem/-/level-filesystem-1.2.0.tgz#a00aca9919c4a4dfafdca6a8108d225aadff63b3"
-  integrity sha1-oArKmRnEpN+v3KaoEI0iWq3/Y7M=
-  dependencies:
-    concat-stream "^1.4.4"
-    errno "^0.1.1"
-    fwd-stream "^1.0.4"
-    level-blobs "^0.1.7"
-    level-peek "^1.0.6"
-    level-sublevel "^5.2.0"
-    octal "^1.0.0"
-    once "^1.3.0"
-    xtend "^2.2.0"
-
-level-fix-range@2.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/level-fix-range/-/level-fix-range-2.0.0.tgz#c417d62159442151a19d9a2367868f1724c2d548"
-  integrity sha1-xBfWIVlEIVGhnZojZ4aPFyTC1Ug=
-  dependencies:
-    clone "~0.1.9"
-
-level-fix-range@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/level-fix-range/-/level-fix-range-1.0.2.tgz#bf15b915ae36d8470c821e883ddf79cd16420828"
-  integrity sha1-vxW5Fa422EcMgh6IPd95zRZCCCg=
-
-"level-hooks@>=4.4.0 <5":
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/level-hooks/-/level-hooks-4.5.0.tgz#1b9ae61922930f3305d1a61fc4d83c8102c0dd93"
-  integrity sha1-G5rmGSKTDzMF0aYfxNg8gQLA3ZM=
-  dependencies:
-    string-range "~1.2"
-
-level-js@^2.1.3:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/level-js/-/level-js-2.2.4.tgz#bc055f4180635d4489b561c9486fa370e8c11697"
-  integrity sha1-vAVfQYBjXUSJtWHJSG+jcOjBFpc=
-  dependencies:
-    abstract-leveldown "~0.12.0"
-    idb-wrapper "^1.5.0"
-    isbuffer "~0.0.0"
-    ltgt "^2.1.2"
-    typedarray-to-buffer "~1.0.0"
-    xtend "~2.1.2"
-
-level-peek@1.0.6, level-peek@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/level-peek/-/level-peek-1.0.6.tgz#bec51c72a82ee464d336434c7c876c3fcbcce77f"
-  integrity sha1-vsUccqgu5GTTNkNMfIdsP8vM538=
-  dependencies:
-    level-fix-range "~1.0.2"
-
-level-sublevel@^5.2.0:
-  version "5.2.3"
-  resolved "https://registry.yarnpkg.com/level-sublevel/-/level-sublevel-5.2.3.tgz#744c12c72d2e72be78dde3b9b5cd84d62191413a"
-  integrity sha1-dEwSxy0ucr543eO5tc2E1iGRQTo=
-  dependencies:
-    level-fix-range "2.0"
-    level-hooks ">=4.4.0 <5"
-    string-range "~1.2.1"
-    xtend "~2.0.4"
-
-levelup@^0.18.2:
-  version "0.18.6"
-  resolved "https://registry.yarnpkg.com/levelup/-/levelup-0.18.6.tgz#e6a01cb089616c8ecc0291c2a9bd3f0c44e3e5eb"
-  integrity sha1-5qAcsIlhbI7MApHCqb0/DETj5es=
-  dependencies:
-    bl "~0.8.1"
-    deferred-leveldown "~0.2.0"
-    errno "~0.1.1"
-    prr "~0.0.0"
-    readable-stream "~1.0.26"
-    semver "~2.3.1"
-    xtend "~3.0.0"
-
-leven@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
-  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
-
-libnpmaccess@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/libnpmaccess/-/libnpmaccess-4.0.1.tgz#17e842e03bef759854adf6eb6c2ede32e782639f"
-  integrity sha512-ZiAgvfUbvmkHoMTzdwmNWCrQRsDkOC+aM5BDfO0C9aOSwF3R1LdFDBD+Rer1KWtsoQYO35nXgmMR7OUHpDRxyA==
-  dependencies:
-    aproba "^2.0.0"
-    minipass "^3.1.1"
-    npm-package-arg "^8.0.0"
-    npm-registry-fetch "^9.0.0"
-
-libnpmdiff@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/libnpmdiff/-/libnpmdiff-2.0.4.tgz#bb1687992b1a97a8ea4a32f58ad7c7f92de53b74"
-  integrity sha512-q3zWePOJLHwsLEUjZw3Kyu/MJMYfl4tWCg78Vl6QGSfm4aXBUSVzMzjJ6jGiyarsT4d+1NH4B1gxfs62/+y9iQ==
-  dependencies:
-    "@npmcli/disparity-colors" "^1.0.1"
-    "@npmcli/installed-package-contents" "^1.0.7"
-    binary-extensions "^2.2.0"
-    diff "^5.0.0"
-    minimatch "^3.0.4"
-    npm-package-arg "^8.1.1"
-    pacote "^11.3.0"
-    tar "^6.1.0"
-
-libnpmfund@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/libnpmfund/-/libnpmfund-1.0.2.tgz#d9552d4b76dd7f0a1a61b7af6b8f27184e51b0f5"
-  integrity sha512-Scw2JiLxfT7wqW/VbxIXV8u3FaFT/ZlR8YLFgTdCPsL1Hhli0554ZXyP8JTu1sLeDpHsoqtgLb4mgYVQnqigjA==
-  dependencies:
-    "@npmcli/arborist" "^2.0.0"
-
-libnpmhook@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/libnpmhook/-/libnpmhook-6.0.1.tgz#ef467078b71f6f86199f90e6c86e391588867f09"
-  integrity sha512-rwiWIWAQ6R5sPFRi9gsSC/+1/BxFlxk5nNQysVTXEHbqM9ds8g/duW79wRbZKnRyK1xyOmafxbj69nt9tcUkyw==
-  dependencies:
-    aproba "^2.0.0"
-    npm-registry-fetch "^9.0.0"
-
-libnpmorg@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/libnpmorg/-/libnpmorg-2.0.1.tgz#b279b6e0641013ba5dde465476e72624ea8dd2f3"
-  integrity sha512-Wj0aApN6TfZWHqtJNjkY7IeQpX24jrQD58IHrEz234quKVRYlegUiMsZl2g4OEFeZNSSc9QN28EdI1SBkUlW7g==
-  dependencies:
-    aproba "^2.0.0"
-    npm-registry-fetch "^9.0.0"
-
-libnpmpack@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/libnpmpack/-/libnpmpack-2.0.1.tgz#d3eac25cc8612f4e7cdeed4730eee339ba51c643"
-  integrity sha512-He4/jxOwlaQ7YG7sIC1+yNeXeUDQt8RLBvpI68R3RzPMZPa4/VpxhlDo8GtBOBDYoU8eq6v1wKL38sq58u4ibQ==
-  dependencies:
-    "@npmcli/run-script" "^1.8.3"
-    npm-package-arg "^8.1.0"
-    pacote "^11.2.6"
-
-libnpmpublish@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/libnpmpublish/-/libnpmpublish-4.0.0.tgz#ad6413914e0dfd78df868ce14ba3d3a4cc8b385b"
-  integrity sha512-2RwYXRfZAB1x/9udKpZmqEzSqNd7ouBRU52jyG14/xG8EF+O9A62d7/XVR3iABEQHf1iYhkm0Oq9iXjrL3tsXA==
-  dependencies:
-    normalize-package-data "^3.0.0"
-    npm-package-arg "^8.1.0"
-    npm-registry-fetch "^9.0.0"
-    semver "^7.1.3"
-    ssri "^8.0.0"
-
-libnpmsearch@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/libnpmsearch/-/libnpmsearch-3.1.0.tgz#425cc7cd1feeaad7bf109f91f17b697a3a058f9e"
-  integrity sha512-UQyzQjtAv99kZDuijqTB2Do63qtt+2SKNOVSTnehWTQbxzXF7Jvc8UD3YNPljm8+Y5T31K2AqptbY5BD6XHlIg==
-  dependencies:
-    npm-registry-fetch "^9.0.0"
-
-libnpmteam@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/libnpmteam/-/libnpmteam-2.0.2.tgz#8450a77092faa801aaaea2a209a66e2137460c06"
-  integrity sha512-QGvtbMPdQzK+XybBPK0UjfLEI9fiDPQSFMbZW+2lmm0BgPoqxHle0Wl90bsIyBVY7pYzp45MgMqQNo7KWCLpDA==
-  dependencies:
-    aproba "^2.0.0"
-    npm-registry-fetch "^9.0.0"
-
-libnpmversion@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/libnpmversion/-/libnpmversion-1.1.0.tgz#699412e7083bc3d229d461c611e9f5eb3fc06a44"
-  integrity sha512-ktMHbbGpVVwmvSNQ+dG5fXgC2rB81i1hA94SaR5OCqPQ01Kuipshq6OLo8maD3xK+ulUCIfHxcAi/JYL8J9SWg==
-  dependencies:
-    "@npmcli/git" "^2.0.6"
-    "@npmcli/run-script" "^1.8.3"
-    json-parse-even-better-errors "^2.3.1"
-    semver "^7.3.4"
-    stringify-package "^1.0.1"
-
 lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
-linkify-it@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-3.0.2.tgz#f55eeb8bc1d3ae754049e124ab3bb56d97797fb8"
-  integrity sha512-gDBO4aHNZS6coiZCKVhSNh43F9ioIL4JwRjLZPkoLIY4yZFwg264Y5lu2x6rb1Js42Gh6Yqm2f6L2AJcnkzinQ==
-  dependencies:
-    uc.micro "^1.0.1"
-
-load-json-file@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
-  integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs=
-  dependencies:
-    graceful-fs "^4.1.2"
-    parse-json "^4.0.0"
-    pify "^3.0.0"
-    strip-bom "^3.0.0"
-
 loader-utils@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
@@ -3491,93 +1425,21 @@ loader-utils@^1.1.0:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
-local-access@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/local-access/-/local-access-1.1.0.tgz#e007c76ba2ca83d5877ba1a125fc8dfe23ba4798"
-  integrity sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw==
-
-locate-path@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
-  integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
-  dependencies:
-    p-locate "^2.0.0"
-    path-exists "^3.0.0"
-
-locate-path@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
-  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
-  dependencies:
-    p-locate "^4.1.0"
-
 lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
   integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
 
-lodash.capitalize@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz#f826c9b4e2a8511d84e3aca29db05e1a4f3b72a9"
-  integrity sha1-+CbJtOKoUR2E46yinbBeGk87cqk=
-
-lodash.escaperegexp@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz#64762c48618082518ac3df4ccf5d5886dae20347"
-  integrity sha1-ZHYsSGGAglGKw99Mz11YhtriA0c=
-
-lodash.ismatch@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37"
-  integrity sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc=
-
-lodash.isplainobject@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
-  integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=
-
-lodash.isstring@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
-  integrity sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=
-
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
-lodash.toarray@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
-  integrity sha1-JMS/zWsvuji/0FlNsRedjptlZWE=
-
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash.uniqby@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz#d99c07a669e9e6d24e1362dfe266c67616af1302"
-  integrity sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI=
-
-lodash@^4.17.15, lodash@^4.17.4:
-  version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
-lru-cache@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
-  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
-  dependencies:
-    yallist "^4.0.0"
-
-ltgt@^2.1.2:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/ltgt/-/ltgt-2.2.1.tgz#f35ca91c493f7b73da0e07495304f17b31f87ee5"
-  integrity sha1-81ypHEk/e3PaDgdJUwTxezH4fuU=
-
 magic-string@^0.25.7:
   version "0.25.7"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
@@ -3585,74 +1447,6 @@ magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.4"
 
-make-fetch-happen@^8.0.14, make-fetch-happen@^8.0.9:
-  version "8.0.14"
-  resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-8.0.14.tgz#aaba73ae0ab5586ad8eaa68bd83332669393e222"
-  integrity sha512-EsS89h6l4vbfJEtBZnENTOFk8mCRpY5ru36Xe5bcX1KYIli2mkSHqoFsp5O1wMDvTJJzxe/4THpCTtygjeeGWQ==
-  dependencies:
-    agentkeepalive "^4.1.3"
-    cacache "^15.0.5"
-    http-cache-semantics "^4.1.0"
-    http-proxy-agent "^4.0.1"
-    https-proxy-agent "^5.0.0"
-    is-lambda "^1.0.1"
-    lru-cache "^6.0.0"
-    minipass "^3.1.3"
-    minipass-collect "^1.0.2"
-    minipass-fetch "^1.3.2"
-    minipass-flush "^1.0.5"
-    minipass-pipeline "^1.2.4"
-    promise-retry "^2.0.1"
-    socks-proxy-agent "^5.0.0"
-    ssri "^8.0.0"
-
-map-obj@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
-  integrity sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=
-
-map-obj@^4.0.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.2.0.tgz#0e8bc823e2aaca8a0942567d12ed14f389eec153"
-  integrity sha512-NAq0fCmZYGz9UFEQyndp7sisrow4GroyGeKluyKC/chuITZsPyOyC1UJZPJlVFImhXdROIP5xqouRLThT3BbpQ==
-
-markdown-it@^12.0.4:
-  version "12.0.4"
-  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.0.4.tgz#eec8247d296327eac3ba9746bdeec9cfcc751e33"
-  integrity sha512-34RwOXZT8kyuOJy25oJNJoulO8L0bTHYWXcdZBYZqFnjIy3NgjeoM3FmPXIOFQ26/lSHYMr8oc62B6adxXcb3Q==
-  dependencies:
-    argparse "^2.0.1"
-    entities "~2.1.0"
-    linkify-it "^3.0.1"
-    mdurl "^1.0.1"
-    uc.micro "^1.0.5"
-
-marked-terminal@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/marked-terminal/-/marked-terminal-4.1.1.tgz#34a6f063cd6cfe26bffaf5bac3724e24242168a9"
-  integrity sha512-t7Mdf6T3PvOEyN01c3tYxDzhyKZ8xnkp8Rs6Fohno63L/0pFTJ5Qtwto2AQVuDtbQiWzD+4E5AAu1Z2iLc8miQ==
-  dependencies:
-    ansi-escapes "^4.3.1"
-    cardinal "^2.1.1"
-    chalk "^4.1.0"
-    cli-table "^0.3.1"
-    node-emoji "^1.10.0"
-    supports-hyperlinks "^2.1.0"
-
-marked@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-2.0.1.tgz#5e7ed7009bfa5c95182e4eb696f85e948cefcee3"
-  integrity sha512-5+/fKgMv2hARmMW7DOpykr2iLhl0NgjyELk5yn92iE7z8Se1IS9n3UsFm86hFXIkvMBmVxki8+ckcpjBeyo/hw==
-
-md5.js@^1.3.4:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
-  integrity sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==
-  dependencies:
-    hash-base "^3.0.0"
-    inherits "^2.0.1"
-    safe-buffer "^5.1.2"
-
 mdn-data@2.0.14:
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
@@ -3663,34 +1457,12 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
-mdurl@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
-  integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
-
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
-meow@^8.0.0:
-  version "8.1.2"
-  resolved "https://registry.yarnpkg.com/meow/-/meow-8.1.2.tgz#bcbe45bda0ee1729d350c03cffc8395a36c4e897"
-  integrity sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==
-  dependencies:
-    "@types/minimist" "^1.2.0"
-    camelcase-keys "^6.2.2"
-    decamelize-keys "^1.1.0"
-    hard-rejection "^2.1.0"
-    minimist-options "4.1.0"
-    normalize-package-data "^3.0.0"
-    read-pkg-up "^7.0.1"
-    redent "^3.0.0"
-    trim-newlines "^3.0.0"
-    type-fest "^0.18.0"
-    yargs-parser "^20.2.3"
-
-merge-descriptors@1.0.1, merge-descriptors@~1.0.0:
+merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
   integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
@@ -3700,74 +1472,28 @@ merge-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
-merge2@^1.2.3, merge2@^1.3.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
-  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
-
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
-micromatch@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
-  integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
-  dependencies:
-    braces "^3.0.1"
-    picomatch "^2.0.5"
+mime-db@1.47.0:
+  version "1.47.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.47.0.tgz#8cb313e59965d3c05cfbf898915a267af46a335c"
+  integrity sha512-QBmA/G2y+IfeS4oktet3qRZ+P5kPhCKRXxXnQEudYqUaEioAU1/Lq2us3D/t1Jfo4hE9REQPrbB7K5sOczJVIw==
 
-miller-rabin@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
-  integrity sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==
+mime-types@^2.1.24, mime-types@~2.1.24:
+  version "2.1.30"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.30.tgz#6e7be8b4c479825f85ed6326695db73f9305d62d"
+  integrity sha512-crmjA4bLtR8m9qLpHvgxSChT+XoSlZi8J4n/aIdn3z92e/U47Z0V/yl+Wh9W046GgFVAmoNR/fmdbZYcSSIUeg==
   dependencies:
-    bn.js "^4.0.0"
-    brorand "^1.0.1"
-
-mime-db@1.46.0:
-  version "1.46.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.46.0.tgz#6267748a7f799594de3cbc8cde91def349661cee"
-  integrity sha512-svXaP8UQRZ5K7or+ZmfNhg2xX3yKDMUzqadsSqi4NCH/KomcH75MAMYAGVlvXn4+b/xOPhS3I2uHKRUzvjY7BQ==
-
-mime-types@^2.1.12, mime-types@^2.1.24, mime-types@^2.1.26, mime-types@^2.1.29, mime-types@~2.1.19, mime-types@~2.1.24:
-  version "2.1.29"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.29.tgz#1d4ab77da64b91f5f72489df29236563754bb1b2"
-  integrity sha512-Y/jMt/S5sR9OaqteJtslsFZKWOIIqMACsJSiHghlCAyhf7jfVYjKBmLiX8OgpWeW+fjJ2b+Az69aPFPkUOY6xQ==
-  dependencies:
-    mime-db "1.46.0"
+    mime-db "1.47.0"
 
 mime@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
-mime@^2.3.1, mime@^2.4.3:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe"
-  integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==
-
-mimic-fn@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
-  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
-
-min-indent@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
-  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
-
-minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
-  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
-
-minimalistic-crypto-utils@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
-  integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
-
 minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
@@ -3775,96 +1501,11 @@ minimatch@^3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist-options@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
-  integrity sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==
-  dependencies:
-    arrify "^1.0.1"
-    is-plain-obj "^1.1.0"
-    kind-of "^6.0.3"
-
 minimist@^1.2.0, minimist@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
-minipass-collect@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
-  integrity sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==
-  dependencies:
-    minipass "^3.0.0"
-
-minipass-fetch@^1.3.0, minipass-fetch@^1.3.2:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/minipass-fetch/-/minipass-fetch-1.3.3.tgz#34c7cea038c817a8658461bf35174551dce17a0a"
-  integrity sha512-akCrLDWfbdAWkMLBxJEeWTdNsjML+dt5YgOI4gJ53vuO0vrmYQkUPxa6j6V65s9CcePIr2SSWqjT2EcrNseryQ==
-  dependencies:
-    minipass "^3.1.0"
-    minipass-sized "^1.0.3"
-    minizlib "^2.0.0"
-  optionalDependencies:
-    encoding "^0.1.12"
-
-minipass-flush@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/minipass-flush/-/minipass-flush-1.0.5.tgz#82e7135d7e89a50ffe64610a787953c4c4cbb373"
-  integrity sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==
-  dependencies:
-    minipass "^3.0.0"
-
-minipass-json-stream@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/minipass-json-stream/-/minipass-json-stream-1.0.1.tgz#7edbb92588fbfc2ff1db2fc10397acb7b6b44aa7"
-  integrity sha512-ODqY18UZt/I8k+b7rl2AENgbWE8IDYam+undIJONvigAz8KR5GWblsFTEfQs0WODsjbSXWlm+JHEv8Gr6Tfdbg==
-  dependencies:
-    jsonparse "^1.3.1"
-    minipass "^3.0.0"
-
-minipass-pipeline@^1.2.2, minipass-pipeline@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz#68472f79711c084657c067c5c6ad93cddea8214c"
-  integrity sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==
-  dependencies:
-    minipass "^3.0.0"
-
-minipass-sized@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/minipass-sized/-/minipass-sized-1.0.3.tgz#70ee5a7c5052070afacfbc22977ea79def353b70"
-  integrity sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==
-  dependencies:
-    minipass "^3.0.0"
-
-minipass@^3.0.0, minipass@^3.1.0, minipass@^3.1.1, minipass@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.3.tgz#7d42ff1f39635482e15f9cdb53184deebd5815fd"
-  integrity sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==
-  dependencies:
-    yallist "^4.0.0"
-
-minizlib@^2.0.0, minizlib@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
-  integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
-  dependencies:
-    minipass "^3.0.0"
-    yallist "^4.0.0"
-
-mkdirp-infer-owner@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/mkdirp-infer-owner/-/mkdirp-infer-owner-2.0.0.tgz#55d3b368e7d89065c38f32fd38e638f0ab61d316"
-  integrity sha512-sdqtiFt3lkOaYvTXSRIUjkIdPTcxgv5+fgqYE/5qgwdw12cOrAuzzgzvVExIkH/ul1oeHN3bCLOWSG3XOqbKKw==
-  dependencies:
-    chownr "^2.0.0"
-    infer-owner "^1.0.4"
-    mkdirp "^1.0.3"
-
-mkdirp@^1.0.3, mkdirp@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
-  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
-
 mkdirp@~0.5.1:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
@@ -3872,21 +1513,6 @@ mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
-modify-values@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
-  integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
-
-module-not-found-error@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/module-not-found-error/-/module-not-found-error-1.0.1.tgz#cf8b4ff4f29640674d6cdd02b0e3bc523c2bbdc0"
-  integrity sha1-z4tP9PKWQGdNbN0CsOO8UjwrvcA=
-
-mri@^1.1.0:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6"
-  integrity sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==
-
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -3897,99 +1523,26 @@ ms@2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
   integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
 
-ms@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
-  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
-
-ms@^2.0.0, ms@^2.1.1, ms@^2.1.2:
+ms@^2.1.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-mute-stream@~0.0.4:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
-  integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
-
 nanoid@^3.1.22:
   version "3.1.22"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.22.tgz#b35f8fb7d151990a8aebd5aa5015c03cf726f844"
   integrity sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ==
 
-navaid@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/navaid/-/navaid-1.2.0.tgz#e77a85fd72ba37d521ca39e5c4df7a09aa26d442"
-  integrity sha512-Yh5mix394WrT5go29GFeFD4Gp4W0Xj1Ejs0KHXXCA24KKW74pq3PY3fwP3o18KveYO/pjUI2zzcAAp8kY98aNA==
-  dependencies:
-    regexparam "^1.0.2"
-
 negotiator@0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
   integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
 
-neo-async@^2.6.0:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
-  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
-
-nerf-dart@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/nerf-dart/-/nerf-dart-1.0.0.tgz#e6dab7febf5ad816ea81cf5c629c5a0ebde72c1a"
-  integrity sha1-5tq3/r9a2Bbqgc9cYpxaDr3nLBo=
-
-node-emoji@^1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da"
-  integrity sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==
-  dependencies:
-    lodash.toarray "^4.4.0"
-
-node-fetch@^2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
-  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
-
-node-gyp@^7.1.0, node-gyp@^7.1.2:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-7.1.2.tgz#21a810aebb187120251c3bcec979af1587b188ae"
-  integrity sha512-CbpcIo7C3eMu3dL1c3d0xw449fHIGALIJsRP4DDPHpyiW8vcriNY7ubh9TE4zEKfSxscY7PjeFnshE7h75ynjQ==
-  dependencies:
-    env-paths "^2.2.0"
-    glob "^7.1.4"
-    graceful-fs "^4.2.3"
-    nopt "^5.0.0"
-    npmlog "^4.1.2"
-    request "^2.88.2"
-    rimraf "^3.0.2"
-    semver "^7.3.2"
-    tar "^6.0.2"
-    which "^2.0.2"
-
-node-releases@^1.1.70:
+node-releases@^1.1.71:
   version "1.1.71"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.71.tgz#cb1334b179896b1c89ecfdd4b725fb7bbdfc7dbb"
   integrity sha512-zR6HoT6LrLCRBwukmrVbHv0EpEQjksO6GmFcZQQuCAy139BEsoVKPYnf3jongYW83fAa1torLGYwxxky/p28sg==
 
-nollup@>=0.8.4:
-  version "0.16.0"
-  resolved "https://registry.yarnpkg.com/nollup/-/nollup-0.16.0.tgz#447b6607dbe86c984dc89398090b28b44fe09e7f"
-  integrity sha512-rPtRhyPU9yWTOoMYnaZqkh9A6e7h8U6AdK/3515RnZ37s43pJJT1tADmEhamdsJ3ghAf0j5q98s4zQDgjgPW0g==
-  dependencies:
-    "@rollup/pluginutils" "^3.0.8"
-    acorn "^8.1.0"
-    chokidar "^3.5.1"
-    convert-source-map "^1.5.1"
-    express "^4.16.3"
-    express-history-api-fallback "^2.2.1"
-    express-http-proxy "^1.5.1"
-    express-ws "^4.0.0"
-    magic-string "^0.25.7"
-    mime-types "^2.1.29"
-    source-map "^0.5.6"
-    source-map-fast "npm:source-map@0.7.3"
-
 nollup@^0.14.1:
   version "0.14.4"
   resolved "https://registry.yarnpkg.com/nollup/-/nollup-0.14.4.tgz#ed9d309766190a42a8e3f651d34fa543e0d4ffb1"
@@ -4008,33 +1561,6 @@ nollup@^0.14.1:
     source-map "^0.5.6"
     source-map-fast "npm:source-map@0.7.3"
 
-nopt@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88"
-  integrity sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==
-  dependencies:
-    abbrev "1"
-
-normalize-package-data@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
-  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
-  dependencies:
-    hosted-git-info "^2.1.4"
-    resolve "^1.10.0"
-    semver "2 || 3 || 4 || 5"
-    validate-npm-package-license "^3.0.1"
-
-normalize-package-data@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-3.0.2.tgz#cae5c410ae2434f9a6c1baa65d5bc3b9366c8699"
-  integrity sha512-6CdZocmfGaKnIHPVFhJJZ3GuR8SsLKvDANFp47Jmy51aKIr8akjAWTSxtpI+MBgBFdSMRyo4hMpDlT6dTffgZg==
-  dependencies:
-    hosted-git-info "^4.0.1"
-    resolve "^1.20.0"
-    semver "^7.3.4"
-    validate-npm-package-license "^3.0.1"
-
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -4045,181 +1571,6 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
-normalize-url@^5.0.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-5.3.0.tgz#8959b3cdaa295b61592c1f245dded34b117618dd"
-  integrity sha512-9/nOVLYYe/dO/eJeQUNaGUF4m4Z5E7cb9oNTKabH+bNf19mqj60txTcveQxL0GlcWLXCxkOu2/LwL8oW0idIDA==
-
-npm-audit-report@^2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/npm-audit-report/-/npm-audit-report-2.1.4.tgz#b14c4625131fb7bcacc4b1c83842af1f58c92c98"
-  integrity sha512-Tz7rnfskSdZ0msTzt2mENC/B+H2QI8u0jN0ck7o3zDsQYIQrek/l3MjEc+CARer+64LsVTU6ZIqNuh0X55QPhw==
-  dependencies:
-    chalk "^4.0.0"
-
-npm-bundled@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b"
-  integrity sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==
-  dependencies:
-    npm-normalize-package-bin "^1.0.1"
-
-npm-install-checks@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/npm-install-checks/-/npm-install-checks-4.0.0.tgz#a37facc763a2fde0497ef2c6d0ac7c3fbe00d7b4"
-  integrity sha512-09OmyDkNLYwqKPOnbI8exiOZU2GVVmQp7tgez2BPi5OZC8M82elDAps7sxC4l//uSUtotWqoEIDwjRvWH4qz8w==
-  dependencies:
-    semver "^7.1.1"
-
-npm-normalize-package-bin@^1.0.0, npm-normalize-package-bin@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
-  integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==
-
-npm-package-arg@^8.0.0, npm-package-arg@^8.0.1, npm-package-arg@^8.1.0, npm-package-arg@^8.1.1, npm-package-arg@^8.1.2:
-  version "8.1.2"
-  resolved "https://registry.yarnpkg.com/npm-package-arg/-/npm-package-arg-8.1.2.tgz#b868016ae7de5619e729993fbd8d11dc3c52ab62"
-  integrity sha512-6Eem455JsSMJY6Kpd3EyWE+n5hC+g9bSyHr9K9U2zqZb7+02+hObQ2c0+8iDk/mNF+8r1MhY44WypKJAkySIYA==
-  dependencies:
-    hosted-git-info "^4.0.1"
-    semver "^7.3.4"
-    validate-npm-package-name "^3.0.0"
-
-npm-packlist@^2.1.4:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-2.1.5.tgz#43ef5bbb9f59b7c0ef91e0905f1dd707b4cfb33c"
-  integrity sha512-KCfK3Vi2F+PH1klYauoQzg81GQ8/GGjQRKYY6tRnpQUPKTs/1gBZSRWtTEd7jGdSn1LZL7gpAmJT+BcS55k2XQ==
-  dependencies:
-    glob "^7.1.6"
-    ignore-walk "^3.0.3"
-    npm-bundled "^1.1.1"
-    npm-normalize-package-bin "^1.0.1"
-
-npm-pick-manifest@^6.0.0, npm-pick-manifest@^6.1.0, npm-pick-manifest@^6.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/npm-pick-manifest/-/npm-pick-manifest-6.1.1.tgz#7b5484ca2c908565f43b7f27644f36bb816f5148"
-  integrity sha512-dBsdBtORT84S8V8UTad1WlUyKIY9iMsAmqxHbLdeEeBNMLQDlDWWra3wYUx9EBEIiG/YwAy0XyNHDd2goAsfuA==
-  dependencies:
-    npm-install-checks "^4.0.0"
-    npm-normalize-package-bin "^1.0.1"
-    npm-package-arg "^8.1.2"
-    semver "^7.3.4"
-
-npm-profile@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/npm-profile/-/npm-profile-5.0.2.tgz#4cff0710ac8d71280202b6c261b160cc0cace16a"
-  integrity sha512-hOhpH23PeWUFParJ6T1nquiHJLmFZ5VReTjBf1TJpl1YGuqfUS+ZYujVYPfuMbixosO82kWzvnxg4ZmP4VkTeg==
-  dependencies:
-    npm-registry-fetch "^9.0.0"
-
-npm-registry-fetch@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/npm-registry-fetch/-/npm-registry-fetch-9.0.0.tgz#86f3feb4ce00313bc0b8f1f8f69daae6face1661"
-  integrity sha512-PuFYYtnQ8IyVl6ib9d3PepeehcUeHN9IO5N/iCRhyg9tStQcqGQBRVHmfmMWPDERU3KwZoHFvbJ4FPXPspvzbA==
-  dependencies:
-    "@npmcli/ci-detect" "^1.0.0"
-    lru-cache "^6.0.0"
-    make-fetch-happen "^8.0.9"
-    minipass "^3.1.3"
-    minipass-fetch "^1.3.0"
-    minipass-json-stream "^1.0.1"
-    minizlib "^2.0.0"
-    npm-package-arg "^8.0.0"
-
-npm-run-path@^4.0.0, npm-run-path@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
-  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
-  dependencies:
-    path-key "^3.0.0"
-
-npm-user-validate@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/npm-user-validate/-/npm-user-validate-1.0.1.tgz#31428fc5475fe8416023f178c0ab47935ad8c561"
-  integrity sha512-uQwcd/tY+h1jnEaze6cdX/LrhWhoBxfSknxentoqmIuStxUExxjWd3ULMLFPiFUrZKbOVMowH6Jq2FRWfmhcEw==
-
-npm@^7.0.0:
-  version "7.7.6"
-  resolved "https://registry.yarnpkg.com/npm/-/npm-7.7.6.tgz#8cd025b76498809cdea4bf1bfff9b049115cc6a9"
-  integrity sha512-4dOo2M/SRzRNWH1e0tmcJMFkDjHJKsJQlxpi3OgJ/N/BsIvbdQFFMioG0vmuFVAev7P2f/rShApb18jk5RpdXA==
-  dependencies:
-    "@npmcli/arborist" "^2.2.9"
-    "@npmcli/ci-detect" "^1.2.0"
-    "@npmcli/config" "^2.0.0"
-    "@npmcli/run-script" "^1.8.4"
-    abbrev "~1.1.1"
-    ansicolors "~0.3.2"
-    ansistyles "~0.1.3"
-    archy "~1.0.0"
-    byte-size "^7.0.1"
-    cacache "^15.0.6"
-    chalk "^4.1.0"
-    chownr "^2.0.0"
-    cli-columns "^3.1.2"
-    cli-table3 "^0.6.0"
-    columnify "~1.5.4"
-    glob "^7.1.4"
-    graceful-fs "^4.2.6"
-    hosted-git-info "^4.0.2"
-    ini "^2.0.0"
-    init-package-json "^2.0.2"
-    is-cidr "^4.0.2"
-    json-parse-even-better-errors "^2.3.1"
-    leven "^3.1.0"
-    libnpmaccess "^4.0.1"
-    libnpmdiff "^2.0.4"
-    libnpmfund "^1.0.2"
-    libnpmhook "^6.0.1"
-    libnpmorg "^2.0.1"
-    libnpmpack "^2.0.1"
-    libnpmpublish "^4.0.0"
-    libnpmsearch "^3.1.0"
-    libnpmteam "^2.0.2"
-    libnpmversion "^1.1.0"
-    make-fetch-happen "^8.0.14"
-    minipass "^3.1.3"
-    minipass-pipeline "^1.2.4"
-    mkdirp "^1.0.4"
-    mkdirp-infer-owner "^2.0.0"
-    ms "^2.1.2"
-    node-gyp "^7.1.2"
-    nopt "^5.0.0"
-    npm-audit-report "^2.1.4"
-    npm-package-arg "^8.1.2"
-    npm-pick-manifest "^6.1.1"
-    npm-profile "^5.0.2"
-    npm-registry-fetch "^9.0.0"
-    npm-user-validate "^1.0.1"
-    npmlog "~4.1.2"
-    opener "^1.5.2"
-    pacote "^11.3.1"
-    parse-conflict-json "^1.1.1"
-    qrcode-terminal "^0.12.0"
-    read "~1.0.7"
-    read-package-json "^3.0.1"
-    read-package-json-fast "^2.0.2"
-    readdir-scoped-modules "^1.1.0"
-    rimraf "^3.0.2"
-    semver "^7.3.5"
-    ssri "^8.0.1"
-    tar "^6.1.0"
-    text-table "~0.2.0"
-    tiny-relative-date "^1.3.0"
-    treeverse "^1.0.4"
-    validate-npm-package-name "~3.0.0"
-    which "^2.0.2"
-    write-file-atomic "^3.0.3"
-
-npmlog@^4.1.2, npmlog@~4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
-  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
-  dependencies:
-    are-we-there-yet "~1.1.2"
-    console-control-strings "~1.1.0"
-    gauge "~2.7.3"
-    set-blocking "~2.0.0"
-
 nth-check@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
@@ -4227,53 +1578,16 @@ nth-check@^1.0.2:
   dependencies:
     boolbase "~1.0.0"
 
-number-is-nan@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
-  integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
-
-oauth-sign@~0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
-  integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
-
-object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
-
 object-inspect@^1.9.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.9.0.tgz#c90521d74e1127b67266ded3394ad6116986533a"
   integrity sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==
 
-object-is@^1.0.1:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
-  integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-
 object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
-object-keys@~0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-0.2.0.tgz#cddec02998b091be42bf1035ae32e49f1cb6ea67"
-  integrity sha1-zd7AKZiwkb5CvxA1rjLknxy26mc=
-  dependencies:
-    foreach "~2.0.1"
-    indexof "~0.0.1"
-    is "~0.2.6"
-
-object-keys@~0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-0.4.0.tgz#28a6aae7428dd2c3a92f3d95f21335dd204e0336"
-  integrity sha1-KKaq50KN0sOpLz2V8hM13SBOAzY=
-
 object.assign@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
@@ -4303,11 +1617,6 @@ object.values@^1.1.0:
     es-abstract "^1.18.0-next.2"
     has "^1.0.3"
 
-octal@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/octal/-/octal-1.0.0.tgz#63e7162a68efbeb9e213588d58e989d1e5c4530b"
-  integrity sha1-Y+cWKmjvvrniE1iNWOmJ0eXEUws=
-
 on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
@@ -4315,100 +1624,18 @@ on-finished@~2.3.0:
   dependencies:
     ee-first "1.1.1"
 
-once@^1.3.0, once@^1.3.1, once@^1.4.0:
+once@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
   dependencies:
     wrappy "1"
 
-onetime@^5.1.0, onetime@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
-  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
-  dependencies:
-    mimic-fn "^2.1.0"
-
-open@^7.2.1:
-  version "7.4.2"
-  resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321"
-  integrity sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==
-  dependencies:
-    is-docker "^2.0.0"
-    is-wsl "^2.1.1"
-
-opener@^1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
-  integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
-
-overlayscrollbars@^1.12.0:
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/overlayscrollbars/-/overlayscrollbars-1.13.1.tgz#0b840a88737f43a946b9d87875a2f9e421d0338a"
-  integrity sha512-gIQfzgGgu1wy80EB4/6DaJGHMEGmizq27xHIESrzXq0Y/J0Ay1P3DWk6tuVmEPIZH15zaBlxeEJOqdJKmowHCQ==
-
-p-each-series@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-2.2.0.tgz#105ab0357ce72b202a8a8b94933672657b5e2a9a"
-  integrity sha512-ycIL2+1V32th+8scbpTvyHNaHe02z0sjgh91XXjAk+ZeXoPN4Z46DVUnzdso0aX4KckKw0FNNFHdjZ2UsZvxiA==
-
-p-filter@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/p-filter/-/p-filter-2.1.0.tgz#1b1472562ae7a0f742f0f3d3d3718ea66ff9c09c"
-  integrity sha512-ZBxxZ5sL2HghephhpGAQdoskxplTwr7ICaehZwLIlfL6acuVgZPm8yBNuRAFBGEqtD/hmUeq9eqLg2ys9Xr/yw==
-  dependencies:
-    p-map "^2.0.0"
-
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
   integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
 
-p-is-promise@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-3.0.0.tgz#58e78c7dfe2e163cf2a04ff869e7c1dba64a5971"
-  integrity sha512-Wo8VsW4IRQSKVXsJCn7TomUaVtyfjVDn3nUP7kE967BQk0CwFpdbZs0X0uk5sW9mkBa9eNM7hCMaG93WUAwxYQ==
-
-p-limit@^1.1.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
-  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
-  dependencies:
-    p-try "^1.0.0"
-
-p-limit@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
-  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
-  dependencies:
-    p-try "^2.0.0"
-
-p-locate@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
-  integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
-  dependencies:
-    p-limit "^1.1.0"
-
-p-locate@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
-  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
-  dependencies:
-    p-limit "^2.2.0"
-
-p-map@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
-  integrity sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==
-
-p-map@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-4.0.0.tgz#bb2f95a5eda2ec168ec9274e06a747c3e2904d2b"
-  integrity sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==
-  dependencies:
-    aggregate-error "^3.0.0"
-
 p-queue@^6.6.2:
   version "6.6.2"
   resolved "https://registry.yarnpkg.com/p-queue/-/p-queue-6.6.2.tgz#2068a9dcf8e67dd0ec3e7a2bcb76810faa85e426"
@@ -4417,19 +1644,6 @@ p-queue@^6.6.2:
     eventemitter3 "^4.0.4"
     p-timeout "^3.2.0"
 
-p-reduce@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-2.1.0.tgz#09408da49507c6c274faa31f28df334bc712b64a"
-  integrity sha512-2USApvnsutq8uoxZBGbbWM0JIYLiEMJ9RlaN7fAzVNb9OZN0SHjjTTfIcb667XynS5Y1VhwDJVDa72TnPzAYWw==
-
-p-retry@^4.0.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-4.5.0.tgz#6685336b3672f9ee8174d3769a660cb5e488521d"
-  integrity sha512-5Hwh4aVQSu6BEP+w2zKlVXtFAaYQe1qWuVADSgoeVlLjwe/Q/AMSoRR4MDeaAfu8llT+YNbEijWu/YF3m6avkg==
-  dependencies:
-    "@types/retry" "^0.12.0"
-    retry "^0.12.0"
-
 p-timeout@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-3.2.0.tgz#c7e17abc971d2a7962ef83626b35d635acf23dfe"
@@ -4437,46 +1651,6 @@ p-timeout@^3.2.0:
   dependencies:
     p-finally "^1.0.0"
 
-p-try@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
-  integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
-
-p-try@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
-  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
-
-pacote@^11.1.11, pacote@^11.2.6, pacote@^11.3.0, pacote@^11.3.1:
-  version "11.3.1"
-  resolved "https://registry.yarnpkg.com/pacote/-/pacote-11.3.1.tgz#6ce95dd230db475cbd8789fd1f986bec51b4bf7c"
-  integrity sha512-TymtwoAG12cczsJIrwI/euOQKtjrQHlD0k0oyt9QSmZGpqa+KdlxKdWR/YUjYizkixaVyztxt/Wsfo8bL3A6Fg==
-  dependencies:
-    "@npmcli/git" "^2.0.1"
-    "@npmcli/installed-package-contents" "^1.0.6"
-    "@npmcli/promise-spawn" "^1.2.0"
-    "@npmcli/run-script" "^1.8.2"
-    cacache "^15.0.5"
-    chownr "^2.0.0"
-    fs-minipass "^2.1.0"
-    infer-owner "^1.0.4"
-    minipass "^3.1.3"
-    mkdirp "^1.0.3"
-    npm-package-arg "^8.0.1"
-    npm-packlist "^2.1.4"
-    npm-pick-manifest "^6.0.0"
-    npm-registry-fetch "^9.0.0"
-    promise-retry "^2.0.1"
-    read-package-json-fast "^2.0.1"
-    rimraf "^3.0.2"
-    ssri "^8.0.1"
-    tar "^6.1.0"
-
-parchment@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/parchment/-/parchment-1.1.4.tgz#aeded7ab938fe921d4c34bc339ce1168bc2ffde5"
-  integrity sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==
-
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -4484,26 +1658,6 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
-parse-asn1@^5.0.0, parse-asn1@^5.1.5:
-  version "5.1.6"
-  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.6.tgz#385080a3ec13cb62a62d39409cb3e88844cdaed4"
-  integrity sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==
-  dependencies:
-    asn1.js "^5.2.0"
-    browserify-aes "^1.0.0"
-    evp_bytestokey "^1.0.0"
-    pbkdf2 "^3.0.3"
-    safe-buffer "^5.1.1"
-
-parse-conflict-json@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/parse-conflict-json/-/parse-conflict-json-1.1.1.tgz#54ec175bde0f2d70abf6be79e0e042290b86701b"
-  integrity sha512-4gySviBiW5TRl7XHvp1agcS7SOe0KZOjC//71dzZVWJrY9hCrgtvl5v3SyIxCZ4fZF47TxD9nfzmxcx76xmbUw==
-  dependencies:
-    json-parse-even-better-errors "^2.3.0"
-    just-diff "^3.0.1"
-    just-diff-apply "^3.0.0"
-
 parse-json@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
@@ -4527,27 +1681,12 @@ parseurl@~1.3.3:
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
   integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
 
-path-exists@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
-  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
-
-path-exists@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
-  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
-
 path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
   integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
 
-path-is-inside@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
-  integrity sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=
-
-path-key@^3.0.0, path-key@^3.1.0:
+path-key@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
@@ -4567,67 +1706,16 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-pbkdf2@^3.0.3:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.1.tgz#cb8724b0fada984596856d1a6ebafd3584654b94"
-  integrity sha512-4Ejy1OPxi9f2tt1rRV7Go7zmfDQ+ZectEQz3VGUQhgq62HtIRPDyG/JtnwIxs6x3uNMwo2V7q1fMvKjb+Tnpqg==
-  dependencies:
-    create-hash "^1.1.2"
-    create-hmac "^1.1.4"
-    ripemd160 "^2.0.1"
-    safe-buffer "^5.0.1"
-    sha.js "^2.4.8"
-
-performance-now@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
-  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
-
-picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1, picomatch@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
-  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
-
-pify@^2.0.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
-  integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
-
-pify@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
-  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
-
-pify@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
-  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.3.tgz#465547f359ccc206d3c48e46a1bcb89bf7ee619d"
+  integrity sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==
 
 pify@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-5.0.0.tgz#1f5eca3f5e87ebec28cc6d54a0e4aaf00acc127f"
   integrity sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==
 
-pinkie-promise@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
-  integrity sha1-ITXW36ejWMBprJsXh3YogihFD/o=
-  dependencies:
-    pinkie "^2.0.0"
-
-pinkie@^2.0.0:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
-  integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
-
-pkg-conf@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/pkg-conf/-/pkg-conf-2.1.0.tgz#2126514ca6f2abfebd168596df18ba57867f0058"
-  integrity sha1-ISZRTKbyq/69FoWW3xi6V4Z/AFg=
-  dependencies:
-    find-up "^2.0.0"
-    load-json-file "^4.0.0"
-
 postcss-calc@^7.0.1:
   version "7.0.5"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.5.tgz#f8a6e99f12e619c2ebc23cf6c486fdc15860933e"
@@ -4925,12 +2013,11 @@ postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
     uniq "^1.0.1"
     util-deprecate "^1.0.2"
 
-postcss-svgo@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.2.tgz#17b997bc711b333bab143aaed3b8d3d6e3d38258"
-  integrity sha512-C6wyjo3VwFm0QgBy+Fu7gCYOkCmgmClghO+pjcxvrcBKtiKt0uCF+hvbMO1fyv5BMImRK90SMb+dwUnfbGd+jw==
+postcss-svgo@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.3.tgz#343a2cdbac9505d416243d496f724f38894c941e"
+  integrity sha512-NoRbrcMWTtUghzuKSoIm6XV+sJdvZ7GZSc3wdBN0W19FTtp2ko8NqLsgoh/m9CzNhU3KLPvQmjIwtaNFkaFTvw==
   dependencies:
-    is-svg "^3.0.0"
     postcss "^7.0.0"
     postcss-value-parser "^3.0.0"
     svgo "^1.0.0"
@@ -4963,72 +2050,20 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.27:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postcss@^8.2.1, postcss@^8.2.9:
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.9.tgz#fd95ff37b5cee55c409b3fdd237296ab4096fba3"
-  integrity sha512-b+TmuIL4jGtCHtoLi+G/PisuIl9avxs8IZMSmlABRwNz5RLUUACrC+ws81dcomz1nRezm5YPdXiMEzBEKgYn+Q==
+postcss@^8.2.9:
+  version "8.2.10"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.10.tgz#ca7a042aa8aff494b334d0ff3e9e77079f6f702b"
+  integrity sha512-b/h7CPV7QEdrqIxtAf2j31U5ef05uBDuvoXv6L51Q4rcS1jdlXAVKJv+atCFdUXYl9dyTHGyoMzIepwowRJjFw==
   dependencies:
     colorette "^1.2.2"
     nanoid "^3.1.22"
     source-map "^0.6.1"
 
-prism-svelte@^0.4.6:
-  version "0.4.7"
-  resolved "https://registry.yarnpkg.com/prism-svelte/-/prism-svelte-0.4.7.tgz#fbc6709450b4e2ed660ddb82c3718817fc584cbe"
-  integrity sha512-yABh19CYbM24V7aS7TuPYRNMqthxwbvx6FF/Rw920YbyBWO3tnyPIqRMgHuSVsLmuHkkBS1Akyof463FVdkeDQ==
-
-prismjs@^1.21.0:
-  version "1.23.0"
-  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33"
-  integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==
-  optionalDependencies:
-    clipboard "^2.0.0"
-
-process-es6@^0.11.2:
-  version "0.11.6"
-  resolved "https://registry.yarnpkg.com/process-es6/-/process-es6-0.11.6.tgz#c6bb389f9a951f82bd4eb169600105bd2ff9c778"
-  integrity sha1-xrs4n5qVH4K9TrFpYAEFvS/5x3g=
-
-process-nextick-args@~2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
-  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
-
-promise-all-reject-late@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/promise-all-reject-late/-/promise-all-reject-late-1.0.1.tgz#f8ebf13483e5ca91ad809ccc2fcf25f26f8643c2"
-  integrity sha512-vuf0Lf0lOxyQREH7GDIOUMLS7kz+gs8i6B+Yi8dC68a2sychGrHTJYghMBD6k7eUcH0H5P73EckCA48xijWqXw==
-
-promise-call-limit@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/promise-call-limit/-/promise-call-limit-1.0.1.tgz#4bdee03aeb85674385ca934da7114e9bcd3c6e24"
-  integrity sha512-3+hgaa19jzCGLuSCbieeRsu5C2joKfYn8pY6JAuXFRVfF4IO+L7UPpFWNTeWT9pM7uhskvbPPd/oEOktCn317Q==
-
-promise-inflight@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
-  integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
-
-promise-retry@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/promise-retry/-/promise-retry-2.0.1.tgz#ff747a13620ab57ba688f5fc67855410c370da22"
-  integrity sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==
-  dependencies:
-    err-code "^2.0.2"
-    retry "^0.12.0"
-
 promise.series@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/promise.series/-/promise.series-0.2.0.tgz#2cc7ebe959fc3a6619c04ab4dbdc9e452d864bbd"
   integrity sha1-LMfr6Vn8OmYZwEq029yeRS2GS70=
 
-promzard@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/promzard/-/promzard-0.3.0.tgz#26a5d6ee8c7dee4cb12208305acfb93ba382a9ee"
-  integrity sha1-JqXW7ox97kyxIggwWs+5O6OCqe4=
-  dependencies:
-    read "1"
-
 proxy-addr@~2.0.5:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
@@ -5037,121 +2072,23 @@ proxy-addr@~2.0.5:
     forwarded "~0.1.2"
     ipaddr.js "1.9.1"
 
-proxyquire@^2.1.3:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/proxyquire/-/proxyquire-2.1.3.tgz#2049a7eefa10a9a953346a18e54aab2b4268df39"
-  integrity sha512-BQWfCqYM+QINd+yawJz23tbBM40VIGXOdDw3X344KcclI/gtBbdWF6SlQ4nK/bYhF9d27KYug9WzljHC6B9Ysg==
-  dependencies:
-    fill-keys "^1.0.2"
-    module-not-found-error "^1.0.1"
-    resolve "^1.11.1"
-
-prr@~0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
-  integrity sha1-GoS4WQgyVQFBGFPQCB7j+obikmo=
-
-prr@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
-  integrity sha1-0/wRS6BplaRexok/SEzrHXj19HY=
-
-psl@^1.1.28:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
-  integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==
-
-public-encrypt@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
-  integrity sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==
-  dependencies:
-    bn.js "^4.1.0"
-    browserify-rsa "^4.0.0"
-    create-hash "^1.1.0"
-    parse-asn1 "^5.0.0"
-    randombytes "^2.0.1"
-    safe-buffer "^5.1.2"
-
-pump@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
-  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
-  dependencies:
-    end-of-stream "^1.1.0"
-    once "^1.3.1"
-
-punycode@^2.1.0, punycode@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
-  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
-
-q@^1.1.2, q@^1.5.1:
+q@^1.1.2:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
-qrcode-terminal@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/qrcode-terminal/-/qrcode-terminal-0.12.0.tgz#bb5b699ef7f9f0505092a3748be4464fe71b5819"
-  integrity sha512-EXtzRZmC+YGmGlDFbXKxQiMZNwCLEO6BANKXG4iCtSIM0yqc/pappSx3RIKr4r0uh5JsBckOXeKrB3Iz7mdQpQ==
-
 qs@6.7.0:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
   integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
 
-qs@~6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
-  integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
-
-queue-microtask@^1.2.2:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
-  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
-
-quick-lru@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
-  integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
-
-quill-delta@^3.6.2:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/quill-delta/-/quill-delta-3.6.3.tgz#b19fd2b89412301c60e1ff213d8d860eac0f1032"
-  integrity sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==
-  dependencies:
-    deep-equal "^1.0.1"
-    extend "^3.0.2"
-    fast-diff "1.1.2"
-
-quill@^1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.7.tgz#da5b2f3a2c470e932340cdbf3668c9f21f9286e8"
-  integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==
-  dependencies:
-    clone "^2.1.1"
-    deep-equal "^1.0.1"
-    eventemitter3 "^2.0.3"
-    extend "^3.0.2"
-    parchment "^1.1.4"
-    quill-delta "^3.6.2"
-
-randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
+randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
   integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
   dependencies:
     safe-buffer "^5.1.0"
 
-randomfill@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"
-  integrity sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==
-  dependencies:
-    randombytes "^2.0.5"
-    safe-buffer "^5.1.0"
-
 range-parser@~1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
@@ -5177,117 +2114,6 @@ raw-body@^2.3.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-rc@^1.2.8:
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
-  integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
-  dependencies:
-    deep-extend "^0.6.0"
-    ini "~1.3.0"
-    minimist "^1.2.0"
-    strip-json-comments "~2.0.1"
-
-read-cmd-shim@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-2.0.0.tgz#4a50a71d6f0965364938e9038476f7eede3928d9"
-  integrity sha512-HJpV9bQpkl6KwjxlJcBoqu9Ba0PQg8TqSNIOrulGt54a0uup0HtevreFHzYzkm0lpnleRdNBzXznKrgxglEHQw==
-
-read-package-json-fast@^2.0.1, read-package-json-fast@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/read-package-json-fast/-/read-package-json-fast-2.0.2.tgz#2dcb24d9e8dd50fb322042c8c35a954e6cc7ac9e"
-  integrity sha512-5fyFUyO9B799foVk4n6ylcoAktG/FbE3jwRKxvwaeSrIunaoMc0u81dzXxjeAFKOce7O5KncdfwpGvvs6r5PsQ==
-  dependencies:
-    json-parse-even-better-errors "^2.3.0"
-    npm-normalize-package-bin "^1.0.1"
-
-read-package-json@^3.0.0, read-package-json@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/read-package-json/-/read-package-json-3.0.1.tgz#c7108f0b9390257b08c21e3004d2404c806744b9"
-  integrity sha512-aLcPqxovhJTVJcsnROuuzQvv6oziQx4zd3JvG0vGCL5MjTONUc4uJ90zCBC6R7W7oUKBNoR/F8pkyfVwlbxqng==
-  dependencies:
-    glob "^7.1.1"
-    json-parse-even-better-errors "^2.3.0"
-    normalize-package-data "^3.0.0"
-    npm-normalize-package-bin "^1.0.0"
-
-read-pkg-up@^7.0.0, read-pkg-up@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
-  integrity sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==
-  dependencies:
-    find-up "^4.1.0"
-    read-pkg "^5.2.0"
-    type-fest "^0.8.1"
-
-read-pkg@^5.0.0, read-pkg@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
-  integrity sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==
-  dependencies:
-    "@types/normalize-package-data" "^2.4.0"
-    normalize-package-data "^2.5.0"
-    parse-json "^5.0.0"
-    type-fest "^0.6.0"
-
-read@1, read@~1.0.1, read@~1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/read/-/read-1.0.7.tgz#b3da19bd052431a97671d44a42634adf710b40c4"
-  integrity sha1-s9oZvQUkMal2cdRKQmNK33ELQMQ=
-  dependencies:
-    mute-stream "~0.0.4"
-
-readable-stream@3, readable-stream@^3.0.0, readable-stream@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
-  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
-  dependencies:
-    inherits "^2.0.3"
-    string_decoder "^1.1.1"
-    util-deprecate "^1.0.1"
-
-readable-stream@^1.0.26-4:
-  version "1.1.14"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
-  integrity sha1-fPTFTvZI44EwhMY23SB54WbAgdk=
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
-
-readable-stream@^2.0.0, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.2.2, readable-stream@~2.3.6:
-  version "2.3.7"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
-  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~2.0.0"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.1.1"
-    util-deprecate "~1.0.1"
-
-readable-stream@~1.0.26, readable-stream@~1.0.26-4:
-  version "1.0.34"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
-  integrity sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
-
-readdir-scoped-modules@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.1.0.tgz#8d45407b4f870a0dcaebc0e28670d18e74514309"
-  integrity sha512-asaikDeqAQg7JifRsZn1NJZXo9E+VwlyCfbkZhwyISinqk5zNS6266HS5kah6P0SaQKGF6SkNnZVHUzHFYxYDw==
-  dependencies:
-    debuglog "^1.0.1"
-    dezalgo "^1.0.0"
-    graceful-fs "^4.1.2"
-    once "^1.3.0"
-
 readdirp@~3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
@@ -5295,72 +2121,6 @@ readdirp@~3.5.0:
   dependencies:
     picomatch "^2.2.1"
 
-redent@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
-  integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
-  dependencies:
-    indent-string "^4.0.0"
-    strip-indent "^3.0.0"
-
-redeyed@~2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/redeyed/-/redeyed-2.1.1.tgz#8984b5815d99cb220469c99eeeffe38913e6cc0b"
-  integrity sha1-iYS1gV2ZyyIEacme7v/jiRPmzAs=
-  dependencies:
-    esprima "~4.0.0"
-
-regexp.prototype.flags@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz#7ef352ae8d159e758c0eadca6f8fcb4eef07be26"
-  integrity sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-
-regexparam@^1.0.2:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
-  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
-
-registry-auth-token@^4.0.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-4.2.1.tgz#6d7b4006441918972ccd5fedcd41dc322c79b250"
-  integrity sha512-6gkSb4U6aWJB4SF2ZvLb76yCBjcvufXBqvvEx1HbmKPkutswjW1xNVRY0+daljIYRbogN7O0etYSlbiaEQyMyw==
-  dependencies:
-    rc "^1.2.8"
-
-request@^2.88.2:
-  version "2.88.2"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
-  integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
-  dependencies:
-    aws-sign2 "~0.7.0"
-    aws4 "^1.8.0"
-    caseless "~0.12.0"
-    combined-stream "~1.0.6"
-    extend "~3.0.2"
-    forever-agent "~0.6.1"
-    form-data "~2.3.2"
-    har-validator "~5.1.3"
-    http-signature "~1.2.0"
-    is-typedarray "~1.0.0"
-    isstream "~0.1.2"
-    json-stringify-safe "~5.0.1"
-    mime-types "~2.1.19"
-    oauth-sign "~0.9.0"
-    performance-now "^2.1.0"
-    qs "~6.5.2"
-    safe-buffer "^5.1.2"
-    tough-cookie "~2.5.0"
-    tunnel-agent "^0.6.0"
-    uuid "^3.3.2"
-
-require-directory@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
-  integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
-
 require-relative@^0.8.7:
   version "0.8.7"
   resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
@@ -5381,7 +2141,7 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
-resolve@^1.10.0, resolve@^1.11.1, resolve@^1.17.0, resolve@^1.19.0, resolve@^1.20.0:
+resolve@^1.17.0, resolve@^1.19.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -5389,16 +2149,6 @@ resolve@^1.10.0, resolve@^1.11.1, resolve@^1.17.0, resolve@^1.19.0, resolve@^1.2
     is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
-retry@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
-  integrity sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=
-
-reusify@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
-  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
-
 rgb-regex@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
@@ -5409,78 +2159,6 @@ rgba-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
   integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
 
-rimraf@^2.6.3:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
-  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
-  dependencies:
-    glob "^7.1.3"
-
-rimraf@^3.0.0, rimraf@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
-  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
-  dependencies:
-    glob "^7.1.3"
-
-ripemd160@^2.0.0, ripemd160@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
-  integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
-  dependencies:
-    hash-base "^3.0.0"
-    inherits "^2.0.1"
-
-rollup-plugin-copy@^3.3.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-copy/-/rollup-plugin-copy-3.4.0.tgz#f1228a3ffb66ffad8606e2f3fb7ff23141ed3286"
-  integrity sha512-rGUmYYsYsceRJRqLVlE9FivJMxJ7X6jDlP79fmFkL8sJs7VVMSVyA2yfyL+PGyO/vJs4A87hwhgVfz61njI+uQ==
-  dependencies:
-    "@types/fs-extra" "^8.0.1"
-    colorette "^1.1.0"
-    fs-extra "^8.1.0"
-    globby "10.0.1"
-    is-plain-object "^3.0.0"
-
-rollup-plugin-delete@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-delete/-/rollup-plugin-delete-1.2.0.tgz#a7e45ca4c5480308fa355d11de622f22e7075e12"
-  integrity sha512-k2vHnECLSVpT1OqK2wblt+ZIxJ7dmnaaYdb6AsBRpl4Ilpy10ibSnXVD7nJTRaB7KRP02XDRt0SCZ8vWi+VPdQ==
-  dependencies:
-    del "^4.1.1"
-
-rollup-plugin-hot-nollup@^0.1.0, rollup-plugin-hot-nollup@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-hot-nollup/-/rollup-plugin-hot-nollup-0.1.2.tgz#a892952e94c76ac0e99d63be988c700d33e4e721"
-  integrity sha512-QE4/CO7CFWSwZDmp/K+bMEOdP+i9aZiEw2u1sF+BiYE+0VQTu/FfzhJUxI0PDthBjzLZfEW31rwQJhVueuSL8w==
-  dependencies:
-    "@rollup/pluginutils" "^3.1.0"
-
-rollup-plugin-hot@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-hot/-/rollup-plugin-hot-0.1.1.tgz#78ce3b9f26e7d7b1f4de0255c0fdb368caacaf1a"
-  integrity sha512-TmNnN64LeVVe7J3pQjUQGdxcffNQAX7vioJ0MvZjzNFNRCxu3adGRvJ1SzrqyD9q0CfgjLrRKwSiv+UAd8Ww0g==
-  dependencies:
-    cors "^2.8.5"
-    execa "^4.0.3"
-    express "^4.17.1"
-    express-http-proxy "^1.6.2"
-    mime-types "^2.1.26"
-    open "^7.2.1"
-    rollup-plugin-hot-nollup "^0.1.0"
-    rollup-pluginutils "^2.8.2"
-    ws "^7.1.2"
-
-rollup-plugin-node-builtins@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-node-builtins/-/rollup-plugin-node-builtins-2.1.2.tgz#24a1fed4a43257b6b64371d8abc6ce1ab14597e9"
-  integrity sha1-JKH+1KQyV7a2Q3HYq8bOGrFFl+k=
-  dependencies:
-    browserify-fs "^1.0.0"
-    buffer-es6 "^4.9.2"
-    crypto-browserify "^3.11.0"
-    process-es6 "^0.11.2"
-
 rollup-plugin-postcss@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/rollup-plugin-postcss/-/rollup-plugin-postcss-4.0.0.tgz#2131fb6db0d5dce01a37235e4f6ad4523c681cea"
@@ -5500,18 +2178,23 @@ rollup-plugin-postcss@^4.0.0:
     safe-identifier "^0.4.2"
     style-inject "^0.3.0"
 
-rollup-plugin-svelte-hot@^0.11.0:
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-svelte-hot/-/rollup-plugin-svelte-hot-0.11.2.tgz#b7e1ad5779307878e6a2f563e17ec2de5e7c281c"
-  integrity sha512-3cQnFZlrQbknbEwtEwxC2TcT2HO3BYR4/9A/7Dfzm93sQ4lvyAYlCh4JS4FximrR1jWrI/mgaOtUKYDudGIkmg==
+rollup-plugin-svelte@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-svelte/-/rollup-plugin-svelte-7.1.0.tgz#d45f2b92b1014be4eb46b55aa033fb9a9c65f04d"
+  integrity sha512-vopCUq3G+25sKjwF5VilIbiY6KCuMNHP1PFvx2Vr3REBNMDllKHFZN2B9jwwC+MqNc3UPKkjXnceLPEjTjXGXg==
   dependencies:
     require-relative "^0.8.7"
-    rollup-plugin-hot-nollup "^0.1.2"
     rollup-pluginutils "^2.8.2"
-    sourcemap-codec "^1.4.8"
-    svelte-hmr "^0.11.3"
-  optionalDependencies:
-    nollup ">=0.8.4"
+
+rollup-plugin-terser@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"
+  integrity sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    jest-worker "^26.2.1"
+    serialize-javascript "^4.0.0"
+    terser "^5.0.0"
 
 rollup-pluginutils@^2.8.2:
   version "2.8.2"
@@ -5520,38 +2203,19 @@ rollup-pluginutils@^2.8.2:
   dependencies:
     estree-walker "^0.6.1"
 
-rollup@^2.34.0, rollup@^2.38.5:
-  version "2.44.0"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.44.0.tgz#8da324d1c4fd12beef9ae6e12f4068265b6d95eb"
-  integrity sha512-rGSF4pLwvuaH/x4nAS+zP6UNn5YUDWf/TeEU5IoXSZKBbKRNTCI3qMnYXKZgrC0D2KzS2baiOZt1OlqhMu5rnQ==
+rollup@^2.45.2:
+  version "2.45.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.45.2.tgz#8fb85917c9f35605720e92328f3ccbfba6f78b48"
+  integrity sha512-kRRU7wXzFHUzBIv0GfoFFIN3m9oteY4uAsKllIpQDId5cfnkWF2J130l+27dzDju0E6MScKiV0ZM5Bw8m4blYQ==
   optionalDependencies:
     fsevents "~2.3.1"
 
-routix@^0.0.3-5:
-  version "0.0.3-5"
-  resolved "https://registry.yarnpkg.com/routix/-/routix-0.0.3-5.tgz#b3fbabf1a4912475d96d7faeb48bb685a1c6784a"
-  integrity sha512-G61yPS3qpfZnAjGvnWta0nRDx71h8Wpht6trrj4sA6Jz6S6z/9itFYBnd9M2A846jYAUpOwNhYxPZ6Xe6oZ9Aw==
-
-run-parallel@^1.1.9:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
-  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
-  dependencies:
-    queue-microtask "^1.2.2"
-
-sade@^1.4.0:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/sade/-/sade-1.7.4.tgz#ea681e0c65d248d2095c90578c03ca0bb1b54691"
-  integrity sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA==
-  dependencies:
-    mri "^1.1.0"
-
-safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+safe-buffer@5.1.2, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@~5.2.0:
+safe-buffer@^5.1.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -5561,7 +2225,7 @@ safe-identifier@^0.4.2:
   resolved "https://registry.yarnpkg.com/safe-identifier/-/safe-identifier-0.4.2.tgz#cf6bfca31c2897c588092d1750d30ef501d59fcb"
   integrity sha512-6pNbSMW6OhAi9j+N8V+U715yBQsaWJ7eyEUaOrawX+isg5ZxhUlV1NipNtgaKHmFGiABwt+ZF04Ii+3Xjkg+8w==
 
-"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
+"safer-buffer@>= 2.1.2 < 3":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
@@ -5571,79 +2235,6 @@ sax@~1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-select@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
-  integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
-
-semantic-release@^17.0.8:
-  version "17.4.2"
-  resolved "https://registry.yarnpkg.com/semantic-release/-/semantic-release-17.4.2.tgz#b5147b5a629c227b7074ad4cc89920a14cb08c96"
-  integrity sha512-TPLWuoe2L2DmgnQEh+OLWW5V1T+ZAa1xWuHXsuPAWEko0BqSdLPl+5+BlQ+D5Bp27S5gDJ1//Y1tgbmvUhnOCw==
-  dependencies:
-    "@semantic-release/commit-analyzer" "^8.0.0"
-    "@semantic-release/error" "^2.2.0"
-    "@semantic-release/github" "^7.0.0"
-    "@semantic-release/npm" "^7.0.0"
-    "@semantic-release/release-notes-generator" "^9.0.0"
-    aggregate-error "^3.0.0"
-    cosmiconfig "^7.0.0"
-    debug "^4.0.0"
-    env-ci "^5.0.0"
-    execa "^5.0.0"
-    figures "^3.0.0"
-    find-versions "^4.0.0"
-    get-stream "^6.0.0"
-    git-log-parser "^1.2.0"
-    hook-std "^2.0.0"
-    hosted-git-info "^4.0.0"
-    lodash "^4.17.15"
-    marked "^2.0.0"
-    marked-terminal "^4.1.1"
-    micromatch "^4.0.2"
-    p-each-series "^2.1.0"
-    p-reduce "^2.0.0"
-    read-pkg-up "^7.0.0"
-    resolve-from "^5.0.0"
-    semver "^7.3.2"
-    semver-diff "^3.1.1"
-    signale "^1.2.1"
-    yargs "^16.2.0"
-
-semver-diff@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-3.1.1.tgz#05f77ce59f325e00e2706afd67bb506ddb1ca32b"
-  integrity sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==
-  dependencies:
-    semver "^6.3.0"
-
-semver-regex@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-3.1.2.tgz#34b4c0d361eef262e07199dbef316d0f2ab11807"
-  integrity sha512-bXWyL6EAKOJa81XG1OZ/Yyuq+oT0b2YLlxx7c+mrdYPaPbnj6WgVULXhinMIeZGufuUBu/eVRqXEhiv4imfwxA==
-
-"semver@2 || 3 || 4 || 5":
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
-  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
-
-semver@^6.0.0, semver@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
-  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
-
-semver@^7.1.1, semver@^7.1.2, semver@^7.1.3, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
-  version "7.3.5"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
-  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
-  dependencies:
-    lru-cache "^6.0.0"
-
-semver@~2.3.1:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-2.3.2.tgz#b9848f25d6cf36333073ec9ef8856d42f1233e52"
-  integrity sha1-uYSPJdbPNjMwc+ye+IVtQvEjPlI=
-
 send@0.17.1:
   version "0.17.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
@@ -5663,6 +2254,13 @@ send@0.17.1:
     range-parser "~1.2.1"
     statuses "~1.5.0"
 
+serialize-javascript@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
+  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
+  dependencies:
+    randombytes "^2.1.0"
+
 serve-static@1.14.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9"
@@ -5673,24 +2271,11 @@ serve-static@1.14.1:
     parseurl "~1.3.3"
     send "0.17.1"
 
-set-blocking@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
-  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
-
 setprototypeof@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
   integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
 
-sha.js@^2.4.0, sha.js@^2.4.8:
-  version "2.4.11"
-  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"
-  integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==
-  dependencies:
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -5703,20 +2288,6 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
-  integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
-
-signale@^1.2.1:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/signale/-/signale-1.4.0.tgz#c4be58302fb0262ac00fc3d886a7c113759042f1"
-  integrity sha512-iuh+gPf28RkltuJC7W5MRi6XAjTDCAPC/prJUpQoG4vIP3MJZ+GTydVnodXA7pwvTKb2cA0m9OFZW/cdWy/I/w==
-  dependencies:
-    chalk "^2.3.2"
-    figures "^2.0.0"
-    pkg-conf "^2.1.0"
-
 simple-swizzle@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
@@ -5724,153 +2295,40 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
-sirv-cli@^0.4.6:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/sirv-cli/-/sirv-cli-0.4.6.tgz#c28ab20deb3b34637f5a60863dc350f055abca04"
-  integrity sha512-/Vj85/kBvPL+n9ibgX6FicLE8VjidC1BhlX67PYPBfbBAphzR6i0k0HtU5c2arejfU3uzq8l3SYPCwl1x7z6Ww==
-  dependencies:
-    console-clear "^1.1.0"
-    get-port "^3.2.0"
-    kleur "^3.0.0"
-    local-access "^1.0.1"
-    sade "^1.4.0"
-    sirv "^0.4.6"
-    tinydate "^1.0.0"
-
-sirv@^0.4.6:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/sirv/-/sirv-0.4.6.tgz#185e44eb93d24009dd183b7494285c5180b81f22"
-  integrity sha512-rYpOXlNbpHiY4nVXxuDf4mXPvKz1reZGap/LkWp9TvcZ84qD/nPBjjH/6GZsgIjVMbOslnY8YYULAyP8jMn1GQ==
-  dependencies:
-    "@polka/url" "^0.5.0"
-    mime "^2.3.1"
-
-slash@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
-  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
-
-smart-buffer@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.1.0.tgz#91605c25d91652f4661ea69ccf45f1b331ca21ba"
-  integrity sha512-iVICrxOzCynf/SNaBQCw34eM9jROU/s5rzIhpOvzhzuYHfJR/DhZfDkXiZSgKXfgv26HT3Yni3AV/DGw0cGnnw==
-
-socks-proxy-agent@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-5.0.0.tgz#7c0f364e7b1cf4a7a437e71253bed72e9004be60"
-  integrity sha512-lEpa1zsWCChxiynk+lCycKuC502RxDWLKJZoIhnxrWNjLSDGYRFflHA1/228VkRcnv9TIb8w98derGbpKxJRgA==
-  dependencies:
-    agent-base "6"
-    debug "4"
-    socks "^2.3.3"
-
-socks@^2.3.3:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/socks/-/socks-2.6.0.tgz#6b984928461d39871b3666754b9000ecf39dfac2"
-  integrity sha512-mNmr9owlinMplev0Wd7UHFlqI4ofnBnNzFuzrm63PPaHgbkqCFe4T5LzwKmtQ/f2tX0NTpcdVLyD/FHxFBstYw==
-  dependencies:
-    ip "^1.1.5"
-    smart-buffer "^4.1.0"
-
-"source-map-fast@npm:source-map@0.7.3", source-map@^0.7.3:
+"source-map-fast@npm:source-map@0.7.3", source-map@~0.7.2:
+  name source-map-fast
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
+source-map-support@~0.5.19:
+  version "0.5.19"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
+  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
 source-map@^0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.6.1:
+source-map@^0.6.0, source-map@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8:
+sourcemap-codec@^1.4.4:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
-spawn-error-forwarder@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/spawn-error-forwarder/-/spawn-error-forwarder-1.0.0.tgz#1afd94738e999b0346d7b9fc373be55e07577029"
-  integrity sha1-Gv2Uc46ZmwNG17n8NzvlXgdXcCk=
-
-spdx-correct@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
-  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
-  dependencies:
-    spdx-expression-parse "^3.0.0"
-    spdx-license-ids "^3.0.0"
-
-spdx-exceptions@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
-  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
-
-spdx-expression-parse@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
-  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
-  dependencies:
-    spdx-exceptions "^2.1.0"
-    spdx-license-ids "^3.0.0"
-
-spdx-license-ids@^3.0.0:
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.7.tgz#e9c18a410e5ed7e12442a549fbd8afa767038d65"
-  integrity sha512-U+MTEOO0AiDzxwFvoa4JVnMV6mZlJKk2sBLt90s7G0Gd0Mlknc7kxEn3nuDPNZRta7O2uy8oLcZLVT+4sqNZHQ==
-
-split2@^3.0.0:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/split2/-/split2-3.2.2.tgz#bf2cf2a37d838312c249c89206fd7a17dd12365f"
-  integrity sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==
-  dependencies:
-    readable-stream "^3.0.0"
-
-split2@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/split2/-/split2-1.0.0.tgz#52e2e221d88c75f9a73f90556e263ff96772b314"
-  integrity sha1-UuLiIdiMdfmnP5BVbiY/+WdysxQ=
-  dependencies:
-    through2 "~2.0.0"
-
-split@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/split/-/split-1.0.1.tgz#605bd9be303aa59fb35f9229fbea0ddec9ea07d9"
-  integrity sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==
-  dependencies:
-    through "2"
-
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
-sshpk@^1.7.0:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"
-  integrity sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==
-  dependencies:
-    asn1 "~0.2.3"
-    assert-plus "^1.0.0"
-    bcrypt-pbkdf "^1.0.0"
-    dashdash "^1.12.0"
-    ecc-jsbn "~0.1.1"
-    getpass "^0.1.1"
-    jsbn "~0.1.0"
-    safer-buffer "^2.0.2"
-    tweetnacl "~0.14.0"
-
-ssri@^8.0.0, ssri@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/ssri/-/ssri-8.0.1.tgz#638e4e439e2ffbd2cd289776d5ca457c4f51a2af"
-  integrity sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==
-  dependencies:
-    minipass "^3.1.1"
-
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
@@ -5881,50 +2339,11 @@ stable@^0.1.8:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
 
-stream-combiner2@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/stream-combiner2/-/stream-combiner2-1.1.1.tgz#fb4d8a1420ea362764e21ad4780397bebcb41cbe"
-  integrity sha1-+02KFCDqNidk4hrUeAOXvry0HL4=
-  dependencies:
-    duplexer2 "~0.1.0"
-    readable-stream "^2.0.2"
-
 string-hash@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
   integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=
 
-string-range@~1.2, string-range@~1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/string-range/-/string-range-1.2.2.tgz#a893ed347e72299bc83befbbf2a692a8d239d5dd"
-  integrity sha1-qJPtNH5yKZvIO++78qaSqNI51d0=
-
-string-width@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
-  integrity sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=
-  dependencies:
-    code-point-at "^1.0.0"
-    is-fullwidth-code-point "^1.0.0"
-    strip-ansi "^3.0.0"
-
-"string-width@^1.0.2 || 2", string-width@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
-  integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
-  dependencies:
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^4.0.0"
-
-string-width@^4.1.0, string-width@^4.2.0:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5"
-  integrity sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.0"
-
 string.prototype.trimend@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz#e75ae90c2942c63504686c18b287b4a0b1a45f80"
@@ -5941,73 +2360,6 @@ string.prototype.trimstart@^1.0.4:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
 
-string_decoder@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
-  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
-  dependencies:
-    safe-buffer "~5.2.0"
-
-string_decoder@~0.10.x:
-  version "0.10.31"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
-  integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
-
-string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
-  dependencies:
-    safe-buffer "~5.1.0"
-
-stringify-package@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/stringify-package/-/stringify-package-1.0.1.tgz#e5aa3643e7f74d0f28628b72f3dad5cecfc3ba85"
-  integrity sha512-sa4DUQsYciMP1xhKWGuFM04fB0LG/9DlluZoSVywUMRNvzid6XucHK0/90xGxRoHrAaROrcHK1aPKaijCtSrhg==
-
-strip-ansi@^3.0.0, strip-ansi@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
-  integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
-  dependencies:
-    ansi-regex "^2.0.0"
-
-strip-ansi@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
-  integrity sha1-qEeQIusaw2iocTibY1JixQXuNo8=
-  dependencies:
-    ansi-regex "^3.0.0"
-
-strip-ansi@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
-  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
-  dependencies:
-    ansi-regex "^5.0.0"
-
-strip-bom@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
-  integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
-
-strip-final-newline@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
-  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
-
-strip-indent@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
-  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
-  dependencies:
-    min-indent "^1.0.0"
-
-strip-json-comments@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
-  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
-
 style-inject@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/style-inject/-/style-inject-0.3.0.tgz#d21c477affec91811cc82355832a700d22bf8dd3"
@@ -6043,63 +2395,22 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-supports-hyperlinks@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.1.0.tgz#f663df252af5f37c5d49bbd7eeefa9e0b9e59e47"
-  integrity sha512-zoE5/e+dnEijk6ASB6/qrK+oYdm2do1hjoLWrqUC/8WEIW1gbxFcKuBof7sW8ArN6e+AYvsE8HBGiVRWL/F5CA==
-  dependencies:
-    has-flag "^4.0.0"
-    supports-color "^7.0.0"
-
-svelte-flatpickr@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/svelte-flatpickr/-/svelte-flatpickr-2.4.0.tgz#190871fc3305956c8c8fd3601cd036b8ac71ef49"
-  integrity sha512-UUC5Te+b0qi4POg7VDwfGh0m5W3Hf64OwkfOTj6FEe/dYZN4cBzpQ82EuuQl0CTbbBAsMkcjJcixV1d2V6EHCQ==
+svelte-flatpickr@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/svelte-flatpickr/-/svelte-flatpickr-3.1.0.tgz#ad83588430dbd55196a1a258b8ba27e7f9c1ee37"
+  integrity sha512-zKyV+ukeVuJ8CW0Ing3T19VSekc4bPkou/5Riutt1yATrLvSsanNqcgqi7Q5IePvIoOF9GJ5OtHvn1qK9Wx9BQ==
   dependencies:
     flatpickr "^4.5.2"
 
-svelte-hmr@^0.11.3:
-  version "0.11.6"
-  resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.11.6.tgz#67f0498e2cdce9e1039631d820c1951bd01caa3f"
-  integrity sha512-XUYcp7W26q/fF8tABZfCYGklwL4TDH48gc1KOjuBQNlTiMW63l/+rRqmfVOE/qKG5vns0J2NPo3zFjdahkwoHA==
-
-svelte-hmr@^0.13.3:
-  version "0.13.3"
-  resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.13.3.tgz#fba5739b477ea44caf70e542a24a4352bee2b897"
-  integrity sha512-gagW62pLQ2lULmvNA3pIZu9pBCYOaGu3rQikUOv6Nokz5VxUgT9/mQLfMxj9phDEKHCg/lgr3i6PkqZDbO9P2Q==
-
-svelte-key@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/svelte-key/-/svelte-key-1.0.0.tgz#8c570667d52b58423a0b0d543cc5323b3db356e8"
-  integrity sha512-+aM/gdxrkMrCSRWthqj0YIAUpsrwfPKn4VOAHjbn4HZVfZ36ai1P6EWq2Suf5m5WO/2Pa7xUYviVdK80zsoz7A==
-
 svelte-portal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
   integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
 
-svelte@^3.29.0:
-  version "3.36.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.36.0.tgz#3fc4c6fc7a04c3d4249b4fcccae28fc14f442f64"
-  integrity sha512-LSmdCYoAS6kzLff9nejB5KK5FBJaqyiivs7hPl0OJZ+OxiggI8lMAhvo5W3y8vSP0IWS5++Yb5EbKuQdzOSIoA==
-
-svench@^0.0.10-7:
-  version "0.0.10-7"
-  resolved "https://registry.yarnpkg.com/svench/-/svench-0.0.10-7.tgz#7eb1dde6d3609c258eab5c690c04195e72765668"
-  integrity sha512-1sblZcOBeZt0C3+T1MldPPe8X/8UbG9t+9CRq9HtX63Xge72ZGtyEWEQCBi0B2ZRusTFQmURiV+O16LKQI85TQ==
-  dependencies:
-    clipboard "^2.0.6"
-    color-js "^1.0.5"
-    dedent "^0.7.0"
-    esm "^3.2.25"
-    navaid "^1.1.0"
-    overlayscrollbars "^1.12.0"
-    prism-svelte "^0.4.6"
-    prismjs "^1.21.0"
-    proxyquire "^2.1.3"
-    routix "^0.0.3-5"
-    svelte-key "^1.0.0"
-    zingtouch "^1.0.6"
+svelte@^3.37.0:
+  version "3.37.0"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.37.0.tgz#dc7cd24bcc275cdb3f8c684ada89e50489144ccd"
+  integrity sha512-TRF30F4W4+d+Jr2KzUUL1j8Mrpns/WM/WacxYlo5MMb2E5Qy2Pk1Guj6GylxsW9OnKQl1tnF8q3hG/hQ3h6VUA==
 
 svgo@^1.0.0:
   version "1.3.2"
@@ -6120,84 +2431,20 @@ svgo@^1.0.0:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
-tar@^6.0.2, tar@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.0.tgz#d1724e9bcc04b977b18d5c573b333a2207229a83"
-  integrity sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==
+terser@^5.0.0:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.6.1.tgz#a48eeac5300c0a09b36854bf90d9c26fb201973c"
+  integrity sha512-yv9YLFQQ+3ZqgWCUk+pvNJwgUTdlIxUk1WTN+RnaFJe2L7ipG2csPT0ra2XRm7Cs8cxN7QXmK1rFzEwYEQkzXw==
   dependencies:
-    chownr "^2.0.0"
-    fs-minipass "^2.0.0"
-    minipass "^3.0.0"
-    minizlib "^2.1.1"
-    mkdirp "^1.0.3"
-    yallist "^4.0.0"
-
-temp-dir@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e"
-  integrity sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==
-
-tempy@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/tempy/-/tempy-1.0.1.tgz#30fe901fd869cfb36ee2bd999805aa72fbb035de"
-  integrity sha512-biM9brNqxSc04Ee71hzFbryD11nX7VPhQQY32AdDmjFvodsRFz/3ufeoTZ6uYkRFfGo188tENcASNs3vTdsM0w==
-  dependencies:
-    del "^6.0.0"
-    is-stream "^2.0.0"
-    temp-dir "^2.0.0"
-    type-fest "^0.16.0"
-    unique-string "^2.0.0"
-
-text-extensions@^1.0.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/text-extensions/-/text-extensions-1.9.0.tgz#1853e45fee39c945ce6f6c36b2d659b5aabc2a26"
-  integrity sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==
-
-text-table@~0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
-  integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
-
-through2@^4.0.0:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-4.0.2.tgz#a7ce3ac2a7a8b0b966c80e7c49f0484c3b239764"
-  integrity sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==
-  dependencies:
-    readable-stream "3"
-
-through2@~2.0.0:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
-  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
-  dependencies:
-    readable-stream "~2.3.6"
-    xtend "~4.0.1"
-
-through@2, "through@>=2.2.7 <3":
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
-  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
+    commander "^2.20.0"
+    source-map "~0.7.2"
+    source-map-support "~0.5.19"
 
 timsort@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
-tiny-emitter@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
-  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
-
-tiny-relative-date@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz#fa08aad501ed730f31cc043181d995c39a935e07"
-  integrity sha512-MOQHpzllWxDCHHaDno30hhLfbouoYlOI8YlMNtvKe1zXbjEVhbcEovQxvZrPvtiYW630GQDoMMarCnjfyfHA+A==
-
-tinydate@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/tinydate/-/tinydate-1.3.0.tgz#e6ca8e5a22b51bb4ea1c3a2a4fd1352dbd4c57fb"
-  integrity sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==
-
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
@@ -6210,78 +2457,6 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
-tough-cookie@~2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
-  integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
-  dependencies:
-    psl "^1.1.28"
-    punycode "^2.1.1"
-
-traverse@~0.6.6:
-  version "0.6.6"
-  resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"
-  integrity sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=
-
-treeverse@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/treeverse/-/treeverse-1.0.4.tgz#a6b0ebf98a1bca6846ddc7ecbc900df08cb9cd5f"
-  integrity sha512-whw60l7r+8ZU8Tu/Uc2yxtc4ZTZbR/PF3u1IPNKGQ6p8EICLb3Z2lAgoqw9bqYd8IkgnsaOcLzYHFckjqNsf0g==
-
-trim-newlines@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.0.tgz#79726304a6a898aa8373427298d54c2ee8b1cb30"
-  integrity sha512-C4+gOpvmxaSMKuEf9Qc134F1ZuOHVXKRbtEflf4NTtuuJDEIJ9p5PXsalL8SkeRw+qit1Mo+yuvMPAKwWg/1hA==
-
-trim-off-newlines@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz#9f9ba9d9efa8764c387698bcbfeb2c848f11adb3"
-  integrity sha1-n5up2e+odkw4dpi8v+sshI8RrbM=
-
-tunnel-agent@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
-  integrity sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=
-  dependencies:
-    safe-buffer "^5.0.1"
-
-turndown@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/turndown/-/turndown-7.0.0.tgz#19b2a6a2d1d700387a1e07665414e4af4fec5225"
-  integrity sha512-G1FfxfR0mUNMeGjszLYl3kxtopC4O9DRRiMlMDDVHvU1jaBkGFg4qxIyjIk2aiKLHyDyZvZyu4qBO2guuYBy3Q==
-  dependencies:
-    domino "^2.1.6"
-
-tweetnacl@^0.14.3, tweetnacl@~0.14.0:
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
-  integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
-
-type-fest@^0.16.0:
-  version "0.16.0"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.16.0.tgz#3240b891a78b0deae910dbeb86553e552a148860"
-  integrity sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==
-
-type-fest@^0.18.0:
-  version "0.18.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.18.1.tgz#db4bc151a4a2cf4eebf9add5db75508db6cc841f"
-  integrity sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==
-
-type-fest@^0.21.3:
-  version "0.21.3"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
-  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
-
-type-fest@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
-  integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
-
-type-fest@^0.8.1:
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
-  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
-
 type-is@~1.6.17, type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
@@ -6290,33 +2465,6 @@ type-is@~1.6.17, type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-typedarray-to-buffer@^3.1.5:
-  version "3.1.5"
-  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
-  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
-  dependencies:
-    is-typedarray "^1.0.0"
-
-typedarray-to-buffer@~1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-1.0.4.tgz#9bb8ba0e841fb3f4cf1fe7c245e9f3fa8a5fe99c"
-  integrity sha1-m7i6DoQfs/TPH+fCRenz+opf6Zw=
-
-typedarray@^0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
-  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
-
-uc.micro@^1.0.1, uc.micro@^1.0.5:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
-  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
-
-uglify-js@^3.1.4:
-  version "3.13.3"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.13.3.tgz#ce72a1ad154348ea2af61f50933c76cc8802276e"
-  integrity sha512-otIc7O9LyxpUcQoXzj2hL4LPWKklO6LJWoJUzNa8A17Xgi4fOeDC8FBDOLHnC/Slo1CQgsZMcM6as0M76BZaig==
-
 unbox-primitive@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
@@ -6337,42 +2485,6 @@ uniqs@^2.0.0:
   resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
   integrity sha1-/+3ks2slKQaW5uFl1KWe25mOawI=
 
-unique-filename@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
-  integrity sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==
-  dependencies:
-    unique-slug "^2.0.0"
-
-unique-slug@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.2.tgz#baabce91083fc64e945b0f3ad613e264f7cd4e6c"
-  integrity sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==
-  dependencies:
-    imurmurhash "^0.1.4"
-
-unique-string@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-2.0.0.tgz#39c6451f81afb2749de2b233e3f7c5e8843bd89d"
-  integrity sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==
-  dependencies:
-    crypto-random-string "^2.0.0"
-
-universal-user-agent@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/universal-user-agent/-/universal-user-agent-6.0.0.tgz#3381f8503b251c0d9cd21bc1de939ec9df5480ee"
-  integrity sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==
-
-universalify@^0.1.0:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
-  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
-
-universalify@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
-  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
-
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
@@ -6383,19 +2495,7 @@ unquote@~1.1.1:
   resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
   integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=
 
-uri-js@^4.2.2:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
-  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
-  dependencies:
-    punycode "^2.1.0"
-
-url-join@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/url-join/-/url-join-4.0.1.tgz#b642e21a2646808ffa178c4c5fda39844e12cde7"
-  integrity sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==
-
-util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
+util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
@@ -6415,27 +2515,7 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
 
-uuid@^3.3.2:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
-  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
-
-validate-npm-package-license@^3.0.1, validate-npm-package-license@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
-  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
-  dependencies:
-    spdx-correct "^3.0.0"
-    spdx-expression-parse "^3.0.0"
-
-validate-npm-package-name@^3.0.0, validate-npm-package-name@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz#5fa912d81eb7d0c74afc140de7317f0ca7df437e"
-  integrity sha1-X6kS2B630MdK/BQN5zF/DKffQ34=
-  dependencies:
-    builtins "^1.0.3"
-
-vary@^1, vary@~1.1.2:
+vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
@@ -6445,39 +2525,6 @@ vendors@^1.0.0:
   resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
   integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
 
-verror@1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
-  integrity sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=
-  dependencies:
-    assert-plus "^1.0.0"
-    core-util-is "1.0.2"
-    extsprintf "^1.2.0"
-
-vite@^2.1.5:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-2.1.5.tgz#4857da441c62f7982c83cbd5f42a00330f20c9c1"
-  integrity sha512-tYU5iaYeUgQYvK/CNNz3tiJ8vYqPWfCE9IQ7K0iuzYovWw7lzty7KRYGWwV3CQPh0NKxWjOczAqiJsCL0Xb+Og==
-  dependencies:
-    esbuild "^0.9.3"
-    postcss "^8.2.1"
-    resolve "^1.19.0"
-    rollup "^2.38.5"
-  optionalDependencies:
-    fsevents "~2.3.1"
-
-walk-up-path@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/walk-up-path/-/walk-up-path-1.0.0.tgz#d4745e893dd5fd0dbb58dd0a4c6a33d9c9fec53e"
-  integrity sha512-hwj/qMDUEjCU5h0xr90KGCf0tg0/LgJbmOWgrWKYlcJZM7XvquvUJZ0G/HMGr7F7OQMOUuPHWP9JpriinkAlkg==
-
-wcwidth@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
-  integrity sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=
-  dependencies:
-    defaults "^1.0.3"
-
 which-boxed-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
@@ -6489,49 +2536,18 @@ which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
-which@^2.0.1, which@^2.0.2:
+which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
   integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
   dependencies:
     isexe "^2.0.0"
 
-wide-align@^1.1.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
-  integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==
-  dependencies:
-    string-width "^1.0.2 || 2"
-
-wordwrap@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
-  integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
-
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
-write-file-atomic@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
-  integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
-  dependencies:
-    imurmurhash "^0.1.4"
-    is-typedarray "^1.0.0"
-    signal-exit "^3.0.2"
-    typedarray-to-buffer "^3.1.5"
-
 ws@^5.2.0:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/ws/-/ws-5.2.2.tgz#dffef14866b8e8dc9133582514d1befaf96e980f"
@@ -6539,75 +2555,7 @@ ws@^5.2.0:
   dependencies:
     async-limiter "~1.0.0"
 
-ws@^7.1.2:
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.4.tgz#383bc9742cb202292c9077ceab6f6047b17f2d59"
-  integrity sha512-Qm8k8ojNQIMx7S+Zp8u/uHOx7Qazv3Yv4q68MiWWWOJhiwG5W3x7iqmRtJo8xxrciZUY4vRxUTJCKuRnF28ZZw==
-
-xtend@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-2.2.0.tgz#eef6b1f198c1c8deafad8b1765a04dad4a01c5a9"
-  integrity sha1-7vax8ZjByN6vrYsXZaBNrUoBxak=
-
-xtend@~2.0.4:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-2.0.6.tgz#5ea657a6dba447069c2e59c58a1138cb0c5e6cee"
-  integrity sha1-XqZXptukRwacLlnFihE4ywxebO4=
-  dependencies:
-    is-object "~0.1.2"
-    object-keys "~0.2.0"
-
-xtend@~2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-2.1.2.tgz#6efecc2a4dad8e6962c4901b337ce7ba87b5d28b"
-  integrity sha1-bv7MKk2tjmlixJAbM3znuoe10os=
-  dependencies:
-    object-keys "~0.4.0"
-
-xtend@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-3.0.0.tgz#5cce7407baf642cba7becda568111c493f59665a"
-  integrity sha1-XM50B7r2Qsunvs2laBEcST9ZZlo=
-
-xtend@~4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
-  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
-
-y18n@^5.0.5:
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.5.tgz#8769ec08d03b1ea2df2500acef561743bbb9ab18"
-  integrity sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==
-
-yallist@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
-  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
-
 yaml@^1.10.0:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
-
-yargs-parser@^20.2.2, yargs-parser@^20.2.3:
-  version "20.2.7"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.7.tgz#61df85c113edfb5a7a4e36eb8aa60ef423cbc90a"
-  integrity sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==
-
-yargs@^16.2.0:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
-  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
-  dependencies:
-    cliui "^7.0.2"
-    escalade "^3.1.1"
-    get-caller-file "^2.0.5"
-    require-directory "^2.1.1"
-    string-width "^4.2.0"
-    y18n "^5.0.5"
-    yargs-parser "^20.2.2"
-
-zingtouch@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/zingtouch/-/zingtouch-1.0.6.tgz#456cf2b0a69f91a5ffbd8a83b18033c671f1096d"
-  integrity sha512-S7jcR7cSRy28VmQBO0Tq7ZJV4pzfvvrTU9FrrL0K1QPpfBal9wm0oKhoCuifc+PPCq+hQMTJr5E9XKUQDm00VA==
diff --git a/packages/builder/build/copy.js b/packages/builder/build/copy.js
index eecc46736f..f3077b7854 100644
--- a/packages/builder/build/copy.js
+++ b/packages/builder/build/copy.js
@@ -1,6 +1,6 @@
 const ncp = require("ncp").ncp
 
-ncp("./dist", "../server/builder", function(err) {
+ncp("./dist", "../server/builder", function (err) {
   if (err) {
     return console.error(err)
   }
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index edf5d394f6..4f759a60ea 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -12,9 +12,7 @@ Cypress.Commands.add("login", () => {
 
     cy.visit(`localhost:${Cypress.env("PORT")}/builder`)
     cy.contains("Create Test User").click()
-    cy.get("input")
-      .first()
-      .type("test@test.com")
+    cy.get("input").first().type("test@test.com")
 
     cy.get('input[type="password"]').type("test")
 
@@ -31,21 +29,24 @@ Cypress.Commands.add("createApp", name => {
     .then($body => {
       if ($body.find("input[name=apiKey]").length) {
         // input was found, do something else here
-        cy.get("input[name=apiKey]")
-          .type(name)
-          .should("have.value", name)
+        cy.get("input[name=apiKey]").type(name).should("have.value", name)
         cy.contains("Next").click()
       }
     })
     .then(() => {
-      cy.get("input[name=applicationName]")
-        .type(name)
-        .should("have.value", name)
-      cy.contains("Next").click()
-      cy.contains("Submit").click()
-      cy.get("[data-cy=new-table]", {
-        timeout: 20000,
-      }).should("be.visible")
+      cy.get(".spectrum-Modal")
+        .within(() => {
+          cy.get("input").eq(0).type(name).should("have.value", name).blur()
+          cy.contains("Next").click()
+          cy.get("input").eq(1).type("test@test.com").blur()
+          cy.get("input").eq(2).type("test").blur()
+          cy.contains("Submit").click()
+        })
+        .then(() => {
+          cy.get("[data-cy=new-table]", {
+            timeout: 20000,
+          }).should("be.visible")
+        })
     })
 })
 
@@ -54,11 +55,11 @@ Cypress.Commands.add("deleteApp", name => {
   cy.get(".apps").then($apps => {
     cy.wait(1000)
     if ($apps.find(`[data-cy="app-${name}"]`).length) {
-      cy.get(`[data-cy="app-${name}"] a`).click()
+      cy.get(`[data-cy="app-${name}"]`).contains("Open").click()
       cy.get("[data-cy=settings-icon]").click()
-      cy.get(".modal-content").within(() => {
+      cy.get(".spectrum-Dialog").within(() => {
         cy.contains("Danger Zone").click()
-        cy.get("input").type("DELETE")
+        cy.get("input").type("DELETE").blur()
         cy.contains("Delete Entire App").click()
       })
     }
@@ -80,13 +81,9 @@ Cypress.Commands.add("createTestTableWithData", () => {
 Cypress.Commands.add("createTable", tableName => {
   // Enter table name
   cy.get("[data-cy=new-table]").click()
-  cy.get(".modal").within(() => {
-    cy.get("input")
-      .first()
-      .type(tableName)
-    cy.get(".buttons")
-      .contains("Create")
-      .click()
+  cy.get(".spectrum-Modal").within(() => {
+    cy.get("input").first().type(tableName).blur()
+    cy.get(".spectrum-ButtonGroup").contains("Create").click()
   })
   cy.contains(tableName).should("be.visible")
 })
@@ -94,54 +91,40 @@ Cypress.Commands.add("createTable", tableName => {
 Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
   // Select Table
   cy.contains(".nav-item", tableName).click()
-  cy.contains("Create New Column").click()
+  cy.contains("Create column").click()
 
   // Configure column
-  cy.get(".actions").within(() => {
-    cy.get("input")
-      .first()
-      .type(columnName)
+  cy.get(".spectrum-Modal").within(() => {
+    cy.get("input").first().type(columnName).blur()
 
     // Unset table display column
-    cy.contains("display column").click()
+    cy.contains("display column").click({ force: true })
     cy.get("select").select(type)
     cy.contains("Save").click()
   })
 })
 
 Cypress.Commands.add("addRow", values => {
-  cy.contains("Create New Row").click()
-  cy.get(".modal").within(() => {
+  cy.contains("Create row").click()
+  cy.get(".spectrum-Modal").within(() => {
     for (let i = 0; i < values.length; i++) {
-      cy.get("input")
-        .eq(i)
-        .type(values[i])
+      cy.get("input").eq(i).type(values[i]).blur()
     }
-    cy.get(".buttons")
-      .contains("Create")
-      .click()
+    cy.get(".spectrum-ButtonGroup").contains("Create").click()
   })
 })
 
 Cypress.Commands.add("createUser", (email, password, role) => {
   // Create User
   cy.contains("Users").click()
-  cy.contains("Create New User").click()
-  cy.get(".modal").within(() => {
-    cy.get("input")
-      .first()
-      .type(email)
-    cy.get("input")
-      .eq(1)
-      .type(password)
-    cy.get("select")
-      .first()
-      .select(role)
+  cy.contains("Create user").click()
+  cy.get(".spectrum-Modal").within(() => {
+    cy.get("input").first().type(email).blur()
+    cy.get("input").eq(1).type(password).blur()
+    cy.get("select").first().select(role)
 
     // Save
-    cy.get(".buttons")
-      .contains("Create User")
-      .click()
+    cy.get(".spectrum-ButtonGroup").contains("Create User").click()
   })
 })
 
@@ -176,14 +159,10 @@ Cypress.Commands.add("navigateToFrontend", () => {
 
 Cypress.Commands.add("createScreen", (screenName, route) => {
   cy.get("[data-cy=new-screen]").click()
-  cy.get(".modal").within(() => {
-    cy.get("input")
-      .eq(0)
-      .type(screenName)
+  cy.get(".spectrum-Modal").within(() => {
+    cy.get("input").eq(0).type(screenName).blur()
     if (route) {
-      cy.get("input")
-        .eq(1)
-        .type(route)
+      cy.get("input").eq(1).type(route).blur()
     }
     cy.contains("Create Screen").click()
   })
diff --git a/packages/builder/index.html b/packages/builder/index.html
index e804a01fb1..d6f19a2d43 100644
--- a/packages/builder/index.html
+++ b/packages/builder/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html class="spectrum spectrum--medium spectrum--darkest" lang="en" dir="ltr">
 <head>
 	<meta charset='utf8'>
 	<meta name='viewport' content='width=device-width'>
diff --git a/packages/builder/package.json b/packages/builder/package.json
index c40baba71d..4b9522aab0 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -69,9 +69,9 @@
     "@budibase/client": "^0.8.16",
     "@budibase/colorpicker": "1.1.2",
     "@budibase/string-templates": "^0.8.16",
-    "@budibase/svelte-ag-grid": "^1.0.4",
     "@sentry/browser": "5.19.1",
-    "@svelteschool/svelte-forms": "0.7.0",
+    "@spectrum-css/page": "^3.0.1",
+    "@spectrum-css/vars": "^3.0.1",
     "codemirror": "^5.59.0",
     "downloadjs": "1.4.7",
     "lodash": "4.17.13",
@@ -106,7 +106,7 @@
     "rollup": "^2.44.0",
     "rollup-plugin-copy": "^3.4.0",
     "start-server-and-test": "^1.12.1",
-    "svelte": "^3.36.0",
+    "svelte": "^3.37.0",
     "svelte-jester": "^1.3.2",
     "vite": "^2.1.5"
   },
diff --git a/packages/builder/src/App.svelte b/packages/builder/src/App.svelte
index 0f9d0695f2..4ff9b9c835 100644
--- a/packages/builder/src/App.svelte
+++ b/packages/builder/src/App.svelte
@@ -3,7 +3,7 @@
   import { Router } from "@roxi/routify"
   import { routes } from "../.routify/routes"
   import { initialise } from "builderStore"
-  import NotificationDisplay from "components/common/Notification/NotificationDisplay.svelte"
+  import { NotificationDisplay } from "@budibase/bbui"
 
   onMount(async () => {
     await initialise()
@@ -14,3 +14,10 @@
 
 <NotificationDisplay />
 <Router {routes} {config} />
+<div class="modal-container" />
+
+<style>
+  .modal-container {
+    position: absolute;
+  }
+</style>
diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 58c4d8f4b6..89532e3bc3 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -16,7 +16,7 @@ const CAPTURE_HBS_TEMPLATE = /{{[\S\s]*?}}/g
 export const getBindableProperties = (asset, componentId) => {
   const contextBindings = getContextBindings(asset, componentId)
   const userBindings = getUserBindings()
-  const urlBindings = getUrlBindings(asset, componentId)
+  const urlBindings = getUrlBindings(asset)
   return [...contextBindings, ...userBindings, ...urlBindings]
 }
 
@@ -277,14 +277,23 @@ export const getSchemaForDatasource = (datasource, isForm = false) => {
       schema["_rev"] = { type: "string" }
     }
 
-    // Ensure there are "name" properties for all fields
-    if (schema) {
-      Object.keys(schema).forEach(field => {
-        if (!schema[field].name) {
-          schema[field].name = field
+    // Ensure there are "name" properties for all fields and that field schema
+    // are objects
+    let fixedSchema = {}
+    Object.entries(schema || {}).forEach(([fieldName, fieldSchema]) => {
+      if (typeof fieldSchema === "string") {
+        fixedSchema[fieldName] = {
+          type: fieldSchema,
+          name: fieldName,
         }
-      })
-    }
+      } else {
+        fixedSchema[fieldName] = {
+          ...fieldSchema,
+          name: fieldName,
+        }
+      }
+    })
+    schema = fixedSchema
   }
   return { schema, table }
 }
@@ -329,6 +338,29 @@ export function removeBindings(obj) {
   return obj
 }
 
+/**
+ * When converting from readable to runtime it can sometimes add too many square brackets,
+ * this makes sure that doesn't happen.
+ */
+function shouldReplaceBinding(currentValue, from, convertTo) {
+  if (!currentValue?.includes(from)) {
+    return false
+  }
+  if (convertTo === "readableBinding") {
+    return true
+  }
+  // remove all the spaces, if the input is surrounded by spaces e.g. [ Auto ID ] then
+  // this makes sure it is detected
+  const noSpaces = currentValue.replace(/\s+/g, "")
+  const fromNoSpaces = from.replace(/\s+/g, "")
+  const invalids = [
+    `[${fromNoSpaces}]`,
+    `"${fromNoSpaces}"`,
+    `'${fromNoSpaces}'`,
+  ]
+  return !invalids.find(invalid => noSpaces?.includes(invalid))
+}
+
 /**
  * utility function for the readableToRuntimeBinding and runtimeToReadableBinding.
  */
@@ -348,7 +380,7 @@ function bindingReplacement(bindableProperties, textWithBindings, convertTo) {
   for (let boundValue of boundValues) {
     let newBoundValue = boundValue
     for (let from of convertFromProps) {
-      if (newBoundValue.includes(from)) {
+      if (shouldReplaceBinding(newBoundValue, from, convertTo)) {
         const binding = bindableProperties.find(el => el[convertFrom] === from)
         newBoundValue = newBoundValue.replace(from, binding[convertTo])
       }
diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
deleted file mode 100644
index 5d0e722650..0000000000
--- a/packages/builder/src/builderStore/store/backend.js
+++ /dev/null
@@ -1,362 +0,0 @@
-import { writable, get } from "svelte/store"
-import { cloneDeep } from "lodash/fp"
-import api from "../api"
-
-const INITIAL_BACKEND_UI_STATE = {
-  tables: [],
-  views: [],
-  users: [],
-  roles: [],
-  datasources: [],
-  queries: [],
-  integrations: {},
-  selectedDatabase: {},
-  selectedTable: {},
-  draftTable: {},
-}
-
-export const getBackendUiStore = () => {
-  const store = writable({ ...INITIAL_BACKEND_UI_STATE })
-
-  store.actions = {
-    reset: () => store.set({ ...INITIAL_BACKEND_UI_STATE }),
-    database: {
-      select: async db => {
-        const tablesResponse = await api.get(`/api/tables`)
-        const tables = await tablesResponse.json()
-        const datasourcesResponse = await api.get(`/api/datasources`)
-        const datasources = await datasourcesResponse.json()
-        const queriesResponse = await api.get(`/api/queries`)
-        const queries = await queriesResponse.json()
-        const integrationsResponse = await api.get("/api/integrations")
-        const integrations = await integrationsResponse.json()
-        const permissionLevels = await store.actions.permissions.fetchLevels()
-
-        store.update(state => {
-          state.selectedDatabase = db
-          state.tables = tables
-          state.datasources = datasources
-          state.queries = queries
-          state.integrations = integrations
-          state.permissionLevels = permissionLevels
-          return state
-        })
-      },
-    },
-    rows: {
-      save: () =>
-        store.update(state => {
-          state.selectedView = state.selectedView
-          return state
-        }),
-      delete: () =>
-        store.update(state => {
-          state.selectedView = state.selectedView
-          return state
-        }),
-      select: row =>
-        store.update(state => {
-          state.selectedRow = row
-          return state
-        }),
-    },
-    datasources: {
-      fetch: async () => {
-        const response = await api.get(`/api/datasources`)
-        const json = await response.json()
-        store.update(state => {
-          state.datasources = json
-          return state
-        })
-        return json
-      },
-      select: async datasourceId => {
-        store.update(state => {
-          state.selectedDatasourceId = datasourceId
-          state.selectedQueryId = null
-          return state
-        })
-      },
-      save: async datasource => {
-        const response = await api.post("/api/datasources", datasource)
-        const json = await response.json()
-        store.update(state => {
-          const currentIdx = state.datasources.findIndex(
-            ds => ds._id === json._id
-          )
-
-          if (currentIdx >= 0) {
-            state.datasources.splice(currentIdx, 1, json)
-          } else {
-            state.datasources.push(json)
-          }
-
-          state.datasources = state.datasources
-          state.selectedDatasourceId = json._id
-          return state
-        })
-        return json
-      },
-      delete: async datasource => {
-        await api.delete(
-          `/api/datasources/${datasource._id}/${datasource._rev}`
-        )
-        store.update(state => {
-          state.datasources = state.datasources.filter(
-            existing => existing._id !== datasource._id
-          )
-          if (datasource._id === state.selectedDatasourceId) {
-            state.selectedDatasourceId = null
-          }
-          return state
-        })
-      },
-    },
-    queries: {
-      fetch: async () => {
-        const response = await api.get(`/api/queries`)
-        const json = await response.json()
-        store.update(state => {
-          state.queries = json
-          return state
-        })
-        return json
-      },
-      save: async (datasourceId, query) => {
-        const integrations = get(store).integrations
-        const dataSource = get(store).datasources.filter(
-          ds => ds._id === datasourceId
-        )
-        // check if readable attribute is found
-        if (dataSource.length !== 0) {
-          const integration = integrations[dataSource[0].source]
-          const readable = integration.query[query.queryVerb].readable
-          if (readable) {
-            query.readable = readable
-          }
-        }
-        query.datasourceId = datasourceId
-        const response = await api.post(`/api/queries`, query)
-        if (response.status !== 200) {
-          throw new Error("Failed saving query.")
-        }
-        const json = await response.json()
-        store.update(state => {
-          const currentIdx = state.queries.findIndex(
-            query => query._id === json._id
-          )
-
-          if (currentIdx >= 0) {
-            state.queries.splice(currentIdx, 1, json)
-          } else {
-            state.queries.push(json)
-          }
-
-          state.queries = state.queries
-          state.selectedQueryId = json._id
-          return state
-        })
-        return json
-      },
-      select: query =>
-        store.update(state => {
-          state.selectedDatasourceId = query.datasourceId
-          state.selectedQueryId = query._id
-          return state
-        }),
-      delete: async query => {
-        await api.delete(`/api/queries/${query._id}/${query._rev}`)
-        store.update(state => {
-          state.queries = state.queries.filter(
-            existing => existing._id !== query._id
-          )
-          if (state.selectedQueryId === query._id) {
-            state.selectedQueryId = null
-          }
-
-          return state
-        })
-      },
-    },
-    tables: {
-      fetch: async () => {
-        const tablesResponse = await api.get(`/api/tables`)
-        const tables = await tablesResponse.json()
-        store.update(state => {
-          state.tables = tables
-          return state
-        })
-      },
-      select: table =>
-        store.update(state => {
-          state.selectedTable = table
-          state.draftTable = cloneDeep(table)
-          state.selectedView = { name: `all_${table._id}` }
-          return state
-        }),
-      save: async table => {
-        const updatedTable = cloneDeep(table)
-        const oldTable = get(store).tables.filter(t => t._id === table._id)[0]
-
-        const fieldNames = []
-        // update any renamed schema keys to reflect their names
-        for (let key of Object.keys(updatedTable.schema)) {
-          // if field name has been seen before remove it
-          if (fieldNames.indexOf(key.toLowerCase()) !== -1) {
-            delete updatedTable.schema[key]
-            continue
-          }
-          const field = updatedTable.schema[key]
-          const oldField = oldTable?.schema[key]
-          // if the type has changed then revert back to the old field
-          if (oldField != null && oldField.type !== field.type) {
-            updatedTable.schema[key] = oldField
-          }
-          // field has been renamed
-          if (field.name && field.name !== key) {
-            updatedTable.schema[field.name] = field
-            updatedTable._rename = { old: key, updated: field.name }
-            delete updatedTable.schema[key]
-          }
-          // finally record this field has been used
-          fieldNames.push(key.toLowerCase())
-        }
-
-        const SAVE_TABLE_URL = `/api/tables`
-        const response = await api.post(SAVE_TABLE_URL, updatedTable)
-        const savedTable = await response.json()
-        await store.actions.tables.fetch()
-        store.actions.tables.select(savedTable)
-        return savedTable
-      },
-      delete: async table => {
-        await api.delete(`/api/tables/${table._id}/${table._rev}`)
-        store.update(state => {
-          state.tables = state.tables.filter(
-            existing => existing._id !== table._id
-          )
-          if (table._id === state.selectedTable._id) {
-            state.selectedTable = {}
-          }
-          return state
-        })
-      },
-      saveField: ({ originalName, field, primaryDisplay = false, indexes }) => {
-        store.update(state => {
-          // delete the original if renaming
-          // need to handle if the column had no name, empty string
-          if (originalName || originalName === "") {
-            delete state.draftTable.schema[originalName]
-            state.draftTable._rename = {
-              old: originalName,
-              updated: field.name,
-            }
-          }
-
-          // Optionally set display column
-          if (primaryDisplay) {
-            state.draftTable.primaryDisplay = field.name
-          }
-
-          if (indexes) {
-            state.draftTable.indexes = indexes
-          }
-
-          state.draftTable.schema[field.name] = cloneDeep(field)
-          store.actions.tables.save(state.draftTable)
-          return state
-        })
-      },
-      deleteField: field => {
-        store.update(state => {
-          delete state.draftTable.schema[field.name]
-          store.actions.tables.save(state.draftTable)
-          return state
-        })
-      },
-    },
-    views: {
-      select: view =>
-        store.update(state => {
-          state.selectedView = view
-          state.selectedTable = {}
-          return state
-        }),
-      delete: async view => {
-        await api.delete(`/api/views/${view}`)
-        await store.actions.tables.fetch()
-      },
-      save: async view => {
-        const response = await api.post(`/api/views`, view)
-        const json = await response.json()
-
-        const viewMeta = {
-          name: view.name,
-          ...json,
-        }
-
-        store.update(state => {
-          const viewTable = state.tables.find(
-            table => table._id === view.tableId
-          )
-
-          if (view.originalName) delete viewTable.views[view.originalName]
-          viewTable.views[view.name] = viewMeta
-
-          state.tables = state.tables
-          state.selectedView = viewMeta
-          return state
-        })
-      },
-    },
-    users: {
-      create: user =>
-        store.update(state => {
-          state.users.push(user)
-          state.users = state.users
-          return state
-        }),
-    },
-    roles: {
-      fetch: async () => {
-        const response = await api.get("/api/roles")
-        const roles = await response.json()
-        store.update(state => {
-          state.roles = roles
-          return state
-        })
-      },
-      delete: async role => {
-        const response = await api.delete(`/api/roles/${role._id}/${role._rev}`)
-        await store.actions.roles.fetch()
-        return response
-      },
-      save: async role => {
-        const response = await api.post("/api/roles", role)
-        await store.actions.roles.fetch()
-        return response
-      },
-    },
-    permissions: {
-      fetchLevels: async () => {
-        const response = await api.get("/api/permission/levels")
-        const json = await response.json()
-        return json
-      },
-      forResource: async resourceId => {
-        const response = await api.get(`/api/permission/${resourceId}`)
-        const json = await response.json()
-        return json
-      },
-      save: async ({ role, resource, level }) => {
-        const response = await api.post(
-          `/api/permission/${role}/${resource}/${level}`
-        )
-        const json = await response.json()
-        return json
-      },
-    },
-  }
-
-  return store
-}
diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
index 7788245d46..be399b4bb8 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
@@ -9,7 +9,7 @@ import {
   makeDatasourceFormComponents,
 } from "./utils/commonComponents"
 
-export default function(tables) {
+export default function (tables) {
   return tables.map(table => {
     return {
       name: `${table.name} - New`,
diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
index 67a1d1c916..16480b199e 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
@@ -12,7 +12,7 @@ import {
   makeDatasourceFormComponents,
 } from "./utils/commonComponents"
 
-export default function(tables) {
+export default function (tables) {
   return tables.map(table => {
     return {
       name: `${table.name} - Detail`,
@@ -77,9 +77,7 @@ function generateTitleContainer(table, title, formId, repeaterId) {
     })
     .instanceName("Delete Button")
 
-  return makeTitleContainer(title)
-    .addChild(deleteButton)
-    .addChild(saveButton)
+  return makeTitleContainer(title).addChild(deleteButton).addChild(saveButton)
 }
 
 const createScreen = table => {
diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
index 603c730508..37f1a8f04a 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
@@ -4,7 +4,7 @@ import { Screen } from "./utils/Screen"
 import { Component } from "./utils/Component"
 import { makePropSafe } from "@budibase/string-templates"
 
-export default function(tables) {
+export default function (tables) {
   return tables.map(table => {
     return {
       name: `${table.name} - List`,
@@ -87,7 +87,7 @@ const createScreen = table => {
       dataProvider: `{{ literal ${makePropSafe(provider._json._id)} }}`,
       theme: "spectrum--lightest",
       showAutoColumns: false,
-      quiet: false,
+      quiet: true,
       size: "spectrum--medium",
       rowCount: 8,
     })
diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/sanitizeUrl.js b/packages/builder/src/builderStore/store/screenTemplates/utils/sanitizeUrl.js
index 96b7633e41..16224a45bc 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/sanitizeUrl.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/sanitizeUrl.js
@@ -1,4 +1,4 @@
-export default function(url) {
+export default function (url) {
   return url
     .split("/")
     .map(part => {
diff --git a/packages/builder/src/builderStore/store/theme.js b/packages/builder/src/builderStore/store/theme.js
index 1ff326e173..fd6b05df59 100644
--- a/packages/builder/src/builderStore/store/theme.js
+++ b/packages/builder/src/builderStore/store/theme.js
@@ -3,35 +3,25 @@ import { localStorageStore } from "./localStorage"
 export const getThemeStore = () => {
   const themeElement = document.documentElement
   const initialValue = {
-    darkMode: true,
-    hue: 208,
-    saturation: 9,
-    lightness: 16,
+    theme: "darkest",
+    options: ["lightest", "light", "dark", "darkest"],
   }
-
   const store = localStorageStore("bb-theme", initialValue)
 
-  // Sets a CSS variable on the root document element
-  function setCSSVariable(prop, value) {
-    themeElement.style.setProperty(prop, value)
-  }
+  // Update theme class when store changes
+  store.subscribe(state => {
+    // Handle any old local storage values - this can be removed after the update
+    if (state.darkMode !== undefined) {
+      store.set(initialValue)
+      return
+    }
 
-  // Resets the custom theme to the default dark theme.
-  // The reset option is only available when dark theme is on, which is why it
-  // sets dark mode to true here
-  store.reset = () => {
-    store.set({
-      ...initialValue,
-      darkMode: true,
+    state.options.forEach(option => {
+      themeElement.classList.toggle(
+        `spectrum--${option}`,
+        option === state.theme
+      )
     })
-  }
-
-  // Update theme when store changes
-  store.subscribe(theme => {
-    themeElement.classList[theme.darkMode ? "add" : "remove"]("dark")
-    setCSSVariable("--theme-hue", Math.round(theme.hue))
-    setCSSVariable("--theme-saturation", `${Math.round(theme.saturation)}%`)
-    setCSSVariable("--theme-brightness", `${Math.round(theme.lightness)}%`)
   })
 
   return store
diff --git a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
index 8c3e2996c9..af5c9e449e 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
@@ -1,7 +1,7 @@
 <script>
   import { sortBy } from "lodash/fp"
   import { automationStore } from "builderStore"
-  import { DropdownMenu, Modal } from "@budibase/bbui"
+  import { ActionButton, Popover, Modal } from "@budibase/bbui"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
   import CreateWebhookModal from "../Shared/CreateWebhookModal.svelte"
 
@@ -10,19 +10,19 @@
     {
       label: "Trigger",
       value: "TRIGGER",
-      icon: "ri-organization-chart",
+      icon: "Algorithm",
       disabled: hasTrigger,
     },
     {
       label: "Action",
       value: "ACTION",
-      icon: "ri-flow-chart",
+      icon: "Actions",
       disabled: !hasTrigger,
     },
     {
       label: "Logic",
       value: "LOGIC",
-      icon: "ri-filter-line",
+      icon: "Filter",
       disabled: !hasTrigger,
     },
   ]
@@ -63,33 +63,36 @@
 
 <div class="tab-container">
   {#each tabs as tab, idx}
-    <div
-      bind:this={anchors[idx]}
-      class="tab"
-      class:disabled={tab.disabled}
-      on:click={tab.disabled ? null : () => onChangeTab(idx)}
-      class:active={idx === selectedIndex}>
-      {#if tab.icon}<i class={tab.icon} />{/if}
-      <span>{tab.label}</span>
-      <i class="ri-arrow-down-s-line arrow" />
+    <div bind:this={anchors[idx]}>
+      <ActionButton
+        quiet
+        size="S"
+        icon={tab.icon}
+        disabled={tab.disabled}
+        on:click={tab.disabled ? null : () => onChangeTab(idx)}
+      >
+        {tab.label}
+      </ActionButton>
     </div>
   {/each}
 </div>
-<DropdownMenu
+<Popover
   on:close={() => (selectedIndex = null)}
   bind:this={popover}
   {anchor}
-  align="left">
+  align="left"
+>
   <DropdownContainer>
     {#each blocks as [stepId, blockDefinition]}
       <DropdownItem
         icon={blockDefinition.icon}
         title={blockDefinition.name}
         subtitle={blockDefinition.description}
-        on:click={() => addBlockToAutomation(stepId, blockDefinition)} />
+        on:click={() => addBlockToAutomation(stepId, blockDefinition)}
+      />
     {/each}
   </DropdownContainer>
-</DropdownMenu>
+</Popover>
 <Modal bind:this={webhookModal} width="30%">
   <CreateWebhookModal />
 </Modal>
@@ -100,32 +103,6 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    gap: var(--spacing-l);
     min-height: 24px;
   }
-
-  .tab {
-    color: var(--grey-7);
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-xs);
-    font-size: var(--font-size-xs);
-  }
-  .tab span {
-    font-weight: 500;
-    user-select: none;
-  }
-  .tab.active,
-  .tab:not(.disabled):hover {
-    color: var(--ink);
-    cursor: pointer;
-  }
-  .tab.disabled {
-    color: var(--grey-5);
-  }
-  .tab i:not(:last-child) {
-    font-size: 16px;
-  }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte
index 0e0c6bb83a..931490b197 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte
@@ -3,10 +3,12 @@
   height="75"
   viewBox="0 0 9 75"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <path
     d="M5.0625 70H9L4.5 75L0 70H3.9375V65H5.0625V70Z"
-    fill="var(--grey-5)" />
+    fill="var(--grey-5)"
+  />
   <rect x="4" width="1" height="65" fill="var(--grey-5)" />
 </svg>
 
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index 48bafb8cd3..e960271b87 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -26,7 +26,8 @@
       class="block"
       animate:flip={{ duration: 600 }}
       in:fade|local
-      out:fly|local={{ x: 100 }}>
+      out:fly|local={{ x: 100 }}
+    >
       <FlowItem {onSelect} {block} />
       {#if idx !== blocks.length - 1}
         <Arrow />
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index a00e65c69f..6f8a31d68d 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -1,6 +1,7 @@
 <script>
   import { automationStore } from "builderStore"
   import AutomationBlockTagline from "./AutomationBlockTagline.svelte"
+  import { Icon } from "@budibase/bbui"
 
   export let onSelect
   export let block
@@ -13,6 +14,7 @@
   $: allowDeleteTrigger = !steps.length
 
   function deleteStep() {
+    console.log("Running")
     automationStore.actions.deleteAutomationBlock(block)
   }
 </script>
@@ -20,23 +22,24 @@
 <div
   class={`block ${block.type} hoverable`}
   class:selected
-  on:click={() => onSelect(block)}>
+  on:click={() => onSelect(block)}
+>
   <header>
-    {#if block.type === 'TRIGGER'}
-      <i class="ri-lightbulb-fill" />
+    {#if block.type === "TRIGGER"}
+      <Icon name="Light" />
       <span>When this happens...</span>
-    {:else if block.type === 'ACTION'}
-      <i class="ri-flashlight-fill" />
+    {:else if block.type === "ACTION"}
+      <Icon name="FlashOn" />
       <span>Do this...</span>
-    {:else if block.type === 'LOGIC'}
-      <i class="ri-git-branch-line" />
+    {:else if block.type === "LOGIC"}
+      <Icon name="Branch2" />
       <span>Only continue if...</span>
     {/if}
     <div class="label">
-      {#if block.type === 'TRIGGER'}Trigger{:else}Step {blockIdx + 1}{/if}
+      {#if block.type === "TRIGGER"}Trigger{:else}Step {blockIdx + 1}{/if}
     </div>
-    {#if block.type !== 'TRIGGER' || allowDeleteTrigger}
-      <i on:click|stopPropagation={deleteStep} class="delete ri-close-line" />
+    {#if block.type !== "TRIGGER" || allowDeleteTrigger}
+      <div on:click|stopPropagation={deleteStep}><Icon name="Close" /></div>
     {/if}
   </header>
   <hr />
@@ -52,9 +55,9 @@
     border-radius: var(--border-radius-m);
     transition: 0.3s all ease;
     box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.08);
-    background-color: var(--ink);
     font-size: 16px;
-    color: var(--background);
+    background-color: var(--spectrum-global-color-gray-50);
+    color: var(--grey-9);
   }
   .block.selected,
   .block:hover {
@@ -77,9 +80,9 @@
   header .label {
     font-size: 14px;
     padding: var(--spacing-s);
-    color: var(--grey-8);
     border-radius: var(--border-radius-m);
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: var(--grey-2);
+    color: var(--grey-8);
   }
   header i {
     font-size: 20px;
@@ -91,28 +94,4 @@
     cursor: pointer;
     opacity: 1;
   }
-
-  .ACTION {
-    background-color: var(--background);
-    color: var(--ink);
-  }
-
-  .TRIGGER {
-    background-color: var(--ink);
-    color: var(--background);
-  }
-  .TRIGGER header .label {
-    background-color: var(--grey-9);
-    color: var(--grey-5);
-  }
-
-  .LOGIC {
-    background-color: var(--background);
-    color: var(--ink);
-  }
-
-  p {
-    color: inherit;
-    margin-bottom: 0;
-  }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte
index bb2057955f..f70366773a 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte
@@ -20,10 +20,11 @@
   {#each $automationStore.automations as automation, idx}
     <NavItem
       border={idx > 0}
-      icon="ri-stackshare-line"
+      icon="ShareAndroid"
       text={automation.name}
       selected={automation._id === selectedAutomationId}
-      on:click={() => selectAutomation(automation)}>
+      on:click={() => selectAutomation(automation)}
+    >
       <EditAutomationPopover {automation} />
     </NavItem>
   {/each}
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index 7d56867d03..dbcbc33db0 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@@ -1,39 +1,41 @@
 <script>
   import AutomationList from "./AutomationList.svelte"
   import CreateAutomationModal from "./CreateAutomationModal.svelte"
-  import { Modal } from "@budibase/bbui"
+  import { Icon, Modal, Tabs, Tab } from "@budibase/bbui"
   let modal
 </script>
 
 <div class="title">
-  <h1>Automations</h1>
-  <i
-    on:click={modal.show}
-    data-cy="new-automation"
-    class="ri-add-circle-fill" />
+  <Tabs selected="Automations">
+    <Tab title="Automations">
+      <div class="tab-content-padding">
+        <AutomationList />
+        <Modal bind:this={modal}>
+          <CreateAutomationModal />
+        </Modal>
+      </div>
+    </Tab>
+  </Tabs>
+  <div class="add-button" data-cy="new-screen">
+    <Icon hoverable name="AddCircle" on:click={modal.show} />
+  </div>
 </div>
-<AutomationList />
-<Modal bind:this={modal}>
-  <CreateAutomationModal />
-</Modal>
 
 <style>
+  .tab-content-padding {
+    padding: 0 var(--spacing-xl);
+  }
+  .add-button {
+    position: absolute;
+    top: var(--spacing-l);
+    right: var(--spacing-xl);
+  }
+
   .title {
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .title h1 {
-    font-size: var(--font-size-m);
-    font-weight: 500;
-    margin: 0;
-  }
-  .title i {
-    font-size: 20px;
-  }
-  .title i:hover {
-    cursor: pointer;
-    color: var(--blue);
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    position: relative;
   }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
index ebc0d5955e..7a83c8357b 100644
--- a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
@@ -2,8 +2,8 @@
   import { goto } from "@roxi/routify"
   import { database } from "stores/backend"
   import { automationStore } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
-  import { Input, ModalContent } from "@budibase/bbui"
+  import { notifications } from "@budibase/bbui"
+  import { Icon, Input, ModalContent } from "@budibase/bbui"
   import analytics from "analytics"
 
   let name
@@ -16,7 +16,7 @@
       name,
       instanceId,
     })
-    notifier.success(`Automation ${name} created.`)
+    notifications.success(`Automation ${name} created.`)
     $goto(`./${$automationStore.selectedAutomation.automation._id}`)
     analytics.captureEvent("Automation Created", { name })
   }
@@ -25,17 +25,19 @@
 <ModalContent
   title="Create Automation"
   confirmText="Create"
+  size="L"
   onConfirm={createAutomation}
-  disabled={!valid}>
+  disabled={!valid}
+>
   <Input bind:value={name} label="Name" />
-  <div slot="footer">
-    <a
-      target="_blank"
-      href="https://docs.budibase.com/automate/introduction-to-automate">
-      <i class="ri-information-line" />
-      <span>Learn about automations</span>
-    </a>
-  </div>
+  <a
+    slot="footer"
+    target="_blank"
+    href="https://docs.budibase.com/automate/introduction-to-automate"
+  >
+    <Icon name="InfoOutline" />
+    <span>Learn about automations</span>
+  </a>
 </ModalContent>
 
 <style>
@@ -49,10 +51,10 @@
   }
   a span {
     text-decoration: underline;
+    margin-left: var(--spectrum-alias-item-padding-s);
   }
   i {
     font-size: 20px;
-    margin-right: var(--spacing-m);
     text-decoration: none;
   }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
index 0924fa3a44..a99c11e9e1 100644
--- a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
@@ -2,51 +2,39 @@
   import { goto } from "@roxi/routify"
   import { automationStore } from "builderStore"
   import { database } from "stores/backend"
-  import { notifier } from "builderStore/store/notifications"
-  import { DropdownMenu } from "@budibase/bbui"
-  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
+  import { ActionMenu, MenuItem, notifications, Icon } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   export let automation
 
-  let anchor
-  let dropdown
   let confirmDeleteDialog
   $: instanceId = $database._id
 
-  function showModal() {
-    dropdown.hide()
-    confirmDeleteDialog.show()
-  }
-
   async function deleteAutomation() {
     await automationStore.actions.delete({
       instanceId,
       automation,
     })
-    notifier.success("Automation deleted.")
+    notifications.success("Automation deleted.")
     $goto("../automate")
   }
 </script>
 
-<div on:click|stopPropagation>
-  <div bind:this={anchor} class="icon" on:click={dropdown.show}>
-    <i class="ri-more-line" />
+<ActionMenu>
+  <div slot="control" class="icon">
+    <Icon s hoverable name="MoreSmallList" />
   </div>
-  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
-    <DropdownContainer>
-      <DropdownItem
-        icon="ri-delete-bin-line"
-        title="Delete"
-        on:click={showModal} />
-    </DropdownContainer>
-  </DropdownMenu>
-</div>
+  <MenuItem noClose icon="Delete" on:click={confirmDeleteDialog.show}>
+    Delete
+  </MenuItem>
+</ActionMenu>
+
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   okText="Delete Automation"
   onOk={deleteAutomation}
-  title="Confirm Deletion">
+  title="Confirm Deletion"
+>
   Are you sure you wish to delete the automation
   <i>{automation.name}?</i>
   This action cannot be undone.
@@ -59,8 +47,4 @@
     justify-content: flex-end;
     align-items: center;
   }
-
-  div.icon i {
-    font-size: 16px;
-  }
 </style>
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
deleted file mode 100644
index bda233f9f2..0000000000
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
+++ /dev/null
@@ -1,186 +0,0 @@
-<script>
-  import groupBy from "lodash/fp/groupBy"
-  import { Input, TextArea, Heading, Spacer, Label } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  import { isValid } from "@budibase/string-templates"
-  import { handlebarsCompletions } from "constants/completions"
-
-  const dispatch = createEventDispatcher()
-
-  export let value = ""
-  export let bindingDrawer
-  export let bindableProperties = []
-
-  let originalValue = value
-  let helpers = handlebarsCompletions()
-  let getCaretPosition
-  let search = ""
-  let validity = true
-
-  $: categories = Object.entries(groupBy("category", bindableProperties))
-  $: value && checkValid()
-  $: dispatch("update", value)
-  $: searchRgx = new RegExp(search, "ig")
-
-  function checkValid() {
-    validity = isValid(value)
-  }
-
-  function addToText(binding) {
-    const position = getCaretPosition()
-    const toAdd = `{{ ${binding.path} }}`
-    if (position.start) {
-      value =
-        value.substring(0, position.start) +
-        toAdd +
-        value.substring(position.end, value.length)
-    } else {
-      value += toAdd
-    }
-  }
-  export function cancel() {
-    dispatch("update", originalValue)
-    bindingDrawer.close()
-  }
-</script>
-
-<div class="container">
-  <div class="list">
-    <Heading small>Available bindings</Heading>
-    <Spacer medium />
-    <Input extraThin placeholder="Search" bind:value={search} />
-    <Spacer medium />
-    {#each categories as [categoryName, bindings]}
-      <Heading extraSmall>{categoryName}</Heading>
-      <Spacer extraSmall />
-      {#each bindableProperties.filter(binding =>
-        binding.label.match(searchRgx)
-      ) as binding}
-        <div class="binding" on:click={() => addToText(binding)}>
-          <span class="binding__label">{binding.label}</span>
-          <span class="binding__type">{binding.type}</span>
-          <br />
-          <div class="binding__description">{binding.description || ''}</div>
-        </div>
-      {/each}
-    {/each}
-    <Heading extraSmall>Helpers</Heading>
-    <Spacer extraSmall />
-    {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
-      <div class="binding" on:click={() => addToText(helper)}>
-        <span class="binding__label">{helper.label}</span>
-        <br />
-        <div class="binding__description">
-          {@html helper.description || ''}
-        </div>
-        <pre>{helper.example || ''}</pre>
-      </div>
-    {/each}
-  </div>
-  <div class="text">
-    <TextArea
-      bind:getCaretPosition
-      thin
-      bind:value
-      placeholder="Add text, or click the objects on the left to add them to the textbox." />
-    {#if !validity}
-      <p class="syntax-error">
-        Current Handlebars syntax is invalid, please check the guide
-        <a href="https://handlebarsjs.com/guide/">here</a>
-        for more details.
-      </p>
-    {/if}
-  </div>
-</div>
-
-<style>
-  .container {
-    height: 40vh;
-    overflow-y: auto;
-    display: grid;
-    grid-template-columns: 280px 1fr;
-  }
-
-  .list {
-    border-right: var(--border-light);
-    padding: var(--spacing-l);
-    overflow: auto;
-  }
-  .list {
-    border-right: var(--border-light);
-    padding: var(--spacing-l);
-    overflow: auto;
-  }
-
-  .list::-webkit-scrollbar {
-    display: none;
-  }
-
-  .text {
-    padding: var(--spacing-l);
-    font-family: var(--font-sans);
-  }
-  .text :global(textarea) {
-    min-height: 100px;
-  }
-  .text :global(p) {
-    margin: 0;
-  }
-
-  .binding {
-    font-size: 12px;
-    padding: var(--spacing-s);
-    border-radius: var(--border-radius-m);
-  }
-  .binding:hover {
-    background-color: var(--grey-2);
-    cursor: pointer;
-  }
-  .binding__label {
-    font-weight: 500;
-    text-transform: capitalize;
-  }
-  .binding__description {
-    color: var(--grey-8);
-    margin-top: 2px;
-    white-space: normal;
-  }
-
-  pre {
-    white-space: normal;
-  }
-
-  .binding__type {
-    font-family: monospace;
-    background-color: var(--grey-2);
-    border-radius: var(--border-radius-m);
-    padding: 2px;
-    margin-left: 2px;
-    font-weight: 500;
-  }
-
-  .editor {
-    padding-left: var(--spacing-l);
-  }
-  .editor :global(textarea) {
-    min-height: 60px;
-  }
-
-  .controls {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    grid-gap: var(--spacing-l);
-    align-items: center;
-    margin-top: var(--spacing-m);
-  }
-
-  .syntax-error {
-    color: var(--red);
-    font-size: 12px;
-  }
-
-  .syntax-error a {
-    color: var(--red);
-    text-decoration: underline;
-  }
-</style>
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 1e2ee46cad..58bfc37b72 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -5,8 +5,8 @@
   import { Button, Input, Select, Label } from "@budibase/bbui"
   import { automationStore } from "builderStore"
   import WebhookDisplay from "../Shared/WebhookDisplay.svelte"
-  import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
-  import AutomationBindingPanel from "./AutomationBindingPanel.svelte"
+  import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
+  import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
 
   export let block
   export let webhookModal
@@ -49,62 +49,67 @@
   }
 </script>
 
-<div class="block-label">{block.name}</div>
-{#each inputs as [key, value]}
-  <div class="block-field">
-    <Label extraSmall grey>{value.title}</Label>
-    {#if value.type === 'string' && value.enum}
-      <Select bind:value={block.inputs[key]} extraThin secondary>
-        <option value="">Choose an option</option>
-        {#each value.enum as option, idx}
-          <option value={option}>
-            {value.pretty ? value.pretty[idx] : option}
-          </option>
-        {/each}
-      </Select>
-    {:else if value.customType === 'password'}
-      <Input type="password" extraThin bind:value={block.inputs[key]} />
-    {:else if value.customType === 'email'}
-      <DrawerBindableInput
-        panel={AutomationBindingPanel}
-        type={'email'}
-        extraThin
-        value={block.inputs[key]}
-        on:change={e => (block.inputs[key] = e.detail)}
-        {bindings} />
-    {:else if value.customType === 'table'}
-      <TableSelector bind:value={block.inputs[key]} />
-    {:else if value.customType === 'row'}
-      <RowSelector bind:value={block.inputs[key]} {bindings} />
-    {:else if value.customType === 'webhookUrl'}
-      <WebhookDisplay value={block.inputs[key]} />
-    {:else if value.customType === 'triggerSchema'}
-      <SchemaSetup bind:value={block.inputs[key]} />
-    {:else if value.type === 'string' || value.type === 'number'}
-      <DrawerBindableInput
-        panel={AutomationBindingPanel}
-        type={value.customType}
-        extraThin
-        value={block.inputs[key]}
-        on:change={e => (block.inputs[key] = e.detail)}
-        {bindings} />
-    {/if}
-  </div>
-{/each}
-{#if stepId === 'WEBHOOK'}
-  <Button wide secondary on:click={() => webhookModal.show()}>
-    Set Up Webhook
-  </Button>
+<div class="fields">
+  <div class="block-label">{block.name}</div>
+  {#each inputs as [key, value]}
+    <div class="block-field">
+      <Label>{value.title}</Label>
+      {#if value.type === "string" && value.enum}
+        <Select
+          bind:value={block.inputs[key]}
+          options={value.enum}
+          getOptionLabel={(x, idx) => (value.pretty ? value.pretty[idx] : x)}
+        />
+      {:else if value.customType === "password"}
+        <Input type="password" bind:value={block.inputs[key]} />
+      {:else if value.customType === "email"}
+        <DrawerBindableInput
+          panel={AutomationBindingPanel}
+          type={"email"}
+          value={block.inputs[key]}
+          on:change={e => (block.inputs[key] = e.detail)}
+          {bindings}
+        />
+      {:else if value.customType === "table"}
+        <TableSelector bind:value={block.inputs[key]} />
+      {:else if value.customType === "row"}
+        <RowSelector bind:value={block.inputs[key]} {bindings} />
+      {:else if value.customType === "webhookUrl"}
+        <WebhookDisplay value={block.inputs[key]} />
+      {:else if value.customType === "triggerSchema"}
+        <SchemaSetup bind:value={block.inputs[key]} />
+      {:else if value.type === "string" || value.type === "number"}
+        <DrawerBindableInput
+          panel={AutomationBindingPanel}
+          type={value.customType}
+          value={block.inputs[key]}
+          on:change={e => (block.inputs[key] = e.detail)}
+          {bindings}
+        />
+      {/if}
+    </div>
+  {/each}
+</div>
+{#if stepId === "WEBHOOK"}
+  <Button secondary on:click={() => webhookModal.show()}>Set Up Webhook</Button>
 {/if}
 
 <style>
+  .fields {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-s);
+  }
+
   .block-field {
     display: grid;
   }
 
   .block-label {
     font-weight: 500;
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-s);
     color: var(--grey-7);
   }
 </style>
diff --git a/packages/builder/src/components/automation/SetupPanel/CodeEditorModal.svelte b/packages/builder/src/components/automation/SetupPanel/CodeEditorModal.svelte
new file mode 100644
index 0000000000..c237827d71
--- /dev/null
+++ b/packages/builder/src/components/automation/SetupPanel/CodeEditorModal.svelte
@@ -0,0 +1,35 @@
+<script>
+  import { Button, Modal, ModalContent } from "@budibase/bbui"
+
+  let modal
+
+  export const show = () => {
+    modal.show()
+  }
+  export const hide = () => {
+    modal.hide()
+  }
+</script>
+
+<Modal bind:this={modal} width="60%">
+  <ModalContent
+    title="Edit Code"
+    showConfirmButton={false}
+    showCancelButton={false}
+  >
+    <div class="container">
+      <slot />
+    </div>
+  </ModalContent>
+</Modal>
+<Button primary on:click={show}>Edit Code</Button>
+
+<style>
+  .container :global(section > header) {
+    /* Fix margin defined in BBUI as L rather than XL */
+    margin-bottom: var(--spacing-xl);
+  }
+  .container :global(textarea) {
+    min-height: 60px;
+  }
+</style>
diff --git a/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte b/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
new file mode 100644
index 0000000000..8ef94501a5
--- /dev/null
+++ b/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
@@ -0,0 +1,55 @@
+<script>
+  import { queries } from "stores/backend"
+  import { Select } from "@budibase/bbui"
+  import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
+  import AutomationBindingPanel from "./AutomationBindingPanel.svelte"
+
+  export let value
+  export let bindings
+
+  $: query = $queries.list.find(query => query._id === value?.queryId)
+  $: parameters = query?.parameters ?? []
+
+  // Ensure any nullish queryId values get set to empty string so
+  // that the select works
+  $: if (value?.queryId == null) value = { queryId: "" }
+  $: console.log("daValuz", value)
+</script>
+
+<div class="block-field">
+  <Select bind:value={value.queryId} extraThin secondary>
+    <option value="">Choose an option</option>
+    {#each $queries.list as query}
+      <option value={query._id}>{query.name}</option>
+    {/each}
+  </Select>
+</div>
+
+{#if parameters.length}
+  <div class="schema-fields">
+    {#each parameters as field}
+      <DrawerBindableInput
+        panel={AutomationBindingPanel}
+        extraThin
+        value={value[field.name]}
+        on:change={e => {
+          value[field.name] = e.detail
+        }}
+        label={field.name}
+        type="string"
+        {bindings}
+      />
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .schema-fields {
+    display: grid;
+    grid-gap: var(--spacing-xl);
+    margin-top: var(--spacing-xl);
+  }
+  .schema-fields :global(label) {
+    text-transform: capitalize;
+  }
+</style>
diff --git a/packages/builder/src/components/automation/SetupPanel/QuerySelector.svelte b/packages/builder/src/components/automation/SetupPanel/QuerySelector.svelte
new file mode 100644
index 0000000000..9019f4ee56
--- /dev/null
+++ b/packages/builder/src/components/automation/SetupPanel/QuerySelector.svelte
@@ -0,0 +1,15 @@
+<script>
+  import { queries } from "stores/backend"
+  import { Select } from "@budibase/bbui"
+
+  export let value
+</script>
+
+<div class="block-field">
+  <Select bind:value secondary extraThin>
+    <option value="">Choose an option</option>
+    {#each $queries.list as query}
+      <option value={query._id}>{query.name}</option>
+    {/each}
+  </Select>
+</div>
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index bee56045ff..99f41908e7 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -1,8 +1,8 @@
 <script>
   import { tables } from "stores/backend"
   import { Select } from "@budibase/bbui"
-  import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
-  import AutomationBindingPanel from "./AutomationBindingPanel.svelte"
+  import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
+  import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
 
   export let value
   export let bindings
@@ -19,35 +19,32 @@
   }
 </script>
 
-<div class="block-field">
-  <Select bind:value={value.tableId} extraThin secondary>
-    <option value="">Choose an option</option>
-    {#each $tables.list as table}
-      <option value={table._id}>{table.name}</option>
-    {/each}
-  </Select>
-</div>
+<Select
+  bind:value={value.tableId}
+  options={$tables.list}
+  getOptionLabel={table => table.name}
+  getOptionValue={table => table._id}
+/>
 
 {#if schemaFields.length}
   <div class="schema-fields">
     {#each schemaFields as [field, schema]}
       {#if !schema.autocolumn}
         {#if schemaHasOptions(schema)}
-          <Select label={field} extraThin secondary bind:value={value[field]}>
-            <option value="">Choose an option</option>
-            {#each schema.constraints.inclusion as option}
-              <option value={option}>{option}</option>
-            {/each}
-          </Select>
-        {:else if schema.type === 'string' || schema.type === 'number'}
+          <Select
+            label={field}
+            bind:value={value[field]}
+            options={schema.constraints.inclusion}
+          />
+        {:else if schema.type === "string" || schema.type === "number"}
           <DrawerBindableInput
             panel={AutomationBindingPanel}
-            extraThin
             value={value[field]}
             on:change={e => (value[field] = e.detail)}
             label={field}
             type="string"
-            {bindings} />
+            {bindings}
+          />
         {/if}
       {/if}
     {/each}
@@ -57,8 +54,8 @@
 <style>
   .schema-fields {
     display: grid;
-    grid-gap: var(--spacing-xl);
-    margin-top: var(--spacing-xl);
+    grid-gap: var(--spacing-s);
+    margin-top: var(--spacing-s);
   }
   .schema-fields :global(label) {
     text-transform: capitalize;
diff --git a/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte b/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
index 50e7346876..1257563ff8 100644
--- a/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
@@ -6,6 +6,24 @@
     name,
     type,
   }))
+  const typeOptions = [
+    {
+      label: "Text",
+      value: "string",
+    },
+    {
+      label: "Number",
+      value: "number",
+    },
+    {
+      label: "Boolean",
+      value: "boolean",
+    },
+    {
+      label: "DateTime",
+      value: "datetime",
+    },
+  ]
 
   function addField() {
     const newValue = { ...value }
@@ -22,7 +40,7 @@
   const fieldNameChanged = originalName => e => {
     // reconstruct using fieldsArray, so field order is preserved
     let entries = [...fieldsArray]
-    const newName = e.target.value
+    const newName = e.detail
     if (newName) {
       entries.find(f => f.name === originalName).name = newName
     } else {
@@ -36,7 +54,9 @@
 </script>
 
 <div class="root">
-  <div class="add-field"><i class="ri-add-line" on:click={addField} /></div>
+  <div class="add-field">
+    <i class="ri-add-line" on:click={addField} />
+  </div>
   <div class="spacer" />
   {#each fieldsArray as field}
     <div class="field">
@@ -44,21 +64,17 @@
         value={field.name}
         secondary
         placeholder="Enter field name"
-        on:change={fieldNameChanged(field.name)} />
+        on:change={fieldNameChanged(field.name)}
+      />
       <Select
-        secondary
-        extraThin
         value={field.type}
-        on:blur={e => (value[field.name] = e.target.value)}>
-        <option>string</option>
-        <option>number</option>
-        <option>boolean</option>
-        <option>datetime</option>
-      </Select>
-
+        on:change={e => (value[field.name] = e.target.value)}
+        options={typeOptions}
+      />
       <i
         class="remove-field ri-delete-bin-line"
-        on:click={() => removeField(field.name)} />
+        on:click={() => removeField(field.name)}
+      />
     </div>
   {/each}
 </div>
diff --git a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
index 68d5eee0c4..820e052a07 100644
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
@@ -1,9 +1,8 @@
 <script>
   import { automationStore } from "builderStore"
   import { database } from "stores/backend"
-  import { notifier } from "builderStore/store/notifications"
+  import { notifications, Icon, Button, Modal, Heading } from "@budibase/bbui"
   import AutomationBlockSetup from "./AutomationBlockSetup.svelte"
-  import { Button, Modal } from "@budibase/bbui"
   import CreateWebookModal from "../Shared/CreateWebhookModal.svelte"
 
   let webhookModal
@@ -19,9 +18,9 @@
     automation.live = live
     automationStore.actions.save({ instanceId, automation })
     if (live) {
-      notifier.info(`Automation ${automation.name} enabled.`)
+      notifications.info(`Automation ${automation.name} enabled.`)
     } else {
-      notifier.danger(`Automation ${automation.name} disabled.`)
+      notifications.error(`Automation ${automation.name} disabled.`)
     }
   }
 
@@ -30,9 +29,11 @@
       automation: $automationStore.selectedAutomation.automation,
     })
     if (result.status === 200) {
-      notifier.success(`Automation ${automation.name} triggered successfully.`)
+      notifications.success(
+        `Automation ${automation.name} triggered successfully.`
+      )
     } else {
-      notifier.danger(`Failed to trigger automation ${automation.name}.`)
+      notifications.error(`Failed to trigger automation ${automation.name}.`)
     }
   }
 
@@ -41,37 +42,43 @@
       instanceId,
       automation,
     })
-    notifier.success(`Automation ${automation.name} saved.`)
+    notifications.success(`Automation ${automation.name} saved.`)
   }
 </script>
 
 <div class="title">
-  <h1>Setup</h1>
-  <i
-    class:highlighted={automationLive}
-    class:hoverable={automationLive}
+  <Heading size="S">Setup</Heading>
+  <Icon
+    l
+    disabled={!automationLive}
+    hoverable={automationLive}
+    name="PauseCircle"
     on:click={() => setAutomationLive(false)}
-    class="ri-stop-circle-fill" />
-  <i
-    class:highlighted={!automationLive}
-    class:hoverable={!automationLive}
+  />
+  <Icon
+    l
+    name="PlayCircle"
+    disabled={automationLive}
+    hoverable={!automationLive}
     data-cy="activate-automation"
     on:click={() => setAutomationLive(true)}
-    class="ri-play-circle-fill" />
+  />
 </div>
 {#if $automationStore.selectedBlock}
   <AutomationBlockSetup
     bind:block={$automationStore.selectedBlock}
-    {webhookModal} />
+    {webhookModal}
+  />
 {:else if $automationStore.selectedAutomation}
   <div class="block-label">{automation.name}</div>
-  <Button secondary wide on:click={testAutomation}>Test Automation</Button>
+  <Button secondary on:click={testAutomation}>Test Automation</Button>
 {/if}
 <Button
   secondary
   wide
   data-cy="save-automation-setup"
-  on:click={saveAutomation}>
+  on:click={saveAutomation}
+>
   Save Automation
 </Button>
 <Modal bind:this={webhookModal} width="30%">
@@ -86,35 +93,13 @@
     align-items: center;
     gap: var(--spacing-xs);
   }
-  .title h1 {
-    font-size: var(--font-size-m);
-    font-weight: 500;
-    margin: 0;
+  .title :global(h1) {
     flex: 1 1 auto;
   }
-  .title i {
-    font-size: 20px;
-    color: var(--grey-5);
-  }
-  .title i.highlighted {
-    color: var(--ink);
-  }
-  .title i.hoverable:hover {
-    cursor: pointer;
-    color: var(--blue);
-  }
 
   .block-label {
-    font-size: var(--font-size-xs);
+    font-size: var(--spectrum-global-dimension-font-size-75);
     font-weight: 500;
     color: var(--grey-7);
   }
-
-  .footer {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    align-items: stretch;
-  }
 </style>
diff --git a/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
index 27239088eb..4f9ac05a06 100644
--- a/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
@@ -5,11 +5,9 @@
   export let value
 </script>
 
-<div class="block-field">
-  <Select bind:value secondary extraThin>
-    <option value="">Choose an option</option>
-    {#each $tables.list as table}
-      <option value={table._id}>{table.name}</option>
-    {/each}
-  </Select>
-</div>
+<Select
+  bind:value
+  options={$tables.list}
+  getOptionLabel={table => table.name}
+  getOptionValue={table => table._id}
+/>
diff --git a/packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte b/packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte
index 19cd41e390..11dafe9cbb 100644
--- a/packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte
+++ b/packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { Icon } from "@budibase/bbui"
   import { automationStore } from "builderStore"
   import { database } from "stores/backend"
   import WebhookDisplay from "./WebhookDisplay.svelte"
@@ -41,29 +42,32 @@
   title="Webhook Setup"
   confirmText="Finished"
   showConfirmButton={finished}
-  cancelText="Skip">
+  cancelText="Skip"
+>
   <p>
     Webhooks are for receiving data. To make them easier please use the URL
     shown below and send a
     <code>POST</code>
-    request to it from your other application. If you're unable to do this now
-    then you can skip this step, however we will not be able to configure
-    bindings for your later actions!
+    request to it from your other application. If you're unable to do this now then
+    you can skip this step, however we will not be able to configure bindings for
+    your later actions!
   </p>
   <WebhookDisplay value={schemaURL} />
   {#if finished}
     <p class="finished-text">
       Request received! We found
       {propCount}
-      bindable value{propCount > 1 ? 's' : ''}.
+      bindable value{propCount > 1 ? "s" : ""}.
     </p>
   {/if}
-  <div slot="footer">
-    <a target="_blank" href="https://docs.budibase.com/automate/steps/triggers">
-      <i class="ri-information-line" />
-      <span>Learn about webhooks</span>
-    </a>
-  </div>
+  <a
+    slot="footer"
+    target="_blank"
+    href="https://docs.budibase.com/automate/steps/triggers"
+  >
+    <Icon name="InfoOutline" />
+    <span>Learn about webhooks</span>
+  </a>
 </ModalContent>
 
 <style>
@@ -77,11 +81,7 @@
   }
   a span {
     text-decoration: underline;
-  }
-  i {
-    font-size: 20px;
-    margin-right: var(--spacing-m);
-    text-decoration: none;
+    margin-left: var(--spectrum-alias-item-padding-s);
   }
   p {
     margin: 0;
diff --git a/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte b/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
index dc908a9571..e1f2fe78d8 100644
--- a/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
+++ b/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
@@ -1,6 +1,5 @@
 <script>
-  import { notifier } from "builderStore/store/notifications"
-  import { Input } from "@budibase/bbui"
+  import { Input, Icon, notifications } from "@budibase/bbui"
   import { store, hostingStore } from "builderStore"
 
   export let value
@@ -24,15 +23,15 @@
     dummy.select()
     document.execCommand("copy")
     document.body.removeChild(dummy)
-    notifier.success(`URL copied to clipboard`)
+    notifications.success(`URL copied to clipboard`)
   }
 </script>
 
 <div>
-  <Input disabled="true" thin value={fullWebhookURL(value)} />
-  <span on:click={() => copyToClipboard()}>
-    <i class="ri-clipboard-line copy-icon" />
-  </span>
+  <Input readonly value={fullWebhookURL(value)} />
+  <div class="icon" on:click={() => copyToClipboard()}>
+    <Icon size="S" name="Copy" />
+  </div>
 </div>
 
 <style>
@@ -40,26 +39,31 @@
     position: relative;
   }
 
-  div :global(input:disabled) {
-    color: var(--grey-7);
-  }
-
-  span {
+  .icon {
+    right: 1px;
+    bottom: 1px;
     position: absolute;
-    border: none;
-    border-radius: 50%;
-    height: 24px;
-    width: 24px;
-    background: var(--background);
-    right: var(--spacing-s);
-    bottom: 9px;
-    display: flex;
-    flex-direction: row;
     justify-content: center;
     align-items: center;
+    display: flex;
+    flex-direction: row;
+    box-sizing: border-box;
+    border-left: 1px solid var(--spectrum-alias-border-color);
+    border-top-right-radius: var(--spectrum-alias-border-radius-regular);
+    border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
+    width: 31px;
+    color: var(--spectrum-alias-text-color);
+    background-color: var(--spectrum-global-color-gray-75);
+    transition: background-color
+        var(--spectrum-global-animation-duration-100, 130ms),
+      box-shadow var(--spectrum-global-animation-duration-100, 130ms),
+      border-color var(--spectrum-global-animation-duration-100, 130ms);
+    height: calc(var(--spectrum-alias-item-height-m) - 2px);
   }
-
-  span:hover {
-    background-color: var(--grey-3);
+  .icon:hover {
+    cursor: pointer;
+    color: var(--spectrum-alias-text-color-hover);
+    background-color: var(--spectrum-global-color-gray-50);
+    border-color: var(--spectrum-alias-border-color-hover);
   }
 </style>
diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte
index 8954b00f81..3697adb7ac 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@@ -29,9 +29,18 @@
   $: {
     if ($views.selected?.name?.startsWith("all_")) {
       loading = true
+      const loadingTableId = $tables.selected?._id
       api.fetchDataForView($views.selected).then(rows => {
-        data = rows || []
         loading = false
+
+        // If we started a slow request then quickly change table, sometimes
+        // the old data overwrites the new data.
+        // This check ensures that we don't do that.
+        if (loadingTableId !== $tables.selected?._id) {
+          return
+        }
+
+        data = rows || []
       })
     }
   }
@@ -44,12 +53,14 @@
   {data}
   allowEditing={true}
   bind:hideAutocolumns
-  {loading}>
+  {loading}
+>
   <CreateColumnButton />
   {#if schema && Object.keys(schema).length > 0}
     <CreateRowButton
-      title={isUsersTable ? 'Create New User' : 'Create New Row'}
-      modalContentComponent={isUsersTable ? CreateEditUser : CreateEditRow} />
+      title={isUsersTable ? "Create user" : "Create row"}
+      modalContentComponent={isUsersTable ? CreateEditUser : CreateEditRow}
+    />
     <CreateViewButton />
     <ManageAccessButton resourceId={$tables.selected?._id} />
     {#if isUsersTable}
diff --git a/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte b/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
index 9035e9cb00..28915bd78a 100644
--- a/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
@@ -11,7 +11,7 @@
 {#if error}
   <div class="errors">{error}</div>
 {/if}
-<Table title={''} schema={query.schema} {data} {loading} />
+<Table schema={query.schema} {data} {loading} rowCount={5} />
 
 <style>
   .errors {
diff --git a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
index 075b556134..46c77d6411 100644
--- a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
+++ b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
@@ -1,12 +1,5 @@
 <script>
-  import {
-    Input,
-    Select,
-    Label,
-    DatePicker,
-    Toggle,
-    RichText,
-  } from "@budibase/bbui"
+  import { Input, Select, DatePicker, Toggle, TextArea } from "@budibase/bbui"
   import Dropzone from "components/common/Dropzone.svelte"
   import { capitalise } from "../../../helpers"
   import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
@@ -20,37 +13,29 @@
   $: label = capitalise(meta.name)
 </script>
 
-{#if type === 'options'}
-  <Select thin secondary {label} data-cy="{meta.name}-select" bind:value>
-    <option value="">Choose an option</option>
-    {#each meta.constraints.inclusion as opt}
-      <option value={opt}>{opt}</option>
-    {/each}
-  </Select>
-{:else if type === 'datetime'}
+{#if type === "options"}
+  <Select
+    {label}
+    data-cy="{meta.name}-select"
+    bind:value
+    options={meta.constraints.inclusion}
+  />
+{:else if type === "datetime"}
   <DatePicker {label} bind:value />
-{:else if type === 'attachment'}
-  <div>
-    <Label extraSmall grey forAttr={'dropzone-label'}>{label}</Label>
-    <Dropzone bind:files={value} />
-  </div>
-{:else if type === 'boolean'}
+{:else if type === "attachment"}
+  <Dropzone {label} bind:value />
+{:else if type === "boolean"}
   <Toggle text={label} bind:checked={value} data-cy="{meta.name}-input" />
-{:else if type === 'link'}
-  <div>
-    <LinkedRowSelector bind:linkedRows={value} schema={meta} />
-  </div>
-{:else if type === 'longform'}
-  <div>
-    <Label extraSmall grey>{label}</Label>
-    <RichText bind:value />
-  </div>
+{:else if type === "link"}
+  <LinkedRowSelector bind:linkedRows={value} schema={meta} />
+{:else if type === "longform"}
+  <TextArea {label} bind:value />
 {:else}
   <Input
-    thin
     {label}
     data-cy="{meta.name}-input"
     {type}
     bind:value
-    disabled={readonly} />
+    disabled={readonly}
+  />
 {/if}
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 059fe1e123..5c66a5b740 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -1,21 +1,16 @@
 <script>
   import { fade } from "svelte/transition"
   import { goto, params } from "@roxi/routify"
-  import AgGrid from "@budibase/svelte-ag-grid"
+  import { Table, Modal, Heading, notifications } from "@budibase/bbui"
 
   import api from "builderStore/api"
-  import { notifier } from "builderStore/store/notifications"
   import Spinner from "components/common/Spinner.svelte"
   import DeleteRowsButton from "./buttons/DeleteRowsButton.svelte"
-  import {
-    getRenderer,
-    editRowRenderer,
-    userRowRenderer,
-  } from "./cells/cellRenderers"
-  import TableLoadingOverlay from "./TableLoadingOverlay"
-  import TableHeader from "./TableHeader"
-  import "@budibase/svelte-ag-grid/dist/index.css"
+  import CreateEditRow from "./modals/CreateEditRow.svelte"
+  import CreateEditUser from "./modals/CreateEditUser.svelte"
+  import CreateEditColumn from "./modals/CreateEditColumn.svelte"
   import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
+  import RoleCell from "./cells/RoleCell.svelte"
 
   export let schema = {}
   export let data = []
@@ -25,114 +20,46 @@
   export let loading = false
   export let theme = "alpine"
   export let hideAutocolumns
+  export let rowCount
 
-  let columnDefs = []
   let selectedRows = []
-
-  let options = {
-    defaultColDef: {
-      flex: 1,
-      filter: true,
-    },
-    rowSelection: allowEditing ? "multiple" : false,
-    rowMultiSelectWithClick: true,
-    suppressRowClickSelection: false,
-    suppressFieldDotNotation: true,
-    paginationAutoPageSize: true,
-    pagination: true,
-    enableRangeSelection: true,
-    popupParent: document.body,
-    components: {
-      customLoadingOverlay: TableLoadingOverlay,
-    },
-    loadingOverlayComponent: "customLoadingOverlay",
-    animateRows: true,
-  }
+  let editableColumn
+  let editableRow
+  let editRowModal
+  let editColumnModal
+  let customRenderers = []
 
   $: isUsersTable = tableId === TableNames.USERS
+  $: data && resetSelectedRows()
+  $: editRowComponent = isUsersTable ? CreateEditUser : CreateEditRow
   $: {
     if (isUsersTable) {
-      schema.email.displayFieldName = "Email"
-      schema.roleId.displayFieldName = "Role"
-      if (schema.status) {
-        schema.status.displayFieldName = "Status"
-      }
-    }
-  }
-
-  $: {
-    // Reset selection every time data changes
-    selectedRows = []
-
-    let result = []
-    if (allowEditing) {
-      result = [
+      customRenderers = [
         {
-          checkboxSelection: true,
-          lockPosition: true,
-          headerName: "Edit",
-          pinned: "left",
-          sortable: false,
-          resizable: false,
-          suppressMovable: true,
-          suppressMenu: true,
-          minWidth: 114,
-          width: 114,
-          cellRenderer: isUsersTable ? userRowRenderer : editRowRenderer,
+          column: "roleId",
+          component: RoleCell,
         },
       ]
-    }
-
-    const canEditColumn = key => {
-      if (!allowEditing) {
-        return false
-      }
-      return !(isUsersTable && UNEDITABLE_USER_FIELDS.includes(key))
-    }
-
-    for (let [key, value] of Object.entries(schema || {})) {
-      // skip autocolumns if hiding
-      if (hideAutocolumns && value.autocolumn) {
-        continue
-      }
-      let config = {
-        headerCheckboxSelection: false,
-        headerComponent: TableHeader,
-        headerComponentParams: {
-          field: schema[key],
-          editable: canEditColumn(key),
-        },
-        headerName: value.displayFieldName || key,
-        field: key,
-        sortable: true,
-        cellRenderer: getRenderer({
-          schema: schema[key],
-          editable: true,
-          isUsersTable,
-        }),
-        cellRendererParams: {
-          selectRelationship,
-        },
-        autoHeight: true,
-        resizable: true,
-        minWidth: 200,
-      }
-      // sort auto-columns to the end if they are present
-      if (value.autocolumn) {
-        result.push(config)
-      } else {
-        result.unshift(config)
+      UNEDITABLE_USER_FIELDS.forEach(field => {
+        if (schema[field]) {
+          schema[field].editable = false
+        }
+      })
+      schema.email.displayName = "Email"
+      schema.roleId.displayName = "Role"
+      if (schema.status) {
+        schema.status.displayName = "Status"
       }
     }
-    columnDefs = result
   }
 
-  function selectRelationship(row, fieldName) {
-    if (!row?.[fieldName]?.length) {
-      return
-    }
+  const resetSelectedRows = () => {
+    selectedRows = []
+  }
+
+  const selectRelationship = ({ tableId, rowId, fieldName }) => {
     $goto(
-      `/${$params.application}/data/table/${row.tableId}/relationship/${row._id}/${fieldName}`
+      `/builder/${$params.application}/data/table/${tableId}/relationship/${rowId}/${fieldName}`
     )
   }
 
@@ -142,14 +69,30 @@
       type: "delete",
     })
     data = data.filter(row => !selectedRows.includes(row))
-    notifier.success(`Successfully deleted ${selectedRows.length} rows`)
+    notifications.success(`Successfully deleted ${selectedRows.length} rows`)
     selectedRows = []
   }
+
+  const editRow = row => {
+    editableRow = row
+    if (row) {
+      editRowModal.show()
+    }
+  }
+
+  const editColumn = field => {
+    editableColumn = schema?.[field]
+    if (editableColumn) {
+      editColumnModal.show()
+    }
+  }
 </script>
 
 <div>
   <div class="table-title">
-    <h1>{title}</h1>
+    {#if title}
+      <Heading size="S">{title}</Heading>
+    {/if}
     {#if loading}
       <div transition:fade>
         <Spinner size="10" />
@@ -163,17 +106,30 @@
     {/if}
   </div>
 </div>
-<div class="grid-wrapper">
-  {#key columnDefs.length}
-    <AgGrid
-      {theme}
-      {options}
-      {data}
-      {columnDefs}
-      {loading}
-      on:select={({ detail }) => (selectedRows = detail)} />
-  {/key}
-</div>
+{#key tableId}
+  <Table
+    {data}
+    {schema}
+    {loading}
+    {customRenderers}
+    {rowCount}
+    bind:selectedRows
+    allowSelectRows={allowEditing}
+    allowEditRows={allowEditing}
+    allowEditColumns={allowEditing}
+    showAutoColumns={!hideAutocolumns}
+    on:editcolumn={e => editColumn(e.detail)}
+    on:editrow={e => editRow(e.detail)}
+    on:clickrelationship={e => selectRelationship(e.detail)}
+  />
+{/key}
+
+<Modal bind:this={editRowModal}>
+  <svelte:component this={editRowComponent} row={editableRow} />
+</Modal>
+<Modal bind:this={editColumnModal}>
+  <CreateEditColumn field={editableColumn} onClosed={editColumnModal.hide} />
+</Modal>
 
 <style>
   .table-title {
@@ -197,7 +153,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    gap: var(--spacing-l);
+    gap: var(--spacing-s);
   }
   .popovers :global(button) {
     font-weight: 500;
@@ -206,108 +162,4 @@
   .popovers :global(button svg) {
     margin-right: var(--spacing-xs);
   }
-
-  .grid-wrapper {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-  }
-  .grid-wrapper :global(> *) {
-    flex: 1 1 auto;
-  }
-  :global(.grid-wrapper) {
-    --ag-modal-overlay-background-color: transparent;
-    --ag-border-color: var(--grey-3);
-    --ag-header-background-color: var(--grey-1);
-    --ag-odd-row-background-color: var(--grey-1);
-    --ag-row-border-color: var(--grey-3);
-    --ag-background-color: var(--background);
-    --ag-foreground-color: var(--ink);
-  }
-  :global(.ag-overlay-loading-center) {
-    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.05) !important;
-    border-color: var(--grey-2);
-  }
-
-  :global(.ag-menu) {
-    border: var(--border-dark) !important;
-  }
-
-  :global(.ag-popup-child) {
-    border-radius: var(--border-radius-m) !important;
-    box-shadow: none !important;
-  }
-
-  :global(.ag-header-cell-text) {
-    font-family: var(--font-sans);
-    font-weight: 600;
-    color: var(--ink);
-  }
-
-  :global(.ag-filter) {
-    background: var(--background);
-    padding: var(--spacing-s);
-    outline: none;
-    box-sizing: border-box;
-    color: var(--ink);
-    border-radius: var(--border-radius-m);
-    font-family: var(--font-sans) !important;
-    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
-  }
-
-  :global(.ag-menu) {
-    border: none;
-  }
-
-  :global(.ag-simple-filter-body-wrapper > *) {
-    margin-bottom: var(--spacing-m) !important;
-  }
-
-  :global(.ag-select) {
-    height: inherit !important;
-  }
-
-  :global(.ag-menu input) {
-    color: var(--ink) !important;
-    font-size: var(--font-size-xs);
-    border-radius: var(--border-radius-s) !important;
-    border: none;
-    background-color: var(--grey-2) !important;
-    padding: var(--spacing-m);
-    margin: 0;
-    outline: none;
-    font-family: var(--font-sans);
-    border: var(--border-transparent) !important;
-    transition: 0.2s all;
-  }
-  :global(.ag-menu input:focus) {
-    border: var(--border-blue) !important;
-  }
-
-  :global(.ag-picker-field-display) {
-    color: var(--ink) !important;
-    font-size: var(--font-size-xs) !important;
-    border-radius: var(--border-radius-s) !important;
-    background-color: var(--grey-2) !important;
-    font-family: var(--font-sans);
-    border: var(--border-transparent) !important;
-  }
-
-  :global(.ag-picker-field-wrapper) {
-    background: var(--grey-2) !important;
-    border: var(--border-transparent) !important;
-    padding-top: var(--spacing-xs);
-    padding-bottom: var(--spacing-xs);
-  }
-
-  :global(.ag-header) {
-    height: 61px !important;
-    min-height: 61px !important;
-  }
-
-  :global(.ag-header-row) {
-    height: 60px !important;
-  }
 </style>
diff --git a/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte b/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte
deleted file mode 100644
index e929bbc206..0000000000
--- a/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte
+++ /dev/null
@@ -1,170 +0,0 @@
-<script>
-  import { onMount, onDestroy } from "svelte"
-  import { Modal, ModalContent } from "@budibase/bbui"
-  import CreateEditColumn from "../modals/CreateEditColumn.svelte"
-  import { FIELDS } from "constants/backend"
-
-  const SORT_ICON_MAP = {
-    asc: "ri-arrow-down-fill",
-    desc: "ri-arrow-up-fill",
-  }
-
-  export let field
-  export let displayName
-  export let column
-  export let enableSorting = true
-  export let showColumnMenu
-  export let progressSort
-  export let editable
-
-  let menuButton
-  let sortDirection = ""
-  let modal
-  let hovered
-  let filterActive
-
-  function toggleMenu() {
-    showColumnMenu(menuButton)
-  }
-
-  function onSort(event) {
-    progressSort(event.shiftKey)
-  }
-
-  function showModal() {
-    modal.show()
-  }
-
-  function setSort() {
-    sortDirection = column.getSort()
-  }
-
-  function setFilterActive(e) {
-    filterActive = e.column.filterActive
-  }
-
-  onMount(() => {
-    column.addEventListener("sortChanged", setSort)
-    column.addEventListener("filterActiveChanged", setFilterActive)
-  })
-
-  onDestroy(() => {
-    column.removeEventListener("sortChanged", setSort)
-    column.removeEventListener("filterActiveChanged", setFilterActive)
-  })
-
-  $: type = FIELDS[field?.type?.toUpperCase()]?.name
-</script>
-
-<header
-  on:click={onSort}
-  data-cy="table-header"
-  on:mouseover={() => (hovered = true)}
-  on:mouseleave={() => (hovered = false)}>
-  <div class="column-header">
-    <div class="column-header-text">
-      <div class="column-header-name">
-        {displayName}
-        {#if field.autocolumn}<i class="auto ri-magic-fill" />{/if}
-      </div>
-      {#if type}
-        <div class="column-header-type">{type}</div>
-      {/if}
-    </div>
-    <i class={`${SORT_ICON_MAP[sortDirection]} icon`} />
-  </div>
-  <Modal bind:this={modal}>
-    <ModalContent
-      showCancelButton={false}
-      showConfirmButton={false}
-      title={`Edit Column: ${field.name}`}>
-      <CreateEditColumn onClosed={modal.hide} {field} />
-    </ModalContent>
-  </Modal>
-  <section class:show={hovered || filterActive}>
-    {#if editable && hovered}
-      <span on:click|stopPropagation={showModal}>
-        <i class="ri-pencil-line icon" />
-      </span>
-    {/if}
-    <span on:click|stopPropagation={toggleMenu} bind:this={menuButton}>
-      <i class="ri-filter-line icon" class:active={filterActive} />
-    </span>
-  </section>
-</header>
-
-<style>
-  header {
-    font-family: Inter;
-    font-weight: 600;
-    display: flex;
-    justify-content: space-between;
-    height: 100%;
-    width: 100%;
-    align-items: center;
-    color: var(--ink);
-  }
-
-  section {
-    opacity: 0;
-    transition: 0.3s all;
-  }
-
-  section.show {
-    opacity: 1;
-  }
-
-  .column-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-s);
-  }
-
-  .column-header-text {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-xs);
-  }
-
-  .column-header-name {
-    white-space: normal !important;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-    overflow: hidden;
-  }
-
-  .column-header-type {
-    font-size: var(--font-size-xs);
-    color: var(--grey-6);
-  }
-
-  .icon {
-    transition: 0.2s all;
-    font-size: var(--font-size-m);
-    font-weight: 500;
-  }
-  .auto {
-    font-size: 9px;
-    transition: none;
-    position: relative;
-    margin-left: 2px;
-    top: -3px;
-    color: var(--grey-6);
-  }
-
-  .icon:hover {
-    color: var(--blue);
-  }
-
-  .icon.active,
-  .icon:hover {
-    color: var(--blue);
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DataTable/TableHeader/index.js b/packages/builder/src/components/backend/DataTable/TableHeader/index.js
deleted file mode 100644
index 538681a3c1..0000000000
--- a/packages/builder/src/components/backend/DataTable/TableHeader/index.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import TableHeader from "./TableHeader.svelte"
-
-export default class TableHeaderWrapper {
-  constructor() {}
-
-  init(params) {
-    this.agParams = params
-    this.container = document.createElement("div")
-    this.container.style.height = "100%"
-    this.container.style.width = "100%"
-
-    this.headerComponent = new TableHeader({
-      target: this.container,
-      props: params,
-    })
-    this.gui = this.container
-  }
-
-  // can get called more than once, you should return the HTML element
-  getGui() {
-    return this.gui
-  }
-
-  // gets called when a new Column Definition has been set for this header
-  refresh(params) {
-    this.agParams = params
-    this.headerComponent = new TableHeader({
-      target: this.container,
-      props: params,
-    })
-  }
-
-  // optional method, gets called once, when component is destroyed
-  destroy() {}
-}
diff --git a/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/LoadingOverlay.svelte b/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/LoadingOverlay.svelte
deleted file mode 100644
index 9d4f0f10ba..0000000000
--- a/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/LoadingOverlay.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-  import Spinner from "components/common/Spinner.svelte"
-  import { fade } from "svelte/transition"
-  import Logo from "/assets/bb-logo.svg"
-</script>
-
-<div class="ag-overlay-loading-center loading-container">
-  <div transition:fade class="loading-overlay">
-    <img height="30" width="30" src={Logo} alt="Budibase icon" />
-    <span> Loading Your Data </span>
-    <Spinner size="12" />
-  </div>
-</div>
-
-<style>
-  .loading-overlay {
-    display: flex;
-    align-items: center;
-    font-family: var(--font-sans);
-    font-weight: 500;
-    color: var(--ink);
-  }
-
-  .loading-overlay > * {
-    margin-right: var(--spacing-m);
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/index.js b/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/index.js
deleted file mode 100644
index 886391d537..0000000000
--- a/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import LoadingOverlay from "./LoadingOverlay.svelte"
-
-export default class LoadingOverlayWrapper {
-  init(params) {
-    this.gui = document.createElement("div")
-    new LoadingOverlay({
-      target: this.gui,
-      props: {
-        params,
-      },
-    })
-  }
-
-  getGui() {
-    return this.gui
-  }
-}
diff --git a/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
index 092796b3b5..6a555cac58 100644
--- a/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
@@ -57,7 +57,9 @@
   tableId={view.tableId}
   {data}
   {loading}
-  bind:hideAutocolumns>
+  allowEditing={!view?.calculation}
+  bind:hideAutocolumns
+>
   <FilterButton {view} />
   <CalculateButton {view} />
   {#if view.calculation}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
index 0452491247..7145171ee1 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
@@ -1,23 +1,21 @@
 <script>
-  import { Popover, TextButton, Icon } from "@budibase/bbui"
-  import CalculatePopover from "../popovers/CalculatePopover.svelte"
+  import { Modal, ActionButton } from "@budibase/bbui"
+  import CalculateModal from "../modals/CalculateModal.svelte"
 
   export let view = {}
 
-  let anchor
-  let dropdown
+  let modal
 </script>
 
-<div bind:this={anchor}>
-  <TextButton
-    text
-    small
-    on:click={dropdown.show}
-    active={view.field && view.calculation}>
-    <Icon name="calculate" />
-    Calculate
-  </TextButton>
-</div>
-<Popover bind:this={dropdown} {anchor} align="left">
-  <CalculatePopover {view} onClosed={dropdown.hide} />
-</Popover>
+<ActionButton
+  icon="Calculator"
+  size="S"
+  quiet
+  on:click={modal.show}
+  active={view.field && view.calculation}
+>
+  Calculate
+</ActionButton>
+<Modal bind:this={modal}>
+  <CalculateModal {view} />
+</Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
index 7677451a44..86aef4ddbb 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
@@ -1,28 +1,13 @@
 <script>
-  import {
-    DropdownMenu,
-    TextButton as Button,
-    Icon,
-    Modal,
-    ModalContent,
-  } from "@budibase/bbui"
+  import { ActionButton, Modal } from "@budibase/bbui"
   import CreateEditColumn from "../modals/CreateEditColumn.svelte"
 
   let modal
-  let fieldName
 </script>
 
-<div>
-  <Button text small on:click={modal.show}>
-    <Icon name="addcolumn" />
-    Create New Column
-  </Button>
-</div>
+<ActionButton icon="TableColumnAddRight" quiet size="S" on:click={modal.show}>
+  Create column
+</ActionButton>
 <Modal bind:this={modal}>
-  <ModalContent
-    showCancelButton={false}
-    showConfirmButton={false}
-    title={'Create Column'}>
-    <CreateEditColumn onClosed={modal.hide} />
-  </ModalContent>
+  <CreateEditColumn />
 </Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
index 19975ac1a1..7f62a246f3 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
@@ -1,19 +1,16 @@
 <script>
-  import { TextButton as Button, Icon, Modal } from "@budibase/bbui"
+  import { ActionButton, Modal } from "@budibase/bbui"
   import CreateEditRow from "../modals/CreateEditRow.svelte"
 
   export let modalContentComponent = CreateEditRow
-  export let title = "Create New Row"
+  export let title = "Create row"
 
   let modal
 </script>
 
-<div>
-  <Button text small on:click={modal.show}>
-    <Icon name="addrow" />
-    {title}
-  </Button>
-</div>
+<ActionButton icon="TableRowAddBottom" size="S" quiet on:click={modal.show}>
+  {title}
+</ActionButton>
 <Modal bind:this={modal}>
   <svelte:component this={modalContentComponent} />
 </Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
index ef58b52c60..297d120ede 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
@@ -1,17 +1,13 @@
 <script>
-  import { Popover, TextButton, Icon } from "@budibase/bbui"
-  import CreateViewPopover from "../popovers/CreateViewPopover.svelte"
+  import { Modal, ActionButton } from "@budibase/bbui"
+  import CreateViewModal from "../modals/CreateViewModal.svelte"
 
-  let anchor
-  let dropdown
+  let modal
 </script>
 
-<div bind:this={anchor}>
-  <TextButton text small on:click={dropdown.show}>
-    <Icon name="view" />
-    Create New View
-  </TextButton>
-</div>
-<Popover bind:this={dropdown} {anchor} align="left">
-  <CreateViewPopover onClosed={dropdown.hide} />
-</Popover>
+<ActionButton icon="CollectionAdd" size="S" quiet on:click={modal.show}>
+  Create view
+</ActionButton>
+<Modal bind:this={modal}>
+  <CreateViewModal />
+</Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
index f55969087f..c17b7e82df 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { TextButton, Icon } from "@budibase/bbui"
+  import { Button, Icon } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   export let selectedRows
@@ -13,20 +13,18 @@
   }
 </script>
 
-<div>
-  <TextButton small text on:click={modal.show}>
-    <Icon name="delete" />
-    Delete
-    {selectedRows.length}
-    row(s)
-  </TextButton>
-</div>
+<Button icon="Delete" size="s" primary quiet on:click={modal.show}>
+  Delete
+  {selectedRows.length}
+  row(s)
+</Button>
 <ConfirmDialog
   bind:this={modal}
   okText="Delete"
   onOk={confirmDeletion}
-  title="Confirm Deletion">
+  title="Confirm Deletion"
+>
   Are you sure you want to delete
   {selectedRows.length}
-  row{selectedRows.length > 1 ? 's' : ''}?
+  row{selectedRows.length > 1 ? "s" : ""}?
 </ConfirmDialog>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
index 024905fddc..1cc930471b 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
@@ -1,23 +1,15 @@
 <script>
-  import { TextButton as Button, Modal } from "@budibase/bbui"
+  import { Button, Modal } from "@budibase/bbui"
   import EditRolesModal from "../modals/EditRoles.svelte"
 
   let modal
 </script>
 
 <div>
-  <Button text small on:click={modal.show}>
-    <i class="ri-lock-line" />
+  <Button icon="UsersLock" primary size="S" quiet on:click={modal.show}>
     Edit Roles
   </Button>
 </div>
 <Modal bind:this={modal}>
   <EditRolesModal />
 </Modal>
-
-<style>
-  i {
-    margin-right: var(--spacing-xs);
-    font-size: var(--font-size-s);
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
index f4e4fb34a8..7a76ba0820 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
@@ -1,20 +1,15 @@
 <script>
-  import { TextButton, Icon, Popover } from "@budibase/bbui"
-  import api from "builderStore/api"
-  import ExportPopover from "../popovers/ExportPopover.svelte"
+  import { ActionButton, Modal } from "@budibase/bbui"
+  import ExportModal from "../modals/ExportModal.svelte"
 
   export let view
 
-  let anchor
-  let dropdown
+  let modal
 </script>
 
-<div bind:this={anchor}>
-  <TextButton text small on:click={dropdown.show}>
-    <Icon name="download" />
-    Export
-  </TextButton>
-</div>
-<Popover bind:this={dropdown} {anchor} align="left">
-  <ExportPopover {view} onClosed={dropdown.hide} />
-</Popover>
+<ActionButton icon="Download" size="S" quiet on:click={modal.show}>
+  Export
+</ActionButton>
+<Modal bind:this={modal}>
+  <ExportModal {view} />
+</Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
index 5c7efab369..2e2026baed 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
@@ -1,23 +1,21 @@
 <script>
-  import { Popover, TextButton, Icon } from "@budibase/bbui"
-  import FilterPopover from "../popovers/FilterPopover.svelte"
+  import { ActionButton, Modal } from "@budibase/bbui"
+  import FilterModal from "../modals/FilterModal.svelte"
 
   export let view = {}
 
-  let anchor
-  let dropdown
+  let modal
 </script>
 
-<div bind:this={anchor}>
-  <TextButton
-    text
-    small
-    on:click={dropdown.show}
-    active={view.filters && view.filters.length}>
-    <Icon name="filter" />
-    Filter
-  </TextButton>
-</div>
-<Popover bind:this={dropdown} {anchor} align="left">
-  <FilterPopover {view} onClosed={dropdown.hide} />
-</Popover>
+<ActionButton
+  icon="Filter"
+  size="S"
+  quiet
+  on:click={modal.show}
+  active={view.filters?.length}
+>
+  Filter
+</ActionButton>
+<Modal bind:this={modal}>
+  <FilterModal {view} />
+</Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
index dbe88d8f1f..309dd9922b 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
@@ -1,19 +1,22 @@
 <script>
-  import { Popover, TextButton, Icon } from "@budibase/bbui"
-  import GroupByPopover from "../popovers/GroupByPopover.svelte"
+  import { Modal, Button } from "@budibase/bbui"
+  import GroupByModal from "../modals/GroupByModal.svelte"
 
   export let view = {}
 
-  let anchor
-  let dropdown
+  let modal
 </script>
 
-<div bind:this={anchor}>
-  <TextButton text small active={!!view.groupBy} on:click={dropdown.show}>
-    <Icon name="group" />
-    Group By
-  </TextButton>
-</div>
-<Popover bind:this={dropdown} {anchor} align="left">
-  <GroupByPopover {view} onClosed={dropdown.hide} />
-</Popover>
+<Button
+  icon="Group"
+  primary
+  size="S"
+  quiet
+  active={!!view.groupBy}
+  on:click={modal.show}
+>
+  Group By
+</Button>
+<Modal bind:this={modal}>
+  <GroupByModal {view} />
+</Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
index fc50bfbfef..3d74188ee4 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
@@ -1,27 +1,13 @@
 <script>
-  import { TextButton } from "@budibase/bbui"
+  import { ActionButton } from "@budibase/bbui"
 
   export let hideAutocolumns
 
-  let anchor
-  let dropdown
-
   function hideOrUnhide() {
     hideAutocolumns = !hideAutocolumns
   }
 </script>
 
-<div bind:this={anchor}>
-  <TextButton text small on:click={hideOrUnhide}>
-    {#if hideAutocolumns}
-      <i class="ri-magic-line" />
-      Show Auto Columns
-    {:else}<i class="ri-magic-fill" /> Hide Auto Columns{/if}
-  </TextButton>
-</div>
-
-<style>
-  i {
-    margin-right: 4px;
-  }
-</style>
+<ActionButton icon="MagicWand" primary size="S" quiet on:click={hideOrUnhide}>
+  {#if hideAutocolumns}Show auto columns{:else}Hide auto columns{/if}
+</ActionButton>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
index 6828976c51..7a9e582c2d 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
@@ -1,37 +1,26 @@
 <script>
-  import { TextButton, Popover } from "@budibase/bbui"
+  import { ActionButton, Modal } from "@budibase/bbui"
   import { permissions } from "stores/backend"
-  import ManageAccessPopover from "../popovers/ManageAccessPopover.svelte"
+  import ManageAccessModal from "../modals/ManageAccessModal.svelte"
 
   export let resourceId
 
-  let anchor
-  let dropdown
+  let modal
   let resourcePermissions
 
   async function openDropdown() {
     resourcePermissions = await permissions.forResource(resourceId)
-    dropdown.show()
+    modal.show()
   }
 </script>
 
-<div bind:this={anchor}>
-  <TextButton text small on:click={openDropdown}>
-    <i class="ri-lock-line" />
-    Manage Access
-  </TextButton>
-</div>
-<Popover bind:this={dropdown} {anchor} align="left">
-  <ManageAccessPopover
+<ActionButton icon="LockClosed" size="S" quiet on:click={openDropdown}>
+  Manage access
+</ActionButton>
+<Modal bind:this={modal}>
+  <ManageAccessModal
     {resourceId}
     levels={$permissions}
     permissions={resourcePermissions}
-    onClosed={dropdown.hide} />
-</Popover>
-
-<style>
-  i {
-    margin-right: var(--spacing-xs);
-    font-size: var(--font-size-s);
-  }
-</style>
+  />
+</Modal>
diff --git a/packages/builder/src/components/backend/DataTable/cells/AttachmentCell.svelte b/packages/builder/src/components/backend/DataTable/cells/AttachmentCell.svelte
deleted file mode 100644
index b8169f1398..0000000000
--- a/packages/builder/src/components/backend/DataTable/cells/AttachmentCell.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script>
-  import { FILE_TYPES } from "constants/backend"
-
-  export let files
-  export let height = "70"
-  export let width = "70"
-</script>
-
-<div class="file-list">
-  {#each files as file}
-    <div class="file">
-      {#if FILE_TYPES.IMAGE.includes(file.extension.toLowerCase())}
-        <img {width} {height} src={file.url} />
-      {:else}
-        <span class="extension">.{file.extension}</span>
-        <i class="ri-file-line" />
-        <span>{file.name}</span>
-      {/if}
-    </div>
-  {/each}
-</div>
-
-<style>
-  .file-list {
-    display: grid;
-    grid-auto-flow: column;
-    grid-gap: var(--spacing-m);
-    grid-template-columns: repeat(10, 1fr);
-  }
-
-  img {
-    object-fit: contain;
-  }
-
-  i {
-    font-size: 24px;
-    position: relative;
-    top: 5px;
-  }
-
-  .file {
-    height: 75px;
-    width: 75px;
-    border: 2px dashed var(--grey-7);
-    padding: var(--spacing-m);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-    justify-content: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .extension {
-    position: absolute;
-    top: -5px;
-    font-size: var(--font-size-xs);
-    font-weight: 500;
-  }
-
-  span {
-    font-size: var(--font-size-xs);
-    width: 75px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte b/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte
deleted file mode 100644
index 0aae16f3db..0000000000
--- a/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script>
-  export let columnName
-  export let row
-  export let selectRelationship
-
-  $: items = row?.[columnName] || []
-</script>
-
-<div
-  class="container"
-  class:link={!!items.length}
-  on:click={() => selectRelationship(row, columnName)}>
-  {#each items as item}
-    <div class="item">{item?.primaryDisplay ?? ''}</div>
-  {/each}
-</div>
-
-<style>
-  .container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-xs);
-  }
-
-  .link:hover {
-    color: var(--grey-6);
-    cursor: pointer;
-  }
-  .link:hover .item {
-    color: var(--ink);
-    border-color: var(--ink);
-  }
-
-  .item {
-    font-size: var(--font-size-xs);
-    padding: var(--spacing-xs) var(--spacing-s);
-    border: 1px solid var(--grey-5);
-    color: var(--grey-7);
-    line-height: normal;
-    border-radius: 4px;
-    text-decoration: none;
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte b/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte
index 9a04933a19..4b4ce1622b 100644
--- a/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte
+++ b/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte
@@ -1,10 +1,10 @@
 <script>
   import { roles } from "stores/backend"
 
-  export let roleId
+  export let value
 
-  $: role = $roles.find(role => role._id === roleId)
+  $: role = $roles.find(role => role._id === value)
   $: roleName = role?.name ?? "Unknown role"
 </script>
 
-<div>{roleName}</div>
+{roleName}
diff --git a/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js b/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js
deleted file mode 100644
index 15a7910186..0000000000
--- a/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import AttachmentList from "./AttachmentCell.svelte"
-import EditRow from "../modals/EditRow.svelte"
-import CreateEditUser from "../modals/CreateEditUser.svelte"
-import DeleteRow from "../modals/DeleteRow.svelte"
-import RelationshipDisplay from "./RelationshipCell.svelte"
-import RoleCell from "./RoleCell.svelte"
-
-const renderers = {
-  attachment: attachmentRenderer,
-  link: linkedRowRenderer,
-}
-
-export function getRenderer({ schema, editable, isUsersTable }) {
-  const rendererParams = {
-    options: schema.options,
-    constraints: schema.constraints,
-    editable,
-  }
-  if (renderers[schema.type]) {
-    return renderers[schema.type](rendererParams)
-  } else if (isUsersTable && schema.name === "roleId") {
-    return roleRenderer(rendererParams)
-  } else {
-    return false
-  }
-}
-
-export function deleteRowRenderer(params) {
-  const container = document.createElement("div")
-
-  new DeleteRow({
-    target: container,
-    props: {
-      row: params.data,
-    },
-  })
-
-  return container
-}
-
-export function editRowRenderer(params) {
-  const container = document.createElement("div")
-  container.style.height = "100%"
-  container.style.display = "flex"
-  container.style.alignItems = "center"
-
-  new EditRow({
-    target: container,
-    props: {
-      row: params.data,
-    },
-  })
-
-  return container
-}
-
-export function userRowRenderer(params) {
-  const container = document.createElement("div")
-  container.style.height = "100%"
-  container.style.display = "flex"
-  container.style.alignItems = "center"
-
-  new EditRow({
-    target: container,
-    props: {
-      row: params.data,
-      modalContentComponent: CreateEditUser,
-    },
-  })
-
-  return container
-}
-
-function attachmentRenderer() {
-  return params => {
-    const container = document.createElement("div")
-    container.style.height = "100%"
-    container.style.display = "flex"
-    container.style.alignItems = "center"
-
-    new AttachmentList({
-      target: container,
-      props: {
-        files: params.value || [],
-      },
-    })
-
-    return container
-  }
-}
-
-function linkedRowRenderer() {
-  return params => {
-    let container = document.createElement("div")
-    container.style.display = "grid"
-    container.style.height = "100%"
-    container.style.alignItems = "center"
-
-    new RelationshipDisplay({
-      target: container,
-      props: {
-        row: params.data,
-        columnName: params.column.colId,
-        selectRelationship: params.selectRelationship,
-      },
-    })
-
-    return container
-  }
-}
-
-function roleRenderer() {
-  return params => {
-    let container = document.createElement("div")
-    container.style.display = "grid"
-    container.style.height = "100%"
-    container.style.alignItems = "center"
-
-    new RoleCell({
-      target: container,
-      props: {
-        roleId: params.value,
-      },
-    })
-
-    return container
-  }
-}
diff --git a/packages/builder/src/components/backend/DataTable/formula.js b/packages/builder/src/components/backend/DataTable/formula.js
new file mode 100644
index 0000000000..3d03d577e7
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/formula.js
@@ -0,0 +1,75 @@
+import { FIELDS } from "constants/backend"
+import { tables } from "stores/backend"
+import { get as svelteGet } from "svelte/store"
+
+// currently supported level of relationship depth (server side)
+const MAX_DEPTH = 1
+const TYPES_TO_SKIP = [
+  FIELDS.FORMULA.type,
+  FIELDS.LONGFORM.type,
+  FIELDS.ATTACHMENT.type,
+]
+
+export function getBindings({
+  table,
+  path = null,
+  category = null,
+  depth = 0,
+}) {
+  let bindings = []
+  if (!table) {
+    return bindings
+  }
+  for (let [column, schema] of Object.entries(table.schema)) {
+    const isRelationship = schema.type === FIELDS.LINK.type
+    // skip relationships after a certain depth and types which
+    // can't bind to
+    if (
+      TYPES_TO_SKIP.includes(schema.type) ||
+      (isRelationship && depth >= MAX_DEPTH)
+    ) {
+      continue
+    }
+    category = category == null ? `${table.name} Fields` : category
+    if (isRelationship && depth < MAX_DEPTH) {
+      const relatedTable = svelteGet(tables).list.find(
+        table => table._id === schema.tableId
+      )
+      const relatedBindings = bindings.concat(
+        getBindings({
+          table: relatedTable,
+          path: column,
+          category: `${column} Relationships`,
+          depth: depth + 1,
+        })
+      )
+      // remove the ones that have already been found
+      bindings = bindings.concat(
+        relatedBindings.filter(
+          related => !bindings.find(binding => binding.path === related.path)
+        )
+      )
+    }
+    const field = Object.values(FIELDS).find(
+      field => field.type === schema.type
+    )
+    const label = path == null ? column : `${path}.0.${column}`
+    // only supply a description for relationship paths
+    const description =
+      path == null
+        ? undefined
+        : `Update the "0" with the index of relationships or use array helpers`
+    bindings.push({
+      label: label,
+      type: field.name === FIELDS.LINK.name ? "Array" : field.name,
+      category,
+      path: label,
+      description,
+      // don't include path, it messes things up, relationship path
+      // will be replaced by the main array binding
+      readableBinding: column,
+      runtimeBinding: `[${column}]`,
+    })
+  }
+  return bindings
+}
diff --git a/packages/builder/src/components/backend/DataTable/modals/CalculateModal.svelte b/packages/builder/src/components/backend/DataTable/modals/CalculateModal.svelte
new file mode 100644
index 0000000000..5a72b01db5
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/modals/CalculateModal.svelte
@@ -0,0 +1,70 @@
+<script>
+  import { Select, Label, notifications, ModalContent } from "@budibase/bbui"
+  import { tables, views } from "stores/backend"
+  import analytics from "analytics"
+
+  const CALCULATIONS = [
+    {
+      name: "Statistics",
+      key: "stats",
+    },
+    {
+      name: "Count",
+      key: "count",
+    },
+    {
+      name: "Sum",
+      key: "sum",
+    },
+  ]
+
+  export let view = {}
+  export let onClosed
+
+  $: viewTable = $tables.list.find(({ _id }) => _id === $views.selected.tableId)
+  $: fields =
+    viewTable &&
+    Object.keys(viewTable.schema).filter(
+      field =>
+        view.calculation === "count" ||
+        // don't want to perform calculations based on auto ID
+        (viewTable.schema[field].type === "number" &&
+          !viewTable.schema[field].autocolumn)
+    )
+
+  function saveView() {
+    views.save(view)
+    notifications.success(`View ${view.name} saved.`)
+    analytics.captureEvent("Added View Calculate", { field: view.field })
+  }
+</script>
+
+<ModalContent
+  title="Calculate"
+  confirmText="Save"
+  onConfirm={saveView}
+  disabled={!view.field}
+>
+  <div class="input-group-row">
+    <Label>The</Label>
+    <Select
+      bind:value={view.calculation}
+      options={CALCULATIONS}
+      getOptionLabel={x => x.name}
+      getOptionValue={x => x.key}
+    />
+    {#if view.calculation}
+      <Label>Of</Label>
+      <Select bind:value={view.field} options={fields} />
+    {/if}
+  </div>
+</ModalContent>
+
+<style>
+  .input-group-row {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: var(--spacing-s);
+    align-items: center;
+  }
+</style>
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 639201f89b..88ee57e176 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -3,14 +3,15 @@
     Input,
     Button,
     Label,
-    TextButton,
     Select,
     Toggle,
-    Radio,
+    RadioGroup,
+    DatePicker,
+    ModalContent,
+    Context,
   } from "@budibase/bbui"
   import { cloneDeep } from "lodash/fp"
   import { tables } from "stores/backend"
-
   import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
   import {
     FIELDS,
@@ -18,17 +19,20 @@
     RelationshipTypes,
   } from "constants/backend"
   import { getAutoColumnInformation, buildAutoColumn } from "builderStore/utils"
-  import { notifier } from "builderStore/store/notifications"
+  import { notifications } from "@budibase/bbui"
   import ValuesList from "components/common/ValuesList.svelte"
-  import DatePicker from "components/common/DatePicker.svelte"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { truncate } from "lodash"
+  import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
+  import { getBindings } from "components/backend/DataTable/formula"
+  import { getContext } from "svelte"
 
-  const AUTO_COL = "auto"
+  const AUTO_TYPE = "auto"
+  const FORMULA_TYPE = FIELDS.FORMULA.type
   const LINK_TYPE = FIELDS.LINK.type
   let fieldDefinitions = cloneDeep(FIELDS)
+  const { hide } = getContext(Context.Modal)
 
-  export let onClosed
   export let field = {
     type: "string",
     constraints: fieldDefinitions.STRING.constraints,
@@ -56,23 +60,28 @@
       UNEDITABLE_USER_FIELDS.includes(field.name)) ||
     (originalName && field.type === LINK_TYPE)
   $: invalid =
+    !field.name ||
     (field.type === LINK_TYPE && !field.tableId) ||
-    Object.keys($tables.draft.schema).some(
-      key => key === field.name && key !== originalName
+    Object.keys($tables.draft?.schema ?? {}).some(
+      key => key !== originalName && key === field.name
     )
 
   // used to select what different options can be displayed for column type
   $: canBeSearched =
     field.type !== LINK_TYPE &&
     field.subtype !== AUTO_COLUMN_SUB_TYPES.CREATED_BY &&
-    field.subtype !== AUTO_COLUMN_SUB_TYPES.UPDATED_BY
-  $: canBeDisplay = field.type !== LINK_TYPE && field.type !== AUTO_COL
+    field.subtype !== AUTO_COLUMN_SUB_TYPES.UPDATED_BY &&
+    field.type !== FORMULA_TYPE
+  $: canBeDisplay =
+    field.type !== LINK_TYPE &&
+    field.type !== AUTO_TYPE &&
+    field.type !== FORMULA_TYPE
   $: canBeRequired =
-    field.type !== LINK_TYPE && !uneditable && field.type !== AUTO_COL
+    field.type !== LINK_TYPE && !uneditable && field.type !== AUTO_TYPE
   $: relationshipOptions = getRelationshipOptions(field)
 
   async function saveColumn() {
-    if (field.type === AUTO_COL) {
+    if (field.type === AUTO_TYPE) {
       field = buildAutoColumn($tables.draft.name, field.name, field.subtype)
     }
     tables.saveField({
@@ -81,46 +90,45 @@
       primaryDisplay,
       indexes,
     })
-    onClosed()
   }
 
   function deleteColumn() {
     if (field.name === $tables.selected.primaryDisplay) {
-      notifier.danger("You cannot delete the display column")
+      notifications.error("You cannot delete the display column")
     } else {
       tables.deleteField(field)
-      notifier.success(`Column ${field.name} deleted.`)
-      onClosed()
+      notifications.success(`Column ${field.name} deleted.`)
+      hide()
     }
   }
 
   function handleTypeChange(event) {
-    const definition = fieldDefinitions[event.target.value.toUpperCase()]
-    if (!definition) {
-      return
-    }
     // remove any extra fields that may not be related to this type
     delete field.autocolumn
     delete field.subtype
     delete field.tableId
     delete field.relationshipType
-    // add in defaults and initial definition
-    field.type = definition.type
-    field.constraints = definition.constraints
-    // default relationships many to many
+
+    // Add in defaults and initial definition
+    const definition = fieldDefinitions[event.detail?.toUpperCase()]
+    if (definition?.constraints) {
+      field.constraints = definition.constraints
+    }
+
+    // Default relationships many to many
     if (field.type === LINK_TYPE) {
       field.relationshipType = RelationshipTypes.MANY_TO_MANY
     }
   }
 
   function onChangeRequired(e) {
-    const req = e.target.checked
+    const req = e.detail
     field.constraints.presence = req ? { allowEmpty: false } : false
     required = req
   }
 
   function onChangePrimaryDisplay(e) {
-    const isPrimary = e.target.checked
+    const isPrimary = e.detail
     // primary display is always required
     if (isPrimary) {
       field.constraints.presence = { allowEmpty: false }
@@ -128,11 +136,11 @@
   }
 
   function onChangePrimaryIndex(e) {
-    indexes = e.target.checked ? [field.name] : []
+    indexes = e.detail ? [field.name] : []
   }
 
   function onChangeSecondaryIndex(e) {
-    if (e.target.checked) {
+    if (e.detail) {
       indexes[1] = field.name
     } else {
       indexes = indexes.slice(0, 1)
@@ -179,176 +187,145 @@
   }
 </script>
 
-<div class="actions" class:hidden={deletion}>
-  <Input label="Name" thin bind:value={field.name} disabled={uneditable} />
+<ModalContent
+  title={originalName ? "Edit Column" : "Create Column"}
+  confirmText="Save Column"
+  onConfirm={saveColumn}
+  disabled={invalid}
+>
+  <Input label="Name" bind:value={field.name} disabled={uneditable} />
 
   <Select
     disabled={originalName}
-    secondary
-    thin
     label="Type"
+    bind:value={field.type}
     on:change={handleTypeChange}
-    bind:value={field.type}>
-    {#each Object.values(fieldDefinitions) as field}
-      <option value={field.type}>{field.name}</option>
-    {/each}
-    <option value={AUTO_COL}>Auto Column</option>
-  </Select>
+    options={[
+      ...Object.values(fieldDefinitions),
+      { name: "Auto Column", type: AUTO_TYPE },
+    ]}
+    getOptionLabel={field => field.name}
+    getOptionValue={field => field.type}
+  />
 
-  {#if canBeRequired}
-    <Toggle
-      checked={required}
-      on:change={onChangeRequired}
-      disabled={primaryDisplay}
-      thin
-      text="Required" />
+  {#if canBeRequired || canBeDisplay}
+    <div>
+      {#if canBeRequired}
+        <Toggle
+          value={required}
+          on:change={onChangeRequired}
+          disabled={primaryDisplay}
+          thin
+          text="Required"
+        />
+      {/if}
+      {#if canBeDisplay}
+        <Toggle
+          bind:value={primaryDisplay}
+          on:change={onChangePrimaryDisplay}
+          thin
+          text="Use as table display column"
+        />
+      {/if}
+    </div>
   {/if}
 
-  {#if canBeDisplay}
-    <Toggle
-      bind:checked={primaryDisplay}
-      on:change={onChangePrimaryDisplay}
-      thin
-      text="Use as table display column" />
-
-    <Label grey small>Search Indexes</Label>
-  {/if}
   {#if canBeSearched}
-    <Toggle
-      checked={indexes[0] === field.name}
-      disabled={indexes[1] === field.name}
-      on:change={onChangePrimaryIndex}
-      thin
-      text="Primary" />
-    <Toggle
-      checked={indexes[1] === field.name}
-      disabled={!indexes[0] || indexes[0] === field.name}
-      on:change={onChangeSecondaryIndex}
-      thin
-      text="Secondary" />
+    <div>
+      <Label grey small>Search Indexes</Label>
+      <Toggle
+        value={indexes[0] === field.name}
+        disabled={indexes[1] === field.name}
+        on:change={onChangePrimaryIndex}
+        text="Primary"
+      />
+      <Toggle
+        value={indexes[1] === field.name}
+        disabled={!indexes[0] || indexes[0] === field.name}
+        on:change={onChangeSecondaryIndex}
+        text="Secondary"
+      />
+    </div>
   {/if}
 
-  {#if field.type === 'string'}
+  {#if field.type === "string"}
     <Input
-      thin
       type="number"
       label="Max Length"
-      bind:value={field.constraints.length.maximum} />
-  {:else if field.type === 'options'}
+      bind:value={field.constraints.length.maximum}
+    />
+  {:else if field.type === "options"}
     <ValuesList
       label="Options (one per line)"
-      bind:values={field.constraints.inclusion} />
-  {:else if field.type === 'datetime'}
+      bind:values={field.constraints.inclusion}
+    />
+  {:else if field.type === "datetime"}
     <DatePicker
       label="Earliest"
-      bind:value={field.constraints.datetime.earliest} />
+      bind:value={field.constraints.datetime.earliest}
+    />
     <DatePicker label="Latest" bind:value={field.constraints.datetime.latest} />
-  {:else if field.type === 'number'}
+  {:else if field.type === "number"}
     <Input
-      thin
       type="number"
       label="Min Value"
-      bind:value={field.constraints.numericality.greaterThanOrEqualTo} />
+      bind:value={field.constraints.numericality.greaterThanOrEqualTo}
+    />
     <Input
-      thin
       type="number"
       label="Max Value"
-      bind:value={field.constraints.numericality.lessThanOrEqualTo} />
-  {:else if field.type === 'link'}
-    <Select label="Table" thin secondary bind:value={field.tableId}>
-      <option value="">Choose an option</option>
-      {#each tableOptions as table}
-        <option value={table._id}>{table.name}</option>
-      {/each}
-    </Select>
+      bind:value={field.constraints.numericality.lessThanOrEqualTo}
+    />
+  {:else if field.type === "link"}
+    <Select
+      label="Table"
+      bind:value={field.tableId}
+      options={tableOptions}
+      getOptionLabel={table => table.name}
+      getOptionValue={table => table._id}
+    />
     {#if relationshipOptions && relationshipOptions.length > 0}
-      <div>
-        <Label grey extraSmall>Define the relationship</Label>
-        <div class="radio-buttons">
-          {#each relationshipOptions as { value, name, alt }}
-            <Radio
-              disabled={originalName}
-              name="Relationship type"
-              {value}
-              bind:group={field.relationshipType}>
-              <div class="radio-button-labels" title={alt}>
-                <label for={value}>{name.split('→')[0]}</label>
-                <label class="rel-type-center" for={value}>→</label>
-                <label for={value}>{name.split('→')[1]}</label>
-              </div>
-            </Radio>
-          {/each}
-        </div>
-      </div>
+      <RadioGroup
+        disabled={originalName}
+        label="Define the relationship"
+        bind:value={field.relationshipType}
+        options={relationshipOptions}
+        getOptionLabel={option => option.name}
+        getOptionValue={option => option.value}
+      />
     {/if}
-    <Input
-      label={`Column Name in Other Table`}
-      thin
-      bind:value={field.fieldName} />
-  {:else if field.type === AUTO_COL}
-    <Select label="Auto Column Type" thin secondary bind:value={field.subtype}>
-      <option value="">Choose a subtype</option>
-      {#each Object.entries(getAutoColumnInformation()) as [subtype, info]}
-        <option value={subtype}>{info.name}</option>
-      {/each}
-    </Select>
+    <Input label={`Column name in other table`} bind:value={field.fieldName} />
+  {:else if field.type === FORMULA_TYPE}
+    <ModalBindableInput
+      title="Handlebars Formula"
+      label="Formula"
+      value={field.formula}
+      on:change={e => (field.formula = e.detail)}
+      bindings={getBindings({ table })}
+      serverSide="true"
+    />
+  {:else if field.type === AUTO_TYPE}
+    <Select
+      label="Auto Column Type"
+      value={field.subtype}
+      on:change={e => (field.subtype = e.detail)}
+      options={Object.entries(getAutoColumnInformation())}
+      getOptionLabel={option => option[1].name}
+      getOptionValue={option => option[0]}
+    />
   {/if}
-  <footer class="create-column-options">
+
+  <div slot="footer">
     {#if !uneditable && originalName != null}
-      <TextButton text on:click={confirmDelete}>Delete Column</TextButton>
+      <Button warning text on:click={confirmDelete}>Delete</Button>
     {/if}
-    <Button secondary on:click={onClosed}>Cancel</Button>
-    <Button primary on:click={saveColumn} bind:disabled={invalid}>
-      Save Column
-    </Button>
-  </footer>
-</div>
+  </div>
+</ModalContent>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   body={`Are you sure you wish to delete this column? Your data will be deleted and this action cannot be undone.`}
   okText="Delete Column"
   onOk={deleteColumn}
   onCancel={hideDeleteDialog}
-  title="Confirm Deletion" />
-
-<style>
-  .radio-buttons {
-    gap: var(--spacing-m);
-    font-size: var(--font-size-xs);
-  }
-
-  .radio-buttons :global(> *) {
-    margin-top: var(--spacing-s);
-    width: 100%;
-  }
-
-  .actions {
-    display: grid;
-    grid-gap: var(--spacing-xl);
-    min-width: 400px;
-  }
-
-  footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-m);
-  }
-
-  :global(.create-column-options button:first-child) {
-    margin-right: auto;
-  }
-
-  .rel-type-center {
-    font-weight: 500;
-    color: var(--grey-6);
-    margin-right: 4px;
-    margin-left: 4px;
-    padding: 1px 3px 1px 3px;
-    background: var(--grey-3);
-    border-radius: 2px;
-  }
-
-  .radio-button-labels {
-    margin-top: 2px;
-  }
-</style>
+  title="Confirm Deletion"
+/>
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
index b50c12bc1f..06ab8fd4a9 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
@@ -1,10 +1,13 @@
 <script>
   import { tables, rows } from "stores/backend"
-  import { notifier } from "builderStore/store/notifications"
+  import { notifications } from "@budibase/bbui"
   import RowFieldControl from "../RowFieldControl.svelte"
   import * as api from "../api"
   import { ModalContent } from "@budibase/bbui"
   import ErrorsBox from "components/common/ErrorsBox.svelte"
+  import { FIELDS } from "constants/backend"
+
+  const FORMULA_TYPE = FIELDS.FORMULA.type
 
   export let row = {}
 
@@ -33,18 +36,19 @@
       return false
     }
 
-    notifier.success("Row saved successfully.")
+    notifications.success("Row saved successfully.")
     rows.save(rowResponse)
   }
 </script>
 
 <ModalContent
-  title={creating ? 'Create Row' : 'Edit Row'}
-  confirmText={creating ? 'Create Row' : 'Save Row'}
-  onConfirm={saveRow}>
+  title={creating ? "Create Row" : "Edit Row"}
+  confirmText={creating ? "Create Row" : "Save Row"}
+  onConfirm={saveRow}
+>
   <ErrorsBox {errors} />
   {#each tableSchema as [key, meta]}
-    {#if !meta.autocolumn}
+    {#if !meta.autocolumn && meta.type !== FORMULA_TYPE}
       <div>
         <RowFieldControl {meta} bind:value={row[key]} />
       </div>
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
index 56935a9c7b..11210db49f 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
@@ -1,7 +1,7 @@
 <script>
   import { tables, rows } from "stores/backend"
   import { roles } from "stores/backend"
-  import { notifier } from "builderStore/store/notifications"
+  import { notifications } from "@budibase/bbui"
   import RowFieldControl from "../RowFieldControl.svelte"
   import * as backendApi from "../api"
   import { ModalContent, Select } from "@budibase/bbui"
@@ -17,6 +17,7 @@
     : $tables.selected
   $: tableSchema = getUserSchema(table)
   $: customSchemaKeys = getCustomSchemaKeys(tableSchema)
+  $: if (!row.status) row.status = "active"
 
   const getUserSchema = table => {
     let schema = table?.schema ?? {}
@@ -66,40 +67,46 @@
       return false
     }
 
-    notifier.success("User saved successfully.")
+    notifications.success("User saved successfully.")
     rows.save(rowResponse)
   }
 </script>
 
 <ModalContent
-  title={creating ? 'Create User' : 'Edit User'}
-  confirmText={creating ? 'Create User' : 'Save User'}
-  onConfirm={saveRow}>
+  title={creating ? "Create User" : "Edit User"}
+  confirmText={creating ? "Create User" : "Save User"}
+  onConfirm={saveRow}
+>
   <ErrorsBox {errors} />
   <RowFieldControl
-    meta={{ ...tableSchema.email, name: 'Email' }}
+    meta={{ ...tableSchema.email, name: "Email" }}
     bind:value={row.email}
-    readonly={!creating} />
+    readonly={!creating}
+  />
   <RowFieldControl
-    meta={{ name: 'password', type: 'password' }}
-    bind:value={row.password} />
+    meta={{ name: "password", type: "password" }}
+    bind:value={row.password}
+  />
   <!-- Defer rendering this select until roles load, otherwise the initial
        selection is always undefined -->
   <Select
-    thin
-    secondary
     label="Role"
     data-cy="roleId-select"
-    bind:value={row.roleId}>
-    <option value="">Choose an option</option>
-    {#each $roles as role}
-      <option value={role._id}>{role.name}</option>
-    {/each}
-  </Select>
-  <RowFieldControl
-    meta={{ name: 'status', type: 'options', constraints: { inclusion: ['active', 'inactive'] } }}
+    bind:value={row.roleId}
+    options={$roles}
+    getOptionLabel={role => role.name}
+    getOptionValue={role => role._id}
+  />
+  <Select
+    label="Status"
     bind:value={row.status}
-    defaultValue={'active'} />
+    options={[
+      { label: "Active", value: "active" },
+      { label: "Inactive", value: "inactive" },
+    ]}
+    getOptionLabel={status => status.label}
+    getOptionValue={status => status.value}
+  />
   {#each customSchemaKeys as [key, meta]}
     {#if !meta.autocolumn}
       <RowFieldControl {meta} bind:value={row[key]} {creating} />
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateViewModal.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateViewModal.svelte
new file mode 100644
index 0000000000..c7f883225c
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateViewModal.svelte
@@ -0,0 +1,37 @@
+<script>
+  import { Input, notifications, ModalContent } from "@budibase/bbui"
+  import { goto } from "@roxi/routify"
+  import { views as viewsStore } from "stores/backend"
+  import { tables } from "stores/backend"
+  import analytics from "analytics"
+
+  export let onClosed
+
+  let name
+  let field
+
+  $: views = $tables.list.flatMap(table => Object.keys(table.views || {}))
+
+  function saveView() {
+    if (views.includes(name)) {
+      notifications.error(`View exists with name ${name}.`)
+      return
+    }
+    viewsStore.save({
+      name,
+      tableId: $tables.selected._id,
+      field,
+    })
+    notifications.success(`View ${name} created`)
+    analytics.captureEvent("View Created", { name })
+    $goto(`../../view/${name}`)
+  }
+</script>
+
+<ModalContent
+  title="Create View"
+  confirmText="Create View"
+  onConfirm={saveView}
+>
+  <Input label="View Name" thin bind:value={name} />
+</ModalContent>
diff --git a/packages/builder/src/components/backend/DataTable/modals/DeleteRow.svelte b/packages/builder/src/components/backend/DataTable/modals/DeleteRow.svelte
deleted file mode 100644
index 6620b57f61..0000000000
--- a/packages/builder/src/components/backend/DataTable/modals/DeleteRow.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-  import { rows } from "stores/backend"
-  import * as api from "../api"
-  import { notifier } from "builderStore/store/notifications"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-
-  export let row
-
-  let confirmDeleteDialog
-
-  function showDelete() {
-    confirmDeleteDialog.show()
-  }
-
-  async function deleteRow() {
-    await api.deleteRow(row)
-    notifier.success("Row deleted")
-    rows.delete(row)
-  }
-</script>
-
-<div on:click={showDelete}><i class="ri-delete-row" /></div>
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  body={`Are you sure you wish to delete this row? Your data will be deleted and this action cannot be undone.`}
-  okText="Delete Row"
-  onOk={deleteRow}
-  title="Confirm Deletion" />
-
-<style>
-  div {
-    display: flex;
-    justify-content: center;
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte b/packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte
index 0984c94e0c..f58b9f197f 100644
--- a/packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte
@@ -2,7 +2,7 @@
   import { ModalContent, Select, Input, Button } from "@budibase/bbui"
   import { onMount } from "svelte"
   import api from "builderStore/api"
-  import { notifier } from "builderStore/store/notifications"
+  import { notifications } from "@budibase/bbui"
   import ErrorsBox from "components/common/ErrorsBox.svelte"
   import { roles } from "stores/backend"
 
@@ -21,7 +21,7 @@
 
   // Changes the selected role
   const changeRole = event => {
-    const id = event?.target?.value
+    const id = event?.detail
     const role = $roles.find(role => role._id === id)
     if (role) {
       selectedRole = {
@@ -61,9 +61,9 @@
     // Save/create the role
     const response = await roles.save(selectedRole)
     if (response.status === 200) {
-      notifier.success("Role saved successfully.")
+      notifications.success("Role saved successfully.")
     } else {
-      notifier.danger("Error saving role.")
+      notifications.error("Error saving role.")
       return false
     }
   }
@@ -73,9 +73,9 @@
     const response = await roles.delete(selectedRole)
     if (response.status === 200) {
       changeRole()
-      notifier.success("Role deleted successfully.")
+      notifications.success("Role deleted successfully.")
     } else {
-      notifier.danger("Error deleting role.")
+      notifications.error("Error deleting role.")
     }
   }
 
@@ -84,8 +84,9 @@
 
 <ModalContent
   title="Edit Roles"
-  confirmText={isCreating ? 'Create' : 'Save'}
-  onConfirm={saveRole}>
+  confirmText={isCreating ? "Create" : "Save"}
+  onConfirm={saveRole}
+>
   {#if errors.length}
     <ErrorsBox {errors} />
   {/if}
@@ -94,42 +95,38 @@
     secondary
     label="Role"
     value={selectedRoleId}
-    on:change={changeRole}>
-    <option value="">Create new role</option>
-    {#each $roles as role}
-      <option value={role._id}>{role.name}</option>
-    {/each}
-  </Select>
+    on:change={changeRole}
+    options={$roles}
+    placeholder="Create new role"
+    getOptionValue={role => role._id}
+    getOptionLabel={role => role.name}
+  />
   {#if selectedRole}
     <Input
       label="Name"
       bind:value={selectedRole.name}
-      thin
-      disabled={builtInRoles.includes(selectedRole.name)} />
+      disabled={builtInRoles.includes(selectedRole.name)}
+    />
     <Select
-      thin
-      secondary
       label="Inherits Role"
-      bind:value={selectedRole.inherits}>
-      <option value="">None</option>
-      {#each otherRoles as role}
-        <option value={role._id}>{role.name}</option>
-      {/each}
-    </Select>
+      bind:value={selectedRole.inherits}
+      options={otherRoles}
+      getOptionValue={role => role._id}
+      getOptionLabel={role => role.name}
+      placeholder="None"
+    />
     <Select
-      thin
-      secondary
       label="Base Permissions"
-      bind:value={selectedRole.permissionId}>
-      <option value="">Choose permissions</option>
-      {#each basePermissions as basePerm}
-        <option value={basePerm._id}>{basePerm.name}</option>
-      {/each}
-    </Select>
+      bind:value={selectedRole.permissionId}
+      options={basePermissions}
+      getOptionValue={x => x._id}
+      getOptionLabel={x => x.name}
+      placeholder="Choose permissions"
+    />
   {/if}
   <div slot="footer">
     {#if !isCreating}
-      <Button red on:click={deleteRole}>Delete</Button>
+      <Button warning on:click={deleteRole}>Delete</Button>
     {/if}
   </div>
 </ModalContent>
diff --git a/packages/builder/src/components/backend/DataTable/modals/ExportModal.svelte b/packages/builder/src/components/backend/DataTable/modals/ExportModal.svelte
new file mode 100644
index 0000000000..17c0b0e0f5
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/modals/ExportModal.svelte
@@ -0,0 +1,38 @@
+<script>
+  import { Select, ModalContent } from "@budibase/bbui"
+  import download from "downloadjs"
+
+  const FORMATS = [
+    {
+      name: "CSV",
+      key: "csv",
+    },
+    {
+      name: "JSON",
+      key: "json",
+    },
+  ]
+
+  export let view
+
+  let exportFormat = FORMATS[0].key
+
+  async function exportView() {
+    download(
+      `/api/views/export?view=${encodeURIComponent(
+        view.name
+      )}&format=${exportFormat}`
+    )
+  }
+</script>
+
+<ModalContent title="Export Data" confirmText="Export" onConfirm={exportView}>
+  <Select
+    label="Format"
+    bind:value={exportFormat}
+    options={FORMATS}
+    placeholder={null}
+    getOptionLabel={x => x.name}
+    getOptionValue={x => x.key}
+  />
+</ModalContent>
diff --git a/packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte b/packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte
similarity index 51%
rename from packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte
rename to packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte
index d32a9866b6..bec07d1bc1 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte
@@ -1,7 +1,16 @@
 <script>
-  import { Button, Input, Select, DatePicker } from "@budibase/bbui"
+  import {
+    Button,
+    Input,
+    Body,
+    Select,
+    DatePicker,
+    ModalContent,
+    Label,
+    notifications,
+    Icon,
+  } from "@budibase/bbui"
   import { tables, views } from "stores/backend"
-  import { notifier } from "builderStore/store/notifications"
   import analytics from "analytics"
 
   const CONDITIONS = [
@@ -54,8 +63,7 @@
 
   function saveView() {
     views.save(view)
-    notifier.success(`View ${view.name} saved.`)
-    onClosed()
+    notifications.success(`View ${view.name} saved.`)
     analytics.captureEvent("Added View Filter", {
       filters: JSON.stringify(view.filters),
     })
@@ -67,7 +75,7 @@
   }
 
   function addFilter() {
-    view.filters.push({})
+    view.filters.push({ conjunction: "AND" })
     view.filters = view.filters
   }
 
@@ -98,123 +106,82 @@
     // reset if type changed
     if (
       filter.key &&
-      ev.target.value &&
-      viewTable.schema[filter.key].type !==
-        viewTable.schema[ev.target.value].type
+      ev.detail &&
+      viewTable.schema[filter.key].type !== viewTable.schema[ev.detail].type
     ) {
       filter.value = ""
     }
   }
+
+  const getOptionLabel = x => x.name
+  const getOptionValue = x => x.key
 </script>
 
-<div class="actions">
-  <h5>Filter</h5>
+<ModalContent title="Filter" confirmText="Save" onConfirm={saveView} size="L">
   {#if view.filters.length}
     <div class="input-group-row">
       {#each view.filters as filter, idx}
         {#if idx === 0}
-          <p>Where</p>
+          <Label>Where</Label>
         {:else}
-          <Select secondary thin bind:value={filter.conjunction}>
-            <option value="">Choose an option</option>
-            {#each CONJUNCTIONS as conjunction}
-              <option value={conjunction.key}>{conjunction.name}</option>
-            {/each}
-          </Select>
+          <Select
+            bind:value={filter.conjunction}
+            options={CONJUNCTIONS}
+            placeholder={null}
+            {getOptionLabel}
+            {getOptionValue}
+          />
         {/if}
         <Select
-          secondary
-          thin
           bind:value={filter.key}
-          on:change={fieldChanged(filter)}>
-          <option value="">Choose an option</option>
-          {#each fields as field}
-            <option value={field}>{field}</option>
-          {/each}
-        </Select>
-        <Select secondary thin bind:value={filter.condition}>
-          <option value="">Choose an option</option>
-          {#each CONDITIONS as condition}
-            <option value={condition.key}>{condition.name}</option>
-          {/each}
-        </Select>
+          on:change={fieldChanged(filter)}
+          options={fields}
+        />
+        <Select
+          bind:value={filter.condition}
+          options={CONDITIONS}
+          {getOptionLabel}
+          {getOptionValue}
+        />
         {#if filter.key && isMultipleChoice(filter.key)}
-          <Select secondary thin bind:value={filter.value}>
-            <option value="">Choose an option</option>
-            {#each fieldOptions(filter.key) as option}
-              <option value={option}>{option.toString()}</option>
-            {/each}
-          </Select>
+          <Select
+            bind:value={filter.value}
+            options={fieldOptions(filter.key)}
+            getOptionLabel={x => x.toString()}
+          />
         {:else if filter.key && isDate(filter.key)}
           <DatePicker
             bind:value={filter.value}
-            placeholder={filter.key || fields[0]} />
+            placeholder={filter.key || fields[0]}
+          />
         {:else if filter.key && isNumber(filter.key)}
           <Input
-            thin
             bind:value={filter.value}
             placeholder={filter.key || fields[0]}
-            type="number" />
+            type="number"
+          />
         {:else}
           <Input
-            thin
             placeholder={filter.key || fields[0]}
-            bind:value={filter.value} />
+            bind:value={filter.value}
+          />
         {/if}
-        <i class="ri-close-circle-fill" on:click={() => removeFilter(idx)} />
+        <Icon hoverable name="Close" on:click={() => removeFilter(idx)} />
       {/each}
     </div>
+  {:else}
+    <Body size="S">Add a filter to get started.</Body>
   {/if}
-  <div class="footer">
-    <div class="add-filter">
-      <Button text on:click={addFilter}>Add Filter</Button>
-    </div>
-    <div class="buttons">
-      <Button secondary on:click={onClosed}>Cancel</Button>
-      <Button primary on:click={saveView}>Save</Button>
-    </div>
+  <div slot="footer">
+    <Button secondary on:click={addFilter}>Add Filter</Button>
   </div>
-</div>
+</ModalContent>
 
 <style>
-  .actions {
-    display: grid;
-    grid-gap: var(--spacing-xl);
-  }
-
-  h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  .footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .buttons {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-m);
-  }
-
-  .ri-close-circle-fill {
-    cursor: pointer;
-  }
-
   .input-group-row {
     display: grid;
-    grid-template-columns: minmax(50px, auto) 1fr 1fr 1fr 15px;
+    grid-template-columns: minmax(70px, auto) 1fr 1fr 1fr 15px;
     gap: var(--spacing-s);
     align-items: center;
   }
-
-  p {
-    margin: 0;
-    font-size: var(--font-size-xs);
-  }
-
-  .add-filter {
-    margin-right: 16px;
-  }
 </style>
diff --git a/packages/builder/src/components/backend/DataTable/modals/GroupByModal.svelte b/packages/builder/src/components/backend/DataTable/modals/GroupByModal.svelte
new file mode 100644
index 0000000000..5eab472c01
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/modals/GroupByModal.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { Button, Select, ModalContent, notifications } from "@budibase/bbui"
+  import { tables, views } from "stores/backend"
+  import { FIELDS } from "constants/backend"
+
+  export let view = {}
+  export let onClosed
+
+  $: viewTable = $tables.list.find(({ _id }) => _id === $views.selected.tableId)
+  $: fields =
+    viewTable &&
+    Object.entries(viewTable.schema)
+      .filter(entry => entry[1].type !== FIELDS.LINK.type)
+      .map(([key]) => key)
+
+  function saveView() {
+    views.save(view)
+    notifications.success(`View ${view.name} saved.`)
+  }
+</script>
+
+<ModalContent title="Group By" confirmText="Save" onConfirm={saveView}>
+  <Select bind:value={view.groupBy} options={fields} />
+</ModalContent>
diff --git a/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte b/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
new file mode 100644
index 0000000000..14cb572ff1
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
@@ -0,0 +1,56 @@
+<script>
+  import { roles, permissions as permissionsStore } from "stores/backend"
+  import {
+    Label,
+    Input,
+    Select,
+    notifications,
+    Body,
+    ModalContent,
+  } from "@budibase/bbui"
+  import { capitalise } from "../../../../helpers"
+
+  export let resourceId
+  export let permissions
+  export let onClosed
+
+  async function changePermission(level, role) {
+    await permissionsStore.save({
+      level,
+      role,
+      resource: resourceId,
+    })
+
+    // Show updated permissions in UI: REMOVE
+    permissions = await permissionsStore.forResource(resourceId)
+    notifications.success("Updated permissions.")
+    // TODO: update permissions
+    // permissions[]
+  }
+</script>
+
+<ModalContent title="Manage Access" showCancelButton={false} confirmText="Done">
+  <Body size="S">Specify the minimum access level role for this data.</Body>
+  <div class="row">
+    <Label extraSmall grey>Level</Label>
+    <Label extraSmall grey>Role</Label>
+    {#each Object.keys(permissions) as level}
+      <Input value={capitalise(level)} disabled />
+      <Select
+        value={permissions[level]}
+        on:change={e => changePermission(level, e.detail)}
+        options={$roles}
+        getOptionLabel={x => x.name}
+        getOptionValue={x => x._id}
+      />
+    {/each}
+  </div>
+</ModalContent>
+
+<style>
+  .row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: var(--spacing-s);
+  }
+</style>
diff --git a/packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte
deleted file mode 100644
index cbfe4a29da..0000000000
--- a/packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte
+++ /dev/null
@@ -1,99 +0,0 @@
-<script>
-  import { Button, Select } from "@budibase/bbui"
-
-  import { tables, views } from "stores/backend"
-  import { notifier } from "builderStore/store/notifications"
-  import analytics from "analytics"
-
-  const CALCULATIONS = [
-    {
-      name: "Statistics",
-      key: "stats",
-    },
-    {
-      name: "Count",
-      key: "count",
-    },
-    {
-      name: "Sum",
-      key: "sum",
-    },
-  ]
-
-  export let view = {}
-  export let onClosed
-
-  $: viewTable = $tables.list.find(({ _id }) => _id === $views.selected.tableId)
-  $: fields =
-    viewTable &&
-    Object.keys(viewTable.schema).filter(
-      field =>
-        view.calculation === "count" ||
-        // don't want to perform calculations based on auto ID
-        (viewTable.schema[field].type === "number" &&
-          !viewTable.schema[field].autocolumn)
-    )
-
-  function saveView() {
-    views.save(view)
-    notifier.success(`View ${view.name} saved.`)
-    onClosed()
-    analytics.captureEvent("Added View Calculate", { field: view.field })
-  }
-</script>
-
-<div class="actions">
-  <h5>Calculate</h5>
-  <div class="input-group-row">
-    <p>The</p>
-    <Select secondary thin bind:value={view.calculation}>
-      <option value={''}>Choose an option</option>
-      {#each CALCULATIONS as calculation}
-        <option value={calculation.key}>{calculation.name}</option>
-      {/each}
-    </Select>
-    {#if view.calculation}
-      <p>of</p>
-      <Select secondary thin bind:value={view.field}>
-        <option value={''}>You must choose an option</option>
-        {#each fields as field}
-          <option value={field}>{field}</option>
-        {/each}
-      </Select>
-    {/if}
-  </div>
-  <div class="footer">
-    <Button secondary on:click={onClosed}>Cancel</Button>
-    <Button primary on:click={saveView} disabled={!view.field}>Save</Button>
-  </div>
-</div>
-
-<style>
-  .actions {
-    display: grid;
-    grid-gap: var(--spacing-xl);
-  }
-
-  h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  .footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-m);
-  }
-
-  .input-group-row {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: var(--spacing-s);
-    align-items: center;
-  }
-
-  p {
-    margin: 0;
-    font-size: var(--font-size-xs);
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte
deleted file mode 100644
index 93ca7bb211..0000000000
--- a/packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script>
-  import { Button, Input } from "@budibase/bbui"
-  import { goto } from "@roxi/routify"
-  import { views as viewsStore } from "stores/backend"
-  import { tables } from "stores/backend"
-  import { notifier } from "builderStore/store/notifications"
-  import analytics from "analytics"
-
-  export let onClosed
-
-  let name
-  let field
-
-  $: views = $tables.list.flatMap(table => Object.keys(table.views || {}))
-
-  function saveView() {
-    if (views.includes(name)) {
-      notifier.danger(`View exists with name ${name}.`)
-      return
-    }
-    viewsStore.save({
-      name,
-      tableId: $tables.selected._id,
-      field,
-    })
-    notifier.success(`View ${name} created`)
-    onClosed()
-    analytics.captureEvent("View Created", { name })
-    $goto(`../../view/${name}`)
-  }
-</script>
-
-<div class="actions">
-  <h5>Create View</h5>
-  <Input label="View Name" thin bind:value={name} />
-  <div class="footer">
-    <Button secondary on:click={onClosed}>Cancel</Button>
-    <Button primary on:click={saveView}>Save View</Button>
-  </div>
-</div>
-
-<style>
-  h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  .actions {
-    display: grid;
-    grid-gap: var(--spacing-xl);
-  }
-
-  .footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-m);
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DataTable/popovers/ExportPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/ExportPopover.svelte
deleted file mode 100644
index 2b1c531e39..0000000000
--- a/packages/builder/src/components/backend/DataTable/popovers/ExportPopover.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script>
-  import { Button, Select } from "@budibase/bbui"
-  import download from "downloadjs"
-
-  const FORMATS = [
-    {
-      name: "CSV",
-      key: "csv",
-    },
-    {
-      name: "JSON",
-      key: "json",
-    },
-  ]
-
-  export let view
-  export let onClosed
-
-  let exportFormat = FORMATS[0].key
-
-  async function exportView() {
-    download(
-      `/api/views/export?view=${encodeURIComponent(
-        view.name
-      )}&format=${exportFormat}`
-    )
-    onClosed()
-  }
-</script>
-
-<div class="popover">
-  <h5>Export Data</h5>
-  <Select label="Format" secondary thin bind:value={exportFormat}>
-    {#each FORMATS as format}
-      <option value={format.key}>{format.name}</option>
-    {/each}
-  </Select>
-  <div class="footer">
-    <Button secondary on:click={onClosed}>Cancel</Button>
-    <Button primary on:click={exportView}>Export</Button>
-  </div>
-</div>
-
-<style>
-  .popover {
-    display: grid;
-    grid-gap: var(--spacing-xl);
-  }
-
-  h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  .footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-m);
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte
deleted file mode 100644
index 7391e77681..0000000000
--- a/packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script>
-  import { Button, Select } from "@budibase/bbui"
-  import { tables, views } from "stores/backend"
-  import { notifier } from "builderStore/store/notifications"
-  import { FIELDS } from "constants/backend"
-
-  export let view = {}
-  export let onClosed
-
-  $: viewTable = $tables.list.find(({ _id }) => _id === $views.selected.tableId)
-  $: fields =
-    viewTable &&
-    Object.entries(viewTable.schema)
-      .filter(entry => entry[1].type !== FIELDS.LINK.type)
-      .map(([key]) => key)
-
-  function saveView() {
-    views.save(view)
-    notifier.success(`View ${view.name} saved.`)
-    onClosed()
-  }
-</script>
-
-<div class="actions">
-  <h5>Group</h5>
-  <div class="input-group-row">
-    <p>By</p>
-    <Select secondary thin bind:value={view.groupBy}>
-      <option value="">Choose an option</option>
-      {#each fields as field}
-        <option value={field}>{field}</option>
-      {/each}
-    </Select>
-  </div>
-  <div class="footer">
-    <Button secondary on:click={onClosed}>Cancel</Button>
-    <Button primary on:click={saveView}>Save</Button>
-  </div>
-</div>
-
-<style>
-  .actions {
-    display: grid;
-    grid-gap: var(--spacing-xl);
-  }
-
-  h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  .footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-m);
-  }
-
-  .input-group-row {
-    display: grid;
-    grid-template-columns: 20px 1fr;
-    gap: var(--spacing-s);
-    align-items: center;
-  }
-
-  p {
-    margin: 0;
-    font-size: var(--font-size-xs);
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DataTable/popovers/ManageAccessPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/ManageAccessPopover.svelte
deleted file mode 100644
index a3fc4fc355..0000000000
--- a/packages/builder/src/components/backend/DataTable/popovers/ManageAccessPopover.svelte
+++ /dev/null
@@ -1,85 +0,0 @@
-<script>
-  import { roles, permissions as permissionsStore } from "stores/backend"
-  import { notifier } from "builderStore/store/notifications"
-  import { Button, Label, Input, Select, Spacer } from "@budibase/bbui"
-
-  export let resourceId
-  export let permissions
-  export let onClosed
-
-  async function changePermission(level, role) {
-    await permissionsStore.save({
-      level,
-      role,
-      resource: resourceId,
-    })
-
-    // Show updated permissions in UI: REMOVE
-    permissions = await permissionsStore.forResource(resourceId)
-    notifier.success("Updated permissions.")
-    // TODO: update permissions
-    // permissions[]
-  }
-</script>
-
-<div class="popover">
-  <h5>Who Can Access This Data?</h5>
-  <div class="note">
-    <Label extraSmall grey>
-      Specify the minimum access level role for this data.
-    </Label>
-  </div>
-  <Spacer large />
-  <div class="row">
-    <Label extraSmall grey>Level</Label>
-    <Label extraSmall grey>Role</Label>
-    {#each Object.keys(permissions) as level}
-      <Input secondary thin value={level} disabled={true} />
-      <Select
-        secondary
-        thin
-        value={permissions[level]}
-        on:change={e => changePermission(level, e.target.value)}>
-        {#each $roles as role}
-          <option value={role._id}>{role.name}</option>
-        {/each}
-      </Select>
-    {/each}
-  </div>
-
-  <Spacer large />
-
-  <div class="footer">
-    <Button secondary on:click={onClosed}>Cancel</Button>
-  </div>
-</div>
-
-<style>
-  .popover {
-    display: grid;
-    width: 400px;
-  }
-
-  h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  .footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-m);
-    margin-top: var(--spacing-l);
-  }
-
-  .row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: var(--spacing-m);
-  }
-
-  .note {
-    margin-top: 10px;
-    margin-bottom: 0;
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
index e4984af4f6..87daad4c3a 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
@@ -33,22 +33,25 @@
         border={idx > 0}
         text={datasource.name}
         selected={$datasources.selected === datasource._id}
-        on:click={() => selectDatasource(datasource)}>
+        on:click={() => selectDatasource(datasource)}
+      >
         <div class="datasource-icon" slot="icon">
           <svelte:component
             this={ICONS[datasource.source]}
             height="18"
-            width="18" />
+            width="18"
+          />
         </div>
         <EditDatasourcePopover {datasource} />
       </NavItem>
       {#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
         <NavItem
           indentLevel={1}
-          icon="ri-eye-line"
+          icon="SQLQuery"
           text={query.name}
           selected={$queries.selected === query._id}
-          on:click={() => onClickQuery(query)}>
+          on:click={() => onClickQuery(query)}
+        >
           <EditQueryPopover {query} />
         </NavItem>
       {/each}
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/ListItem.svelte b/packages/builder/src/components/backend/DatasourceNavigator/ListItem.svelte
deleted file mode 100644
index f148eaf8b2..0000000000
--- a/packages/builder/src/components/backend/DatasourceNavigator/ListItem.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script>
-  export let icon
-  export let className
-  export let title
-  export let selected
-  export let indented
-</script>
-
-<div
-  data-cy="table-nav-item"
-  class:indented
-  class:selected
-  on:click
-  class={className}>
-  <i class={icon} />
-  <span>{title}</span>
-  <slot />
-</div>
-
-<style>
-  .indented {
-    grid-template-columns: 46px 1fr 20px;
-  }
-  .indented i {
-    justify-self: end;
-  }
-
-  div {
-    padding: var(--spacing-s) var(--spacing-m);
-    border-radius: var(--border-radius-m);
-    display: grid;
-    grid-template-columns: 20px 1fr 20px;
-    align-items: center;
-    transition: 0.3s background-color;
-    color: var(--ink);
-    font-weight: 400;
-    font-size: 14px;
-    margin-bottom: var(--spacing-xs);
-    grid-gap: var(--spacing-s);
-  }
-
-  .selected {
-    background-color: var(--grey-2);
-  }
-
-  div:hover {
-    background-color: var(--grey-1);
-    cursor: pointer;
-  }
-
-  i {
-    color: var(--grey-7);
-    font-size: 20px;
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
index c084e8413e..e442afd08d 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
@@ -1,32 +1,33 @@
 <script>
-  import { Label, Input, TextArea, Spacer } from "@budibase/bbui"
+  import { Label, Input, Layout } from "@budibase/bbui"
   import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
+  import { capitalise } from "../../../../helpers"
 
   export let integration
   export let schema
-
-  let unsaved = false
 </script>
 
 <form>
-  {#each Object.keys(schema) as configKey}
-    {#if schema[configKey].type === 'object'}
-      <Label small>{configKey}</Label>
-      <Spacer small />
-      <KeyValueBuilder
-        defaults={schema[configKey].default}
-        bind:object={integration[configKey]} />
-    {:else}
-      <div class="form-row">
-        <Label small>{configKey}</Label>
-        <Input
-          outline
-          type={schema[configKey].type}
-          on:change
-          bind:value={integration[configKey]} />
-      </div>
-    {/if}
-  {/each}
+  <Layout gap="S">
+    {#each Object.keys(schema) as configKey}
+      {#if schema[configKey].type === "object"}
+        <Label>{capitalise(configKey)}</Label>
+        <KeyValueBuilder
+          defaults={schema[configKey].default}
+          bind:object={integration[configKey]}
+        />
+      {:else}
+        <div class="form-row">
+          <Label>{capitalise(configKey)}</Label>
+          <Input
+            type={schema[configKey].type}
+            on:change
+            bind:value={integration[configKey]}
+          />
+        </div>
+      {/if}
+    {/each}
+  </Layout>
 </form>
 
 <style>
@@ -35,6 +36,5 @@
     grid-template-columns: 20% 1fr;
     grid-gap: var(--spacing-l);
     align-items: center;
-    margin-bottom: var(--spacing-m);
   }
 </style>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
index ed40244de5..db99a5d001 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { Body } from "@budibase/bbui"
   import { onMount } from "svelte"
   import api from "builderStore/api"
   import ICONS from "../icons"
@@ -38,47 +39,38 @@
       <div
         class="integration hoverable"
         class:selected={integration.type === integrationType}
-        on:click={() => selectIntegration(integrationType)}>
+        on:click={() => selectIntegration(integrationType)}
+      >
         <svelte:component
           this={ICONS[integrationType]}
-          height="100"
-          width="100" />
-        <span>{integrationType}</span>
+          height="50"
+          width="50"
+        />
+        <Body size="XS">{integrationType}</Body>
       </div>
     {/each}
   </div>
 </section>
 
 <style>
-  section {
-    display: grid;
-  }
-
   .integration-list {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: var(--spacing-m);
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    grid-gap: var(--spectrum-alias-grid-baseline);
   }
 
   .integration {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    padding: 5px;
+    display: grid;
+    background: var(--background-alt);
+    place-items: center;
+    grid-gap: var(--spectrum-alias-grid-margin-xsmall);
+    padding: var(--spectrum-alias-item-padding-s);
     transition: 0.3s all;
-    border-radius: var(--border-radius-s);
-    height: 75px;
-    width: 200px;
-  }
-
-  span {
-    font-size: var(--font-size-xs);
-    margin-top: var(--spacing-m);
-    margin-bottom: var(--spacing-xs);
+    border-radius: var(--spectrum-alias-item-rounded-border-radius-s);
   }
 
   .integration:hover,
   .selected {
-    background-color: var(--grey-3);
+    background: var(--spectrum-alias-background-color-tertiary);
   }
 </style>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/Airtable.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/Airtable.svelte
index ce689df205..33e6908214 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/Airtable.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/Airtable.svelte
@@ -8,14 +8,16 @@
   {height}
   viewBox="0 0 256 215"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <g clip-path="url(#clip0)">
     <path
       d="M114.259 2.701L18.86 42.176C13.555 44.371 13.61 51.906 18.949
       54.023L114.746 92.012C123.163 95.3503 132.537 95.3503 140.954
       92.012L236.753 54.022C242.09 51.907 242.146 44.372 236.839 42.176L141.442
       2.7C132.739 -0.901099 122.962 -0.901099 114.259 2.7"
-      fill="#FFBF00" />
+      fill="#FFBF00"
+    />
     <path
       d="M136.35 112.757V207.659C136.35 212.173 140.9 215.264 145.096
       213.601L251.844 172.166C253.034 171.694 254.056 170.875 254.775
@@ -23,20 +25,23 @@
       66.808 251.328 63.718 247.132 65.381L140.384 106.815C139.194 107.287
       138.172 108.106 137.453 109.166C136.734 110.225 136.349 111.476 136.349
       112.757"
-      fill="#26B5F8" />
+      fill="#26B5F8"
+    />
     <path
       d="M111.423 117.654L79.743 132.95L76.526 134.505L9.65 166.548C5.411
       168.593 0 165.504 0 160.795V71.72C0 70.016 0.874 68.545 2.046
       67.437C2.52616 66.9592 3.07076 66.5509 3.664 66.224C5.262 65.265 7.542
       65.009 9.48 65.776L110.89 105.956C116.045 108.001 116.45 115.224 111.423
       117.653"
-      fill="#ED3049" />
+      fill="#ED3049"
+    />
     <path
       d="M111.423 117.654L79.743 132.95L2.045 67.438C2.52516 66.9602 3.06976
       66.5519 3.663 66.225C5.261 65.266 7.541 65.01 9.479 65.777L110.889
       105.957C116.044 108.002 116.449 115.225 111.422 117.654"
       fill="black"
-      fill-opacity="0.25" />
+      fill-opacity="0.25"
+    />
   </g>
   <defs>
     <clipPath id="clip0">
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/ArangoDB.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/ArangoDB.svelte
index d305c08af0..c4b772ed41 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/ArangoDB.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/ArangoDB.svelte
@@ -11,31 +11,38 @@
   y="0px"
   {width}
   {height}
-  viewBox="0 0 2900 2000">
+  viewBox="0 0 2900 2000"
+>
   <g id="layer101">
     <path
       fill="#5b350f"
-      d="M735 1983 c-137 -19 -322 -95 -431 -175 -138 -103 -250 -315 -284 -542 -24 -161 22 -298 129 -382 123 -97 318 -180 577 -243 l130 -32 29 -67 c41 -94 135 -231 199 -289 292 -267 732 -319 1094 -128 148 79 224 151 418 400 137 176 173 242 228 414 41 130 70 301 70 416 0 236 -146 421 -382 484 -206 56 -392 19 -733 -144 -96 -47 -181 -85 -189 -85 -7 0 -61 46 -119 103 -163 159 -283 231 -433 261 -71 15 -229 19 -303 9z" />
+      d="M735 1983 c-137 -19 -322 -95 -431 -175 -138 -103 -250 -315 -284 -542 -24 -161 22 -298 129 -382 123 -97 318 -180 577 -243 l130 -32 29 -67 c41 -94 135 -231 199 -289 292 -267 732 -319 1094 -128 148 79 224 151 418 400 137 176 173 242 228 414 41 130 70 301 70 416 0 236 -146 421 -382 484 -206 56 -392 19 -733 -144 -96 -47 -181 -85 -189 -85 -7 0 -61 46 -119 103 -163 159 -283 231 -433 261 -71 15 -229 19 -303 9z"
+    />
   </g>
   <g id="layer102">
     <path
       fill="#406f23"
-      d="M735 1983 c-137 -19 -322 -95 -431 -175 -138 -103 -250 -315 -284 -542 -24 -161 22 -298 129 -382 123 -97 318 -180 577 -243 l130 -32 29 -67 c41 -94 135 -231 199 -289 292 -267 732 -319 1094 -128 148 79 224 151 418 400 137 176 173 242 228 414 41 130 70 301 70 416 0 236 -146 421 -382 484 -206 56 -392 19 -733 -144 -96 -47 -181 -85 -189 -85 -7 0 -61 46 -119 103 -163 159 -283 231 -433 261 -71 15 -229 19 -303 9z m460 -643 c163 -51 296 -150 329 -246 23 -69 20 -93 -20 -174 -51 -100 -126 -173 -238 -230 l-89 -45 -131 0 c-151 0 -222 18 -323 84 -138 89 -243 264 -243 406 0 62 12 76 120 134 160 85 229 102 405 96 87 -2 139 -9 190 -25z" />
+      d="M735 1983 c-137 -19 -322 -95 -431 -175 -138 -103 -250 -315 -284 -542 -24 -161 22 -298 129 -382 123 -97 318 -180 577 -243 l130 -32 29 -67 c41 -94 135 -231 199 -289 292 -267 732 -319 1094 -128 148 79 224 151 418 400 137 176 173 242 228 414 41 130 70 301 70 416 0 236 -146 421 -382 484 -206 56 -392 19 -733 -144 -96 -47 -181 -85 -189 -85 -7 0 -61 46 -119 103 -163 159 -283 231 -433 261 -71 15 -229 19 -303 9z m460 -643 c163 -51 296 -150 329 -246 23 -69 20 -93 -20 -174 -51 -100 -126 -173 -238 -230 l-89 -45 -131 0 c-151 0 -222 18 -323 84 -138 89 -243 264 -243 406 0 62 12 76 120 134 160 85 229 102 405 96 87 -2 139 -9 190 -25z"
+    />
   </g>
   <g id="layer103">
     <path
       fill="#c6d821"
-      d="M2215 1789 c-27 -4 -68 -15 -90 -23 -42 -15 -264 -116 -397 -180 l-77 -38 78 -102 c102 -134 144 -208 175 -305 37 -116 49 -200 44 -309 -7 -157 -46 -218 -175 -278 -94 -44 -178 -56 -313 -43 -108 10 -401 53 -479 70 -24 5 -45 8 -47 6 -2 -2 20 -44 49 -92 67 -115 176 -225 281 -284 87 -49 235 -103 335 -121 91 -16 253 -14 346 5 175 37 269 95 419 264 307 347 422 563 457 859 18 148 9 247 -29 325 -88 179 -340 286 -577 246z" />
+      d="M2215 1789 c-27 -4 -68 -15 -90 -23 -42 -15 -264 -116 -397 -180 l-77 -38 78 -102 c102 -134 144 -208 175 -305 37 -116 49 -200 44 -309 -7 -157 -46 -218 -175 -278 -94 -44 -178 -56 -313 -43 -108 10 -401 53 -479 70 -24 5 -45 8 -47 6 -2 -2 20 -44 49 -92 67 -115 176 -225 281 -284 87 -49 235 -103 335 -121 91 -16 253 -14 346 5 175 37 269 95 419 264 307 347 422 563 457 859 18 148 9 247 -29 325 -88 179 -340 286 -577 246z"
+    />
     <path
       fill="#c6d821"
-      d="M549 1680 c-272 -34 -426 -142 -495 -346 -22 -68 -26 -91 -22 -164 6 -115 32 -173 112 -248 70 -65 236 -153 370 -196 241 -79 722 -172 985 -192 180 -14 343 55 404 170 34 64 30 168 -11 271 -88 223 -245 373 -568 542 -222 116 -379 161 -584 168 -69 2 -155 0 -191 -5z m646 -340 c163 -51 296 -150 329 -246 23 -69 20 -93 -20 -174 -50 -100 -126 -173 -235 -229 -84 -42 -90 -44 -200 -48 -190 -8 -312 37 -434 161 -98 99 -155 221 -155 331 0 62 12 76 120 134 160 85 229 102 405 96 87 -2 139 -9 190 -25z" />
+      d="M549 1680 c-272 -34 -426 -142 -495 -346 -22 -68 -26 -91 -22 -164 6 -115 32 -173 112 -248 70 -65 236 -153 370 -196 241 -79 722 -172 985 -192 180 -14 343 55 404 170 34 64 30 168 -11 271 -88 223 -245 373 -568 542 -222 116 -379 161 -584 168 -69 2 -155 0 -191 -5z m646 -340 c163 -51 296 -150 329 -246 23 -69 20 -93 -20 -174 -50 -100 -126 -173 -235 -229 -84 -42 -90 -44 -200 -48 -190 -8 -312 37 -434 161 -98 99 -155 221 -155 331 0 62 12 76 120 134 160 85 229 102 405 96 87 -2 139 -9 190 -25z"
+    />
   </g>
   <g id="layer104">
     <path
       fill="#f6f654"
-      d="M2190 1721 c-57 -19 -469 -184 -494 -198 -12 -7 -5 -21 34 -72 28 -35 71 -96 97 -137 l46 -74 69 0 c38 0 83 -6 102 -14 52 -22 105 -75 139 -140 28 -55 32 -70 32 -147 0 -84 -2 -90 -48 -183 -96 -187 -234 -296 -376 -296 -44 0 -80 7 -110 20 -28 13 -65 20 -105 20 -72 0 -264 22 -426 49 -63 10 -117 17 -118 15 -10 -8 59 -113 110 -169 106 -115 238 -183 448 -231 155 -35 313 -29 447 17 78 27 210 117 279 191 82 89 277 353 336 456 92 159 137 344 125 513 -9 117 -37 189 -101 258 -109 116 -332 172 -486 122z" />
+      d="M2190 1721 c-57 -19 -469 -184 -494 -198 -12 -7 -5 -21 34 -72 28 -35 71 -96 97 -137 l46 -74 69 0 c38 0 83 -6 102 -14 52 -22 105 -75 139 -140 28 -55 32 -70 32 -147 0 -84 -2 -90 -48 -183 -96 -187 -234 -296 -376 -296 -44 0 -80 7 -110 20 -28 13 -65 20 -105 20 -72 0 -264 22 -426 49 -63 10 -117 17 -118 15 -10 -8 59 -113 110 -169 106 -115 238 -183 448 -231 155 -35 313 -29 447 17 78 27 210 117 279 191 82 89 277 353 336 456 92 159 137 344 125 513 -9 117 -37 189 -101 258 -109 116 -332 172 -486 122z"
+    />
     <path
       fill="#f6f654"
-      d="M490 1624 c-153 -33 -275 -125 -339 -257 -54 -109 -59 -201 -17 -301 32 -76 164 -189 288 -245 51 -23 260 -91 281 -91 3 0 -21 25 -54 56 -94 91 -150 193 -170 313 -14 90 1 111 123 172 161 81 195 91 343 96 111 5 143 2 215 -16 221 -55 380 -192 380 -327 0 -52 -46 -143 -106 -212 -75 -85 -233 -170 -323 -173 -25 -1 -25 -1 4 -10 140 -43 411 -62 527 -38 142 30 238 125 238 234 0 88 -58 230 -139 337 -105 139 -431 343 -676 423 -161 52 -429 71 -575 39z" />
+      d="M490 1624 c-153 -33 -275 -125 -339 -257 -54 -109 -59 -201 -17 -301 32 -76 164 -189 288 -245 51 -23 260 -91 281 -91 3 0 -21 25 -54 56 -94 91 -150 193 -170 313 -14 90 1 111 123 172 161 81 195 91 343 96 111 5 143 2 215 -16 221 -55 380 -192 380 -327 0 -52 -46 -143 -106 -212 -75 -85 -233 -170 -323 -173 -25 -1 -25 -1 4 -10 140 -43 411 -62 527 -38 142 30 238 125 238 234 0 88 -58 230 -139 337 -105 139 -431 343 -676 423 -161 52 -429 71 -575 39z"
+    />
   </g>
 </svg>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/CouchDB.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/CouchDB.svelte
index 1ed737fc81..9d449bd2c0 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/CouchDB.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/CouchDB.svelte
@@ -8,7 +8,8 @@
   {height}
   viewBox="0 0 175 115"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <path
     d="M142.187 76.6667C142.187 83.9288 138.367 87.4876 131.249
     87.6136V87.6184H43.7507V87.6136C36.6331 87.4876 32.8132 83.9288 32.8132
@@ -31,5 +32,6 @@
     54.703 38.5444 60.0403 49.2194 60.2292V60.2381H125.782V60.2299C136.456
     60.0416 142.187 54.7037 142.187 43.8109C142.187 32.9174 147.918 27.5795
     158.593 27.3912V27.381H158.594Z"
-    fill="#E42528" />
+    fill="#E42528"
+  />
 </svg>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/DynamoDB.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/DynamoDB.svelte
index 1ec061ca20..d06cb87deb 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/DynamoDB.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/DynamoDB.svelte
@@ -8,16 +8,19 @@
   {height}
   viewBox="0 0 256 289"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <g clip-path="url(#clip0)">
     <path
       d="M165.258 288.501H168.766L226.027 259.867L226.98 258.52V29.964L226.027
       28.61L168.766 0H165.215L165.258 288.501Z"
-      fill="#5294CF" />
+      fill="#5294CF"
+    />
     <path
       d="M90.741 288.501H87.184L29.972 259.867L28.811 257.87L28.222
       31.128L29.972 28.61L87.184 0H90.785L90.741 288.501Z"
-      fill="#1F5B98" />
+      fill="#1F5B98"
+    />
     <path d="M87.285 0H168.711V288.501H87.285V0Z" fill="#2D72B8" />
     <path
       d="M256 137.769L254.065 137.34L226.437 134.764L226.027 134.968L168.715
@@ -33,22 +36,27 @@
       210.584V210.6H87.285V210.584L29.972 197.325V153.461L87.285
       155.745V155.801H168.715L226.027 153.461L227.332 154.061L254.111
       151.755L256 150.832L247.096 150.704V137.897L256 137.769"
-      fill="#1A476F" />
+      fill="#1A476F"
+    />
     <path
       d="M226.027 215.966V259.867L256 224.749V194.288L226.2 215.914L226.027
       215.966Z"
-      fill="#2D72B8" />
+      fill="#2D72B8"
+    />
     <path
       d="M226.027 197.421L226.2 197.381L256 181.353V150.704L226.027
       153.461V197.421"
-      fill="#2D72B8" />
+      fill="#2D72B8"
+    />
     <path
       d="M226.2 91.208L226.027 91.168V134.968L256 137.769V107.135L226.2 91.208Z"
-      fill="#2D72B8" />
+      fill="#2D72B8"
+    />
     <path
       d="M226.2 72.687L256 94.193V63.731L226.027 28.61V72.515L226.2
       72.575V72.687Z"
-      fill="#2D72B8" />
+      fill="#2D72B8"
+    />
   </g>
   <defs>
     <clipPath id="clip0">
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/Elasticsearch.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/Elasticsearch.svelte
index 20df3bd620..f06733d11b 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/Elasticsearch.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/Elasticsearch.svelte
@@ -8,36 +8,43 @@
   {height}
   viewBox="0 0 128 143"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <g clip-path="url(#clip0)">
     <path
       d="M7.172 40.0865H101.775C112.201 40.0865 121.51 35.3065 127.757
       27.843C114.727 10.918 94.2765 0 71.265 0C43.089 0 18.738 16.3555 7.172
       40.0865Z"
-      fill="#F0BF1A" />
+      fill="#F0BF1A"
+    />
     <path
       d="M93.7575 51.222H2.8775C0.969102 57.732 0.000154178 64.4811 0 71.265C0
       78.227 1.0165 84.9485 2.8775 91.3085H93.7575C104.67 91.3085 113.801
       82.4005 113.801 71.265C113.801 60.13 104.893 51.222 93.7575 51.222"
-      fill="#07A5DE" />
+      fill="#07A5DE"
+    />
     <path
       d="M128 114.378C121.793 107.082 112.559 102.443 102.22
       102.443H7.173C18.7385 126.175 43.0895 142.53 71.265 142.53C94.418 142.53
       114.983 131.482 128 114.378Z"
-      fill="#3EBEB0" />
+      fill="#3EBEB0"
+    />
     <path
       d="M2.87749 51.222C-0.959651 64.3087 -0.959651 78.2218 2.87749
       91.3085H62.357C63.916 85.2955 64.8065 78.6145 64.8065 71.265C64.8065
       63.916 63.916 57.235 62.3565 51.222H2.87849H2.87749Z"
-      fill="#231F20" />
+      fill="#231F20"
+    />
     <path
       d="M35.41 9.5765C23.3835 16.703 13.362 27.3925 7.1265
       40.0865H59.6845C54.3395 27.838 45.877 17.594 35.4095 9.5765"
-      fill="#D7A229" />
+      fill="#D7A229"
+    />
     <path
       d="M37.637 134.068C47.881 125.828 56.121 114.915 61.2435
       102.443H7.1265C13.8075 115.806 24.4975 126.941 37.637 134.068Z"
-      fill="#019B8F" />
+      fill="#019B8F"
+    />
   </g>
   <defs>
     <clipPath id="clip0">
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/MongoDB.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/MongoDB.svelte
index 823ec3a2fa..2d9ab079a4 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/MongoDB.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/MongoDB.svelte
@@ -8,31 +8,36 @@
   {height}
   viewBox="0 0 179 179"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <path
     d="M153.828 30.7656H101.806L90.0594
     54.2594H24.6125V148.234H165.575V30.7656H153.828ZM153.828
     54.2594H107.959L114.112 42.5125H153.828V54.2594Z"
-    fill="#458248" />
+    fill="#458248"
+  />
   <path
     d="M149.773 173.406L146.623 172.36C146.623 172.36 147.026 156.412 141.276
     155.299C137.483 150.903 141.835 -32.4046 155.635 154.673C153.015 156 151.011
     158.289 150.041 161.061C149.521 165.155 149.431 169.293 149.773
     173.406V173.406Z"
-    fill="url(#paint0_linear)" />
+    fill="url(#paint0_linear)"
+  />
   <path
     d="M151.473 158.007C159.86 151.69 166.283 143.124 169.994 133.302C173.705
     123.48 174.553 112.807 172.439 102.522C166.285 75.3142 151.68 66.3698
     150.108 62.9577C148.75 60.8316 147.591 58.5845 146.646 56.2452L147.809
     132.052C147.809 132.052 145.398 155.215 151.473 158.007Z"
-    fill="url(#paint1_linear)" />
+    fill="url(#paint1_linear)"
+  />
   <path
     d="M145.018 159.014C145.018 159.014 119.337 141.522 120.825 110.583C120.964
     101.255 123.102 92.0662 127.096 83.636C131.091 75.2058 136.847 67.7308
     143.978 61.7158C144.809 61.0059 145.469 60.1177 145.91 59.1173C146.351
     58.1169 146.56 57.03 146.523 55.9375C148.123 59.3777 147.86 107.299 148.027
     112.904C148.682 134.709 146.819 154.897 145.018 159.014V159.014Z"
-    fill="url(#paint2_linear)" />
+    fill="url(#paint2_linear)"
+  />
   <defs>
     <linearGradient
       id="paint0_linear"
@@ -40,7 +45,8 @@
       y1="115.729"
       x2="164.805"
       y2="128.016"
-      gradientUnits="userSpaceOnUse">
+      gradientUnits="userSpaceOnUse"
+    >
       <stop offset="0.231" stop-color="#999875" />
       <stop offset="0.563" stop-color="#9B9977" />
       <stop offset="0.683" stop-color="#A09F7E" />
@@ -57,7 +63,8 @@
       y1="55.7038"
       x2="157.883"
       y2="155.673"
-      gradientUnits="userSpaceOnUse">
+      gradientUnits="userSpaceOnUse"
+    >
       <stop stop-color="#48A547" />
       <stop offset="1" stop-color="#3F9143" />
     </linearGradient>
@@ -67,7 +74,8 @@
       y1="113.645"
       x2="161.577"
       y2="99.2572"
-      gradientUnits="userSpaceOnUse">
+      gradientUnits="userSpaceOnUse"
+    >
       <stop stop-color="#41A247" />
       <stop offset="0.352" stop-color="#4BA74B" />
       <stop offset="0.956" stop-color="#67B554" />
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/MySQL.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/MySQL.svelte
index d2e612e7e3..3501e2ca74 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/MySQL.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/MySQL.svelte
@@ -8,12 +8,14 @@
   {height}
   viewBox="0 0 147 147"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <path
     d="M128.244 27.5625H83.3444L74.1569
     45.9375H22.9688V124.031H137.812V27.5625H128.244ZM128.625
     45.9375H92.7478L97.5621 36.75H128.625V45.9375Z"
-    fill="#2A4B59" />
+    fill="#2A4B59"
+  />
   <path
     fill-rule="evenodd"
     clip-rule="evenodd"
@@ -23,7 +25,8 @@
     73.4258 75.6415 72.917 75.8825 72.3379C76.1234 71.7589 76.2141 71.1283
     76.146 70.5048C75.8564 70.0602 75.5911 69.6001 75.3513 69.1267C74.9562
     68.4652 74.0926 68.1345 73.5597 67.6062"
-    fill="white" />
+    fill="white"
+  />
   <path
     fill-rule="evenodd"
     clip-rule="evenodd"
@@ -79,5 +82,6 @@
     114.951 109.408 116.856 112.175C117.848 113.553 121.822 114.293 123.609
     115.023C125.17 115.557 126.703 116.17 128.202 116.86C130.453 118.239 132.7
     119.842 134.822 121.367C135.879 122.162 139.191 123.815 139.388 125.143"
-    fill="#F3FDFF" />
+    fill="#F3FDFF"
+  />
 </svg>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/Postgres.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/Postgres.svelte
index 56268f75b3..016e9c5667 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/Postgres.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/Postgres.svelte
@@ -8,7 +8,8 @@
   {height}
   viewBox="0 0 170 175"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <path
     d="M169.341 104.792C168.322 101.71 165.652 99.5637 162.199 99.0487C160.57
     98.8061 158.706 98.9095 156.499 99.3635C152.653 100.156 149.799 100.457
@@ -32,7 +33,8 @@
     134.335 126.893 134.386 126.453L134.492 125.551L135.685 125.655L135.993
     125.676C142.635 125.978 150.756 124.572 155.744 122.259C159.685 120.434
     172.315 113.778 169.341 104.792"
-    fill="black" />
+    fill="black"
+  />
   <path
     d="M157.984 106.539C138.235 110.606 136.877 103.931 136.877 103.931C157.729
     73.046 166.446 33.8413 158.924 24.2462C138.402 -1.92761 102.878 10.451
@@ -50,21 +52,24 @@
     130.43C128.417 120.001 127.363 116.636 134.573 118.201L136.326
     118.355C141.632 118.596 148.578 117.503 152.655 115.611C161.432 111.545
     166.639 104.755 157.983 106.539H157.984"
-    fill="#336791" />
+    fill="#336791"
+  />
   <path
     d="M71.7692 54.0412C69.9895 53.7939 68.3778 54.0226 67.5623 54.6391C67.1041
     54.9858 66.962 55.3875 66.9235 55.6639C66.8212 56.3964 67.3352 57.2064
     67.6513 57.624C68.5452 58.8066 69.8507 59.6193 71.143 59.7983C71.3302
     59.8248 71.5168 59.8367 71.7021 59.8367C73.857 59.8367 75.8167 58.1616
     75.9893 56.9254C76.2051 55.3769 73.9533 54.3448 71.7692 54.0418"
-    fill="white" />
+    fill="white"
+  />
   <path
     d="M130.727 54.0902C130.557 52.8765 128.394 52.5305 126.341 52.8155C124.29
     53.1006 122.302 54.0246 122.468 55.241C122.601 56.1869 124.312 57.8017
     126.337 57.8017C126.509 57.8017 126.681 57.7904 126.855 57.7659C128.207
     57.579 129.199 56.7219 129.671 56.228C130.388 55.475 130.804 54.6358 130.727
     54.0902"
-    fill="white" />
+    fill="white"
+  />
   <path
     d="M164.556 106.077C163.803 103.804 161.379 103.073 157.352 103.903C145.396
     106.366 141.114 104.66 139.708 103.627C149.002 89.494 156.647 72.4103
@@ -145,5 +150,6 @@
     136.156 107.46 136.491 107.343C136.699 107.512 136.926 107.68 137.176
     107.844C141.168 110.475 148.289 110.758 158.342 108.687L158.453
     108.665C157.097 109.931 154.776 111.629 151.487 113.154Z"
-    fill="white" />
+    fill="white"
+  />
 </svg>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/Rest.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/Rest.svelte
index f4c8863fd4..4d12638603 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/Rest.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/Rest.svelte
@@ -8,12 +8,14 @@
   {height}
   viewBox="0 0 120 120"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <path
     d="M103.125 20.625H68.25L60.375
     36.375H16.5V99.375H111V20.625H103.125ZM103.125 36.375H72.375L76.5
     28.5H103.125V36.375Z"
-    fill="#FFBA58" />
+    fill="#FFBA58"
+  />
   <path
     d="M75 46.875V52.5H60C58.0127 52.5059 56.1085 53.298 54.7033 54.7033C53.298
     56.1085 52.5059 58.0127 52.5 60V75H46.875C44.3886 75 42.004 75.9877 40.2459
@@ -32,5 +34,6 @@
     44.3886 92.7623 42.004 91.0041 40.2459C89.246 38.4877 86.8614 37.5 84.375
     37.5C81.8886 37.5 79.504 38.4877 77.7459 40.2459C75.9877 42.004 75 44.3886
     75 46.875Z"
-    fill="#E76A00" />
+    fill="#E76A00"
+  />
 </svg>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/S3.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/S3.svelte
index 23168a3501..0173e717e2 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/S3.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/S3.svelte
@@ -8,48 +8,61 @@
   {height}
   viewBox="0 0 128 155"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <path
     d="M10.312 26.843L0 32V122.51L10.312 127.637L10.374 127.562V26.914L10.312
     26.843Z"
-    fill="#8C3123" />
+    fill="#8C3123"
+  />
   <path
     d="M65.5 114.5L10.312 127.637V26.843L65.5 39.6935V114.5Z"
-    fill="#E05243" />
+    fill="#E05243"
+  />
   <path
     d="M40.589 93.933L63.998 96.913L64.145 96.574L64.2765 58.189L63.998
     57.889L40.589 60.826V93.933"
-    fill="#8C3123" />
+    fill="#8C3123"
+  />
   <path
     d="M63.998 114.647L117.683 127.665L117.768 127.53L117.766 26.933L117.681
     26.843L63.998 39.841V114.647"
-    fill="#8C3123" />
+    fill="#8C3123"
+  />
   <path
     d="M87.4135 93.933L63.998 96.913V57.889L87.4135 60.826V93.933Z"
-    fill="#E05243" />
+    fill="#E05243"
+  />
   <path
     d="M87.4135 44.8155L63.998 49.083L40.589 44.8155L63.9685 38.6875L87.4135
     44.8155Z"
-    fill="#5E1F18" />
+    fill="#5E1F18"
+  />
   <path
     d="M87.4135 109.901L63.998 105.605L40.589 109.901L63.9695 116.427L87.4135
     109.901Z"
-    fill="#F2B0A9" />
+    fill="#F2B0A9"
+  />
   <path
     d="M40.589 44.8155L63.998 39.0225L64.1875 38.964V0.1565L63.998 0L40.589
     11.7065V44.8155Z"
-    fill="#8C3123" />
+    fill="#8C3123"
+  />
   <path
     d="M87.4135 44.8155L63.998 39.0225V0L87.4135 11.7065V44.8155Z"
-    fill="#E05243" />
+    fill="#E05243"
+  />
   <path
     d="M63.998 154.714L40.5865 143.012V109.903L63.998 115.694L64.3425
     116.086L64.249 154.039L63.998 154.714Z"
-    fill="#8C3123" />
+    fill="#8C3123"
+  />
   <path
     d="M63.998 154.714L87.4115 143.012V109.903L63.998 115.694V154.714"
-    fill="#E05243" />
+    fill="#E05243"
+  />
   <path
     d="M117.684 26.843L128 32V122.51L117.684 127.665V26.843Z"
-    fill="#E05243" />
+    fill="#E05243"
+  />
 </svg>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/SQLServer.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/SQLServer.svelte
index 6aa2fcafca..5bc3a8e061 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/SQLServer.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/SQLServer.svelte
@@ -7,7 +7,8 @@
   {width}
   {height}
   xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 1478.201 1195.111">
+  viewBox="0 0 1478.201 1195.111"
+>
   <g transform="matrix(.569 0 0 .569 199.451 -82.735)">
     <linearGradient
       id="a"
@@ -16,7 +17,8 @@
       y1="923.573"
       x2="-2061.249"
       y2="1420.331"
-      gradientTransform="matrix(.1234 0 0 -.1234 1158.33 1550.273)">
+      gradientTransform="matrix(.1234 0 0 -.1234 1158.33 1550.273)"
+    >
       <stop offset="0" stop-color="#909ca9" />
       <stop offset="1" stop-color="#ededee" />
     </linearGradient>
@@ -107,7 +109,8 @@
       99.755-47.06 130.547-2.815 6.939-3.896 8.677-5.417
       8.456-3.687-.213-54.646-7.37-85.66-11.925-53.994-8.24-144.641-24.073-167.409-29.275l-5.204-1.083
       32.307-7.378c69.396-15.613 102.791-24.069 136.619-34.478 42.722-13.011
-      85.011-29.276 127.729-49.225 6.722-3.037 12.361-5.422 13.879-5.639z" />
+      85.011-29.276 127.729-49.225 6.722-3.037 12.361-5.422 13.879-5.639z"
+    />
     <linearGradient
       id="b"
       gradientUnits="userSpaceOnUse"
@@ -115,7 +118,8 @@
       y1="10288.81"
       x2="-2206.249"
       y2="10288.81"
-      gradientTransform="matrix(.1234 0 0 -.1234 1158.33 1550.273)">
+      gradientTransform="matrix(.1234 0 0 -.1234 1158.33 1550.273)"
+    >
       <stop offset="0" stop-color="#939fab" />
       <stop offset="1" stop-color="#dcdee1" />
     </linearGradient>
@@ -142,14 +146,16 @@
       4.552 7.806 7.373 16.263 30.364 60.07 35.997 68.526 1.74 2.822 4.771
       3.038-25.802-1.95-73.512-11.93-97.152-15.829-97.152-16.263 0-.216
       2.169-1.735 4.988-3.254 22.771-12.575 45.756-28.624 66.142-45.756
-      4.988-4.121 9.542-8.024 10.407-8.676.216-.433.652-.649.868-.433z" />
+      4.988-4.121 9.542-8.024 10.407-8.676.216-.433.652-.649.868-.433z"
+    />
     <radialGradient
       id="c"
       cx="-14217.448"
       cy="7277.705"
       r="898.12"
       gradientTransform="matrix(-.1185 -.0178 -.036 .237 -198.955 -1314.415)"
-      gradientUnits="userSpaceOnUse">
+      gradientUnits="userSpaceOnUse"
+    >
       <stop offset="0" stop-color="#ee352c" />
       <stop offset="1" stop-color="#a91d22" />
     </radialGradient>
@@ -241,7 +247,8 @@
       45.971-41.853 42.723-83.273 76.12-134.669 108.649-6.505 4.119-12.359
       7.804-13.011 8.24-1.519.867.432-1.303 22.986-25.808 14.314-15.397
       25.155-28.408 37.516-44.453 8.24-10.624 9.759-12.143 21.688-20.604
-      31.878-22.987 105.39-72.864 106.258-71.995z" />
+      31.878-22.987 105.39-72.864 106.258-71.995z"
+    />
   </g>
   <path
     fill="#231F1F"
@@ -387,5 +394,6 @@
     18.172h1.301l8.152-18.347c.219-.563.393-1.301.76-2.275-.174 1.887-.174
     3.401-.174 4.553v16.048h2.82V792.52h-3.406l-7.371 16.438c-.174.587-.762
     1.734-1.129
-    3.037h-.217c-.152-.761-.541-1.519-1.084-2.818l-7.373-16.655h-3.816v23.854h2.666v-15.917l.152-.023z" />
+    3.037h-.217c-.152-.761-.541-1.519-1.084-2.818l-7.373-16.655h-3.816v23.854h2.666v-15.917l.152-.023z"
+  />
 </svg>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
index 27a058cd5d..a03f07e746 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
@@ -1,7 +1,7 @@
 <script>
   import { goto } from "@roxi/routify"
   import { datasources } from "stores/backend"
-  import { notifier } from "builderStore/store/notifications"
+  import { notifications } from "@budibase/bbui"
   import { Input, Label, ModalContent } from "@budibase/bbui"
   import TableIntegrationMenu from "../TableIntegrationMenu/index.svelte"
   import analytics from "analytics"
@@ -31,7 +31,7 @@
       source: type,
       config,
     })
-    notifier.success(`Datasource ${name} created successfully.`)
+    notifications.success(`Datasource ${name} created successfully.`)
     analytics.captureEvent("Datasource Created", { name })
 
     // Navigate to new datasource
@@ -41,16 +41,18 @@
 
 <ModalContent
   title="Create Datasource"
+  size="L"
   confirmText="Create"
   onConfirm={saveDatasource}
-  disabled={error || !name}>
+  disabled={error || !name}
+>
   <Input
     data-cy="datasource-name-input"
-    thin
     label="Datasource Name"
     on:input={checkValid}
     bind:value={name}
-    {error} />
-  <Label grey extraSmall>Source</Label>
+    {error}
+  />
+  <Label>Datasource Type</Label>
   <TableIntegrationMenu bind:integration />
 </ModalContent>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
index 216cc2cfdb..35d8368e0d 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
@@ -1,59 +1,38 @@
 <script>
   import { goto } from "@roxi/routify"
   import { datasources } from "stores/backend"
-  import { notifier } from "builderStore/store/notifications"
-  import { DropdownMenu } from "@budibase/bbui"
+  import { notifications } from "@budibase/bbui"
+  import { ActionMenu, MenuItem, Icon, Popover } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let datasource
 
-  let anchor
-  let dropdown
   let confirmDeleteDialog
 
-  function hideEditor() {
-    dropdown?.hide()
-  }
-
-  function showModal() {
-    hideEditor()
-    confirmDeleteDialog.show()
-  }
-
   async function deleteDatasource() {
     const wasSelectedSource = $datasources.selected
-    console.log(wasSelectedSource)
-    console.log(datasource)
     await datasources.delete(datasource)
-    notifier.success("Datasource deleted")
+    notifications.success("Datasource deleted")
     // navigate to first index page if the source you are deleting is selected
     if (wasSelectedSource === datasource._id) {
       $goto("./datasource")
     }
-    hideEditor()
   }
 </script>
 
-<div on:click|stopPropagation>
-  <div bind:this={anchor} class="icon" on:click={dropdown.show}>
-    <i class="ri-more-line" />
+<ActionMenu>
+  <div slot="control" class="icon">
+    <Icon size="S" hoverable name="MoreSmallList" />
   </div>
-  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
-    <DropdownContainer>
-      <DropdownItem
-        icon="ri-delete-bin-line"
-        title="Delete"
-        on:click={showModal}
-        data-cy="delete-datasource" />
-    </DropdownContainer>
-  </DropdownMenu>
-</div>
+  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
+</ActionMenu>
+
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   okText="Delete Datasource"
   onOk={deleteDatasource}
-  title="Confirm Deletion">
+  title="Confirm Deletion"
+>
   Are you sure you wish to delete the datasource
   <i>{datasource.name}?</i>
   This action cannot be undone.
@@ -66,8 +45,4 @@
     justify-content: flex-end;
     align-items: center;
   }
-
-  div.icon i {
-    font-size: 16px;
-  }
 </style>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
index 7dc0749028..47f50c2739 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
@@ -1,50 +1,31 @@
 <script>
-  import { notifier } from "builderStore/store/notifications"
-  import { DropdownMenu } from "@budibase/bbui"
+  import { ActionMenu, MenuItem, Icon, notifications } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
+  import { queries } from "stores/backend"
 
   export let query
 
-  let anchor
-  let dropdown
   let confirmDeleteDialog
 
-  function hideEditor() {
-    dropdown?.hide()
-  }
-
-  function showModal() {
-    hideEditor()
-    confirmDeleteDialog.show()
-  }
-
   async function deleteQuery() {
     await queries.delete(query)
-    notifier.success("Query deleted")
-    hideEditor()
+    notifications.success("Query deleted")
   }
 </script>
 
-<div on:click|stopPropagation>
-  <div bind:this={anchor} class="icon" on:click={dropdown.show}>
-    <i class="ri-more-line" />
+<ActionMenu>
+  <div slot="control" class="icon">
+    <Icon size="S" hoverable name="MoreSmallList" />
   </div>
-  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
-    <DropdownContainer>
-      <DropdownItem
-        icon="ri-delete-bin-line"
-        title="Delete"
-        on:click={showModal}
-        data-cy="delete-datasource" />
-    </DropdownContainer>
-  </DropdownMenu>
-</div>
+  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
+</ActionMenu>
+
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   okText="Delete Query"
   onOk={deleteQuery}
-  title="Confirm Deletion">
+  title="Confirm Deletion"
+>
   Are you sure you wish to delete this query? This action cannot be undone.
 </ConfirmDialog>
 
@@ -55,8 +36,4 @@
     justify-content: flex-end;
     align-items: center;
   }
-
-  div.icon i {
-    font-size: 16px;
-  }
 </style>
diff --git a/packages/builder/src/components/backend/TableNavigator/ListItem.svelte b/packages/builder/src/components/backend/TableNavigator/ListItem.svelte
index f148eaf8b2..aa94297977 100644
--- a/packages/builder/src/components/backend/TableNavigator/ListItem.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/ListItem.svelte
@@ -11,7 +11,8 @@
   class:indented
   class:selected
   on:click
-  class={className}>
+  class={className}
+>
   <i class={icon} />
   <span>{title}</span>
   <slot />
diff --git a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
index 293f52b487..ba904061a3 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { notifier } from "builderStore/store/notifications"
+  import { notifications } from "@budibase/bbui"
   import { FIELDS } from "constants/backend"
   import api from "builderStore/api"
 
@@ -60,7 +60,7 @@
     }
 
     if (response.status !== 200) {
-      notifier.danger("CSV Invalid, please try another CSV file")
+      notifications.error("CSV Invalid, please try another CSV file")
       return []
     }
   }
@@ -68,16 +68,17 @@
   async function handleFile(evt) {
     const fileArray = Array.from(evt.target.files)
     if (fileArray.some(file => file.size >= FILE_SIZE_LIMIT)) {
-      notifier.danger(
-        `Files cannot exceed ${FILE_SIZE_LIMIT /
-          BYTES_IN_MB}MB. Please try again with smaller files.`
+      notifications.error(
+        `Files cannot exceed ${
+          FILE_SIZE_LIMIT / BYTES_IN_MB
+        }MB. Please try again with smaller files.`
       )
       return
     }
 
     // Read CSV as plain text to upload alongside schema
     let reader = new FileReader()
-    reader.addEventListener("load", function(e) {
+    reader.addEventListener("load", function (e) {
       csvString = e.target.result
       files = fileArray
       validateCSV()
@@ -91,9 +92,24 @@
   }
 
   const handleTypeChange = column => evt => {
-    schema[column].type = evt.target.value
+    schema[column].type = evt.detail
     validateCSV()
   }
+
+  const typeOptions = [
+    {
+      label: "Text",
+      value: "string",
+    },
+    {
+      label: "Number",
+      value: "number",
+    },
+    {
+      label: "Date",
+      value: "datetime",
+    },
+  ]
 </script>
 
 <div class="dropzone">
@@ -102,38 +118,38 @@
     {#if files[0]}{files[0].name}{:else}Upload{/if}
   </label>
 </div>
-<div class="schema-fields">
-  {#if fields.length}
+{#if fields.length}
+  <div class="schema-fields">
     {#each fields as columnName}
       <div class="field">
         <span>{columnName}</span>
         <Select
-          secondary
-          thin
           bind:value={schema[columnName].type}
-          on:change={handleTypeChange(columnName)}>
-          <option value={'string'}>Text</option>
-          <option value={'number'}>Number</option>
-          <option value={'datetime'}>Date</option>
-        </Select>
+          on:change={handleTypeChange(columnName)}
+          options={typeOptions}
+          placeholder={null}
+          getOptionLabel={option => option.label}
+          getOptionValue={option => option.value}
+        />
         <span class="field-status" class:error={!schema[columnName].success}>
-          {schema[columnName].success ? 'Success' : 'Failure'}
+          {schema[columnName].success ? "Success" : "Failure"}
         </span>
         <i
           class="omit-button ri-close-circle-fill"
-          on:click={() => omitColumn(columnName)} />
+          on:click={() => omitColumn(columnName)}
+        />
       </div>
     {/each}
-  {/if}
-</div>
+  </div>
+{/if}
+
 {#if fields.length}
   <div class="display-column">
-    <Label extraSmall grey>Display Column</Label>
-    <Select thin secondary bind:value={primaryDisplay}>
-      {#each fields as field}
-        <option value={field}>{field}</option>
-      {/each}
-    </Select>
+    <Select
+      label="Display Column"
+      bind:value={primaryDisplay}
+      options={fields}
+    />
   </div>
 {/if}
 
@@ -165,6 +181,10 @@
     display: none;
   }
 
+  .schema-fields {
+    margin-top: var(--spacing-xl);
+  }
+
   label {
     font-family: var(--font-sans);
     cursor: pointer;
@@ -201,11 +221,11 @@
 
   .field {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: 2fr 2fr 1fr auto;
     margin-top: var(--spacing-m);
     align-items: center;
     grid-gap: var(--spacing-m);
-    font-size: var(--font-size-xs);
+    font-size: var(--spectrum-global-dimension-font-size-75);
   }
 
   .display-column {
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
index 894a02ad73..fa8733a8b3 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@@ -34,10 +34,11 @@
     {#each $tables.list as table, idx}
       <NavItem
         border={idx > 0}
-        icon={`ri-${table._id === TableNames.USERS ? 'user' : 'table'}-line`}
+        icon={table._id === TableNames.USERS ? "UserGroup" : "Table"}
         text={table.name}
         selected={selectedView === `all_${table._id}`}
-        on:click={() => selectTable(table)}>
+        on:click={() => selectTable(table)}
+      >
         {#if table._id !== TableNames.USERS}
           <EditTablePopover {table} />
         {/if}
@@ -45,12 +46,14 @@
       {#each Object.keys(table.views || {}) as viewName, idx (idx)}
         <NavItem
           indentLevel={1}
-          icon="ri-eye-line"
+          icon="Remove"
           text={viewName}
           selected={selectedView === viewName}
-          on:click={() => onClickView(table, viewName)}>
+          on:click={() => onClickView(table, viewName)}
+        >
           <EditViewPopover
-            view={{ name: viewName, ...table.views[viewName] }} />
+            view={{ name: viewName, ...table.views[viewName] }}
+          />
         </NavItem>
       {/each}
     {/each}
diff --git a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
index 5c9559088a..e870bc98bb 100644
--- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
@@ -2,8 +2,8 @@
   import { goto } from "@roxi/routify"
   import { store } from "builderStore"
   import { tables } from "stores/backend"
-  import { notifier } from "builderStore/store/notifications"
-  import { Input, Label, ModalContent, Toggle } from "@budibase/bbui"
+  import { notifications } from "@budibase/bbui"
+  import { Input, Label, ModalContent, Toggle, Divider } from "@budibase/bbui"
   import TableDataImport from "../TableDataImport.svelte"
   import analytics from "analytics"
   import screenTemplates from "builderStore/store/screenTemplates"
@@ -60,7 +60,7 @@
 
     // Create table
     const table = await tables.save(newTable)
-    notifier.success(`Table ${name} created successfully.`)
+    notifications.success(`Table ${name} created successfully.`)
     analytics.captureEvent("Table Created", { name })
 
     // Create auto screens
@@ -93,39 +93,35 @@
   title="Create Table"
   confirmText="Create"
   onConfirm={saveTable}
-  disabled={error || !name || (dataImport && !dataImport.valid)}>
+  disabled={error || !name || (dataImport && !dataImport.valid)}
+>
   <Input
     data-cy="table-name-input"
     thin
     label="Table Name"
     on:input={checkValid}
     bind:value={name}
-    {error} />
+    {error}
+  />
   <div class="autocolumns">
     <Label extraSmall grey>Auto Columns</Label>
     <div class="toggles">
       <div class="toggle-1">
-        <Toggle
-          text="Created by"
-          bind:checked={autoColumns.createdBy.enabled} />
-        <Toggle
-          text="Created at"
-          bind:checked={autoColumns.createdAt.enabled} />
-        <Toggle text="Auto ID" bind:checked={autoColumns.autoID.enabled} />
+        <Toggle text="Created by" bind:value={autoColumns.createdBy.enabled} />
+        <Toggle text="Created at" bind:value={autoColumns.createdAt.enabled} />
+        <Toggle text="Auto ID" bind:value={autoColumns.autoID.enabled} />
       </div>
       <div class="toggle-2">
-        <Toggle
-          text="Updated by"
-          bind:checked={autoColumns.updatedBy.enabled} />
-        <Toggle
-          text="Updated at"
-          bind:checked={autoColumns.updatedAt.enabled} />
+        <Toggle text="Updated by" bind:value={autoColumns.updatedBy.enabled} />
+        <Toggle text="Updated at" bind:value={autoColumns.updatedAt.enabled} />
       </div>
     </div>
+    <Divider />
   </div>
   <Toggle
-    text="Generate screens in the design section"
-    bind:checked={createAutoscreens} />
+    text="Generate screens in Design section"
+    bind:value={createAutoscreens}
+  />
   <div>
     <Label grey extraSmall>Create Table from CSV (Optional)</Label>
     <TableDataImport bind:dataImport />
@@ -134,8 +130,7 @@
 
 <style>
   .autocolumns {
-    padding-bottom: 10px;
-    border-bottom: 3px solid var(--grey-1);
+    margin-bottom: -10px;
   }
 
   .toggles {
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index 3209932308..2d419f18aa 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -2,38 +2,32 @@
   import { goto } from "@roxi/routify"
   import { store, allScreens } from "builderStore"
   import { tables } from "stores/backend"
-  import { notifier } from "builderStore/store/notifications"
-  import { DropdownMenu, Button, Input } from "@budibase/bbui"
+  import { notifications } from "@budibase/bbui"
+  import {
+    ActionMenu,
+    MenuItem,
+    Icon,
+    Modal,
+    ModalContent,
+    Input,
+  } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let table
 
-  let anchor
-  let dropdown
-  let editing
+  let editorModal
   let confirmDeleteDialog
   let error = ""
   let originalName = table.name
   let templateScreens
   let willBeDeleted
 
-  function showEditor() {
-    editing = true
-  }
-
-  function hideEditor() {
-    dropdown?.hide()
-    editing = false
-  }
-
-  function showModal() {
+  function showDeleteModal() {
     const screens = $allScreens
     templateScreens = screens.filter(screen => screen.autoTableId === table._id)
     willBeDeleted = ["All table data"].concat(
       templateScreens.map(screen => `Screen ${screen.props._instanceName}`)
     )
-    hideEditor()
     confirmDeleteDialog.show()
   }
 
@@ -42,68 +36,58 @@
     await tables.delete(table)
     store.actions.screens.delete(templateScreens)
     await tables.fetch()
-    notifier.success("Table deleted")
+    notifications.success("Table deleted")
     if (wasSelectedTable._id === table._id) {
       $goto("./table")
     }
-    hideEditor()
+    editorModal.hide()
   }
 
   async function save() {
     await tables.save(table)
-    notifier.success("Table renamed successfully")
-    hideEditor()
+    notifications.success("Table renamed successfully")
+    editorModal.hide()
   }
 
   function checkValid(evt) {
     const tableName = evt.target.value
     error =
-      originalName !== tableName
+      originalName === tableName
         ? `Table with name ${tableName} already exists. Please choose another name.`
         : ""
   }
 </script>
 
-<div on:click|stopPropagation>
-  <div bind:this={anchor} class="icon" on:click={dropdown.show}>
-    <i class="ri-more-line" />
+<ActionMenu>
+  <div slot="control" class="icon">
+    <Icon s hoverable name="MoreSmallList" />
   </div>
-  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
-    {#if editing}
-      <div class="actions">
-        <h5>Edit Table</h5>
-        <Input
-          label="Table Name"
-          thin
-          bind:value={table.name}
-          on:input={checkValid}
-          {error} />
-        <footer>
-          <Button secondary on:click={hideEditor}>Cancel</Button>
-          <Button primary disabled={error} on:click={save}>Save</Button>
-        </footer>
-      </div>
-    {:else}
-      <DropdownContainer>
-        <DropdownItem
-          icon="ri-edit-line"
-          data-cy="edit-table"
-          title="Edit"
-          on:click={showEditor} />
-        <DropdownItem
-          icon="ri-delete-bin-line"
-          title="Delete"
-          on:click={showModal}
-          data-cy="delete-table" />
-      </DropdownContainer>
-    {/if}
-  </DropdownMenu>
-</div>
+  <MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem>
+  <MenuItem icon="Delete" on:click={showDeleteModal}>Delete</MenuItem>
+</ActionMenu>
+
+<Modal bind:this={editorModal}>
+  <ModalContent
+    title="Edit Table"
+    confirmText="Save"
+    onConfirm={save}
+    disabled={table.name === originalName || error}
+  >
+    <Input
+      label="Table Name"
+      thin
+      bind:value={table.name}
+      on:input={checkValid}
+      {error}
+    />
+  </ModalContent>
+</Modal>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   okText="Delete Table"
   onOk={deleteTable}
-  title="Confirm Deletion">
+  title="Confirm Deletion"
+>
   Are you sure you wish to delete the table
   <i>{table.name}?</i>
   The following will also be deleted:
@@ -125,10 +109,6 @@
     align-items: center;
   }
 
-  div.icon i {
-    font-size: 16px;
-  }
-
   div.delete-items {
     margin-top: 10px;
     margin-bottom: 10px;
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
index 68f16d3c74..e8a02c8eb3 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
@@ -1,115 +1,57 @@
 <script>
   import { goto } from "@roxi/routify"
   import { views } from "stores/backend"
-  import { notifier } from "builderStore/store/notifications"
-  import { DropdownMenu, Button, Input } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
+  import {
+    notifications,
+    Icon,
+    Input,
+    ActionMenu,
+    MenuItem,
+    Modal,
+    ModalContent,
+  } from "@budibase/bbui"
 
   export let view
 
-  let anchor
-  let dropdown
-  let editing
+  let editorModal
+  let confirmDeleteDialogue
   let originalName = view.name
   let confirmDeleteDialog
 
-  function showEditor() {
-    editing = true
-  }
-
-  function hideEditor() {
-    dropdown.hide()
-    editing = false
-  }
-
-  function showDelete() {
-    dropdown.hide()
-    confirmDeleteDialog.show()
-  }
-
   async function save() {
     await views.save({
       originalName,
       ...view,
     })
-    notifier.success("View renamed successfully")
-    hideEditor()
+    notifications.success("View renamed successfully")
   }
 
   async function deleteView() {
     const name = view.name
     const id = view.tableId
     await views.delete(name)
-    notifier.success("View deleted")
+    notifications.success("View deleted")
     $goto(`./table/${id}`)
   }
 </script>
 
-<div on:click|stopPropagation>
-  <div bind:this={anchor} class="icon" on:click={dropdown.show}>
-    <i class="ri-more-line" />
+<ActionMenu>
+  <div slot="control" class="icon">
+    <Icon s hoverable name="MoreSmallList" />
   </div>
-  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
-    {#if editing}
-      <div class="actions">
-        <h5>Edit View</h5>
-        <Input label="View Name" thin bind:value={view.name} />
-        <footer>
-          <Button secondary on:click={hideEditor}>Cancel</Button>
-          <Button primary on:click={save}>Save</Button>
-        </footer>
-      </div>
-    {:else}
-      <DropdownContainer>
-        <DropdownItem
-          icon="ri-edit-line"
-          data-cy="edit-view"
-          title="Edit"
-          on:click={showEditor} />
-        <DropdownItem
-          icon="ri-delete-bin-line"
-          title="Delete"
-          data-cy="delete-view"
-          on:click={showDelete} />
-      </DropdownContainer>
-    {/if}
-  </DropdownMenu>
-</div>
+  <MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem>
+  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
+</ActionMenu>
+<Modal bind:this={editorModal}>
+  <ModalContent title="Edit View" onConfirm={save} confirmText="Save">
+    <Input label="View Name" thin bind:value={view.name} />
+  </ModalContent>
+</Modal>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   body={`Are you sure you wish to delete the view '${view.name}'? Your data will be deleted and this action cannot be undone.`}
   okText="Delete View"
   onOk={deleteView}
-  title="Confirm Deletion" />
-
-<style>
-  div.icon {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  div.icon i {
-    font-size: 16px;
-  }
-
-  .actions {
-    padding: var(--spacing-xl);
-    display: grid;
-    grid-gap: var(--spacing-xl);
-    min-width: 400px;
-  }
-
-  h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-m);
-  }
-</style>
+  title="Confirm Deletion"
+/>
diff --git a/packages/builder/src/components/common/Checkbox.svelte b/packages/builder/src/components/common/Checkbox.svelte
deleted file mode 100644
index fa008b4200..0000000000
--- a/packages/builder/src/components/common/Checkbox.svelte
+++ /dev/null
@@ -1,114 +0,0 @@
-<script>
-  import { createEventDispatcher } from "svelte"
-
-  const dispatch = createEventDispatcher()
-
-  export let checked = false
-
-  function handleChange() {
-    checked = !checked
-    dispatch("change", checked)
-  }
-</script>
-
-<input type="checkbox" class="checkbox" id="_checkbox" />
-<div class="checkbox-container" on:click={handleChange}>
-  <div class="check-div" class:checked>
-    <div class="tick_mark" />
-  </div>
-</div>
-
-<style>
-  .checkbox-container {
-    position: relative;
-    z-index: 0;
-  }
-
-  .checkbox {
-    display: none;
-  }
-
-  .check-div {
-    position: relative;
-    width: 20px;
-    height: 20px;
-    background-color: var(--grey-2);
-    cursor: pointer;
-    transition: 0.2s ease transform, 0.2s ease background-color,
-      0.2s ease box-shadow;
-    overflow: hidden;
-    border-radius: 4px;
-  }
-
-  .check-div:before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    right: 0;
-    left: 0;
-    width: 12px;
-    height: 12px;
-    margin: 0 auto;
-    background-color: var(--background);
-    transform: translateY(-50%);
-    transition: 0.2s ease width, 0.2s ease height;
-    border-radius: 2px;
-  }
-
-  .check-div:active {
-    transform: translateY(-50%) scale(0.9);
-  }
-
-  .tick_mark {
-    position: absolute;
-    top: 50%;
-    left: 6px;
-    width: 5px;
-    height: 4px;
-    margin: 0 auto;
-    transform: rotateZ(-40deg);
-  }
-
-  .tick_mark:before,
-  .tick_mark:after {
-    content: "";
-    position: absolute;
-    background-color: var(--ink);
-    border-radius: 2px;
-    opacity: 0;
-    transition: 0.2s ease transform, 0.2s ease opacity;
-  }
-
-  .tick_mark:before {
-    left: 0;
-    bottom: 0;
-    width: 2px;
-    height: 6px;
-    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
-    transform: translateY(-68px);
-  }
-
-  .tick_mark:after {
-    left: 0;
-    bottom: 0;
-    width: 12px;
-    height: 2px;
-    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
-    transform: translateX(78px);
-  }
-
-  .checked {
-    background-color: var(--grey-2);
-  }
-
-  .checked:before {
-    width: 0;
-    height: 0;
-  }
-
-  .checked .tick_mark:before,
-  .checked .tick_mark:after {
-    transform: translate(0);
-    opacity: 1;
-  }
-</style>
diff --git a/packages/builder/src/components/common/ConfirmDialog.svelte b/packages/builder/src/components/common/ConfirmDialog.svelte
index 27a7517fce..33a1d86b88 100644
--- a/packages/builder/src/components/common/ConfirmDialog.svelte
+++ b/packages/builder/src/components/common/ConfirmDialog.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Modal, ModalContent } from "@budibase/bbui"
+  import { Modal, ModalContent, Body } from "@budibase/bbui"
 
   export let title = ""
   export let body = ""
@@ -20,15 +20,9 @@
 
 <Modal bind:this={modal} on:hide={onCancel}>
   <ModalContent onConfirm={onOk} {title} confirmText={okText} {cancelText} red>
-    <div class="body">
+    <Body size="S">
       {body}
       <slot />
-    </div>
+    </Body>
   </ModalContent>
 </Modal>
-
-<style>
-  .body {
-    font-size: var(--font-size-s);
-  }
-</style>
diff --git a/packages/builder/src/components/common/DatePicker.svelte b/packages/builder/src/components/common/DatePicker.svelte
deleted file mode 100644
index 9931ba56ef..0000000000
--- a/packages/builder/src/components/common/DatePicker.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-  import { DatePicker } from "@budibase/bbui"
-
-  export let label
-  export let value
-
-  function onChange(event) {
-    const [selectedDates] = event.detail
-    value = selectedDates[0]
-  }
-</script>
-
-<DatePicker {label} on:change={onChange} {value} />
diff --git a/packages/builder/src/components/common/DrawerBindableInput.svelte b/packages/builder/src/components/common/DrawerBindableInput.svelte
deleted file mode 100644
index e7723aba85..0000000000
--- a/packages/builder/src/components/common/DrawerBindableInput.svelte
+++ /dev/null
@@ -1,91 +0,0 @@
-<script>
-  import { Icon, Input, Drawer, Label, Body, Button } from "@budibase/bbui"
-  import {
-    readableToRuntimeBinding,
-    runtimeToReadableBinding,
-  } from "builderStore/dataBinding"
-  import BindingPanel from "components/design/PropertiesPanel/BindingPanel.svelte"
-  import { createEventDispatcher } from "svelte"
-  const dispatch = createEventDispatcher()
-
-  export let panel = BindingPanel
-  export let value = ""
-  export let bindings = []
-  export let thin = true
-  export let title = "Bindings"
-  export let placeholder
-  export let label
-
-  let bindingDrawer
-
-  $: tempValue = value
-  $: readableValue = runtimeToReadableBinding(bindings, value)
-
-  const handleClose = () => {
-    onChange(tempValue)
-    bindingDrawer.hide()
-  }
-
-  const onChange = value => {
-    dispatch("change", readableToRuntimeBinding(bindings, value))
-  }
-</script>
-
-<div class="control">
-  <Input
-    {label}
-    {thin}
-    value={readableValue}
-    on:change={event => onChange(event.target.value)}
-    {placeholder} />
-  <div class="icon" on:click={bindingDrawer.show}>
-    <Icon name="lightning" />
-  </div>
-</div>
-<Drawer bind:this={bindingDrawer} {title}>
-  <div slot="description">
-    <Body extraSmall grey>
-      Add the objects on the left to enrich your text.
-    </Body>
-  </div>
-  <heading slot="buttons">
-    <Button thin blue on:click={handleClose}>Save</Button>
-  </heading>
-  <div slot="body">
-    <svelte:component
-      this={panel}
-      value={readableValue}
-      close={handleClose}
-      on:update={event => (tempValue = event.detail)}
-      bindableProperties={bindings} />
-  </div>
-</Drawer>
-
-<style>
-  .control {
-    flex: 1;
-    position: relative;
-  }
-
-  .icon {
-    right: 2px;
-    bottom: 2px;
-    position: absolute;
-    align-items: center;
-    display: flex;
-    box-sizing: border-box;
-    padding-left: 7px;
-    border-left: 1px solid var(--grey-4);
-    background-color: var(--grey-2);
-    border-top-right-radius: var(--border-radius-m);
-    border-bottom-right-radius: var(--border-radius-m);
-    color: var(--grey-7);
-    font-size: 14px;
-    height: 40px;
-  }
-
-  .icon:hover {
-    color: var(--ink);
-    cursor: pointer;
-  }
-</style>
diff --git a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
index 64b7743645..451f98e8f0 100644
--- a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
+++ b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
@@ -44,7 +44,7 @@
 
   .title,
   .subtitle {
-    font-size: var(--font-size-xs);
+    font-size: var(--spectrum-global-dimension-font-size-75);
   }
 
   .title {
diff --git a/packages/builder/src/components/common/Dropzone.svelte b/packages/builder/src/components/common/Dropzone.svelte
index 0b98f2b256..328cd31f23 100644
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -1,16 +1,17 @@
 <script>
-  import { notifier } from "builderStore/store/notifications"
-  import { Dropzone } from "@budibase/bbui"
+  import { Dropzone, notifications } from "@budibase/bbui"
   import api from "builderStore/api"
 
-  export let files = []
+  export let value = []
+  export let label
 
   const BYTES_IN_MB = 1000000
 
   function handleFileTooLarge(fileSizeLimit) {
-    notifier.danger(
-      `Files cannot exceed ${fileSizeLimit /
-        BYTES_IN_MB}MB. Please try again with smaller files.`
+    notifications.error(
+      `Files cannot exceed ${
+        fileSizeLimit / BYTES_IN_MB
+      }MB. Please try again with smaller files.`
     )
   }
 
@@ -24,4 +25,10 @@
   }
 </script>
 
-<Dropzone bind:files {processFiles} {handleFileTooLarge} />
+<Dropzone
+  bind:value
+  {label}
+  {...$$restProps}
+  {processFiles}
+  {handleFileTooLarge}
+/>
diff --git a/packages/builder/src/components/common/ErrorsBox.svelte b/packages/builder/src/components/common/ErrorsBox.svelte
index f05e03f596..d406112e7d 100644
--- a/packages/builder/src/components/common/ErrorsBox.svelte
+++ b/packages/builder/src/components/common/ErrorsBox.svelte
@@ -7,7 +7,7 @@
 {#if hasErrors}
   <div class="container">
     {#each errors as error}
-      <div class="error">{error.dataPath || ''} {error.message}</div>
+      <div class="error">{error.dataPath || ""} {error.message}</div>
     {/each}
   </div>
 {/if}
diff --git a/packages/builder/src/components/common/Icons/Add.svelte b/packages/builder/src/components/common/Icons/Add.svelte
index 89b3e21b4f..1c7338886b 100644
--- a/packages/builder/src/components/common/Icons/Add.svelte
+++ b/packages/builder/src/components/common/Icons/Add.svelte
@@ -2,7 +2,8 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="100%"
-  height="100%">
+  height="100%"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Apps.svelte b/packages/builder/src/components/common/Icons/Apps.svelte
index 270acefe8b..1037406fac 100644
--- a/packages/builder/src/components/common/Icons/Apps.svelte
+++ b/packages/builder/src/components/common/Icons/Apps.svelte
@@ -2,11 +2,13 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M7 11.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0 10a4.5 4.5 0 1 1 0-9 4.5
     4.5 0 0 1 0 9zm10-10a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0 10a4.5 4.5 0 1 1
     0-9 4.5 4.5 0 0 1 0 9z"
-    fill="rgba(128,129,146,1)" />
+    fill="rgba(128,129,146,1)"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/ArrowDown.svelte b/packages/builder/src/components/common/Icons/ArrowDown.svelte
index bc1bfd2363..e9e6adfb90 100644
--- a/packages/builder/src/components/common/Icons/ArrowDown.svelte
+++ b/packages/builder/src/components/common/Icons/ArrowDown.svelte
@@ -2,9 +2,11 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="100%"
-  height="100%">
+  height="100%"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
-    d="M12 15l-4.243-4.243 1.415-1.414L12 12.172l2.828-2.829 1.415 1.414z" />
+    d="M12 15l-4.243-4.243 1.415-1.414L12 12.172l2.828-2.829 1.415 1.414z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Bug.svelte b/packages/builder/src/components/common/Icons/Bug.svelte
index 027c4c4b70..47c1e4d658 100644
--- a/packages/builder/src/components/common/Icons/Bug.svelte
+++ b/packages/builder/src/components/common/Icons/Bug.svelte
@@ -2,7 +2,8 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M5.07 16A7.06 7.06 0 0 1 5
@@ -11,5 +12,6 @@
     0l1.683-1.684 1.415 1.415-1.05 1.05A7.03 7.03 0 0 1 18.326
     8H21v2h-2.07c.046.327.07.66.07 1v1h2v2h-2v1c0 .34-.024.673-.07
     1H21v2h-2.674a7 7 0 0 1-12.652 0H3v-2h2.07zM9 10v2h6v-2H9zm0 4v2h6v-2H9z"
-    fill="rgba(128,129,146,1)" />
+    fill="rgba(128,129,146,1)"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Check.svelte b/packages/builder/src/components/common/Icons/Check.svelte
index 8293996bc9..6fa2f1bcea 100644
--- a/packages/builder/src/components/common/Icons/Check.svelte
+++ b/packages/builder/src/components/common/Icons/Check.svelte
@@ -2,9 +2,11 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="100%"
-  height="100%">
+  height="100%"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
-    d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" />
+    d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/ChevronDown.svelte b/packages/builder/src/components/common/Icons/ChevronDown.svelte
index 6300702ae9..41b3428953 100644
--- a/packages/builder/src/components/common/Icons/ChevronDown.svelte
+++ b/packages/builder/src/components/common/Icons/ChevronDown.svelte
@@ -2,9 +2,11 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="100%"
-  height="100%">
+  height="100%"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
-    d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
+    d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/ChevronUp.svelte b/packages/builder/src/components/common/Icons/ChevronUp.svelte
index fcdd07176b..d9cb5ef159 100644
--- a/packages/builder/src/components/common/Icons/ChevronUp.svelte
+++ b/packages/builder/src/components/common/Icons/ChevronUp.svelte
@@ -2,9 +2,11 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="100%"
-  height="100%">
+  height="100%"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
-    d="M12 10.828l-4.95 4.95-1.414-1.414L12 8l6.364 6.364-1.414 1.414z" />
+    d="M12 10.828l-4.95 4.95-1.414-1.414L12 8l6.364 6.364-1.414 1.414z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Close.svelte b/packages/builder/src/components/common/Icons/Close.svelte
index b6cacd076c..2a68781a38 100644
--- a/packages/builder/src/components/common/Icons/Close.svelte
+++ b/packages/builder/src/components/common/Icons/Close.svelte
@@ -2,9 +2,11 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414
-    1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
+    1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/CloseCircle.svelte b/packages/builder/src/components/common/Icons/CloseCircle.svelte
index cdad65f422..808fa3906d 100644
--- a/packages/builder/src/components/common/Icons/CloseCircle.svelte
+++ b/packages/builder/src/components/common/Icons/CloseCircle.svelte
@@ -2,11 +2,13 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10
     10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12
-    13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z" />
+    13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Community.svelte b/packages/builder/src/components/common/Icons/Community.svelte
index ca4b8792c9..8b5914753d 100644
--- a/packages/builder/src/components/common/Icons/Community.svelte
+++ b/packages/builder/src/components/common/Icons/Community.svelte
@@ -2,7 +2,8 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M12 11a5 5 0 0 1 5 5v6H7v-6a5 5 0 0 1 5-5zm-6.712 3.006a6.983 6.983 0 0
@@ -10,5 +11,6 @@
     3.501 0 0 1 22 17.5V22h-3v-6c0-.693-.1-1.362-.288-1.994zM5.5 8a2.5 2.5 0 1 1
     0 5 2.5 2.5 0 0 1 0-5zm13 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM12 2a4 4 0
     1 1 0 8 4 4 0 0 1 0-8z"
-    fill="rgba(128,129,146,1)" />
+    fill="rgba(128,129,146,1)"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Contribution.svelte b/packages/builder/src/components/common/Icons/Contribution.svelte
index faa7560167..4d22b1539a 100644
--- a/packages/builder/src/components/common/Icons/Contribution.svelte
+++ b/packages/builder/src/components/common/Icons/Contribution.svelte
@@ -2,7 +2,8 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M14.121 10.48a1 1 0 0 0-1.414 0l-.707.706a2 2 0 1
@@ -10,5 +11,6 @@
     2.135-4.95-4.95zM3.161 4.468a6.503 6.503 0 0 1 8.009-.938L7.757 6.944a4 4 0
     0 0 5.513 5.794l.144-.137 4.243 4.242-4.243 4.243a2 2 0 0 1-2.828 0L3.16
     13.66a6.5 6.5 0 0 1 0-9.192z"
-    fill="rgba(128,129,146,1)" />
+    fill="rgba(128,129,146,1)"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Copy.svelte b/packages/builder/src/components/common/Icons/Copy.svelte
index eb37af47cc..e5571272ab 100644
--- a/packages/builder/src/components/common/Icons/Copy.svelte
+++ b/packages/builder/src/components/common/Icons/Copy.svelte
@@ -2,11 +2,13 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="100%"
-  height="100%">
+  height="100%"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45
     1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003
-    8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z" />
+    8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Documentation.svelte b/packages/builder/src/components/common/Icons/Documentation.svelte
index 56481ab385..3148a0e2d0 100644
--- a/packages/builder/src/components/common/Icons/Documentation.svelte
+++ b/packages/builder/src/components/common/Icons/Documentation.svelte
@@ -2,10 +2,12 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M20 22H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1
     1zM8 7v2h8V7H8zm0 4v2h8v-2H8zm0 4v2h5v-2H8z"
-    fill="rgba(128,129,146,1)" />
+    fill="rgba(128,129,146,1)"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/DownArrow.svelte b/packages/builder/src/components/common/Icons/DownArrow.svelte
index 708de09276..4fbff83dc6 100644
--- a/packages/builder/src/components/common/Icons/DownArrow.svelte
+++ b/packages/builder/src/components/common/Icons/DownArrow.svelte
@@ -2,7 +2,8 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="100%"
-  height="100%">
+  height="100%"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path fill="rgba(0,3,51,1)" d="M12 14l-4-4h8z" />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Email.svelte b/packages/builder/src/components/common/Icons/Email.svelte
index 8a88818192..e8a48ea3d6 100644
--- a/packages/builder/src/components/common/Icons/Email.svelte
+++ b/packages/builder/src/components/common/Icons/Email.svelte
@@ -2,11 +2,13 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1
     1-1zm9.06 8.683L5.648 6.238 4.353 7.762l7.72 6.555
     7.581-6.56-1.308-1.513-6.285 5.439z"
-    fill="rgba(128,129,146,1)" />
+    fill="rgba(128,129,146,1)"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Events.svelte b/packages/builder/src/components/common/Icons/Events.svelte
index b7d92481e3..5363aa7bf7 100644
--- a/packages/builder/src/components/common/Icons/Events.svelte
+++ b/packages/builder/src/components/common/Icons/Events.svelte
@@ -2,8 +2,10 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
-    d="M13 9h8L11 24v-9H4l9-15v9zm-2 2V7.22L7.532 13H13v4.394L17.263 11H11z" />
+    d="M13 9h8L11 24v-9H4l9-15v9zm-2 2V7.22L7.532 13H13v4.394L17.263 11H11z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Feedback.svelte b/packages/builder/src/components/common/Icons/Feedback.svelte
index e34415d612..7edf19d53f 100644
--- a/packages/builder/src/components/common/Icons/Feedback.svelte
+++ b/packages/builder/src/components/common/Icons/Feedback.svelte
@@ -2,10 +2,12 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M6.455 19L2 22.5V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1
-    1H6.455zM11 13v2h2v-2h-2zm0-6v5h2V7h-2z" />
+    1H6.455zM11 13v2h2v-2h-2zm0-6v5h2V7h-2z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Grid.svelte b/packages/builder/src/components/common/Icons/Grid.svelte
index 175ba0aa11..ee7df57b68 100644
--- a/packages/builder/src/components/common/Icons/Grid.svelte
+++ b/packages/builder/src/components/common/Icons/Grid.svelte
@@ -2,11 +2,13 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="100%"
-  height="100%">
+  height="100%"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M14 10v4h-4v-4h4zm2 0h5v4h-5v-4zm-2 11h-4v-5h4v5zm2 0v-5h5v4a1 1 0 0 1-1
     1h-4zM14 3v5h-4V3h4zm2 0h4a1 1 0 0 1 1 1v4h-5V3zm-8 7v4H3v-4h5zm0 11H4a1 1 0
-    0 1-1-1v-4h5v5zM8 3v5H3V4a1 1 0 0 1 1-1h4z" />
+    0 1-1-1v-4h5v5zM8 3v5H3V4a1 1 0 0 1 1-1h4z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Hosting.svelte b/packages/builder/src/components/common/Icons/Hosting.svelte
index 9511e4fe3c..9d9fd172ca 100644
--- a/packages/builder/src/components/common/Icons/Hosting.svelte
+++ b/packages/builder/src/components/common/Icons/Hosting.svelte
@@ -2,10 +2,12 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M7 20.981a6.5 6.5 0 0 1-2.936-12 8.001 8.001 0 0 1 15.872 0 6.5 6.5 0 0
     1-2.936 12V21H7v-.019zM13 13h3l-4-5-4 5h3v4h2v-4z"
-    fill="rgba(128,129,146,1)" />
+    fill="rgba(128,129,146,1)"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Image.svelte b/packages/builder/src/components/common/Icons/Image.svelte
index 698ef41213..49a11c747b 100644
--- a/packages/builder/src/components/common/Icons/Image.svelte
+++ b/packages/builder/src/components/common/Icons/Image.svelte
@@ -2,12 +2,14 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M4.828 21l-.02.02-.021-.02H2.992A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1
     2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H4.828zM20
     15V5H4v14L14 9l6 6zm0 2.828l-6-6L6.828 19H20v-1.172zM8 11a2 2 0 1 1 0-4 2 2
-    0 0 1 0 4z" />
+    0 0 1 0 4z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Info.svelte b/packages/builder/src/components/common/Icons/Info.svelte
index ea9779858d..18cc66f662 100644
--- a/packages/builder/src/components/common/Icons/Info.svelte
+++ b/packages/builder/src/components/common/Icons/Info.svelte
@@ -2,5 +2,6 @@
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10
-    10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z" />
+    10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Input.svelte b/packages/builder/src/components/common/Icons/Input.svelte
index 4a322bcc03..1aaee79201 100644
--- a/packages/builder/src/components/common/Icons/Input.svelte
+++ b/packages/builder/src/components/common/Icons/Input.svelte
@@ -2,11 +2,13 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M5 5v14h14V5H5zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1
     1 0 0 1 1-1zm5.869 12l-.82 2H6.833L11 7h2l4.167
-    10H14.95l-.82-2H9.87zm.82-2h2.622L12 9.8 10.689 13z" />
+    10H14.95l-.82-2H9.87zm.82-2h2.622L12 9.8 10.689 13z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/JavaScript.svelte b/packages/builder/src/components/common/Icons/JavaScript.svelte
index 9ccca99de3..dfecf2a48e 100644
--- a/packages/builder/src/components/common/Icons/JavaScript.svelte
+++ b/packages/builder/src/components/common/Icons/JavaScript.svelte
@@ -3,10 +3,12 @@
   height="20"
   viewBox="0 0 20 20"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <path
     d="M0.220001 0.220001H19.78V19.7802H0.220001V0.220001Z"
-    fill="#F0DB4F" />
+    fill="#F0DB4F"
+  />
   <path
     d="M18.1792 15.115C18.0359 14.2227 17.4541 13.4731 15.7305 12.7742C15.1317
     12.4991 14.4642 12.302 14.2653 11.8483C14.1947 11.5842 14.1853 11.4355 14.23
@@ -27,5 +29,6 @@
     8.07359 18.3539 9.05359 18.1289C9.6914 17.9431 10.2417 17.5583 10.5298
     16.9725C10.9464 16.2045 10.857 15.275 10.8533 14.2469C10.8626 12.5695
     10.8534 10.8925 10.8534 9.20985Z"
-    fill="#323330" />
+    fill="#323330"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Layout.svelte b/packages/builder/src/components/common/Icons/Layout.svelte
index 872c05af19..b80fe5c8cf 100644
--- a/packages/builder/src/components/common/Icons/Layout.svelte
+++ b/packages/builder/src/components/common/Icons/Layout.svelte
@@ -2,10 +2,12 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M21 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h16a1 1 0 0 1 1
-    1v16zM11 5H5v14h6V5zm8 8h-6v6h6v-6zm0-8h-6v6h6V5z" />
+    1v16zM11 5H5v14h6V5zm8 8h-6v6h6v-6zm0-8h-6v6h6V5z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/More.svelte b/packages/builder/src/components/common/Icons/More.svelte
index 1ec4139eae..e88ac6ba98 100644
--- a/packages/builder/src/components/common/Icons/More.svelte
+++ b/packages/builder/src/components/common/Icons/More.svelte
@@ -2,11 +2,13 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6
     12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21
     12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5
-    1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z" />
+    1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Paint.svelte b/packages/builder/src/components/common/Icons/Paint.svelte
index e6cbe60798..09582286cb 100644
--- a/packages/builder/src/components/common/Icons/Paint.svelte
+++ b/packages/builder/src/components/common/Icons/Paint.svelte
@@ -2,12 +2,14 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M19.228 18.732l1.768-1.768 1.767 1.768a2.5 2.5 0 1 1-3.535 0zM8.878
     1.08l11.314 11.313a1 1 0 0 1 0 1.415l-8.485 8.485a1 1 0 0 1-1.414
     0l-8.485-8.485a1 1 0 0 1 0-1.415l7.778-7.778-2.122-2.121L8.88 1.08zM11
-    6.03L3.929 13.1 11 20.173l7.071-7.071L11 6.029z" />
+    6.03L3.929 13.1 11 20.173l7.071-7.071L11 6.029z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Pencil.svelte b/packages/builder/src/components/common/Icons/Pencil.svelte
index eb24716838..46d51c5492 100644
--- a/packages/builder/src/components/common/Icons/Pencil.svelte
+++ b/packages/builder/src/components/common/Icons/Pencil.svelte
@@ -3,13 +3,15 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M15.728 9.686l-1.414-1.414L5
     17.586V19h1.414l9.314-9.314zm1.414-1.414l1.414-1.414-1.414-1.414-1.414 1.414
     1.414 1.414zM7.242 21H3v-4.243L16.435 3.322a1 1 0 0 1 1.414 0l2.829 2.829a1
-    1 0 0 1 0 1.414L7.243 21z" />
+    1 0 0 1 0 1.414L7.243 21z"
+  />
 </svg>
 
 <style>
diff --git a/packages/builder/src/components/common/Icons/Preview.svelte b/packages/builder/src/components/common/Icons/Preview.svelte
index b32fce951a..e45d715ba7 100644
--- a/packages/builder/src/components/common/Icons/Preview.svelte
+++ b/packages/builder/src/components/common/Icons/Preview.svelte
@@ -2,11 +2,13 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10
     10zM10.622 8.415a.4.4 0 00-.622.332v6.506a.4.4 0 00.622.332l4.879-3.252a.4.4
     0 000-.666l-4.88-3.252z"
-    fill="currentColor" />
+    fill="currentColor"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Settings.svelte b/packages/builder/src/components/common/Icons/Settings.svelte
index 1be6b326cb..15bf4424c5 100644
--- a/packages/builder/src/components/common/Icons/Settings.svelte
+++ b/packages/builder/src/components/common/Icons/Settings.svelte
@@ -2,7 +2,8 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
@@ -10,5 +11,6 @@
     1v3.686l2.607 2.607a1 1 0 0 1 0 1.414L20 15.314V19a1 1 0 0 1-1
     1h-3.686l-2.607 2.607a1 1 0 0 1-1.414 0L8.686 20H5a1 1 0 0
     1-1-1v-3.686l-2.607-2.607a1 1 0 0 1 0-1.414L4 8.686V5a1 1 0 0 1
-    1-1h3.686zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
+    1-1h3.686zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Shape.svelte b/packages/builder/src/components/common/Icons/Shape.svelte
index e3c4d08e2e..d95424f593 100644
--- a/packages/builder/src/components/common/Icons/Shape.svelte
+++ b/packages/builder/src/components/common/Icons/Shape.svelte
@@ -2,11 +2,13 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="100%"
-  height="100%">
+  height="100%"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M5 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm14 0a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0
     14a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM5 22a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM9
-    4h6v2H9V4zm0 14h6v2H9v-2zM4 9h2v6H4V9zm14 0h2v6h-2V9z" />
+    4h6v2H9V4zm0 14h6v2H9v-2zM4 9h2v6H4V9zm14 0h2v6h-2V9z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Terminal.svelte b/packages/builder/src/components/common/Icons/Terminal.svelte
index 4d3b6e3b5b..d77c2719ec 100644
--- a/packages/builder/src/components/common/Icons/Terminal.svelte
+++ b/packages/builder/src/components/common/Icons/Terminal.svelte
@@ -2,11 +2,13 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1
     2v14h16V5H4zm8 10h6v2h-6v-2zm-3.333-3L5.838 9.172l1.415-1.415L11.495
-    12l-4.242 4.243-1.415-1.415L8.667 12z" />
+    12l-4.242 4.243-1.415-1.415L8.667 12z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Tutorials.svelte b/packages/builder/src/components/common/Icons/Tutorials.svelte
index 169d6a8d45..67bbe61344 100644
--- a/packages/builder/src/components/common/Icons/Tutorials.svelte
+++ b/packages/builder/src/components/common/Icons/Tutorials.svelte
@@ -2,10 +2,12 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M13 16.938V19h5v2H6v-2h5v-2.062A8.001 8.001 0 0 1 4 9V3h16v6a8.001 8.001
     0 0 1-7 7.938zM1 5h2v4H1V5zm20 0h2v4h-2V5z"
-    fill="rgba(128,129,146,1)" />
+    fill="rgba(128,129,146,1)"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Twitter.svelte b/packages/builder/src/components/common/Icons/Twitter.svelte
index eaac6dc86b..50fe9df469 100644
--- a/packages/builder/src/components/common/Icons/Twitter.svelte
+++ b/packages/builder/src/components/common/Icons/Twitter.svelte
@@ -2,7 +2,8 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6
@@ -12,5 +13,6 @@
     4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191
     1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9
     0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z"
-    fill="rgba(128,129,146,1)" />
+    fill="rgba(128,129,146,1)"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Updates.svelte b/packages/builder/src/components/common/Icons/Updates.svelte
index b25555094d..18b89d306b 100644
--- a/packages/builder/src/components/common/Icons/Updates.svelte
+++ b/packages/builder/src/components/common/Icons/Updates.svelte
@@ -2,12 +2,14 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10
     10zm4.82-4.924A7 7 0 0 0 9.032 5.658l.975 1.755A5 5 0 0 1 17 12h-3l2.82
     5.076zm-1.852 1.266l-.975-1.755A5 5 0 0 1 7 12h3L7.18 6.924a7 7 0 0 0 7.788
     11.418z"
-    fill="rgba(128,129,146,1)" />
+    fill="rgba(128,129,146,1)"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/XCircle.svelte b/packages/builder/src/components/common/Icons/XCircle.svelte
index 77742e644a..a9433fb8c3 100644
--- a/packages/builder/src/components/common/Icons/XCircle.svelte
+++ b/packages/builder/src/components/common/Icons/XCircle.svelte
@@ -2,10 +2,12 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="100%"
-  height="100%">
+  height="100%"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414
-    1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
+    1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/LinkedRowSelector.svelte b/packages/builder/src/components/common/LinkedRowSelector.svelte
index 272d4fc4b7..080f09809d 100644
--- a/packages/builder/src/components/common/LinkedRowSelector.svelte
+++ b/packages/builder/src/components/common/LinkedRowSelector.svelte
@@ -39,30 +39,21 @@
     <b>{linkedTable.name}</b>
     table.
   </Label>
+{:else if schema.relationshipType === "one-to-many"}
+  <Select
+    value={linkedIds?.[0]}
+    options={rows}
+    getOptionLabel={getPrettyName}
+    getOptionValue={row => row._id}
+    on:change={e => (linkedIds = e.detail ? [e.detail] : [])}
+    {label}
+  />
 {:else}
-  {#if schema.relationshipType === 'one-to-many'}
-    <Select
-      thin
-      secondary
-      on:change={e => (linkedIds = e.target.value ? [e.target.value] : [])}
-      name={label}
-      {label}>
-      <option value="">Choose an option</option>
-      {#each rows as row}
-        <option selected={row._id === linkedIds[0]} value={row._id}>
-          {getPrettyName(row)}
-        </option>
-      {/each}
-    </Select>
-  {:else}
-    <Multiselect
-      secondary
-      bind:value={linkedIds}
-      {label}
-      placeholder="Choose some options">
-      {#each rows as row}
-        <option value={row._id}>{getPrettyName(row)}</option>
-      {/each}
-    </Multiselect>
-  {/if}
+  <Multiselect
+    bind:value={linkedIds}
+    {label}
+    options={rows}
+    getOptionLabel={getPrettyName}
+    getOptionValue={row => row._id}
+  />
 {/if}
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 0f000d7ca8..ab100b7e8b 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { Icon } from "@budibase/bbui"
+
   export let icon
   export let withArrow = false
   export let withActions = true
@@ -22,17 +24,20 @@
   on:drop
   on:click
   ondragover="return false"
-  ondragenter="return false">
+  ondragenter="return false"
+>
   <div class="content">
     {#if withArrow}
       <div class:opened class="icon arrow">
-        <i class="ri-arrow-right-s-line" />
+        <Icon size="S" name="ChevronRight" />
       </div>
     {/if}
 
     <slot name="icon" />
     {#if icon}
-      <div class="icon"><i class={icon} /></div>
+      <div class="icon">
+        <Icon size="S" name={icon} />
+      </div>
     {/if}
     <div class="text">{text}</div>
     {#if withActions}
@@ -45,27 +50,22 @@
 
 <style>
   .nav-item {
+    border-radius: var(--border-radius-s);
     cursor: pointer;
     color: var(--grey-7);
-  }
-  .nav-item.border {
-    border-top: 1px solid var(--grey-1);
+    transition: background-color
+      var(--spectrum-global-animation-duration-100, 130ms) ease-in-out;
   }
   .nav-item.selected {
     background-color: var(--grey-2);
     color: var(--ink);
   }
   .nav-item:hover {
-    background-color: var(--grey-1);
+    background-color: var(--grey-3);
   }
   .nav-item:hover .actions {
-    display: flex;
     visibility: visible;
   }
-  .nav-item:hover,
-  .nav-item.selected {
-    border-radius: var(--border-radius-s);
-  }
 
   .content {
     padding: 0 var(--spacing-s);
@@ -99,7 +99,7 @@
   .text {
     flex: 1 1 auto;
     font-weight: 500;
-    font-size: var(--font-size-xs);
+    font-size: var(--spectrum-global-dimension-font-size-75);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/packages/builder/src/components/common/Notification/NotificationDisplay.svelte b/packages/builder/src/components/common/Notification/NotificationDisplay.svelte
deleted file mode 100644
index 2a89426ca8..0000000000
--- a/packages/builder/src/components/common/Notification/NotificationDisplay.svelte
+++ /dev/null
@@ -1,70 +0,0 @@
-<script>
-  import { notificationStore } from "builderStore/store/notifications"
-  import { flip } from "svelte/animate"
-  import { fly } from "svelte/transition"
-
-  export let themes = {
-    danger: "#E26D69",
-    success: "#84C991",
-    warning: "#f0ad4e",
-    info: "#5bc0de",
-    default: "#aaaaaa",
-  }
-
-  export let timeout = 3000
-
-  $: if ($notificationStore.notifications.length) {
-    setTimeout(() => {
-      notificationStore.update(state => {
-        state.notifications.shift()
-        state.notifications = state.notifications
-        return state
-      })
-    }, timeout)
-  }
-</script>
-
-<div class="notifications">
-  {#each $notificationStore.notifications as notification (notification.id)}
-    <div
-      animate:flip
-      class="toast"
-      style="background: {themes[notification.type]};"
-      transition:fly={{ y: -30 }}>
-      <div class="content">{notification.message}</div>
-      {#if notification.icon}<i class={notification.icon} />{/if}
-    </div>
-  {/each}
-</div>
-
-<style>
-  .notifications {
-    position: fixed;
-    top: 10px;
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-    padding: 0;
-    z-index: 9999;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    pointer-events: none;
-  }
-
-  .toast {
-    flex: 0 0 auto;
-    margin-bottom: 10px;
-    border-radius: var(--border-radius-s);
-    /* The toasts now support being auto sized, so this static width could be removed */
-    width: 40vw;
-  }
-
-  .content {
-    padding: 10px;
-    display: block;
-    color: white;
-    font-weight: 500;
-  }
-</style>
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
new file mode 100644
index 0000000000..9576f7526f
--- /dev/null
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -0,0 +1,197 @@
+<script>
+  import groupBy from "lodash/fp/groupBy"
+  import {
+    Search,
+    TextArea,
+    Heading,
+    Label,
+    DrawerContent,
+    Layout,
+  } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { isValid } from "@budibase/string-templates"
+  import {
+    getBindableProperties,
+    readableToRuntimeBinding,
+  } from "builderStore/dataBinding"
+  import { currentAsset, store } from "../../../builderStore"
+  import { handlebarsCompletions } from "constants/completions"
+  import { addToText } from "./utils"
+
+  const dispatch = createEventDispatcher()
+
+  export let bindableProperties
+  export let value = ""
+  export let bindingDrawer
+  export let valid = true
+
+  let originalValue = value
+  let helpers = handlebarsCompletions()
+  let getCaretPosition
+  let search = ""
+
+  $: value && checkValid()
+  $: bindableProperties = getBindableProperties(
+    $currentAsset,
+    $store.selectedComponentId
+  )
+  $: dispatch("update", value)
+  $: ({ instance, context } = groupBy("type", bindableProperties))
+  $: searchRgx = new RegExp(search, "ig")
+
+  function checkValid() {
+    // TODO: need to convert the value to the runtime binding
+    const runtimeBinding = readableToRuntimeBinding(bindableProperties, value)
+    valid = isValid(runtimeBinding)
+  }
+
+  export function cancel() {
+    dispatch("update", originalValue)
+    bindingDrawer.close()
+  }
+</script>
+
+<DrawerContent>
+  <svelte:fragment slot="sidebar">
+    <Layout>
+      <Search placeholder="Search" bind:value={search} />
+      {#if context}
+        <section>
+          <Heading size="XS">Columns</Heading>
+          <ul>
+            {#each context.filter(context =>
+              context.readableBinding.match(searchRgx)
+            ) as { readableBinding }}
+              <li
+                on:click={() => {
+                  value = addToText(value, getCaretPosition(), readableBinding)
+                }}
+              >
+                {readableBinding}
+              </li>
+            {/each}
+          </ul>
+        </section>
+      {/if}
+      {#if instance}
+        <section>
+          <Heading size="XS">Components</Heading>
+          <ul>
+            {#each instance.filter(instance =>
+              instance.readableBinding.match(searchRgx)
+            ) as { readableBinding }}
+              <li on:click={() => addToText(readableBinding)}>
+                {readableBinding}
+              </li>
+            {/each}
+          </ul>
+        </section>
+      {/if}
+      <section>
+        <Heading size="XS">Helpers</Heading>
+        <ul>
+          {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
+            <li
+              on:click={() => {
+                value = addToText(value, getCaretPosition(), helper.text)
+              }}
+            >
+              <div>
+                <Label extraSmall>{helper.displayText}</Label>
+                <div class="description">
+                  {@html helper.description}
+                </div>
+                <pre>{helper.example || ''}</pre>
+              </div>
+            </li>
+          {/each}
+        </ul>
+      </section>
+    </Layout>
+  </svelte:fragment>
+  <div class="main">
+    <TextArea
+      bind:getCaretPosition
+      bind:value
+      placeholder="Add text, or click the objects on the left to add them to the textbox."
+    />
+    {#if !valid}
+      <p class="syntax-error">
+        Current Handlebars syntax is invalid, please check the guide
+        <a href="https://handlebarsjs.com/guide/">here</a>
+        for more details.
+      </p>
+    {/if}
+  </div>
+</DrawerContent>
+
+<style>
+  .main {
+    padding: var(--spacing-m);
+  }
+
+  .main :global(textarea) {
+    min-height: 150px !important;
+  }
+
+  section {
+    display: grid;
+    grid-gap: var(--spacing-s);
+  }
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    display: flex;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-s);
+    color: var(--grey-7);
+    padding: var(--spacing-m);
+    margin: auto 0px;
+    align-items: center;
+    cursor: pointer;
+    border-top: var(--border-light);
+    border-width: 1px 0 1px 0;
+    border-radius: 4px;
+  }
+
+  pre,
+  .description {
+    white-space: normal;
+  }
+
+  li:hover {
+    background-color: var(--grey-2);
+    cursor: pointer;
+  }
+
+  li:active {
+    color: var(--blue);
+  }
+
+  .syntax-error {
+    padding-top: var(--spacing-m);
+    color: var(--red);
+    font-size: 12px;
+  }
+
+  .syntax-error a {
+    color: var(--red);
+    text-decoration: underline;
+  }
+
+  .description :global(p) {
+    color: var(--grey-7);
+  }
+
+  .description :global(p:hover) {
+    color: var(--ink);
+  }
+
+  .description :global(p a) {
+    color: var(--grey-7);
+  }
+</style>
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
new file mode 100644
index 0000000000..cc8182cb2e
--- /dev/null
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -0,0 +1,92 @@
+<script>
+  import { Icon, Input, Drawer, Button } from "@budibase/bbui"
+  import {
+    readableToRuntimeBinding,
+    runtimeToReadableBinding,
+  } from "builderStore/dataBinding"
+  import BindingPanel from "components/common/bindings/BindingPanel.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let panel = BindingPanel
+  export let value = ""
+  export let bindings = []
+  export let title = "Bindings"
+  export let placeholder
+  export let label
+
+  const dispatch = createEventDispatcher()
+  let bindingDrawer
+  $: tempValue = value
+  $: readableValue = runtimeToReadableBinding(bindings, value)
+
+  const handleClose = () => {
+    onChange(tempValue)
+    bindingDrawer.hide()
+  }
+
+  const onChange = value => {
+    dispatch("change", readableToRuntimeBinding(bindings, value))
+  }
+</script>
+
+<div class="control">
+  <Input
+    {label}
+    value={readableValue}
+    on:change={event => onChange(event.detail)}
+    {placeholder}
+  />
+  <div class="icon" on:click={bindingDrawer.show}>
+    <Icon size="S" name="FlashOn" />
+  </div>
+</div>
+<Drawer bind:this={bindingDrawer} {title}>
+  <svelte:fragment slot="description">
+    Add the objects on the left to enrich your text.
+  </svelte:fragment>
+  <Button cta slot="buttons" on:click={handleClose}>Save</Button>
+  <svelte:component
+    this={panel}
+    slot="body"
+    value={readableValue}
+    close={handleClose}
+    on:update={event => (tempValue = event.detail)}
+    bindableProperties={bindings}
+  />
+</Drawer>
+
+<style>
+  .control {
+    flex: 1;
+    position: relative;
+  }
+
+  .icon {
+    right: 1px;
+    bottom: 1px;
+    position: absolute;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    box-sizing: border-box;
+    border-left: 1px solid var(--spectrum-alias-border-color);
+    border-top-right-radius: var(--spectrum-alias-border-radius-regular);
+    border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
+    width: 31px;
+    color: var(--spectrum-alias-text-color);
+    background-color: var(--spectrum-global-color-gray-75);
+    transition: background-color
+        var(--spectrum-global-animation-duration-100, 130ms),
+      box-shadow var(--spectrum-global-animation-duration-100, 130ms),
+      border-color var(--spectrum-global-animation-duration-100, 130ms);
+    height: calc(var(--spectrum-alias-item-height-m) - 2px);
+  }
+
+  .icon:hover {
+    cursor: pointer;
+    color: var(--spectrum-alias-text-color-hover);
+    background-color: var(--spectrum-global-color-gray-50);
+    border-color: var(--spectrum-alias-border-color-hover);
+  }
+</style>
diff --git a/packages/builder/src/components/common/bindings/ModalBindableInput.svelte b/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
new file mode 100644
index 0000000000..e2d2a2741e
--- /dev/null
+++ b/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
@@ -0,0 +1,103 @@
+<script>
+  import { Icon, Input, Modal, Body, ModalContent } from "@budibase/bbui"
+  import {
+    readableToRuntimeBinding,
+    runtimeToReadableBinding,
+  } from "builderStore/dataBinding"
+  import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
+  import { createEventDispatcher } from "svelte"
+  const dispatch = createEventDispatcher()
+
+  export let panel = ServerBindingPanel
+  export let value = ""
+  export let bindings = []
+  export let thin = true
+  export let title = "Bindings"
+  export let placeholder
+  export let label
+
+  let bindingModal
+  let validity = true
+
+  $: readableValue = runtimeToReadableBinding(bindings, value)
+  $: tempValue = readableValue
+  $: invalid = !validity
+
+  const saveBinding = () => {
+    onChange(tempValue)
+    bindingModal.hide()
+  }
+
+  const onChange = input => {
+    dispatch("change", readableToRuntimeBinding(bindings, input))
+  }
+</script>
+
+<div class="control">
+  <Input
+    {label}
+    {thin}
+    value={readableValue}
+    on:change={event => onChange(event.target.value)}
+    {placeholder}
+  />
+  <div class="icon" on:click={bindingModal.show}>
+    <Icon size="S" name="FlashOn" />
+  </div>
+</div>
+<Modal bind:this={bindingModal}>
+  <ModalContent
+    {title}
+    onConfirm={saveBinding}
+    bind:disabled={invalid}
+    size="XL"
+  >
+    <Body extraSmall grey>
+      Add the objects on the left to enrich your text.
+    </Body>
+    <svelte:component
+      this={panel}
+      serverSide
+      value={readableValue}
+      bind:validity
+      on:update={event => (tempValue = event.detail)}
+      bindableProperties={bindings}
+    />
+  </ModalContent>
+</Modal>
+
+<style>
+  .control {
+    flex: 1;
+    position: relative;
+  }
+
+  .icon {
+    right: 1px;
+    bottom: 1px;
+    position: absolute;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    box-sizing: border-box;
+    border-left: 1px solid var(--spectrum-alias-border-color);
+    border-top-right-radius: var(--spectrum-alias-border-radius-regular);
+    border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
+    width: 31px;
+    color: var(--spectrum-alias-text-color);
+    background-color: var(--spectrum-global-color-gray-75);
+    transition: background-color
+        var(--spectrum-global-animation-duration-100, 130ms),
+      box-shadow var(--spectrum-global-animation-duration-100, 130ms),
+      border-color var(--spectrum-global-animation-duration-100, 130ms);
+    height: calc(var(--spectrum-alias-item-height-m) - 2px);
+  }
+
+  .icon:hover {
+    cursor: pointer;
+    color: var(--spectrum-alias-text-color-hover);
+    background-color: var(--spectrum-global-color-gray-50);
+    border-color: var(--spectrum-alias-border-color-hover);
+  }
+</style>
diff --git a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
new file mode 100644
index 0000000000..cabc9c9dfb
--- /dev/null
+++ b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
@@ -0,0 +1,175 @@
+<script>
+  import groupBy from "lodash/fp/groupBy"
+  import {
+    Input,
+    TextArea,
+    Heading,
+    Layout,
+    DrawerContent,
+  } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { isValid } from "@budibase/string-templates"
+  import { handlebarsCompletions } from "constants/completions"
+  import { readableToRuntimeBinding } from "../../../builderStore/dataBinding"
+  import { addToText } from "./utils"
+
+  const dispatch = createEventDispatcher()
+
+  export let bindingContainer
+  export let bindableProperties = []
+  export let validity = true
+  export let value = ""
+
+  let hasReadable = bindableProperties[0].readableBinding != null
+  let helpers = handlebarsCompletions()
+  let getCaretPosition
+  let search = ""
+
+  $: categories = Object.entries(groupBy("category", bindableProperties))
+  $: value && checkValid()
+  $: dispatch("update", value)
+  $: searchRgx = new RegExp(search, "ig")
+
+  function checkValid() {
+    if (hasReadable) {
+      const runtime = readableToRuntimeBinding(bindableProperties, value)
+      validity = isValid(runtime)
+    } else {
+      validity = isValid(value)
+    }
+  }
+</script>
+
+<DrawerContent>
+  <div slot="sidebar" class="list">
+    <Layout>
+      <div class="section">
+        <Heading size="S">Available bindings</Heading>
+        <Input extraThin placeholder="Search" bind:value={search} />
+      </div>
+      <div class="section">
+        {#each categories as [categoryName, bindings]}
+          <Heading size="XS">{categoryName}</Heading>
+          {#each bindableProperties.filter(binding =>
+            binding.label.match(searchRgx)
+          ) as binding}
+            <div
+              class="binding"
+              on:click={() => {
+                value = addToText(value, getCaretPosition(), binding)
+              }}
+            >
+              <span class="binding__label">{binding.label}</span>
+              <span class="binding__type">{binding.type}</span>
+              <br />
+              <div class="binding__description">
+                {binding.description || ""}
+              </div>
+            </div>
+          {/each}
+        {/each}
+      </div>
+      <div class="section">
+        <Heading size="XS">Helpers</Heading>
+        {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
+          <div
+            class="binding"
+            on:click={() => {
+              value = addToText(value, getCaretPosition(), helper.text)
+            }}
+          >
+            <span class="binding__label">{helper.label}</span>
+            <br />
+            <div class="binding__description">
+              {@html helper.description || ""}
+            </div>
+            <pre>{helper.example || ""}</pre>
+          </div>
+        {/each}
+      </div>
+    </Layout>
+  </div>
+  <div class="text">
+    <TextArea
+      bind:getCaretPosition
+      bind:value
+      placeholder="Add text, or click the objects on the left to add them to the textbox."
+    />
+    {#if !validity}
+      <p class="syntax-error">
+        Current Handlebars syntax is invalid, please check the guide
+        <a href="https://handlebarsjs.com/guide/">here</a>
+        for more details.
+      </p>
+    {/if}
+  </div>
+</DrawerContent>
+
+<style>
+  .list {
+    grid-gap: var(--spacing-s);
+    border-right: var(--border-light);
+    overflow-y: auto;
+  }
+  .section {
+    display: grid;
+    grid-gap: var(--spacing-s);
+  }
+
+  .text {
+    padding: var(--spacing-l);
+    font-family: var(--font-sans);
+  }
+  .text :global(textarea) {
+    min-height: 150px !important;
+  }
+  .text :global(p) {
+    margin: 0;
+  }
+
+  .binding {
+    font-size: 12px;
+    border: var(--border-light);
+    border-width: 1px 0 0 0;
+    padding: var(--spacing-m) 0;
+    margin: auto 0;
+    align-items: center;
+    cursor: pointer;
+  }
+  .binding:hover {
+    background-color: var(--grey-2);
+    cursor: pointer;
+  }
+  .binding__label {
+    font-weight: 500;
+    text-transform: capitalize;
+  }
+  .binding__description {
+    color: var(--grey-8);
+    margin-top: 2px;
+    white-space: normal;
+  }
+
+  pre {
+    white-space: normal;
+  }
+
+  .binding__type {
+    font-family: monospace;
+    background-color: var(--grey-2);
+    border-radius: var(--border-radius-m);
+    padding: 2px;
+    margin-left: 2px;
+    font-weight: 500;
+  }
+
+  .syntax-error {
+    color: var(--red);
+    font-size: 12px;
+  }
+
+  .syntax-error a {
+    color: var(--red);
+    text-decoration: underline;
+  }
+</style>
diff --git a/packages/builder/src/components/common/bindings/utils.js b/packages/builder/src/components/common/bindings/utils.js
new file mode 100644
index 0000000000..79c496ce9f
--- /dev/null
+++ b/packages/builder/src/components/common/bindings/utils.js
@@ -0,0 +1,16 @@
+export function addToText(value, caretPos, binding) {
+  binding = typeof binding === "string" ? binding : binding.path
+  value = value == null ? "" : value
+  if (!value.includes("{{") && !value.includes("}}")) {
+    binding = `{{ ${binding} }}`
+  }
+  if (caretPos.start) {
+    value =
+      value.substring(0, caretPos.start) +
+      binding +
+      value.substring(caretPos.end, value.length)
+  } else {
+    value += binding
+  }
+  return value
+}
diff --git a/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte b/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte
index 01ab529432..67bf442b25 100644
--- a/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte
+++ b/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte
@@ -26,7 +26,8 @@
 <ModalContent
   title="Webhook Endpoints"
   confirmText="OK"
-  showCancelButton={false}>
+  showCancelButton={false}
+>
   <p>See below the list of deployed webhook URLs.</p>
   {#each webhookUrls as webhookUrl}
     <div>
@@ -37,12 +38,14 @@
   {#if webhookUrls.length === 0}
     <h5>No webhooks found.</h5>
   {/if}
-  <div slot="footer">
-    <a target="_blank" href="https://docs.budibase.com/automate/steps/triggers">
-      <i class="ri-information-line" />
-      <span>Learn about webhooks</span>
-    </a>
-  </div>
+  <a
+    slot="footer"
+    target="_blank"
+    href="https://docs.budibase.com/automate/steps/triggers"
+  >
+    <i class="ri-information-line" />
+    <span>Learn about webhooks</span>
+  </a>
 </ModalContent>
 
 <style>
diff --git a/packages/builder/src/components/deploy/DeploymentHistory.svelte b/packages/builder/src/components/deploy/DeploymentHistory.svelte
index 0933b1a676..fd098235be 100644
--- a/packages/builder/src/components/deploy/DeploymentHistory.svelte
+++ b/packages/builder/src/components/deploy/DeploymentHistory.svelte
@@ -4,7 +4,7 @@
   import { slide } from "svelte/transition"
   import { Heading, Body, Button, Modal, ModalContent } from "@budibase/bbui"
   import api from "builderStore/api"
-  import { notifier } from "builderStore/store/notifications"
+  import { notifications } from "@budibase/bbui"
   import CreateWebhookDeploymentModal from "./CreateWebhookDeploymentModal.svelte"
   import { store, hostingStore } from "builderStore"
 
@@ -75,7 +75,9 @@
     } catch (err) {
       console.error(err)
       clearInterval(poll)
-      notifier.danger("Error fetching deployment history. Please try again.")
+      notifications.error(
+        "Error fetching deployment history. Please try again."
+      )
     }
   }
 
@@ -96,7 +98,7 @@
 {#if deployments.length > 0}
   <section class="deployment-history" in:slide>
     <header>
-      <h4>Deployment History</h4>
+      <Heading>Deployment History</Heading>
       <div class="deploy-div">
         {#if deployments.some(deployment => deployment.status === DeploymentStatus.SUCCESS)}
           <a target="_blank" href={deploymentUrl}> View Your Deployed App → </a>
@@ -109,19 +111,20 @@
         <article class="deployment">
           <div class="deployment-info">
             <span class="deploy-date">
-              {formatDate(deployment.updatedAt, 'fullDate')}
+              {formatDate(deployment.updatedAt, "fullDate")}
             </span>
             <span class="deploy-time">
-              {formatDate(deployment.updatedAt, 'timeOnly')}
+              {formatDate(deployment.updatedAt, "timeOnly")}
             </span>
           </div>
           <div class="deployment-right">
-            {#if deployment.status.toLowerCase() === 'pending'}
+            {#if deployment.status.toLowerCase() === "pending"}
               <Spinner size="10" />
             {/if}
             <div
               on:click={() => showErrorReasonModal(deployment.err)}
-              class={`deployment-status ${deployment.status}`}>
+              class={`deployment-status ${deployment.status}`}
+            >
               <span>
                 {deployment.status}
                 {#if deployment.status === DeploymentStatus.FAILURE}
@@ -142,19 +145,20 @@
   <ModalContent
     title="Deployment Error"
     confirmText="OK"
-    showCancelButton={false}>
+    showCancelButton={false}
+  >
     {errorReason}
   </ModalContent>
 </Modal>
 
 <style>
-  .deployment:nth-child(odd) {
-    background: var(--grey-1);
+  section {
+    padding: var(--spacing-xl) 0;
   }
 
   .deployment-list {
     height: 40vh;
-    overflow-y: scroll;
+    overflow-y: auto;
   }
 
   h4 {
@@ -163,9 +167,10 @@
   }
 
   header {
-    margin-left: var(--spacing-l);
-    margin-bottom: var(--spacing-xl);
-    margin-right: var(--spacing-l);
+    padding-left: var(--spacing-l);
+    padding-bottom: var(--spacing-xl);
+    padding-right: var(--spacing-l);
+    border-bottom: var(--border-light);
   }
 
   .deploy-div {
@@ -183,10 +188,14 @@
 
   .deployment {
     padding: var(--spacing-l);
-    height: 100px;
+    height: 60px;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    border-bottom: var(--border-light);
+  }
+  .deployment:last-child {
+    border-bottom: none;
   }
 
   .deployment-info {
diff --git a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
index f167ff76a2..eb3fd549d8 100644
--- a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
@@ -1,22 +1,16 @@
 <script>
-  import { goto } from "@roxi/routify"
   import {
-    store,
-    currentAssetName,
-    selectedComponent,
-    currentAssetId,
-  } from "builderStore"
+    ActionMenu,
+    ActionGroup,
+    ActionButton,
+    MenuItem,
+    Icon,
+  } from "@budibase/bbui"
+  import { store, currentAssetName } from "builderStore"
   import structure from "./componentStructure.json"
-  import { DropdownMenu } from "@budibase/bbui"
-  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   $: enrichedStructure = enrichStructure(structure, $store.components)
 
-  let selectedIndex
-  let anchors = []
-  let popover
-  $: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
-
   const enrichStructure = (structure, definitions) => {
     let enrichedStructure = []
     structure.forEach(item => {
@@ -39,81 +33,68 @@
     return enrichedStructure
   }
 
-  const onItemChosen = async (item, idx) => {
-    if (item.isCategory) {
-      // Select and open this category
-      selectedIndex = idx
-      popover.show()
-    } else {
-      // Add this component
+  const onItemChosen = async item => {
+    if (!item.isCategory) {
       await store.actions.components.create(item.component)
-      popover.hide()
     }
   }
 </script>
 
-<div class="container">
-  {#each enrichedStructure as item, idx}
-    <div
-      bind:this={anchors[idx]}
-      class="category"
-      data-cy={item.isCategory ? `category-${item.name}` : `component-${item.name}`}
-      on:click={() => onItemChosen(item, idx)}
-      class:active={idx === selectedIndex}>
-      {#if item.icon}<i class={item.icon} />{/if}
-      <span>{item.name}</span>
-      {#if item.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
-    </div>
+<div class="components">
+  {#each enrichedStructure as item}
+    <ActionMenu disabled={!item.isCategory}>
+      <ActionButton
+        icon={item.icon}
+        quiet
+        size="S"
+        slot="control"
+        dataCy={`category-${item.name}`}
+        on:click={() => onItemChosen(item)}
+      >
+        <div class="buttonContent">
+          {item.name}
+          {#if item.isCategory}
+            <Icon size="S" name="ChevronDown" />
+          {/if}
+        </div>
+      </ActionButton>
+      {#each item.children || [] as item}
+        {#if !item.showOnAsset || item.showOnAsset.includes($currentAssetName)}
+          <MenuItem
+            dataCy={`component-${item.name}`}
+            icon={item.icon}
+            on:click={() => onItemChosen(item)}
+          >
+            {item.name}
+          </MenuItem>
+        {/if}
+      {/each}
+    </ActionMenu>
   {/each}
 </div>
-<DropdownMenu
-  on:close={() => (selectedIndex = null)}
-  bind:this={popover}
-  {anchor}
-  align="left">
-  <DropdownContainer>
-    {#each enrichedStructure[selectedIndex].children as item}
-      {#if !item.showOnAsset || item.showOnAsset.includes($currentAssetName)}
-        <DropdownItem
-          data-cy={`component-${item.name}`}
-          icon={item.icon}
-          title={item.name}
-          on:click={() => onItemChosen(item)} />
-      {/if}
-    {/each}
-  </DropdownContainer>
-</DropdownMenu>
 
 <style>
-  .container {
+  .components {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    min-height: 24px;
     flex-wrap: wrap;
-    gap: var(--spacing-l);
+    margin-top: -10px;
+  }
+  .components :global(> *) {
+    margin-top: 10px;
   }
 
-  .category {
-    color: var(--grey-7);
-    cursor: pointer;
+  .buttonContent {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-xs);
-    font-size: var(--font-size-xs);
+    align-items: flex-end;
   }
-  .category span {
-    font-weight: 500;
-    user-select: none;
-  }
-  .category.active,
-  .category:hover {
-    color: var(--ink);
-  }
-  .category i:not(:last-child) {
-    font-size: 16px;
+  .buttonContent :global(svg) {
+    margin-left: 2px !important;
+    margin-right: 0 !important;
+    margin-bottom: -1px;
   }
 </style>
diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index 267289a804..91f039fe68 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -7,7 +7,7 @@
   "search",
   {
     "name": "Form",
-    "icon": "ri-file-edit-line",
+    "icon": "Form",
     "children": [
       "form",
       "fieldgroup",
@@ -24,7 +24,7 @@
   },
   {
     "name": "Card",
-    "icon": "ri-archive-drawer-line",
+    "icon": "Card",
     "children": [
       "stackedlist",
       "card",
@@ -34,7 +34,7 @@
   },
   {
     "name": "Chart",
-    "icon": "ri-bar-chart-2-line",
+    "icon": "GraphBarVertical",
     "children": [
       "bar",
       "line",
@@ -46,7 +46,7 @@
   },
   {
     "name": "Elements",
-    "icon": "ri-paragraph",
+    "icon": "TextParagraph",
     "children": [
       "heading",
       "text",
@@ -59,7 +59,7 @@
   },
   {
     "name": "Other",
-    "icon": "ri-more-2-line",
+    "icon": "More",
     "children": [
       "screenslot",
       "navigation",
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
index 23d9d40228..7322be165f 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
@@ -3,23 +3,17 @@
   import { store, currentAsset } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { findComponentParent } from "builderStore/storeUtils"
-  import { DropdownMenu } from "@budibase/bbui"
-  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
+  import { ActionMenu, MenuItem, Icon } from "@budibase/bbui"
 
   export let component
 
   let confirmDeleteDialog
-  let dropdown
   let anchor
 
   $: definition = store.actions.components.getDefinition(component?._component)
   $: noChildrenAllowed = !component || !definition?.hasChildren
   $: noPaste = !$store.componentToPaste
 
-  const hideDropdown = () => {
-    dropdown.hide()
-  }
-
   const moveUpComponent = () => {
     const asset = get(currentAsset)
     const parent = findComponentParent(asset.props, component._id)
@@ -72,59 +66,55 @@
   }
 </script>
 
-<div bind:this={anchor} on:click|stopPropagation>
-  <div class="icon" on:click={dropdown.show}><i class="ri-more-line" /></div>
-  <DropdownMenu bind:this={dropdown} width="170px" {anchor} align="left">
-    <DropdownContainer on:click={hideDropdown}>
-      <DropdownItem
-        icon="ri-delete-bin-line"
-        title="Delete"
-        on:click={() => confirmDeleteDialog.show()} />
-      <DropdownItem
-        icon="ri-arrow-up-line"
-        title="Move up"
-        on:click={moveUpComponent} />
-      <DropdownItem
-        icon="ri-arrow-down-line"
-        title="Move down"
-        on:click={moveDownComponent} />
-      <DropdownItem
-        icon="ri-repeat-one-line"
-        title="Duplicate"
-        on:click={duplicateComponent} />
-      <DropdownItem
-        icon="ri-scissors-cut-line"
-        title="Cut"
-        on:click={() => storeComponentForCopy(true)} />
-      <DropdownItem
-        icon="ri-file-copy-line"
-        title="Copy"
-        on:click={() => storeComponentForCopy(false)} />
-      <hr class="hr-style" />
-      <DropdownItem
-        icon="ri-insert-row-top"
-        title="Paste above"
-        disabled={noPaste}
-        on:click={() => pasteComponent('above')} />
-      <DropdownItem
-        icon="ri-insert-row-bottom"
-        title="Paste below"
-        disabled={noPaste}
-        on:click={() => pasteComponent('below')} />
-      <DropdownItem
-        icon="ri-insert-column-right"
-        title="Paste inside"
-        disabled={noPaste || noChildrenAllowed}
-        on:click={() => pasteComponent('inside')} />
-    </DropdownContainer>
-  </DropdownMenu>
-</div>
+<ActionMenu>
+  <div slot="control" class="icon">
+    <Icon size="S" hoverable name="MoreSmallList" />
+  </div>
+  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
+  <MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}>
+    Move up
+  </MenuItem>
+  <MenuItem noClose icon="ChevronDown" on:click={moveDownComponent}>
+    Move down
+  </MenuItem>
+  <MenuItem noClose icon="Duplicate" on:click={duplicateComponent}>
+    Duplicate
+  </MenuItem>
+  <MenuItem icon="Cut" on:click={() => storeComponentForCopy(true)}>
+    Cut
+  </MenuItem>
+  <MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}>
+    Copy
+  </MenuItem>
+  <MenuItem
+    icon="LayersBringToFront"
+    on:click={() => pasteComponent("above")}
+    disabled={noPaste}
+  >
+    Paste above
+  </MenuItem>
+  <MenuItem
+    icon="LayersSendToBack"
+    on:click={() => pasteComponent("below")}
+    disabled={noPaste}
+  >
+    Paste below
+  </MenuItem>
+  <MenuItem
+    icon="ShowOneLayer"
+    on:click={() => pasteComponent("inside")}
+    disabled={noPaste || noChildrenAllowed}
+  >
+    Paste inside
+  </MenuItem>
+</ActionMenu>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   title="Confirm Deletion"
   body={`Are you sure you wish to delete this '${definition?.name}' component?`}
   okText="Delete Component"
-  onOk={deleteComponent} />
+  onOk={deleteComponent}
+/>
 
 <style>
   hr {
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
index bd912ca916..bc8d35722e 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
@@ -54,7 +54,8 @@
           ondragover="return false"
           ondragenter="return false"
           class="drop-item"
-          style="margin-left: {(level + 1) * 16}px" />
+          style="margin-left: {(level + 1) * 16}px"
+        />
       {/if}
 
       <NavItem
@@ -63,10 +64,13 @@
         on:dragstart={dragstart(component)}
         on:dragover={dragover(component, index)}
         on:drop={dragDropStore.actions.drop}
-        text={isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
+        text={isScreenslot(component._component)
+          ? "Screenslot"
+          : component._instanceName}
         withArrow
         indentLevel={level + 1}
-        selected={$store.selectedComponentId === component._id}>
+        selected={$store.selectedComponentId === component._id}
+      >
         <ComponentDropdownMenu {component} />
       </NavItem>
 
@@ -76,7 +80,8 @@
           {currentComponent}
           {onSelect}
           {dragDropStore}
-          level={level + 1} />
+          level={level + 1}
+        />
       {/if}
 
       {#if $dragDropStore?.targetComponent === component && ($dragDropStore.dropPosition === DropPosition.INSIDE || $dragDropStore.dropPosition === DropPosition.BELOW)}
@@ -85,7 +90,10 @@
           ondragover="return false"
           ondragenter="return false"
           class="drop-item"
-          style="margin-left: {(level + ($dragDropStore.dropPosition === DropPosition.INSIDE ? 3 : 1)) * 16}px" />
+          style="margin-left: {(level +
+            ($dragDropStore.dropPosition === DropPosition.INSIDE ? 3 : 1)) *
+            16}px"
+        />
       {/if}
     </li>
   {/each}
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
index 602e46b35b..3871880bf5 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
@@ -1,26 +1,29 @@
 <script>
-  import { goto } from "@roxi/routify"
   import { store } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
+  import { notifications } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { DropdownMenu, Modal, ModalContent, Input } from "@budibase/bbui"
-  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
+  import {
+    ActionMenu,
+    MenuItem,
+    Icon,
+    Modal,
+    ModalContent,
+    Input,
+  } from "@budibase/bbui"
   import { cloneDeep } from "lodash/fp"
 
   export let layout
 
   let confirmDeleteDialog
   let editLayoutNameModal
-  let dropdown
-  let anchor
   let name = layout.name
 
   const deleteLayout = async () => {
     try {
       await store.actions.layouts.delete(layout)
-      notifier.success(`Layout ${layout.name} deleted successfully.`)
+      notifications.success(`Layout ${layout.name} deleted successfully.`)
     } catch (err) {
-      notifier.danger(`Error deleting layout: ${err.message}`)
+      notifications.error(`Error deleting layout: ${err.message}`)
     }
   }
 
@@ -29,49 +32,36 @@
       const layoutToSave = cloneDeep(layout)
       layoutToSave.name = name
       await store.actions.layouts.save(layoutToSave)
-      notifier.success(`Layout saved successfully.`)
+      notifications.success(`Layout saved successfully.`)
     } catch (err) {
-      notifier.danger(`Error saving layout: ${err.message}`)
+      notifications.error(`Error saving layout: ${err.message}`)
     }
   }
 </script>
 
-<div bind:this={anchor} on:click|stopPropagation>
-  <div class="icon" on:click={() => dropdown.show()}>
-    <i class="ri-more-line" />
+<ActionMenu>
+  <div slot="control" class="icon">
+    <Icon size="S" hoverable name="MoreSmallList" />
   </div>
-  <DropdownMenu bind:this={dropdown} {anchor} align="left">
-    <DropdownContainer>
-      <DropdownItem
-        icon="ri-pencil-line"
-        title="Edit"
-        on:click={() => editLayoutNameModal.show()} />
-      <DropdownItem
-        icon="ri-delete-bin-line"
-        title="Delete"
-        on:click={() => confirmDeleteDialog.show()} />
-    </DropdownContainer>
-  </DropdownMenu>
-</div>
+  <MenuItem icon="Edit" on:click={editLayoutNameModal.show}>Edit</MenuItem>
+  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
+</ActionMenu>
+
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   title="Confirm Deletion"
-  body={'Are you sure you wish to delete this layout?'}
+  body={"Are you sure you wish to delete this layout?"}
   okText="Delete Layout"
-  onOk={deleteLayout} />
+  onOk={deleteLayout}
+/>
 
 <Modal bind:this={editLayoutNameModal}>
   <ModalContent
     title="Edit Layout Name"
     confirmText="Save"
     onConfirm={saveLayout}
-    disabled={!name}>
+    disabled={!name}
+  >
     <Input thin type="text" label="Name" bind:value={name} />
   </ModalContent>
 </Modal>
-
-<style>
-  .icon i {
-    font-size: 16px;
-  }
-</style>
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
index 5f98a2b9ed..c9ce885c3e 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
@@ -65,23 +65,25 @@
 
 {#if !noSearchMatch}
   <NavItem
-    icon="ri-folder-line"
+    icon="FolderOutline"
     text={path}
     on:click={toggleManuallyOpened}
     opened={routeOpened}
     {border}
-    withArrow={route.subpaths} />
+    withArrow={route.subpaths}
+  />
 
   {#if routeOpened}
     {#each filteredScreens as screen (screen.id)}
       <NavItem
-        icon="ri-artboard-2-line"
+        icon="WebPage"
         indentLevel={indent || 1}
         selected={$store.selectedScreenId === screen.id}
         opened={$store.selectedScreenId === screen.id}
         text={ROUTE_NAME_MAP[screen.route]?.[screen.role] || screen.route}
         withArrow={route.subpaths}
-        on:click={() => changeScreen(screen.id)}>
+        on:click={() => changeScreen(screen.id)}
+      >
         <ScreenDropdownMenu screenId={screen.id} />
       </NavItem>
       {#if selectedScreen?._id === screen.id}
@@ -89,7 +91,8 @@
           level={1}
           components={selectedScreen.props._children}
           currentComponent={$selectedComponent}
-          {dragDropStore} />
+          {dragDropStore}
+        />
       {/if}
     {/each}
   {/if}
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
index 54b1e96799..69491f2c57 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
@@ -1,16 +1,12 @@
 <script>
   import { goto } from "@roxi/routify"
   import { store, allScreens } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { DropdownMenu, Modal, ModalContent } from "@budibase/bbui"
-  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
+  import { ActionMenu, MenuItem, Icon, notifications } from "@budibase/bbui"
 
   export let screenId
 
   let confirmDeleteDialog
-  let dropdown
-  let anchor
 
   $: screen = $allScreens.find(screen => screen._id === screenId)
 
@@ -20,35 +16,24 @@
       store.actions.routing.fetch()
       confirmDeleteDialog.hide()
       $goto("../")
-      notifier.success("Deleted screen successfully.")
+      notifications.success("Deleted screen successfully.")
     } catch (err) {
-      notifier.danger("Error deleting screen")
+      notifications.error("Error deleting screen")
     }
   }
 </script>
 
-<div bind:this={anchor} on:click|stopPropagation>
-  <div class="icon" on:click={() => dropdown.show()}>
-    <i class="ri-more-line" />
+<ActionMenu>
+  <div slot="control" class="icon">
+    <Icon size="S" hoverable name="MoreSmallList" />
   </div>
-  <DropdownMenu bind:this={dropdown} {anchor} align="left">
-    <DropdownContainer>
-      <DropdownItem
-        icon="ri-delete-bin-line"
-        title="Delete"
-        on:click={() => confirmDeleteDialog.show()} />
-    </DropdownContainer>
-  </DropdownMenu>
-</div>
+  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
+</ActionMenu>
+
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   title="Confirm Deletion"
-  body={'Are you sure you wish to delete this screen?'}
+  body={"Are you sure you wish to delete this screen?"}
   okText="Delete Screen"
-  onOk={deleteScreen} />
-
-<style>
-  .icon i {
-    font-size: 16px;
-  }
-</style>
+  onOk={deleteScreen}
+/>
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/dragDropStore.js b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/dragDropStore.js
index 37c2f9867e..fed3361fec 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/dragDropStore.js
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/dragDropStore.js
@@ -13,7 +13,7 @@ export const DropPosition = {
   INSIDE: "inside",
 }
 
-export default function() {
+export default function () {
   const store = writable({})
 
   store.actions = {
diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
index 70e2306dcf..36e0d1661c 100644
--- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
@@ -8,12 +8,11 @@
     screenSearchString,
   } from "builderStore"
   import { roles } from "stores/backend"
-  import { FrontendTypes } from "constants"
   import ComponentNavigationTree from "components/design/NavigationPanel/ComponentNavigationTree/index.svelte"
   import Layout from "components/design/NavigationPanel/Layout.svelte"
   import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
   import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte"
-  import { Modal, Switcher, Select, Input } from "@budibase/bbui"
+  import { Icon, Modal, Select, Search, Tabs, Tab } from "@budibase/bbui"
 
   const tabs = [
     {
@@ -27,18 +26,15 @@
   ]
 
   let modal
-  let routes = {}
-  $: tab = $params.assetType
+  $: selected = tabs.find(t => t.key === $params.assetType)?.title || "Screens"
 
   const navigate = ({ detail }) => {
-    if (!detail) {
-      return
-    }
-    $goto(`../${detail.heading.key}`)
+    const { key } = tabs.find(t => t.title === detail)
+    $goto(`../${key}`)
   }
 
   const updateAccessRole = event => {
-    const role = event.target.value
+    const role = event.detail
 
     // Select a valid screen with this new role - otherwise we'll not be
     // able to change role at all because ComponentNavigationTree will kick us
@@ -68,53 +64,46 @@
 </script>
 
 <div class="title">
-  <Switcher headings={tabs} bind:value={tab} on:change={navigate}>
-    {#if tab === FrontendTypes.SCREEN}
-      <i
-        on:click={modal.show}
-        data-cy="new-screen"
-        class="ri-add-circle-fill" />
-      <div class="role-select">
-        <Select
-          extraThin
-          secondary
-          on:change={updateAccessRole}
-          value={$selectedAccessRole}
-          label="Filter by Access">
-          {#each $roles as role}
-            <option value={role._id}>{role.name}</option>
-          {/each}
-        </Select>
-        <div class="search-screens">
-          <Input
-            extraThin
+  <Tabs {selected} on:select={navigate}>
+    <Tab title="Screens">
+      <div class="tab-content-padding">
+        <div class="role-select">
+          <Select
+            on:change={updateAccessRole}
+            value={$selectedAccessRole}
+            label="Filter by Access"
+            getOptionLabel={role => role.name}
+            getOptionValue={role => role._id}
+            options={$roles}
+          />
+          <Search
             placeholder="Enter a route to search"
             label="Search Screens"
-            bind:value={$screenSearchString} />
-          <i
-            class="ri-close-line"
-            on:click={() => ($screenSearchString = null)} />
+            bind:value={$screenSearchString}
+          />
         </div>
+        <div class="nav-items-container">
+          <ComponentNavigationTree />
+        </div>
+        <Modal bind:this={modal}>
+          <NewScreenModal />
+        </Modal>
       </div>
-      <div class="nav-items-container">
-        <ComponentNavigationTree />
+    </Tab>
+    <Tab title="Layouts">
+      <div class="tab-content-padding">
+        {#each $store.layouts as layout, idx (layout._id)}
+          <Layout {layout} border={idx > 0} />
+        {/each}
+        <Modal bind:this={modal}>
+          <NewLayoutModal />
+        </Modal>
       </div>
-      <Modal bind:this={modal}>
-        <NewScreenModal />
-      </Modal>
-    {:else if tab === FrontendTypes.LAYOUT}
-      <i
-        on:click={modal.show}
-        data-cy="new-layout"
-        class="ri-add-circle-fill" />
-      {#each $store.layouts as layout, idx (layout._id)}
-        <Layout {layout} border={idx > 0} />
-      {/each}
-      <Modal bind:this={modal}>
-        <NewLayoutModal />
-      </Modal>
-    {/if}
-  </Switcher>
+    </Tab>
+  </Tabs>
+  <div class="add-button">
+    <Icon hoverable name="AddCircle" on:click={modal.show} />
+  </div>
 </div>
 
 <style>
@@ -125,11 +114,10 @@
     align-items: stretch;
     position: relative;
   }
-  .title i {
-    font-size: 20px;
+  .add-button {
     position: absolute;
-    top: 0;
-    right: 0;
+    top: var(--spacing-l);
+    right: var(--spacing-xl);
   }
   .title i:hover {
     cursor: pointer;
@@ -145,22 +133,7 @@
     gap: var(--spacing-m);
   }
 
-  .search-screens {
-    position: relative;
-  }
-  .search-screens i {
-    right: 2px;
-    bottom: 2px;
-    position: absolute;
-    box-sizing: border-box;
-    padding: var(--spacing-s);
-    border-left: 1px solid var(--grey-4);
-    background-color: var(--grey-2);
-    border-top-right-radius: var(--border-radius-m);
-    border-bottom-right-radius: var(--border-radius-m);
-    color: var(--grey-7);
-    font-size: 14px;
-    line-height: 15px;
-    top: auto;
+  .tab-content-padding {
+    padding: 0 var(--spacing-xl);
   }
 </style>
diff --git a/packages/builder/src/components/design/NavigationPanel/Layout.svelte b/packages/builder/src/components/design/NavigationPanel/Layout.svelte
index b63b14ce39..d3c89fc9e5 100644
--- a/packages/builder/src/components/design/NavigationPanel/Layout.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/Layout.svelte
@@ -1,20 +1,13 @@
 <script>
-  import { goto } from "@roxi/routify"
-  import { FrontendTypes } from "constants"
   import ComponentTree from "./ComponentNavigationTree/ComponentTree.svelte"
   import LayoutDropdownMenu from "./ComponentNavigationTree/LayoutDropdownMenu.svelte"
   import initDragDropStore from "./ComponentNavigationTree/dragDropStore"
   import NavItem from "components/common/NavItem.svelte"
-  import { last } from "lodash/fp"
-  import { store, currentAsset, selectedComponent } from "builderStore"
-  import { writable } from "svelte/store"
+  import { store, selectedComponent } from "builderStore"
 
   export let layout
   export let border
 
-  let confirmDeleteDialog
-  let componentToDelete = ""
-
   const dragDropStore = initDragDropStore()
 
   const selectLayout = () => {
@@ -24,12 +17,13 @@
 
 <NavItem
   {border}
-  icon="ri-layout-3-line"
+  icon="ClassicGridView"
   text={layout.name}
   withArrow
   selected={$store.selectedLayoutId === layout._id}
   opened={$store.selectedLayoutId === layout._id}
-  on:click={selectLayout}>
+  on:click={selectLayout}
+>
   <LayoutDropdownMenu {layout} />
 </NavItem>
 
@@ -37,5 +31,6 @@
   <ComponentTree
     components={layout.props._children}
     currentComponent={$selectedComponent}
-    {dragDropStore} />
+    {dragDropStore}
+  />
 {/if}
diff --git a/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
index 2ef467c755..14c6c5ab31 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@roxi/routify"
-  import { notifier } from "builderStore/store/notifications"
+  import { notifications } from "@budibase/bbui"
   import { store } from "builderStore"
   import { Input, ModalContent } from "@budibase/bbui"
 
@@ -9,9 +9,9 @@
   async function save() {
     try {
       await store.actions.layouts.save({ name })
-      notifier.success(`Layout ${name} created successfully`)
+      notifications.success(`Layout ${name} created successfully`)
     } catch (err) {
-      notifier.danger(`Error creating layout ${name}.`)
+      notifications.error(`Error creating layout ${name}.`)
     }
   }
 </script>
diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
index 6594f4d90c..ee8e6f5b7e 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@@ -82,8 +82,8 @@
   }
 
   const routeChanged = event => {
-    if (!event.target.value.startsWith("/")) {
-      route = "/" + event.target.value
+    if (!event.detail.startsWith("/")) {
+      route = "/" + event.detail
     }
   }
 </script>
@@ -92,24 +92,25 @@
   <Select
     label="Choose a Template"
     bind:value={templateIndex}
-    secondary
-    on:change={ev => templateChanged(ev.target.value)}>
-    {#if templates}
-      {#each templates as template, index}
-        <option value={index}>{template.name}</option>
-      {/each}
-    {/if}
-  </Select>
+    on:change={ev => templateChanged(ev.detail)}
+    options={templates}
+    placeholder={null}
+    getOptionLabel={x => x.name}
+    getOptionValue={(x, idx) => idx}
+  />
   <Input label="Name" bind:value={name} />
   <Input
     label="Url"
     error={routeError}
     bind:value={route}
-    on:change={routeChanged} />
-  <Select label="Access" bind:value={roleId} secondary>
-    {#each $roles as role}
-      <option value={role._id}>{role.name}</option>
-    {/each}
-  </Select>
-  <Toggle text="Create link in navigation bar" bind:checked={createLink} />
+    on:change={routeChanged}
+  />
+  <Select
+    label="Access"
+    bind:value={roleId}
+    options={$roles}
+    getOptionLabel={x => x.name}
+    getOptionValue={x => x._id}
+  />
+  <Toggle text="Create link in navigation bar" bind:value={createLink} />
 </ModalContent>
diff --git a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
deleted file mode 100644
index 6656d23eac..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
+++ /dev/null
@@ -1,214 +0,0 @@
-<script>
-  import groupBy from "lodash/fp/groupBy"
-  import { Input, TextArea, Heading, Spacer, Label } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  import { isValid } from "@budibase/string-templates"
-  import {
-    getBindableProperties,
-    readableToRuntimeBinding,
-  } from "builderStore/dataBinding"
-  import { currentAsset, store } from "../../../builderStore"
-  import { handlebarsCompletions } from "constants/completions"
-
-  const dispatch = createEventDispatcher()
-
-  export let bindableProperties
-  export let value = ""
-  export let bindingDrawer
-  export let valid = true
-
-  let originalValue = value
-  let helpers = handlebarsCompletions()
-  let getCaretPosition
-  let search = ""
-
-  $: value && checkValid()
-  $: bindableProperties = getBindableProperties(
-    $currentAsset,
-    $store.selectedComponentId
-  )
-  $: dispatch("update", value)
-  $: ({ instance, context } = groupBy("type", bindableProperties))
-  $: searchRgx = new RegExp(search, "ig")
-
-  function checkValid() {
-    // TODO: need to convert the value to the runtime binding
-    const runtimeBinding = readableToRuntimeBinding(bindableProperties, value)
-    valid = isValid(runtimeBinding)
-  }
-
-  function addToText(readableBinding) {
-    const position = getCaretPosition()
-    const toAdd = `{{ ${readableBinding} }}`
-
-    if (position.start) {
-      value =
-        value.substring(0, position.start) +
-        toAdd +
-        value.substring(position.end, value.length)
-    } else {
-      value = toAdd
-    }
-  }
-
-  export function cancel() {
-    dispatch("update", originalValue)
-    bindingDrawer.close()
-  }
-</script>
-
-<div class="drawer-contents">
-  <div class="container" data-cy="binding-dropdown-modal">
-    <div class="list">
-      <Input extraThin placeholder="Search" bind:value={search} />
-      <Spacer medium />
-      {#if context}
-        <Heading extraSmall>Columns</Heading>
-        <Spacer small />
-        <ul>
-          {#each context.filter(context =>
-            context.readableBinding.match(searchRgx)
-          ) as { readableBinding }}
-            <li on:click={() => addToText(readableBinding)}>
-              {readableBinding}
-            </li>
-          {/each}
-        </ul>
-      {/if}
-      <Spacer small />
-      {#if instance}
-        <Heading extraSmall>Components</Heading>
-        <Spacer small />
-        <ul>
-          {#each instance.filter(instance =>
-            instance.readableBinding.match(searchRgx)
-          ) as { readableBinding }}
-            <li on:click={() => addToText(readableBinding)}>
-              {readableBinding}
-            </li>
-          {/each}
-        </ul>
-      {/if}
-      <Spacer small />
-      <Heading extraSmall>Helpers</Heading>
-      <Spacer small />
-      <ul>
-        {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
-          <li on:click={() => addToText(helper.text)}>
-            <div>
-              <Label extraSmall>{helper.displayText}</Label>
-              <div class="description">
-                {@html helper.description}
-              </div>
-              <pre>{helper.example || ''}</pre>
-            </div>
-          </li>
-        {/each}
-      </ul>
-    </div>
-    <div class="text">
-      <TextArea
-        bind:getCaretPosition
-        thin
-        bind:value
-        placeholder="Add text, or click the objects on the left to add them to
-        the textbox." />
-      {#if !valid}
-        <p class="syntax-error">
-          Current Handlebars syntax is invalid, please check the guide
-          <a href="https://handlebarsjs.com/guide/">here</a>
-          for more details.
-        </p>
-      {/if}
-    </div>
-  </div>
-</div>
-
-<style>
-  .container {
-    height: 100%;
-    display: grid;
-    grid-template-columns: 260px 1fr;
-  }
-  .list {
-    border-right: var(--border-light);
-    padding: var(--spacing-l);
-    overflow: auto;
-  }
-
-  .list::-webkit-scrollbar {
-    display: none;
-  }
-
-  .text {
-    padding: var(--spacing-l);
-    font-family: var(--font-sans);
-  }
-  .text :global(textarea) {
-    min-height: 100px;
-  }
-  .text :global(p) {
-    margin: 0;
-  }
-  ul {
-    list-style: none;
-    padding-left: 0;
-    margin: 0;
-    padding: 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--grey-7);
-    padding: var(--spacing-m) 0;
-    margin: auto 0px;
-    align-items: center;
-    cursor: pointer;
-    border: var(--border-light);
-    border-width: 1px 0 1px 0;
-  }
-
-  pre,
-  .description {
-    white-space: normal;
-  }
-
-  li:hover {
-    color: var(--ink);
-    font-weight: 500;
-  }
-
-  li:active {
-    color: var(--blue);
-  }
-
-  .drawer-contents {
-    height: 40vh;
-    overflow-y: auto;
-  }
-
-  .syntax-error {
-    padding-top: var(--spacing-m);
-    color: var(--red);
-    font-size: 12px;
-  }
-
-  .syntax-error a {
-    color: var(--red);
-    text-decoration: underline;
-  }
-
-  .description :global(p) {
-    color: var(--grey-7);
-  }
-
-  .description :global(p:hover) {
-    color: var(--ink);
-  }
-
-  .description :global(p a) {
-    color: var(--grey-7);
-  }
-</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte b/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte
index ba3f4e920d..60b80e37c1 100644
--- a/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte
@@ -9,7 +9,8 @@
     <li
       data-cy={category.name}
       on:click={() => onClick(category)}
-      class:active={selectedCategory === category}>
+      class:active={selectedCategory === category}
+    >
       {category.name}
     </li>
   {/each}
diff --git a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
index cf1816dc62..b03f73a723 100644
--- a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
@@ -53,18 +53,21 @@
             {onStyleChanged}
             {componentInstance}
             open={currentGroup === groupName}
-            on:open={() => (currentGroup = groupName)} />
+            on:open={() => (currentGroup = groupName)}
+          />
         {/each}
         <DetailSummary
-          name={`Custom Styles${componentInstance._styles.custom ? ' *' : ''}`}
-          on:open={() => (currentGroup = 'custom')}
-          show={currentGroup === 'custom'}
-          thin>
+          name={`Custom Styles${componentInstance._styles.custom ? " *" : ""}`}
+          on:open={() => (currentGroup = "custom")}
+          show={currentGroup === "custom"}
+          thin
+        >
           <div class="custom-styles">
             <TextArea
               value={componentInstance._styles.custom}
-              on:change={event => onCustomStyleChanged(event.target.value)}
-              placeholder="Enter some CSS..." />
+              on:change={event => onCustomStyleChanged(event.detail)}
+              placeholder="Enter some CSS..."
+            />
           </div>
         </DetailSummary>
         <Button secondary wide on:click={onResetStyles}>Reset Styles</Button>
@@ -79,15 +82,12 @@
     <div class="transitions">
       <Select
         value={componentInstance._transition}
-        on:change={event => onUpdateTransition(event.target.value)}
+        on:change={event => onUpdateTransition(event.detail)}
         name="transition"
         label="Transition"
-        secondary
-        thin>
-        {#each transitions as transition}
-          <option value={transition}>{capitalize(transition)}</option>
-        {/each}
-      </Select>
+        options={transitions}
+        getOptionLabel={capitalize}
+      />
     </div>
   {/if}
 </div>
@@ -105,6 +105,7 @@
     position: relative;
     display: flex;
     min-height: 0;
+    flex: 1 1 auto;
   }
 
   .property-groups {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
index 38f6b521fa..6be786f0d6 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@@ -1,6 +1,7 @@
 <script>
   import { get } from "svelte/store"
   import { store, selectedComponent, currentAsset } from "builderStore"
+  import { Tabs, Tab } from "@budibase/bbui"
   import { FrontendTypes } from "constants"
   import CategoryTab from "./CategoryTab.svelte"
   import DesignView from "./DesignView.svelte"
@@ -44,47 +45,48 @@
   }
 </script>
 
-<CategoryTab
-  onClick={category => (selectedCategory = category)}
-  {categories}
-  {selectedCategory} />
-
-{#if definition && definition.name}
-  <div class="instance-name">{definition.name}</div>
-{/if}
-
-<div class="component-props-container">
-  {#if selectedCategory.value === 'design'}
-    <DesignView
-      componentInstance={$selectedComponent}
-      componentDefinition={definition}
-      {onStyleChanged}
-      {onCustomStyleChanged}
-      {onUpdateTransition}
-      {onResetStyles} />
-  {:else if selectedCategory.value === 'settings'}
-    <SettingsView
-      componentInstance={$selectedComponent}
-      componentDefinition={definition}
-      {showDisplayName}
-      onChange={store.actions.components.updateProp}
-      onScreenPropChange={setAssetProps}
-      assetInstance={$store.currentView !== 'component' && $currentAsset} />
-  {/if}
-</div>
+<Tabs selected="Settings">
+  <Tab title="Settings">
+    <div class="tab-content-padding">
+      {#if definition && definition.name}
+        <div class="instance-name">{definition.name}</div>
+      {/if}
+      <SettingsView
+        componentInstance={$selectedComponent}
+        componentDefinition={definition}
+        {showDisplayName}
+        onChange={store.actions.components.updateProp}
+        onScreenPropChange={setAssetProps}
+        assetInstance={$store.currentView !== "component" && $currentAsset}
+      />
+    </div>
+  </Tab>
+  <Tab title="Design">
+    <div class="tab-content-padding">
+      {#if definition && definition.name}
+        <div class="instance-name">{definition.name}</div>
+      {/if}
+      <DesignView
+        componentInstance={$selectedComponent}
+        componentDefinition={definition}
+        {onStyleChanged}
+        {onCustomStyleChanged}
+        {onUpdateTransition}
+        {onResetStyles}
+      />
+    </div>
+  </Tab>
+</Tabs>
 
 <style>
-  .component-props-container {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow-y: auto;
-    margin-left: -20px;
-    margin-right: -20px;
-    padding: 0 20px;
+  .tab-content-padding {
+    padding: 0 var(--spacing-xl);
   }
 
   .instance-name {
-    font-size: var(--font-size-xs);
+    font-size: var(--spectrum-global-dimension-font-size-75);
+    margin-bottom: var(--spacing-m);
+    margin-top: var(--spacing-xs);
     font-weight: 500;
     color: var(--grey-7);
   }
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte
index 9e6ab5529b..44557157ba 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte
@@ -2,4 +2,4 @@
   import FormFieldSelect from "./FormFieldSelect.svelte"
 </script>
 
-<FormFieldSelect {...$$props} type="attachment" />
+<FormFieldSelect {...$$props} on:change type="attachment" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte
index 51b459bf23..131a375b22 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte
@@ -2,4 +2,4 @@
   import FormFieldSelect from "./FormFieldSelect.svelte"
 </script>
 
-<FormFieldSelect {...$$props} type="boolean" />
+<FormFieldSelect {...$$props} on:change type="boolean" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/Checkbox.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/Checkbox.svelte
deleted file mode 100644
index 5eaf81cdbc..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/Checkbox.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import Checkbox from "components/common/Checkbox.svelte"
-
-  export let value
-</script>
-
-<Checkbox checked={value} on:change />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte
index c777f79666..207b1555a9 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte
@@ -12,7 +12,7 @@
     let timeout = null
     let initialCall = true
 
-    return function() {
+    return function () {
       const callNow = immediate && initialCall
       const next = () => {
         callback.apply(this, arguments)
@@ -39,4 +39,4 @@
   )
 </script>
 
-<Colorpicker value={value || '#C4C4C4'} on:change={onChange} />
+<Colorpicker value={value || "#C4C4C4"} on:change={onChange} />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
index e773ba5e5d..9be8feab57 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
@@ -13,13 +13,10 @@
   )
 </script>
 
-<Select thin secondary {value} on:change>
-  <option value="">Choose option</option>
-  {#if providers}
-    {#each providers as component}
-      <option value={`{{ literal ${makePropSafe(component._id)} }}`}>
-        {component._instanceName}
-      </option>
-    {/each}
-  {/if}
-</Select>
+<Select
+  {value}
+  on:change
+  options={providers}
+  getOptionLabel={component => component._instanceName}
+  getOptionValue={component => `{{ literal ${makePropSafe(component._id)} }}`}
+/>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
index 7a4ab4c754..e244fedfba 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
@@ -2,11 +2,13 @@
   import { getBindableProperties } from "builderStore/dataBinding"
   import {
     Button,
-    Icon,
-    DropdownMenu,
-    Spacer,
+    Popover,
+    Divider,
+    Select,
+    Layout,
     Heading,
     Drawer,
+    DrawerContent,
   } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { store, currentAsset } from "builderStore"
@@ -15,7 +17,7 @@
     queries as queriesStore,
   } from "stores/backend"
   import { datasources, integrations } from "stores/backend"
-  import { notifier } from "builderStore/store/notifications"
+  import { notifications } from "@budibase/bbui"
   import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
   import IntegrationQueryEditor from "components/integration/index.svelte"
 
@@ -27,6 +29,7 @@
   export let otherSources
   export let showAllQueries
 
+  $: text = value?.label ?? "Choose an option"
   $: tables = $tablesStore.list.map(m => ({
     label: m.name,
     tableId: m._id,
@@ -92,120 +95,107 @@
   }
 </script>
 
-<div class="container">
-  <div
-    class="dropdownbutton"
-    bind:this={anchorRight}
-    on:click={dropdownRight.show}>
-    <span>{value?.label ?? 'Choose option'}</span>
-    <Icon name="arrowdown" />
-  </div>
-  {#if value?.type === 'query'}
+<div class="container" bind:this={anchorRight}>
+  <Select
+    readonly
+    value={text}
+    options={[text]}
+    on:click={dropdownRight.show}
+  />
+  {#if value?.type === "query"}
     <i class="ri-settings-5-line" on:click={drawer.show} />
-    <Drawer title={'Query Parameters'} bind:this={drawer}>
-      <div slot="buttons">
-        <Button
-          blue
-          thin
-          on:click={() => {
-            notifier.success('Query parameters saved.')
-            handleSelected(value)
-            drawer.hide()
-          }}>
-          Save
-        </Button>
-      </div>
-      <div class="drawer-contents" slot="body">
-        {#if value.parameters.length > 0}
-          <ParameterBuilder
-            bind:customParams={value.queryParams}
-            parameters={queries.find(query => query._id === value._id).parameters}
-            bindings={queryBindableProperties} />
-        {/if}
-        <!--        <Spacer large />-->
-        <IntegrationQueryEditor
-          height={200}
-          query={value}
-          schema={fetchQueryDefinition(value)}
-          datasource={$datasources.list.find(ds => ds._id === value.datasourceId)}
-          editable={false} />
-        <Spacer large />
-      </div>
+    <Drawer title={"Query Parameters"} bind:this={drawer}>
+      <Button
+        slot="buttons"
+        cta
+        on:click={() => {
+          notifications.success("Query parameters saved.")
+          handleSelected(value)
+          drawer.hide()
+        }}
+      >
+        Save
+      </Button>
+      <DrawerContent slot="body">
+        <Layout>
+          {#if value.parameters.length > 0}
+            <ParameterBuilder
+              bind:customParams={value.queryParams}
+              parameters={queries.find(query => query._id === value._id)
+                .parameters}
+              bindings={queryBindableProperties}
+            />
+          {/if}
+          <IntegrationQueryEditor
+            height={200}
+            query={value}
+            schema={fetchQueryDefinition(value)}
+            datasource={$datasources.list.find(
+              ds => ds._id === value.datasourceId
+            )}
+            editable={false}
+          />
+        </Layout>
+      </DrawerContent>
     </Drawer>
   {/if}
 </div>
-<DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
+<Popover bind:this={dropdownRight} anchor={anchorRight}>
   <div class="dropdown">
     <div class="title">
-      <Heading extraSmall>Tables</Heading>
+      <Heading size="XS">Tables</Heading>
     </div>
     <ul>
       {#each tables as table}
-        <li
-          class:selected={value === table}
-          on:click={() => handleSelected(table)}>
-          {table.label}
-        </li>
+        <li on:click={() => handleSelected(table)}>{table.label}</li>
       {/each}
     </ul>
-    <hr />
+    <Divider size="S" />
     <div class="title">
-      <Heading extraSmall>Views</Heading>
+      <Heading size="XS">Views</Heading>
     </div>
     <ul>
       {#each views as view}
-        <li
-          class:selected={value === view}
-          on:click={() => handleSelected(view)}>
-          {view.label}
-        </li>
+        <li on:click={() => handleSelected(view)}>{view.label}</li>
       {/each}
     </ul>
-    <hr />
+    <Divider size="S" />
     <div class="title">
-      <Heading extraSmall>Relationships</Heading>
+      <Heading size="XS">Relationships</Heading>
     </div>
     <ul>
       {#each links as link}
-        <li
-          class:selected={value === link}
-          on:click={() => handleSelected(link)}>
-          {link.label}
-        </li>
+        <li on:click={() => handleSelected(link)}>{link.label}</li>
       {/each}
     </ul>
-
-    <hr />
+    <Divider size="S" />
     <div class="title">
-      <Heading extraSmall>Queries</Heading>
+      <Heading size="XS">Queries</Heading>
     </div>
     <ul>
       {#each queries as query}
         <li
           class:selected={value === query}
-          on:click={() => handleSelected(query)}>
+          on:click={() => handleSelected(query)}
+        >
           {query.label}
         </li>
       {/each}
     </ul>
 
     {#if otherSources?.length}
-      <hr />
+      <Divider size="S" />
       <div class="title">
-        <Heading extraSmall>Other</Heading>
+        <Heading size="XS">Other</Heading>
       </div>
       <ul>
         {#each otherSources as source}
-          <li
-            class:selected={value === source}
-            on:click={() => handleSelected(source)}>
-            {source.label}
-          </li>
+          <li on:click={() => handleSelected(source)}>{source.label}</li>
         {/each}
       </ul>
     {/if}
   </div>
-</DropdownMenu>
+</Popover>
 
 <style>
   .container {
@@ -214,45 +204,16 @@
     justify-content: flex-start;
     align-items: center;
   }
-
-  .dropdownbutton {
-    background-color: var(--grey-2);
-    border: var(--border-transparent);
-    padding: var(--spacing-s) var(--spacing-m);
-    border-radius: var(--border-radius-m);
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    overflow: hidden;
+  .container :global(:first-child) {
     flex: 1 1 auto;
   }
-  .dropdownbutton:hover {
-    cursor: pointer;
-    background-color: var(--grey-3);
-  }
-  .dropdownbutton span {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    flex: 1 1 auto;
-    text-align: left;
-    font-size: var(--font-size-xs);
-  }
-  .dropdownbutton :global(svg) {
-    margin: -4px 0;
-  }
 
   .dropdown {
     padding: var(--spacing-m) 0;
     z-index: 99999999;
   }
   .title {
-    padding: 0 var(--spacing-m) var(--spacing-xs) var(--spacing-m);
-  }
-
-  hr {
-    margin: var(--spacing-m) 0 var(--spacing-xl) 0;
+    padding: 0 var(--spacing-m) var(--spacing-s) var(--spacing-m);
   }
 
   ul {
@@ -265,15 +226,15 @@
     cursor: pointer;
     margin: 0px;
     padding: var(--spacing-s) var(--spacing-m);
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-m);
   }
 
   .selected {
-    background-color: var(--grey-4);
+    color: var(--spectrum-global-color-blue-600);
   }
 
   li:hover {
-    background-color: var(--grey-4);
+    background-color: var(--spectrum-global-color-gray-200);
   }
 
   .drawer-contents {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte
index 5c0ed8cb2f..c3b9b052c4 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte
@@ -2,4 +2,4 @@
   import FormFieldSelect from "./FormFieldSelect.svelte"
 </script>
 
-<FormFieldSelect {...$$props} type="datetime" />
+<FormFieldSelect {...$$props} on:change type="datetime" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DetailScreenSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DetailScreenSelect.svelte
deleted file mode 100644
index c119985196..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DetailScreenSelect.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script>
-  import { DataList } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  import { allScreens } from "builderStore"
-
-  const dispatch = createEventDispatcher()
-
-  export let value = ""
-
-  $: urls = getUrls()
-
-  const handleBlur = () => dispatch("change", value)
-
-  const getUrls = () => {
-    return [
-      ...$allScreens
-        .filter(
-          screen =>
-            screen.props._component.endsWith("/rowdetail") ||
-            screen.routing.route.endsWith(":id")
-        )
-        .map(screen => ({
-          name: screen.props._instanceName,
-          url: screen.routing.route,
-          sort: screen.props._component,
-        })),
-    ]
-  }
-</script>
-
-<div>
-  <DataList
-    editable
-    secondary
-    extraThin
-    on:blur={handleBlur}
-    on:change
-    bind:value>
-    <option value="" />
-    {#each urls as url}
-      <option value={url.url}>{url.name}</option>
-    {/each}
-  </DataList>
-</div>
-
-<style>
-  div {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: row;
-  }
-  div :global(> div) {
-    flex: 1 1 auto;
-  }
-</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
index fce9911754..6028bc64ea 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@@ -1,8 +1,16 @@
 <script>
   import { flip } from "svelte/animate"
   import { dndzone } from "svelte-dnd-action"
-  import { Button, DropdownMenu, Spacer } from "@budibase/bbui"
+  import {
+    Icon,
+    Button,
+    Layout,
+    DrawerContent,
+    ActionMenu,
+    MenuItem,
+  } from "@budibase/bbui"
   import actionTypes from "./actions"
+  import { generate } from "shortid"
 
   const flipDurationMs = 150
 
@@ -11,14 +19,16 @@
   export let actions
 
   // dndzone needs an id on the array items, so this adds some temporary ones.
-  if (actions) {
-    actions = actions.map((action, i) => {
-      return { ...action, id: i }
-    })
+  $: {
+    if (actions) {
+      actions.forEach(action => {
+        if (!action.id) {
+          action.id = generate()
+        }
+      })
+    }
   }
 
-  let addActionButton
-  let addActionDropdown
   let selectedAction = actions?.length ? actions[0] : null
 
   $: selectedActionComponent =
@@ -41,14 +51,13 @@
     const newAction = {
       parameters: {},
       [EVENT_TYPE_KEY]: actionType.name,
-      id: actions ? actions.length + 1 : 0,
+      id: generate(),
     }
     if (!actions) {
       actions = []
     }
     actions = [...actions, newAction]
     selectedAction = newAction
-    addActionDropdown.hide()
   }
 
   const selectAction = action => () => {
@@ -63,77 +72,77 @@
   }
 </script>
 
-<div class="actions-container">
-  <div class="actions-list">
-    <div>
-      <div bind:this={addActionButton}>
-        <Button wide secondary on:click={addActionDropdown.show}>
-          Add Action
-        </Button>
-        <Spacer small />
-      </div>
-      <DropdownMenu
-        bind:this={addActionDropdown}
-        anchor={addActionButton}
-        align="right">
-        <div class="available-actions-container">
-          {#each actionTypes as actionType}
-            <div class="available-action" on:click={addAction(actionType)}>
-              <span>{actionType.name}</span>
+<DrawerContent>
+  <div class="actions-list" slot="sidebar">
+    <Layout>
+      <ActionMenu>
+        <Button slot="control" secondary>Add Action</Button>
+        {#each actionTypes as actionType}
+          <MenuItem on:click={addAction(actionType)}>
+            {actionType.name}
+          </MenuItem>
+        {/each}
+      </ActionMenu>
+
+      {#if actions && actions.length > 0}
+        <div
+          class="action-dnd-container"
+          use:dndzone={{
+            items: actions,
+            flipDurationMs,
+            dropTargetStyle: { outline: "none" },
+          }}
+          on:consider={handleDndConsider}
+          on:finalize={handleDndFinalize}
+        >
+          {#each actions as action, index (action.id)}
+            <div
+              class="action-container"
+              animate:flip={{ duration: flipDurationMs }}
+            >
+              <div
+                class="action-header"
+                class:selected={action === selectedAction}
+                on:click={selectAction(action)}
+              >
+                {index + 1}.
+                {action[EVENT_TYPE_KEY]}
+              </div>
+              <div
+                on:click={() => deleteAction(index)}
+                style="margin-left: auto;"
+              >
+                <Icon size="S" hoverable name="Close" />
+              </div>
             </div>
           {/each}
         </div>
-      </DropdownMenu>
-    </div>
-
-    {#if actions && actions.length > 0}
-      <div
-        class="action-dnd-container"
-        use:dndzone={{ items: actions, flipDurationMs, dropTargetStyle: { outline: 'none' } }}
-        on:consider={handleDndConsider}
-        on:finalize={handleDndFinalize}>
-        {#each actions as action, index (action.id)}
-          <div
-            class="action-container"
-            animate:flip={{ duration: flipDurationMs }}>
-            <div
-              class="action-header"
-              class:selected={action === selectedAction}
-              on:click={selectAction(action)}>
-              {index + 1}.
-              {action[EVENT_TYPE_KEY]}
-            </div>
-            <i
-              class="ri-close-fill"
-              style="margin-left: auto;"
-              on:click={() => deleteAction(index)} />
-          </div>
-        {/each}
-      </div>
-    {/if}
+      {/if}
+    </Layout>
   </div>
-  <div class="action-config">
+  <Layout>
     {#if selectedAction}
       <div class="selected-action-container">
         <svelte:component
           this={selectedActionComponent}
-          parameters={selectedAction.parameters} />
+          parameters={selectedAction.parameters}
+        />
       </div>
     {/if}
-  </div>
-</div>
+  </Layout>
+</DrawerContent>
 
 <style>
   .action-header {
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin-top: var(--spacing-m);
+    margin-top: var(--spacing-s);
   }
 
   .action-header {
     margin-bottom: var(--spacing-m);
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-s);
     color: var(--grey-7);
     font-weight: 500;
   }
@@ -144,14 +153,9 @@
     color: var(--ink);
   }
 
-  .actions-list {
-    border-right: var(--border-light);
-    padding: var(--spacing-l);
-  }
-
   .available-action {
     padding: var(--spacing-s);
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-s);
     cursor: pointer;
   }
 
@@ -159,16 +163,6 @@
     background: var(--grey-2);
   }
 
-  .actions-container {
-    height: 40vh;
-    display: grid;
-    grid-template-columns: 260px 1fr;
-    grid-auto-flow: column;
-    min-height: 0;
-    padding-top: 0;
-    overflow-y: auto;
-  }
-
   .action-container {
     border-bottom: 1px solid var(--grey-1);
     display: flex;
@@ -178,10 +172,6 @@
     border-bottom: none;
   }
 
-  .selected-action-container {
-    padding: var(--spacing-l);
-  }
-
   i:hover {
     color: var(--red);
     cursor: pointer;
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte
index 9a239a4e1b..fb2752edde 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Button, Drawer } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import { notifier } from "builderStore/store/notifications"
+  import { notifications } from "@budibase/bbui"
   import EventEditor from "./EventEditor.svelte"
   import { automationStore } from "builderStore"
 
@@ -22,7 +22,7 @@
     }
 
     dispatch("change", value)
-    notifier.success("Component actions saved.")
+    notifications.success("Component actions saved.")
     drawer.hide()
   }
 
@@ -51,12 +51,11 @@
   }
 </script>
 
-<Button secondary wide on:click={drawer.show}>Define Actions</Button>
-<Drawer bind:this={drawer} title={'Actions'}>
-  <heading slot="buttons">
-    <Button thin blue on:click={saveEventData}>Save</Button>
-  </heading>
-  <div slot="body">
-    <EventEditor bind:actions={value} eventType={name} />
-  </div>
+<Button secondary on:click={drawer.show}>Define Actions</Button>
+<Drawer bind:this={drawer} title={"Actions"}>
+  <svelte:fragment slot="description">
+    Define what actions to run.
+  </svelte:fragment>
+  <Button cta slot="buttons" on:click={saveEventData}>Save</Button>
+  <EventEditor slot="body" bind:actions={value} eventType={name} />
 </Drawer>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte
index 0895c78331..5092ca0773 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte
@@ -3,36 +3,38 @@
   import { store, currentAsset } from "builderStore"
   import { tables } from "stores/backend"
   import { getBindableProperties } from "builderStore/dataBinding"
-  import DrawerBindableInput from "components/common/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
 
-  $: tableOptions = $tables || []
+  $: tableOptions = $tables.list || []
   $: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
 </script>
 
 <div class="root">
-  <Label small>Table</Label>
-  <Select thin secondary bind:value={parameters.tableId}>
-    <option value="" />
-    {#each tableOptions as table}
-      <option value={table._id}>{table.name}</option>
-    {/each}
-  </Select>
+  <Label>Table</Label>
+  <Select
+    bind:value={parameters.tableId}
+    options={tableOptions}
+    getOptionLabel={table => table.name}
+    getOptionValue={table => table._id}
+  />
 
   <Label small>Row ID</Label>
   <DrawerBindableInput
     {bindings}
     title="Row ID to delete"
     value={parameters.rowId}
-    on:change={value => (parameters.rowId = value.detail)} />
+    on:change={value => (parameters.rowId = value.detail)}
+  />
 
   <Label small>Row Rev</Label>
   <DrawerBindableInput
     {bindings}
     title="Row rev to delete"
     value={parameters.revId}
-    on:change={value => (parameters.revId = value.detail)} />
+    on:change={value => (parameters.revId = value.detail)}
+  />
 </div>
 
 <style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
index 317b0d2f91..a8b90a52d6 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Select, Label, Spacer } from "@budibase/bbui"
+  import { Select, Label, Layout } from "@budibase/bbui"
   import { store, currentAsset } from "builderStore"
   import { datasources, integrations, queries } from "stores/backend"
   import { getBindableProperties } from "builderStore/dataBinding"
@@ -24,36 +24,38 @@
   }
 </script>
 
-<Label small>Datasource</Label>
-<Select thin secondary bind:value={parameters.datasourceId}>
-  <option value="" />
-  {#each $datasources.list as datasource}
-    <option value={datasource._id}>{datasource.name}</option>
-  {/each}
-</Select>
+<Layout noGap noPadding>
+  <Label>Datasource</Label>
+  <Select
+    bind:value={parameters.datasourceId}
+    option={$datasources.list}
+    getOptionLabel={source => source.name}
+    getOptionValue={source => source._id}
+  />
 
-<Spacer medium />
+  {#if parameters.datasourceId}
+    <Label>Query</Label>
+    <Select
+      bind:value={parameters.queryId}
+      options={$queries.list.filter(
+        query => query.datasourceId === datasource._id
+      )}
+      getOptionLabel={query => query.name}
+      getOptionValue={query => query._id}
+    />
+  {/if}
 
-{#if parameters.datasourceId}
-  <Label small>Query</Label>
-  <Select thin secondary bind:value={parameters.queryId}>
-    <option value="" />
-    {#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
-      <option value={query._id}>{query.name}</option>
-    {/each}
-  </Select>
-{/if}
-
-<Spacer medium />
-
-{#if query?.parameters?.length > 0}
-  <ParameterBuilder
-    bind:customParams={parameters.queryParams}
-    parameters={query.parameters}
-    bindings={bindableProperties} />
-  <IntegrationQueryEditor
-    height={200}
-    {query}
-    schema={fetchQueryDefinition(query)}
-    editable={false} />
-{/if}
+  {#if query?.parameters?.length > 0}
+    <ParameterBuilder
+      bind:customParams={parameters.queryParams}
+      parameters={query.parameters}
+      bindings={bindableProperties}
+    />
+    <IntegrationQueryEditor
+      height={200}
+      {query}
+      schema={fetchQueryDefinition(query)}
+      editable={false}
+    />
+  {/if}
+</Layout>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogIn.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogIn.svelte
index eee4dc2bc7..d64fd1e654 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogIn.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogIn.svelte
@@ -2,7 +2,7 @@
   import { Label } from "@budibase/bbui"
   import { getBindableProperties } from "builderStore/dataBinding"
   import { currentAsset, store } from "builderStore"
-  import DrawerBindableInput from "components/common/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
 
@@ -16,13 +16,15 @@
     title="Email"
     value={parameters.email}
     on:change={value => (parameters.email = value.detail)}
-    {bindings} />
+    {bindings}
+  />
   <Label small>Password</Label>
   <DrawerBindableInput
     title="Password"
     value={parameters.password}
     on:change={value => (parameters.password = value.detail)}
-    {bindings} />
+    {bindings}
+  />
 </div>
 
 <style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte
index 7306ed4e61..8782127243 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div class="root">
-  <Body small grey>This action doesn't require any additional settings.</Body>
+  <Body size="S">This action doesn't require any additional settings.</Body>
 </div>
 
 <style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
index b9567c6523..2b24e2fd74 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
@@ -2,7 +2,7 @@
   import { Label } from "@budibase/bbui"
   import { getBindableProperties } from "builderStore/dataBinding"
   import { currentAsset, store } from "builderStore"
-  import DrawerBindableInput from "components/common/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
 
@@ -19,7 +19,8 @@
     placeholder="/screen"
     value={parameters.url}
     on:change={value => (parameters.url = value.detail)}
-    {bindings} />
+    {bindings}
+  />
 </div>
 
 <style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
index fb5cb3ef16..f6bd54ffb6 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
@@ -1,10 +1,9 @@
 <script>
-  import { Label, TextButton, Spacer, Select, Input } from "@budibase/bbui"
+  import { Label, ActionButton, Button, Select, Input } from "@budibase/bbui"
   import { store, currentAsset } from "builderStore"
   import { getBindableProperties } from "builderStore/dataBinding"
-  import { CloseCircleIcon, AddIcon } from "components/common/Icons"
   import { createEventDispatcher } from "svelte"
-  import DrawerBindableInput from "components/common/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   const dispatch = createEventDispatcher()
 
@@ -54,48 +53,36 @@
     <Label small>{fieldLabel}</Label>
     {#if schemaFields}
       <Select
-        thin
-        secondary
         value={field[0]}
-        on:change={event => updateFieldName(idx, event.target.value)}>
-        <option value="" />
-        {#each schemaFields as schemaField}
-          <option value={schemaField.name}>{schemaField.name}</option>
-        {/each}
-      </Select>
+        on:change={event => updateFieldName(idx, event.detail)}
+        options={schemaFields.map(field => field.name)}
+      />
     {:else}
       <Input
         thin
         secondary
         value={field[0]}
-        on:change={event => updateFieldName(idx, event.target.value)} />
+        on:change={event => updateFieldName(idx, event.detail)}
+      />
     {/if}
     <Label small>{valueLabel}</Label>
     <DrawerBindableInput
       title={`Value for "${field[0]}"`}
       value={field[1]}
       bindings={bindableProperties}
-      on:change={event => updateFieldValue(idx, event.detail)} />
-    <div class="remove-field-container">
-      <TextButton text small on:click={() => removeField(field[0])}>
-        <CloseCircleIcon />
-      </TextButton>
-    </div>
+      on:change={event => updateFieldValue(idx, event.detail)}
+    />
+    <ActionButton
+      size="S"
+      quiet
+      icon="Delete"
+      on:click={() => removeField(field[0])}
+    />
   {/each}
   <div>
-    <Spacer small />
-    <TextButton text small blue on:click={addField}>
+    <Button icon="AddCircle" size="S" cta on:click={addField}>
       Add
       {fieldLabel}
-      <div style="height: 20px; width: 20px;">
-        <AddIcon />
-      </div>
-    </TextButton>
+    </Button>
   </div>
 {/if}
-
-<style>
-  .remove-field-container :global(button) {
-    vertical-align: bottom;
-  }
-</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte
index a94a5e3002..70e44ea83a 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte
@@ -15,7 +15,7 @@
     $store.selectedComponentId
   )
   $: schemaFields = getSchemaFields(parameters?.tableId)
-  $: tableOptions = $tables || []
+  $: tableOptions = $tables.list || []
 
   const getSchemaFields = tableId => {
     const { schema } = getSchemaForDatasource({ type: "table", tableId })
@@ -28,33 +28,35 @@
 </script>
 
 <div class="root">
-  <Body small grey>
+  <Body size="S">
     Choosing a Data Source will automatically use the data it provides, but it's
     optional.<br />
     You can always add or override fields manually.
   </Body>
   <div class="fields">
     <Label small>Data Source</Label>
-    <Select thin secondary bind:value={parameters.providerId}>
-      <option value="">None</option>
-      {#each dataProviderComponents as provider}
-        <option value={provider._id}>{provider._instanceName}</option>
-      {/each}
-    </Select>
+    <Select
+      bind:value={parameters.providerId}
+      options={dataProviderComponents}
+      placeholder="None"
+      getOptionLabel={option => option._instanceName}
+      getOptionValue={option => option._id}
+    />
 
     <Label small>Table</Label>
-    <Select thin secondary bind:value={parameters.tableId}>
-      <option value="" />
-      {#each tableOptions as table}
-        <option value={table._id}>{table.name}</option>
-      {/each}
-    </Select>
+    <Select
+      bind:value={parameters.tableId}
+      options={tableOptions}
+      getOptionLabel={option => option.name}
+      getOptionValue={option => option._id}
+    />
 
     {#if parameters.tableId}
       <SaveFields
         parameterFields={parameters.fields}
         {schemaFields}
-        on:change={onFieldsChanged} />
+        on:change={onFieldsChanged}
+      />
     {/if}
   </div>
 </div>
@@ -74,7 +76,7 @@
     column-gap: var(--spacing-l);
     row-gap: var(--spacing-s);
     grid-template-columns: auto 1fr auto 1fr auto;
-    align-items: baseline;
+    align-items: center;
   }
 
   .fields :global(> div:nth-child(2)),
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte
index 4ae5e320fc..e40c182131 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte
@@ -57,7 +57,8 @@
       <input
         type="radio"
         value={AUTOMATION_STATUS.NEW}
-        bind:group={automationStatus} />
+        bind:group={automationStatus}
+      />
       <Label small>Create a new automation</Label>
     </div>
     <div class="radio-container" on:click={hasAutomations ? setExisting : null}>
@@ -65,7 +66,8 @@
         type="radio"
         value={AUTOMATION_STATUS.EXISTING}
         bind:group={automationStatus}
-        disabled={!hasAutomations} />
+        disabled={!hasAutomations}
+      />
       <Label small grey={!hasAutomations}>Use an existing automation</Label>
     </div>
   </div>
@@ -75,19 +77,17 @@
 
     {#if automationStatus === AUTOMATION_STATUS.EXISTING}
       <Select
-        thin
-        secondary
         bind:value={parameters.automationId}
-        placeholder="Choose automation">
-        {#each automations as automation}
-          <option value={automation._id}>{automation.name}</option>
-        {/each}
-      </Select>
+        placeholder="Choose automation"
+        options={automations}
+        getOptionLabel={x => x.name}
+        getOptionValue={x => x._id}
+      />
     {:else}
       <Input
-        thin
         bind:value={parameters.newAutomationName}
-        placeholder="Enter automation name" />
+        placeholder="Enter automation name"
+      />
     {/if}
 
     {#key parameters.automationId}
@@ -95,7 +95,8 @@
         schemaFields={selectedSchema}
         parameterFields={parameters.fields}
         fieldLabel="Field"
-        on:change={onFieldsChanged} />
+        on:change={onFieldsChanged}
+      />
     {/key}
   </div>
 </div>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
index 1087d028b3..7a02a7203f 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
@@ -14,21 +14,19 @@
 
 <div class="root">
   <Label small>Form</Label>
-  <Select thin secondary bind:value={parameters.componentId}>
-    <option value="" />
-    {#if actionProviders}
-      {#each actionProviders as component}
-        <option value={component._id}>{component._instanceName}</option>
-      {/each}
-    {/if}
-  </Select>
+  <Select
+    bind:value={parameters.componentId}
+    options={actionProviders}
+    getOptionLabel={x => x._instanceName}
+    getOptionValue={x => x._id}
+  />
 </div>
 
 <style>
   .root {
     display: flex;
     flex-direction: row;
-    align-items: baseline;
+    align-items: center;
     max-width: 800px;
     margin: 0 auto;
   }
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
index 3a87bc9db1..dd5436c1f7 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
@@ -1,25 +1,41 @@
-<script>
-  import OptionSelect from "./OptionSelect.svelte"
-  import MultiOptionSelect from "./MultiOptionSelect.svelte"
-  import {
-    getDatasourceForProvider,
-    getSchemaForDatasource,
-  } from "builderStore/dataBinding"
-  import { currentAsset } from "builderStore"
-
-  export let componentInstance = {}
-  export let value = ""
-  export let onChange = () => {}
-  export let multiselect = false
-  export let placeholder
-
-  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
-  $: schema = getSchemaForDatasource(datasource).schema
-  $: options = Object.keys(schema || {})
-</script>
-
-{#if multiselect}
-  <MultiOptionSelect {value} {onChange} {options} {placeholder} />
-{:else}
-  <OptionSelect {value} {onChange} {options} {placeholder} />
-{/if}
+<script>
+  import { Select } from "@budibase/bbui"
+  import {
+    getDatasourceForProvider,
+    getSchemaForDatasource,
+  } from "builderStore/dataBinding"
+  import { currentAsset } from "builderStore"
+  import { createEventDispatcher } from "svelte"
+
+  export let componentInstance = {}
+  export let value = ""
+  export let multiselect = false
+  export let placeholder
+
+  const dispatch = createEventDispatcher()
+  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: schema = getSchemaForDatasource(datasource).schema
+  $: options = Object.keys(schema || {})
+  $: boundValue = getValidValue(value, options)
+
+  const getValidValue = (value, options) => {
+    // Reset value if there aren't any options
+    if (!Array.isArray(options)) {
+      return null
+    }
+
+    // Reset value if the value isn't found in the options
+    if (options.indexOf(value) === -1) {
+      return null
+    }
+
+    return value
+  }
+
+  const onChange = value => {
+    boundValue = getValidValue(value.detail, options)
+    dispatch("change", boundValue)
+  }
+</script>
+
+<Select {placeholder} value={boundValue} on:change={onChange} {options} />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
index faff7bc0b9..977248e919 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
@@ -1,7 +1,7 @@
 <script>
-  import { Button, Drawer, Spacer, Body } from "@budibase/bbui"
+  import { Button, Drawer, Body, DrawerContent, Layout } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import { notifier } from "builderStore/store/notifications"
+  import { notifications } from "@budibase/bbui"
   import {
     getDatasourceForProvider,
     getSchemaForDatasource,
@@ -26,7 +26,7 @@
 
   const saveFilter = async () => {
     dispatch("change", tempValue)
-    notifier.success("Filters saved.")
+    notifications.success("Filters saved.")
     drawer.hide()
   }
 
@@ -35,14 +35,12 @@
   }
 </script>
 
-<Button secondary wide on:click={drawer.show}>Define Filters</Button>
-<Drawer bind:this={drawer} title={'Filtering'}>
-  <heading slot="buttons">
-    <Button thin blue on:click={saveFilter}>Save</Button>
-  </heading>
-  <div slot="body">
-    <div class="root">
-      <Body small grey>
+<Button secondary on:click={drawer.show}>Define Filters</Button>
+<Drawer bind:this={drawer} title="Filtering">
+  <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
+  <DrawerContent slot="body">
+    <Layout>
+      <Body size="S">
         {#if !Object.keys(tempValue || {}).length}
           Add your first filter column.
         {:else}
@@ -50,31 +48,24 @@
           constaints.
         {/if}
       </Body>
-      <Spacer medium />
       <div class="fields">
         <SaveFields
           parameterFields={value}
           {schemaFields}
           valueLabel="Equals"
-          on:change={onFieldsChanged} />
+          on:change={onFieldsChanged}
+        />
       </div>
-    </div>
-  </div>
+    </Layout>
+  </DrawerContent>
 </Drawer>
 
 <style>
-  .root {
-    padding: var(--spacing-l);
-    min-height: calc(40vh - 2 * var(--spacing-l));
-    max-width: 800px;
-    margin: 0 auto;
-  }
-
   .fields {
     display: grid;
     column-gap: var(--spacing-l);
     row-gap: var(--spacing-s);
+    align-items: center;
     grid-template-columns: auto 1fr auto 1fr auto;
-    align-items: baseline;
   }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButton.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButton.svelte
index 931b90a5a2..be83b1fe3c 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButton.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButton.svelte
@@ -29,7 +29,7 @@
     background: var(--background);
     color: var(--grey-7);
     border-radius: var(--border-radius-m);
-    font-size: var(--font-size-xs);
+    font-size: var(--spectrum-global-dimension-font-size-75);
     font-weight: 500;
     transition: all 0.3s;
     text-rendering: optimizeLegibility;
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButtonGroup.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButtonGroup.svelte
index f8c5f5cf48..a23fada40c 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButtonGroup.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButtonGroup.svelte
@@ -37,9 +37,12 @@
   {#each buttonProps as props}
     <div class="button-container">
       <FlatButton
-        selected={isMultiSelect ? value.includes(props.value) : value === props.value}
+        selected={isMultiSelect
+          ? value.includes(props.value)
+          : value === props.value}
         onClick={onButtonClicked}
-        {...props} />
+        {...props}
+      />
     </div>
   {/each}
 </div>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
index 5a903e0b10..1d7f5367df 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { DataList } from "@budibase/bbui"
+  import { Combobox } from "@budibase/bbui"
   import {
     getDatasourceForProvider,
     getSchemaForDatasource,
@@ -28,32 +28,6 @@
     }
     return entries.map(entry => entry[0])
   }
-
-  const handleBlur = () => onChange(value)
 </script>
 
-<div>
-  <DataList
-    editable
-    secondary
-    extraThin
-    on:blur={handleBlur}
-    on:change
-    bind:value>
-    <option value="" />
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </DataList>
-</div>
-
-<style>
-  div {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: row;
-  }
-  div :global(> div) {
-    flex: 1 1 auto;
-  }
-</style>
+<Combobox on:change {value} {options} />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
index 4bf3b80ae2..1840e4efbd 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <script>
-  import { DropdownMenu, Button, Input } from "@budibase/bbui"
+  import { Popover, Button, Input } from "@budibase/bbui"
   import { createEventDispatcher, tick } from "svelte"
 
   const dispatch = createEventDispatcher()
@@ -119,10 +119,7 @@
 <div bind:this={buttonAnchor}>
   <Button secondary small on:click={dropdown.show}>{displayValue}</Button>
 </div>
-<DropdownMenu
-  bind:this={dropdown}
-  on:open={setSelectedUI}
-  anchor={buttonAnchor}>
+<Popover bind:this={dropdown} on:open={setSelectedUI} anchor={buttonAnchor}>
   <div class="container">
     <div class="search-area">
       <div class="alphabet-area">
@@ -130,7 +127,8 @@
           <span
             class="letter"
             class:letter-selected={letter === selectedLetter}
-            on:click={() => switchLetter(letter)}>
+            on:click={() => switchLetter(letter)}
+          >
             {letter}
           </span>
           {#if idx !== alphabet.length - 1}<span>-</span>{/if}
@@ -161,7 +159,8 @@
             <div
               class="icon-container"
               class:selected={value === `ri-${icon}-fill`}
-              on:click={() => (value = `ri-${icon}-fill`)}>
+              on:click={() => (value = `ri-${icon}-fill`)}
+            >
               <div class="icon-preview">
                 <i class={`ri-${icon}-fill ri-xl`} />
               </div>
@@ -170,7 +169,8 @@
             <div
               class="icon-container"
               class:selected={value === `ri-${icon}-line`}
-              on:click={() => (value = `ri-${icon}-line`)}>
+              on:click={() => (value = `ri-${icon}-line`)}
+            >
               <div class="icon-preview">
                 <i class={`ri-${icon}-line ri-xl`} />
               </div>
@@ -182,12 +182,12 @@
     {:else}
       <div class="no-icons">
         <h5>
-          {`There is no icons for this ${searchTerm ? 'search' : 'page'}`}
+          {`There is no icons for this ${searchTerm ? "search" : "page"}`}
         </h5>
       </div>
     {/if}
   </div>
-</DropdownMenu>
+</Popover>
 
 <style>
   .container {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/index.js
index 5f62d8970b..508be0f6c5 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/index.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/index.js
@@ -1 +1 @@
-export { default as IconSelect } from "./IconSelect.svelte"
+export { default as IconSelect } from "./IconSelect.svelte"
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/Input.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/Input.svelte
deleted file mode 100644
index 3abdb3ecd3..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/Input.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-  /*
-  This file exists because of how we pass this control to the 
-  properties panel - via a JS reference, not using svelte tags
-  ... checkout the use of Input in propertyCategories to see what i mean
-  */
-  import { Input } from "@budibase/bbui"
-  export let name, value, placeholder, type
-</script>
-
-<Input {name} {value} {placeholder} {type} extraThin on:change />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LayoutSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LayoutSelect.svelte
index c85f86f409..eed01c0d94 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LayoutSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LayoutSelect.svelte
@@ -5,9 +5,10 @@
   export let value
 </script>
 
-<Select bind:value extraThin secondary on:change>
-  <option value="">Choose an option</option>
-  {#each $store.layouts as layout}
-    <option value={layout._id}>{layout.name}</option>
-  {/each}
-</Select>
+<Select
+  bind:value
+  on:change
+  options={$store.layouts}
+  getOptionLabel={layout => layout.name}
+  getOptionValue={layout => layout._id}
+/>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte
index 05a83fe387..65dd54d53a 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte
@@ -2,4 +2,4 @@
   import FormFieldSelect from "./FormFieldSelect.svelte"
 </script>
 
-<FormFieldSelect {...$$props} type="longform" />
+<FormFieldSelect {...$$props} on:change type="longform" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
index a735cc5f18..44cea7a627 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
@@ -1,5 +1,35 @@
 <script>
-  import FieldSelect from "./FieldSelect.svelte"
+  import { Multiselect } from "@budibase/bbui"
+  import {
+    getDatasourceForProvider,
+    getSchemaForDatasource,
+  } from "builderStore/dataBinding"
+  import { currentAsset } from "builderStore"
+  import { createEventDispatcher } from "svelte"
+
+  export let componentInstance = {}
+  export let value = ""
+  export let multiselect = false
+  export let placeholder
+
+  const dispatch = createEventDispatcher()
+  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: schema = getSchemaForDatasource(datasource).schema
+  $: options = Object.keys(schema || {})
+  $: boundValue = getValidOptions(value, options)
+
+  const getValidOptions = (selectedOptions, allOptions) => {
+    // Fix the hardcoded default string value
+    if (!Array.isArray(selectedOptions)) {
+      selectedOptions = []
+    }
+    return selectedOptions.filter(val => allOptions.indexOf(val) !== -1)
+  }
+
+  const setValue = value => {
+    boundValue = getValidOptions(value.detail, options)
+    dispatch("change", boundValue)
+  }
 </script>
 
-<FieldSelect {...$$props} multiselect />
+<Multiselect {placeholder} value={boundValue} on:change={setValue} {options} />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiOptionSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiOptionSelect.svelte
deleted file mode 100644
index f84c495ec4..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiOptionSelect.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script>
-  import { Multiselect } from "@budibase/bbui"
-
-  export let options = []
-  export let value = []
-  export let onChange = () => {}
-  export let placeholder
-
-  let boundValue = getValidOptions(value, options)
-
-  function getValidOptions(selectedOptions, allOptions) {
-    // Fix the hardcoded default string value
-    if (!Array.isArray(selectedOptions)) {
-      selectedOptions = []
-    }
-    return selectedOptions.filter(val => allOptions.indexOf(val) !== -1)
-  }
-
-  function setValue(value) {
-    boundValue = getValidOptions(value.detail, options)
-    onChange(boundValue)
-  }
-</script>
-
-<div>
-  <Multiselect
-    align="right"
-    extraThin
-    secondary
-    {placeholder}
-    value={boundValue}
-    on:change={setValue}>
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Multiselect>
-</div>
-
-<style>
-  div {
-    flex: 1 1 auto;
-  }
-</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte
index ce2569cf91..2006aca0bb 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte
@@ -2,4 +2,4 @@
   import FormFieldSelect from "./FormFieldSelect.svelte"
 </script>
 
-<FormFieldSelect {...$$props} type="number" />
+<FormFieldSelect {...$$props} on:change type="number" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte
deleted file mode 100644
index 2ff67f1c30..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte
+++ /dev/null
@@ -1,257 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import Portal from "svelte-portal"
-  import { buildStyle } from "../../../../helpers.js"
-
-  export let options = []
-  export let value = ""
-  export let styleBindingProperty
-  export let onChange = () => {}
-  export let placeholder
-
-  let open = null
-  let rotate = ""
-  let select
-  let selectMenu
-  let icon
-  let width = 0
-
-  let selectAnchor = null
-  let dimensions = { top: 0, bottom: 0, left: 0 }
-
-  let positionSide = "top"
-  let maxHeight = 0
-  let scrollTop = 0
-  let containerEl = null
-
-  const handleStyleBind = value =>
-    !!styleBindingProperty ? { style: `${styleBindingProperty}: ${value}` } : {}
-
-  onMount(() => {
-    if (select) {
-      select.addEventListener("keydown", handleEnter)
-    }
-
-    return () => {
-      select.removeEventListener("keydown", handleEnter)
-    }
-  })
-
-  function handleEscape(e) {
-    if (open && e.key === "Escape") {
-      toggleSelect(false)
-    }
-  }
-
-  function getDimensions() {
-    const {
-      bottom,
-      top: spaceAbove,
-      left,
-    } = selectAnchor.getBoundingClientRect()
-    const spaceBelow = window.innerHeight - bottom
-
-    let y
-
-    if (spaceAbove > spaceBelow) {
-      positionSide = "bottom"
-      maxHeight = spaceAbove - 20
-      y = window.innerHeight - spaceAbove
-    } else {
-      positionSide = "top"
-      y = bottom
-      maxHeight = spaceBelow - 20
-    }
-
-    dimensions = { [positionSide]: y, left }
-  }
-
-  function handleEnter(e) {
-    if (!open && e.key === "Enter") {
-      toggleSelect(true)
-    }
-  }
-
-  function toggleSelect(isOpen) {
-    getDimensions()
-    if (isOpen) {
-      icon.style.transform = "rotate(180deg)"
-    } else {
-      icon.style.transform = "rotate(0deg)"
-    }
-    open = isOpen
-  }
-
-  function handleClick(val) {
-    value = val
-    onChange(value)
-    toggleSelect(false)
-  }
-
-  $: menuStyle = buildStyle({
-    "max-height": `${maxHeight.toFixed(0)}px`,
-    "transform-origin": `center ${positionSide}`,
-    [positionSide]: `${dimensions[positionSide]}px`,
-    left: `${dimensions.left.toFixed(0)}px`,
-    width: `${width}px`,
-  })
-
-  $: isOptionsObject = options.every(o => typeof o === "object")
-
-  $: selectedOption = isOptionsObject
-    ? options.find(o => o.value === value || (o.value === "" && value == null))
-    : {}
-
-  $: if (open && selectMenu) {
-    selectMenu.focus()
-  }
-
-  $: displayLabel =
-    selectedOption && selectedOption.label
-      ? selectedOption.label
-      : value || placeholder || "Choose option"
-</script>
-
-<div
-  bind:clientWidth={width}
-  tabindex="0"
-  bind:this={select}
-  class="bb-select-container"
-  on:click={() => toggleSelect(!open)}>
-  <div bind:this={selectAnchor} title={value} class="bb-select-anchor selected">
-    <span>{displayLabel}</span>
-    <i bind:this={icon} class="ri-arrow-down-s-fill" />
-  </div>
-  {#if open}
-    <Portal>
-      <div
-        tabindex="0"
-        class:open
-        bind:this={selectMenu}
-        style={menuStyle}
-        on:keydown={handleEscape}
-        class="bb-select-menu">
-        <ul>
-          <li
-            on:click|self={() => handleClick(null)}
-            class:selected={value == null || value === ''}>
-            Choose option
-          </li>
-          {#if isOptionsObject}
-            {#each options as { value: v, label }}
-              <li
-                {...handleStyleBind(v)}
-                on:click|self={() => handleClick(v)}
-                class:selected={value === v}>
-                {label}
-              </li>
-            {/each}
-          {:else}
-            {#each options as v}
-              <li
-                {...handleStyleBind(v)}
-                on:click|self={() => handleClick(v)}
-                class:selected={value === v}>
-                {v}
-              </li>
-            {/each}
-          {/if}
-        </ul>
-      </div>
-      <div on:click|self={() => toggleSelect(false)} class="overlay" />
-    </Portal>
-  {/if}
-</div>
-
-<style>
-  .overlay {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    z-index: 1;
-  }
-
-  .bb-select-container {
-    outline: none;
-    cursor: pointer;
-    overflow: hidden;
-    flex: 1 1 auto;
-  }
-
-  .bb-select-anchor {
-    cursor: pointer;
-    display: flex;
-    padding: var(--spacing-s) var(--spacing-m);
-    background-color: var(--grey-2);
-    border-radius: var(--border-radius-m);
-    align-items: center;
-    white-space: nowrap;
-  }
-
-  .bb-select-anchor > span {
-    color: var(--ink);
-    font-weight: 400;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: var(--font-size-xs);
-    flex: 1 1 auto;
-  }
-
-  .bb-select-anchor > i {
-    transition: transform 0.13s ease;
-    transform-origin: center;
-    width: 20px;
-    height: 20px;
-    text-align: center;
-  }
-
-  .selected {
-    color: var(--ink);
-    font-weight: 400;
-  }
-
-  .bb-select-menu {
-    position: absolute;
-    display: flex;
-    outline: none;
-    box-sizing: border-box;
-    flex-direction: column;
-    opacity: 0;
-    z-index: 2;
-    color: var(--ink);
-    font-weight: 400;
-    height: fit-content !important;
-    border-bottom-left-radius: 2px;
-    border-bottom-right-radius: 2px;
-    background-color: var(--grey-2);
-    transform: scale(0);
-    transition: opacity 0.13s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1);
-    overflow-y: auto;
-  }
-
-  .open {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 5px 0px;
-  }
-
-  li {
-    height: auto;
-    padding: 5px 0px;
-    cursor: pointer;
-    padding-left: 10px;
-    font-size: var(--font-size-xs);
-  }
-
-  li:hover {
-    background-color: var(--grey-3);
-  }
-</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte
index 526372e3d8..a01b837797 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte
@@ -2,4 +2,4 @@
   import FormFieldSelect from "./FormFieldSelect.svelte"
 </script>
 
-<FormFieldSelect {...$$props} type="options" />
+<FormFieldSelect {...$$props} on:change type="options" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
index 6b56910eed..a993400c32 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@@ -6,7 +6,7 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/dataBinding"
-  import BindingPanel from "components/design/PropertiesPanel/BindingPanel.svelte"
+  import BindingPanel from "components/common/bindings/BindingPanel.svelte"
   import { capitalise } from "../../../../helpers"
 
   export let label = ""
@@ -80,32 +80,32 @@
       onChange={handleChange}
       {type}
       {...props}
-      name={key} />
+      name={key}
+    />
   </div>
-  {#if bindable && !key.startsWith('_') && type === 'text'}
+  {#if bindable && !key.startsWith("_") && type === "text"}
     <div
       class="icon"
       data-cy={`${key}-binding-button`}
-      on:click={bindingDrawer.show}>
-      <Icon name="lightning" />
+      on:click={bindingDrawer.show}
+    >
+      <Icon size="S" name="FlashOn" />
     </div>
     <Drawer bind:this={bindingDrawer} title={capitalise(key)}>
-      <div slot="description">
-        <Body extraSmall grey>
-          Add the objects on the left to enrich your text.
-        </Body>
-      </div>
-      <heading slot="buttons">
-        <Button thin blue disabled={!valid} on:click={handleClose}>Save</Button>
-      </heading>
-      <div slot="body">
-        <BindingPanel
-          bind:valid
-          value={safeValue}
-          close={handleClose}
-          on:update={e => (temporaryBindableValue = e.detail)}
-          {bindableProperties} />
-      </div>
+      <svelte:fragment slot="description">
+        Add the objects on the left to enrich your text.
+      </svelte:fragment>
+      <Button cta slot="buttons" disabled={!valid} on:click={handleClose}
+        >Save</Button
+      >
+      <BindingPanel
+        slot="body"
+        bind:valid
+        value={safeValue}
+        close={handleClose}
+        on:update={e => (temporaryBindableValue = e.detail)}
+        {bindableProperties}
+      />
     </Drawer>
   {/if}
 </div>
@@ -134,27 +134,34 @@
     flex: 1;
     display: inline-block;
     padding-left: 2px;
-    overflow: hidden;
+    width: 0;
   }
 
   .icon {
-    right: 2px;
-    top: 2px;
-    bottom: 2px;
+    right: 1px;
+    top: 1px;
+    bottom: 1px;
     position: absolute;
+    justify-content: center;
     align-items: center;
     display: flex;
+    flex-direction: row;
     box-sizing: border-box;
-    padding-left: 7px;
-    border-left: 1px solid var(--grey-4);
-    background-color: var(--grey-2);
-    border-top-right-radius: var(--border-radius-m);
-    border-bottom-right-radius: var(--border-radius-m);
-    color: var(--grey-7);
-    font-size: 14px;
+    border-left: 1px solid var(--spectrum-alias-border-color);
+    border-top-right-radius: var(--spectrum-alias-border-radius-regular);
+    border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
+    width: 31px;
+    color: var(--spectrum-alias-text-color);
+    background-color: var(--spectrum-global-color-gray-75);
+    transition: background-color
+        var(--spectrum-global-animation-duration-100, 130ms),
+      box-shadow var(--spectrum-global-animation-duration-100, 130ms),
+      border-color var(--spectrum-global-animation-duration-100, 130ms);
   }
   .icon:hover {
-    color: var(--ink);
     cursor: pointer;
+    color: var(--spectrum-alias-text-color-hover);
+    background-color: var(--spectrum-global-color-gray-50);
+    border-color: var(--spectrum-alias-border-color-hover);
   }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
index 93be958d55..0db5eda237 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
@@ -22,18 +22,19 @@
   }
 </script>
 
-<DetailSummary name={`${name}${changed ? ' *' : ''}`} on:open show={open} thin>
+<DetailSummary name={`${name}${changed ? " *" : ""}`} on:open show={open} thin>
   {#if open}
     <div>
       {#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)}
         <PropertyControl
           bindable={false}
-          label={`${prop.label}${hasPropChanged(style, prop) ? ' *' : ''}`}
+          label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
           control={prop.control}
           key={prop.key}
           value={style[prop.key]}
           onChange={value => onStyleChanged(styleCategory, prop.key, value)}
-          props={getControlProps(prop)} />
+          props={getControlProps(prop)}
+        />
       {/each}
     </div>
   {/if}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte
index 94e376dc27..5cdb25a112 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte
@@ -2,4 +2,4 @@
   import FormFieldSelect from "./FormFieldSelect.svelte"
 </script>
 
-<FormFieldSelect {...$$props} type="link" />
+<FormFieldSelect {...$$props} on:change type="link" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RoleSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RoleSelect.svelte
index 13cdbac82f..be6fc8cb12 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RoleSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RoleSelect.svelte
@@ -5,9 +5,10 @@
   export let value
 </script>
 
-<Select bind:value extraThin secondary on:change>
-  <option value="">Choose an option</option>
-  {#each $roles as role}
-    <option value={role._id}>{role.name}</option>
-  {/each}
-</Select>
+<Select
+  bind:value
+  on:change
+  options={$roles}
+  getOptionLabel={role => role.name}
+  getOptionValue={role => role._id}
+/>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte
index 27815af91f..62765676e3 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte
@@ -2,4 +2,4 @@
   import FormFieldSelect from "./FormFieldSelect.svelte"
 </script>
 
-<FormFieldSelect {...$$props} type="string" />
+<FormFieldSelect {...$$props} on:change type="string" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
index 9e2eb22b55..d316affb44 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@@ -1,17 +1,14 @@
 <script>
   import { get } from "lodash"
   import { isEmpty } from "lodash/fp"
-  import { Button } from "@budibase/bbui"
+  import { Button, Checkbox, Input, Select } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { currentAsset } from "builderStore"
   import { findClosestMatchingComponent } from "builderStore/storeUtils"
   import { makeDatasourceFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents"
   import PropertyControl from "./PropertyControls/PropertyControl.svelte"
-  import Input from "./PropertyControls/Input.svelte"
   import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
   import RoleSelect from "./PropertyControls/RoleSelect.svelte"
-  import OptionSelect from "./PropertyControls/OptionSelect.svelte"
-  import Checkbox from "./PropertyControls/Checkbox.svelte"
   import TableSelect from "./PropertyControls/TableSelect.svelte"
   import DataSourceSelect from "./PropertyControls/DataSourceSelect.svelte"
   import DataProviderSelect from "./PropertyControls/DataProviderSelect.svelte"
@@ -20,7 +17,6 @@
   import SchemaSelect from "./PropertyControls/SchemaSelect.svelte"
   import EventsEditor from "./PropertyControls/EventsEditor"
   import FilterEditor from "./PropertyControls/FilterEditor.svelte"
-  import DetailScreenSelect from "./PropertyControls/DetailScreenSelect.svelte"
   import { IconSelect } from "./PropertyControls/IconSelect"
   import ColorPicker from "./PropertyControls/ColorPicker.svelte"
   import StringFieldSelect from "./PropertyControls/StringFieldSelect.svelte"
@@ -61,10 +57,9 @@
 
   const controlMap = {
     text: Input,
-    select: OptionSelect,
+    select: Select,
     dataSource: DataSourceSelect,
     dataProvider: DataProviderSelect,
-    detailScreen: DetailScreenSelect,
     boolean: Checkbox,
     number: Input,
     event: EventsEditor,
@@ -128,7 +123,8 @@
         label={def.label}
         key={def.key}
         value={get(assetInstance, def.key)}
-        onChange={val => onScreenPropChange(def.key, val)} />
+        onChange={val => onScreenPropChange(def.key, val)}
+      />
     {/each}
   {/if}
 
@@ -139,7 +135,8 @@
       label="Name"
       key="_instanceName"
       value={componentInstance._instanceName}
-      onChange={onInstanceNameChange} />
+      onChange={onInstanceNameChange}
+    />
   {/if}
 
   {#if settings && settings.length > 0}
@@ -150,10 +147,12 @@
           control={getControl(setting.type)}
           label={setting.label}
           key={setting.key}
-          value={componentInstance[setting.key] ?? componentInstance[setting.key]?.defaultValue}
+          value={componentInstance[setting.key] ??
+            componentInstance[setting.key]?.defaultValue}
           {componentInstance}
           onChange={val => onChange(setting.key, val)}
-          props={{ options: setting.options, placeholder: setting.placeholder }} />
+          props={{ options: setting.options, placeholder: setting.placeholder }}
+        />
       {/if}
     {/each}
   {:else}
@@ -162,10 +161,12 @@
     </div>
   {/if}
 
-  {#if componentDefinition?.component?.endsWith('/fieldgroup')}
-    <Button secondary wide on:click={() => confirmResetFieldsDialog?.show()}>
-      Update Form Fields
-    </Button>
+  {#if componentDefinition?.component?.endsWith("/fieldgroup")}
+    <div class="buttonWrapper">
+      <Button secondary wide on:click={() => confirmResetFieldsDialog?.show()}>
+        Update Form Fields
+      </Button>
+    </div>
   {/if}
 </div>
 <ConfirmDialog
@@ -173,7 +174,8 @@
   body={`All components inside this group will be deleted and replaced with fields to match the schema. Are you sure you want to update this Field Group?`}
   okText="Update"
   onOk={resetFormFields}
-  title="Confirm Form Field Update" />
+  title="Confirm Form Field Update"
+/>
 
 <style>
   .settings-view-container {
@@ -184,8 +186,13 @@
     gap: var(--spacing-s);
   }
   .empty {
-    font-size: var(--font-size-xs);
+    font-size: var(--spectrum-global-dimension-font-size-75);
     margin-top: var(--spacing-m);
-    color: var(--grey-5);
+    color: var(--grey-6);
+  }
+  .buttonWrapper {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
   }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
index 867ff23c3f..ba46738549 100644
--- a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
+++ b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
@@ -1,5 +1,4 @@
-import Input from "./PropertyControls/Input.svelte"
-import OptionSelect from "./PropertyControls/OptionSelect.svelte"
+import { Input, Select } from "@budibase/bbui"
 import FlatButtonGroup from "./PropertyControls/FlatButtonGroup"
 import Colorpicker from "./PropertyControls/ColorPicker.svelte"
 
@@ -7,7 +6,7 @@ export const layout = [
   {
     label: "Display",
     key: "display",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "Block", value: "block" },
       { label: "Inline Block", value: "inline-block" },
@@ -34,7 +33,7 @@ export const layout = [
   {
     label: "Justify",
     key: "justify-content",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
@@ -47,7 +46,7 @@ export const layout = [
   {
     label: "Align",
     key: "align-items",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
@@ -59,7 +58,7 @@ export const layout = [
   {
     label: "Wrap",
     key: "flex-wrap",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "Wrap", value: "wrap" },
       { label: "No wrap", value: "nowrap" },
@@ -68,7 +67,7 @@ export const layout = [
   {
     label: "Gap",
     key: "gap",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -86,7 +85,7 @@ export const margin = [
   {
     label: "All sides",
     key: "margin",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -105,7 +104,7 @@ export const margin = [
   {
     label: "Top",
     key: "margin-top",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -124,7 +123,7 @@ export const margin = [
   {
     label: "Right",
     key: "margin-right",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -143,7 +142,7 @@ export const margin = [
   {
     label: "Bottom",
     key: "margin-bottom",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -162,7 +161,7 @@ export const margin = [
   {
     label: "Left",
     key: "margin-left",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -184,7 +183,7 @@ export const padding = [
   {
     label: "All sides",
     key: "padding",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -201,7 +200,7 @@ export const padding = [
   {
     label: "Top",
     key: "padding-top",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -218,7 +217,7 @@ export const padding = [
   {
     label: "Right",
     key: "padding-right",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -235,7 +234,7 @@ export const padding = [
   {
     label: "Bottom",
     key: "padding-bottom",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -252,7 +251,7 @@ export const padding = [
   {
     label: "Left",
     key: "padding-left",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
@@ -272,7 +271,7 @@ export const size = [
   {
     label: "Flex",
     key: "flex",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "Shrink", value: "0 1 auto" },
       { label: "Grow", value: "1 1 auto" },
@@ -320,7 +319,7 @@ export const position = [
   {
     label: "Position",
     key: "position",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "Static", value: "static" },
       { label: "Relative", value: "relative" },
@@ -356,7 +355,7 @@ export const position = [
   {
     label: "Z-index",
     key: "z-index",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "-9999", value: "-9999" },
       { label: "-3", value: "-3" },
@@ -375,7 +374,7 @@ export const typography = [
   {
     label: "Font",
     key: "font-family",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "Arial", value: "Arial" },
       { label: "Arial Black", value: "Arial Black" },
@@ -397,7 +396,7 @@ export const typography = [
   {
     label: "Weight",
     key: "font-weight",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "200", value: "200" },
       { label: "300", value: "300" },
@@ -412,7 +411,7 @@ export const typography = [
   {
     label: "size",
     key: "font-size",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "8px", value: "8px" },
       { label: "10px", value: "10px" },
@@ -431,7 +430,7 @@ export const typography = [
   {
     label: "Line H",
     key: "line-height",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "1", value: "1" },
       { label: "1.25", value: "1.25" },
@@ -472,7 +471,7 @@ export const typography = [
   {
     label: "Decoration",
     key: "text-decoration-line",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "Underline", value: "underline" },
       { label: "Overline", value: "overline" },
@@ -491,7 +490,7 @@ export const background = [
   {
     label: "Gradient",
     key: "background-image",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "none" },
       {
@@ -577,7 +576,7 @@ export const border = [
   {
     label: "Radius",
     key: "border-radius",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0" },
       { label: "X Small", value: "0.125rem" },
@@ -592,7 +591,7 @@ export const border = [
   {
     label: "Width",
     key: "border-width",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0" },
       { label: "X Small", value: "0.5px" },
@@ -610,7 +609,7 @@ export const border = [
   {
     label: "Style",
     key: "border-style",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "none" },
       { label: "Hidden", value: "hidden" },
@@ -630,7 +629,7 @@ export const effects = [
   {
     label: "Opacity",
     key: "opacity",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "0", value: "0" },
       { label: "0.2", value: "0.2" },
@@ -643,7 +642,7 @@ export const effects = [
   {
     label: "Rotate",
     key: "transform",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "0" },
       { label: "45 deg", value: "rotate(45deg)" },
@@ -659,7 +658,7 @@ export const effects = [
   {
     label: "Shadow",
     key: "box-shadow",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "none" },
       { label: "X Small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
@@ -691,7 +690,7 @@ export const transitions = [
   {
     label: "Property",
     key: "transition-property",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "None", value: "none" },
       { label: "All", value: "all" },
@@ -711,7 +710,7 @@ export const transitions = [
   {
     label: "Duration",
     key: "transition-duration",
-    control: OptionSelect,
+    control: Select,
     placeholder: "sec",
     options: [
       { label: "0.4s", value: "0.4s" },
@@ -725,7 +724,7 @@ export const transitions = [
   {
     label: "Ease",
     key: "transition-timing-function",
-    control: OptionSelect,
+    control: Select,
     options: [
       { label: "Linear", value: "linear" },
       { label: "Ease", value: "ease" },
diff --git a/packages/builder/src/components/feedback/FeedbackIframe.svelte b/packages/builder/src/components/feedback/FeedbackIframe.svelte
index 17c6059de4..3a23d818da 100644
--- a/packages/builder/src/components/feedback/FeedbackIframe.svelte
+++ b/packages/builder/src/components/feedback/FeedbackIframe.svelte
@@ -13,7 +13,7 @@
   // this means that we can submit using the Builder's posthog setup
   window.addEventListener(
     "message",
-    function(ev) {
+    function (ev) {
       if (ev.origin !== feedbackUrl) return
 
       if (ev.data.type === "loaded") {
diff --git a/packages/builder/src/components/feedback/FeedbackNavLink.svelte b/packages/builder/src/components/feedback/FeedbackNavLink.svelte
index 5b7a2faf2a..791448c7e6 100644
--- a/packages/builder/src/components/feedback/FeedbackNavLink.svelte
+++ b/packages/builder/src/components/feedback/FeedbackNavLink.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Popover } from "@budibase/bbui"
+  import { Icon, Popover } from "@budibase/bbui"
   import { store } from "builderStore"
   import { onMount } from "svelte"
 
@@ -23,7 +23,7 @@
 </script>
 
 <div class="container" bind:this={iconContainer} on:click={popover.show}>
-  <i class="ri-feedback-line" class:highlight={$store.highlightFeedbackIcon} />
+  <Icon hoverable name="Feedback" />
 </div>
 <div class="iframe">
   <Popover bind:this={popover} anchor={iconContainer} align="right">
@@ -32,15 +32,6 @@
 </div>
 
 <style>
-  i {
-    font-size: 18px;
-    color: var(--grey-7);
-  }
-  i.highlight {
-    color: var(--blue);
-    filter: drop-shadow(0 0 20px var(--blue));
-  }
-
   .container {
     cursor: pointer;
     color: var(--grey-7);
@@ -54,9 +45,6 @@
     height: 24px;
     width: 24px;
   }
-  .container:hover i {
-    color: var(--ink);
-  }
 
   .iframe :global(.menu-container) {
     background-color: white;
diff --git a/packages/builder/src/components/integration/KeyValueBuilder.svelte b/packages/builder/src/components/integration/KeyValueBuilder.svelte
index b104f5676d..842e6057b0 100644
--- a/packages/builder/src/components/integration/KeyValueBuilder.svelte
+++ b/packages/builder/src/components/integration/KeyValueBuilder.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Button, Input } from "@budibase/bbui"
+  import { Icon, Button, Input } from "@budibase/bbui"
 
   export let defaults
   export let object = defaults || {}
@@ -25,15 +25,17 @@
 <!-- Builds Objects with Key Value Pairs. Useful for building things like Request Headers. -->
 <div class="container" class:readOnly>
   {#each fields as field, idx}
-    <Input placeholder="Key" thin outline bind:value={field.name} />
-    <Input placeholder="Value" thin outline bind:value={field.value} />
+    <Input placeholder="Key" bind:value={field.name} />
+    <Input placeholder="Value" bind:value={field.value} />
     {#if !readOnly}
-      <i class="ri-close-circle-fill" on:click={() => deleteEntry(idx)} />
+      <Icon hoverable name="Close" on:click={() => deleteEntry(idx)} />
     {/if}
   {/each}
 </div>
 {#if !readOnly}
-  <Button secondary thin outline on:click={addEntry}>Add</Button>
+  <div>
+    <Button secondary thin outline on:click={addEntry}>Add</Button>
+  </div>
 {/if}
 
 <style>
diff --git a/packages/builder/src/components/integration/QueryEditor.svelte b/packages/builder/src/components/integration/QueryEditor.svelte
index c4d42e9812..47f47c0fc1 100644
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/packages/builder/src/components/integration/QueryEditor.svelte
@@ -1,6 +1,6 @@
 <script>
   import CodeMirror from "./codemirror"
-  import { Label, Spacer } from "@budibase/bbui"
+  import { Label } from "@budibase/bbui"
   import { onMount, createEventDispatcher } from "svelte"
   import { themeStore } from "builderStore"
 
@@ -132,6 +132,10 @@
 
     if (destroyed) return
 
+    CodeMirror.commands.autocomplete = function (cm) {
+      CodeMirror.showHint(cm, CodeMirror.hint.javascript)
+    }
+
     editor = CodeMirror.fromTextArea(refs.editor, opts)
 
     editor.on("change", instance => {
@@ -166,7 +170,6 @@
 
 {#if label}
   <Label small>{label}</Label>
-  <Spacer medium />
 {/if}
 <div style={`--code-mirror-height: ${editorHeight}px`}>
   <textarea tabindex="0" bind:this={refs.editor} readonly {value} />
@@ -177,6 +180,10 @@
     visibility: hidden;
   }
 
+  div {
+    margin-top: var(--spacing-s);
+  }
+
   div :global(.CodeMirror) {
     height: var(--code-mirror-height) !important;
     border-radius: var(--border-radius-s);
diff --git a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
index 31ed818293..640c215aa1 100644
--- a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Label, Spacer, Input } from "@budibase/bbui"
+  import { Label, Layout, Input } from "@budibase/bbui"
   import Editor from "./QueryEditor.svelte"
   import KeyValueBuilder from "./KeyValueBuilder.svelte"
 
@@ -15,22 +15,22 @@
 </script>
 
 <form on:submit|preventDefault>
-  <div class="field">
+  <Layout noPadding gap="S">
     {#each schemaKeys as field}
-      {#if schema.fields[field]?.type === 'object'}
+      {#if schema.fields[field]?.type === "object"}
         <div>
           <Label small>{field}</Label>
-          <Spacer small />
           <KeyValueBuilder readOnly={!editable} bind:object={fields[field]} />
         </div>
-      {:else if schema.fields[field]?.type === 'json'}
+      {:else if schema.fields[field]?.type === "json"}
         <div>
           <Label extraSmall grey>{field}</Label>
           <Editor
             mode="json"
             on:change={({ detail }) => (fields[field] = detail.value)}
             readOnly={!editable}
-            value={fields[field]} />
+            value={fields[field]}
+          />
         </div>
       {:else}
         <div class="horizontal">
@@ -41,11 +41,12 @@
             disabled={!editable}
             type={schema.fields[field]?.type}
             required={schema.fields[field]?.required}
-            bind:value={fields[field]} />
+            bind:value={fields[field]}
+          />
         </div>
       {/if}
     {/each}
-  </div>
+  </Layout>
 </form>
 {#if schema.customisable}
   <Editor
@@ -53,7 +54,8 @@
     mode="json"
     on:change={updateCustomFields}
     readOnly={!editable}
-    value={fields.customData} />
+    value={fields.customData}
+  />
 {/if}
 
 <style>
diff --git a/packages/builder/src/components/integration/QueryParameterBuilder.svelte b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
index 8d5f39e6a7..618cb2b442 100644
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@@ -1,10 +1,10 @@
 <script>
-  import { Body, Button, Input, Heading, Spacer } from "@budibase/bbui"
+  import { Icon, Body, Button, Input, Heading, Layout } from "@budibase/bbui"
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/dataBinding"
-  import DrawerBindableInput from "components/common/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   export let bindable = true
   export let parameters = []
@@ -29,14 +29,14 @@
   }
 </script>
 
-<section>
+<Layout paddingX="none" gap="S">
   <div class="controls">
-    <Heading small lh>Parameters</Heading>
+    <Heading size="XS">Parameters</Heading>
     {#if !bindable}
       <Button secondary on:click={newQueryParameter}>Add Param</Button>
     {/if}
   </div>
-  <Body small grey>
+  <Body size="S">
     {#if !bindable}
       Parameters come in two parts: the parameter name, and a default/fallback
       value.
@@ -45,35 +45,42 @@
       values left blank.
     {/if}
   </Body>
-  <Spacer large />
   <div class="parameters" class:bindable>
     {#each parameters as parameter, idx}
       <Input
         placeholder="Parameter Name"
         thin
         disabled={bindable}
-        bind:value={parameter.name} />
+        bind:value={parameter.name}
+      />
       <Input
         placeholder="Default"
         thin
         disabled={bindable}
-        bind:value={parameter.default} />
+        bind:value={parameter.default}
+      />
       {#if bindable}
         <DrawerBindableInput
           title={`Query parameter "${parameter.name}"`}
           placeholder="Value"
           thin
           on:change={evt => onBindingChange(parameter.name, evt.detail)}
-          value={runtimeToReadableBinding(bindings, customParams?.[parameter.name])}
-          {bindings} />
+          value={runtimeToReadableBinding(
+            bindings,
+            customParams?.[parameter.name]
+          )}
+          {bindings}
+        />
       {:else}
-        <i
-          class="ri-close-circle-line delete"
-          on:click={() => deleteQueryParameter(idx)} />
+        <Icon
+          hoverable
+          name="Close"
+          on:click={() => deleteQueryParameter(idx)}
+        />
       {/if}
     {/each}
   </div>
-</section>
+</Layout>
 
 <style>
   .parameters.bindable {
@@ -92,16 +99,5 @@
     grid-template-columns: 1fr 1fr 5%;
     grid-gap: 10px;
     align-items: center;
-    margin-bottom: var(--spacing-xl);
-  }
-
-  .delete {
-    transition: all 0.2s;
-  }
-
-  .delete:hover {
-    transform: scale(1.1);
-    font-weight: 500;
-    cursor: pointer;
   }
 </style>
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index ca931f26d7..ea2b5a94a4 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -1,46 +1,39 @@
 <script>
   import { goto } from "@roxi/routify"
   import {
+    Icon,
     Select,
     Button,
+    ButtonGroup,
     Body,
     Label,
+    Layout,
     Input,
     Heading,
-    Spacer,
-    Switcher,
+    Tabs,
+    Tab,
   } from "@budibase/bbui"
-  import { notifier } from "builderStore/store/notifications"
+  import { notifications, Divider } from "@budibase/bbui"
   import api from "builderStore/api"
   import IntegrationQueryEditor from "components/integration/index.svelte"
   import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
   import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
   import { datasources, integrations, queries } from "stores/backend"
-
-  const PREVIEW_HEADINGS = [
-    {
-      title: "JSON",
-      key: "JSON",
-    },
-    {
-      title: "Schema",
-      key: "SCHEMA",
-    },
-    {
-      title: "Preview",
-      key: "PREVIEW",
-    },
-  ]
+  import { capitalise } from "../../helpers"
 
   export let query
   export let fields = []
 
-  let tab = "JSON"
   let parameters
   let data = []
+  const typeOptions = [
+    { label: "Text", value: "STRING" },
+    { label: "Number", value: "NUMBER" },
+    { label: "Boolean", value: "BOOLEAN" },
+    { label: "Datetime", value: "DATETIME" },
+  ]
 
   $: datasource = $datasources.list.find(ds => ds._id === query.datasourceId)
-
   $: query.schema = fields.reduce(
     (acc, next) => ({
       ...acc,
@@ -51,12 +44,9 @@
     }),
     {}
   )
-
   $: datasourceType = datasource?.source
-
   $: integrationInfo = $integrations[datasourceType]
   $: queryConfig = integrationInfo?.query
-
   $: shouldShowQueryConfig = queryConfig && query.queryVerb
 
   function newField() {
@@ -89,13 +79,13 @@
       data = json.rows || []
 
       if (data.length === 0) {
-        notifier.info(
+        notifications.info(
           "Query results empty. Please execute a query with results to create your schema."
         )
         return
       }
 
-      notifier.success("Query executed successfully.")
+      notifications.success("Query executed successfully.")
 
       // Assume all the fields are strings and create a basic schema from the
       // unique fields returned by the server
@@ -104,7 +94,7 @@
         type: "STRING",
       }))
     } catch (err) {
-      notifier.danger(`Query Error: ${err.message}`)
+      notifications.error(`Query Error: ${err.message}`)
       console.error(err)
     }
   }
@@ -112,138 +102,109 @@
   async function saveQuery() {
     try {
       const { _id } = await queries.save(query.datasourceId, query)
-      notifier.success(`Query saved successfully.`)
-      $goto(`../../${_id}`)
+      notifications.success(`Query saved successfully.`)
+      $goto(`../${_id}`)
     } catch (err) {
       console.error(err)
-      notifier.danger(`Error creating query. ${err.message}`)
+      notifications.error(`Error creating query. ${err.message}`)
     }
   }
 </script>
 
-<section class="config">
-  <Heading medium lh>Query {integrationInfo?.friendlyName}</Heading>
-  <hr />
-  <Spacer extraLarge />
-  <Heading small lh>Config</Heading>
-  <Body small grey>Provide a name for your query and select its function.</Body>
-  <Spacer large />
-  <div class="config-field">
-    <Label small>Query Name</Label>
-    <Input thin outline bind:value={query.name} />
-  </div>
-  <Spacer extraLarge />
-  {#if queryConfig}
+<Layout gap="S" noPadding>
+  <Heading size="M">Query {integrationInfo?.friendlyName}</Heading>
+  <Divider />
+  <Heading size="S">Config</Heading>
+  <div class="config">
     <div class="config-field">
-      <Label small>Function</Label>
-      <Select primary outline thin bind:value={query.queryVerb}>
-        {#each Object.keys(queryConfig) as queryVerb}
-          <option value={queryVerb}>
-            {queryConfig[queryVerb]?.displayName || queryVerb}
-          </option>
-        {/each}
-      </Select>
+      <Label>Query Name</Label>
+      <Input bind:value={query.name} />
     </div>
-    <Spacer extraLarge />
-    <hr />
-    <Spacer extraLarge />
-    <Spacer small />
-    <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
-    <hr />
-  {/if}
-</section>
-
-{#if shouldShowQueryConfig}
-  <section>
-    <Spacer extraLarge />
-    <Spacer small />
+    {#if queryConfig}
+      <div class="config-field">
+        <Label>Function</Label>
+        <Select
+          bind:value={query.queryVerb}
+          options={Object.keys(queryConfig)}
+          getOptionLabel={verb =>
+            queryConfig[verb]?.displayName || capitalise(verb)}
+        />
+      </div>
+      <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
+    {/if}
+  </div>
+  {#if shouldShowQueryConfig}
+    <Divider />
     <div class="config">
-      <Heading small lh>Fields</Heading>
-      <Body small grey>Fill in the fields specific to this query.</Body>
-      <Spacer medium />
-      <Spacer extraLarge />
+      <Heading size="S">Fields</Heading>
+      <Body size="S">Fill in the fields specific to this query.</Body>
       <IntegrationQueryEditor
         {datasource}
         {query}
+        height={300}
         schema={queryConfig[query.queryVerb]}
-        bind:parameters />
-      <Spacer extraLarge />
-      <hr />
-      <Spacer extraLarge />
-      <Spacer medium />
-      <div class="viewer-controls">
-        <Heading small lh>Results</Heading>
-        <div class="button-container">
-          <Button
-            secondary
-            thin
-            disabled={data.length === 0 || !query.name}
-            on:click={saveQuery}>
-            Save Query
-          </Button>
-          <Spacer medium />
-          <Button thin primary on:click={previewQuery}>Run Query</Button>
-        </div>
-      </div>
-      <Body small grey>
-        Below, you can preview the results from your query and change the
-        schema.
-      </Body>
-
-      <Spacer extraLarge />
-      <Spacer medium />
-
-      <section class="viewer">
-        {#if data}
-          <Switcher headings={PREVIEW_HEADINGS} bind:value={tab}>
-            {#if tab === 'JSON'}
-              <pre
-                class="preview">
+        bind:parameters
+      />
+      <Divider />
+    </div>
+    <div class="viewer-controls">
+      <Heading size="S">Results</Heading>
+      <ButtonGroup>
+        <Button
+          cta
+          disabled={data.length === 0 || !query.name}
+          on:click={saveQuery}
+        >
+          Save Query
+        </Button>
+        <Button secondary on:click={previewQuery}>Run Query</Button>
+      </ButtonGroup>
+    </div>
+    <Body size="S">
+      Below, you can preview the results from your query and change the schema.
+    </Body>
+    <section class="viewer">
+      {#if data}
+        <Tabs selected="JSON">
+          <Tab title="JSON">
+            <pre
+              class="preview">
                 <!-- prettier-ignore -->
                 {#if !data[0]}
-                  
                   Please run your query to fetch some data.
-
                 {:else}
                   {JSON.stringify(data[0], undefined, 2)}
                 {/if}
-            </pre>
-            {:else if tab === 'PREVIEW'}
-              <ExternalDataSourceTable {query} {data} />
-            {:else if tab === 'SCHEMA'}
+              </pre>
+          </Tab>
+          <Tab title="Schema">
+            <Layout gap="S">
               {#each fields as field, idx}
-                <Spacer small />
                 <div class="field">
-                  <Input
-                    outline
-                    placeholder="Field Name"
-                    type={'text'}
-                    bind:value={field.name} />
-                  <Select thin border bind:value={field.type}>
-                    <option value={''}>Select a field type</option>
-                    <option value={'STRING'}>Text</option>
-                    <option value={'NUMBER'}>Number</option>
-                    <option value={'BOOLEAN'}>Boolean</option>
-                    <option value={'DATETIME'}>Datetime</option>
-                  </Select>
-                  <i
-                    class="ri-close-circle-line delete"
-                    on:click={() => deleteField(idx)} />
+                  <Input placeholder="Field Name" bind:value={field.name} />
+                  <Select bind:value={field.type} options={typeOptions} />
+                  <Icon name="bleClose" on:click={() => deleteField(idx)} />
                 </div>
               {/each}
-              <Spacer small />
-              <Button thin secondary on:click={newField}>Add Field</Button>
-            {/if}
-          </Switcher>
-        {/if}
-      </section>
-    </div>
-  </section>
-{/if}
-<Spacer extraLarge />
-<Spacer extraLarge />
+              <div>
+                <Button secondary on:click={newField}>Add Field</Button>
+              </div>
+            </Layout>
+          </Tab>
+          <Tab title="Preview">
+            <ExternalDataSourceTable {query} {data} />
+          </Tab>
+        </Tabs>
+      {/if}
+    </section>
+  {/if}
+</Layout>
 
 <style>
+  .config {
+    display: grid;
+    grid-gap: var(--spacing-s);
+  }
   .config-field {
     display: grid;
     grid-template-columns: 20% 1fr;
@@ -261,15 +222,6 @@
     display: flex;
   }
 
-  hr {
-    margin-top: var(--layout-m);
-    border: 1px solid var(--grey-2);
-  }
-
-  .config {
-    margin-bottom: var(--spacing-s);
-  }
-
   .delete {
     align-self: center;
     cursor: pointer;
@@ -285,10 +237,10 @@
     overflow-y: auto;
     overflow-wrap: break-word;
     white-space: pre-wrap;
-    background-color: var(--grey-1);
+    background-color: var(--grey-2);
     padding: var(--spacing-m);
     border-radius: 8px;
-    color: var(--grey-6);
+    color: var(--ink);
   }
 
   .viewer-controls {
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index 21cdcd0577..a6477370c8 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -34,7 +34,8 @@
         on:change={updateQuery}
         readOnly={!editable}
         value={query.fields.sql}
-        parameters={query.parameters} />
+        parameters={query.parameters}
+      />
     {:else if schema.type === QueryTypes.JSON}
       <Editor
         editorHeight={height}
@@ -43,7 +44,8 @@
         on:change={updateQuery}
         readOnly={!editable}
         value={query.fields.json}
-        parameters={query.parameters} />
+        parameters={query.parameters}
+      />
     {:else if schema.type === QueryTypes.FIELDS}
       <FieldsBuilder bind:fields={query.fields} {schema} {editable} />
       {#if schema.urlDisplay}
diff --git a/packages/builder/src/components/login/LoginForm.svelte b/packages/builder/src/components/login/LoginForm.svelte
index 888054df1b..4de003379b 100644
--- a/packages/builder/src/components/login/LoginForm.svelte
+++ b/packages/builder/src/components/login/LoginForm.svelte
@@ -1,6 +1,12 @@
 <script>
-  import { Button, Label, Input, Spacer } from "@budibase/bbui"
-  import { notifier } from "builderStore/store/notifications"
+  import {
+    notifications,
+    Button,
+    Link,
+    Input,
+    Modal,
+    ModalContent,
+  } from "@budibase/bbui"
   import { auth } from "stores/backend"
 
   let username = ""
@@ -12,39 +18,52 @@
         username,
         password,
       })
-      notifier.success("Logged in successfully.")
+      notifications.success("Logged in successfully.")
     } catch (err) {
       console.error(err)
-      notifier.danger("Invalid credentials")
+      notifications.error("Invalid credentials")
     }
   }
 
   async function createTestUser() {
     try {
       await auth.firstUser()
-      notifier.success("Test user created")
+      notifications.success("Test user created")
     } catch (err) {
       console.error(err)
-      notifier.danger("Could not create test user")
+      notifications.error("Could not create test user")
     }
   }
 </script>
 
-<form on:submit|preventDefault data-cy="login-form">
-  <Spacer large />
-  <Label small>Email</Label>
-  <Input outline bind:value={username} />
-  <Spacer large />
-  <Label small>Password</Label>
-  <Input outline type="password" on:change bind:value={password} />
-  <Spacer large />
-  <Button primary on:click={login}>Login</Button>
-  <a target="_blank" href="/api/admin/auth/google">Sign In With Google</a>
-  <Button secondary on:click={createTestUser}>Create Test User</Button>
-</form>
+<Modal fixed>
+  <ModalContent
+    size="L"
+    title="Log In"
+    onConfirm={login}
+    confirmText="Log In"
+    showCancelButton={false}
+    showCloseIcon={false}
+  >
+    <Input label="Email" bind:value={username} />
+    <Input label="Password" type="password" on:change bind:value={password} />
+    <div class="footer" slot="footer">
+      <Link target="_blank" href="/api/admin/auth/google">
+        Sign In With Google
+      </Link>
+      <Button secondary on:click={createTestUser}>Create Test User</Button>
+    </div>
+  </ModalContent>
+</Modal>
 
 <style>
-  form {
-    width: 60%;
+  .footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  .footer :global(a) {
+    margin-right: var(--spectrum-global-dimension-static-size-200);
   }
 </style>
diff --git a/packages/builder/src/components/settings/Integration.svelte b/packages/builder/src/components/settings/Integration.svelte
index f588649c9d..cd2a38ba1b 100644
--- a/packages/builder/src/components/settings/Integration.svelte
+++ b/packages/builder/src/components/settings/Integration.svelte
@@ -15,7 +15,7 @@
   </div>
   <div class="footer">
     <Button wide error={remove} secondary={!remove} on:click>
-      <span>{remove ? 'Remove' : 'Add'}</span>
+      <span>{remove ? "Remove" : "Add"}</span>
     </Button>
   </div>
 </div>
diff --git a/packages/builder/src/components/settings/Link.svelte b/packages/builder/src/components/settings/Link.svelte
index 41e09104f9..88bd698dc1 100644
--- a/packages/builder/src/components/settings/Link.svelte
+++ b/packages/builder/src/components/settings/Link.svelte
@@ -1,6 +1,6 @@
 <script>
   import SettingsModal from "./SettingsModal.svelte"
-  import { Modal } from "@budibase/bbui"
+  import { Modal, Icon } from "@budibase/bbui"
 
   let modal
 </script>
@@ -8,8 +8,9 @@
 <div
   class="topnavitemright settings"
   data-cy="settings-icon"
-  on:click={modal.show}>
-  <i class="ri-settings-3-line" />
+  on:click={modal.show}
+>
+  <Icon hoverable name="Settings" />
 </div>
 <Modal bind:this={modal} width="600px">
   <SettingsModal />
diff --git a/packages/builder/src/components/settings/SettingsModal.svelte b/packages/builder/src/components/settings/SettingsModal.svelte
index 9b83b506ba..5563ad9fbd 100644
--- a/packages/builder/src/components/settings/SettingsModal.svelte
+++ b/packages/builder/src/components/settings/SettingsModal.svelte
@@ -1,38 +1,25 @@
 <script>
   import { General, DangerZone, APIKeys } from "./tabs"
-  import { Switcher, ModalContent } from "@budibase/bbui"
-
-  const tabs = [
-    {
-      title: "General",
-      key: "GENERAL",
-      component: General,
-    },
-    {
-      title: "API Keys",
-      key: "API_KEYS",
-      component: APIKeys,
-    },
-    {
-      title: "Danger Zone",
-      key: "DANGERZONE",
-      component: DangerZone,
-    },
-  ]
-
-  let value = "GENERAL"
-
-  $: selectedTab = tabs.find(tab => tab.key === value).component
+  import { ModalContent, Tab, Tabs } from "@budibase/bbui"
 </script>
 
 <ModalContent
   title="Settings"
   showConfirmButton={false}
-  showCancelButton={false}>
+  showCancelButton={false}
+>
   <div class="container">
-    <Switcher headings={tabs} bind:value>
-      <svelte:component this={selectedTab} />
-    </Switcher>
+    <Tabs selected="General">
+      <Tab title="General">
+        <General />
+      </Tab>
+      <Tab title="API Keys">
+        <APIKeys />
+      </Tab>
+      <Tab title="Danger Zone">
+        <DangerZone />
+      </Tab>
+    </Tabs>
   </div>
 </ModalContent>
 
diff --git a/packages/builder/src/components/settings/ThemeEditor.svelte b/packages/builder/src/components/settings/ThemeEditor.svelte
index 895843b2f7..8e387b6492 100644
--- a/packages/builder/src/components/settings/ThemeEditor.svelte
+++ b/packages/builder/src/components/settings/ThemeEditor.svelte
@@ -1,54 +1,12 @@
 <script>
   import { themeStore } from "builderStore"
-  import { Label, Toggle, Button, Slider } from "@budibase/bbui"
-
-  let showAdvanced = false
+  import { Select } from "@budibase/bbui"
+  import { capitalise } from "../../helpers"
 </script>
 
-<div class="content">
-  <div>
-    <Toggle thin text="Dark theme" bind:checked={$themeStore.darkMode} />
-  </div>
-  {#if $themeStore.darkMode && !showAdvanced}
-    <div class="button">
-      <Button text on:click={() => (showAdvanced = true)}>Customise</Button>
-    </div>
-  {/if}
-  {#if $themeStore.darkMode && showAdvanced}
-    <Slider
-      label="Hue"
-      bind:value={$themeStore.hue}
-      min="0"
-      max="360"
-      showValue />
-    <Slider
-      label="Saturation"
-      bind:value={$themeStore.saturation}
-      min="0"
-      max="100"
-      showValue />
-    <Slider
-      label="Lightness"
-      bind:value={$themeStore.lightness}
-      min="0"
-      max="32"
-      showValue />
-    <div class="button">
-      <Button text on:click={themeStore.reset}>Reset</Button>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .content {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-l);
-  }
-
-  .button {
-    align-self: flex-start;
-  }
-</style>
+<Select
+  options={$themeStore.options}
+  bind:value={$themeStore.theme}
+  placeholder={null}
+  getOptionLabel={capitalise}
+/>
diff --git a/packages/builder/src/components/settings/ThemeEditorDropdown.svelte b/packages/builder/src/components/settings/ThemeEditorDropdown.svelte
index 99e018843e..8e1a9a4601 100644
--- a/packages/builder/src/components/settings/ThemeEditorDropdown.svelte
+++ b/packages/builder/src/components/settings/ThemeEditorDropdown.svelte
@@ -1,32 +1,24 @@
 <script>
-  import { Label, DropdownMenu } from "@budibase/bbui"
+  import { Icon, Label, Modal, ModalContent } from "@budibase/bbui"
   import ThemeEditor from "./ThemeEditor.svelte"
 
-  let anchor
-  let popover
+  let modal
 </script>
 
-<div class="topnavitemright" on:click={popover.show} bind:this={anchor}>
-  <i class="ri-paint-fill" />
-</div>
-<div class="dropdown">
-  <DropdownMenu bind:this={popover} {anchor} align="right">
-    <div class="content">
-      <Label extraSmall grey>Theme</Label>
-      <ThemeEditor />
-    </div>
-  </DropdownMenu>
+<div class="topnavitemright" on:click={modal.show}>
+  <Icon hoverable name="ColorFill" />
 </div>
+<Modal bind:this={modal}>
+  <ModalContent
+    title="Builder Theme"
+    confirmText="Done"
+    showCancelButton={false}
+  >
+    <ThemeEditor />
+  </ModalContent>
+</Modal>
 
 <style>
-  .dropdown {
-    z-index: 2;
-  }
-
-  i {
-    font-size: 18px;
-    color: var(--grey-7);
-  }
   .topnavitemright {
     cursor: pointer;
     color: var(--grey-7);
@@ -40,11 +32,4 @@
     height: 24px;
     width: 24px;
   }
-  .topnavitemright:hover i {
-    color: var(--ink);
-  }
-
-  .content {
-    padding: var(--spacing-xl);
-  }
 </style>
diff --git a/packages/builder/src/components/settings/tabs/APIKeys.svelte b/packages/builder/src/components/settings/tabs/APIKeys.svelte
index 45dedf0041..d6a9976638 100644
--- a/packages/builder/src/components/settings/tabs/APIKeys.svelte
+++ b/packages/builder/src/components/settings/tabs/APIKeys.svelte
@@ -1,7 +1,7 @@
 <script>
-  import { Input, Label, TextButton } from "@budibase/bbui"
+  import { Input, Label, Link } from "@budibase/bbui"
   import api from "builderStore/api"
-  import { notifier } from "builderStore/store/notifications"
+  import { notifications } from "@budibase/bbui"
   import { database } from "stores/backend"
   import analytics from "analytics"
 
@@ -11,7 +11,7 @@
     if (key === "budibase") {
       const isValid = await analytics.identifyByApiKey(value)
       if (!isValid) {
-        notifier.danger("Your API Key is invalid.")
+        notifications.error("Your API Key is invalid.")
         keys = { ...keys }
         return
       }
@@ -19,7 +19,7 @@
     const response = await api.put(`/api/keys/${key}`, { value })
     const res = await response.json()
     keys = { ...keys, ...res }
-    notifier.success("API Key saved.")
+    notifications.success("API Key saved.")
   }
 
   // Get Keys
@@ -36,14 +36,13 @@
 
 <div class="container">
   <Input
-    on:save={e => updateKey(['budibase', e.detail])}
-    thin
-    edit
+    on:change={e => updateKey(["budibase", e.detail])}
     value={keys.budibase}
-    label="Budibase Cloud API Key" />
-  <TextButton text medium blue href="https://portal.budi.live">
+    label="Budibase Cloud API Key"
+  />
+  <Link primary href="https://portal.budi.live">
     Log in to the Budibase Hosting Portal to get your API Key. →
-  </TextButton>
+  </Link>
   <div>
     <Label extraSmall grey>Instance ID (Webhooks)</Label>
     <span>{$database._id}</span>
diff --git a/packages/builder/src/components/settings/tabs/DangerZone.svelte b/packages/builder/src/components/settings/tabs/DangerZone.svelte
index 4ad6ba3605..1144e8c666 100644
--- a/packages/builder/src/components/settings/tabs/DangerZone.svelte
+++ b/packages/builder/src/components/settings/tabs/DangerZone.svelte
@@ -1,6 +1,6 @@
 <script>
   import { params, goto } from "@roxi/routify"
-  import { Input, TextArea, Button, Body } from "@budibase/bbui"
+  import { Input, Button, Body } from "@budibase/bbui"
   import { del } from "builderStore/api"
 
   let value = ""
@@ -19,21 +19,19 @@
   <Body>
     Type
     <b>DELETE</b>
-    into the textbox, then click the following button to delete your entire web
-    app.
+    into the textbox, then click the following button to delete your entire web app.
   </Body>
   <Input
-    on:change={e => (value = e.target.value)}
-    on:input={e => (value = e.target.value)}
-    thin
+    on:change={e => (value = e.detail)}
     disabled={loading}
-    placeholder="" />
+    placeholder=""
+  />
   <div class="buttons">
     <Button
-      primary
-      disabled={value !== 'DELETE' || loading}
-      red
-      on:click={deleteApp}>
+      warning
+      disabled={value !== "DELETE" || loading}
+      on:click={deleteApp}
+    >
       Delete Entire App
     </Button>
   </div>
diff --git a/packages/builder/src/components/settings/tabs/General.svelte b/packages/builder/src/components/settings/tabs/General.svelte
index f670fcdbb4..d5829f9e72 100644
--- a/packages/builder/src/components/settings/tabs/General.svelte
+++ b/packages/builder/src/components/settings/tabs/General.svelte
@@ -63,14 +63,10 @@
         existingAppUrls.splice(urlIdx, 1)
       }
       nameValidation = {
-        name: string()
-          .required(nameError)
-          .notOneOf(existingAppNames),
+        name: string().required(nameError).notOneOf(existingAppNames),
       }
       urlValidation = {
-        url: string()
-          .required(urlError)
-          .notOneOf(existingAppUrls),
+        url: string().required(urlError).notOneOf(existingAppUrls),
       }
     } else {
       nameValidation = { name: string().required(nameError) }
@@ -80,27 +76,24 @@
 
 <div class="container">
   <Input
-    on:save={e => updateApplication({ name: e.detail })}
-    thin
-    edit
-    bind:value={$store.name}
-    bind:error={nameError}
-    label="App Name" />
-  {#if $hostingStore.hostingInfo.type === 'self'}
+    on:change={e => updateApplication({ name: e.detail })}
+    value={$store.name}
+    error={nameError}
+    label="App Name"
+  />
+  {#if $hostingStore.hostingInfo.type === "self"}
     <Input
-      on:save={e => updateApplication({ url: e.detail })}
-      thin
-      edit
-      bind:value={$store.url}
-      bind:error={urlError}
-      label="App URL" />
+      on:change={e => updateApplication({ url: e.detail })}
+      value={$store.url}
+      error={urlError}
+      label="App URL"
+    />
   {/if}
   <TextArea
-    on:save={e => updateApplication({ description: e.detail })}
-    thin
-    edit
+    on:change={e => updateApplication({ description: e.detail })}
     value={$store.description}
-    label="App Description" />
+    label="App Description"
+  />
 </div>
 
 <style>
diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index 8b8dd65cae..7b48c67f03 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -1,9 +1,7 @@
 <script>
-  import { TextButton } from "@budibase/bbui"
-  import { Heading } from "@budibase/bbui"
-  import { Spacer } from "@budibase/bbui"
-  import api from "builderStore/api"
-  import { notifier } from "builderStore/store/notifications"
+  import { goto } from "@roxi/routify"
+  import { ActionButton, Heading } from "@budibase/bbui"
+  import { notifications } from "@budibase/bbui"
   import Spinner from "components/common/Spinner.svelte"
   import download from "downloadjs"
 
@@ -17,10 +15,10 @@
       download(
         `/api/backups/export?appId=${_id}&appname=${encodeURIComponent(name)}`
       )
-      notifier.success("App Export Complete.")
+      notifications.success("App Export Complete.")
     } catch (err) {
       console.error(err)
-      notifier.danger("App Export Failed.")
+      notifications.error("App Export Failed.")
     } finally {
       appExportLoading = false
     }
@@ -28,17 +26,18 @@
 </script>
 
 <div class="apps-card">
-  <Heading small black>{name}</Heading>
-  <Spacer medium />
+  <Heading size="S">{name}</Heading>
   <div class="card-footer" data-cy={`app-${name}`}>
-    <TextButton text medium blue href="/builder/{_id}">
+    <ActionButton on:click={() => $goto(`/builder/${_id}`)}>
       Open
       {name}
       →
-    </TextButton>
+    </ActionButton>
     {#if appExportLoading}
       <Spinner size="10" />
-    {:else}<i class="ri-folder-download-line" on:click={exportApp} />{/if}
+    {:else}
+      <ActionButton icon="Download" quiet />
+    {/if}
   </div>
 </div>
 
@@ -58,6 +57,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+    margin-top: var(--spacing-m);
   }
 
   i {
diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte
index aeed85655e..d868a69c64 100644
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/packages/builder/src/components/start/AppList.svelte
@@ -1,6 +1,6 @@
 <script>
   import AppCard from "./AppCard.svelte"
-  import { Heading } from "@budibase/bbui"
+  import { Heading, Divider } from "@budibase/bbui"
   import Spinner from "components/common/Spinner.svelte"
   import { get } from "builderStore/api"
 
@@ -19,22 +19,17 @@
 </script>
 
 <div class="root">
-  <Heading lh medium black>Your Apps</Heading>
+  <Heading size="M">Your Apps</Heading>
+  <Divider size="M" />
   {#await promise}
     <div class="spinner-container">
       <Spinner size="30" />
     </div>
   {:then apps}
-    <div class="inner">
-      <div>
-        <div>
-          <div class="apps">
-            {#each apps as app}
-              <AppCard {...app} />
-            {/each}
-          </div>
-        </div>
-      </div>
+    <div class="apps">
+      {#each apps as app}
+        <AppCard {...app} />
+      {/each}
     </div>
   {:catch err}
     <h1 style="color:red">{err}</h1>
@@ -42,10 +37,14 @@
 </div>
 
 <style>
+  .root {
+    margin-top: 10px;
+  }
   .apps {
+    margin-top: var(--layout-m);
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    grid-gap: var(--layout-m);
+    grid-gap: var(--layout-s);
     justify-content: start;
   }
 </style>
diff --git a/packages/builder/src/components/start/BuilderSettingsButton.svelte b/packages/builder/src/components/start/BuilderSettingsButton.svelte
index 5f0008e375..45712ad1b4 100644
--- a/packages/builder/src/components/start/BuilderSettingsButton.svelte
+++ b/packages/builder/src/components/start/BuilderSettingsButton.svelte
@@ -1,32 +1,15 @@
 <script>
-  import { TextButton as Button, Modal } from "@budibase/bbui"
+  import { Button, Modal } from "@budibase/bbui"
   import BuilderSettingsModal from "./BuilderSettingsModal.svelte"
 
   let modal
 </script>
 
 <div>
-  <Button text on:click={modal.show}>
-    <i class="ri-settings-3-fill" />
-    <p>Settings</p>
+  <Button primary quiet icon="Settings" text on:click={modal.show}>
+    Settings
   </Button>
 </div>
 <Modal bind:this={modal} width="30%">
   <BuilderSettingsModal />
 </Modal>
-
-<style>
-  div i {
-    font-size: 26px;
-    color: var(--grey-7);
-    margin-left: 12px;
-  }
-
-  div p {
-    font-family: var(--font-sans);
-    font-size: var(--font-size-s);
-    color: var(--ink);
-    font-weight: 400;
-    margin: 0 0 0 12px;
-  }
-</style>
diff --git a/packages/builder/src/components/start/BuilderSettingsModal.svelte b/packages/builder/src/components/start/BuilderSettingsModal.svelte
index 9409820662..f968072758 100644
--- a/packages/builder/src/components/start/BuilderSettingsModal.svelte
+++ b/packages/builder/src/components/start/BuilderSettingsModal.svelte
@@ -1,8 +1,15 @@
 <script>
-  import { notifier } from "builderStore/store/notifications"
   import { hostingStore } from "builderStore"
   import { HostingTypes } from "constants/backend"
-  import { Input, ModalContent, Toggle } from "@budibase/bbui"
+  import {
+    Heading,
+    Divider,
+    notifications,
+    Input,
+    ModalContent,
+    Toggle,
+    Body,
+  } from "@budibase/bbui"
   import ThemeEditor from "components/settings/ThemeEditor.svelte"
   import analytics from "analytics"
   import { onMount } from "svelte"
@@ -23,14 +30,14 @@
     }
     try {
       await hostingStore.actions.save(hostingInfo)
-      notifier.success(`Settings saved.`)
+      notifications.success(`Settings saved.`)
     } catch (err) {
-      notifier.danger(`Failed to update builder settings.`)
+      notifications.error(`Failed to update builder settings.`)
     }
   }
 
   function updateSelfHosting(event) {
-    if (hostingInfo.type === HostingTypes.CLOUD && event.target.checked) {
+    if (hostingInfo.type === HostingTypes.CLOUD && event.detail) {
       hostingInfo.hostingUrl = "localhost:10000"
       hostingInfo.useHttps = false
       hostingInfo.selfHostKey = "budibase"
@@ -52,42 +59,33 @@
 </script>
 
 <ModalContent title="Builder settings" confirmText="Save" onConfirm={save}>
-  <h5>Theme</h5>
+  <Heading size="XS">Theme</Heading>
   <ThemeEditor />
-  <h5>Hosting</h5>
-  <p>
+  <Divider noMargin noGrid />
+  <Heading size="XS">Hosting</Heading>
+  <Body size="S">
     This section contains settings that relate to the deployment and hosting of
     apps made in this builder.
-  </p>
+  </Body>
   <Toggle
-    thin
     text="Self hosted"
     on:change={updateSelfHosting}
-    bind:checked={selfhosted} />
+    bind:value={selfhosted}
+  />
   {#if selfhosted}
     <Input bind:value={hostingInfo.hostingUrl} label="Hosting URL" />
     <Input bind:value={hostingInfo.selfHostKey} label="Hosting Key" />
-    <Toggle thin text="HTTPS" bind:checked={hostingInfo.useHttps} />
+    <Toggle text="HTTPS" bind:value={hostingInfo.useHttps} />
   {/if}
-  <h5>Analytics</h5>
-  <p>
+  <Divider noMargin noGrid />
+  <Heading size="XS">Analytics</Heading>
+  <Body size="S">
     If you would like to send analytics that help us make budibase better,
     please let us know below.
-  </p>
+  </Body>
   <Toggle
-    thin
     text="Send Analytics To Budibase"
-    checked={!analyticsDisabled}
-    on:change={toggleAnalytics} />
+    value={!analyticsDisabled}
+    on:change={toggleAnalytics}
+  />
 </ModalContent>
-
-<style>
-  h5 {
-    margin: 0;
-    font-size: 14px;
-  }
-  p {
-    margin: 0;
-    font-size: 12px;
-  }
-</style>
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 3739b86b76..9202343322 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -1,55 +1,48 @@
 <script>
   import { writable, get as svelteGet } from "svelte/store"
-  import { notifier } from "builderStore/store/notifications"
+  import { notifications, Heading, Button } from "@budibase/bbui"
   import { store, automationStore, hostingStore } from "builderStore"
   import { string, object } from "yup"
   import api, { get } from "builderStore/api"
-  import Form from "@svelteschool/svelte-forms"
   import Spinner from "components/common/Spinner.svelte"
   import { Info, User } from "./Steps"
   import Indicator from "./Indicator.svelte"
-  import { Button } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
   import { fade } from "svelte/transition"
   import { post } from "builderStore/api"
   import analytics from "analytics"
   import { onMount } from "svelte"
   import Logo from "/assets/bb-logo.svg"
-
-  //Move this to context="module" once svelte-forms is updated so that it can bind to stores correctly
-  const createAppStore = writable({ currentStep: 0, values: {} })
+  import { capitalise } from "../../helpers"
 
   export let template
 
-  const infoValidation = {
-    applicationName: string().required("Your application must have a name."),
-  }
-  const userValidation = {
-    roleId: string().required("You need to select a role for your user."),
-  }
+  const currentStep = writable(0)
+  const values = writable({ roleId: "ADMIN" })
+  const errors = writable({})
+  const touched = writable({})
+  const steps = [Info, User]
+  let validators = [
+    {
+      applicationName: string().required("Your application must have a name"),
+    },
+    {
+      roleId: string()
+        .nullable()
+        .required("You need to select a role for this app"),
+    },
+  ]
 
   let submitting = false
-  let errors = {}
-  let validationErrors = {}
-  let validationSchemas = [infoValidation, userValidation]
-
-  function buildStep(component) {
-    return {
-      component,
-      errors,
-    }
-  }
-
-  // steps need to be initialized for cypress from the get go
-  let steps = [buildStep(Info), buildStep(User)]
+  let valid = false
+  $: checkValidity($values, validators[$currentStep])
 
   onMount(async () => {
-    let hostingInfo = await hostingStore.actions.fetch()
-    // re-init the steps based on whether self hosting or cloud hosted
+    const hostingInfo = await hostingStore.actions.fetch()
     if (hostingInfo.type === "self") {
       await hostingStore.actions.fetchDeployedApps()
       const existingAppNames = svelteGet(hostingStore).deployedAppNames
-      infoValidation.applicationName = string()
+      validators[0].applicationName = string()
         .required("Your application must have a name.")
         .test(
           "non-existing-app-name",
@@ -59,54 +52,20 @@
               appName => appName.toLowerCase() === value.toLowerCase()
             )
         )
-
-      steps = [buildStep(Info), buildStep(User)]
-      validationSchemas = [infoValidation, userValidation]
     }
   })
 
-  // Handles form navigation
-  const back = () => {
-    if ($createAppStore.currentStep > 0) {
-      $createAppStore.currentStep -= 1
-    }
-  }
-  const next = () => {
-    $createAppStore.currentStep += 1
-  }
-
-  // $: errors = validationSchemas.validate(values);
-  $: getErrors(
-    $createAppStore.values,
-    validationSchemas[$createAppStore.currentStep]
-  )
-
-  async function getErrors(values, schema) {
+  const checkValidity = async (values, validator) => {
+    const obj = object().shape(validator)
+    Object.keys(validator).forEach(key => ($errors[key] = null))
     try {
-      validationErrors = {}
-      await object(schema).validate(values, { abortEarly: false })
-    } catch (error) {
-      validationErrors = extractErrors(error)
-    }
-  }
-
-  const checkValidity = async (values, currentStep) => {
-    const validity = await object()
-      .shape(validationSchemas[currentStep])
-      .isValid(values)
-    currentStepIsValid = validity
-
-    // Check full form on last step
-    if (currentStep === steps.length - 1) {
-      // Make one big schema from all the small ones
-      const fullSchema = Object.assign({}, ...validationSchemas)
-
-      // Check full form schema
-      const formIsValid = await object()
-        .shape(fullSchema)
-        .isValid(values)
-      fullFormIsValid = formIsValid
+      await obj.validate(values, { abortEarly: false })
+    } catch (validationErrors) {
+      validationErrors.inner.forEach(error => {
+        $errors[error.path] = capitalise(error.message)
+      })
     }
+    valid = await obj.isValid(values)
   }
 
   async function createNewApp() {
@@ -114,7 +73,7 @@
     try {
       // Create form data to create app
       let data = new FormData()
-      data.append("name", $createAppStore.values.applicationName)
+      data.append("name", $values.applicationName)
       data.append("useTemplate", template != null)
       if (template) {
         data.append("templateName", template.name)
@@ -130,7 +89,7 @@
       }
 
       analytics.captureEvent("App Created", {
-        name: $createAppStore.values.applicationName,
+        name: $values.applicationName,
         appId: appJson._id,
         template,
       })
@@ -149,86 +108,70 @@
 
       // Create user
       const user = {
-        roleId: $createAppStore.values.roleId,
+        roleId: $values.roleId,
       }
       const userResp = await api.post(`/api/users/metadata/self`, user)
       await userResp.json()
       $goto(`./${appJson._id}`)
     } catch (error) {
       console.error(error)
-      notifier.danger(error)
+      notifications.error(error)
       submitting = false
     }
   }
-
-  async function updateKey([key, value]) {
-    const response = await api.put(`/api/keys/${key}`, { value })
-    const res = await response.json()
-    return res
-  }
-
-  function extractErrors({ inner }) {
-    if (!inner) return {}
-    return inner.reduce((acc, err) => {
-      return { ...acc, [err.path]: err.message }
-    }, {})
-  }
-
-  let currentStepIsValid = false
-  let fullFormIsValid = false
-  $: checkValidity($createAppStore.values, $createAppStore.currentStep)
-
-  let onChange = () => {}
 </script>
 
 <div class="container">
   <div class="sidebar">
-    {#each steps as { active, done }, i}
-      <Indicator
-        active={$createAppStore.currentStep === i}
-        done={i < $createAppStore.currentStep}
-        step={i + 1} />
-    {/each}
+    <img src={Logo} alt="budibase icon" />
+    <div class="steps">
+      {#each steps as component, i}
+        <Indicator
+          active={$currentStep === i}
+          done={i < $currentStep}
+          step={i + 1}
+        />
+      {/each}
+    </div>
   </div>
   <div class="body">
     <div class="heading">
-      <h3 class="header">Get Started with Budibase</h3>
+      <Heading size="L">Get started with Budibase</Heading>
     </div>
     <div class="step">
-      <Form bind:values={$createAppStore.values}>
-        {#each steps as step, i (i)}
-          <div class:hidden={$createAppStore.currentStep !== i}>
-            <svelte:component
-              this={step.component}
-              {template}
-              {validationErrors}
-              options={step.options}
-              name={step.name} />
-          </div>
-        {/each}
-      </Form>
+      {#each steps as component, i (i)}
+        <div class:hidden={$currentStep !== i}>
+          <svelte:component
+            this={component}
+            {template}
+            {values}
+            {errors}
+            {touched}
+          />
+        </div>
+      {/each}
     </div>
     <div class="footer">
-      {#if $createAppStore.currentStep > 0}
-        <Button medium secondary on:click={back}>Back</Button>
+      {#if $currentStep > 0}
+        <Button medium secondary on:click={() => $currentStep--}>Back</Button>
       {/if}
-      {#if $createAppStore.currentStep < steps.length - 1}
-        <Button medium blue on:click={next} disabled={!currentStepIsValid}>
+      {#if $currentStep < steps.length - 1}
+        <Button medium cta on:click={() => $currentStep++} disabled={!valid}>
           Next
         </Button>
       {/if}
-      {#if $createAppStore.currentStep === steps.length - 1}
+      {#if $currentStep === steps.length - 1}
         <Button
           medium
-          blue
+          cta
           on:click={createNewApp}
-          disabled={!fullFormIsValid || submitting}>
-          {submitting ? 'Loading...' : 'Submit'}
+          disabled={!valid || submitting}
+        >
+          {submitting ? "Loading..." : "Submit"}
         </Button>
       {/if}
     </div>
   </div>
-  <img src={Logo} alt="budibase icon" />
   {#if submitting}
     <div in:fade class="spinner-container">
       <Spinner />
@@ -245,12 +188,20 @@
     position: relative;
   }
   .sidebar {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    padding: 40px 0;
+    background: var(--grey-1);
+  }
+  .steps {
+    flex: 1 1 auto;
     display: grid;
     border-bottom-left-radius: 0.5rem;
     border-top-left-radius: 0.5rem;
     grid-gap: 30px;
     align-content: center;
-    background: var(--grey-1);
   }
   .heading {
     display: flex;
@@ -258,22 +209,18 @@
     align-items: center;
     margin-bottom: 20px;
   }
-  .header {
-    margin: 0;
-    font-size: 24px;
-    font-weight: 600;
-  }
   .body {
-    padding: 40px 60px 60px 60px;
+    padding: 40px 60px 40px 60px;
     display: grid;
     align-items: center;
     grid-template-rows: auto 1fr auto;
   }
   .footer {
-    display: grid;
-    grid-gap: 15px;
-    grid-template-columns: auto auto;
-    justify-content: end;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 15px;
   }
   .spinner-container {
     background: var(--background);
@@ -296,9 +243,7 @@
     display: none;
   }
   img {
-    position: absolute;
-    top: 20px;
-    left: 20px;
     height: 40px;
+    margin-bottom: 20px;
   }
 </style>
diff --git a/packages/builder/src/components/start/Indicator.svelte b/packages/builder/src/components/start/Indicator.svelte
index 416336124f..b77d2589fd 100644
--- a/packages/builder/src/components/start/Indicator.svelte
+++ b/packages/builder/src/components/start/Indicator.svelte
@@ -10,7 +10,8 @@
         height="10"
         viewBox="0 0 12 10"
         fill="none"
-        xmlns="http://www.w3.org/2000/svg">
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
           fill-rule="evenodd"
           clip-rule="evenodd"
@@ -29,7 +30,8 @@
           1.41607 3.46441 1.55132 3.52467C1.68657 3.58493 1.80829 3.67182
           1.90923 3.78014L4.98762 6.85706L10.0933 0.35187C10.1024 0.340482
           10.1122 0.329679 10.1227 0.319527H10.1212Z"
-          fill="var(--background)" />
+          fill="var(--background)"
+        />
       </svg>
     {:else}{step}{/if}
   </div>
diff --git a/packages/builder/src/components/start/LogoutButton.svelte b/packages/builder/src/components/start/LogoutButton.svelte
index 732b34e533..a281bdbdc9 100644
--- a/packages/builder/src/components/start/LogoutButton.svelte
+++ b/packages/builder/src/components/start/LogoutButton.svelte
@@ -1,28 +1,6 @@
 <script>
-  import { TextButton as Button, Modal } from "@budibase/bbui"
+  import { Button } from "@budibase/bbui"
   import { auth } from "stores/backend"
 </script>
 
-<div>
-  <Button text on:click={auth.logout}>
-    <i class="ri-logout-box-line" />
-    <p>Logout</p>
-  </Button>
-</div>
-
-<style>
-  div i {
-    font-size: 26px;
-    color: var(--grey-7);
-    margin-left: 12px;
-    margin-top: 10px;
-  }
-
-  div p {
-    font-family: var(--font-sans);
-    font-size: var(--font-size-s);
-    color: var(--ink);
-    font-weight: 400;
-    margin: 0 0 0 12px;
-  }
-</style>
+<Button primary quiet text icon="LogOut" on:click={auth.logout}>Log Out</Button>
diff --git a/packages/builder/src/components/start/Steps/API.svelte b/packages/builder/src/components/start/Steps/API.svelte
deleted file mode 100644
index dfb530e86b..0000000000
--- a/packages/builder/src/components/start/Steps/API.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script>
-  import { Input } from "@budibase/bbui"
-  export let validationErrors
-
-  let blurred = { api: false }
-</script>
-
-<h2>Set up your API Key</h2>
-<div class="container">
-  <Input
-    on:input={() => (blurred.api = true)}
-    label="API Key"
-    name="apiKey"
-    placeholder="Use command-V to paste your API Key"
-    type="password"
-    error={blurred.api && validationErrors.apiKey} />
-  <a target="_blank" href="https://portal.budi.live/">Get API Key</a>
-</div>
-
-<style>
-  .container {
-    display: grid;
-    grid-gap: 40px;
-  }
-  a {
-    color: var(--grey-7);
-    font-weight: 500;
-    font-size: var(--font-size-s);
-  }
-  a:hover {
-    color: var(--ink);
-  }
-</style>
diff --git a/packages/builder/src/components/start/Steps/Info.svelte b/packages/builder/src/components/start/Steps/Info.svelte
index fa74e8b3a0..42cd5e1e2f 100644
--- a/packages/builder/src/components/start/Steps/Info.svelte
+++ b/packages/builder/src/components/start/Steps/Info.svelte
@@ -1,11 +1,13 @@
 <script>
-  import { Label, Heading, Input } from "@budibase/bbui"
+  import { Label, Heading, Input, notifications } from "@budibase/bbui"
 
   const BYTES_IN_MB = 1000000
   const FILE_SIZE_LIMIT = BYTES_IN_MB * 5
 
-  export let validationErrors
   export let template
+  export let values
+  export let errors
+  export let touched
 
   let blurred = { appName: false }
   let file
@@ -13,9 +15,10 @@
   function handleFile(evt) {
     const fileArray = Array.from(evt.target.files)
     if (fileArray.some(file => file.size >= FILE_SIZE_LIMIT)) {
-      notifier.danger(
-        `Files cannot exceed ${FILE_SIZE_LIMIT /
-          BYTES_IN_MB}MB. Please try again with smaller files.`
+      notifications.error(
+        `Files cannot exceed ${
+          FILE_SIZE_LIMIT / BYTES_IN_MB
+        }MB. Please try again with smaller files.`
       )
       return
     }
@@ -24,12 +27,12 @@
   }
 </script>
 
-{#if template?.fromFile}
-  <h2>Import Your Web App From A File</h2>
-{:else}
-  <h2>Create your Web App</h2>
-{/if}
 <div class="container">
+  {#if template?.fromFile}
+    <Heading size="L">Import your Web App</Heading>
+  {:else}
+    <Heading size="L">Create your Web App</Heading>
+  {/if}
   {#if template?.fromFile}
     <div class="template">
       <Label extraSmall grey>Import File</Label>
@@ -38,7 +41,8 @@
           id="file-upload"
           accept=".txt"
           type="file"
-          on:change={handleFile} />
+          on:change={handleFile}
+        />
         <label for="file-upload" class:uploaded={file}>
           {#if file}{file.name}{:else}Import{/if}
         </label>
@@ -47,22 +51,23 @@
   {:else if template}
     <div class="template">
       <Label extraSmall grey>Selected Template</Label>
-      <Heading small>{template.name}</Heading>
+      <Heading size="S">{template.name}</Heading>
     </div>
   {/if}
   <Input
-    on:input={() => (blurred.appName = true)}
+    on:change={() => ($touched.applicationName = true)}
+    bind:value={$values.applicationName}
     label="Web App Name"
-    name="applicationName"
     placeholder="Enter name of your web application"
-    type="name"
-    error={blurred.appName && validationErrors.applicationName} />
+    error={$touched.applicationName && $errors.applicationName}
+  />
 </div>
 
 <style>
   .container {
     display: grid;
     grid-gap: var(--spacing-xl);
+    margin-top: var(--spacing-xl);
   }
 
   .template :global(label) {
diff --git a/packages/builder/src/components/start/Steps/User.svelte b/packages/builder/src/components/start/Steps/User.svelte
index 6bc4db711a..b51e5faaff 100644
--- a/packages/builder/src/components/start/Steps/User.svelte
+++ b/packages/builder/src/components/start/Steps/User.svelte
@@ -1,13 +1,24 @@
 <script>
-  import { Input, Select } from "@budibase/bbui"
+  import { Select, Heading } from "@budibase/bbui"
+
+  export let values
+  export let errors
+  export let touched
 </script>
 
-<h2>What's your role for this app?</h2>
 <div class="container">
-  <Select label="Role" secondary name="roleId">
-    <option value="ADMIN">Admin</option>
-    <option value="POWER_USER">Power User</option>
-  </Select>
+  <Heading size="L">What's your role for this app?</Heading>
+  <Select
+    bind:value={$values.roleId}
+    label="Role"
+    options={[
+      { label: "Admin", value: "ADMIN" },
+      { label: "Power User", value: "POWER_USER" },
+    ]}
+    getOptionLabel={option => option.label}
+    getOptionValue={option => option.value}
+    error={$errors.roleId}
+  />
 </div>
 
 <style>
diff --git a/packages/builder/src/components/start/Steps/index.js b/packages/builder/src/components/start/Steps/index.js
index e59018eda7..a98357629e 100644
--- a/packages/builder/src/components/start/Steps/index.js
+++ b/packages/builder/src/components/start/Steps/index.js
@@ -1,3 +1,2 @@
-export { default as API } from "./API.svelte"
 export { default as Info } from "./Info.svelte"
 export { default as User } from "./User.svelte"
diff --git a/packages/builder/src/components/start/TemplateList.svelte b/packages/builder/src/components/start/TemplateList.svelte
index 19492d2bae..89095c97c5 100644
--- a/packages/builder/src/components/start/TemplateList.svelte
+++ b/packages/builder/src/components/start/TemplateList.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Button, Heading, Body, Spacer } from "@budibase/bbui"
+  import { Button, Heading, Body } from "@budibase/bbui"
   import AppCard from "./AppCard.svelte"
   import Spinner from "components/common/Spinner.svelte"
   import api from "builderStore/api"
@@ -15,7 +15,7 @@
 </script>
 
 <div class="root">
-  <Heading lh medium black>Start With a Template</Heading>
+  <Heading size="M">Start With a Template</Heading>
   {#await templatesPromise}
     <div class="spinner-container">
       <Spinner size="30" />
@@ -24,10 +24,9 @@
     <div class="templates">
       {#each templates as template}
         <div class="templates-card">
-          <Heading black small>{template.name}</Heading>
-          <Spacer small />
-          <Body medium grey>{template.category}</Body>
-          <Body lh small black>{template.description}</Body>
+          <Heading size="S">{template.name}</Heading>
+          <Body size="M" grey>{template.category}</Body>
+          <Body size="S" black>{template.description}</Body>
           <div><img src={template.image} width="100%" /></div>
           <div class="card-footer">
             <Button secondary on:click={() => onSelect(template)}>
diff --git a/packages/builder/src/constants/backend/index.js b/packages/builder/src/constants/backend/index.js
index f7bb77db3b..de49883cf1 100644
--- a/packages/builder/src/constants/backend/index.js
+++ b/packages/builder/src/constants/backend/index.js
@@ -80,6 +80,15 @@ export const FIELDS = {
       presence: false,
     },
   },
+  FORMULA: {
+    name: "Formula",
+    icon: "ri-braces-line",
+    type: "formula",
+    constraints: {
+      type: "string",
+      presence: false,
+    },
+  },
 }
 
 export const AUTO_COLUMN_SUB_TYPES = {
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index f059318bb0..298513bd23 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -1,40 +1,40 @@
-html {
-    /* Light theme */
-    --background: #FFFFFF;
-    --ink: #393C44;
-}
-html.dark {
-    /* Dark theme */
-    --theme-hue: 208;
-    --theme-saturation: 9%;
-    --theme-brightness: 16%;
-    --ink: hsl(var(--theme-hue), var(--theme-saturation), 90%);
-    --background: hsl(var(--theme-hue), var(--theme-saturation), var(--theme-brightness));
-    --grey-1: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 2%));
-    --grey-2: hsl(var(--theme-hue), calc(var(--theme-saturation) + 1%), calc(var(--theme-brightness) + 4%));
-    --grey-3: hsl(var(--theme-hue), var(--theme-saturation),calc(var(--theme-brightness) + 7%));
-    --grey-4: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 10%));
-    --grey-5: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 25%));
-    --grey-6: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 30%));
-    --grey-7: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 55%));
-    --grey-8: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 60%));
-    --grey-9: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 70%));
-}
-
 html, body {
-    font-family: var(--font-sans);
-    color: var(--ink);
     padding: 0;
     margin: 0;
     height: 100%;
     width: 100%;
-    background-color: var(--background);
+    min-height: 100%;
+}
+
+.spectrum--light {
+    --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-75);
+}
+
+body {
+    --background: var(--spectrum-alias-background-color-primary);
+    --background-alt: var(--spectrum-alias-background-color-secondary);
+    --border-light: 1px solid var(--spectrum-global-color-gray-200);
+    --border-dark: 1px solid var(--spectrum-global-color-gray-300);
+    --ink: var(--spectrum-alias-text-color);
+    --grey-1: var(--spectrum-global-color-gray-100);
+    --grey-2: var(--spectrum-global-color-gray-200);
+    --grey-3: var(--spectrum-global-color-gray-300);
+    --grey-4: var(--spectrum-global-color-gray-400);
+    --grey-5: var(--spectrum-global-color-gray-500);
+    --grey-6: var(--spectrum-global-color-gray-600);
+    --grey-7: var(--spectrum-global-color-gray-700);
+    --grey-8: var(--spectrum-global-color-gray-800);
+    --grey-9: var(--spectrum-global-color-gray-900);
+
+    font-family: var(--font-sans);
+    color: var(--ink);
+    background-color: var(--background-alt);
 }
 
 #app {
     height: 100%;
     box-sizing: border-box;
-    overflow-y: hidden;
+    overflow: hidden;
 }
 
 .hoverable:hover {
@@ -55,4 +55,25 @@ html, body {
 
 * + .bb-margin-xl {
     margin-top: var(--spacing-xl);
+}
+
+/* Custom scrollbars */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: var(--spectrum-alias-background-color-default);
+}
+::-webkit-scrollbar-thumb {
+    background-color: var(--spectrum-global-color-gray-400);
+    border-radius: 4px;
+}
+::-webkit-scrollbar-corner {
+    background: var(--spectrum-alias-background-color-default);
+}
+html * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--spectrum-global-color-gray-400)
+    var(--spectrum-alias-background-color-default);
 }
\ No newline at end of file
diff --git a/packages/builder/src/main.js b/packages/builder/src/main.js
index 54eeaec564..e55ec78496 100644
--- a/packages/builder/src/main.js
+++ b/packages/builder/src/main.js
@@ -1,9 +1,18 @@
 import "remixicon/fonts/remixicon.css"
+import "@spectrum-css/vars/dist/spectrum-global.css"
+import "@spectrum-css/vars/dist/spectrum-medium.css"
+import "@spectrum-css/vars/dist/spectrum-darkest.css"
+import "@spectrum-css/vars/dist/spectrum-dark.css"
+import "@spectrum-css/vars/dist/spectrum-light.css"
+import "@spectrum-css/vars/dist/spectrum-lightest.css"
+import "@spectrum-css/page/dist/index-vars.css"
 import "./global.css"
 import "./fonts.css"
 import "./budibase.css"
 import "./fonts.css"
-import "@budibase/bbui/dist/style.css"
+
+import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-vite.js"
+loadSpectrumIcons()
 
 import App from "./App.svelte"
 
diff --git a/packages/builder/src/pages/builder/[application]/_reset.svelte b/packages/builder/src/pages/builder/[application]/_reset.svelte
index 2c066d28a5..8a9e047f23 100644
--- a/packages/builder/src/pages/builder/[application]/_reset.svelte
+++ b/packages/builder/src/pages/builder/[application]/_reset.svelte
@@ -1,18 +1,22 @@
 <script>
   import { store, automationStore } from "builderStore"
   import { roles } from "stores/backend"
-  import { Button } from "@budibase/bbui"
+  import { Button, ActionGroup, ActionButton, Tabs, Tab } from "@budibase/bbui"
   import SettingsLink from "components/settings/Link.svelte"
   import ThemeEditorDropdown from "components/settings/ThemeEditorDropdown.svelte"
   import FeedbackNavLink from "components/feedback/FeedbackNavLink.svelte"
   import { get } from "builderStore/api"
-  import { isActive, goto, layout } from "@roxi/routify"
+  import { isActive, goto, layout, params } from "@roxi/routify"
   import Logo from "/assets/bb-logo.svg"
+  import { capitalise } from "../../../helpers"
 
   // Get Package and set store
   export let application
 
   let promise = getPackage()
+  $: selected = capitalise(
+    $layout.children.find(layout => $isActive(layout.path))?.title ?? "data"
+  )
 
   async function getPackage() {
     const res = await get(`/api/applications/${application}/appPackage`)
@@ -56,18 +60,25 @@
           <img
             src={Logo}
             alt="budibase icon"
-            on:click={() => $goto(`/builder/`)} />
+            on:click={() => $goto(`/builder/`)}
+          />
         </button>
 
+        <div class="tabs">
+          <Tabs {selected}>
+            {#each $layout.children as { path, title }}
+              <Tab
+                quiet
+                selected={$isActive(path)}
+                on:click={topItemNavigate(path)}
+                title={capitalise(title)}
+              />
+            {/each}
+          </Tabs>
+        </div>
+
         <!-- This gets all indexable subroutes and sticks them in the top nav. -->
-        {#each $layout.children as { path, title }}
-          <span
-            class:active={$isActive(path)}
-            class="topnavitem"
-            on:click={topItemNavigate(path)}>
-            {title}
-          </span>
-        {/each}
+        <ActionGroup />
       </div>
       <div class="toprightnav">
         <ThemeEditorDropdown />
@@ -75,7 +86,8 @@
         <div class="topnavitemright">
           <a
             target="_blank"
-            href="https://github.com/Budibase/budibase/discussions">
+            href="https://github.com/Budibase/budibase/discussions"
+          >
             <i class="ri-github-fill" />
           </a>
         </div>
@@ -84,7 +96,8 @@
           secondary
           on:click={() => {
             window.open(`/${application}`)
-          }}>
+          }}
+        >
           Preview
         </Button>
       </div>
@@ -92,7 +105,8 @@
     <div class="beta">
       <Button
         secondary
-        href="https://github.com/Budibase/budibase/discussions/categories/ideas">
+        href="https://github.com/Budibase/budibase/discussions/categories/ideas"
+      >
         Request feature
       </Button>
     </div>
@@ -125,14 +139,13 @@
 
   .top-nav {
     flex: 0 0 auto;
-    height: 60px;
     background: var(--background);
-    padding: 0 20px;
+    padding: 0 var(--spacing-xl);
     display: flex;
     box-sizing: border-box;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid var(--grey-2);
+    border-bottom: var(--border-light);
   }
 
   .toprightnav {
@@ -144,28 +157,15 @@
 
   .topleftnav {
     display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
     align-items: center;
   }
 
-  .topnavitem {
-    cursor: pointer;
-    color: var(--grey-5);
-    margin: 0 0 0 20px;
-    font-weight: 500;
-    font-size: var(--font-size-m);
-    height: 100%;
-    align-items: center;
-    box-sizing: border-box;
-  }
-
-  .topnavitem:hover {
-    color: var(--grey-7);
-    font-weight: 500;
-  }
-
-  .active {
-    color: var(--ink);
-    font-weight: 500;
+  .tabs {
+    display: flex;
+    position: relative;
+    margin-bottom: -1px;
   }
 
   .topnavitemright a {
@@ -190,9 +190,9 @@
     background-color: rgba(0, 0, 0, 0);
     cursor: pointer;
     outline: none;
-    height: 40px;
-    padding: 0px 10px 8px 0;
+    padding: 0 10px 0 0;
     align-items: center;
+    height: 32px;
   }
 
   .home-logo:active {
@@ -200,10 +200,7 @@
   }
 
   .home-logo img {
-    height: 40px;
-  }
-  span:first-letter {
-    text-transform: capitalize;
+    height: 32px;
   }
 
   i {
@@ -220,4 +217,7 @@
     left: var(--spacing-m);
     z-index: 1;
   }
+  .beta :global(button) {
+    background-color: var(--background);
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/[application]/automate/_layout.svelte b/packages/builder/src/pages/builder/[application]/automate/_layout.svelte
index a590e0893b..feb15d00bb 100644
--- a/packages/builder/src/pages/builder/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/automate/_layout.svelte
@@ -13,7 +13,7 @@
     <slot />
   </div>
   {#if $automationStore.selectedAutomation}
-    <div class="nav setup">
+    <div class="setup">
       <SetupPanel />
     </div>
   {/if}
@@ -21,22 +21,21 @@
 
 <style>
   .root {
-    height: calc(100% - 60px);
+    flex: 1 1 auto;
+    height: 0;
     display: grid;
     grid-template-columns: 260px minmax(510px, 1fr) 260px;
-    background: var(--grey-2);
   }
 
   .nav {
     overflow-y: auto;
-    background: var(--background);
-    padding: var(--spacing-l) var(--spacing-xl);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-l);
-    border-right: 1px solid var(--grey-2);
+    border-right: var(--border-light);
+    background-color: var(--background);
+    padding-bottom: 60px;
   }
 
   .content {
@@ -49,4 +48,15 @@
     gap: var(--spacing-l);
     overflow: hidden;
   }
+
+  .setup {
+    padding: var(--spectrum-global-dimension-size-200);
+    border-left: var(--border-light);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+    background-color: var(--background);
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/[application]/automate/index.svelte b/packages/builder/src/pages/builder/[application]/automate/index.svelte
index 4c6d12ffad..d48bd36e59 100644
--- a/packages/builder/src/pages/builder/[application]/automate/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/automate/index.svelte
@@ -11,7 +11,7 @@
       (!$automationStore.selectedAutomation ||
         !$automationStore.selectedAutomation?.automation?._id)
     ) {
-      $goto(`../${$automationStore.automations[0]._id}`)
+      $goto(`./${$automationStore.automations[0]._id}`)
     }
   })
 </script>
diff --git a/packages/builder/src/pages/builder/[application]/data/_layout.svelte b/packages/builder/src/pages/builder/[application]/data/_layout.svelte
index 895dc1fc34..6910d3e925 100644
--- a/packages/builder/src/pages/builder/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/_layout.svelte
@@ -1,6 +1,6 @@
 <script>
   import { isActive, goto } from "@roxi/routify"
-  import { Switcher, Modal } from "@budibase/bbui"
+  import { Icon, Modal, Tabs, Tab } from "@budibase/bbui"
   import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte"
   import DatasourceNavigator from "components/backend/DatasourceNavigator/DatasourceNavigator.svelte"
   import CreateDatasourceModal from "components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte"
@@ -17,11 +17,11 @@
     },
   ]
 
-  let tab = $isActive("./datasource") ? "datasource" : "table"
+  let selected = $isActive("./datasource") ? "External" : "Internal"
 
   function selectFirstTableOrSource({ detail }) {
-    const type = detail.heading.key
-    if (type === "datasource") {
+    const { key } = tabs.find(t => t.title === detail)
+    if (key === "datasource") {
       $goto("./datasource")
     } else {
       $goto("./table")
@@ -34,28 +34,30 @@
 <!-- routify:options index=0 -->
 <div class="root">
   <div class="nav">
-    <Switcher
-      headings={tabs}
-      bind:value={tab}
-      on:change={selectFirstTableOrSource}>
-      <div class="title">
-        <i
-          data-cy={`new-${tab}`}
-          class="ri-add-circle-fill"
-          on:click={modal.show} />
-      </div>
-      {#if tab === 'table'}
-        <TableNavigator />
-        <Modal bind:this={modal}>
-          <CreateTableModal />
-        </Modal>
-      {:else if tab === 'datasource'}
-        <DatasourceNavigator />
-        <Modal bind:this={modal}>
-          <CreateDatasourceModal />
-        </Modal>
-      {/if}
-    </Switcher>
+    <Tabs {selected} on:select={selectFirstTableOrSource}>
+      <Tab title="Internal">
+        <div class="tab-content-padding">
+          <TableNavigator />
+          <Modal bind:this={modal}>
+            <CreateTableModal />
+          </Modal>
+        </div>
+      </Tab>
+      <Tab title="External">
+        <div class="tab-content-padding">
+          <DatasourceNavigator />
+          <Modal bind:this={modal}>
+            <CreateDatasourceModal />
+          </Modal>
+        </div>
+      </Tab>
+    </Tabs>
+    <div
+      class="add-button"
+      data-cy={`new-${selected === "External" ? "datasource" : "table"}`}
+    >
+      <Icon hoverable name="AddCircle" on:click={modal.show} />
+    </div>
   </div>
   <div class="content">
     <slot />
@@ -64,46 +66,45 @@
 
 <style>
   .root {
-    height: calc(100vh - 60px);
+    flex: 1 1 auto;
+    height: 0;
     display: grid;
     grid-template-columns: 260px minmax(0, 1fr);
-    background: var(--grey-2);
   }
 
   .content {
     flex: 1 1 auto;
-    padding: var(--spacing-l) 40px;
+    padding: var(--spacing-l) 40px 40px 40px;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
     gap: var(--spacing-l);
-    background: var(--background);
+  }
+  .content :global(> span) {
+    display: contents;
+  }
+
+  .tab-content-padding {
+    padding: 0 var(--spacing-xl);
   }
 
   .nav {
     overflow-y: auto;
     background: var(--background);
-    padding: var(--spacing-l) var(--spacing-xl);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-l);
     position: relative;
-    border-right: 1px solid var(--grey-2);
+    border-right: var(--border-light);
+    padding-bottom: 60px;
   }
 
-  i {
-    font-size: 20px;
+  .add-button {
     position: absolute;
     top: var(--spacing-l);
     right: var(--spacing-xl);
   }
-
-  i:hover {
-    cursor: pointer;
-    color: var(--blue);
-  }
 </style>
diff --git a/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte b/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
index 554e9fba35..eece44f50b 100644
--- a/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
@@ -9,7 +9,7 @@
       const json = await response.json()
       config = json.query
     } catch (err) {
-      notifier.danger("Error fetching datasource configuration options.")
+      notifications.error("Error fetching datasource configuration options.")
       console.error(err)
     }
   }
@@ -33,14 +33,6 @@
 </section>
 
 <style>
-  section {
-    overflow: scroll;
-  }
-  ::-webkit-scrollbar {
-    width: 0px;
-    background: transparent; /* make scrollbar transparent */
-  }
-
   .inner {
     width: 640px;
     margin: 0 auto;
diff --git a/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte b/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte
index d6203212fc..c0f8b99778 100644
--- a/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte
@@ -1,10 +1,11 @@
 <script>
   import { goto, beforeUrlChange } from "@roxi/routify"
-  import { Button, Heading, Body, Spacer } from "@budibase/bbui"
+  import { Button, Heading, Body, Divider, Layout } from "@budibase/bbui"
   import { datasources, integrations, queries } from "stores/backend"
-  import { notifier } from "builderStore/store/notifications"
+  import { notifications } from "@budibase/bbui"
   import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
   import ICONS from "components/backend/DatasourceNavigator/icons"
+  import { capitalise } from "../../../../../../helpers"
 
   let unsaved = false
 
@@ -14,16 +15,13 @@
   async function saveDatasource() {
     // Create datasource
     await datasources.save(datasource)
-    notifier.success(`Datasource ${name} saved successfully.`)
+    notifications.success(`Datasource ${name} saved successfully.`)
     unsaved = false
   }
 
   function onClickQuery(query) {
-    if ($queries.selected === query._id) {
-      return
-    }
     queries.select(query)
-    $goto(`../${query._id}`)
+    $goto(`./${query._id}`)
   }
 
   function setUnsaved() {
@@ -32,7 +30,7 @@
 
   $beforeUrlChange((event, store) => {
     if (unsaved) {
-      notifier.danger(
+      notifications.error(
         "Unsaved changes. Please save your datasource configuration before leaving."
       )
       return false
@@ -43,83 +41,60 @@
 
 {#if datasource}
   <section>
-    <Spacer extraLarge />
-    <header>
-      <div class="datasource-icon">
+    <Layout>
+      <header>
         <svelte:component
           this={ICONS[datasource.source]}
           height="26"
-          width="26" />
+          width="26"
+        />
+        <Heading size="M">{datasource.name}</Heading>
+      </header>
+      <Body size="S" grey lh>{integration.description}</Body>
+      <Divider />
+      <div class="container">
+        <div class="config-header">
+          <Heading size="S">Configuration</Heading>
+          <Button secondary on:click={saveDatasource}>Save</Button>
+        </div>
+        <Body size="S">
+          Connect your database to Budibase using the config below.
+        </Body>
+        <IntegrationConfigForm
+          schema={integration.datasource}
+          integration={datasource.config}
+          on:change={setUnsaved}
+        />
       </div>
-      <h3 class="section-title">{datasource.name}</h3>
-    </header>
-
-    <Body small grey lh>{integration.description}</Body>
-    <Spacer extraLarge />
-    <hr />
-    <Spacer large />
-    <Spacer extraLarge />
-
-    <div class="container">
-      <div class="config-header">
-        <Heading small>Configuration</Heading>
-        <Button secondary on:click={saveDatasource}>Save</Button>
-      </div>
-
-      <Body small grey>
-        Connect your database to Budibase using the config below.
-      </Body>
-
-      <Spacer extraLarge />
-      <IntegrationConfigForm
-        schema={integration.datasource}
-        integration={datasource.config}
-        on:change={setUnsaved} />
-      <Spacer extraLarge />
-      <hr />
-      <Spacer large />
-      <Spacer extraLarge />
+      <Divider />
       <div class="query-header">
-        <Heading small>Queries</Heading>
-        <Button secondary on:click={() => $goto('./new')}>Add Query</Button>
+        <Heading size="S">Queries</Heading>
+        <Button secondary on:click={() => $goto("./new")}>Add Query</Button>
       </div>
-      <Spacer extraLarge />
       <div class="query-list">
         {#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
           <div class="query-list-item" on:click={() => onClickQuery(query)}>
             <p class="query-name">{query.name}</p>
-            <p>{query.queryVerb}</p>
+            <p>{capitalise(query.queryVerb)}</p>
             <p>→</p>
           </div>
         {/each}
       </div>
-    </div>
+    </Layout>
   </section>
 {/if}
 
 <style>
-  h3 {
-    margin: 0;
-    font-size: 24px;
-  }
-
   section {
     margin: 0 auto;
     width: 640px;
   }
 
-  hr {
-    border: 1px solid var(--grey-2);
-  }
-
   header {
     margin: 0 0 var(--spacing-xs) 0;
     display: flex;
-    gap: var(--spacing-m);
-  }
-
-  .section-title {
-    text-transform: capitalize;
+    gap: var(--spacing-l);
+    align-items: center;
   }
 
   .config-header {
@@ -129,6 +104,7 @@
   }
 
   .container {
+    width: 100%;
     border-radius: var(--border-radius-m);
     margin: 0 auto;
   }
@@ -150,7 +126,7 @@
   .query-list-item {
     border-radius: var(--border-radius-m);
     background: var(--background);
-    border: var(--border-grey);
+    border: var(--border-dark);
     display: grid;
     grid-template-columns: 2fr 0.75fr 20px;
     align-items: center;
diff --git a/packages/builder/src/pages/builder/[application]/data/datasource/index.svelte b/packages/builder/src/pages/builder/[application]/data/datasource/index.svelte
index 8cf45eef07..7c14996126 100644
--- a/packages/builder/src/pages/builder/[application]/data/datasource/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/datasource/index.svelte
@@ -4,8 +4,8 @@
   import { onMount } from "svelte"
 
   onMount(async () => {
-    // navigate to first datasource in list, if not already selected
-    $datasources.list.length > 0 && $goto(`../${$datasources.list[0]._id}`)
+    // navigate to first table in list, if not already selected
+    $datasources.list.length > 0 && $goto(`./${$datasources.list[0]._id}`)
   })
 </script>
 
diff --git a/packages/builder/src/pages/builder/[application]/data/table/[selectedTable]/relationship/[selectedRow]/[selectedField]/index.svelte b/packages/builder/src/pages/builder/[application]/data/table/[selectedTable]/relationship/[selectedRow]/[selectedField]/index.svelte
index 5e90236ec7..eddb5ab598 100644
--- a/packages/builder/src/pages/builder/[application]/data/table/[selectedTable]/relationship/[selectedRow]/[selectedField]/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/table/[selectedTable]/relationship/[selectedRow]/[selectedField]/index.svelte
@@ -6,4 +6,5 @@
 <RelationshipDataTable
   tableId={$params.selectedTable}
   rowId={$params.selectedRow}
-  fieldName={decodeURI($params.selectedField)} />
+  fieldName={decodeURI($params.selectedField)}
+/>
diff --git a/packages/builder/src/pages/builder/[application]/deploy/index.svelte b/packages/builder/src/pages/builder/[application]/deploy/index.svelte
index 83126c6047..2302ec263b 100644
--- a/packages/builder/src/pages/builder/[application]/deploy/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/deploy/index.svelte
@@ -1,7 +1,6 @@
 <script>
-  import { Button, Modal } from "@budibase/bbui"
+  import { Button, Modal, notifications, Heading } from "@budibase/bbui"
   import { store, hostingStore } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
   import api from "builderStore/api"
   import DeploymentHistory from "components/deploy/DeploymentHistory.svelte"
   import analytics from "analytics"
@@ -21,7 +20,7 @@
       const response = await api.get(`/api/keys/`)
       const userKeys = await response.json()
       if (!userKeys.budibase) {
-        notifier.danger(
+        notifications.error(
           "No budibase API Keys configured. You must set either a self hosted or cloud API key to deploy your budibase app."
         )
         return
@@ -31,7 +30,7 @@
     const DEPLOY_URL = `/api/deploy`
 
     try {
-      notifier.info(`Deployment started. Please wait.`)
+      notifications.info(`Deployment started. Please wait.`)
       const response = await api.post(DEPLOY_URL)
       const json = await response.json()
       if (response.status !== 200) {
@@ -52,17 +51,17 @@
         hostingType: $hostingStore.hostingInfo?.type,
       })
       analytics.captureException(err)
-      notifier.danger("Deployment unsuccessful. Please try again later.")
+      notifications.error("Deployment unsuccessful. Please try again later.")
     }
   }
 </script>
 
 <section>
-  <div>
-    <h4>It's time to shine!</h4>
-    <Button secondary medium on:click={deployApp}>Deploy App</Button>
-  </div>
   <img src={Rocket} alt="Rocket flying through sky" />
+  <div>
+    <Heading size="M">It's time to shine!</Heading>
+    <Button size="XL" cta medium on:click={deployApp}>Deploy App</Button>
+  </div>
 </section>
 <Modal bind:this={feedbackModal}>
   <FeedbackIframe on:finished={() => feedbackModal.hide()} />
@@ -73,17 +72,13 @@
   img {
     width: 100%;
     height: 100%;
-  }
-
-  h4 {
-    color: white;
-    font-size: 18px;
-    font-weight: bold;
-    margin-bottom: 30px;
+    object-fit: cover;
+    filter: brightness(80%);
   }
 
   section {
     position: relative;
+    min-height: 100%;
   }
 
   div {
@@ -99,5 +94,9 @@
     margin-left: auto;
     margin-right: auto;
     width: 50%;
+    gap: var(--spacing-xl);
+  }
+  div :global(h1) {
+    color: white;
   }
 </style>
diff --git a/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
index 87fbb46586..38562fbfa7 100644
--- a/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
@@ -167,9 +167,9 @@
   .root {
     display: grid;
     grid-template-columns: 260px 1fr 260px;
-    background: var(--grey-2);
     align-items: stretch;
-    height: calc(100vh - 60px);
+    flex: 1 1 auto;
+    height: 0;
   }
 
   .ui-nav {
@@ -178,8 +178,9 @@
     display: flex;
     flex-direction: column;
     gap: var(--spacing-l);
-    padding: var(--spacing-l) var(--spacing-xl) 60px var(--spacing-xl);
+    padding: 0 0 60px 0;
     overflow-y: auto;
+    border-right: var(--border-light);
   }
 
   .preview-pane {
@@ -206,7 +207,7 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-l);
-    padding: var(--spacing-l) var(--spacing-xl);
+    border-left: var(--border-light);
+    overflow-x: hidden;
   }
 </style>
diff --git a/packages/builder/src/pages/builder/_layout.svelte b/packages/builder/src/pages/builder/_layout.svelte
index b92b187aa2..c01de46334 100644
--- a/packages/builder/src/pages/builder/_layout.svelte
+++ b/packages/builder/src/pages/builder/_layout.svelte
@@ -1,17 +1,13 @@
 <script>
-  import { Home as Link } from "@budibase/bbui"
   import {
-    AppsIcon,
-    HostingIcon,
-    DocumentationIcon,
-    CommunityIcon,
-    BugIcon,
-  } from "components/common/Icons"
+    SideNavigation as Navigation,
+    SideNavigationItem as Item,
+  } from "@budibase/bbui"
+  import { auth } from "stores/backend"
   import LoginForm from "components/login/LoginForm.svelte"
   import BuilderSettingsButton from "components/start/BuilderSettingsButton.svelte"
   import LogoutButton from "components/start/LogoutButton.svelte"
   import Logo from "/assets/budibase-logo.svg"
-  import { auth } from "stores/backend"
 
   let modal
 </script>
@@ -23,23 +19,29 @@
         <div class="home-logo"><img src={Logo} alt="Budibase icon" /></div>
         <div class="nav-section">
           <div class="nav-top">
-            <Link icon={AppsIcon} title="Apps" href="/" active />
-            <Link
-              icon={HostingIcon}
-              title="Hosting"
-              href="https://portal.budi.live/" />
-            <Link
-              icon={DocumentationIcon}
-              title="Documentation"
-              href="https://docs.budibase.com/" />
-            <Link
-              icon={CommunityIcon}
-              title="Community"
-              href="https://github.com/Budibase/budibase/discussions" />
-            <Link
-              icon={BugIcon}
-              title="Raise an issue"
-              href="https://github.com/Budibase/budibase/issues/new/choose" />
+            <Navigation>
+              <Item href="/builder/" icon="Apps" selected>Apps</Item>
+              <Item external href="https://portal.budi.live/" icon="Servers">
+                Hosting
+              </Item>
+              <Item external href="https://docs.budibase.com/" icon="Book">
+                Documentation
+              </Item>
+              <Item
+                external
+                href="https://github.com/Budibase/budibase/discussions"
+                icon="PeopleGroup"
+              >
+                Community
+              </Item>
+              <Item
+                external
+                href="https://github.com/Budibase/budibase/issues/new/choose"
+                icon="Bug"
+              >
+                Raise an issue
+              </Item>
+            </Navigation>
           </div>
           <div class="nav-bottom">
             <BuilderSettingsButton />
@@ -64,7 +66,6 @@
     grid-template-columns: 260px 1fr;
     height: 100%;
     width: 100%;
-    background: var(--grey-1);
   }
 
   .login {
@@ -106,4 +107,8 @@
     justify-content: space-between;
     height: 100%;
   }
+
+  .nav-bottom :global(> *) {
+    margin-top: 5px;
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/index.svelte b/packages/builder/src/pages/builder/index.svelte
index 7a04d3b927..53e4d8a950 100644
--- a/packages/builder/src/pages/builder/index.svelte
+++ b/packages/builder/src/pages/builder/index.svelte
@@ -3,7 +3,7 @@
   import AppList from "components/start/AppList.svelte"
   import { get } from "builderStore/api"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
-  import { Button, Heading, Modal, Spacer } from "@budibase/bbui"
+  import { Button, Heading, Modal, ButtonGroup } from "@budibase/bbui"
   import TemplateList from "components/start/TemplateList.svelte"
   import analytics from "analytics"
   import Banner from "/assets/orange-landscape.png"
@@ -57,12 +57,11 @@
 
 <div class="container">
   <div class="header">
-    <Heading medium black>Welcome to the Budibase Beta</Heading>
-    <div class="button-group">
+    <Heading size="M">Welcome to the Budibase Beta</Heading>
+    <ButtonGroup>
       <Button secondary on:click={initiateAppImport}>Import Web App</Button>
-      <Spacer medium />
-      <Button primary on:click={modal.show}>Create New Web App</Button>
-    </div>
+      <Button cta on:click={modal.show}>Create New Web App</Button>
+    </ButtonGroup>
   </div>
 
   <div class="banner">
diff --git a/packages/builder/src/stores/backend/queries.js b/packages/builder/src/stores/backend/queries.js
index 3870b7ec96..47ce365c61 100644
--- a/packages/builder/src/stores/backend/queries.js
+++ b/packages/builder/src/stores/backend/queries.js
@@ -55,7 +55,10 @@ export function createQueriesStore() {
     },
     select: query => {
       update(state => ({ ...state, selected: query._id }))
-      datasources.update(state => ({ ...state, selected: query.datasourceId }))
+      datasources.update(state => ({
+        ...state,
+        selected: query.datasourceId,
+      }))
     },
     delete: async query => {
       const response = await api.delete(
diff --git a/packages/builder/vite.config.js b/packages/builder/vite.config.js
index e76491b54a..db02790ffd 100644
--- a/packages/builder/vite.config.js
+++ b/packages/builder/vite.config.js
@@ -27,7 +27,6 @@ export default ({ mode }) => {
       }),
     ],
     optimizeDeps: {
-      include: ["ag-grid-community"],
       exclude: ["@roxi/routify"],
     },
     resolve: {
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 76ed8b6293..43825fece8 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -877,17 +877,75 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@budibase/bbui@^1.58.13":
+  version "1.58.13"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.13.tgz#59df9c73def2d81c75dcbd2266c52c19db88dbd7"
+  integrity sha512-Zk6CKXdBfKsTVzA1Xs5++shdSSZLfphVpZuKVbjfzkgtuhyH7ruucexuSHEpFsxjW5rEKgKIBoRFzCK5vPvN0w==
+  dependencies:
+    markdown-it "^12.0.2"
+    quill "^1.3.7"
+    sirv-cli "^0.4.6"
+    svelte-flatpickr "^2.4.0"
+    svelte-portal "^1.0.0"
+    turndown "^7.0.0"
+
+"@budibase/client@^0.8.16":
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.8.17.tgz#71b58f124b36d07994f0733c7bd4aba40bb4672d"
+  integrity sha512-CGYDBLJU4se4rRvDohKlp0Ip2indqnrBS1WDsjfQIyf8pt8v2qx69A/MrpXF3z0LU7uxKLKIWtxeZtKAJ7Lysw==
+  dependencies:
+    "@budibase/string-templates" "^0.8.17"
+    regexparam "^1.3.0"
+    shortid "^2.2.15"
+    svelte-spa-router "^3.0.5"
+
 "@budibase/colorpicker@1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.1.2.tgz#f7436924ee746d7be9b2009c2fa193e710c30f89"
   integrity sha512-2PlZBVkATDqDC4b4Ri8Xi8X3OxhuHOGfmZwtXbZL38lNIeofaQT3Qyc1ECzEY5N+HrdGrWhY9EnliF6QM+LIuA==
 
-"@budibase/svelte-ag-grid@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@budibase/svelte-ag-grid/-/svelte-ag-grid-1.0.4.tgz#41cceec4bde2c4aea8b9da8f610fe36055c7709f"
-  integrity sha512-JZm6qujxnZpqw7Twbegr6se4sHhyWzN0Cibrk5bVBH32hBgzD6dd33fxwrjHKkWFxjys9wRT+cqYgYVlSt9E3w==
+"@budibase/handlebars-helpers@^0.11.3":
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/@budibase/handlebars-helpers/-/handlebars-helpers-0.11.3.tgz#b6e5c91b83e8906e7d7ff10ddde277a3d561016e"
+  integrity sha512-MS1ptZEYq8o9J3tNLM7cZ2RGSSJIer4GiMIUHtbBI3sC9UKqZebao1JYNfmZKpNjntuqhZKgjqc5GfnVIEjsYQ==
   dependencies:
-    ag-grid-community "^24.0.0"
+    arr-flatten "^1.1.0"
+    array-sort "^0.1.4"
+    define-property "^1.0.0"
+    extend-shallow "^3.0.2"
+    "falsey" "^0.3.2"
+    for-in "^1.0.2"
+    for-own "^1.0.0"
+    get-object "^0.2.0"
+    get-value "^2.0.6"
+    handlebars "^4.0.11"
+    handlebars-utils "^1.0.6"
+    has-value "^1.0.0"
+    helper-date "^1.0.1"
+    helper-markdown "^1.0.0"
+    helper-md "^0.2.2"
+    html-tag "^2.0.0"
+    is-even "^1.0.0"
+    is-glob "^4.0.0"
+    is-number "^4.0.0"
+    kind-of "^6.0.0"
+    logging-helpers "^1.0.0"
+    micromatch "^3.1.4"
+    relative "^3.0.2"
+    striptags "^3.1.0"
+    to-gfm-code-block "^0.1.1"
+    year "^0.2.1"
+
+"@budibase/string-templates@^0.8.16", "@budibase/string-templates@^0.8.17":
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/@budibase/string-templates/-/string-templates-0.8.17.tgz#107937d1a0d1249fc65b61cc050ee3d54e744b65"
+  integrity sha512-FTjzF4HdfXUuyHtbJ6jH+xhp+dzYpvwOvvbG6yXnV0WZg3Xj8svm6GqKPkwODyMYqtLVzEoExZU7JaM0ZX0iqg==
+  dependencies:
+    "@budibase/handlebars-helpers" "^0.11.3"
+    dayjs "^1.10.4"
+    handlebars "^4.7.6"
+    handlebars-utils "^1.0.6"
+    lodash "^4.17.20"
 
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
@@ -1176,6 +1234,11 @@
     "@nodelib/fs.scandir" "2.1.4"
     fastq "^1.6.0"
 
+"@polka/url@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@polka/url/-/url-0.5.0.tgz#b21510597fd601e5d7c95008b76bf0d254ebfd31"
+  integrity sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==
+
 "@rollup/plugin-replace@^2.4.2":
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz#a2d539314fbc77c244858faa523012825068510a"
@@ -1318,6 +1381,18 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@spectrum-css/page@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/page/-/page-3.0.1.tgz#5e1c3dd5b1a1ee591f9d636b75f03665f542d846"
+  integrity sha512-LAlKF8km5BlsGPpZ2SNtwKOQIHn1lz0X93aczGZVZceOg73O4gyeoT5cx4vi1z+KtBRY5VMDWx3XgGtUwwjqwA==
+  dependencies:
+    "@spectrum-css/vars" "^3.0.1"
+
+"@spectrum-css/vars@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.1.tgz#561fd69098f896a647242dd8d6108af603bfa31e"
+  integrity sha512-l4oRcCOqInChYXZN6OQhpe3isk6l4OE6Ys8cgdlsiKp53suNoQxyyd9p/eGRbCjZgH3xQ8nK0t4DHa7QYC0S6w==
+
 "@sveltejs/vite-plugin-svelte@^1.0.0-next.5":
   version "1.0.0-next.5"
   resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.5.tgz#8cf608f7a3c33dfa5b648397aae1ba90e6a4883f"
@@ -1332,11 +1407,6 @@
     source-map "^0.7.3"
     svelte-hmr "^0.13.3"
 
-"@svelteschool/svelte-forms@0.7.0":
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/@svelteschool/svelte-forms/-/svelte-forms-0.7.0.tgz#4ecba15e9a9ab2b04fad3d892931a561118a4cea"
-  integrity sha512-TSt8ROqK6wq+Hav7EhZL1I0GtsZhg28aJuuDSviBzG/NG9pC0eprf8roWjl59DKHOVWIUTPTeY+T+lipb9gf8w==
-
 "@testing-library/dom@^7.0.3":
   version "7.30.3"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.30.3.tgz#779ea9bbb92d63302461800a388a5a890ac22519"
@@ -1561,11 +1631,6 @@ acorn@^8.1.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.1.0.tgz#52311fd7037ae119cbb134309e901aa46295b3fe"
   integrity sha512-LWCF/Wn0nfHOmJ9rzQApGnxnvgfROzGilS8936rqN/lfcYkY9MYZzdMqN+2NJ4SlTc+m5HiSa+kNfDtI64dwUA==
 
-ag-grid-community@^24.0.0:
-  version "24.1.0"
-  resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-24.1.0.tgz#1e3cab51211822e08d56f03a491b7c0deaa398e6"
-  integrity sha512-pWnWphuDcejZ8ahf6C734EpCx3XQ6dHEZWMWTlCdHNT0mZBLJ4YKCGACX+ttAEtSX2MGM3G13JncvuratUlYag==
-
 ajv@^6.10.0, ajv@^6.12.3, ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
@@ -1586,11 +1651,135 @@ ajv@^8.0.1:
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
+ansi-bgblack@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-bgblack/-/ansi-bgblack-0.1.1.tgz#a68ba5007887701b6aafbe3fa0dadfdfa8ee3ca2"
+  integrity sha1-poulAHiHcBtqr74/oNrf36juPKI=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-bgblue@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-bgblue/-/ansi-bgblue-0.1.1.tgz#67bdc04edc9b9b5278969da196dea3d75c8c3613"
+  integrity sha1-Z73ATtybm1J4lp2hlt6j11yMNhM=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-bgcyan@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-bgcyan/-/ansi-bgcyan-0.1.1.tgz#58489425600bde9f5507068dd969ebfdb50fe768"
+  integrity sha1-WEiUJWAL3p9VBwaN2Wnr/bUP52g=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-bggreen@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-bggreen/-/ansi-bggreen-0.1.1.tgz#4e3191248529943f4321e96bf131d1c13816af49"
+  integrity sha1-TjGRJIUplD9DIelr8THRwTgWr0k=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-bgmagenta@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-bgmagenta/-/ansi-bgmagenta-0.1.1.tgz#9b28432c076eaa999418672a3efbe19391c2c7a1"
+  integrity sha1-myhDLAduqpmUGGcqPvvhk5HCx6E=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-bgred@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-bgred/-/ansi-bgred-0.1.1.tgz#a76f92838382ba43290a6c1778424f984d6f1041"
+  integrity sha1-p2+Sg4OCukMpCmwXeEJPmE1vEEE=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-bgwhite@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-bgwhite/-/ansi-bgwhite-0.1.1.tgz#6504651377a58a6ececd0331994e480258e11ba8"
+  integrity sha1-ZQRlE3elim7OzQMxmU5IAljhG6g=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-bgyellow@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-bgyellow/-/ansi-bgyellow-0.1.1.tgz#c3fe2eb08cd476648029e6874d15a0b38f61d44f"
+  integrity sha1-w/4usIzUdmSAKeaHTRWgs49h1E8=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-black@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-black/-/ansi-black-0.1.1.tgz#f6185e889360b2545a1ec50c0bf063fc43032453"
+  integrity sha1-9hheiJNgslRaHsUMC/Bj/EMDJFM=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-blue@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-blue/-/ansi-blue-0.1.1.tgz#15b804990e92fc9ca8c5476ce8f699777c21edbf"
+  integrity sha1-FbgEmQ6S/JyoxUds6PaZd3wh7b8=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-bold@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-bold/-/ansi-bold-0.1.1.tgz#3e63950af5acc2ae2e670e6f67deb115d1a5f505"
+  integrity sha1-PmOVCvWswq4uZw5vZ96xFdGl9QU=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-colors@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-0.2.0.tgz#72c31de2a0d9a2ccd0cac30cc9823eeb2f6434b5"
+  integrity sha1-csMd4qDZoszQysMMyYI+6y9kNLU=
+  dependencies:
+    ansi-bgblack "^0.1.1"
+    ansi-bgblue "^0.1.1"
+    ansi-bgcyan "^0.1.1"
+    ansi-bggreen "^0.1.1"
+    ansi-bgmagenta "^0.1.1"
+    ansi-bgred "^0.1.1"
+    ansi-bgwhite "^0.1.1"
+    ansi-bgyellow "^0.1.1"
+    ansi-black "^0.1.1"
+    ansi-blue "^0.1.1"
+    ansi-bold "^0.1.1"
+    ansi-cyan "^0.1.1"
+    ansi-dim "^0.1.1"
+    ansi-gray "^0.1.1"
+    ansi-green "^0.1.1"
+    ansi-grey "^0.1.1"
+    ansi-hidden "^0.1.1"
+    ansi-inverse "^0.1.1"
+    ansi-italic "^0.1.1"
+    ansi-magenta "^0.1.1"
+    ansi-red "^0.1.1"
+    ansi-reset "^0.1.1"
+    ansi-strikethrough "^0.1.1"
+    ansi-underline "^0.1.1"
+    ansi-white "^0.1.1"
+    ansi-yellow "^0.1.1"
+    lazy-cache "^2.0.1"
+
 ansi-colors@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
   integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
 
+ansi-cyan@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-cyan/-/ansi-cyan-0.1.1.tgz#538ae528af8982f28ae30d86f2f17456d2609873"
+  integrity sha1-U4rlKK+JgvKK4w2G8vF0VtJgmHM=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-dim@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-dim/-/ansi-dim-0.1.1.tgz#40de4c603aa8086d8e7a86b8ff998d5c36eefd6c"
+  integrity sha1-QN5MYDqoCG2Oeoa4/5mNXDbu/Ww=
+  dependencies:
+    ansi-wrap "0.1.0"
+
 ansi-escapes@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
@@ -1603,6 +1792,62 @@ ansi-escapes@^4.2.1:
   dependencies:
     type-fest "^0.21.3"
 
+ansi-gray@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-gray/-/ansi-gray-0.1.1.tgz#2962cf54ec9792c48510a3deb524436861ef7251"
+  integrity sha1-KWLPVOyXksSFEKPetSRDaGHvclE=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-green@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-green/-/ansi-green-0.1.1.tgz#8a5d9a979e458d57c40e33580b37390b8e10d0f7"
+  integrity sha1-il2al55FjVfEDjNYCzc5C44Q0Pc=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-grey@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-grey/-/ansi-grey-0.1.1.tgz#59d98b6ac2ba19f8a51798e9853fba78339a33c1"
+  integrity sha1-WdmLasK6GfilF5jphT+6eDOaM8E=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-hidden@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-hidden/-/ansi-hidden-0.1.1.tgz#ed6a4c498d2bb7cbb289dbf2a8d1dcc8567fae0f"
+  integrity sha1-7WpMSY0rt8uyidvyqNHcyFZ/rg8=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-inverse@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-inverse/-/ansi-inverse-0.1.1.tgz#b6af45826fe826bfb528a6c79885794355ccd269"
+  integrity sha1-tq9Fgm/oJr+1KKbHmIV5Q1XM0mk=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-italic@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-italic/-/ansi-italic-0.1.1.tgz#104743463f625c142a036739cf85eda688986f23"
+  integrity sha1-EEdDRj9iXBQqA2c5z4XtpoiYbyM=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-magenta@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-magenta/-/ansi-magenta-0.1.1.tgz#063b5ba16fb3f23e1cfda2b07c0a89de11e430ae"
+  integrity sha1-BjtboW+z8j4c/aKwfAqJ3hHkMK4=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-red@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-red/-/ansi-red-0.1.1.tgz#8c638f9d1080800a353c9c28c8a81ca4705d946c"
+  integrity sha1-jGOPnRCAgAo1PJwoyKgcpHBdlGw=
+  dependencies:
+    ansi-wrap "0.1.0"
+
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -1618,6 +1863,20 @@ ansi-regex@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
   integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
 
+ansi-reset@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-reset/-/ansi-reset-0.1.1.tgz#e7e71292c3c7ddcd4d62ef4a6c7c05980911c3b7"
+  integrity sha1-5+cSksPH3c1NYu9KbHwFmAkRw7c=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-strikethrough@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-strikethrough/-/ansi-strikethrough-0.1.1.tgz#d84877140b2cff07d1c93ebce69904f68885e568"
+  integrity sha1-2Eh3FAss/wfRyT685pkE9oiF5Wg=
+  dependencies:
+    ansi-wrap "0.1.0"
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -1637,6 +1896,32 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
+ansi-underline@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-underline/-/ansi-underline-0.1.1.tgz#dfc920f4c97b5977ea162df8ffb988308aaa71a4"
+  integrity sha1-38kg9Ml7WXfqFi34/7mIMIqqcaQ=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-white@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-white/-/ansi-white-0.1.1.tgz#9c77b7c193c5ee992e6011d36ec4c921b4578944"
+  integrity sha1-nHe3wZPF7pkuYBHTbsTJIbRXiUQ=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-wrap@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
+  integrity sha1-qCJQ3bABXponyoLoLqYDu/pF768=
+
+ansi-yellow@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-yellow/-/ansi-yellow-0.1.1.tgz#cb9356f2f46c732f0e3199e6102955a77da83c1d"
+  integrity sha1-y5NW8vRscy8OMZnmEClVp32oPB0=
+  dependencies:
+    ansi-wrap "0.1.0"
+
 any-observable@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/any-observable/-/any-observable-0.3.0.tgz#af933475e5806a67d0d7df090dd5e8bef65d119b"
@@ -1663,13 +1948,18 @@ arch@^2.1.2:
   resolved "https://registry.yarnpkg.com/arch/-/arch-2.2.0.tgz#1bc47818f305764f23ab3306b0bfc086c5a29d11"
   integrity sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==
 
-argparse@^1.0.7:
+argparse@^1.0.10, argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
   integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
   dependencies:
     sprintf-js "~1.0.2"
 
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
 aria-query@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
@@ -1693,6 +1983,15 @@ arr-union@^3.1.0:
   resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
   integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
 
+array-sort@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/array-sort/-/array-sort-0.1.4.tgz#662855eaeb671b4188df4451b2f24a0753992b23"
+  integrity sha512-BNcM+RXxndPxiZ2rd76k6nyQLRZr2/B/sdi8pQ+Joafr5AH279L40dfokSUTp8O+AaqYjXWhblBWa2st2nc4fQ==
+  dependencies:
+    default-compare "^1.0.0"
+    get-value "^2.0.6"
+    kind-of "^5.0.2"
+
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
@@ -1745,6 +2044,13 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+autolinker@~0.28.0:
+  version "0.28.1"
+  resolved "https://registry.yarnpkg.com/autolinker/-/autolinker-0.28.1.tgz#0652b491881879f0775dace0cdca3233942a4e47"
+  integrity sha1-BlK0kYgYefB3XazgzcoyM5QqTkc=
+  dependencies:
+    gulp-header "^1.7.1"
+
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -1980,7 +2286,7 @@ cachedir@^2.3.0:
   resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.3.0.tgz#0c75892a052198f0b21c7c1804d8331edfcae0e8"
   integrity sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==
 
-call-bind@^1.0.0:
+call-bind@^1.0.0, call-bind@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
   integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
@@ -2132,6 +2438,11 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
+clone@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -2236,6 +2547,13 @@ concat-stream@^1.6.2:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
+concat-with-sourcemaps@*:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz#d4ea93f05ae25790951b99e7b3b09e3908a4082e"
+  integrity sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==
+  dependencies:
+    source-map "^0.6.1"
+
 configent@^2.1.4:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/configent/-/configent-2.2.0.tgz#2de230fc43f22c47cfd99016aa6962d6f9546994"
@@ -2243,6 +2561,11 @@ configent@^2.1.4:
   dependencies:
     dotenv "^8.2.0"
 
+console-clear@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/console-clear/-/console-clear-1.1.1.tgz#995e20cbfbf14dd792b672cde387bd128d674bf7"
+  integrity sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==
+
 convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
@@ -2408,6 +2731,18 @@ date-fns@^1.27.2:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
 
+date.js@^0.3.1:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/date.js/-/date.js-0.3.3.tgz#ef1e92332f507a638795dbb985e951882e50bbda"
+  integrity sha512-HgigOS3h3k6HnW011nAb43c5xx5rBXk8P2v/WIT9Zv4koIaVXiH2BURguI78VVp+5Qc076T7OR378JViCnZtBw==
+  dependencies:
+    debug "~3.1.0"
+
+dayjs@^1.10.4:
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
+  integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
+
 debug@4.3.1, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
@@ -2436,6 +2771,13 @@ debug@^4.3.2:
   dependencies:
     ms "2.1.2"
 
+debug@~3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
 decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -2451,6 +2793,18 @@ decode-uri-component@^0.2.0:
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
   integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
 
+deep-equal@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
+  integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
+  dependencies:
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.1"
+    is-regex "^1.0.4"
+    object-is "^1.0.1"
+    object-keys "^1.1.1"
+    regexp.prototype.flags "^1.2.0"
+
 deep-is@^0.1.3, deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -2461,6 +2815,13 @@ deepmerge@^4.2.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
 
+default-compare@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/default-compare/-/default-compare-1.0.0.tgz#cb61131844ad84d84788fb68fd01681ca7781a2f"
+  integrity sha512-QWfXlM0EkAbqOCbD/6HjdwT19j7WCkMyiRhWilc4H9/5h/RzTF9gv5LYh1+CmDV5d1rki6KAWLtQale0xt20eQ==
+  dependencies:
+    kind-of "^5.0.2"
+
 define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -2531,6 +2892,11 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
+domino@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/domino/-/domino-2.1.6.tgz#fe4ace4310526e5e7b9d12c7de01b7f485a57ffe"
+  integrity sha512-3VdM/SXBZX2omc9JF9nOPCtDaYQ67BGp5CoLpIQlO2KCAPETs8TcDHacF26jXadGbvUteZzRTeos2fhID5+ucQ==
+
 dotenv@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
@@ -2588,6 +2954,16 @@ enquirer@^2.3.5:
   dependencies:
     ansi-colors "^4.1.1"
 
+ent@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/ent/-/ent-2.2.0.tgz#e964219325a21d05f44466a2f686ed6ce5f5dd1d"
+  integrity sha1-6WQhkyWiHQX0RGai9obtbOX13R0=
+
+entities@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
+  integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
+
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -2595,6 +2971,11 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
+error-symbol@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/error-symbol/-/error-symbol-0.1.0.tgz#0a4dae37d600d15a29ba453d8ef920f1844333f6"
+  integrity sha1-Ck2uN9YA0VopukU9jvkg8YRDM/Y=
+
 esbuild@^0.9.3:
   version "0.9.7"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.9.7.tgz#ea0d639cbe4b88ec25fbed4d6ff00c8d788ef70b"
@@ -2783,6 +3164,11 @@ eventemitter2@^6.4.2:
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.4.tgz#aa96e8275c4dbeb017a5d0e03780c65612a1202b"
   integrity sha512-HLU3NDY6wARrLCEwyGKRBvuWYyvW6mHYv72SJJAH3iJN3a6eVUvkjFkcxah1bcTgGVBBrFdIopBJPhCQFMLyXw==
 
+eventemitter3@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
+  integrity sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=
+
 exec-sh@^0.3.2:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.6.tgz#ff264f9e325519a60cb5e273692943483cca63bc"
@@ -2889,7 +3275,7 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@~3.0.2:
+extend@^3.0.2, extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
@@ -2928,11 +3314,23 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
+"falsey@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/falsey/-/falsey-0.3.2.tgz#b21c90c5c34660fc192bf909575db95b6880d597"
+  integrity sha512-lxEuefF5MBIVDmE6XeqCdM4BWk1+vYmGZtkbKZ/VFcg6uBBw6fXNEbWmxCjDdQlFc9hy450nkiWwM3VAW6G1qg==
+  dependencies:
+    kind-of "^5.0.2"
+
 fast-deep-equal@^3.1.1:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-diff@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154"
+  integrity sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==
+
 fast-glob@^3.0.3:
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661"
@@ -3031,6 +3429,11 @@ flat-cache@^3.0.4:
     flatted "^3.1.0"
     rimraf "^3.0.2"
 
+flatpickr@^4.5.2:
+  version "4.6.9"
+  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.9.tgz#9a13383e8a6814bda5d232eae3fcdccb97dc1499"
+  integrity sha512-F0azNNi8foVWKSF+8X+ZJzz8r9sE1G4hl06RyceIaLvyltKvDl6vqk9Lm/6AUUCi5HWaIjiUbk7UpeE/fOXOpw==
+
 flatted@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.1.tgz#c4b489e80096d9df1dfc97c79871aea7c617c469"
@@ -3046,11 +3449,18 @@ follow-redirects@^1.10.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.3.tgz#e5598ad50174c1bc4e872301e82ac2cd97f90267"
   integrity sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==
 
-for-in@^1.0.2:
+for-in@^1.0.1, for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
   integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
 
+for-own@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-1.0.0.tgz#c63332f415cedc4b04dbfe70cf836494c53cb44b"
+  integrity sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=
+  dependencies:
+    for-in "^1.0.1"
+
 forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
@@ -3077,6 +3487,11 @@ from@~0:
   resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe"
   integrity sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4=
 
+fs-exists-sync@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz#982d6893af918e72d08dec9e8673ff2b5a8d6add"
+  integrity sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=
+
 fs-extra@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
@@ -3135,11 +3550,24 @@ get-intrinsic@^1.0.2:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
+get-object@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/get-object/-/get-object-0.2.0.tgz#d92ff7d5190c64530cda0543dac63a3d47fe8c0c"
+  integrity sha1-2S/31RkMZFMM2gVD2sY6PUf+jAw=
+  dependencies:
+    is-number "^2.0.2"
+    isobject "^0.2.0"
+
 get-package-type@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
   integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
 
+get-port@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
+  integrity sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=
+
 get-stream@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
@@ -3242,6 +3670,35 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
 
+gulp-header@^1.7.1:
+  version "1.8.12"
+  resolved "https://registry.yarnpkg.com/gulp-header/-/gulp-header-1.8.12.tgz#ad306be0066599127281c4f8786660e705080a84"
+  integrity sha512-lh9HLdb53sC7XIZOYzTXM4lFuXElv3EVkSDhsd7DoJBj7hm+Ni7D3qYbb+Rr8DuM8nRanBvkVO9d7askreXGnQ==
+  dependencies:
+    concat-with-sourcemaps "*"
+    lodash.template "^4.4.0"
+    through2 "^2.0.0"
+
+handlebars-utils@^1.0.2, handlebars-utils@^1.0.4, handlebars-utils@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/handlebars-utils/-/handlebars-utils-1.0.6.tgz#cb9db43362479054782d86ffe10f47abc76357f9"
+  integrity sha512-d5mmoQXdeEqSKMtQQZ9WkiUcO1E3tPbWxluCK9hVgIDPzQa9WsKo3Lbe/sGflTe7TomHEeZaOgwIkyIr1kfzkw==
+  dependencies:
+    kind-of "^6.0.0"
+    typeof-article "^0.1.1"
+
+handlebars@^4.0.11, handlebars@^4.7.6:
+  version "4.7.7"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
+  integrity sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==
+  dependencies:
+    minimist "^1.2.5"
+    neo-async "^2.6.0"
+    source-map "^0.6.1"
+    wordwrap "^1.0.0"
+  optionalDependencies:
+    uglify-js "^3.1.4"
+
 har-schema@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
@@ -3325,6 +3782,39 @@ hash-sum@^2.0.0:
   resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
   integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
 
+helper-date@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/helper-date/-/helper-date-1.0.1.tgz#12fedea3ad8e44a7ca4c4efb0ff4104a5120cffb"
+  integrity sha512-wU3VOwwTJvGr/w5rZr3cprPHO+hIhlblTJHD6aFBrKLuNbf4lAmkawd2iK3c6NbJEvY7HAmDpqjOFSI5/+Ey2w==
+  dependencies:
+    date.js "^0.3.1"
+    handlebars-utils "^1.0.4"
+    moment "^2.18.1"
+
+helper-markdown@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/helper-markdown/-/helper-markdown-1.0.0.tgz#ee7e9fc554675007d37eb90f7853b13ce74f3e10"
+  integrity sha512-AnDqMS4ejkQK0MXze7pA9TM3pu01ZY+XXsES6gEE0RmCGk5/NIfvTn0NmItfyDOjRAzyo9z6X7YHbHX4PzIvOA==
+  dependencies:
+    handlebars-utils "^1.0.2"
+    highlight.js "^9.12.0"
+    remarkable "^1.7.1"
+
+helper-md@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/helper-md/-/helper-md-0.2.2.tgz#c1f59d7e55bbae23362fd8a0e971607aec69d41f"
+  integrity sha1-wfWdflW7riM2L9ig6XFgeuxp1B8=
+  dependencies:
+    ent "^2.2.0"
+    extend-shallow "^2.0.1"
+    fs-exists-sync "^0.1.0"
+    remarkable "^1.6.2"
+
+highlight.js@^9.12.0:
+  version "9.18.5"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825"
+  integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==
+
 hosted-git-info@^2.1.4:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
@@ -3342,6 +3832,14 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
+html-tag@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/html-tag/-/html-tag-2.0.0.tgz#36c3bc8d816fd30b570d5764a497a641640c2fed"
+  integrity sha512-XxzooSo6oBoxBEUazgjdXj7VwTn/iSTSZzTYKzYY6I916tkaYzypHxy+pbVU1h+0UQ9JlVf5XkNQyxOAiiQO1g==
+  dependencies:
+    is-self-closing "^1.0.1"
+    kind-of "^6.0.0"
+
 http-signature@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
@@ -3419,6 +3917,11 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
+info-symbol@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/info-symbol/-/info-symbol-0.1.0.tgz#27841d72867ddb4242cd612d79c10633881c6a78"
+  integrity sha1-J4QdcoZ920JCzWEtecEGM4gcang=
+
 inherits@2, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
@@ -3443,6 +3946,13 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
+is-arguments@^1.0.4:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.0.tgz#62353031dfbee07ceb34656a6bde59efecae8dd9"
+  integrity sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==
+  dependencies:
+    call-bind "^1.0.0"
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -3488,6 +3998,11 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
+is-date-object@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
+  integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
+
 is-descriptor@^0.1.0:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
@@ -3511,6 +4026,13 @@ is-docker@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.1.1.tgz#4125a88e44e450d384e09047ede71adc2d144156"
   integrity sha512-ZOoqiXfEwtGknTiuDEy8pN2CfE3TxMHprvNer1mXiqwkOT77Rw3YVrUQ52EqAOU3QAWDQ+bQdx7HJzrv7LS2Hw==
 
+is-even@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-even/-/is-even-1.0.0.tgz#76b5055fbad8d294a86b6a949015e1c97b717c06"
+  integrity sha1-drUFX7rY0pSoa2qUkBXhyXtxfAY=
+  dependencies:
+    is-odd "^0.1.2"
+
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -3570,6 +4092,13 @@ is-number-object@^1.0.4:
   resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
   integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
 
+is-number@^2.0.2:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
+  integrity sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=
+  dependencies:
+    kind-of "^3.0.2"
+
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -3577,6 +4106,11 @@ is-number@^3.0.0:
   dependencies:
     kind-of "^3.0.2"
 
+is-number@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff"
+  integrity sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==
+
 is-number@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
@@ -3589,6 +4123,13 @@ is-observable@^1.1.0:
   dependencies:
     symbol-observable "^1.1.0"
 
+is-odd@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/is-odd/-/is-odd-0.1.2.tgz#bc573b5ce371ef2aad6e6f49799b72bef13978a7"
+  integrity sha1-vFc7XONx7yqtbm9JeZtyvvE5eKc=
+  dependencies:
+    is-number "^3.0.0"
+
 is-path-inside@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
@@ -3616,6 +4157,21 @@ is-promise@^2.1.0:
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
   integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==
 
+is-regex@^1.0.4:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.2.tgz#81c8ebde4db142f2cf1c53fc86d6a45788266251"
+  integrity sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==
+  dependencies:
+    call-bind "^1.0.2"
+    has-symbols "^1.0.1"
+
+is-self-closing@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-self-closing/-/is-self-closing-1.0.1.tgz#5f406b527c7b12610176320338af0fa3896416e4"
+  integrity sha512-E+60FomW7Blv5GXTlYee2KDrnG6srxF7Xt1SjrhWUGUEsTFIqY/nq2y3DaftCsgUMdh89V07IVfhY9KIJhLezg==
+  dependencies:
+    self-closing-tags "^1.0.1"
+
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -3663,6 +4219,11 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
+isobject@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-0.2.0.tgz#a3432192f39b910b5f02cc989487836ec70aa85e"
+  integrity sha1-o0MhkvObkQtfAsyYlIeDbscKqF4=
+
 isobject@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
@@ -4228,7 +4789,7 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
-kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
+kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.1.0, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
   integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
@@ -4242,7 +4803,7 @@ kind-of@^4.0.0:
   dependencies:
     is-buffer "^1.1.5"
 
-kind-of@^5.0.0:
+kind-of@^5.0.0, kind-of@^5.0.2:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
   integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
@@ -4252,7 +4813,7 @@ kind-of@^6.0.0, kind-of@^6.0.2:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
-kleur@^3.0.3:
+kleur@^3.0.0, kleur@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
@@ -4262,6 +4823,13 @@ lazy-ass@1.6.0, lazy-ass@^1.6.0:
   resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513"
   integrity sha1-eZllXoZGwX8In90YfRUNMyTVRRM=
 
+lazy-cache@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-2.0.2.tgz#b9190a4f913354694840859f8a8f7084d8822264"
+  integrity sha1-uRkKT5EzVGlIQIWfio9whNiCImQ=
+  dependencies:
+    set-getter "^0.1.0"
+
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -4288,6 +4856,13 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
+linkify-it@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-3.0.2.tgz#f55eeb8bc1d3ae754049e124ab3bb56d97797fb8"
+  integrity sha512-gDBO4aHNZS6coiZCKVhSNh43F9ioIL4JwRjLZPkoLIY4yZFwg264Y5lu2x6rb1Js42Gh6Yqm2f6L2AJcnkzinQ==
+  dependencies:
+    uc.micro "^1.0.1"
+
 listr-silent-renderer@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
@@ -4332,6 +4907,11 @@ listr@^0.14.3:
     p-map "^2.0.0"
     rxjs "^6.3.3"
 
+local-access@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/local-access/-/local-access-1.1.0.tgz#e007c76ba2ca83d5877ba1a125fc8dfe23ba4798"
+  integrity sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw==
+
 locate-path@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
@@ -4344,6 +4924,11 @@ lodash-es@^4.17.11:
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
 
+lodash._reinterpolate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+  integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
+
 lodash.clonedeep@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
@@ -4364,6 +4949,21 @@ lodash.once@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
   integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
 
+lodash.template@^4.4.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
+  integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
+  dependencies:
+    lodash._reinterpolate "^3.0.0"
+    lodash.templatesettings "^4.0.0"
+
+lodash.templatesettings@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33"
+  integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==
+  dependencies:
+    lodash._reinterpolate "^3.0.0"
+
 lodash.truncate@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
@@ -4374,11 +4974,19 @@ lodash@4.17.13:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.13.tgz#0bdc3a6adc873d2f4e0c4bac285df91b64fc7b93"
   integrity sha512-vm3/XWXfWtRua0FkUyEHBZy8kCPjErNBT9fJx8Zvs+U6zjqPbTUOpkaoum3O5uiA8sm+yNMHXfYkTUHFoMxFNA==
 
-lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.7.0:
+lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
+log-ok@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/log-ok/-/log-ok-0.1.1.tgz#bea3dd36acd0b8a7240d78736b5b97c65444a334"
+  integrity sha1-vqPdNqzQuKckDXhza1uXxlREozQ=
+  dependencies:
+    ansi-green "^0.1.1"
+    success-symbol "^0.1.0"
+
 log-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
@@ -4410,6 +5018,27 @@ log-update@^2.3.0:
     cli-cursor "^2.0.0"
     wrap-ansi "^3.0.1"
 
+log-utils@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/log-utils/-/log-utils-0.2.1.tgz#a4c217a0dd9a50515d9b920206091ab3d4e031cf"
+  integrity sha1-pMIXoN2aUFFdm5ICBgkas9TgMc8=
+  dependencies:
+    ansi-colors "^0.2.0"
+    error-symbol "^0.1.0"
+    info-symbol "^0.1.0"
+    log-ok "^0.1.1"
+    success-symbol "^0.1.0"
+    time-stamp "^1.0.1"
+    warning-symbol "^0.1.0"
+
+logging-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/logging-helpers/-/logging-helpers-1.0.0.tgz#b5a37b32ad53eb0137c58c7898a47b175ddb7c36"
+  integrity sha512-qyIh2goLt1sOgQQrrIWuwkRjUx4NUcEqEGAcYqD8VOnOC6ItwkrVE8/tA4smGpjzyp4Svhc6RodDp9IO5ghpyA==
+  dependencies:
+    isobject "^3.0.0"
+    log-utils "^0.2.1"
+
 lru-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
@@ -4460,6 +5089,22 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+markdown-it@^12.0.2:
+  version "12.0.6"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.0.6.tgz#adcc8e5fe020af292ccbdf161fe84f1961516138"
+  integrity sha512-qv3sVLl4lMT96LLtR7xeRJX11OUFjsaD5oVat2/SNBIb21bJXwal2+SklcRbTwGwqWpWH/HRtYavOoJE+seL8w==
+  dependencies:
+    argparse "^2.0.1"
+    entities "~2.1.0"
+    linkify-it "^3.0.1"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
+
+mdurl@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -4514,6 +5159,11 @@ mime-types@^2.1.12, mime-types@~2.1.19:
   dependencies:
     mime-db "1.46.0"
 
+mime@^2.3.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe"
+  integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==
+
 mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
@@ -4556,11 +5206,16 @@ mkdirp@^0.5.4:
   dependencies:
     minimist "^1.2.5"
 
-moment@^2.27.0:
+moment@^2.18.1, moment@^2.27.0:
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
 
+mri@^1.1.0:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6"
+  integrity sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -4613,6 +5268,11 @@ ncp@^2.0.0:
   resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
   integrity sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=
 
+neo-async@^2.6.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -4720,6 +5380,14 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
+object-is@^1.0.1:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
+  integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
 object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -4843,6 +5511,11 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
+parchment@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/parchment/-/parchment-1.1.4.tgz#aeded7ab938fe921d4c34bc339ce1168bc2ffde5"
+  integrity sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -5053,6 +5726,27 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+quill-delta@^3.6.2:
+  version "3.6.3"
+  resolved "https://registry.yarnpkg.com/quill-delta/-/quill-delta-3.6.3.tgz#b19fd2b89412301c60e1ff213d8d860eac0f1032"
+  integrity sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==
+  dependencies:
+    deep-equal "^1.0.1"
+    extend "^3.0.2"
+    fast-diff "1.1.2"
+
+quill@^1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.7.tgz#da5b2f3a2c470e932340cdbf3668c9f21f9286e8"
+  integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==
+  dependencies:
+    clone "^2.1.1"
+    deep-equal "^1.0.1"
+    eventemitter3 "^2.0.3"
+    extend "^3.0.2"
+    parchment "^1.1.4"
+    quill-delta "^3.6.2"
+
 ramda@~0.26.1:
   version "0.26.1"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
@@ -5082,7 +5776,7 @@ read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
-readable-stream@^2.2.2:
+readable-stream@^2.2.2, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
   integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -5135,6 +5829,19 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
+regexp.prototype.flags@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz#7ef352ae8d159e758c0eadca6f8fcb4eef07be26"
+  integrity sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+regexparam@1.3.0, regexparam@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
+  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
+
 regexpp@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
@@ -5164,6 +5871,21 @@ regjsparser@^0.6.4:
   dependencies:
     jsesc "~0.5.0"
 
+relative@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/relative/-/relative-3.0.2.tgz#0dcd8ec54a5d35a3c15e104503d65375b5a5367f"
+  integrity sha1-Dc2OxUpdNaPBXhBFA9ZTdbWlNn8=
+  dependencies:
+    isobject "^2.0.0"
+
+remarkable@^1.6.2, remarkable@^1.7.1:
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/remarkable/-/remarkable-1.7.4.tgz#19073cb960398c87a7d6546eaa5e50d2022fcd00"
+  integrity sha512-e6NKUXgX95whv7IgddywbeN/ItCkWbISmc2DiqHJb0wTrqZIexqdco5b8Z3XZoo/48IdNVKM9ZCvTPJ4F5uvhg==
+  dependencies:
+    argparse "^1.0.10"
+    autolinker "~0.28.0"
+
 remixicon@2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/remixicon/-/remixicon-2.5.0.tgz#b5e245894a1550aa23793f95daceadbf96ad1a41"
@@ -5360,6 +6082,13 @@ rxjs@^6.3.3, rxjs@^6.6.3:
   dependencies:
     tslib "^1.9.0"
 
+sade@^1.4.0:
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/sade/-/sade-1.7.4.tgz#ea681e0c65d248d2095c90578c03ca0bb1b54691"
+  integrity sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA==
+  dependencies:
+    mri "^1.1.0"
+
 safe-buffer@^5.0.1, safe-buffer@^5.1.2:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
@@ -5404,6 +6133,11 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
+self-closing-tags@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/self-closing-tags/-/self-closing-tags-1.0.1.tgz#6c5fa497994bb826b484216916371accee490a5d"
+  integrity sha512-7t6hNbYMxM+VHXTgJmxwgZgLGktuXtVVD5AivWzNTdJBM4DBjnDKDzkf2SrNjihaArpeJYNjxkELBu1evI4lQA==
+
 "semver@2 || 3 || 4 || 5", semver@^5.5.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
@@ -5431,6 +6165,13 @@ set-blocking@^2.0.0:
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
 
+set-getter@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/set-getter/-/set-getter-0.1.0.tgz#d769c182c9d5a51f409145f2fba82e5e86e80376"
+  integrity sha1-12nBgsnVpR9AkUXy+6guXoboA3Y=
+  dependencies:
+    to-object-path "^0.3.0"
+
 set-value@^2.0.0, set-value@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
@@ -5477,11 +6218,39 @@ shortid@2.2.15:
   dependencies:
     nanoid "^2.1.0"
 
+shortid@^2.2.15:
+  version "2.2.16"
+  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.16.tgz#b742b8f0cb96406fd391c76bfc18a67a57fe5608"
+  integrity sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==
+  dependencies:
+    nanoid "^2.1.0"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
 
+sirv-cli@^0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/sirv-cli/-/sirv-cli-0.4.6.tgz#c28ab20deb3b34637f5a60863dc350f055abca04"
+  integrity sha512-/Vj85/kBvPL+n9ibgX6FicLE8VjidC1BhlX67PYPBfbBAphzR6i0k0HtU5c2arejfU3uzq8l3SYPCwl1x7z6Ww==
+  dependencies:
+    console-clear "^1.1.0"
+    get-port "^3.2.0"
+    kleur "^3.0.0"
+    local-access "^1.0.1"
+    sade "^1.4.0"
+    sirv "^0.4.6"
+    tinydate "^1.0.0"
+
+sirv@^0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-0.4.6.tgz#185e44eb93d24009dd183b7494285c5180b81f22"
+  integrity sha512-rYpOXlNbpHiY4nVXxuDf4mXPvKz1reZGap/LkWp9TvcZ84qD/nPBjjH/6GZsgIjVMbOslnY8YYULAyP8jMn1GQ==
+  dependencies:
+    "@polka/url" "^0.5.0"
+    mime "^2.3.1"
+
 sisteransi@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
@@ -5777,6 +6546,16 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+striptags@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/striptags/-/striptags-3.1.1.tgz#c8c3e7fdd6fb4bb3a32a3b752e5b5e3e38093ebd"
+  integrity sha1-yMPn/db7S7OjKjt1LltePjgJPr0=
+
+success-symbol@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/success-symbol/-/success-symbol-0.1.0.tgz#24022e486f3bf1cdca094283b769c472d3b72897"
+  integrity sha1-JAIuSG878c3KCUKDt2nEctO3KJc=
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -5809,6 +6588,13 @@ svelte-dnd-action@^0.8.9:
   resolved "https://registry.yarnpkg.com/svelte-dnd-action/-/svelte-dnd-action-0.8.9.tgz#90fa211057a5d9e832d5521511f9c1b87242d2ae"
   integrity sha512-4WaLRvERr2JoX6Lh9GnlEZRzFF5eY3h2q0n5+lS4/+nqqQjTIpCwTrncMf9tJNa+M4AGy43I5aq5F+Ohl/nxLg==
 
+svelte-flatpickr@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/svelte-flatpickr/-/svelte-flatpickr-2.4.0.tgz#190871fc3305956c8c8fd3601cd036b8ac71ef49"
+  integrity sha512-UUC5Te+b0qi4POg7VDwfGh0m5W3Hf64OwkfOTj6FEe/dYZN4cBzpQ82EuuQl0CTbbBAsMkcjJcixV1d2V6EHCQ==
+  dependencies:
+    flatpickr "^4.5.2"
+
 svelte-hmr@^0.13.3:
   version "0.13.3"
   resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.13.3.tgz#fba5739b477ea44caf70e542a24a4352bee2b897"
@@ -5831,10 +6617,22 @@ svelte-portal@0.1.0:
   resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-0.1.0.tgz#cc2821cc84b05ed5814e0218dcdfcbebc53c1742"
   integrity sha512-kef+ksXVKun224mRxat+DdO4C+cGHla+fEcZfnBAvoZocwiaceOfhf5azHYOPXSSB1igWVFTEOF3CDENPnuWxg==
 
-svelte@^3.36.0:
-  version "3.37.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.37.0.tgz#dc7cd24bcc275cdb3f8c684ada89e50489144ccd"
-  integrity sha512-TRF30F4W4+d+Jr2KzUUL1j8Mrpns/WM/WacxYlo5MMb2E5Qy2Pk1Guj6GylxsW9OnKQl1tnF8q3hG/hQ3h6VUA==
+svelte-portal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
+  integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
+
+svelte-spa-router@^3.0.5:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/svelte-spa-router/-/svelte-spa-router-3.1.0.tgz#a929f0def7e12c41f32bc356f91685aeadcd75bf"
+  integrity sha512-jlM/xwjn57mylr+pzHYCOOy+IPQauT46gOucNGTBu6jHcFXu3F+oaojN4PXC1LYizRGxFB6QA0qnYbZnRfX7Sg==
+  dependencies:
+    regexparam "1.3.0"
+
+svelte@^3.37.0:
+  version "3.38.2"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.38.2.tgz#55e5c681f793ae349b5cc2fe58e5782af4275ef5"
+  integrity sha512-q5Dq0/QHh4BLJyEVWGe7Cej5NWs040LWjMbicBGZ+3qpFWJ1YObRmUDZKbbovddLC9WW7THTj3kYbTOFmU9fbg==
 
 symbol-observable@^1.1.0:
   version "1.2.0"
@@ -5898,11 +6696,29 @@ throttleit@^1.0.0:
   resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"
   integrity sha1-nnhYNtr0Z0MUWlmEtiaNgoUorGw=
 
+through2@^2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
+  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
+  dependencies:
+    readable-stream "~2.3.6"
+    xtend "~4.0.1"
+
 through@2, through@~2.3, through@~2.3.1:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
 
+time-stamp@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-1.1.0.tgz#764a5a11af50561921b133f3b44e618687e0f5c3"
+  integrity sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=
+
+tinydate@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/tinydate/-/tinydate-1.3.0.tgz#e6ca8e5a22b51bb4ea1c3a2a4fd1352dbd4c57fb"
+  integrity sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==
+
 tmp@~0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
@@ -5920,6 +6736,11 @@ to-fast-properties@^2.0.0:
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
   integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
 
+to-gfm-code-block@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/to-gfm-code-block/-/to-gfm-code-block-0.1.1.tgz#25d045a5fae553189e9637b590900da732d8aa82"
+  integrity sha1-JdBFpfrlUxielje1kJANpzLYqoI=
+
 to-object-path@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
@@ -5993,6 +6814,13 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
+turndown@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/turndown/-/turndown-7.0.0.tgz#19b2a6a2d1d700387a1e07665414e4af4fec5225"
+  integrity sha512-G1FfxfR0mUNMeGjszLYl3kxtopC4O9DRRiMlMDDVHvU1jaBkGFg4qxIyjIk2aiKLHyDyZvZyu4qBO2guuYBy3Q==
+  dependencies:
+    domino "^2.1.6"
+
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
@@ -6049,6 +6877,23 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+typeof-article@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/typeof-article/-/typeof-article-0.1.1.tgz#9f07e733c3fbb646ffa9e61c08debacd460e06af"
+  integrity sha1-nwfnM8P7tkb/qeYcCN66zUYOBq8=
+  dependencies:
+    kind-of "^3.1.0"
+
+uc.micro@^1.0.1, uc.micro@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
+
+uglify-js@^3.1.4:
+  version "3.13.5"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.13.5.tgz#5d71d6dbba64cf441f32929b1efce7365bb4f113"
+  integrity sha512-xtB8yEqIkn7zmOyS2zUNBsYCBRhDkvlNxMMY2smuJ/qA8NCHeQvKCF3i9Z4k8FJH4+PJvZRtMrPynfZ75+CSZw==
+
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
@@ -6232,6 +7077,11 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
+warning-symbol@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/warning-symbol/-/warning-symbol-0.1.0.tgz#bb31dd11b7a0f9d67ab2ed95f457b65825bbad21"
+  integrity sha1-uzHdEbeg+dZ6su2V9Fe2WCW7rSE=
+
 webidl-conversions@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
@@ -6287,6 +7137,11 @@ word-wrap@^1.2.3, word-wrap@~1.2.3:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
 
+wordwrap@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+  integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
+
 wrap-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-3.0.1.tgz#288a04d87eda5c286e060dfe8f135ce8d007f8ba"
@@ -6334,6 +7189,11 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
+xtend@~4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
 y18n@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.1.tgz#8db2b83c31c5d75099bb890b23f3094891e247d4"
@@ -6382,6 +7242,11 @@ yauzl@^2.10.0:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
+year@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/year/-/year-0.2.1.tgz#4083ae520a318b23ec86037f3000cb892bdf9bb0"
+  integrity sha1-QIOuUgoxiyPshgN/MADLiSvfm7A=
+
 yup@0.29.2:
   version "0.29.2"
   resolved "https://registry.yarnpkg.com/yup/-/yup-0.29.2.tgz#5302abd9024cca335b987793f8df868e410b7b67"
diff --git a/packages/client/package.json b/packages/client/package.json
index 01dde2f719..a34835eccf 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -38,7 +38,7 @@
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "svelte": "^3.35.0"
+    "svelte": "^3.37.0"
   },
   "gitHead": "4b6efc42ed3273595c7a129411f4d883733d3321"
 }
diff --git a/packages/client/src/components/NotificationDisplay.svelte b/packages/client/src/components/NotificationDisplay.svelte
index 9f7f4083c2..ca457ca2c4 100644
--- a/packages/client/src/components/NotificationDisplay.svelte
+++ b/packages/client/src/components/NotificationDisplay.svelte
@@ -19,7 +19,8 @@
       animate:flip
       class="toast"
       style="background: {themes[notification.type]};"
-      transition:fly={{ y: -30 }}>
+      transition:fly={{ y: -30 }}
+    >
       <div class="content">{notification.message}</div>
       {#if notification.icon}<i class={notification.icon} />{/if}
     </div>
diff --git a/packages/client/src/store/notification.js b/packages/client/src/store/notification.js
index 3efd40a882..6c40ca275f 100644
--- a/packages/client/src/store/notification.js
+++ b/packages/client/src/store/notification.js
@@ -50,12 +50,7 @@ const createNotificationStore = () => {
 }
 
 function id() {
-  return (
-    "_" +
-    Math.random()
-      .toString(36)
-      .substr(2, 9)
-  )
+  return "_" + Math.random().toString(36).substr(2, 9)
 }
 
 export const notificationStore = createNotificationStore()
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 6cc387058a..9a89f1d273 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -24,7 +24,10 @@ const addBuilderPreviewStyles = (node, styleString, componentId) => {
   if (componentId === get(builderStore).selectedComponentId) {
     const style = window.getComputedStyle(node)
     const property = style?.display === "table-row" ? "outline" : "border"
-    return styleString + `;${property}: 2px solid #4285f4 !important;`
+    return (
+      styleString +
+      `;${property}: 2px solid #4285f4 !important; border-radius: 4px !important;`
+    )
   } else {
     return styleString
   }
diff --git a/packages/client/yarn.lock b/packages/client/yarn.lock
index aff171b725..1e982786e2 100644
--- a/packages/client/yarn.lock
+++ b/packages/client/yarn.lock
@@ -2873,10 +2873,10 @@ svelte-spa-router@^3.0.5:
   dependencies:
     regexparam "1.3.0"
 
-svelte@^3.35.0:
-  version "3.35.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.35.0.tgz#e0d0ba60c4852181c2b4fd851194be6fda493e65"
-  integrity sha512-gknlZkR2sXheu/X+B7dDImwANVvK1R0QGQLd8CNIfxxGPeXBmePnxfzb6fWwTQRsYQG7lYkZXvpXJvxvpsoB7g==
+svelte@^3.37.0:
+  version "3.38.2"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.38.2.tgz#55e5c681f793ae349b5cc2fe58e5782af4275ef5"
+  integrity sha512-q5Dq0/QHh4BLJyEVWGe7Cej5NWs040LWjMbicBGZ+3qpFWJ1YObRmUDZKbbovddLC9WW7THTj3kYbTOFmU9fbg==
 
 svgo@^1.0.0:
   version "1.3.2"
diff --git a/packages/server/__mocks__/@elastic/elasticsearch.js b/packages/server/__mocks__/@elastic/elasticsearch.js
index c6b2bad48a..9de0241f43 100644
--- a/packages/server/__mocks__/@elastic/elasticsearch.js
+++ b/packages/server/__mocks__/@elastic/elasticsearch.js
@@ -1,6 +1,6 @@
 const elastic = {}
 
-elastic.Client = function() {
+elastic.Client = function () {
   this.index = jest.fn().mockResolvedValue({ body: [] })
   this.search = jest.fn().mockResolvedValue({
     body: {
diff --git a/packages/server/__mocks__/arangojs.js b/packages/server/__mocks__/arangojs.js
index 1a40529ca0..eff1d14172 100644
--- a/packages/server/__mocks__/arangojs.js
+++ b/packages/server/__mocks__/arangojs.js
@@ -1,6 +1,6 @@
 const arangodb = {}
 
-arangodb.Database = function() {
+arangodb.Database = function () {
   this.query = jest.fn(() => ({
     all: jest.fn(),
   }))
diff --git a/packages/server/__mocks__/mongodb.js b/packages/server/__mocks__/mongodb.js
index 160ca89ebe..c64e466a4a 100644
--- a/packages/server/__mocks__/mongodb.js
+++ b/packages/server/__mocks__/mongodb.js
@@ -1,6 +1,6 @@
 const mongodb = {}
 
-mongodb.MongoClient = function() {
+mongodb.MongoClient = function () {
   this.connect = jest.fn()
   this.close = jest.fn()
   this.insertOne = jest.fn()
diff --git a/packages/server/package.json b/packages/server/package.json
index 8d8f6704df..62e4c50d71 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -90,6 +90,8 @@
     "arangojs": "7.2.0",
     "aws-sdk": "^2.767.0",
     "bcryptjs": "2.4.3",
+    "bull": "^3.22.0",
+    "bull-board": "^1.5.1",
     "chmodr": "1.2.0",
     "csvtojson": "2.0.10",
     "dotenv": "8.2.0",
@@ -106,6 +108,7 @@
     "koa": "2.7.0",
     "koa-body": "4.2.0",
     "koa-compress": "4.0.1",
+    "koa-connect": "^2.1.0",
     "koa-pino-logger": "3.0.0",
     "koa-send": "5.0.0",
     "koa-session": "5.12.0",
diff --git a/packages/server/scripts/dev/manage.js b/packages/server/scripts/dev/manage.js
index 4e170d1c63..305df573e4 100644
--- a/packages/server/scripts/dev/manage.js
+++ b/packages/server/scripts/dev/manage.js
@@ -37,6 +37,7 @@ async function init() {
     PORT: 4001,
     MINIO_URL: "http://localhost:10000/",
     COUCH_DB_URL: "http://budibase:budibase@localhost:10000/db/",
+    REDIS_URL: "http://localhost:10000/cache/",
     WORKER_URL: "http://localhost:4002",
     JWT_SECRET: "testsecret",
     MINIO_ACCESS_KEY: "budibase",
diff --git a/packages/server/scripts/replicateApp.js b/packages/server/scripts/replicateApp.js
index bbf44a7907..2c66bb26d9 100644
--- a/packages/server/scripts/replicateApp.js
+++ b/packages/server/scripts/replicateApp.js
@@ -37,10 +37,10 @@ const run = async () => {
 
   instanceDb.replicate
     .to(remoteDb)
-    .on("complete", function() {
+    .on("complete", function () {
       console.log("SUCCESS!")
     })
-    .on("error", function(err) {
+    .on("error", function (err) {
       console.log(`FAILED: ${err}`)
     })
 }
diff --git a/packages/server/src/api/controllers/analytics.js b/packages/server/src/api/controllers/analytics.js
index 76e5eb11f1..d6e1a9ce5b 100644
--- a/packages/server/src/api/controllers/analytics.js
+++ b/packages/server/src/api/controllers/analytics.js
@@ -1,6 +1,6 @@
 const env = require("../../environment")
 
-exports.isEnabled = async function(ctx) {
+exports.isEnabled = async function (ctx) {
   ctx.body = {
     enabled: env.ENABLE_ANALYTICS === "true",
   }
diff --git a/packages/server/src/api/controllers/apikeys.js b/packages/server/src/api/controllers/apikeys.js
index 1c8caba1cb..55422ee603 100644
--- a/packages/server/src/api/controllers/apikeys.js
+++ b/packages/server/src/api/controllers/apikeys.js
@@ -1,6 +1,6 @@
 const builderDB = require("../../db/builder")
 
-exports.fetch = async function(ctx) {
+exports.fetch = async function (ctx) {
   try {
     const mainDoc = await builderDB.getBuilderMainDoc()
     ctx.body = mainDoc.apiKeys ? mainDoc.apiKeys : {}
@@ -10,7 +10,7 @@ exports.fetch = async function(ctx) {
   }
 }
 
-exports.update = async function(ctx) {
+exports.update = async function (ctx) {
   const key = ctx.params.key
   const value = ctx.request.body.value
 
diff --git a/packages/server/src/api/controllers/application.js b/packages/server/src/api/controllers/application.js
index beb1dedf47..c9a1507201 100644
--- a/packages/server/src/api/controllers/application.js
+++ b/packages/server/src/api/controllers/application.js
@@ -113,11 +113,11 @@ async function createInstance(template) {
   return { _id: appId }
 }
 
-exports.fetch = async function(ctx) {
+exports.fetch = async function (ctx) {
   ctx.body = await getAllApps()
 }
 
-exports.fetchAppDefinition = async function(ctx) {
+exports.fetchAppDefinition = async function (ctx) {
   const db = new CouchDB(ctx.params.appId)
   const layouts = await getLayouts(db)
   const userRoleId = getUserRoleId(ctx)
@@ -133,7 +133,7 @@ exports.fetchAppDefinition = async function(ctx) {
   }
 }
 
-exports.fetchAppPackage = async function(ctx) {
+exports.fetchAppPackage = async function (ctx) {
   const db = new CouchDB(ctx.params.appId)
   const application = await db.get(ctx.params.appId)
   const [layouts, screens] = await Promise.all([getLayouts(db), getScreens(db)])
@@ -146,7 +146,7 @@ exports.fetchAppPackage = async function(ctx) {
   }
 }
 
-exports.create = async function(ctx) {
+exports.create = async function (ctx) {
   const { useTemplate, templateKey } = ctx.request.body
   const instanceConfig = {
     useTemplate,
@@ -186,7 +186,7 @@ exports.create = async function(ctx) {
   ctx.message = `Application ${ctx.request.body.name} created successfully`
 }
 
-exports.update = async function(ctx) {
+exports.update = async function (ctx) {
   const url = await getAppUrlIfNotInUse(ctx)
   const db = new CouchDB(ctx.params.appId)
   const application = await db.get(ctx.params.appId)
@@ -202,7 +202,7 @@ exports.update = async function(ctx) {
   ctx.body = response
 }
 
-exports.delete = async function(ctx) {
+exports.delete = async function (ctx) {
   const db = new CouchDB(ctx.params.appId)
   const app = await db.get(ctx.params.appId)
   const result = await db.destroy()
diff --git a/packages/server/src/api/controllers/automation.js b/packages/server/src/api/controllers/automation.js
index 0f210f633c..01db17f754 100644
--- a/packages/server/src/api/controllers/automation.js
+++ b/packages/server/src/api/controllers/automation.js
@@ -93,7 +93,7 @@ async function checkForWebhooks({ appId, oldAuto, newAuto }) {
   return newAuto
 }
 
-exports.create = async function(ctx) {
+exports.create = async function (ctx) {
   const db = new CouchDB(ctx.appId)
   let automation = ctx.request.body
   automation.appId = ctx.appId
@@ -124,7 +124,7 @@ exports.create = async function(ctx) {
   }
 }
 
-exports.update = async function(ctx) {
+exports.update = async function (ctx) {
   const db = new CouchDB(ctx.appId)
   let automation = ctx.request.body
   automation.appId = ctx.appId
@@ -149,7 +149,7 @@ exports.update = async function(ctx) {
   }
 }
 
-exports.fetch = async function(ctx) {
+exports.fetch = async function (ctx) {
   const db = new CouchDB(ctx.appId)
   const response = await db.allDocs(
     getAutomationParams(null, {
@@ -159,12 +159,12 @@ exports.fetch = async function(ctx) {
   ctx.body = response.rows.map(row => row.doc)
 }
 
-exports.find = async function(ctx) {
+exports.find = async function (ctx) {
   const db = new CouchDB(ctx.appId)
   ctx.body = await db.get(ctx.params.id)
 }
 
-exports.destroy = async function(ctx) {
+exports.destroy = async function (ctx) {
   const db = new CouchDB(ctx.appId)
   const oldAutomation = await db.get(ctx.params.id)
   await checkForWebhooks({
@@ -174,19 +174,19 @@ exports.destroy = async function(ctx) {
   ctx.body = await db.remove(ctx.params.id, ctx.params.rev)
 }
 
-exports.getActionList = async function(ctx) {
+exports.getActionList = async function (ctx) {
   ctx.body = actions.DEFINITIONS
 }
 
-exports.getTriggerList = async function(ctx) {
+exports.getTriggerList = async function (ctx) {
   ctx.body = triggers.BUILTIN_DEFINITIONS
 }
 
-exports.getLogicList = async function(ctx) {
+exports.getLogicList = async function (ctx) {
   ctx.body = logic.BUILTIN_DEFINITIONS
 }
 
-module.exports.getDefinitionList = async function(ctx) {
+module.exports.getDefinitionList = async function (ctx) {
   ctx.body = {
     logic: logic.BUILTIN_DEFINITIONS,
     trigger: triggers.BUILTIN_DEFINITIONS,
@@ -200,7 +200,7 @@ module.exports.getDefinitionList = async function(ctx) {
  *                   *
  *********************/
 
-exports.trigger = async function(ctx) {
+exports.trigger = async function (ctx) {
   const db = new CouchDB(ctx.appId)
   let automation = await db.get(ctx.params.id)
   await triggers.externalTrigger(automation, {
diff --git a/packages/server/src/api/controllers/backup.js b/packages/server/src/api/controllers/backup.js
index 02be10bbec..0be19eb7bd 100644
--- a/packages/server/src/api/controllers/backup.js
+++ b/packages/server/src/api/controllers/backup.js
@@ -1,6 +1,6 @@
 const { performBackup } = require("../../utilities/fileSystem")
 
-exports.exportAppDump = async function(ctx) {
+exports.exportAppDump = async function (ctx) {
   const { appId } = ctx.query
   const appname = decodeURI(ctx.query.appname)
   const backupIdentifier = `${appname}Backup${new Date().getTime()}.txt`
diff --git a/packages/server/src/api/controllers/component.js b/packages/server/src/api/controllers/component.js
index a9b88a5bff..60e1e99e35 100644
--- a/packages/server/src/api/controllers/component.js
+++ b/packages/server/src/api/controllers/component.js
@@ -1,7 +1,7 @@
 const CouchDB = require("../../db")
 const { getComponentLibraryManifest } = require("../../utilities/fileSystem")
 
-exports.fetchAppComponentDefinitions = async function(ctx) {
+exports.fetchAppComponentDefinitions = async function (ctx) {
   const appId = ctx.params.appId || ctx.appId
   const db = new CouchDB(appId)
   const app = await db.get(appId)
diff --git a/packages/server/src/api/controllers/datasource.js b/packages/server/src/api/controllers/datasource.js
index b5a207dbbe..4f3ebdb609 100644
--- a/packages/server/src/api/controllers/datasource.js
+++ b/packages/server/src/api/controllers/datasource.js
@@ -5,7 +5,7 @@ const {
   getQueryParams,
 } = require("../../db/utils")
 
-exports.fetch = async function(ctx) {
+exports.fetch = async function (ctx) {
   const database = new CouchDB(ctx.appId)
   ctx.body = (
     await database.allDocs(
@@ -16,7 +16,7 @@ exports.fetch = async function(ctx) {
   ).rows.map(row => row.doc)
 }
 
-exports.save = async function(ctx) {
+exports.save = async function (ctx) {
   const db = new CouchDB(ctx.appId)
 
   const datasource = {
@@ -33,7 +33,7 @@ exports.save = async function(ctx) {
   ctx.body = datasource
 }
 
-exports.destroy = async function(ctx) {
+exports.destroy = async function (ctx) {
   const db = new CouchDB(ctx.appId)
 
   // Delete all queries for the datasource
@@ -47,7 +47,7 @@ exports.destroy = async function(ctx) {
   ctx.status = 200
 }
 
-exports.find = async function(ctx) {
+exports.find = async function (ctx) {
   const database = new CouchDB(ctx.appId)
   ctx.body = await database.get(ctx.params.datasourceId)
 }
diff --git a/packages/server/src/api/controllers/deploy/awsDeploy.js b/packages/server/src/api/controllers/deploy/awsDeploy.js
index 2d34bc1b04..c9fc1e9e52 100644
--- a/packages/server/src/api/controllers/deploy/awsDeploy.js
+++ b/packages/server/src/api/controllers/deploy/awsDeploy.js
@@ -13,7 +13,7 @@ const {
  * Links to the "check-api-key" lambda.
  * @param {object} deployment - information about the active deployment, including the appId and quota.
  */
-exports.preDeployment = async function(deployment) {
+exports.preDeployment = async function (deployment) {
   const json = await fetchCredentials(env.DEPLOYMENT_CREDENTIALS_URL, {
     apiKey: env.BUDIBASE_API_KEY,
     appId: deployment.getAppId(),
@@ -39,7 +39,7 @@ exports.preDeployment = async function(deployment) {
  * @param {object} deployment information about the active deployment, including the quota info.
  * @returns {Promise<object>} The usage has been updated against the user API key.
  */
-exports.postDeployment = async function(deployment) {
+exports.postDeployment = async function (deployment) {
   const DEPLOYMENT_SUCCESS_URL =
     env.DEPLOYMENT_CREDENTIALS_URL + "deploy/success"
 
@@ -62,14 +62,14 @@ exports.postDeployment = async function(deployment) {
   return await response.json()
 }
 
-exports.deploy = async function(deployment) {
+exports.deploy = async function (deployment) {
   const appId = deployment.getAppId()
   const { bucket, accountId } = deployment.getVerification()
   const metadata = { accountId }
   await deployToObjectStore(appId, bucket, metadata)
 }
 
-exports.replicateDb = async function(deployment) {
+exports.replicateDb = async function (deployment) {
   const appId = deployment.getAppId()
   const verification = deployment.getVerification()
   return performReplication(
diff --git a/packages/server/src/api/controllers/deploy/index.js b/packages/server/src/api/controllers/deploy/index.js
index 490fb3c72e..1152b56db8 100644
--- a/packages/server/src/api/controllers/deploy/index.js
+++ b/packages/server/src/api/controllers/deploy/index.js
@@ -91,7 +91,7 @@ async function deployApp(deployment) {
   }
 }
 
-exports.fetchDeployments = async function(ctx) {
+exports.fetchDeployments = async function (ctx) {
   try {
     const db = new PouchDB(ctx.appId)
     const deploymentDoc = await db.get("_local/deployments")
@@ -108,7 +108,7 @@ exports.fetchDeployments = async function(ctx) {
   }
 }
 
-exports.deploymentProgress = async function(ctx) {
+exports.deploymentProgress = async function (ctx) {
   try {
     const db = new PouchDB(ctx.appId)
     const deploymentDoc = await db.get("_local/deployments")
@@ -121,7 +121,7 @@ exports.deploymentProgress = async function(ctx) {
   }
 }
 
-exports.deployApp = async function(ctx) {
+exports.deployApp = async function (ctx) {
   // start by checking whether to deploy local or to cloud
   const hostingInfo = await getHostingInfo()
   deploymentService =
diff --git a/packages/server/src/api/controllers/deploy/quota.js b/packages/server/src/api/controllers/deploy/quota.js
index 5e8880c7a9..368fce0bd3 100644
--- a/packages/server/src/api/controllers/deploy/quota.js
+++ b/packages/server/src/api/controllers/deploy/quota.js
@@ -6,7 +6,7 @@ const {
   ViewNames,
 } = require("../../../db/utils")
 
-exports.getAppQuota = async function(appId) {
+exports.getAppQuota = async function (appId) {
   const db = new PouchDB(appId)
 
   const rows = await db.allDocs({
diff --git a/packages/server/src/api/controllers/deploy/selfDeploy.js b/packages/server/src/api/controllers/deploy/selfDeploy.js
index 444e7cd873..6a1849d4be 100644
--- a/packages/server/src/api/controllers/deploy/selfDeploy.js
+++ b/packages/server/src/api/controllers/deploy/selfDeploy.js
@@ -10,7 +10,7 @@ const {
   getSelfHostKey,
 } = require("../../../utilities/builder/hosting")
 
-exports.preDeployment = async function() {
+exports.preDeployment = async function () {
   const url = `${await getWorkerUrl()}/api/deploy`
   try {
     const json = await fetchCredentials(url, {
@@ -37,11 +37,11 @@ exports.preDeployment = async function() {
   }
 }
 
-exports.postDeployment = async function() {
+exports.postDeployment = async function () {
   // we don't actively need to do anything after deployment in self hosting
 }
 
-exports.deploy = async function(deployment) {
+exports.deploy = async function (deployment) {
   const appId = deployment.getAppId()
   const verification = deployment.getVerification()
   // no metadata, aws has account ID in metadata
@@ -49,7 +49,7 @@ exports.deploy = async function(deployment) {
   await deployToObjectStore(appId, verification.bucket, metadata)
 }
 
-exports.replicateDb = async function(deployment) {
+exports.replicateDb = async function (deployment) {
   const appId = deployment.getAppId()
   const verification = deployment.getVerification()
   return performReplication(
diff --git a/packages/server/src/api/controllers/deploy/utils.js b/packages/server/src/api/controllers/deploy/utils.js
index de608acfb1..59f94905fa 100644
--- a/packages/server/src/api/controllers/deploy/utils.js
+++ b/packages/server/src/api/controllers/deploy/utils.js
@@ -5,6 +5,7 @@ const fetch = require("node-fetch")
 const PouchDB = require("../../../db")
 const CouchDB = require("pouchdb")
 const { upload } = require("../../../utilities/fileSystem")
+const { attachmentsRelativeURL } = require("../../../utilities")
 
 // TODO: everything in this file is to be removed
 
@@ -21,7 +22,7 @@ function walkDir(dirPath, callback) {
   }
 }
 
-exports.fetchCredentials = async function(url, body) {
+exports.fetchCredentials = async function (url, body) {
   const response = await fetch(url, {
     method: "POST",
     body: JSON.stringify(body),
@@ -42,7 +43,7 @@ exports.fetchCredentials = async function(url, body) {
   return json
 }
 
-exports.prepareUpload = async function({ s3Key, bucket, metadata, file }) {
+exports.prepareUpload = async function ({ s3Key, bucket, metadata, file }) {
   const response = await upload({
     bucket,
     metadata,
@@ -51,22 +52,23 @@ exports.prepareUpload = async function({ s3Key, bucket, metadata, file }) {
     type: file.type,
   })
 
+  // don't store a URL, work this out on the way out as the URL could change
   return {
     size: file.size,
     name: file.name,
+    url: attachmentsRelativeURL(response.Key),
     extension: [...file.name.split(".")].pop(),
-    url: response.Location,
     key: response.Key,
   }
 }
 
-exports.deployToObjectStore = async function(appId, bucket, metadata) {
+exports.deployToObjectStore = async function (appId, bucket, metadata) {
   const appAssetsPath = join(budibaseAppsDir(), appId, "public")
 
   let uploads = []
 
   // Upload HTML, CSS and JS for each page of the web app
-  walkDir(appAssetsPath, function(filePath) {
+  walkDir(appAssetsPath, function (filePath) {
     const filePathParts = filePath.split("/")
     const appAssetUpload = exports.prepareUpload({
       bucket,
@@ -120,7 +122,7 @@ exports.performReplication = (appId, session, dbUrl) => {
     const local = new PouchDB(appId)
 
     const remote = new CouchDB(`${dbUrl}/${appId}`, {
-      fetch: function(url, opts) {
+      fetch: function (url, opts) {
         opts.headers.set("Cookie", `${session};`)
         return CouchDB.fetch(url, opts)
       },
diff --git a/packages/server/src/api/controllers/integration.js b/packages/server/src/api/controllers/integration.js
index d8c726c8f3..f1aafe7e45 100644
--- a/packages/server/src/api/controllers/integration.js
+++ b/packages/server/src/api/controllers/integration.js
@@ -1,12 +1,12 @@
 const { definitions } = require("../../integrations")
 
-exports.fetch = async function(ctx) {
+exports.fetch = async function (ctx) {
   // TODO: fetch these from a github repo etc
   ctx.status = 200
   ctx.body = definitions
 }
 
-exports.find = async function(ctx) {
+exports.find = async function (ctx) {
   ctx.status = 200
   ctx.body = definitions[ctx.params.type]
 }
diff --git a/packages/server/src/api/controllers/layout.js b/packages/server/src/api/controllers/layout.js
index 86c324d178..4c6c7755ef 100644
--- a/packages/server/src/api/controllers/layout.js
+++ b/packages/server/src/api/controllers/layout.js
@@ -2,7 +2,7 @@ const { EMPTY_LAYOUT } = require("../../constants/layouts")
 const CouchDB = require("../../db")
 const { generateLayoutID, getScreenParams } = require("../../db/utils")
 
-exports.save = async function(ctx) {
+exports.save = async function (ctx) {
   const db = new CouchDB(ctx.appId)
   let layout = ctx.request.body
 
@@ -21,7 +21,7 @@ exports.save = async function(ctx) {
   ctx.status = 200
 }
 
-exports.destroy = async function(ctx) {
+exports.destroy = async function (ctx) {
   const db = new CouchDB(ctx.appId)
   const layoutId = ctx.params.layoutId,
     layoutRev = ctx.params.layoutRev
diff --git a/packages/server/src/api/controllers/permission.js b/packages/server/src/api/controllers/permission.js
index 56c9d3f8c6..74987d5214 100644
--- a/packages/server/src/api/controllers/permission.js
+++ b/packages/server/src/api/controllers/permission.js
@@ -108,16 +108,16 @@ async function updatePermissionOnRole(
   })
 }
 
-exports.fetchBuiltin = function(ctx) {
+exports.fetchBuiltin = function (ctx) {
   ctx.body = Object.values(getBuiltinPermissions())
 }
 
-exports.fetchLevels = function(ctx) {
+exports.fetchLevels = function (ctx) {
   // for now only provide the read/write perms externally
   ctx.body = SUPPORTED_LEVELS
 }
 
-exports.fetch = async function(ctx) {
+exports.fetch = async function (ctx) {
   const db = new CouchDB(ctx.appId)
   const roles = await getAllDBRoles(db)
   let permissions = {}
@@ -144,7 +144,7 @@ exports.fetch = async function(ctx) {
   ctx.body = finalPermissions
 }
 
-exports.getResourcePerms = async function(ctx) {
+exports.getResourcePerms = async function (ctx) {
   const resourceId = ctx.params.resourceId
   const db = new CouchDB(ctx.appId)
   const body = await db.allDocs(
@@ -169,7 +169,7 @@ exports.getResourcePerms = async function(ctx) {
   ctx.body = Object.assign(getBasePermissions(resourceId), permissions)
 }
 
-exports.addPermission = async function(ctx) {
+exports.addPermission = async function (ctx) {
   ctx.body = await updatePermissionOnRole(
     ctx.appId,
     ctx.params,
@@ -177,7 +177,7 @@ exports.addPermission = async function(ctx) {
   )
 }
 
-exports.removePermission = async function(ctx) {
+exports.removePermission = async function (ctx) {
   ctx.body = await updatePermissionOnRole(
     ctx.appId,
     ctx.params,
diff --git a/packages/server/src/api/controllers/query.js b/packages/server/src/api/controllers/query.js
index ddf88e925f..e3f961f071 100644
--- a/packages/server/src/api/controllers/query.js
+++ b/packages/server/src/api/controllers/query.js
@@ -27,7 +27,7 @@ function formatResponse(resp) {
   return resp
 }
 
-exports.fetch = async function(ctx) {
+exports.fetch = async function (ctx) {
   const db = new CouchDB(ctx.appId)
 
   const body = await db.allDocs(
@@ -38,7 +38,7 @@ exports.fetch = async function(ctx) {
   ctx.body = enrichQueries(body.rows.map(row => row.doc))
 }
 
-exports.save = async function(ctx) {
+exports.save = async function (ctx) {
   const db = new CouchDB(ctx.appId)
   const query = ctx.request.body
 
@@ -89,7 +89,7 @@ async function enrichQueryFields(fields, parameters) {
   return enrichedQuery
 }
 
-exports.find = async function(ctx) {
+exports.find = async function (ctx) {
   const db = new CouchDB(ctx.appId)
   const query = enrichQueries(await db.get(ctx.params.queryId))
   // remove properties that could be dangerous in real app
@@ -101,7 +101,7 @@ exports.find = async function(ctx) {
   ctx.body = query
 }
 
-exports.preview = async function(ctx) {
+exports.preview = async function (ctx) {
   const db = new CouchDB(ctx.appId)
 
   const datasource = await db.get(ctx.request.body.datasourceId)
@@ -129,7 +129,7 @@ exports.preview = async function(ctx) {
   }
 }
 
-exports.execute = async function(ctx) {
+exports.execute = async function (ctx) {
   const db = new CouchDB(ctx.appId)
 
   const query = await db.get(ctx.params.queryId)
@@ -152,7 +152,7 @@ exports.execute = async function(ctx) {
   )
 }
 
-exports.destroy = async function(ctx) {
+exports.destroy = async function (ctx) {
   const db = new CouchDB(ctx.appId)
   await db.remove(ctx.params.queryId, ctx.params.revId)
   ctx.message = `Query deleted.`
diff --git a/packages/server/src/api/controllers/role.js b/packages/server/src/api/controllers/role.js
index 42213b010d..e1d469d977 100644
--- a/packages/server/src/api/controllers/role.js
+++ b/packages/server/src/api/controllers/role.js
@@ -50,7 +50,7 @@ async function updateRolesOnUserTable(db, roleId, updateOption) {
   }
 }
 
-exports.fetch = async function(ctx) {
+exports.fetch = async function (ctx) {
   const db = new CouchDB(ctx.appId)
   const body = await db.allDocs(
     getRoleParams(null, {
@@ -78,11 +78,11 @@ exports.fetch = async function(ctx) {
   ctx.body = roles
 }
 
-exports.find = async function(ctx) {
+exports.find = async function (ctx) {
   ctx.body = await getRole(ctx.appId, ctx.params.roleId)
 }
 
-exports.save = async function(ctx) {
+exports.save = async function (ctx) {
   const db = new CouchDB(ctx.appId)
   let { _id, name, inherits, permissionId } = ctx.request.body
   if (!_id) {
@@ -103,7 +103,7 @@ exports.save = async function(ctx) {
   ctx.message = `Role '${role.name}' created successfully.`
 }
 
-exports.destroy = async function(ctx) {
+exports.destroy = async function (ctx) {
   const db = new CouchDB(ctx.appId)
   const roleId = ctx.params.roleId
   if (isBuiltin(roleId)) {
diff --git a/packages/server/src/api/controllers/routing.js b/packages/server/src/api/controllers/routing.js
index ab1489145b..fc3237c6d5 100644
--- a/packages/server/src/api/controllers/routing.js
+++ b/packages/server/src/api/controllers/routing.js
@@ -10,7 +10,7 @@ function Routing() {
   this.json = {}
 }
 
-Routing.prototype.getTopLevel = function(fullpath) {
+Routing.prototype.getTopLevel = function (fullpath) {
   if (fullpath.charAt(0) !== URL_SEPARATOR) {
     fullpath = URL_SEPARATOR + fullpath
   }
@@ -18,7 +18,7 @@ Routing.prototype.getTopLevel = function(fullpath) {
   return URL_SEPARATOR + fullpath.split(URL_SEPARATOR)[1]
 }
 
-Routing.prototype.getScreensProp = function(fullpath) {
+Routing.prototype.getScreensProp = function (fullpath) {
   const topLevel = this.getTopLevel(fullpath)
   if (!this.json[topLevel]) {
     this.json[topLevel] = {
@@ -33,7 +33,7 @@ Routing.prototype.getScreensProp = function(fullpath) {
   return this.json[topLevel].subpaths[fullpath].screens
 }
 
-Routing.prototype.addScreenId = function(fullpath, roleId, screenId) {
+Routing.prototype.addScreenId = function (fullpath, roleId, screenId) {
   this.getScreensProp(fullpath)[roleId] = screenId
 }
 
diff --git a/packages/server/src/api/controllers/row.js b/packages/server/src/api/controllers/row.js
index 48766129b2..6d0cc08548 100644
--- a/packages/server/src/api/controllers/row.js
+++ b/packages/server/src/api/controllers/row.js
@@ -27,11 +27,11 @@ const CALCULATION_TYPES = {
 }
 
 validateJs.extend(validateJs.validators.datetime, {
-  parse: function(value) {
+  parse: function (value) {
     return new Date(value).getTime()
   },
   // Input is a unix timestamp
-  format: function(value) {
+  format: function (value) {
     return new Date(value).toISOString()
   },
 })
@@ -54,7 +54,7 @@ async function findRow(ctx, db, tableId, rowId) {
   return row
 }
 
-exports.patch = async function(ctx) {
+exports.patch = async function (ctx) {
   const appId = ctx.appId
   const db = new CouchDB(appId)
   let dbRow = await db.get(ctx.params.rowId)
@@ -115,7 +115,7 @@ exports.patch = async function(ctx) {
   ctx.message = `${table.name} updated successfully.`
 }
 
-exports.save = async function(ctx) {
+exports.save = async function (ctx) {
   const appId = ctx.appId
   const db = new CouchDB(appId)
   let inputs = ctx.request.body
@@ -189,7 +189,7 @@ exports.save = async function(ctx) {
   ctx.message = `${table.name} saved successfully`
 }
 
-exports.fetchView = async function(ctx) {
+exports.fetchView = async function (ctx) {
   const appId = ctx.appId
   const viewName = ctx.params.viewName
 
@@ -248,7 +248,7 @@ exports.fetchView = async function(ctx) {
   }
 }
 
-exports.search = async function(ctx) {
+exports.search = async function (ctx) {
   const appId = ctx.appId
   const db = new CouchDB(appId)
   const {
@@ -287,7 +287,7 @@ exports.search = async function(ctx) {
   }
 }
 
-exports.fetchTableRows = async function(ctx) {
+exports.fetchTableRows = async function (ctx) {
   const appId = ctx.appId
   const db = new CouchDB(appId)
 
@@ -308,7 +308,7 @@ exports.fetchTableRows = async function(ctx) {
   ctx.body = await outputProcessing(appId, table, rows)
 }
 
-exports.find = async function(ctx) {
+exports.find = async function (ctx) {
   const appId = ctx.appId
   const db = new CouchDB(appId)
   try {
@@ -320,7 +320,7 @@ exports.find = async function(ctx) {
   }
 }
 
-exports.destroy = async function(ctx) {
+exports.destroy = async function (ctx) {
   const appId = ctx.appId
   const db = new CouchDB(appId)
   const row = await db.get(ctx.params.rowId)
@@ -349,7 +349,7 @@ exports.destroy = async function(ctx) {
   ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:delete`, appId, row)
 }
 
-exports.validate = async function(ctx) {
+exports.validate = async function (ctx) {
   const errors = await validate({
     appId: ctx.appId,
     tableId: ctx.params.tableId,
@@ -380,7 +380,7 @@ async function validate({ appId, tableId, row, table }) {
   return { valid: Object.keys(errors).length === 0, errors }
 }
 
-exports.fetchEnrichedRow = async function(ctx) {
+exports.fetchEnrichedRow = async function (ctx) {
   const appId = ctx.appId
   const db = new CouchDB(appId)
   const tableId = ctx.params.tableId
diff --git a/packages/server/src/api/controllers/script.js b/packages/server/src/api/controllers/script.js
new file mode 100644
index 0000000000..3ee6d318d0
--- /dev/null
+++ b/packages/server/src/api/controllers/script.js
@@ -0,0 +1,22 @@
+const fetch = require("node-fetch")
+const vm = require("vm")
+
+class ScriptExecutor {
+  constructor(body) {
+    this.script = new vm.Script(body.script)
+    this.context = vm.createContext(body.context)
+    this.context.fetch = fetch
+  }
+
+  execute() {
+    const returnValue = this.script.runInContext(this.context)
+    return returnValue
+  }
+}
+
+exports.execute = async function (ctx) {
+  const executor = new ScriptExecutor(ctx.request.body)
+
+  const result = executor.execute()
+  ctx.body = result
+}
diff --git a/packages/server/src/api/controllers/static/index.js b/packages/server/src/api/controllers/static/index.js
index f0c9baf338..b9e4e52e53 100644
--- a/packages/server/src/api/controllers/static/index.js
+++ b/packages/server/src/api/controllers/static/index.js
@@ -15,7 +15,7 @@ const {
   TOP_LEVEL_PATH,
 } = require("../../../utilities/fileSystem")
 const env = require("../../../environment")
-const fileProcessor = require("../../../utilities/fileSystem/processor")
+// const fileProcessor = require("../../../utilities/fileSystem/processor")
 const { objectStoreUrl, clientLibraryPath } = require("../../../utilities")
 
 async function checkForSelfHostedURL(ctx) {
@@ -32,12 +32,12 @@ async function checkForSelfHostedURL(ctx) {
 // this was the version before we started versioning the component library
 const COMP_LIB_BASE_APP_VERSION = "0.2.5"
 
-exports.serveBuilder = async function(ctx) {
+exports.serveBuilder = async function (ctx) {
   let builderPath = resolve(TOP_LEVEL_PATH, "builder")
   await send(ctx, ctx.file, { root: builderPath })
 }
 
-exports.uploadFile = async function(ctx) {
+exports.uploadFile = async function (ctx) {
   let files =
     ctx.request.files.file.length > 1
       ? Array.from(ctx.request.files.file)
@@ -49,10 +49,11 @@ exports.uploadFile = async function(ctx) {
     const processedFileName = `${uuid.v4()}.${fileExtension}`
 
     // need to handle image processing
-    await fileProcessor.process({
-      ...file,
-      extension: fileExtension,
-    })
+    // TODO either offer this as an option, or don't do it at all
+    // await fileProcessor.process({
+    //   ...file,
+    //   extension: fileExtension,
+    // })
 
     return prepareUpload({
       file,
@@ -64,7 +65,7 @@ exports.uploadFile = async function(ctx) {
   ctx.body = await Promise.all(uploads)
 }
 
-exports.serveApp = async function(ctx) {
+exports.serveApp = async function (ctx) {
   let appId = ctx.params.appId
   if (env.SELF_HOSTED) {
     appId = await checkForSelfHostedURL(ctx)
@@ -89,13 +90,13 @@ exports.serveApp = async function(ctx) {
   })
 }
 
-exports.serveClientLibrary = async function(ctx) {
+exports.serveClientLibrary = async function (ctx) {
   return send(ctx, "budibase-client.js", {
     root: join(NODE_MODULES_PATH, "@budibase", "client", "dist"),
   })
 }
 
-exports.serveComponentLibrary = async function(ctx) {
+exports.serveComponentLibrary = async function (ctx) {
   const appId = ctx.query.appId || ctx.appId
 
   if (env.isDev() || env.isTest()) {
diff --git a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
index ee819ed8b5..8b856ba15f 100644
--- a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
+++ b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
@@ -16,7 +16,8 @@
   <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
   <link
     href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
-    rel="stylesheet" />
+    rel="stylesheet"
+  />
   <style>
     html,
     body {
diff --git a/packages/server/src/api/controllers/table/index.js b/packages/server/src/api/controllers/table/index.js
index 995ba8f72c..4299727135 100644
--- a/packages/server/src/api/controllers/table/index.js
+++ b/packages/server/src/api/controllers/table/index.js
@@ -9,7 +9,7 @@ const {
 const { FieldTypes } = require("../../../constants")
 const { TableSaveFunctions } = require("./utils")
 
-exports.fetch = async function(ctx) {
+exports.fetch = async function (ctx) {
   const db = new CouchDB(ctx.appId)
   const body = await db.allDocs(
     getTableParams(null, {
@@ -19,12 +19,12 @@ exports.fetch = async function(ctx) {
   ctx.body = body.rows.map(row => row.doc)
 }
 
-exports.find = async function(ctx) {
+exports.find = async function (ctx) {
   const db = new CouchDB(ctx.appId)
   ctx.body = await db.get(ctx.params.id)
 }
 
-exports.save = async function(ctx) {
+exports.save = async function (ctx) {
   const appId = ctx.appId
   const db = new CouchDB(appId)
   const { dataImport, ...rest } = ctx.request.body
@@ -126,7 +126,7 @@ exports.save = async function(ctx) {
   ctx.body = tableToSave
 }
 
-exports.destroy = async function(ctx) {
+exports.destroy = async function (ctx) {
   const appId = ctx.appId
   const db = new CouchDB(appId)
   const tableToDelete = await db.get(ctx.params.tableId)
@@ -164,7 +164,7 @@ exports.destroy = async function(ctx) {
   ctx.body = { message: `Table ${ctx.params.tableId} deleted.` }
 }
 
-exports.validateCSVSchema = async function(ctx) {
+exports.validateCSVSchema = async function (ctx) {
   const { csvString, schema = {} } = ctx.request.body
   const result = await csvParser.parse(csvString, schema)
   ctx.body = { schema: result }
diff --git a/packages/server/src/api/controllers/templates.js b/packages/server/src/api/controllers/templates.js
index 4d55bc5957..f650491d2b 100644
--- a/packages/server/src/api/controllers/templates.js
+++ b/packages/server/src/api/controllers/templates.js
@@ -5,7 +5,7 @@ const { downloadTemplate } = require("../../utilities/fileSystem")
 const DEFAULT_TEMPLATES_BUCKET =
   "prod-budi-templates.s3-eu-west-1.amazonaws.com"
 
-exports.fetch = async function(ctx) {
+exports.fetch = async function (ctx) {
   const { type = "app" } = ctx.query
   const response = await fetch(
     `https://${DEFAULT_TEMPLATES_BUCKET}/manifest.json`
@@ -16,7 +16,7 @@ exports.fetch = async function(ctx) {
 
 // can't currently test this, have to ignore from coverage
 /* istanbul ignore next */
-exports.downloadTemplate = async function(ctx) {
+exports.downloadTemplate = async function (ctx) {
   const { type, name } = ctx.params
 
   await downloadTemplate(type, name)
diff --git a/packages/server/src/api/controllers/user.js b/packages/server/src/api/controllers/user.js
index 1f41acc754..3b6373146e 100644
--- a/packages/server/src/api/controllers/user.js
+++ b/packages/server/src/api/controllers/user.js
@@ -13,7 +13,7 @@ const {
 } = require("../../utilities/workerRequests")
 const { getFullUser } = require("../../utilities/users")
 
-exports.fetchMetadata = async function(ctx) {
+exports.fetchMetadata = async function (ctx) {
   const database = new CouchDB(ctx.appId)
   const global = await getGlobalUsers(ctx, ctx.appId)
   const metadata = (
@@ -38,7 +38,7 @@ exports.fetchMetadata = async function(ctx) {
   ctx.body = users
 }
 
-exports.createMetadata = async function(ctx) {
+exports.createMetadata = async function (ctx) {
   const appId = ctx.appId
   const db = new CouchDB(appId)
   const { roleId } = ctx.request.body
@@ -70,7 +70,7 @@ exports.createMetadata = async function(ctx) {
   }
 }
 
-exports.updateSelfMetadata = async function(ctx) {
+exports.updateSelfMetadata = async function (ctx) {
   // overwrite the ID with current users
   ctx.request.body._id = ctx.user._id
   // make sure no stale rev
@@ -78,7 +78,7 @@ exports.updateSelfMetadata = async function(ctx) {
   await exports.updateMetadata(ctx)
 }
 
-exports.updateMetadata = async function(ctx) {
+exports.updateMetadata = async function (ctx) {
   const appId = ctx.appId
   const db = new CouchDB(appId)
   const user = ctx.request.body
@@ -88,13 +88,14 @@ exports.updateMetadata = async function(ctx) {
   })
   const metadata = {
     ...globalUser,
+    tableId: InternalTables.USER_METADATA,
     _id: user._id || generateUserMetadataID(globalUser._id),
     _rev: user._rev,
   }
   ctx.body = await db.put(metadata)
 }
 
-exports.destroyMetadata = async function(ctx) {
+exports.destroyMetadata = async function (ctx) {
   const db = new CouchDB(ctx.appId)
   await deleteGlobalUser(ctx, getGlobalIDFromUserMetadataID(ctx.params.id))
   try {
@@ -108,6 +109,6 @@ exports.destroyMetadata = async function(ctx) {
   }
 }
 
-exports.findMetadata = async function(ctx) {
+exports.findMetadata = async function (ctx) {
   ctx.body = await getFullUser(ctx, ctx.params.id)
 }
diff --git a/packages/server/src/api/controllers/view/exporters.js b/packages/server/src/api/controllers/view/exporters.js
index c1e5679d2a..830aef1832 100644
--- a/packages/server/src/api/controllers/view/exporters.js
+++ b/packages/server/src/api/controllers/view/exporters.js
@@ -1,4 +1,4 @@
-exports.csv = function(headers, rows) {
+exports.csv = function (headers, rows) {
   let csv = headers.map(key => `"${key}"`).join(",")
 
   for (let row of rows) {
@@ -9,6 +9,6 @@ exports.csv = function(headers, rows) {
   return csv
 }
 
-exports.json = function(headers, rows) {
+exports.json = function (headers, rows) {
   return JSON.stringify(rows, undefined, 2)
 }
diff --git a/packages/server/src/api/controllers/view/viewBuilder.js b/packages/server/src/api/controllers/view/viewBuilder.js
index e9fa29856d..ed1199fa5b 100644
--- a/packages/server/src/api/controllers/view/viewBuilder.js
+++ b/packages/server/src/api/controllers/view/viewBuilder.js
@@ -62,8 +62,11 @@ const SCHEMA_MAP = {
 function parseFilterExpression(filters) {
   const expression = []
 
+  let first = true
   for (let filter of filters) {
-    if (filter.conjunction) expression.push(TOKEN_MAP[filter.conjunction])
+    if (!first && filter.conjunction) {
+      expression.push(TOKEN_MAP[filter.conjunction])
+    }
 
     if (filter.condition === "CONTAINS") {
       expression.push(
@@ -77,6 +80,7 @@ function parseFilterExpression(filters) {
         `doc["${filter.key}"] ${TOKEN_MAP[filter.condition]} ${value}`
       )
     }
+    first = false
   }
 
   return expression.join(" ")
@@ -104,6 +108,10 @@ function parseEmitExpression(field, groupBy) {
  * calculation: an optional calculation to be performed over the view data.
  */
 function viewTemplate({ field, tableId, groupBy, filters = [], calculation }) {
+  // first filter can't have a conjuction
+  if (filters && filters.length > 0 && filters[0].conjunction) {
+    delete filters[0].conjunction
+  }
   const parsedFilters = parseFilterExpression(filters)
   const filterExpression = parsedFilters ? `&& ${parsedFilters}` : ""
 
diff --git a/packages/server/src/api/index.js b/packages/server/src/api/index.js
index 8dfd2f5c6a..5d16134eb4 100644
--- a/packages/server/src/api/index.js
+++ b/packages/server/src/api/index.js
@@ -5,6 +5,10 @@ const compress = require("koa-compress")
 const zlib = require("zlib")
 const { mainRoutes, staticRoutes } = require("./routes")
 const pkg = require("../../package.json")
+const bullboard = require("bull-board")
+const expressApp = require("express")()
+
+expressApp.use("/bulladmin", bullboard.router)
 
 const router = new Router()
 const env = require("../environment")
diff --git a/packages/server/src/api/routes/script.js b/packages/server/src/api/routes/script.js
new file mode 100644
index 0000000000..020d3ec59a
--- /dev/null
+++ b/packages/server/src/api/routes/script.js
@@ -0,0 +1,10 @@
+const Router = require("@koa/router")
+const controller = require("../controllers/hosting")
+const authorized = require("../../middleware/authorized")
+const { BUILDER } = require("../../utilities/security/permissions")
+
+const router = Router()
+
+router.post("/api/script", authorized(BUILDER), controller.save)
+
+module.exports = router
diff --git a/packages/server/src/app.js b/packages/server/src/app.js
index 2f3b977bbe..f08c7934bb 100644
--- a/packages/server/src/app.js
+++ b/packages/server/src/app.js
@@ -47,8 +47,8 @@ if (electron.app && electron.app.isPackaged) {
   Sentry.init()
 
   app.on("error", (err, ctx) => {
-    Sentry.withScope(function(scope) {
-      scope.addEventProcessor(function(event) {
+    Sentry.withScope(function (scope) {
+      scope.addEventProcessor(function (event) {
         return Sentry.Handlers.parseRequest(event, ctx.request)
       })
       Sentry.captureException(err)
diff --git a/packages/server/src/automations/actions.js b/packages/server/src/automations/actions.js
index 9675568808..a83608da30 100644
--- a/packages/server/src/automations/actions.js
+++ b/packages/server/src/automations/actions.js
@@ -3,6 +3,8 @@ const createRow = require("./steps/createRow")
 const updateRow = require("./steps/updateRow")
 const deleteRow = require("./steps/deleteRow")
 const createUser = require("./steps/createUser")
+const executeScript = require("./steps/executeScript")
+const executeQuery = require("./steps/executeQuery")
 const outgoingWebhook = require("./steps/outgoingWebhook")
 const env = require("../environment")
 const Sentry = require("@sentry/node")
@@ -18,6 +20,8 @@ const BUILTIN_ACTIONS = {
   DELETE_ROW: deleteRow.run,
   CREATE_USER: createUser.run,
   OUTGOING_WEBHOOK: outgoingWebhook.run,
+  EXECUTE_SCRIPT: executeScript.run,
+  EXECUTE_QUERY: executeQuery.run,
 }
 const BUILTIN_DEFINITIONS = {
   SEND_EMAIL: sendEmail.definition,
@@ -26,6 +30,8 @@ const BUILTIN_DEFINITIONS = {
   DELETE_ROW: deleteRow.definition,
   CREATE_USER: createUser.definition,
   OUTGOING_WEBHOOK: outgoingWebhook.definition,
+  EXECUTE_SCRIPT: executeScript.definition,
+  EXECUTE_QUERY: executeQuery.definition,
 }
 
 let MANIFEST = null
@@ -36,7 +42,7 @@ function buildBundleName(pkgName, version) {
 }
 
 /* istanbul ignore next */
-module.exports.getAction = async function(actionName) {
+module.exports.getAction = async function (actionName) {
   if (BUILTIN_ACTIONS[actionName] != null) {
     return BUILTIN_ACTIONS[actionName]
   }
@@ -53,7 +59,7 @@ module.exports.getAction = async function(actionName) {
   return getExternalAutomationStep(pkg.stepId, pkg.version, bundleName)
 }
 
-module.exports.init = async function() {
+module.exports.init = async function () {
   try {
     MANIFEST = await automationInit()
     module.exports.DEFINITIONS =
diff --git a/packages/server/src/automations/index.js b/packages/server/src/automations/index.js
index d67227e6ac..8f30b6b32f 100644
--- a/packages/server/src/automations/index.js
+++ b/packages/server/src/automations/index.js
@@ -30,7 +30,7 @@ async function updateQuota(automation) {
 /**
  * This module is built purely to kick off the worker farm and manage the inputs/outputs
  */
-module.exports.init = async function() {
+module.exports.init = async function () {
   await actions.init()
   triggers.automationQueue.process(async job => {
     try {
diff --git a/packages/server/src/automations/logic.js b/packages/server/src/automations/logic.js
index b74c02bb56..cbd3d42430 100644
--- a/packages/server/src/automations/logic.js
+++ b/packages/server/src/automations/logic.js
@@ -11,7 +11,7 @@ let BUILTIN_DEFINITIONS = {
   FILTER: filter.definition,
 }
 
-module.exports.getLogic = function(logicName) {
+module.exports.getLogic = function (logicName) {
   if (BUILTIN_LOGIC[logicName] != null) {
     return BUILTIN_LOGIC[logicName]
   }
diff --git a/packages/server/src/automations/steps/createRow.js b/packages/server/src/automations/steps/createRow.js
index 9ab70d3161..889f7e98b9 100644
--- a/packages/server/src/automations/steps/createRow.js
+++ b/packages/server/src/automations/steps/createRow.js
@@ -58,7 +58,7 @@ module.exports.definition = {
   },
 }
 
-module.exports.run = async function({ inputs, appId, apiKey, emitter }) {
+module.exports.run = async function ({ inputs, appId, apiKey, emitter }) {
   if (inputs.row == null || inputs.row.tableId == null) {
     return {
       success: false,
diff --git a/packages/server/src/automations/steps/createUser.js b/packages/server/src/automations/steps/createUser.js
index 2438c8fb78..6bdc784441 100644
--- a/packages/server/src/automations/steps/createUser.js
+++ b/packages/server/src/automations/steps/createUser.js
@@ -58,7 +58,7 @@ module.exports.definition = {
   },
 }
 
-module.exports.run = async function({ inputs, appId, apiKey, emitter }) {
+module.exports.run = async function ({ inputs, appId, apiKey, emitter }) {
   const { email, password, roleId } = inputs
   const ctx = {
     appId,
diff --git a/packages/server/src/automations/steps/deleteRow.js b/packages/server/src/automations/steps/deleteRow.js
index 4d6fbb2a70..b6af7ecaab 100644
--- a/packages/server/src/automations/steps/deleteRow.js
+++ b/packages/server/src/automations/steps/deleteRow.js
@@ -50,7 +50,7 @@ module.exports.definition = {
   },
 }
 
-module.exports.run = async function({ inputs, appId, apiKey, emitter }) {
+module.exports.run = async function ({ inputs, appId, apiKey, emitter }) {
   if (inputs.id == null || inputs.revision == null) {
     return {
       success: false,
diff --git a/packages/server/src/automations/steps/executeQuery.js b/packages/server/src/automations/steps/executeQuery.js
new file mode 100644
index 0000000000..d045a75544
--- /dev/null
+++ b/packages/server/src/automations/steps/executeQuery.js
@@ -0,0 +1,84 @@
+const queryController = require("../../api/controllers/query")
+
+module.exports.definition = {
+  name: "External Data Connector",
+  tagline: "Execute Data Connector",
+  icon: "ri-database-2-line",
+  description: "Execute a query in an external data connector",
+  type: "ACTION",
+  stepId: "EXECUTE_QUERY",
+  inputs: {},
+  schema: {
+    inputs: {
+      properties: {
+        query: {
+          type: "object",
+          properties: {
+            queryId: {
+              type: "string",
+              customType: "query",
+            },
+          },
+          customType: "queryParams",
+          title: "Parameters",
+          required: ["queryId"],
+        },
+      },
+      required: ["query"],
+    },
+    outputs: {
+      properties: {
+        response: {
+          type: "object",
+          description: "The response from the datasource execution",
+        },
+        success: {
+          type: "boolean",
+          description: "Whether the action was successful",
+        },
+      },
+    },
+    required: ["response", "success"],
+  },
+}
+
+module.exports.run = async function ({ inputs, appId, emitter }) {
+  if (inputs.query == null) {
+    return {
+      success: false,
+      response: {
+        message: "Invalid inputs",
+      },
+    }
+  }
+
+  const { queryId, ...rest } = inputs.query
+
+  const ctx = {
+    params: {
+      queryId,
+    },
+    request: {
+      body: {
+        parameters: rest,
+      },
+    },
+    appId,
+    eventEmitter: emitter,
+  }
+
+  await queryController.execute(ctx)
+
+  try {
+    return {
+      response: ctx.body,
+      success: ctx.status === 200,
+    }
+  } catch (err) {
+    console.error(err)
+    return {
+      success: false,
+      response: err,
+    }
+  }
+}
diff --git a/packages/server/src/automations/steps/executeScript.js b/packages/server/src/automations/steps/executeScript.js
new file mode 100644
index 0000000000..5bea1ab151
--- /dev/null
+++ b/packages/server/src/automations/steps/executeScript.js
@@ -0,0 +1,73 @@
+const scriptController = require("../../api/controllers/script")
+
+module.exports.definition = {
+  name: "Scripting",
+  tagline: "Execute JavaScript Code",
+  icon: "ri-terminal-box-line",
+  description: "Run a piece of JavaScript code in your automation",
+  type: "ACTION",
+  stepId: "EXECUTE_SCRIPT",
+  inputs: {},
+  schema: {
+    inputs: {
+      properties: {
+        code: {
+          type: "string",
+          customType: "code",
+          title: "Code",
+        },
+      },
+      required: ["code"],
+    },
+    outputs: {
+      properties: {
+        value: {
+          type: "string",
+          description:
+            "The result of the last statement of the executed script.",
+        },
+        success: {
+          type: "boolean",
+          description: "Whether the action was successful",
+        },
+      },
+    },
+    required: ["success"],
+  },
+}
+
+module.exports.run = async function ({ inputs, appId, context, emitter }) {
+  if (inputs.code == null) {
+    return {
+      success: false,
+      response: {
+        message: "Invalid inputs",
+      },
+    }
+  }
+
+  const ctx = {
+    request: {
+      body: {
+        script: inputs.code,
+        context,
+      },
+    },
+    user: { appId },
+    eventEmitter: emitter,
+  }
+
+  try {
+    await scriptController.execute(ctx)
+    return {
+      success: ctx.status === 200,
+      value: ctx.body,
+    }
+  } catch (err) {
+    console.error(err)
+    return {
+      success: false,
+      response: err,
+    }
+  }
+}
diff --git a/packages/server/src/automations/steps/outgoingWebhook.js b/packages/server/src/automations/steps/outgoingWebhook.js
index ab8c747c58..f476d57ac5 100644
--- a/packages/server/src/automations/steps/outgoingWebhook.js
+++ b/packages/server/src/automations/steps/outgoingWebhook.js
@@ -64,7 +64,7 @@ module.exports.definition = {
   },
 }
 
-module.exports.run = async function({ inputs }) {
+module.exports.run = async function ({ inputs }) {
   let { requestMethod, url, requestBody } = inputs
   if (!url.startsWith("http")) {
     url = `http://${url}`
diff --git a/packages/server/src/automations/steps/sendEmail.js b/packages/server/src/automations/steps/sendEmail.js
index 7f7438e58a..e08a3d8bc4 100644
--- a/packages/server/src/automations/steps/sendEmail.js
+++ b/packages/server/src/automations/steps/sendEmail.js
@@ -48,7 +48,7 @@ module.exports.definition = {
   },
 }
 
-module.exports.run = async function({ inputs }) {
+module.exports.run = async function ({ inputs }) {
   const sgMail = require("@sendgrid/mail")
   sgMail.setApiKey(inputs.apiKey)
   const msg = {
diff --git a/packages/server/src/automations/steps/updateRow.js b/packages/server/src/automations/steps/updateRow.js
index 78c11a4212..f873eecbdb 100644
--- a/packages/server/src/automations/steps/updateRow.js
+++ b/packages/server/src/automations/steps/updateRow.js
@@ -53,7 +53,7 @@ module.exports.definition = {
   },
 }
 
-module.exports.run = async function({ inputs, appId, emitter }) {
+module.exports.run = async function ({ inputs, appId, emitter }) {
   if (inputs.rowId == null || inputs.row == null) {
     return {
       success: false,
diff --git a/packages/server/src/automations/thread.js b/packages/server/src/automations/thread.js
index 7dbf9272ec..d4c89ac349 100644
--- a/packages/server/src/automations/thread.js
+++ b/packages/server/src/automations/thread.js
@@ -56,6 +56,7 @@ class Orchestrator {
           appId: this._appId,
           apiKey: automation.apiKey,
           emitter: this._emitter,
+          context: this._context,
         })
         if (step.stepId === FILTER_STEP_ID && !outputs.success) {
           break
diff --git a/packages/server/src/automations/triggers.js b/packages/server/src/automations/triggers.js
index 7e50e5ee74..e11784eb95 100644
--- a/packages/server/src/automations/triggers.js
+++ b/packages/server/src/automations/triggers.js
@@ -1,10 +1,14 @@
 const CouchDB = require("../db")
 const emitter = require("../events/index")
-const InMemoryQueue = require("../utilities/queue/inMemoryQueue")
+const Queue = require("bull")
+const { setQueues, BullAdapter } = require("bull-board")
 const { getAutomationParams } = require("../db/utils")
 const { coerce } = require("../utilities/rowProcessor")
 
-let automationQueue = new InMemoryQueue("automationQueue")
+let automationQueue = new Queue("automationQueue")
+
+// Set up queues for bull board admin
+setQueues([new BullAdapter(automationQueue)])
 
 const FAKE_STRING = "TEST"
 const FAKE_BOOL = false
@@ -224,7 +228,7 @@ async function queueRelevantRowAutomations(event, eventType) {
   }
 }
 
-emitter.on("row:save", async function(event) {
+emitter.on("row:save", async function (event) {
   /* istanbul ignore next */
   if (!event || !event.row || !event.row.tableId) {
     return
@@ -232,7 +236,7 @@ emitter.on("row:save", async function(event) {
   await queueRelevantRowAutomations(event, "row:save")
 })
 
-emitter.on("row:update", async function(event) {
+emitter.on("row:update", async function (event) {
   /* istanbul ignore next */
   if (!event || !event.row || !event.row.tableId) {
     return
@@ -240,7 +244,7 @@ emitter.on("row:update", async function(event) {
   await queueRelevantRowAutomations(event, "row:update")
 })
 
-emitter.on("row:delete", async function(event) {
+emitter.on("row:delete", async function (event) {
   /* istanbul ignore next */
   if (!event || !event.row || !event.row.tableId) {
     return
@@ -281,7 +285,7 @@ async function fillRowOutput(automation, params) {
   return params
 }
 
-module.exports.externalTrigger = async function(automation, params) {
+module.exports.externalTrigger = async function (automation, params) {
   // TODO: replace this with allowing user in builder to input values in future
   if (automation.definition != null && automation.definition.trigger != null) {
     if (automation.definition.trigger.inputs.tableId != null) {
diff --git a/packages/server/src/constants/index.js b/packages/server/src/constants/index.js
index 9853676aa6..f9a72ec479 100644
--- a/packages/server/src/constants/index.js
+++ b/packages/server/src/constants/index.js
@@ -13,6 +13,7 @@ exports.FieldTypes = {
   DATETIME: "datetime",
   ATTACHMENT: "attachment",
   LINK: "link",
+  FORMULA: "formula",
   AUTO: "auto",
 }
 
diff --git a/packages/server/src/db/linkedRows/index.js b/packages/server/src/db/linkedRows/index.js
index 8de2093fb2..5af10e41d7 100644
--- a/packages/server/src/db/linkedRows/index.js
+++ b/packages/server/src/db/linkedRows/index.js
@@ -10,6 +10,7 @@ const {
 } = require("./linkUtils")
 const { flatten } = require("lodash")
 const CouchDB = require("../../db")
+const { FieldTypes } = require("../../constants")
 const { getMultiIDParams } = require("../../db/utils")
 
 /**
@@ -68,7 +69,7 @@ async function getLinksForRows(appId, rows) {
  * @returns {Promise<object>} When the update is complete this will respond successfully. Returns the row for
  * row operations and the table for table operations.
  */
-exports.updateLinks = async function({
+exports.updateLinks = async function ({
   eventType,
   appId,
   row,
@@ -141,14 +142,14 @@ exports.attachLinkIDs = async (appId, rows) => {
 }
 
 /**
- * Given information about the table we can extract the display name from the linked rows, this
- * is what we do for showing the display name of each linked row when in a table format.
+ * Given a table and a list of rows this will retrieve all of the attached docs and enrich them into the row.
+ * This is required for formula fields, this may only be utilised internally (for now).
  * @param {string} appId The app in which the tables/rows/links exist.
  * @param {object} table The table from which the rows originated.
- * @param {array<object>} rows The rows which are to be enriched with the linked display names/IDs.
- * @returns {Promise<Array>} The enriched rows after having display names/IDs attached to the linked fields.
+ * @param {array<object>} rows The rows which are to be enriched.
+ * @return {Promise<*>} returns the rows with all of the enriched relationships on it.
  */
-exports.attachLinkedPrimaryDisplay = async (appId, table, rows) => {
+exports.attachFullLinkedDocs = async (appId, table, rows) => {
   const linkedTableIds = getLinkedTableIDs(table)
   if (linkedTableIds.length === 0) {
     return rows
@@ -161,7 +162,6 @@ exports.attachLinkedPrimaryDisplay = async (appId, table, rows) => {
   const linked = (await db.allDocs(getMultiIDParams(linkedRowIds))).rows.map(
     row => row.doc
   )
-  // will populate this as we find them
   const linkedTables = []
   for (let row of rows) {
     for (let link of links.filter(link => link.thisId === row._id)) {
@@ -175,13 +175,44 @@ exports.attachLinkedPrimaryDisplay = async (appId, table, rows) => {
       if (!linkedRow || !linkedTable) {
         continue
       }
-      const obj = { _id: linkedRow._id }
-      // if we know the display column, add it
-      if (linkedRow[linkedTable.primaryDisplay] != null) {
-        obj.primaryDisplay = linkedRow[linkedTable.primaryDisplay]
-      }
-      row[link.fieldName].push(obj)
+      row[link.fieldName].push(linkedRow)
     }
   }
   return rows
 }
+
+/**
+ * This function will take the given enriched rows and squash the links to only contain the primary display field.
+ * @param {string} appId The app in which the tables/rows/links exist.
+ * @param {object} table The table from which the rows originated.
+ * @param {array<object>} enriched The pre-enriched rows (full docs) which are to be squashed.
+ * @returns {Promise<Array>} The rows after having their links squashed to only contain the ID and primary display.
+ */
+exports.squashLinksToPrimaryDisplay = async (appId, table, enriched) => {
+  const db = new CouchDB(appId)
+  // will populate this as we find them
+  const linkedTables = []
+  for (let [column, schema] of Object.entries(table.schema)) {
+    if (schema.type !== FieldTypes.LINK) {
+      continue
+    }
+    for (let row of enriched) {
+      if (!row[column] || !row[column].length) {
+        continue
+      }
+      const newLinks = []
+      for (let link of row[column]) {
+        const linkTblId = link.tableId || getRelatedTableForField(table, column)
+        // this only fetches the table if its not already in array
+        const linkedTable = await getLinkedTable(db, linkTblId, linkedTables)
+        const obj = { _id: link._id }
+        if (link[linkedTable.primaryDisplay]) {
+          obj.primaryDisplay = link[linkedTable.primaryDisplay]
+        }
+        newLinks.push(obj)
+      }
+      row[column] = newLinks
+    }
+  }
+  return enriched
+}
diff --git a/packages/server/src/db/linkedRows/linkUtils.js b/packages/server/src/db/linkedRows/linkUtils.js
index 9200a05b98..fc3e71b8d9 100644
--- a/packages/server/src/db/linkedRows/linkUtils.js
+++ b/packages/server/src/db/linkedRows/linkUtils.js
@@ -29,7 +29,7 @@ exports.createLinkView = createLinkView
  * @returns {Promise<object[]>} This will return an array of the linking documents that were found
  * (if any).
  */
-exports.getLinkDocuments = async function({
+exports.getLinkDocuments = async function ({
   appId,
   tableId,
   rowId,
diff --git a/packages/server/src/db/newid.js b/packages/server/src/db/newid.js
index 6af467480d..b4f5e51c07 100644
--- a/packages/server/src/db/newid.js
+++ b/packages/server/src/db/newid.js
@@ -1,5 +1,5 @@
 const { v4 } = require("uuid")
 
-module.exports = function() {
+module.exports = function () {
   return v4().replace(/-/g, "")
 }
diff --git a/packages/server/src/db/views/staticViews.js b/packages/server/src/db/views/staticViews.js
index 305d042217..5f5bc7db14 100644
--- a/packages/server/src/db/views/staticViews.js
+++ b/packages/server/src/db/views/staticViews.js
@@ -29,7 +29,7 @@ exports.createLinkView = async appId => {
   const db = new CouchDB(appId)
   const designDoc = await db.get("_design/database")
   const view = {
-    map: function(doc) {
+    map: function (doc) {
       // everything in this must remain constant as its going to Pouch, no external variables
       if (doc.type === "link") {
         let doc1 = doc.doc1
@@ -93,7 +93,7 @@ exports.createAllSearchIndex = async appId => {
   await searchIndex(
     appId,
     SearchIndexes.ROWS,
-    function(doc) {
+    function (doc) {
       function idx(input, prev) {
         for (let key of Object.keys(input)) {
           const idxKey = prev != null ? `${prev}.${key}` : key
diff --git a/packages/server/src/utilities/budibaseDir.js b/packages/server/src/utilities/budibaseDir.js
index e27c45b9e0..f8cf3251ec 100644
--- a/packages/server/src/utilities/budibaseDir.js
+++ b/packages/server/src/utilities/budibaseDir.js
@@ -2,10 +2,10 @@ const { join } = require("./centralPath")
 const { homedir, tmpdir } = require("os")
 const env = require("../environment")
 
-module.exports.budibaseAppsDir = function() {
+module.exports.budibaseAppsDir = function () {
   return env.BUDIBASE_DIR || join(homedir(), ".budibase")
 }
 
-module.exports.budibaseTempDir = function() {
+module.exports.budibaseTempDir = function () {
   return join(tmpdir(), ".budibase")
 }
diff --git a/packages/server/src/utilities/centralPath.js b/packages/server/src/utilities/centralPath.js
index 030ba55fc5..4ce7bcfbb3 100644
--- a/packages/server/src/utilities/centralPath.js
+++ b/packages/server/src/utilities/centralPath.js
@@ -8,7 +8,7 @@ const path = require("path")
  * @param args Any number of string arguments to add to a path
  * @returns {string} The final path ready to use
  */
-exports.join = function(...args) {
+exports.join = function (...args) {
   return path.join(...args)
 }
 
@@ -17,6 +17,6 @@ exports.join = function(...args) {
  * @param args Any number of string arguments to add to a path
  * @returns {string} The final path ready to use
  */
-exports.resolve = function(...args) {
+exports.resolve = function (...args) {
   return path.resolve(...args)
 }
diff --git a/packages/server/src/utilities/index.js b/packages/server/src/utilities/index.js
index d9aeae60df..4210e6678b 100644
--- a/packages/server/src/utilities/index.js
+++ b/packages/server/src/utilities/index.js
@@ -1,7 +1,7 @@
 const env = require("../environment")
 const { DocumentTypes, SEPARATOR } = require("../db/utils")
 const CouchDB = require("../db")
-const { OBJ_STORE_DIRECTORY } = require("../constants")
+const { OBJ_STORE_DIRECTORY, ObjectStoreBuckets } = require("../constants")
 
 const BB_CDN = "https://cdn.app.budi.live/assets"
 const APP_PREFIX = DocumentTypes.APP + SEPARATOR
@@ -70,3 +70,9 @@ exports.clientLibraryPath = appId => {
     return `/api/assets/client`
   }
 }
+
+exports.attachmentsRelativeURL = attachmentKey => {
+  return exports.checkSlashesInUrl(
+    `/${ObjectStoreBuckets.APPS}/${attachmentKey}`
+  )
+}
diff --git a/packages/server/src/utilities/rowProcessor.js b/packages/server/src/utilities/rowProcessor.js
index c0c3aff8ae..fd79751c3e 100644
--- a/packages/server/src/utilities/rowProcessor.js
+++ b/packages/server/src/utilities/rowProcessor.js
@@ -1,8 +1,8 @@
-const env = require("../environment")
-const { OBJ_STORE_DIRECTORY } = require("../constants")
 const linkRows = require("../db/linkedRows")
 const { cloneDeep } = require("lodash/fp")
 const { FieldTypes, AutoFieldSubTypes } = require("../constants")
+const { processStringSync } = require("@budibase/string-templates")
+const { attachmentsRelativeURL } = require("./index")
 
 const BASE_AUTO_ID = 1
 
@@ -34,6 +34,11 @@ const TYPE_TRANSFORM_MAP = {
     [null]: "",
     [undefined]: undefined,
   },
+  [FieldTypes.FORMULA]: {
+    "": "",
+    [null]: "",
+    [undefined]: undefined,
+  },
   [FieldTypes.LONGFORM]: {
     "": "",
     [null]: "",
@@ -118,6 +123,41 @@ function processAutoColumn(user, table, row) {
   return { table, row }
 }
 
+/**
+ * Given a set of rows and the table they came from this function will sort by auto ID or a custom
+ * method if provided (not implemented yet).
+ */
+function sortRows(table, rows) {
+  // sort based on auto ID (if found)
+  let autoIDColumn = Object.entries(table.schema).find(
+    schema => schema[1].subtype === AutoFieldSubTypes.AUTO_ID
+  )
+  // get the column name, this is the first element in the array (Object.entries)
+  autoIDColumn = autoIDColumn && autoIDColumn.length ? autoIDColumn[0] : null
+  if (autoIDColumn) {
+    // sort in ascending order
+    rows.sort((a, b) => a[autoIDColumn] - b[autoIDColumn])
+  }
+  return rows
+}
+
+/**
+ * Looks through the rows provided and finds formulas - which it then processes.
+ */
+function processFormulas(table, rows) {
+  for (let [column, schema] of Object.entries(table.schema)) {
+    if (schema.type !== FieldTypes.FORMULA) {
+      continue
+    }
+    // iterate through rows and process formula
+    rows = rows.map(row => ({
+      ...row,
+      [column]: processStringSync(schema.formula, row),
+    }))
+  }
+  return rows
+}
+
 /**
  * This will coerce a value to the correct types based on the type transform map
  * @param {object} row The value to coerce
@@ -173,27 +213,27 @@ exports.outputProcessing = async (appId, table, rows) => {
     rows = [rows]
     wasArray = false
   }
+  // sort by auto ID
+  rows = sortRows(table, rows)
   // attach any linked row information
-  const outputRows = await linkRows.attachLinkedPrimaryDisplay(
-    appId,
-    table,
-    rows
-  )
+  let enriched = await linkRows.attachFullLinkedDocs(appId, table, rows)
+
+  // process formulas
+  enriched = processFormulas(table, enriched)
+
   // update the attachments URL depending on hosting
-  if (env.isProd() && env.SELF_HOSTED) {
-    for (let [property, column] of Object.entries(table.schema)) {
-      if (column.type === FieldTypes.ATTACHMENT) {
-        for (let row of outputRows) {
-          if (row[property] == null || row[property].length === 0) {
-            continue
-          }
-          row[property].forEach(attachment => {
-            attachment.url = `${OBJ_STORE_DIRECTORY}/${appId}/${attachment.url}`
-            attachment.url = attachment.url.replace("//", "/")
-          })
+  for (let [property, column] of Object.entries(table.schema)) {
+    if (column.type === FieldTypes.ATTACHMENT) {
+      for (let row of enriched) {
+        if (row[property] == null || row[property].length === 0) {
+          continue
         }
+        row[property].forEach(attachment => {
+          attachment.url = attachmentsRelativeURL(attachment.key)
+        })
       }
     }
   }
-  return wasArray ? outputRows : outputRows[0]
+  enriched = await linkRows.squashLinksToPrimaryDisplay(appId, table, enriched)
+  return wasArray ? enriched : enriched[0]
 }
diff --git a/packages/server/src/utilities/security/roles.js b/packages/server/src/utilities/security/roles.js
index b0cd843591..abfaa5c241 100644
--- a/packages/server/src/utilities/security/roles.js
+++ b/packages/server/src/utilities/security/roles.js
@@ -16,12 +16,12 @@ function Role(id, name) {
   this.name = name
 }
 
-Role.prototype.addPermission = function(permissionId) {
+Role.prototype.addPermission = function (permissionId) {
   this.permissionId = permissionId
   return this
 }
 
-Role.prototype.addInheritance = function(inherits) {
+Role.prototype.addInheritance = function (inherits) {
   this.inherits = inherits
   return this
 }
diff --git a/packages/server/src/utilities/workerRequests.js b/packages/server/src/utilities/workerRequests.js
index 2de74aa155..f96d48092e 100644
--- a/packages/server/src/utilities/workerRequests.js
+++ b/packages/server/src/utilities/workerRequests.js
@@ -122,12 +122,15 @@ exports.saveGlobalUser = async (ctx, appId, body) => {
   if (json.status !== 200 && response.status !== 200) {
     ctx.throw(400, "Unable to save global user.")
   }
-  delete body.email
   delete body.password
-  delete body.roleId
-  delete body.status
   delete body.roles
   delete body.builder
+  // TODO: for now these have been left in as they are
+  // TODO: pretty important to keeping relationships working
+  // TODO: however if user metadata is changed this should be removed
+  // delete body.email
+  // delete body.roleId
+  // delete body.status
   return {
     ...body,
     _id: json._id,
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index 0451fa956b..a946923313 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -227,6 +227,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
+  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.7.2":
   version "7.13.10"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
@@ -1154,11 +1161,52 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/body-parser@*":
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.0.tgz#0685b3c47eb3006ffed117cdd55164b61f80538f"
+  integrity sha512-W98JrE0j2K78swW4ukqMleo8R7h/pFETjM2DQ90MF6XK2i4LO4W3gQ71Lt4w3bfm2EvVSyWHplECvB5sK22yFQ==
+  dependencies:
+    "@types/connect" "*"
+    "@types/node" "*"
+
+"@types/bull@^3.14.4":
+  version "3.15.1"
+  resolved "https://registry.yarnpkg.com/@types/bull/-/bull-3.15.1.tgz#3c3fd665b43ef383ca95a91b8d1448461fae0898"
+  integrity sha512-thZyjxikoyuDa/ptZEqtTEPUjwlDenkpPigpIyad1X5UMp7U0fXTLiDHJjZ/5yXmVPuWx0cXFXj3drmva/UJRA==
+  dependencies:
+    "@types/ioredis" "*"
+
+"@types/connect@*":
+  version "3.4.34"
+  resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.34.tgz#170a40223a6d666006d93ca128af2beb1d9b1901"
+  integrity sha512-ePPA/JuI+X0vb+gSWlPKOY0NdNAie/rPUqX2GUPpbZwiKTkSPhjXWuee47E4MtE54QVzGCQMQkAL6JhV2E1+cQ==
+  dependencies:
+    "@types/node" "*"
+
 "@types/debug@^4.1.5":
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.5.tgz#b14efa8852b7768d898906613c23f688713e02cd"
   integrity sha512-Q1y515GcOdTHgagaVFhHnIFQ38ygs/kmxdNpvpou+raI9UO3YZcHDngBSYKQklcKlvA7iuQlmIKbzvmxcOE9CQ==
 
+"@types/express-serve-static-core@^4.17.14", "@types/express-serve-static-core@^4.17.18":
+  version "4.17.19"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.19.tgz#00acfc1632e729acac4f1530e9e16f6dd1508a1d"
+  integrity sha512-DJOSHzX7pCiSElWaGR8kCprwibCB/3yW6vcT8VG3P0SJjnv19gnWG/AZMfM60Xj/YJIp/YCaDHyvzsFVeniARA==
+  dependencies:
+    "@types/node" "*"
+    "@types/qs" "*"
+    "@types/range-parser" "*"
+
+"@types/express@^4.17.9":
+  version "4.17.11"
+  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.11.tgz#debe3caa6f8e5fcda96b47bd54e2f40c4ee59545"
+  integrity sha512-no+R6rW60JEc59977wIxreQVsIEOAYwgCqldrA/vkpCnbD7MqTefO97lmoBe4WE0F156bC4uLSP1XHDOySnChg==
+  dependencies:
+    "@types/body-parser" "*"
+    "@types/express-serve-static-core" "^4.17.18"
+    "@types/qs" "*"
+    "@types/serve-static" "*"
+
 "@types/formidable@^1.0.31":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@types/formidable/-/formidable-1.2.1.tgz#d17006b48acd314df9bcfa04236b3e32de0cc817"
@@ -1181,6 +1229,13 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/ioredis@*", "@types/ioredis@^4.22.3":
+  version "4.26.1"
+  resolved "https://registry.yarnpkg.com/@types/ioredis/-/ioredis-4.26.1.tgz#761f1812c48a3ecfbd9d9ecd35c49849f8693e2e"
+  integrity sha512-k9f+bda6y0ZNrwUMNYI9mqIPqjPZ4Jqc+jTRTUyhFz8aD8cHQBk+uenTKCZj9RhdfrU4sSqrot5sn5LqkAHODw==
+  dependencies:
+    "@types/node" "*"
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
@@ -1201,6 +1256,11 @@
     "@types/istanbul-lib-coverage" "*"
     "@types/istanbul-lib-report" "*"
 
+"@types/mime@^1":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"
+  integrity sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==
+
 "@types/minimatch@*":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.4.tgz#f0ec25dbf2f0e4b18647313ac031134ca5b24b21"
@@ -1234,6 +1294,37 @@
     "@types/node" "*"
     xmlbuilder ">=11.0.1"
 
+"@types/prop-types@*":
+  version "15.7.3"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
+  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
+
+"@types/qs@*":
+  version "6.9.6"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.6.tgz#df9c3c8b31a247ec315e6996566be3171df4b3b1"
+  integrity sha512-0/HnwIfW4ki2D8L8c9GVcG5I72s9jP5GSLVF0VIXDW00kmIpA6O33G7a8n59Tmh7Nz0WUC3rSb7PTY/sdW2JzA==
+
+"@types/range-parser@*":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c"
+  integrity sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==
+
+"@types/react-dom@^17.0.2":
+  version "17.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.3.tgz#7fdf37b8af9d6d40127137865bb3fff8871d7ee1"
+  integrity sha512-4NnJbCeWE+8YBzupn/YrJxZ8VnjcJq5iR1laqQ1vkpQgBiA7bwk0Rp24fxsdNinzJY2U+HHS4dJJDPdoMjdJ7w==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "17.0.4"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.4.tgz#a67c6f7a460d2660e950d9ccc1c2f18525c28220"
+  integrity sha512-onz2BqScSFMoTRdJUZUDD/7xrusM8hBA2Fktk2qgaTYPCgPvWnDEgkrOs8hhPUf2jfcIXkJ5yK6VfYormJS3Jw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/readable-stream@^2.3.5":
   version "2.3.9"
   resolved "https://registry.yarnpkg.com/@types/readable-stream/-/readable-stream-2.3.9.tgz#40a8349e6ace3afd2dd1b6d8e9b02945de4566a9"
@@ -1242,11 +1333,24 @@
     "@types/node" "*"
     safe-buffer "*"
 
+"@types/scheduler@*":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275"
+  integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==
+
 "@types/semver@^7.1.0":
   version "7.3.4"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.4.tgz#43d7168fec6fa0988bb1a513a697b29296721afb"
   integrity sha512-+nVsLKlcUCeMzD2ufHEYuJ9a2ovstb6Dp52A5VsoKxDXgvE051XgHI/33I1EymwkRGQkwnA0LkhnUzituGs4EQ==
 
+"@types/serve-static@*":
+  version "1.13.9"
+  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.13.9.tgz#aacf28a85a05ee29a11fb7c3ead935ac56f33e4e"
+  integrity sha512-ZFqF6qa48XsPdjXV5Gsz0Zqmux2PerNd3a/ktL45mHpa19cuMi/cL8tcxdAx497yRh+QtYPuofjT9oWw9P7nkA==
+  dependencies:
+    "@types/mime" "^1"
+    "@types/node" "*"
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -1335,7 +1439,7 @@ abstract-leveldown@~6.2.1, abstract-leveldown@~6.2.3:
     level-supports "~1.0.0"
     xtend "~4.0.0"
 
-accepts@^1.3.5:
+accepts@^1.3.5, accepts@~1.3.7:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
   integrity sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==
@@ -1849,6 +1953,11 @@ array-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
   integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
 
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+  integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
+
 array-sort@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/array-sort/-/array-sort-0.1.4.tgz#662855eaeb671b4188df4451b2f24a0753992b23"
@@ -2152,6 +2261,22 @@ bmp-js@^0.1.0:
   resolved "https://registry.yarnpkg.com/bmp-js/-/bmp-js-0.1.0.tgz#e05a63f796a6c1ff25f4771ec7adadc148c07233"
   integrity sha1-4Fpj95amwf8l9Hcex62twUjAcjM=
 
+body-parser@1.19.0:
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
+  integrity sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==
+  dependencies:
+    bytes "3.1.0"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "~1.1.2"
+    http-errors "1.7.2"
+    iconv-lite "0.4.24"
+    on-finished "~2.3.0"
+    qs "6.7.0"
+    raw-body "2.4.0"
+    type-is "~1.6.17"
+
 boolean@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/boolean/-/boolean-3.0.3.tgz#0fee0c9813b66bef25a8a6a904bb46736d05f024"
@@ -2357,6 +2482,45 @@ builder-util@22.10.5:
     stat-mode "^1.0.0"
     temp-file "^3.3.7"
 
+bull-board@^1.5.1:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/bull-board/-/bull-board-1.7.2.tgz#f3aef2f3a67b78f2e77798b83b2c9149100c9c34"
+  integrity sha512-OYYaQ4R3X+V5ElZOPDLLEYNY21KMZUZDgj0tTqZ8LMzW/jk+3T/Mtj4EFYULCISFru0TjjwetpcJWqPHM7UTKg==
+  dependencies:
+    "@types/bull" "^3.14.4"
+    "@types/express" "^4.17.9"
+    "@types/express-serve-static-core" "^4.17.14"
+    "@types/ioredis" "^4.22.3"
+    "@types/react-dom" "^17.0.2"
+    axios "^0.21.1"
+    classnames "^2.2.6"
+    date-fns "2.21.1"
+    ejs "3.1.6"
+    express "4.17.1"
+    highlight.js "^10.7.1"
+    pretty-bytes "5.6.0"
+    react "17.0.2"
+    react-dom "17.0.2"
+    react-router-dom "^5.2.0"
+    react-toastify "^7.0.3"
+    redis-info "^3.0.8"
+
+bull@^3.22.0:
+  version "3.22.4"
+  resolved "https://registry.yarnpkg.com/bull/-/bull-3.22.4.tgz#1bda418d2aebdf892413d0c45d75c8ea5e0fc984"
+  integrity sha512-CV78TuSKyDj3SuZvySTOFXqZBtHxebhctLTq2Ff9Jrn51XOaxkEDioIDzq2LIUKEhTW8l3rFK5bIWNwweY0LXQ==
+  dependencies:
+    cron-parser "^2.13.0"
+    debuglog "^1.0.0"
+    get-port "^5.1.1"
+    ioredis "^4.22.0"
+    lodash "^4.17.21"
+    p-timeout "^3.2.0"
+    promise.prototype.finally "^3.1.2"
+    semver "^7.3.2"
+    util.promisify "^1.0.1"
+    uuid "^8.3.0"
+
 bytes@3.1.0, bytes@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
@@ -2531,6 +2695,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.6:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 clean-stack@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -2596,6 +2765,11 @@ clone@^2.1.1:
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 cluster-key-slot@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/cluster-key-slot/-/cluster-key-slot-1.1.0.tgz#30474b2a981fb12172695833052bc0d01336d10d"
@@ -2756,14 +2930,14 @@ console-clear@^1.1.0:
   resolved "https://registry.yarnpkg.com/console-clear/-/console-clear-1.1.1.tgz#995e20cbfbf14dd792b672cde387bd128d674bf7"
   integrity sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==
 
-content-disposition@^0.5.2, content-disposition@~0.5.2:
+content-disposition@0.5.3, content-disposition@^0.5.2, content-disposition@~0.5.2:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
   integrity sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==
   dependencies:
     safe-buffer "5.1.2"
 
-content-type@^1.0.4:
+content-type@^1.0.4, content-type@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
@@ -2775,6 +2949,16 @@ convert-source-map@^1.4.0, convert-source-map@^1.7.0:
   dependencies:
     safe-buffer "~5.1.1"
 
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
+
+cookie@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
+  integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
+
 cookie@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
@@ -2815,6 +2999,14 @@ crc@^3.4.4, crc@^3.8.0:
   dependencies:
     buffer "^5.1.0"
 
+cron-parser@^2.13.0:
+  version "2.18.0"
+  resolved "https://registry.yarnpkg.com/cron-parser/-/cron-parser-2.18.0.tgz#de1bb0ad528c815548371993f81a54e5a089edcf"
+  integrity sha512-s4odpheTyydAbTBQepsqd2rNWGa2iV3cyo8g7zbI2QQYGLVsfbhmwukayS1XHppe02Oy1fg7mg6xoaraVJeEcg==
+  dependencies:
+    is-nan "^1.3.0"
+    moment-timezone "^0.5.31"
+
 cross-spawn@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
@@ -2860,6 +3052,11 @@ cssstyle@^1.0.0:
   dependencies:
     cssom "0.3.x"
 
+csstype@^3.0.2:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
+  integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
+
 csvtojson@2.0.10:
   version "2.0.10"
   resolved "https://registry.yarnpkg.com/csvtojson/-/csvtojson-2.0.10.tgz#11e7242cc630da54efce7958a45f443210357574"
@@ -2885,6 +3082,11 @@ data-urls@^1.0.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
+date-fns@2.21.1:
+  version "2.21.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.21.1.tgz#679a4ccaa584c0706ea70b3fa92262ac3009d2b0"
+  integrity sha512-m1WR0xGiC6j6jNFAyW4Nvh4WxAi4JF4w9jRJwSI8nBmNcyZXPcP9VUQG+6gHQXAmqaGEKDKhOqAtENDC941UkA==
+
 date-utils@*:
   version "1.2.21"
   resolved "https://registry.yarnpkg.com/date-utils/-/date-utils-1.2.21.tgz#61fb16cdc1274b3c9acaaffe9fc69df8720a2b64"
@@ -2907,6 +3109,13 @@ dayjs@^1.10.4:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
   integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
 
+debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
+  dependencies:
+    ms "2.0.0"
+
 debug@4, debug@^4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
@@ -2914,13 +3123,6 @@ debug@4, debug@^4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1:
   dependencies:
     ms "2.1.2"
 
-debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
-  version "2.6.9"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
-  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
-  dependencies:
-    ms "2.0.0"
-
 debug@^3.1.0, debug@^3.2.6:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
@@ -2942,6 +3144,11 @@ debug@~3.1.0:
   dependencies:
     ms "2.0.0"
 
+debuglog@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
+  integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=
+
 decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -3136,7 +3343,7 @@ depd@^2.0.0:
   resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
   integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
 
-destroy@^1.0.4:
+destroy@^1.0.4, destroy@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
   integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
@@ -3304,7 +3511,7 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
-ejs@^3.1.6:
+ejs@3.1.6, ejs@^3.1.6:
   version "3.1.6"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.6.tgz#5bfd0a0689743bb5268b3550cceeebbc1702822a"
   integrity sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw==
@@ -3422,7 +3629,7 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
-encodeurl@^1.0.2:
+encodeurl@^1.0.2, encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
@@ -3500,7 +3707,7 @@ error-symbol@^0.1.0:
   resolved "https://registry.yarnpkg.com/error-symbol/-/error-symbol-0.1.0.tgz#0a4dae37d600d15a29ba453d8ef920f1844333f6"
   integrity sha1-Ck2uN9YA0VopukU9jvkg8YRDM/Y=
 
-es-abstract@^1.18.0-next.2:
+es-abstract@^1.17.0-next.0, es-abstract@^1.18.0-next.2:
   version "1.18.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0.tgz#ab80b359eecb7ede4c298000390bc5ac3ec7b5a4"
   integrity sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==
@@ -3569,7 +3776,7 @@ escape-goat@^2.0.0:
   resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-2.1.1.tgz#1b2dc77003676c457ec760b2dc68edb648188675"
   integrity sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==
 
-escape-html@^1.0.3:
+escape-html@^1.0.3, escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
@@ -3737,6 +3944,11 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
+
 event-target-shim@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
@@ -3818,6 +4030,42 @@ expect@^24.9.0:
     jest-message-util "^24.9.0"
     jest-regex-util "^24.9.0"
 
+express@4.17.1:
+  version "4.17.1"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
+  integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
+  dependencies:
+    accepts "~1.3.7"
+    array-flatten "1.1.1"
+    body-parser "1.19.0"
+    content-disposition "0.5.3"
+    content-type "~1.0.4"
+    cookie "0.4.0"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "~1.1.2"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "~1.1.2"
+    fresh "0.5.2"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "~2.3.0"
+    parseurl "~1.3.3"
+    path-to-regexp "0.1.7"
+    proxy-addr "~2.0.5"
+    qs "6.7.0"
+    range-parser "~1.2.1"
+    safe-buffer "5.1.2"
+    send "0.17.1"
+    serve-static "1.14.1"
+    setprototypeof "1.1.1"
+    statuses "~1.5.0"
+    type-is "~1.6.18"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
 ext-list@^2.0.0:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/ext-list/-/ext-list-2.2.2.tgz#0b98e64ed82f5acf0f2931babf69212ef52ddd37"
@@ -4071,6 +4319,19 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+finalhandler@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
+  integrity sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.3"
+    statuses "~1.5.0"
+    unpipe "~1.0.0"
+
 find-up@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
@@ -4174,6 +4435,11 @@ formidable@^1.1.1, formidable@^1.2.0:
   resolved "https://registry.yarnpkg.com/formidable/-/formidable-1.2.2.tgz#bf69aea2972982675f00865342b982986f6b8dd9"
   integrity sha512-V8gLm+41I/8kguQ4/o1D3RIHRmhYFG4pnNyonvua+40rqcEmT4+V71yaZ3B457xbbgCsCfjSPi65u/W6vK1U5Q==
 
+forwarded@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
+  integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -4181,7 +4447,7 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
-fresh@~0.5.2:
+fresh@0.5.2, fresh@~0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
   integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
@@ -4283,6 +4549,11 @@ get-port@^3.2.0:
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
   integrity sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=
 
+get-port@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/get-port/-/get-port-5.1.1.tgz#0469ed07563479de6efb986baf053dcd7d4e3193"
+  integrity sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==
+
 get-stream@3.0.0, get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -4660,11 +4931,35 @@ helper-md@^0.2.2:
     fs-exists-sync "^0.1.0"
     remarkable "^1.6.2"
 
+highlight.js@^10.7.1:
+  version "10.7.2"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.2.tgz#89319b861edc66c48854ed1e6da21ea89f847360"
+  integrity sha512-oFLl873u4usRM9K63j4ME9u3etNF0PLiJhSQ8rdfuL51Wn3zkD6drf9ZW0dOzjnZI22YYG24z30JcmfCZjMgYg==
+
 highlight.js@^9.12.0:
   version "9.18.5"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825"
   integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==
 
+history@^4.9.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    loose-envify "^1.2.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
+
+hoist-non-react-statics@^3.1.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hosted-git-info@^2.1.4:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
@@ -4727,6 +5022,17 @@ http-cache-semantics@^4.0.0:
   resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
   integrity sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==
 
+http-errors@1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
+  integrity sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.3"
+    setprototypeof "1.1.1"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
+
 http-errors@1.7.3, http-errors@~1.7.2:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
@@ -4956,6 +5262,22 @@ invert-kv@^2.0.0:
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-2.0.0.tgz#7393f5afa59ec9ff5f67a27620d11c226e3eec02"
   integrity sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==
 
+ioredis@^4.22.0:
+  version "4.27.2"
+  resolved "https://registry.yarnpkg.com/ioredis/-/ioredis-4.27.2.tgz#6a79bca05164482da796f8fa010bccefd3bf4811"
+  integrity sha512-7OpYymIthonkC2Jne5uGWXswdhlua1S1rWGAERaotn0hGJWTSURvxdHA9G6wNbT/qKCloCja/FHsfKXW8lpTmg==
+  dependencies:
+    cluster-key-slot "^1.1.0"
+    debug "^4.3.1"
+    denque "^1.1.0"
+    lodash.defaults "^4.2.0"
+    lodash.flatten "^4.4.0"
+    p-map "^2.1.0"
+    redis-commands "1.7.0"
+    redis-errors "^1.2.0"
+    redis-parser "^3.0.0"
+    standard-as-callback "^2.1.0"
+
 ioredis@^4.27.1:
   version "4.27.1"
   resolved "https://registry.yarnpkg.com/ioredis/-/ioredis-4.27.1.tgz#4ef947b455a1b995baa4b0d7e2c4e4f75f746421"
@@ -4972,6 +5294,11 @@ ioredis@^4.27.1:
     redis-parser "^3.0.0"
     standard-as-callback "^2.1.0"
 
+ipaddr.js@1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
+  integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
+
 is-accessor-descriptor@^0.1.6:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
@@ -5160,6 +5487,14 @@ is-installed-globally@^0.4.0:
     global-dirs "^3.0.0"
     is-path-inside "^3.0.2"
 
+is-nan@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/is-nan/-/is-nan-1.3.2.tgz#043a54adea31748b55b6cd4e09aadafa69bd9e1d"
+  integrity sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+
 is-natural-number@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/is-natural-number/-/is-natural-number-4.0.1.tgz#ab9d76e1db4ced51e35de0c72ebecf09f734cde8"
@@ -6094,6 +6429,11 @@ koa-compress@4.0.1:
     koa-is-json "^1.0.0"
     statuses "^2.0.0"
 
+koa-connect@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/koa-connect/-/koa-connect-2.1.0.tgz#16bce0a917c4cb24233aaac83fbc5b83804b4a1c"
+  integrity sha512-O9pcFafHk0oQsBevlbTBlB9co+2RUQJ4zCzu3qJPmGlGoeEZkne+7gWDkecqDPSbCtED6LmhlQladxs6NjOnMQ==
+
 koa-convert@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/koa-convert/-/koa-convert-1.2.0.tgz#da40875df49de0539098d1700b50820cebcd21d0"
@@ -6549,7 +6889,7 @@ lodash@4.17.13:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.13.tgz#0bdc3a6adc873d2f4e0c4bac285df91b64fc7b93"
   integrity sha512-vm3/XWXfWtRua0FkUyEHBZy8kCPjErNBT9fJx8Zvs+U6zjqPbTUOpkaoum3O5uiA8sm+yNMHXfYkTUHFoMxFNA==
 
-lodash@^4.14.0, lodash@^4.17.10, lodash@^4.17.14, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3:
+lodash@^4.14.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -6583,7 +6923,7 @@ logging-helpers@^1.0.0:
     isobject "^3.0.0"
     log-utils "^0.2.1"
 
-loose-envify@^1.0.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -6732,12 +7072,17 @@ memory-pager@^1.0.2:
   resolved "https://registry.yarnpkg.com/memory-pager/-/memory-pager-1.5.0.tgz#d8751655d22d384682741c972f2c3d6dfa3e66b5"
   integrity sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg==
 
+merge-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+  integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
-methods@^1.0.1, methods@^1.1.1, methods@^1.1.2:
+methods@^1.0.1, methods@^1.1.1, methods@^1.1.2, methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
@@ -6781,7 +7126,7 @@ mime-types@^2.1.12, mime-types@^2.1.18, mime-types@^2.1.24, mime-types@~2.1.19,
   dependencies:
     mime-db "1.46.0"
 
-mime@^1.3.4, mime@^1.4.1:
+mime@1.6.0, mime@^1.3.4, mime@^1.4.1:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
@@ -6808,6 +7153,14 @@ min-document@^2.19.0:
   dependencies:
     dom-walk "^0.1.0"
 
+mini-create-react-context@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
+  integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    tiny-warning "^1.0.3"
+
 "minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
@@ -6840,7 +7193,14 @@ mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.4:
   dependencies:
     minimist "^1.2.5"
 
-moment@^2.18.1:
+moment-timezone@^0.5.31:
+  version "0.5.33"
+  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.33.tgz#b252fd6bb57f341c9b59a5ab61a8e51a73bbd22c"
+  integrity sha512-PTc2vcT8K9J5/9rDEPe5czSIKgLoGsH8UNpA4qZTVw0Vd/Uz19geE9abbIOQKaAQFcnQ3v5YEXrbSc5BpshH+w==
+  dependencies:
+    moment ">= 2.9.0"
+
+"moment@>= 2.9.0", moment@^2.18.1:
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
@@ -6873,6 +7233,11 @@ ms@2.0.0:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
   integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
 
+ms@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
+  integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@@ -7161,7 +7526,7 @@ object-assign@^2.0.0:
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-2.1.1.tgz#43c36e5d569ff8e4816c4efa8be02d26967c18aa"
   integrity sha1-Q8NuXVaf+OSBbE76i+AtJpZ8GKo=
 
-object-assign@^4.0.1, object-assign@^4.1.0:
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
@@ -7231,7 +7596,7 @@ omggif@^1.0.10, omggif@^1.0.9:
   resolved "https://registry.yarnpkg.com/omggif/-/omggif-1.0.10.tgz#ddaaf90d4a42f532e9e7cb3a95ecdd47f17c7b19"
   integrity sha512-LMJTtvgc/nugXj0Vcrrs68Mn2D1r0zf630VNtqtpI1FEO7e+O9FP4gqs9AcnBaSEeoHIPm28u6qgPR0oyEpGSw==
 
-on-finished@^2.3.0:
+on-finished@^2.3.0, on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
   integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
@@ -7378,6 +7743,13 @@ p-timeout@^2.0.1:
   dependencies:
     p-finally "^1.0.0"
 
+p-timeout@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-3.2.0.tgz#c7e17abc971d2a7962ef83626b35d635acf23dfe"
+  integrity sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==
+  dependencies:
+    p-finally "^1.0.0"
+
 p-try@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
@@ -7461,7 +7833,7 @@ parse5@4.0.0:
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
   integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==
 
-parseurl@^1.3.2:
+parseurl@^1.3.2, parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
   integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
@@ -7579,7 +7951,12 @@ path-parse@^1.0.6:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
   integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
 
-path-to-regexp@^1.1.1:
+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+  integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
+
+path-to-regexp@^1.1.1, path-to-regexp@^1.7.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
   integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
@@ -8046,6 +8423,11 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
+pretty-bytes@5.6.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
+  integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
+
 pretty-format@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
@@ -8076,6 +8458,15 @@ progress@^2.0.0, progress@^2.0.3:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
+promise.prototype.finally@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/promise.prototype.finally/-/promise.prototype.finally-3.1.2.tgz#b8af89160c9c673cefe3b4c4435b53cfd0287067"
+  integrity sha512-A2HuJWl2opDH0EafgdjwEw7HysI8ff/n4lW4QEVBCUXFk9QeGecBWv0Deph0UmLe3tTNYegz8MOjsVuE6SMoJA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.0"
+    function-bind "^1.1.1"
+
 prompts@^2.0.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.1.tgz#befd3b1195ba052f9fd2fde8a486c4e82ee77f61"
@@ -8084,11 +8475,28 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
+prop-types@^15.6.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
 proto-list@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
   integrity sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=
 
+proxy-addr@~2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
+  integrity sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==
+  dependencies:
+    forwarded "~0.1.2"
+    ipaddr.js "1.9.1"
+
 prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
@@ -8144,6 +8552,11 @@ q@^1.1.2:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
+qs@6.7.0:
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
+  integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
+
 qs@^6.4.0, qs@^6.5.1:
   version "6.10.1"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.1.tgz#4931482fa8d647a5aab799c5271d2133b981fb6a"
@@ -8196,6 +8609,21 @@ quill@^1.3.7:
     parchment "^1.1.4"
     quill-delta "^3.6.2"
 
+range-parser@~1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
+  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
+
+raw-body@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"
+  integrity sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==
+  dependencies:
+    bytes "3.1.0"
+    http-errors "1.7.2"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
 raw-body@^2.2.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.1.tgz#30ac82f98bb5ae8c152e67149dac8d55153b168c"
@@ -8216,11 +8644,64 @@ rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-is@^16.8.4:
+react-dom@17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    scheduler "^0.20.2"
+
+react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-router-dom@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
+  integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-router "5.2.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
+react-router@5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"
+  integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    hoist-non-react-statics "^3.1.0"
+    loose-envify "^1.3.1"
+    mini-create-react-context "^0.4.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.2"
+    react-is "^16.6.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
+react-toastify@^7.0.3:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-7.0.4.tgz#7d0b743f2b96f65754264ca6eae31911a82378db"
+  integrity sha512-Rol7+Cn39hZp5hQ/k6CbMNE2CKYV9E5OQdC/hBLtIQU2xz7DdAm7xil4NITQTHR6zEbE5RVFbpgSwTD7xRGLeQ==
+  dependencies:
+    clsx "^1.1.1"
+
+react@17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 read-config-file@6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/read-config-file/-/read-config-file-6.0.0.tgz#224b5dca6a5bdc1fb19e63f89f342680efdb9299"
@@ -8369,6 +8850,13 @@ redis-errors@^1.0.0, redis-errors@^1.2.0:
   resolved "https://registry.yarnpkg.com/redis-errors/-/redis-errors-1.2.0.tgz#eb62d2adb15e4eaf4610c04afe1529384250abad"
   integrity sha1-62LSrbFeTq9GEMBK/hUpOEJQq60=
 
+redis-info@^3.0.8:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/redis-info/-/redis-info-3.0.8.tgz#27e696778c100d716324fa68b92cccf390487e02"
+  integrity sha512-L7yPuGzRq+gu+ZYl/aO0TDgc4nNcMpDTaTN4P3bBi8ZENp1fk8gvtZQpidrYL5uAJYMIcMN81fgUz28qUpTeVA==
+  dependencies:
+    lodash "^4.17.11"
+
 redis-parser@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/redis-parser/-/redis-parser-3.0.0.tgz#b66d828cdcafe6b4b8a428a7def4c6bcac31c8b4"
@@ -8546,6 +9034,11 @@ resolve-path@^1.4.0:
     http-errors "~1.6.2"
     path-is-absolute "1.0.1"
 
+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -8700,6 +9193,14 @@ sax@>=0.6.0, sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 secure-json-parse@^2.1.0:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/secure-json-parse/-/secure-json-parse-2.3.2.tgz#0284c9525c6f24d38774f13727addff80634c2e9"
@@ -8746,6 +9247,25 @@ semver@^7.1.3, semver@^7.3.2, semver@^7.3.4:
   dependencies:
     lru-cache "^6.0.0"
 
+send@0.17.1:
+  version "0.17.1"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
+  integrity sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.2"
+    destroy "~1.0.4"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "~1.7.2"
+    mime "1.6.0"
+    ms "2.1.1"
+    on-finished "~2.3.0"
+    range-parser "~1.2.1"
+    statuses "~1.5.0"
+
 serialize-error@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/serialize-error/-/serialize-error-7.0.1.tgz#f1360b0447f61ffb483ec4157c737fab7d778e18"
@@ -8753,6 +9273,16 @@ serialize-error@^7.0.1:
   dependencies:
     type-fest "^0.13.1"
 
+serve-static@1.14.1:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9"
+  integrity sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==
+  dependencies:
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.17.1"
+
 server-destroy@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/server-destroy/-/server-destroy-1.0.1.tgz#f13bf928e42b9c3e79383e61cc3998b5d14e6cdd"
@@ -9139,7 +9669,7 @@ static-extend@^0.1.1:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
-"statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@^1.5.0:
+"statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@^1.5.0, statuses@~1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
@@ -9641,11 +10171,21 @@ timm@^1.6.1:
   resolved "https://registry.yarnpkg.com/timm/-/timm-1.7.1.tgz#96bab60c7d45b5a10a8a4d0f0117c6b7e5aff76f"
   integrity sha512-IjZc9KIotudix8bMaBW6QvMuq64BrJWFs1+4V0lXwWGQZwH+LnX87doAYhem4caOEusRP9/g6jVDQmZ8XOk1nw==
 
+tiny-invariant@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
 tiny-queue@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/tiny-queue/-/tiny-queue-0.2.1.tgz#25a67f2c6e253b2ca941977b5ef7442ef97a6046"
   integrity sha1-JaZ/LG4lOyypQZd7XvdELvl6YEY=
 
+tiny-warning@^1.0.0, tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tinycolor2@^1.4.1:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
@@ -9848,7 +10388,7 @@ type-fest@^0.8.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
-type-is@^1.6.14, type-is@^1.6.16:
+type-is@^1.6.14, type-is@^1.6.16, type-is@~1.6.17, type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
   integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
@@ -9947,7 +10487,7 @@ universalify@^2.0.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
   integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
 
-unpipe@1.0.0:
+unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
   integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
@@ -10067,7 +10607,7 @@ util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
 
-util.promisify@^1.0.0:
+util.promisify@^1.0.0, util.promisify@^1.0.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.1.1.tgz#77832f57ced2c9478174149cae9b96e9918cd54b"
   integrity sha512-/s3UsZUrIfa6xDhr7zZhnE9SLQ5RIXyYfiVnMMyMDzOc8WhWN4Nbh36H842OyurKbCDAesZOJaVyvmSl6fhGQw==
@@ -10078,7 +10618,7 @@ util.promisify@^1.0.0:
     has-symbols "^1.0.1"
     object.getownpropertydescriptors "^2.1.1"
 
-utils-merge@1.x.x:
+utils-merge@1.0.1, utils-merge@1.x.x:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
@@ -10103,7 +10643,7 @@ uuid@^3.1.0, uuid@^3.2.1, uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-uuid@^8.3.2:
+uuid@^8.3.0, uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
@@ -10126,7 +10666,12 @@ validate.js@0.13.1:
   resolved "https://registry.yarnpkg.com/validate.js/-/validate.js-0.13.1.tgz#b58bfac04a0f600a340f62e5227e70d95971e92a"
   integrity sha512-PnFM3xiZ+kYmLyTiMgTYmU7ZHkjBZz2/+F0DaALc/uUtVzdCt1wAosvYJ5hFQi/hz8O4zb52FQhHZRC+uVkJ+g==
 
-vary@^1.1.2:
+value-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
+  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
+
+vary@^1.1.2, vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 55d86f00ea..163caa3dbc 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -2,7 +2,7 @@
   "container": {
     "name": "Container",
     "description": "This component contains things within itself",
-    "icon": "ri-layout-column-line",
+    "icon": "Sandbox",
     "hasChildren": true,
     "styleable": true,
     "transitionable": true,
@@ -10,14 +10,14 @@
   },
   "screenslot": {
     "name": "Screenslot",
-    "icon": "ri-artboard-2-line",
+    "icon": "WebPage",
     "description": "Contains your app screens",
     "styleable": true
   },
   "button": {
     "name": "Button",
     "description": "A basic html button that is ready for styling",
-    "icon": "ri-share-box-line",
+    "icon": "Button",
     "styleable": true,
     "settings": [
       {
@@ -40,13 +40,13 @@
   "repeater": {
     "name": "Repeater",
     "description": "A configurable data list that attaches to your backend tables.",
-    "icon": "ri-list-check-2",
+    "icon": "ViewList",
     "styleable": true,
     "hasChildren": true,
     "settings": [
       {
         "type": "dataProvider",
-        "label": "Data",
+        "label": "Provider",
         "key": "dataProvider"
       },
       {
@@ -68,7 +68,7 @@
   "search": {
     "name": "Search",
     "description": "A searchable list of items.",
-    "icon": "ri-search-line",
+    "icon": "Search",
     "styleable": true,
     "hasChildren": true,
     "settings": [
@@ -102,7 +102,7 @@
   },
   "stackedlist": {
     "name": "Stacked List",
-    "icon": "ri-archive-drawer-line",
+    "icon": "TaskList",
     "description": "A basic card component that can contain content and actions.",
     "styleable": true,
     "settings": [
@@ -132,7 +132,7 @@
   "card": {
     "name": "Vertical Card",
     "description": "A basic card component that can contain content and actions.",
-    "icon": "ri-layout-column-line",
+    "icon": "ViewColumn",
     "styleable": true,
     "settings": [
       {
@@ -192,7 +192,7 @@
   "text": {
     "name": "Paragraph",
     "description": "A component for displaying paragraph text.",
-    "icon": "ri-paragraph",
+    "icon": "TextParagraph",
     "styleable": true,
     "settings": [
       {
@@ -204,7 +204,7 @@
   },
   "heading": {
     "name": "Headline",
-    "icon": "ri-heading",
+    "icon": "TextBold",
     "description": "A component for displaying heading text",
     "styleable": true,
     "settings": [
@@ -225,7 +225,7 @@
   "image": {
     "name": "Image",
     "description": "A basic component for displaying images",
-    "icon": "ri-image-line",
+    "icon": "Image",
     "styleable": true,
     "settings": [
       {
@@ -238,7 +238,7 @@
   "backgroundimage": {
     "name": "Background Image",
     "description": "A background image",
-    "icon": "ri-image-line",
+    "icon": "Images",
     "styleable": true,
     "settings": [
       {
@@ -295,7 +295,7 @@
   "icon": {
     "name": "Icon",
     "description": "A basic component for displaying icons",
-    "icon": "ri-sun-fill",
+    "icon": "Bell",
     "styleable": true,
     "settings": [
       {
@@ -342,7 +342,7 @@
   "login": {
     "name": "Login Form",
     "description": "A component that automatically generates a login screen for your app.",
-    "icon": "ri-login-box-line",
+    "icon": "Login",
     "styleable": true,
     "settings": [
       {
@@ -365,7 +365,7 @@
   "navigation": {
     "name": "Nav Bar",
     "description": "A component for handling the navigation within your app.",
-    "icon": "ri-navigation-line",
+    "icon": "BreadcrumbNavigation",
     "styleable": true,
     "hasChildren": true,
     "settings": [
@@ -379,7 +379,7 @@
   "link": {
     "name": "Link",
     "description": "A basic link component for internal and external links",
-    "icon": "ri-link",
+    "icon": "Link",
     "styleable": true,
     "settings": [
       {
@@ -408,7 +408,7 @@
   "cardhorizontal": {
     "name": "Horizontal Card",
     "description": "A basic card component that can contain content and actions.",
-    "icon": "ri-layout-row-line",
+    "icon": "ViewRow",
     "styleable": true,
     "settings": [
       {
@@ -480,7 +480,7 @@
   "cardstat": {
     "name": "Stat Card",
     "description": "A card component for displaying numbers.",
-    "icon": "ri-dual-sim-2-line",
+    "icon": "Card",
     "styleable": true,
     "settings": [
       {
@@ -505,7 +505,7 @@
   },
   "embed": {
     "name": "Embed",
-    "icon": "ri-code-line",
+    "icon": "Code",
     "description": "Embed content from 3rd party sources",
     "styleable": true,
     "settings": [
@@ -519,7 +519,7 @@
   "bar": {
     "name": "Bar Chart",
     "description": "Bar chart",
-    "icon": "ri-bar-chart-line",
+    "icon": "GraphBarVertical",
     "styleable": true,
     "settings": [
       {
@@ -529,7 +529,7 @@
       },
       {
         "type": "dataProvider",
-        "label": "Data",
+        "label": "Provider",
         "key": "dataProvider"
       },
       {
@@ -619,7 +619,7 @@
   "line": {
     "name": "Line Chart",
     "description": "Line chart",
-    "icon": "ri-line-chart-line",
+    "icon": "GraphTrend",
     "styleable": true,
     "settings": [
       {
@@ -629,7 +629,7 @@
       },
       {
         "type": "dataProvider",
-        "label": "Data",
+        "label": "Provider",
         "key": "dataProvider"
       },
       {
@@ -720,7 +720,7 @@
   "area": {
     "name": "Area Chart",
     "description": "Line chart",
-    "icon": "ri-line-chart-fill",
+    "icon": "GraphAreaStacked",
     "styleable": true,
     "settings": [
       {
@@ -730,7 +730,7 @@
       },
       {
         "type": "dataProvider",
-        "label": "Data",
+        "label": "Provider",
         "key": "dataProvider"
       },
       {
@@ -833,7 +833,7 @@
   "pie": {
     "name": "Pie Chart",
     "description": "Pie chart",
-    "icon": "ri-pie-chart-line",
+    "icon": "GraphPie",
     "styleable": true,
     "settings": [
       {
@@ -843,7 +843,7 @@
       },
       {
         "type": "dataProvider",
-        "label": "Data",
+        "label": "Provider",
         "key": "dataProvider"
       },
       {
@@ -910,7 +910,7 @@
   "donut": {
     "name": "Donut Chart",
     "description": "Donut chart",
-    "icon": "ri-donut-chart-line",
+    "icon": "GraphDonut",
     "styleable": true,
     "settings": [
       {
@@ -920,7 +920,7 @@
       },
       {
         "type": "dataProvider",
-        "label": "Data",
+        "label": "Provider",
         "key": "dataProvider"
       },
       {
@@ -987,7 +987,7 @@
   "candlestick": {
     "name": "Candlestick Chart",
     "description": "Candlestick chart",
-    "icon": "ri-stock-line",
+    "icon": "GraphBarVerticalStacked",
     "styleable": true,
     "settings": [
       {
@@ -997,7 +997,7 @@
       },
       {
         "type": "dataProvider",
-        "label": "Data",
+        "label": "Provider",
         "key": "dataProvider"
       },
       {
@@ -1068,7 +1068,7 @@
   },
   "form": {
     "name": "Form",
-    "icon": "ri-file-text-line",
+    "icon": "Form",
     "styleable": true,
     "hasChildren": true,
     "actions": [
@@ -1133,7 +1133,7 @@
   },
   "fieldgroup": {
     "name": "Field Group",
-    "icon": "ri-layout-row-line",
+    "icon": "Group",
     "styleable": true,
     "hasChildren": true,
     "settings": [
@@ -1161,7 +1161,7 @@
   },
   "stringfield": {
     "name": "Text Field",
-    "icon": "ri-t-box-line",
+    "icon": "Text",
     "styleable": true,
     "settings": [
       {
@@ -1189,7 +1189,7 @@
   },
   "numberfield": {
     "name": "Number Field",
-    "icon": "ri-edit-box-line",
+    "icon": "123",
     "styleable": true,
     "settings": [
       {
@@ -1217,7 +1217,7 @@
   },
   "passwordfield": {
     "name": "Password Field",
-    "icon": "ri-lock-password-line",
+    "icon": "LockClosed",
     "styleable": true,
     "settings": [
       {
@@ -1245,7 +1245,7 @@
   },
   "optionsfield": {
     "name": "Options Picker",
-    "icon": "ri-file-list-line",
+    "icon": "ViewList",
     "styleable": true,
     "settings": [
       {
@@ -1274,7 +1274,7 @@
   },
   "booleanfield": {
     "name": "Checkbox",
-    "icon": "ri-checkbox-line",
+    "icon": "Checkmark",
     "styleable": true,
     "settings": [
       {
@@ -1302,7 +1302,7 @@
   },
   "longformfield": {
     "name": "Rich Text",
-    "icon": "ri-file-edit-line",
+    "icon": "TextParagraph",
     "styleable": true,
     "settings": [
       {
@@ -1331,7 +1331,7 @@
   },
   "datetimefield": {
     "name": "Date Picker",
-    "icon": "ri-calendar-line",
+    "icon": "DateInput",
     "styleable": true,
     "settings": [
       {
@@ -1365,7 +1365,7 @@
   },
   "attachmentfield": {
     "name": "Attachment",
-    "icon": "ri-image-edit-line",
+    "icon": "Attach",
     "styleable": true,
     "settings": [
       {
@@ -1388,7 +1388,7 @@
   },
   "relationshipfield": {
     "name": "Relationship Picker",
-    "icon": "ri-links-line",
+    "icon": "TaskList",
     "styleable": true,
     "settings": [
       {
@@ -1416,7 +1416,7 @@
   },
   "dataprovider": {
     "name": "Data Provider",
-    "icon": "ri-database-2-line",
+    "icon": "Data",
     "styleable": false,
     "hasChildren": true,
     "settings": [
@@ -1476,13 +1476,13 @@
   },
   "table": {
     "name": "Table",
-    "icon": "ri-table-line",
+    "icon": "Table",
     "styleable": true,
     "hasChildren": true,
     "settings": [
       {
         "type": "dataProvider",
-        "label": "Data Provider",
+        "label": "Provider",
         "key": "dataProvider"
       },
       {
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index b299e24ed2..d3030d590d 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -23,9 +23,7 @@
   ],
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.5",
-    "lodash": "^4.17.15",
-    "sirv-cli": "^0.4.4",
-    "svelte": "^3.35.0",
+    "svelte": "^3.37.0",
     "vite": "^2.1.5"
   },
   "keywords": [
@@ -35,33 +33,11 @@
   "license": "MIT",
   "gitHead": "4b6efc42ed3273595c7a129411f4d883733d3321",
   "dependencies": {
-    "@adobe/spectrum-css-workflow-icons": "^1.1.0",
     "@budibase/bbui": "^1.58.13",
-    "@spectrum-css/actionbutton": "^1.0.1",
-    "@spectrum-css/button": "^3.0.1",
-    "@spectrum-css/checkbox": "^3.0.1",
-    "@spectrum-css/fieldlabel": "^3.0.1",
-    "@spectrum-css/icon": "^3.0.1",
-    "@spectrum-css/inputgroup": "^3.0.1",
-    "@spectrum-css/label": "^2.0.9",
-    "@spectrum-css/menu": "^3.0.1",
     "@spectrum-css/page": "^3.0.1",
-    "@spectrum-css/picker": "^1.0.0",
-    "@spectrum-css/popover": "^3.0.1",
-    "@spectrum-css/stepper": "^3.0.1",
-    "@spectrum-css/table": "^3.0.1",
-    "@spectrum-css/textfield": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
     "apexcharts": "^3.22.1",
-    "dayjs": "^1.10.4",
-    "flatpickr": "^4.6.6",
-    "loadicons": "^1.0.0",
-    "lodash.debounce": "^4.0.8",
-    "markdown-it": "^12.0.2",
-    "quill": "^1.3.7",
-    "remixicon": "^2.5.0",
     "svelte-apexcharts": "^1.0.2",
-    "svelte-flatpickr": "^3.1.0",
-    "turndown": "^7.0.0"
+    "svelte-flatpickr": "^3.1.0"
   }
 }
diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte
index 7ce4256844..d7132f0d6d 100644
--- a/packages/standard-components/src/Button.svelte
+++ b/packages/standard-components/src/Button.svelte
@@ -14,8 +14,9 @@
   class="default"
   disabled={disabled || false}
   use:styleable={$component.styles}
-  on:click={onClick}>
-  {text || ''}
+  on:click={onClick}
+>
+  {text || ""}
 </button>
 
 <style>
diff --git a/packages/standard-components/src/Card.svelte b/packages/standard-components/src/Card.svelte
index 85f30c5a09..7c21603351 100644
--- a/packages/standard-components/src/Card.svelte
+++ b/packages/standard-components/src/Card.svelte
@@ -32,7 +32,8 @@
       style="--imageHeight: {imageHeight}"
       class="image"
       src={imageUrl}
-      alt="" />
+      alt=""
+    />
   {/if}
   <div class="content">
     <h2 class="heading">{heading}</h2>
@@ -40,7 +41,8 @@
     <a
       use:linkable
       style="--linkColor: {linkColor}; --linkHoverColor: {linkHoverColor}"
-      href={linkUrl || '/'}>
+      href={linkUrl || "/"}
+    >
       {linkText}
     </a>
   </div>
diff --git a/packages/standard-components/src/CardHorizontal.svelte b/packages/standard-components/src/CardHorizontal.svelte
index 523d796cf5..1fae5a9d81 100644
--- a/packages/standard-components/src/CardHorizontal.svelte
+++ b/packages/standard-components/src/CardHorizontal.svelte
@@ -23,13 +23,15 @@
 <div
   use:styleable={$component.styles}
   class="container"
-  style="--cardWidth: {cardWidth}">
+  style="--cardWidth: {cardWidth}"
+>
   {#if showImage}
     <img
       style="--imageWidth: {imageWidth}; --imageHeight: {imageHeight}"
       class="image"
       src={imageUrl}
-      alt="" />
+      alt=""
+    />
   {/if}
   <div class="content">
     <main>
@@ -40,7 +42,8 @@
       <p class="subtext">{subtext}</p>
       <a
         style="--linkColor: {linkColor}; --linkHoverColor: {linkHoverColor}"
-        href={linkUrl || '/'}>{linkText}</a>
+        href={linkUrl || "/"}>{linkText}</a
+      >
     </footer>
   </div>
 </div>
diff --git a/packages/standard-components/src/Container.svelte b/packages/standard-components/src/Container.svelte
index fb149ef969..03870cb79f 100644
--- a/packages/standard-components/src/Container.svelte
+++ b/packages/standard-components/src/Container.svelte
@@ -7,6 +7,7 @@
 
 <div
   in:transition={{ type: $component.transition }}
-  use:styleable={$component.styles}>
+  use:styleable={$component.styles}
+>
   <slot />
 </div>
diff --git a/packages/standard-components/src/DataProvider.svelte b/packages/standard-components/src/DataProvider.svelte
index e7feb804f3..a8da4925d3 100644
--- a/packages/standard-components/src/DataProvider.svelte
+++ b/packages/standard-components/src/DataProvider.svelte
@@ -94,15 +94,28 @@
       schema = {}
     }
 
-    // Ensure all schema fields have a name property
-    Object.entries(schema).forEach(([key, value]) => {
-      if (!value.name) {
-        value.name = key
+    // Ensure there are "name" properties for all fields and that field schema
+    // are objects
+    let fixedSchema = {}
+    Object.entries(schema || {}).forEach(([fieldName, fieldSchema]) => {
+      if (typeof fieldSchema === "string") {
+        fixedSchema[fieldName] = {
+          type: fieldSchema,
+          name: fieldName,
+        }
+      } else {
+        fixedSchema[fieldName] = {
+          ...fieldSchema,
+          name: fieldName,
+        }
       }
     })
+    schema = fixedSchema
   }
 </script>
 
-<Provider {actions} data={dataContext}>
-  <slot />
-</Provider>
+<div use:styleable={$component.styles}>
+  <Provider {actions} data={dataContext}>
+    <slot />
+  </Provider>
+</div>
diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte
index f06ac86afd..09fd0ca6c5 100644
--- a/packages/standard-components/src/Heading.svelte
+++ b/packages/standard-components/src/Heading.svelte
@@ -8,17 +8,17 @@
   export let text = ""
 </script>
 
-{#if type === 'h1'}
+{#if type === "h1"}
   <h1 use:styleable={$component.styles}>{text}</h1>
-{:else if type === 'h2'}
+{:else if type === "h2"}
   <h2 use:styleable={$component.styles}>{text}</h2>
-{:else if type === 'h3'}
+{:else if type === "h3"}
   <h3 use:styleable={$component.styles}>{text}</h3>
-{:else if type === 'h4'}
+{:else if type === "h4"}
   <h4 use:styleable={$component.styles}>{text}</h4>
-{:else if type === 'h5'}
+{:else if type === "h5"}
   <h5 use:styleable={$component.styles}>{text}</h5>
-{:else if type === 'h6'}
+{:else if type === "h6"}
   <h6 use:styleable={$component.styles}>{text}</h6>
 {/if}
 
diff --git a/packages/standard-components/src/Icon.svelte b/packages/standard-components/src/Icon.svelte
index 51e4f5d50b..12dc21d325 100644
--- a/packages/standard-components/src/Icon.svelte
+++ b/packages/standard-components/src/Icon.svelte
@@ -1,21 +1,21 @@
-<script>
-  import { getContext } from "svelte"
-
-  const { styleable } = getContext("sdk")
-  const component = getContext("component")
-
-  export let icon = ""
-  export let size = "fa-lg"
-  export let color = "#f00"
-  export let onClick
-
-  $: styles = {
-    ...$component.styles,
-    normal: {
-      ...$component.styles.normal,
-      color,
-    },
-  }
-</script>
-
-<i use:styleable={styles} class="{icon} {size}" on:click={onClick} />
+<script>
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
+
+  export let icon = ""
+  export let size = "fa-lg"
+  export let color = "#f00"
+  export let onClick
+
+  $: styles = {
+    ...$component.styles,
+    normal: {
+      ...$component.styles.normal,
+      color,
+    },
+  }
+</script>
+
+<i use:styleable={styles} class="{icon} {size}" on:click={onClick} />
diff --git a/packages/standard-components/src/Image.svelte b/packages/standard-components/src/Image.svelte
index b54c84e691..d5cafca4d5 100644
--- a/packages/standard-components/src/Image.svelte
+++ b/packages/standard-components/src/Image.svelte
@@ -17,4 +17,5 @@
   class={className}
   src={url}
   alt={description}
-  use:styleable={$component.styles} />
+  use:styleable={$component.styles}
+/>
diff --git a/packages/standard-components/src/Link.svelte b/packages/standard-components/src/Link.svelte
index 0ada211eb7..2829fef80d 100644
--- a/packages/standard-components/src/Link.svelte
+++ b/packages/standard-components/src/Link.svelte
@@ -13,12 +13,12 @@
 </script>
 
 {#if external}
-  <a href={url || '/'} {target} use:styleable={$component.styles}>
+  <a href={url || "/"} {target} use:styleable={$component.styles}>
     {text}
     <slot />
   </a>
 {:else}
-  <a href={url || '/'} use:linkable {target} use:styleable={$component.styles}>
+  <a href={url || "/"} use:linkable {target} use:styleable={$component.styles}>
     {text}
     <slot />
   </a>
diff --git a/packages/standard-components/src/Login.svelte b/packages/standard-components/src/Login.svelte
index edec1f3992..4d52cccd46 100644
--- a/packages/standard-components/src/Login.svelte
+++ b/packages/standard-components/src/Login.svelte
@@ -55,7 +55,8 @@
           bind:value={email}
           type="email"
           placeholder="Email"
-          class={_inputClass} />
+          class={_inputClass}
+        />
       </div>
 
       <div class="control">
@@ -63,11 +64,12 @@
           bind:value={password}
           type="password"
           placeholder="Password"
-          class={_inputClass} />
+          class={_inputClass}
+        />
       </div>
 
       <button disabled={loading} on:click={login} class={_buttonClass}>
-        {buttonText || 'Log In'}
+        {buttonText || "Log In"}
       </button>
     </div>
 
diff --git a/packages/standard-components/src/Search.svelte b/packages/standard-components/src/Search.svelte
index aeaebcc0fa..29ca3b011b 100644
--- a/packages/standard-components/src/Search.svelte
+++ b/packages/standard-components/src/Search.svelte
@@ -86,20 +86,20 @@
         {#each columns as field}
           <div class="form-field">
             <Label extraSmall grey>{schema[field].name}</Label>
-            {#if schema[field].type === 'options'}
+            {#if schema[field].type === "options"}
               <Select secondary bind:value={search[field]}>
                 <option value="">Choose an option</option>
                 {#each schema[field].constraints.inclusion as opt}
                   <option>{opt}</option>
                 {/each}
               </Select>
-            {:else if schema[field].type === 'datetime'}
+            {:else if schema[field].type === "datetime"}
               <DatePicker bind:value={search[field]} />
-            {:else if schema[field].type === 'boolean'}
+            {:else if schema[field].type === "boolean"}
               <Toggle text={schema[field].name} bind:checked={search[field]} />
-            {:else if schema[field].type === 'number'}
+            {:else if schema[field].type === "number"}
               <Input type="number" bind:value={search[field]} />
-            {:else if schema[field].type === 'string'}
+            {:else if schema[field].type === "string"}
               <Input bind:value={search[field]} />
             {/if}
           </div>
@@ -111,7 +111,8 @@
           on:click={() => {
             search = {}
             bookmark = null
-          }}>
+          }}
+        >
           Reset
         </Button>
         <Button
@@ -119,7 +120,8 @@
           on:click={() => {
             bookmark = null
             fetchData(table, bookmark)
-          }}>
+          }}
+        >
           Search
         </Button>
       </div>
diff --git a/packages/standard-components/src/attachments/AttachmentList.svelte b/packages/standard-components/src/attachments/AttachmentList.svelte
deleted file mode 100644
index d7bdbeb596..0000000000
--- a/packages/standard-components/src/attachments/AttachmentList.svelte
+++ /dev/null
@@ -1,127 +0,0 @@
-<script>
-  import { Modal, ModalContent } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-
-  const dispatch = createEventDispatcher()
-  import { FILE_TYPES } from "./fileTypes"
-
-  export let files = []
-  export let height = "70"
-  export let width = "70"
-
-  let modal
-  let currentFile
-
-  const openModal = file => {
-    currentFile = file
-    modal.show()
-  }
-
-  const handleConfirm = () => {
-    dispatch("delete", currentFile)
-  }
-</script>
-
-<div class="file-list">
-  {#each files as file}
-    <div class="file-container">
-      <a href={file.url} target="_blank" class="file">
-        {#if FILE_TYPES.IMAGE.includes(file.extension.toLowerCase())}
-          <img {width} {height} src={file.url} alt="preview of {file.name}" />
-        {:else}<i class="far fa-file" />{/if}
-      </a>
-      <span>{file.name}</span>
-      <div class="button-placement">
-        <button primary on:click|stopPropagation={() => openModal(file)}>
-          ×
-        </button>
-      </div>
-    </div>
-  {/each}
-</div>
-<Modal bind:this={modal}>
-  <ModalContent
-    title="Confirm File Deletion"
-    confirmText="Delete"
-    onConfirm={handleConfirm}>
-    <span>Are you sure you want to delete this attachment?</span>
-  </ModalContent>
-</Modal>
-
-<style>
-  .file-list {
-    display: grid;
-    justify-content: start;
-    grid-auto-flow: column;
-    grid-gap: var(--spacing-m);
-    grid-template-columns: repeat(auto-fill, 1fr);
-  }
-
-  img {
-    object-fit: contain;
-  }
-
-  i {
-    margin-bottom: var(--spacing-m);
-  }
-
-  a {
-    color: var(--ink);
-    text-decoration: none;
-  }
-
-  .file-container {
-    position: relative;
-  }
-
-  button {
-    display: block;
-    box-sizing: border-box;
-    position: absolute;
-    font-size: var(--font-size-m);
-    line-height: 110%;
-    z-index: 1000;
-    top: 4px;
-    left: 50px;
-    margin: 0;
-    padding: 0;
-    width: 1.3rem;
-    height: 1.3rem;
-    border: 0;
-    color: white;
-    border-radius: var(--border-radius-xl);
-    background: black;
-    transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
-      background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
-    -webkit-appearance: none;
-    outline: none;
-  }
-  button:hover {
-    background-color: var(--grey-8);
-    cursor: pointer;
-  }
-  button:active {
-    background-color: var(--grey-9);
-    cursor: pointer;
-  }
-
-  .file {
-    position: relative;
-    height: 75px;
-    width: 75px;
-    border: 2px dashed var(--grey-7);
-    padding: var(--spacing-xs);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  span {
-    width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-</style>
diff --git a/packages/standard-components/src/attachments/Dropzone.svelte b/packages/standard-components/src/attachments/Dropzone.svelte
deleted file mode 100644
index 8ac3486354..0000000000
--- a/packages/standard-components/src/attachments/Dropzone.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script>
-  import { Dropzone } from "@budibase/bbui"
-  import { getContext } from "svelte"
-
-  const { API } = getContext("sdk")
-  const BYTES_IN_MB = 1000000
-
-  export let files = []
-
-  function handleFileTooLarge(fileSizeLimit) {
-    alert(
-      `Files cannot exceed ${fileSizeLimit /
-        BYTES_IN_MB}MB. Please try again with smaller files.`
-    )
-  }
-
-  async function processFiles(fileList) {
-    let data = new FormData()
-    for (let i = 0; i < fileList.length; i++) {
-      data.append("file", fileList[i])
-    }
-    return await API.uploadAttachment(data)
-  }
-</script>
-
-<Dropzone bind:files {processFiles} {handleFileTooLarge} />
diff --git a/packages/standard-components/src/attachments/fileTypes.js b/packages/standard-components/src/attachments/fileTypes.js
deleted file mode 100644
index 2ce6958f2d..0000000000
--- a/packages/standard-components/src/attachments/fileTypes.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export const FILE_TYPES = {
-  IMAGE: ["png", "tiff", "gif", "raw", "jpg", "jpeg"],
-  CODE: ["js", "rs", "py", "java", "rb", "hs", "yml"],
-  DOCUMENT: ["odf", "docx", "doc", "pdf", "csv"],
-}
diff --git a/packages/standard-components/src/charts/BarChart.svelte b/packages/standard-components/src/charts/BarChart.svelte
index a2259aa754..2d41737d2d 100644
--- a/packages/standard-components/src/charts/BarChart.svelte
+++ b/packages/standard-components/src/charts/BarChart.svelte
@@ -1,80 +1,80 @@
-<script>
-  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
-  import ApexChart from "./ApexChart.svelte"
-
-  export let title
-  export let dataProvider
-  export let labelColumn
-  export let valueColumns
-  export let xAxisLabel
-  export let yAxisLabel
-  export let height
-  export let width
-  export let color
-  export let dataLabels
-  export let animate
-  export let legend
-  export let stacked
-  export let yAxisUnits
-  export let palette
-
-  $: options = setUpChart(dataProvider)
-
-  const setUpChart = provider => {
-    const allCols = [labelColumn, ...(valueColumns || [null])]
-    if (!provider || allCols.find(x => x == null)) {
-      return null
-    }
-
-    // Fatch data
-    const { schema, rows } = provider
-    const reducer = row => (valid, column) => valid && row[column] != null
-    const hasAllColumns = row => allCols.reduce(reducer(row), true)
-    const data = rows.filter(row => hasAllColumns(row)).slice(0, 100)
-    if (!schema || !data.length) {
-      return null
-    }
-
-    // Initialise default chart
-    let builder = new ApexOptionsBuilder()
-      .type("bar")
-      .title(title)
-      .width(width)
-      .height(height)
-      .xLabel(xAxisLabel)
-      .yLabel(yAxisLabel)
-      .dataLabels(dataLabels)
-      .animate(animate)
-      .legend(legend)
-      .stacked(stacked)
-      .yUnits(yAxisUnits)
-      .palette(palette)
-
-    // Add data
-    let useDates = false
-    if (schema[labelColumn]) {
-      const labelFieldType = schema[labelColumn].type
-      builder = builder.xType(labelFieldType)
-      useDates = labelFieldType === "datetime"
-    }
-    const series = valueColumns.map(column => ({
-      name: column,
-      data: data.map(row => {
-        if (!useDates) {
-          return row[column]
-        } else {
-          return [row[labelColumn], row[column]]
-        }
-      }),
-    }))
-    builder = builder.series(series)
-    if (!useDates) {
-      builder = builder.categories(data.map(row => row[labelColumn]))
-    }
-
-    // Build chart options
-    return builder.getOptions()
-  }
-</script>
-
-<ApexChart {options} />
+<script>
+  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
+  import ApexChart from "./ApexChart.svelte"
+
+  export let title
+  export let dataProvider
+  export let labelColumn
+  export let valueColumns
+  export let xAxisLabel
+  export let yAxisLabel
+  export let height
+  export let width
+  export let color
+  export let dataLabels
+  export let animate
+  export let legend
+  export let stacked
+  export let yAxisUnits
+  export let palette
+
+  $: options = setUpChart(dataProvider)
+
+  const setUpChart = provider => {
+    const allCols = [labelColumn, ...(valueColumns || [null])]
+    if (!provider || allCols.find(x => x == null)) {
+      return null
+    }
+
+    // Fatch data
+    const { schema, rows } = provider
+    const reducer = row => (valid, column) => valid && row[column] != null
+    const hasAllColumns = row => allCols.reduce(reducer(row), true)
+    const data = rows.filter(row => hasAllColumns(row)).slice(0, 100)
+    if (!schema || !data.length) {
+      return null
+    }
+
+    // Initialise default chart
+    let builder = new ApexOptionsBuilder()
+      .type("bar")
+      .title(title)
+      .width(width)
+      .height(height)
+      .xLabel(xAxisLabel)
+      .yLabel(yAxisLabel)
+      .dataLabels(dataLabels)
+      .animate(animate)
+      .legend(legend)
+      .stacked(stacked)
+      .yUnits(yAxisUnits)
+      .palette(palette)
+
+    // Add data
+    let useDates = false
+    if (schema[labelColumn]) {
+      const labelFieldType = schema[labelColumn].type
+      builder = builder.xType(labelFieldType)
+      useDates = labelFieldType === "datetime"
+    }
+    const series = valueColumns.map(column => ({
+      name: column,
+      data: data.map(row => {
+        if (!useDates) {
+          return row[column]
+        } else {
+          return [row[labelColumn], row[column]]
+        }
+      }),
+    }))
+    builder = builder.series(series)
+    if (!useDates) {
+      builder = builder.categories(data.map(row => row[labelColumn]))
+    }
+
+    // Build chart options
+    return builder.getOptions()
+  }
+</script>
+
+<ApexChart {options} />
diff --git a/packages/standard-components/src/charts/index.js b/packages/standard-components/src/charts/index.js
index 008aa6b64f..b1fea9ef0d 100644
--- a/packages/standard-components/src/charts/index.js
+++ b/packages/standard-components/src/charts/index.js
@@ -1,6 +1,6 @@
-export { default as bar } from "./BarChart.svelte"
-export { default as line } from "./LineChart.svelte"
-export { default as pie } from "./PieChart.svelte"
-export { default as donut } from "./DonutChart.svelte"
-export { default as area } from "./AreaChart.svelte"
-export { default as candlestick } from "./CandleStickChart.svelte"
+export { default as bar } from "./BarChart.svelte"
+export { default as line } from "./LineChart.svelte"
+export { default as pie } from "./PieChart.svelte"
+export { default as donut } from "./DonutChart.svelte"
+export { default as area } from "./AreaChart.svelte"
+export { default as candlestick } from "./CandleStickChart.svelte"
diff --git a/packages/standard-components/src/forms/AttachmentField.svelte b/packages/standard-components/src/forms/AttachmentField.svelte
index 5df1d40eb9..facfea45e3 100644
--- a/packages/standard-components/src/forms/AttachmentField.svelte
+++ b/packages/standard-components/src/forms/AttachmentField.svelte
@@ -1,7 +1,7 @@
 <script>
   import Field from "./Field.svelte"
-  import Dropzone from "../attachments/Dropzone.svelte"
-  import { onMount } from "svelte"
+  import { CoreDropzone } from "@budibase/bbui"
+  import { getContext } from "svelte"
 
   export let field
   export let label
@@ -10,16 +10,26 @@
   let fieldState
   let fieldApi
 
-  // Update form value from bound value after we've mounted
-  let value
-  let mounted = false
-  $: mounted && fieldApi?.setValue(value)
+  const { API, notifications } = getContext("sdk")
+  const BYTES_IN_MB = 1000000
 
-  // Get the fields initial value after initialising
-  onMount(() => {
-    value = $fieldState?.value
-    mounted = true
-  })
+  export let files = []
+
+  const handleFileTooLarge = fileSizeLimit => {
+    notifications.warning(
+      `Files cannot exceed ${
+        fileSizeLimit / BYTES_IN_MB
+      } MB. Please try again with smaller files.`
+    )
+  }
+
+  const processFiles = async fileList => {
+    let data = new FormData()
+    for (let i = 0; i < fileList.length; i++) {
+      data.append("file", fileList[i])
+    }
+    return await API.uploadAttachment(data)
+  }
 </script>
 
 <Field
@@ -29,17 +39,15 @@
   type="attachment"
   bind:fieldState
   bind:fieldApi
-  defaultValue={[]}>
-  {#if mounted}
-    <div class:disabled={$fieldState.disabled}>
-      <Dropzone bind:files={value} />
-    </div>
+  defaultValue={[]}
+>
+  {#if $fieldState}
+    <CoreDropzone
+      value={$fieldState.value}
+      disabled={$fieldState.disabled}
+      on:change={e => fieldApi.setValue(e.detail)}
+      {processFiles}
+      {handleFileTooLarge}
+    />
   {/if}
 </Field>
-
-<style>
-  div.disabled :global(> *) {
-    background-color: var(--spectrum-global-color-gray-200) !important;
-    pointer-events: none !important;
-  }
-</style>
diff --git a/packages/standard-components/src/forms/BooleanField.svelte b/packages/standard-components/src/forms/BooleanField.svelte
index 6e38c22be4..17a3c563bc 100644
--- a/packages/standard-components/src/forms/BooleanField.svelte
+++ b/packages/standard-components/src/forms/BooleanField.svelte
@@ -1,5 +1,5 @@
 <script>
-  import "@spectrum-css/checkbox/dist/index-vars.css"
+  import { CoreCheckbox } from "@budibase/bbui"
   import Field from "./Field.svelte"
 
   export let field
@@ -9,10 +9,6 @@
 
   let fieldState
   let fieldApi
-
-  const onChange = event => {
-    fieldApi.setValue(event.target.checked)
-  }
 </script>
 
 <Field
@@ -22,39 +18,16 @@
   type="boolean"
   bind:fieldState
   bind:fieldApi
-  defaultValue={false}>
+  defaultValue={false}
+>
   {#if fieldState}
-    <div class="spectrum-FieldGroup spectrum-FieldGroup--horizontal">
-      <label class="spectrum-Checkbox" class:is-invalid={!$fieldState.valid}>
-        <input
-          checked={$fieldState.value}
-          disabled={$fieldState.disabled}
-          on:change={onChange}
-          type="checkbox"
-          class="spectrum-Checkbox-input"
-          id={$fieldState.fieldId} />
-        <span class="spectrum-Checkbox-box">
-          <svg
-            class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark"
-            focusable="false"
-            aria-hidden="true">
-            <use xlink:href="#spectrum-css-icon-Checkmark75" />
-          </svg>
-          <svg
-            class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark"
-            focusable="false"
-            aria-hidden="true">
-            <use xlink:href="#spectrum-css-icon-Dash75" />
-          </svg>
-        </span>
-        <span class="spectrum-Checkbox-label">{text || 'Checkbox'}</span>
-      </label>
-    </div>
+    <CoreCheckbox
+      value={$fieldState.value}
+      disabled={$fieldState.disabled}
+      error={$fieldState.error}
+      id={$fieldState.fieldId}
+      on:change={e => fieldApi.setValue(e.detail)}
+      {text}
+    />
   {/if}
 </Field>
-
-<style>
-  .spectrum-Checkbox {
-    width: 100%;
-  }
-</style>
diff --git a/packages/standard-components/src/forms/DateTimeField.svelte b/packages/standard-components/src/forms/DateTimeField.svelte
index 074a859382..9332cfa721 100644
--- a/packages/standard-components/src/forms/DateTimeField.svelte
+++ b/packages/standard-components/src/forms/DateTimeField.svelte
@@ -1,146 +1,27 @@
 <script>
-  import Flatpickr from "svelte-flatpickr"
+  import { CoreDatePicker } from "@budibase/bbui"
   import Field from "./Field.svelte"
-  import "flatpickr/dist/flatpickr.css"
-  import "@spectrum-css/inputgroup/dist/index-vars.css"
-  import { generateID } from "../helpers"
 
   export let field
   export let label
   export let placeholder
-  export let enableTime
   export let disabled = false
+  export let enableTime = false
 
   let fieldState
   let fieldApi
-  let open = false
-  let flatpickr
-
-  $: flatpickrId = `${$fieldState?.id}-${generateID()}-wrapper`
-  $: flatpickrOptions = {
-    element: `#${flatpickrId}`,
-    enableTime: enableTime || false,
-    altInput: true,
-    altFormat: enableTime ? "F j Y, H:i" : "F j, Y",
-  }
-
-  const handleChange = event => {
-    const [dates] = event.detail
-    fieldApi.setValue(dates[0])
-  }
-
-  const clearDateOnBackspace = event => {
-    if (["Backspace", "Clear", "Delete"].includes(event.key)) {
-      fieldApi.setValue(null)
-      flatpickr.close()
-    }
-  }
-
-  const onOpen = () => {
-    open = true
-    document.addEventListener("keyup", clearDateOnBackspace)
-  }
-
-  const onClose = () => {
-    open = false
-    document.removeEventListener("keyup", clearDateOnBackspace)
-
-    // Manually blur all input fields since flatpickr creates a second
-    // duplicate input field.
-    // We need to blur both because the focus styling does not get properly
-    // applied.
-    const els = document.querySelectorAll(`#${flatpickrId} input`)
-    els.forEach(el => el.blur())
-  }
 </script>
 
 <Field {label} {field} {disabled} type="datetime" bind:fieldState bind:fieldApi>
   {#if fieldState}
-    <Flatpickr
-      bind:flatpickr
+    <CoreDatePicker
       value={$fieldState.value}
-      on:open={onOpen}
-      on:close={onClose}
-      options={flatpickrOptions}
-      on:change={handleChange}
-      element={`#${flatpickrId}`}>
-      <div
-        id={flatpickrId}
-        aria-disabled="false"
-        aria-invalid={!$fieldState.valid}
-        class:is-disabled={$fieldState.disabled}
-        class:is-invalid={!$fieldState.valid}
-        class="flatpickr spectrum-InputGroup spectrum-Datepicker"
-        class:is-focused={open}
-        aria-readonly="false"
-        aria-required="false"
-        aria-haspopup="true">
-        <div
-          on:click={flatpickr?.open}
-          class="spectrum-Textfield spectrum-InputGroup-textfield"
-          class:is-disabled={$fieldState.disabled}
-          class:is-invalid={!$fieldState.valid}>
-          {#if !$fieldState.valid}
-            <svg
-              class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
-              focusable="false"
-              aria-hidden="true">
-              <use xlink:href="#spectrum-icon-18-Alert" />
-            </svg>
-          {/if}
-          <input
-            data-input
-            type="text"
-            disabled={$fieldState.disabled}
-            class="spectrum-Textfield-input spectrum-InputGroup-input"
-            aria-invalid={!$fieldState.valid}
-            {placeholder}
-            id={$fieldState.fieldId}
-            value={$fieldState.value} />
-        </div>
-        <button
-          type="button"
-          class="spectrum-Picker spectrum-InputGroup-button"
-          tabindex="-1"
-          disabled={$fieldState.disabled}
-          class:is-invalid={!$fieldState.valid}
-          on:click={flatpickr?.open}>
-          <svg
-            class="spectrum-Icon spectrum-Icon--sizeM"
-            focusable="false"
-            aria-hidden="true"
-            aria-label="Calendar">
-            <use xlink:href="#spectrum-icon-18-Calendar" />
-          </svg>
-        </button>
-      </div>
-    </Flatpickr>
-    {#if open}
-      <div class="overlay" on:mousedown|self={flatpickr?.close} />
-    {/if}
+      on:change={e => fieldApi.setValue(e.detail)}
+      disabled={$fieldState.disabled}
+      error={$fieldState.error}
+      id={$fieldState.fieldId}
+      {enableTime}
+      {placeholder}
+    />
   {/if}
 </Field>
-
-<style>
-  .spectrum-Textfield-input {
-    pointer-events: none;
-  }
-  .spectrum-Textfield:not(.is-disabled):hover {
-    cursor: pointer;
-  }
-  .flatpickr {
-    width: 100%;
-    overflow: hidden;
-  }
-  .flatpickr .spectrum-Textfield {
-    width: 100%;
-  }
-  .overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: 999;
-  }
-</style>
diff --git a/packages/standard-components/src/forms/Field.svelte b/packages/standard-components/src/forms/Field.svelte
index 1a6ec20be9..2c83a7dac4 100644
--- a/packages/standard-components/src/forms/Field.svelte
+++ b/packages/standard-components/src/forms/Field.svelte
@@ -37,8 +37,9 @@
   <div class="spectrum-Form-item" use:styleable={$component.styles}>
     <label
       for={$fieldState?.fieldId}
-      class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}>
-      {label || ''}
+      class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}
+    >
+      {label || ""}
     </label>
     <div class="spectrum-Form-itemField">
       {#if !formContext}
diff --git a/packages/standard-components/src/forms/FieldGroup.svelte b/packages/standard-components/src/forms/FieldGroup.svelte
index 79e1ecad62..561572fab8 100644
--- a/packages/standard-components/src/forms/FieldGroup.svelte
+++ b/packages/standard-components/src/forms/FieldGroup.svelte
@@ -11,7 +11,8 @@
 <div class="wrapper" use:styleable={$component.styles}>
   <div
     class="spectrum-Form"
-    class:spectrum-Form--labelsAbove={labelPosition === 'above'}>
+    class:spectrum-Form--labelsAbove={labelPosition === "above"}
+  >
     <slot />
   </div>
 </div>
diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte
index 5e810d5086..ccc61fab9e 100644
--- a/packages/standard-components/src/forms/Form.svelte
+++ b/packages/standard-components/src/forms/Form.svelte
@@ -1,5 +1,4 @@
 <script>
-  import "@spectrum-css/fieldlabel/dist/index-vars.css"
   import { setContext, getContext, onMount } from "svelte"
   import { writable, get } from "svelte/store"
   import { createValidatorFromConstraints } from "./validation"
@@ -98,13 +97,11 @@
 
       const newValue = value == null ? defaultValue : value
       const newError = validate ? validate(newValue) : null
-      const newValid = !newError
 
       // Update field state
       fieldState.update(state => {
         state.value = newValue
         state.error = newError
-        state.valid = newValid
         return state
       })
 
@@ -120,7 +117,7 @@
         return state
       })
 
-      return newValid
+      return !newError
     }
     return {
       setValue,
@@ -138,7 +135,6 @@
       fieldId: `id-${generateID()}`,
       value: initialValues[field] ?? defaultValue,
       error: null,
-      valid: true,
       disabled: fieldDisabled,
     })
   }
@@ -171,12 +167,16 @@
 
 <Provider
   {actions}
-  data={{ ...$formState.values, tableId: dataSource?.tableId }}>
+  data={{ ...$formState.values, tableId: dataSource?.tableId }}
+>
   <div
     lang="en"
     dir="ltr"
     use:styleable={$component.styles}
-    class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
+    class={`spectrum ${size || "spectrum--medium"} ${
+      theme || "spectrum--light"
+    }`}
+  >
     {#if loaded}
       <slot />
     {/if}
diff --git a/packages/standard-components/src/forms/LongFormField.svelte b/packages/standard-components/src/forms/LongFormField.svelte
index a5ef5d94ed..45ea6aa034 100644
--- a/packages/standard-components/src/forms/LongFormField.svelte
+++ b/packages/standard-components/src/forms/LongFormField.svelte
@@ -1,6 +1,5 @@
 <script>
-  import { onMount } from "svelte"
-  import { RichText } from "@budibase/bbui"
+  import { CoreTextArea } from "@budibase/bbui"
   import Field from "./Field.svelte"
 
   export let field
@@ -10,33 +9,6 @@
 
   let fieldState
   let fieldApi
-
-  // Update form value from bound value after we've mounted
-  let value
-  let mounted = false
-  $: mounted && fieldApi?.setValue(value)
-
-  // Get the fields initial value after initialising
-  onMount(() => {
-    value = $fieldState?.value
-    mounted = true
-  })
-
-  // Options for rich text component
-  const options = {
-    modules: {
-      toolbar: [
-        [
-          {
-            header: [1, 2, 3, false],
-          },
-        ],
-        ["bold", "italic", "underline", "strike"],
-      ],
-    },
-    placeholder: placeholder || "Type something...",
-    theme: "snow",
-  }
 </script>
 
 <Field
@@ -46,36 +18,16 @@
   type="longform"
   bind:fieldState
   bind:fieldApi
-  defaultValue="">
-  {#if mounted}
-    <div class:disabled={$fieldState.disabled}>
-      <RichText bind:value {options} />
-    </div>
+  defaultValue=""
+>
+  {#if fieldState}
+    <CoreTextArea
+      value={$fieldState.value}
+      on:change={e => fieldApi.setValue(e.detail)}
+      disabled={$fieldState.disabled}
+      error={$fieldState.error}
+      id={$fieldState.fieldId}
+      {placeholder}
+    />
   {/if}
 </Field>
-
-<style>
-  div {
-    background-color: white;
-  }
-  div :global(> div) {
-    width: auto !important;
-  }
-  div :global(.ql-snow.ql-toolbar:after, .ql-snow .ql-toolbar:after) {
-    display: none;
-  }
-  div :global(.ql-snow .ql-formats:after) {
-    display: none;
-  }
-  div :global(.ql-editor p) {
-    word-break: break-all;
-  }
-
-  div.disabled {
-    pointer-events: none !important;
-    background-color: rgb(244, 244, 244);
-  }
-  div.disabled :global(.ql-container *) {
-    color: var(--spectrum-alias-text-color-disabled) !important;
-  }
-</style>
diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte
index 82f213686b..3955839fd0 100644
--- a/packages/standard-components/src/forms/OptionsField.svelte
+++ b/packages/standard-components/src/forms/OptionsField.svelte
@@ -1,6 +1,6 @@
 <script>
+  import { CoreSelect } from "@budibase/bbui"
   import Field from "./Field.svelte"
-  import Picker from "./Picker.svelte"
 
   export let field
   export let label
@@ -10,18 +10,6 @@
   let fieldState
   let fieldApi
   let fieldSchema
-
-  // Picker state
-  let open = false
-  $: options = fieldSchema?.constraints?.inclusion ?? []
-  $: placeholderText = placeholder || "Choose an option"
-  $: isNull = $fieldState?.value == null || $fieldState?.value === ""
-  $: fieldText = isNull ? placeholderText : $fieldState?.value
-
-  const selectOption = value => {
-    fieldApi.setValue(value)
-    open = false
-  }
 </script>
 
 <Field
@@ -31,16 +19,17 @@
   type="options"
   bind:fieldState
   bind:fieldApi
-  bind:fieldSchema>
+  bind:fieldSchema
+>
   {#if fieldState}
-    <Picker
-      bind:open
-      {fieldState}
-      {fieldText}
-      {options}
-      isPlaceholder={isNull}
-      placeholderOption={placeholderText}
-      isOptionSelected={option => option === $fieldState.value}
-      onSelectOption={selectOption} />
+    <CoreSelect
+      value={$fieldState.value}
+      id={$fieldState.fieldId}
+      disabled={$fieldState.disabled}
+      error={$fieldState.error}
+      options={fieldSchema?.constraints?.inclusion ?? []}
+      {placeholder}
+      on:change={e => fieldApi.setValue(e.detail)}
+    />
   {/if}
 </Field>
diff --git a/packages/standard-components/src/forms/Picker.svelte b/packages/standard-components/src/forms/Picker.svelte
deleted file mode 100644
index de6fb44dcb..0000000000
--- a/packages/standard-components/src/forms/Picker.svelte
+++ /dev/null
@@ -1,110 +0,0 @@
-<script>
-  import "@spectrum-css/picker/dist/index-vars.css"
-  import "@spectrum-css/popover/dist/index-vars.css"
-  import "@spectrum-css/menu/dist/index-vars.css"
-  import { fly } from "svelte/transition"
-
-  export let fieldState
-  export let fieldText = ""
-  export let isPlaceholder = false
-  export let placeholderOption = null
-  export let options = []
-  export let isOptionSelected = () => false
-  export let onSelectOption = () => {}
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
-  export let open = false
-</script>
-
-{#if fieldState}
-  <button
-    id={$fieldState.fieldId}
-    class="spectrum-Picker spectrum-Picker--sizeM"
-    disabled={$fieldState.disabled}
-    class:is-invalid={!$fieldState.valid}
-    class:is-open={open}
-    aria-haspopup="listbox"
-    on:click={() => (open = true)}>
-    <span class="spectrum-Picker-label" class:is-placeholder={isPlaceholder}>
-      {fieldText}
-    </span>
-    {#if !$fieldState.valid}
-      <svg
-        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
-        focusable="false"
-        aria-hidden="true"
-        aria-label="Folder">
-        <use xlink:href="#spectrum-icon-18-Alert" />
-      </svg>
-    {/if}
-    <svg
-      class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
-      focusable="false"
-      aria-hidden="true">
-      <use xlink:href="#spectrum-css-icon-Chevron100" />
-    </svg>
-  </button>
-  {#if open}
-    <div class="overlay" on:mousedown|self={() => (open = false)} />
-    <div
-      transition:fly={{ y: -20, duration: 200 }}
-      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open">
-      <ul class="spectrum-Menu" role="listbox">
-        {#if placeholderOption}
-          <li
-            class="spectrum-Menu-item"
-            class:is-selected={isPlaceholder}
-            role="option"
-            aria-selected="true"
-            tabindex="0"
-            on:click={() => onSelectOption(null)}>
-            <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
-            <svg
-              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-              focusable="false"
-              aria-hidden="true">
-              <use xlink:href="#spectrum-css-icon-Checkmark100" />
-            </svg>
-          </li>
-        {/if}
-        {#each options as option}
-          <li
-            class="spectrum-Menu-item"
-            class:is-selected={isOptionSelected(getOptionValue(option))}
-            role="option"
-            aria-selected="true"
-            tabindex="0"
-            on:click={() => onSelectOption(getOptionValue(option))}>
-            <span
-              class="spectrum-Menu-itemLabel">{getOptionLabel(option)}</span>
-            <svg
-              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-              focusable="false"
-              aria-hidden="true">
-              <use xlink:href="#spectrum-css-icon-Checkmark100" />
-            </svg>
-          </li>
-        {/each}
-      </ul>
-    </div>
-  {/if}
-{/if}
-
-<style>
-  .overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: 999;
-  }
-  .spectrum-Popover {
-    max-height: 240px;
-    width: 100%;
-    z-index: 999;
-  }
-  .spectrum-Picker {
-    width: 100%;
-  }
-</style>
diff --git a/packages/standard-components/src/forms/RelationshipField.svelte b/packages/standard-components/src/forms/RelationshipField.svelte
index b039208660..f36dc80472 100644
--- a/packages/standard-components/src/forms/RelationshipField.svelte
+++ b/packages/standard-components/src/forms/RelationshipField.svelte
@@ -1,7 +1,7 @@
 <script>
+  import { CoreSelect, CoreMultiselect } from "@budibase/bbui"
   import { getContext } from "svelte"
   import Field from "./Field.svelte"
-  import Picker from "./Picker.svelte"
 
   const { API } = getContext("sdk")
 
@@ -14,34 +14,15 @@
   let fieldApi
   let fieldSchema
 
-  // Picker state
   let options = []
   let tableDefinition
-  let fieldText = ""
 
-  const setFieldText = value => {
-    if (fieldSchema?.relationshipType === "one-to-many") {
-      if (value?.length && options?.length) {
-        const row = options.find(row => row._id === value[0]?._id)
-        return getDisplayName(row)
-      } else {
-        return placeholder || "Choose an option"
-      }
-    } else {
-      if (value?.length) {
-        return `${value?.length ?? 0} selected rows`
-      } else {
-        return placeholder || "Choose some options"
-      }
-    }
-  }
-
-  $: options, (fieldText = setFieldText($fieldState?.value))
-  $: valueLookupMap = getValueLookupMap($fieldState?.value)
-  $: isOptionSelected = option => valueLookupMap[option] === true
+  $: multiselect = fieldSchema?.relationshipType !== "one-to-many"
   $: linkedTableId = fieldSchema?.tableId
   $: fetchRows(linkedTableId)
   $: fetchTable(linkedTableId)
+  $: singleValue = flatten($fieldState?.value)?.[0]
+  $: multiValue = flatten($fieldState?.value) ?? []
 
   const fetchTable = async id => {
     if (id) {
@@ -59,33 +40,23 @@
     }
   }
 
+  const flatten = values => {
+    if (!values) {
+      return []
+    }
+    return values.map(value => (typeof value === "object" ? value._id : value))
+  }
+
   const getDisplayName = row => {
     return row?.[tableDefinition?.primaryDisplay || "_id"] || "-"
   }
 
-  const getValueLookupMap = value => {
-    let map = {}
-    if (value?.length) {
-      value.forEach(option => {
-        if (option?._id) {
-          map[option._id] = true
-        }
-      })
-    }
-    return map
+  const singleHandler = e => {
+    fieldApi.setValue(e.detail == null ? [] : [e.detail])
   }
 
-  const toggleOption = id => {
-    if (fieldSchema.relationshipType === "one-to-many") {
-      fieldApi.setValue(id ? [{ _id: id }] : [])
-    } else {
-      if ($fieldState.value.find(option => option?._id === id)) {
-        const filtered = $fieldState.value.filter(option => option?._id !== id)
-        fieldApi.setValue(filtered)
-      } else {
-        fieldApi.setValue([...$fieldState.value, { _id: id }])
-      }
-    }
+  const multiHandler = e => {
+    fieldApi.setValue(e.detail)
   }
 </script>
 
@@ -97,13 +68,19 @@
   bind:fieldState
   bind:fieldApi
   bind:fieldSchema
-  defaultValue={[]}>
-  <Picker
-    {fieldState}
-    {fieldText}
-    {options}
-    {isOptionSelected}
-    onSelectOption={toggleOption}
-    getOptionLabel={getDisplayName}
-    getOptionValue={option => option._id} />
+  defaultValue={[]}
+>
+  {#if fieldState}
+    <svelte:component
+      this={multiselect ? CoreMultiselect : CoreSelect}
+      {options}
+      value={multiselect ? multiValue : singleValue}
+      on:change={multiselect ? multiHandler : singleHandler}
+      id={$fieldState.fieldId}
+      disabled={$fieldState.disabled}
+      error={$fieldState.error}
+      getOptionLabel={getDisplayName}
+      getOptionValue={option => option._id}
+    />
+  {/if}
 </Field>
diff --git a/packages/standard-components/src/forms/StringField.svelte b/packages/standard-components/src/forms/StringField.svelte
index 11fc442d79..9d3bcb8183 100644
--- a/packages/standard-components/src/forms/StringField.svelte
+++ b/packages/standard-components/src/forms/StringField.svelte
@@ -1,5 +1,5 @@
 <script>
-  import "@spectrum-css/textfield/dist/index-vars.css"
+  import { CoreTextField } from "@budibase/bbui"
   import Field from "./Field.svelte"
 
   export let field
@@ -10,63 +10,25 @@
 
   let fieldState
   let fieldApi
-  let input
-
-  const updateValue = value => {
-    if (type === "number") {
-      const float = parseFloat(value)
-      value = isNaN(float) ? null : float
-    }
-    fieldApi.setValue(value)
-  }
-
-  const onBlur = event => {
-    updateValue(event.target.value)
-  }
-
-  const updateValueOnEnter = event => {
-    if (event.key === "Enter") {
-      updateValue(event.target.value)
-    }
-  }
 </script>
 
 <Field
   {label}
   {field}
   {disabled}
-  type={type === 'number' ? 'number' : 'string'}
+  type={type === "number" ? "number" : "string"}
   bind:fieldState
-  bind:fieldApi>
+  bind:fieldApi
+>
   {#if fieldState}
-    <div
-      class="spectrum-Textfield"
-      class:is-invalid={!$fieldState.valid}
-      class:is-disabled={$fieldState.disabled}>
-      {#if !$fieldState.valid}
-        <svg
-          class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
-          focusable="false"
-          aria-hidden="true">
-          <use xlink:href="#spectrum-icon-18-Alert" />
-        </svg>
-      {/if}
-      <input
-        on:keyup={updateValueOnEnter}
-        bind:this={input}
-        disabled={$fieldState.disabled}
-        id={$fieldState.fieldId}
-        value={$fieldState.value || ''}
-        placeholder={placeholder || ''}
-        on:blur={onBlur}
-        {type}
-        class="spectrum-Textfield-input" />
-    </div>
+    <CoreTextField
+      value={$fieldState.value}
+      on:change={e => fieldApi.setValue(e.detail)}
+      disabled={$fieldState.disabled}
+      error={$fieldState.error}
+      id={$fieldState.fieldId}
+      {placeholder}
+      {type}
+    />
   {/if}
 </Field>
-
-<style>
-  .spectrum-Textfield {
-    width: 100%;
-  }
-</style>
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index edc54a1114..2ad685033a 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -1,4 +1,3 @@
-import "@budibase/bbui/dist/style.css"
 import "@spectrum-css/vars/dist/spectrum-global.css"
 import "@spectrum-css/vars/dist/spectrum-medium.css"
 import "@spectrum-css/vars/dist/spectrum-large.css"
@@ -7,9 +6,8 @@ import "@spectrum-css/vars/dist/spectrum-light.css"
 import "@spectrum-css/vars/dist/spectrum-dark.css"
 import "@spectrum-css/vars/dist/spectrum-darkest.css"
 import "@spectrum-css/page/dist/index-vars.css"
-import "@spectrum-css/button/dist/index-vars.css"
 
-import { loadSpectrumIcons } from "./spectrum-icons"
+import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-rollup.js"
 loadSpectrumIcons()
 
 export { default as container } from "./Container.svelte"
diff --git a/packages/standard-components/src/table/CellRenderer.svelte b/packages/standard-components/src/table/CellRenderer.svelte
deleted file mode 100644
index 0c14ec2aa5..0000000000
--- a/packages/standard-components/src/table/CellRenderer.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-  import StringRenderer from "./StringRenderer.svelte"
-  import BooleanRenderer from "./BooleanRenderer.svelte"
-  import DateTimeRenderer from "./DateTimeRenderer.svelte"
-  import RelationshipRenderer from "./RelationshipRenderer.svelte"
-  import AttachmentRenderer from "./AttachmentRenderer.svelte"
-
-  export let schema
-  export let value
-
-  const plainTypes = ["string", "options", "number", "longform"]
-  $: type = schema?.type ?? "string"
-</script>
-
-{#if value != null && value !== ''}
-  {#if plainTypes.includes(type)}
-    <StringRenderer {value} />
-  {:else if type === 'boolean'}
-    <BooleanRenderer {value} />
-  {:else if type === 'datetime'}
-    <DateTimeRenderer {value} />
-  {:else if type === 'link'}
-    <RelationshipRenderer {value} />
-  {:else if type === 'attachment'}
-    <AttachmentRenderer {value} />
-  {/if}
-{/if}
diff --git a/packages/standard-components/src/table/RelationshipRenderer.svelte b/packages/standard-components/src/table/RelationshipRenderer.svelte
deleted file mode 100644
index 6c04000fa7..0000000000
--- a/packages/standard-components/src/table/RelationshipRenderer.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  import "@spectrum-css/label/dist/index-vars.css"
-
-  export let value
-
-  const displayLimit = 5
-  $: relationships = value?.slice(0, displayLimit) ?? []
-  $: leftover = (value?.length ?? 0) - relationships.length
-</script>
-
-{#each relationships as relationship}
-  {#if relationship?.primaryDisplay}
-    <span class="spectrum-Label spectrum-Label--grey">
-      {relationship.primaryDisplay}
-    </span>
-  {/if}
-{/each}
-{#if leftover}
-  <div>+{leftover} more</div>
-{/if}
diff --git a/packages/standard-components/src/table/SlotRenderer.svelte b/packages/standard-components/src/table/SlotRenderer.svelte
new file mode 100644
index 0000000000..dc24f4249c
--- /dev/null
+++ b/packages/standard-components/src/table/SlotRenderer.svelte
@@ -0,0 +1,11 @@
+<script>
+  import { getContext } from "svelte"
+
+  export let row
+
+  const { Provider } = getContext("sdk")
+</script>
+
+<Provider data={row}>
+  <slot />
+</Provider>
diff --git a/packages/standard-components/src/table/Table.svelte b/packages/standard-components/src/table/Table.svelte
index 8065b520e9..f68835d75b 100644
--- a/packages/standard-components/src/table/Table.svelte
+++ b/packages/standard-components/src/table/Table.svelte
@@ -1,8 +1,7 @@
 <script>
-  import { fade } from "svelte/transition"
-  import "@spectrum-css/table/dist/index-vars.css"
   import { getContext } from "svelte"
-  import CellRenderer from "./CellRenderer.svelte"
+  import { Table } from "@budibase/bbui"
+  import SlotRenderer from "./SlotRenderer.svelte"
 
   export let theme
   export let size
@@ -14,70 +13,21 @@
 
   const component = getContext("component")
   const { styleable, Provider } = getContext("sdk")
-
-  // Config
-  const rowHeight = 55
-  const headerHeight = 36
-  const rowPreload = 5
-  const maxRows = 100
-
-  // Sorting state
-  let sortColumn
-  let sortOrder
+  const customColumnKey = `custom-${Math.random()}`
+  const customRenderers = [
+    {
+      column: customColumnKey,
+      component: SlotRenderer,
+    },
+  ]
 
   // Table state
-  $: loaded = dataProvider?.loaded ?? false
-  $: rows = dataProvider?.rows ?? []
-  $: visibleRowCount = loaded
-    ? Math.min(rows.length, rowCount || maxRows, maxRows)
-    : Math.min(8, rowCount || maxRows)
-  $: scroll = rows.length > visibleRowCount
-  $: contentStyle = getContentStyle(visibleRowCount, scroll || !loaded)
-  $: sortedRows = sortRows(rows, sortColumn, sortOrder)
-  $: schema = dataProvider?.schema ?? {}
-  $: fields = getFields(schema, columns, showAutoColumns)
-
-  // Scrolling state
-  let timeout
-  let nextScrollTop = 0
-  let scrollTop = 0
-  $: firstVisibleRow = calculateFirstVisibleRow(scrollTop)
-  $: lastVisibleRow = calculateLastVisibleRow(
-    firstVisibleRow,
-    visibleRowCount,
-    rows.length
-  )
-
-  const getContentStyle = (visibleRows, useFixedHeight) => {
-    if (!useFixedHeight) {
-      return ""
-    }
-    return `height: ${headerHeight - 1 + visibleRows * (rowHeight + 1)}px;`
-  }
-
-  const sortRows = (rows, sortColumn, sortOrder) => {
-    if (!sortColumn || !sortOrder) {
-      return rows
-    }
-    return rows.slice().sort((a, b) => {
-      const colA = a[sortColumn]
-      const colB = b[sortColumn]
-      if (sortOrder === "Descending") {
-        return colA > colB ? -1 : 1
-      } else {
-        return colA > colB ? 1 : -1
-      }
-    })
-  }
-
-  const sortBy = field => {
-    if (field === sortColumn) {
-      sortOrder = sortOrder === "Descending" ? "Ascending" : "Descending"
-    } else {
-      sortColumn = field
-      sortOrder = "Descending"
-    }
-  }
+  $: hasChildren = $component.children
+  $: loading = dataProvider?.loading ?? false
+  $: data = dataProvider?.rows || []
+  $: fullSchema = dataProvider?.schema ?? {}
+  $: fields = getFields(fullSchema, columns, showAutoColumns)
+  $: schema = getFilteredSchema(fullSchema, fields, hasChildren)
 
   const getFields = (schema, customColumns, showAutoColumns) => {
     // Check for an invalid column selection
@@ -106,185 +56,41 @@
     return columns.concat(autoColumns)
   }
 
-  const onScroll = event => {
-    nextScrollTop = event.target.scrollTop
-    if (timeout) {
-      return
+  const getFilteredSchema = (schema, fields, hasChildren) => {
+    let newSchema = {}
+    if (hasChildren) {
+      newSchema[customColumnKey] = {
+        displayName: null,
+        order: 0,
+        sortable: false,
+        divider: true,
+      }
     }
-    timeout = setTimeout(() => {
-      scrollTop = nextScrollTop
-      timeout = null
-    }, 50)
-  }
-
-  const calculateFirstVisibleRow = scrollTop => {
-    return Math.max(Math.floor(scrollTop / (rowHeight + 1)) - rowPreload, 0)
-  }
-
-  const calculateLastVisibleRow = (firstRow, visibleRowCount, allRowCount) => {
-    return Math.min(firstRow + visibleRowCount + 2 * rowPreload, allRowCount)
+    fields.forEach(field => {
+      newSchema[field] = schema[field]
+    })
+    return newSchema
   }
 </script>
 
-{#if !loaded}
-  <div class="content" style={contentStyle} />
-{:else}
-  <div use:styleable={$component.styles}>
-    <div
-      on:scroll={onScroll}
-      lang="en"
-      dir="ltr"
-      class:quiet
-      style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
-      class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
-      <div class="content" style={contentStyle}>
-        <table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
-          <thead class="spectrum-Table-head">
-            <tr>
-              {#if $component.children}
-                <th class="spectrum-Table-headCell">
-                  <div class="spectrum-Table-headCell-content" />
-                </th>
-              {/if}
-              {#each fields as field}
-                <th
-                  class="spectrum-Table-headCell is-sortable"
-                  class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
-                  class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
-                  on:click={() => sortBy(field)}>
-                  <div class="spectrum-Table-headCell-content">
-                    <div class="title">{schema[field]?.name}</div>
-                    <svg
-                      class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
-                      class:visible={sortColumn === field}
-                      focusable="false"
-                      aria-hidden="true">
-                      <use xlink:href="#spectrum-css-icon-Arrow100" />
-                    </svg>
-                  </div>
-                </th>
-              {/each}
-            </tr>
-          </thead>
-          <tbody class="spectrum-Table-body">
-            {#each sortedRows as row, idx}
-              <tr
-                class="spectrum-Table-row"
-                class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}>
-                {#if idx >= firstVisibleRow && idx <= lastVisibleRow}
-                  {#if $component.children}
-                    <td
-                      class="spectrum-Table-cell spectrum-Table-cell--divider">
-                      <div class="spectrum-Table-cell-content">
-                        <Provider data={row}>
-                          <slot />
-                        </Provider>
-                      </div>
-                    </td>
-                  {/if}
-                  {#each fields as field}
-                    <td class="spectrum-Table-cell">
-                      <div class="spectrum-Table-cell-content">
-                        <CellRenderer
-                          schema={schema[field]}
-                          value={row[field]} />
-                      </div>
-                    </td>
-                  {/each}
-                {/if}
-              </tr>
-            {/each}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-{/if}
-
-<style>
-  .spectrum {
-    position: relative;
-    overflow: auto;
-    border: 1px solid
-      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
-  }
-  .spectrum.quiet {
-    border: none !important;
-  }
-  table {
-    width: 100%;
-  }
-
-  .spectrum-Table-sortedIcon {
-    opacity: 0;
-    display: block !important;
-  }
-  .spectrum-Table-sortedIcon.visible {
-    opacity: 1;
-  }
-  .spectrum,
-  th {
-    border-bottom: 1px solid
-      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
-  }
-  th {
-    vertical-align: middle;
-    height: var(--header-height);
-    position: sticky;
-    top: 0;
-    background-color: var(--spectrum-global-color-gray-100);
-    z-index: 2;
-  }
-  .spectrum-Table-headCell-content {
-    white-space: nowrap;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    user-select: none;
-  }
-  .spectrum-Table-headCell-content .title {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  tbody {
-    z-index: 1;
-  }
-  tbody tr {
-    height: var(--row-height);
-  }
-  tbody tr.hidden {
-    height: calc(var(--row-height) + 1px);
-  }
-  tbody tr.offset {
-    background-color: red;
-    display: block;
-  }
-  td {
-    padding-top: 0;
-    padding-bottom: 0;
-    border-bottom: none !important;
-    border-left: none !important;
-    border-right: none !important;
-    border-top: 1px solid
-      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
-  }
-  tr:first-child td {
-    border-top: none !important;
-  }
-  .spectrum:not(.quiet) td.spectrum-Table-cell--divider {
-    width: 1px;
-    border-right: 1px solid
-      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
-  }
-  .spectrum-Table-cell-content {
-    height: var(--row-height);
-    white-space: nowrap;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 4px;
-  }
-</style>
+<div
+  lang="en"
+  dir="ltr"
+  use:styleable={$component.styles}
+  class={`spectrum ${size || "spectrum--medium"} ${theme || "spectrum--light"}`}
+>
+  <Table
+    {data}
+    {schema}
+    {loading}
+    {rowCount}
+    {quiet}
+    {customRenderers}
+    allowSelectRows={false}
+    allowEditRows={false}
+    allowEditColumns={false}
+    showAutoColumns={true}
+  >
+    <slot />
+  </Table>
+</div>
diff --git a/packages/standard-components/vite.config.js b/packages/standard-components/vite.config.js
index 7e04595968..2eecfbaf44 100644
--- a/packages/standard-components/vite.config.js
+++ b/packages/standard-components/vite.config.js
@@ -12,7 +12,12 @@ export default ({ mode }) => {
       },
       minify: isProduction,
     },
-    plugins: [svelte()],
+    plugins: [
+      svelte({
+        hot: !isProduction,
+        emitCss: true,
+      }),
+    ],
     resolve: {
       dedupe: ["svelte", "svelte/internal"],
     },
diff --git a/packages/standard-components/yarn.lock b/packages/standard-components/yarn.lock
index 3b965785bd..1664db4338 100644
--- a/packages/standard-components/yarn.lock
+++ b/packages/standard-components/yarn.lock
@@ -2,16 +2,6 @@
 # yarn lockfile v1
 
 
-"@adobe/spectrum-css-workflow-icons@^1.1.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@adobe/spectrum-css-workflow-icons/-/spectrum-css-workflow-icons-1.2.0.tgz#cda8bbe873ba9317160458858ae979e5393e5550"
-  integrity sha512-STSQQHvoBM0kf1JrNL3KEt88RklIctaGyGOzwUTnhtTkT1jHLaF4FgxrPDCvr1AT8VOq1nGplKUCeyZ9vdUUmA==
-
-"@polka/url@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@polka/url/-/url-0.5.0.tgz#b21510597fd601e5d7c95008b76bf0d254ebfd31"
-  integrity sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==
-
 "@rollup/pluginutils@^4.1.0":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.0.tgz#0dcc61c780e39257554feb7f77207dceca13c838"
@@ -20,46 +10,6 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
-"@spectrum-css/actionbutton@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577"
-  integrity sha512-AUqtyNabHF451Aj9i3xz82TxS5Z6k1dttA68/1hMeU9kbPCSS4P6Viw3vaRGs9CSspuR8xnnhDgrq+F+zMy2Hw==
-
-"@spectrum-css/button@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.1.tgz#6db8c3e851baecd0f1c2d88fef37d49d01c6e643"
-  integrity sha512-YXrBtjIYisk4Vaxnp0RiE4gdElQX04P2mc4Pi2GlQ27dJKlHmufYcF+kAqGdtiyK5yjdN/vKRcC8y13aA4rusA==
-
-"@spectrum-css/checkbox@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.1.tgz#6f36377d8bd556989ddd1dec2506dc295c5fcda8"
-  integrity sha512-fI0q2Cp6yU4ORyE6JWUSMYNgEtGf6AjYViZ2Weg3UPTYBQuWdQd8J0ZTcH38pDMyARFPRdiXgQ3KnyX5Hk5huw==
-
-"@spectrum-css/fieldlabel@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-3.0.1.tgz#39f7c0f25cc2ff402afeff005341b0832f7c588c"
-  integrity sha512-LMfwrwIq8wEEvxFLobdLvXRwKrp8o9Fty4iJ9aYl2Rj1uXkfRd8qLz9HGZjLEE1OuJgoTBgamYABl7EvoA5PLw==
-
-"@spectrum-css/icon@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.1.tgz#e300a6fc353c85c6b5d6e7a364408a940c31b177"
-  integrity sha512-cGFtIrcQ/7tthdkHK1npuEFiCdYVHLqwmLxghUYQw8Tb8KgJaw3OBO1tpjgsUizexNgu26BjVRIbGxNWuBXIHQ==
-
-"@spectrum-css/inputgroup@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.1.tgz#8c5b257b57b3b2cf04e99355709365fa0d6838cc"
-  integrity sha512-asBRa1jTlld6plkcq4ySO+xl+OJlCMSOLoAFdSSIJowcSlCV0yDy7oeOhf5YQv9mMHFWTKlWUSoAKDZTguIPxA==
-
-"@spectrum-css/label@^2.0.9":
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/label/-/label-2.0.9.tgz#792f34b906ba81118f4d0edcc81a18da1ecd57cb"
-  integrity sha512-0vXhWIZoQDTg+I6MyMpwmeJ+yQHtxkZ7lLcEqxhJ2y7JXP2ftblz2sO4+9jB11ljepeVlV+B6LF1drU8mMu82A==
-
-"@spectrum-css/menu@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.1.tgz#2a376f991acc24e12ec892bb6b9db2650fc41fbe"
-  integrity sha512-Qjg0+1O0eC89sb/bRFq2AGnQ8XqhVy23TUXHyffNM8qdcMssnlny3QmhzjURCZKvx/Y5UytCpzhedPQqSpQwZg==
-
 "@spectrum-css/page@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@spectrum-css/page/-/page-3.0.1.tgz#5e1c3dd5b1a1ee591f9d636b75f03665f542d846"
@@ -67,31 +17,6 @@
   dependencies:
     "@spectrum-css/vars" "^3.0.1"
 
-"@spectrum-css/picker@^1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-1.0.1.tgz#98991198576d26bd14160824e7b6f3c278ff930b"
-  integrity sha512-Rv4/UBOdNW1gs7WVBCJnPD5VFly8MqP++psDX6kcugUIcfJy0GC3acvElotmKRlCDk8Qxks2W2A0jKeSgphTmA==
-
-"@spectrum-css/popover@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.1.tgz#5863c1efc53f98f9aba2de9186666780041303fc"
-  integrity sha512-LmOSj/yCwQQ9iGmCYnHiJsJR/HfPiGqI1Jl7pkKxBOCxYBMS/5+ans9vfCN2Qnd0eK7WSbfPg72S6mjye7db2Q==
-
-"@spectrum-css/stepper@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/stepper/-/stepper-3.0.1.tgz#7f270f53505e7dbe082591e8ea1c4c8f397e045a"
-  integrity sha512-IvZlGFJ8QPr9tUz5xvVN4hASaTRDPdKu9IIp25q/x0ecgSrKAM55e3EBWEYWy1H1JI3h+zlPnNRuK0VLhDbCYA==
-
-"@spectrum-css/table@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.1.tgz#753e0e2498082c0c36b9600828516aff3ac338cd"
-  integrity sha512-XQ+srMTv9hK1H0nctWUtqyzitmvyb5TNR+7mjAmKRdkBRSTQQSipDhenxZp72ekzMtMoSYZVZ77kgo0Iw3Fpug==
-
-"@spectrum-css/textfield@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.0.1.tgz#e875b8e37817378ad08fc4af7d53026df38911e5"
-  integrity sha512-MUV5q87CVxbkNdSNoxGrFbgyKc51ft/WWf3aVEoPdPw5yBnXqFe1w1YmAit5zYDOOhhs58sCLAlUcCMlOpkgrA==
-
 "@spectrum-css/vars@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.1.tgz#561fd69098f896a647242dd8d6108af603bfa31e"
@@ -130,19 +55,6 @@ apexcharts@^3.19.2, apexcharts@^3.22.1:
     svg.resize.js "^1.4.3"
     svg.select.js "^3.0.1"
 
-argparse@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
-  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
-
-call-bind@^1.0.0, call-bind@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
-  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
-  dependencies:
-    function-bind "^1.1.1"
-    get-intrinsic "^1.0.2"
-
 chalk@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
@@ -151,11 +63,6 @@ chalk@^4.1.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-clone@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
-  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
-
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
@@ -173,16 +80,6 @@ colorette@^1.2.2:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
   integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
 
-console-clear@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/console-clear/-/console-clear-1.1.1.tgz#995e20cbfbf14dd792b672cde387bd128d674bf7"
-  integrity sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==
-
-dayjs@^1.10.4:
-  version "1.10.4"
-  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
-  integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
-
 debug@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
@@ -190,35 +87,6 @@ debug@^4.3.2:
   dependencies:
     ms "2.1.2"
 
-deep-equal@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
-  integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
-  dependencies:
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.1"
-    is-regex "^1.0.4"
-    object-is "^1.0.1"
-    object-keys "^1.1.1"
-    regexp.prototype.flags "^1.2.0"
-
-define-properties@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
-  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
-  dependencies:
-    object-keys "^1.0.12"
-
-domino@^2.1.6:
-  version "2.1.6"
-  resolved "https://registry.yarnpkg.com/domino/-/domino-2.1.6.tgz#fe4ace4310526e5e7b9d12c7de01b7f485a57ffe"
-  integrity sha512-3VdM/SXBZX2omc9JF9nOPCtDaYQ67BGp5CoLpIQlO2KCAPETs8TcDHacF26jXadGbvUteZzRTeos2fhID5+ucQ==
-
-entities@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
-  integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
-
 esbuild@^0.9.3:
   version "0.9.7"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.9.7.tgz#ea0d639cbe4b88ec25fbed4d6ff00c8d788ef70b"
@@ -229,22 +97,7 @@ estree-walker@^2.0.1:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
 
-eventemitter3@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
-  integrity sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=
-
-extend@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
-  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
-
-fast-diff@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154"
-  integrity sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==
-
-flatpickr@^4.5.2, flatpickr@^4.6.6:
+flatpickr@^4.5.2:
   version "4.6.9"
   resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.9.tgz#9a13383e8a6814bda5d232eae3fcdccb97dc1499"
   integrity sha512-F0azNNi8foVWKSF+8X+ZJzz8r9sE1G4hl06RyceIaLvyltKvDl6vqk9Lm/6AUUCi5HWaIjiUbk7UpeE/fOXOpw==
@@ -259,30 +112,11 @@ function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
-get-intrinsic@^1.0.2:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
-  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
-  dependencies:
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-
-get-port@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
-  integrity sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=
-
 has-flag@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
-has-symbols@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
-  integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
-
 has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
@@ -295,13 +129,6 @@ hash-sum@^2.0.0:
   resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
   integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
 
-is-arguments@^1.0.4:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.0.tgz#62353031dfbee07ceb34656a6bde59efecae8dd9"
-  integrity sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==
-  dependencies:
-    call-bind "^1.0.0"
-
 is-core-module@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.2.0.tgz#97037ef3d52224d85163f5597b2b63d9afed981a"
@@ -309,77 +136,6 @@ is-core-module@^2.2.0:
   dependencies:
     has "^1.0.3"
 
-is-date-object@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
-  integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
-
-is-regex@^1.0.4:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.2.tgz#81c8ebde4db142f2cf1c53fc86d6a45788266251"
-  integrity sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==
-  dependencies:
-    call-bind "^1.0.2"
-    has-symbols "^1.0.1"
-
-kleur@^3.0.0:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
-  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
-
-linkify-it@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-3.0.2.tgz#f55eeb8bc1d3ae754049e124ab3bb56d97797fb8"
-  integrity sha512-gDBO4aHNZS6coiZCKVhSNh43F9ioIL4JwRjLZPkoLIY4yZFwg264Y5lu2x6rb1Js42Gh6Yqm2f6L2AJcnkzinQ==
-  dependencies:
-    uc.micro "^1.0.1"
-
-loadicons@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/loadicons/-/loadicons-1.0.0.tgz#79fd9b08ef2933988c94068cbd246ef3f21cbd04"
-  integrity sha512-KSywiudfuOK5sTdhNMM8hwRpMxZ5TbQlU4ZijMxUFwRW7jpxUmb9YJoLIzDn7+xuxeLzCZWBmLJS2JDjDWCpsw==
-
-local-access@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/local-access/-/local-access-1.1.0.tgz#e007c76ba2ca83d5877ba1a125fc8dfe23ba4798"
-  integrity sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw==
-
-lodash.debounce@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
-  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
-
-lodash@^4.17.15:
-  version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
-markdown-it@^12.0.2:
-  version "12.0.4"
-  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.0.4.tgz#eec8247d296327eac3ba9746bdeec9cfcc751e33"
-  integrity sha512-34RwOXZT8kyuOJy25oJNJoulO8L0bTHYWXcdZBYZqFnjIy3NgjeoM3FmPXIOFQ26/lSHYMr8oc62B6adxXcb3Q==
-  dependencies:
-    argparse "^2.0.1"
-    entities "~2.1.0"
-    linkify-it "^3.0.1"
-    mdurl "^1.0.1"
-    uc.micro "^1.0.5"
-
-mdurl@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
-  integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
-
-mime@^2.3.1:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe"
-  integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==
-
-mri@^1.1.0:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6"
-  integrity sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==
-
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@@ -390,24 +146,6 @@ nanoid@^3.1.22:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.22.tgz#b35f8fb7d151990a8aebd5aa5015c03cf726f844"
   integrity sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ==
 
-object-is@^1.0.1:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
-  integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-
-object-keys@^1.0.12, object-keys@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
-  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
-
-parchment@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/parchment/-/parchment-1.1.4.tgz#aeded7ab938fe921d4c34bc339ce1168bc2ffde5"
-  integrity sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==
-
 path-parse@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
@@ -427,40 +165,6 @@ postcss@^8.2.1:
     nanoid "^3.1.22"
     source-map "^0.6.1"
 
-quill-delta@^3.6.2:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/quill-delta/-/quill-delta-3.6.3.tgz#b19fd2b89412301c60e1ff213d8d860eac0f1032"
-  integrity sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==
-  dependencies:
-    deep-equal "^1.0.1"
-    extend "^3.0.2"
-    fast-diff "1.1.2"
-
-quill@^1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.7.tgz#da5b2f3a2c470e932340cdbf3668c9f21f9286e8"
-  integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==
-  dependencies:
-    clone "^2.1.1"
-    deep-equal "^1.0.1"
-    eventemitter3 "^2.0.3"
-    extend "^3.0.2"
-    parchment "^1.1.4"
-    quill-delta "^3.6.2"
-
-regexp.prototype.flags@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz#7ef352ae8d159e758c0eadca6f8fcb4eef07be26"
-  integrity sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-
-remixicon@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/remixicon/-/remixicon-2.5.0.tgz#b5e245894a1550aa23793f95daceadbf96ad1a41"
-  integrity sha512-q54ra2QutYDZpuSnFjmeagmEiN9IMo56/zz5dDNitzKD23oFRw77cWo4TsrAdmdkPiEn8mxlrTqxnkujDbEGww==
-
 require-relative@^0.8.7:
   version "0.8.7"
   resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
@@ -481,34 +185,6 @@ rollup@^2.38.5:
   optionalDependencies:
     fsevents "~2.3.1"
 
-sade@^1.4.0:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/sade/-/sade-1.7.4.tgz#ea681e0c65d248d2095c90578c03ca0bb1b54691"
-  integrity sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA==
-  dependencies:
-    mri "^1.1.0"
-
-sirv-cli@^0.4.4:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/sirv-cli/-/sirv-cli-0.4.6.tgz#c28ab20deb3b34637f5a60863dc350f055abca04"
-  integrity sha512-/Vj85/kBvPL+n9ibgX6FicLE8VjidC1BhlX67PYPBfbBAphzR6i0k0HtU5c2arejfU3uzq8l3SYPCwl1x7z6Ww==
-  dependencies:
-    console-clear "^1.1.0"
-    get-port "^3.2.0"
-    kleur "^3.0.0"
-    local-access "^1.0.1"
-    sade "^1.4.0"
-    sirv "^0.4.6"
-    tinydate "^1.0.0"
-
-sirv@^0.4.6:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/sirv/-/sirv-0.4.6.tgz#185e44eb93d24009dd183b7494285c5180b81f22"
-  integrity sha512-rYpOXlNbpHiY4nVXxuDf4mXPvKz1reZGap/LkWp9TvcZ84qD/nPBjjH/6GZsgIjVMbOslnY8YYULAyP8jMn1GQ==
-  dependencies:
-    "@polka/url" "^0.5.0"
-    mime "^2.3.1"
-
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
@@ -550,10 +226,10 @@ svelte-hmr@^0.13.3:
   resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.13.3.tgz#fba5739b477ea44caf70e542a24a4352bee2b897"
   integrity sha512-gagW62pLQ2lULmvNA3pIZu9pBCYOaGu3rQikUOv6Nokz5VxUgT9/mQLfMxj9phDEKHCg/lgr3i6PkqZDbO9P2Q==
 
-svelte@^3.35.0:
-  version "3.37.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.37.0.tgz#dc7cd24bcc275cdb3f8c684ada89e50489144ccd"
-  integrity sha512-TRF30F4W4+d+Jr2KzUUL1j8Mrpns/WM/WacxYlo5MMb2E5Qy2Pk1Guj6GylxsW9OnKQl1tnF8q3hG/hQ3h6VUA==
+svelte@^3.37.0:
+  version "3.38.2"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.38.2.tgz#55e5c681f793ae349b5cc2fe58e5782af4275ef5"
+  integrity sha512-q5Dq0/QHh4BLJyEVWGe7Cej5NWs040LWjMbicBGZ+3qpFWJ1YObRmUDZKbbovddLC9WW7THTj3kYbTOFmU9fbg==
 
 svg.draggable.js@^2.2.2:
   version "2.2.2"
@@ -610,23 +286,6 @@ svg.select.js@^3.0.1:
   dependencies:
     svg.js "^2.6.5"
 
-tinydate@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/tinydate/-/tinydate-1.3.0.tgz#e6ca8e5a22b51bb4ea1c3a2a4fd1352dbd4c57fb"
-  integrity sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==
-
-turndown@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/turndown/-/turndown-7.0.0.tgz#19b2a6a2d1d700387a1e07665414e4af4fec5225"
-  integrity sha512-G1FfxfR0mUNMeGjszLYl3kxtopC4O9DRRiMlMDDVHvU1jaBkGFg4qxIyjIk2aiKLHyDyZvZyu4qBO2guuYBy3Q==
-  dependencies:
-    domino "^2.1.6"
-
-uc.micro@^1.0.1, uc.micro@^1.0.5:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
-  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
-
 vite@^2.1.5:
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/vite/-/vite-2.1.5.tgz#4857da441c62f7982c83cbd5f42a00330f20c9c1"
diff --git a/packages/string-templates/scripts/gen-collection-info.js b/packages/string-templates/scripts/gen-collection-info.js
index a33d967a62..1977f95d22 100644
--- a/packages/string-templates/scripts/gen-collection-info.js
+++ b/packages/string-templates/scripts/gen-collection-info.js
@@ -134,10 +134,7 @@ function run() {
         .map(
           tag =>
             tag.description &&
-            tag.description
-              .replace(/`/g, "")
-              .split(" ")[0]
-              .trim()
+            tag.description.replace(/`/g, "").split(" ")[0].trim()
         )
       collectionInfo[name] = fixSpecialCases(name, {
         args,
diff --git a/packages/string-templates/src/utilities.js b/packages/string-templates/src/utilities.js
index b33e8bfe1d..38496b04b4 100644
--- a/packages/string-templates/src/utilities.js
+++ b/packages/string-templates/src/utilities.js
@@ -13,10 +13,7 @@ module.exports.swapStrings = (string, start, length, swap) => {
 
 // removes null and undefined
 module.exports.removeNull = obj => {
-  obj = _(obj)
-    .omitBy(_.isUndefined)
-    .omitBy(_.isNull)
-    .value()
+  obj = _(obj).omitBy(_.isUndefined).omitBy(_.isNull).value()
   for (let [key, value] of Object.entries(obj)) {
     // only objects
     if (typeof value === "object" && !Array.isArray(value)) {
diff --git a/packages/string-templates/test/helpers.spec.js b/packages/string-templates/test/helpers.spec.js
index 10ca0a564c..0d14133aad 100644
--- a/packages/string-templates/test/helpers.spec.js
+++ b/packages/string-templates/test/helpers.spec.js
@@ -273,6 +273,19 @@ describe("test the comparison helpers", () => {
   })
 })
 
+describe("Test the object/array helper", () => {
+  it("should allow plucking from an array of objects", async () => {
+    const context = {
+      items: [
+        { price: 20 },
+        { price: 30 },
+      ]
+    }
+    const output = await processString("{{ literal ( sum ( pluck items 'price' ) ) }}", context)
+    expect(output).toBe(50)
+  })
+})
+
 describe("Test the literal helper", () => {
   it("should allow use of the literal specifier for a number", async () => {
     const output = await processString(`{{literal a}}`, {
diff --git a/packages/worker/src/api/controllers/admin/configs.js b/packages/worker/src/api/controllers/admin/configs.js
index 107c0c8fa8..bf9259f953 100644
--- a/packages/worker/src/api/controllers/admin/configs.js
+++ b/packages/worker/src/api/controllers/admin/configs.js
@@ -10,7 +10,7 @@ const email = require("../../../utilities/email")
 
 const GLOBAL_DB = StaticDatabases.GLOBAL.name
 
-exports.save = async function(ctx) {
+exports.save = async function (ctx) {
   const db = new CouchDB(GLOBAL_DB)
   const { type, config } = ctx.request.body
   const { group, user } = config
@@ -45,7 +45,7 @@ exports.save = async function(ctx) {
   }
 }
 
-exports.fetch = async function(ctx) {
+exports.fetch = async function (ctx) {
   const db = new CouchDB(GLOBAL_DB)
   const response = await db.allDocs(
     getConfigParams(undefined, {
@@ -59,7 +59,7 @@ exports.fetch = async function(ctx) {
  * Gets the most granular config for a particular configuration type.
  * The hierarchy is type -> group -> user.
  */
-exports.find = async function(ctx) {
+exports.find = async function (ctx) {
   const db = new CouchDB(GLOBAL_DB)
   const userId = ctx.params.user && ctx.params.user._id
 
@@ -90,7 +90,7 @@ exports.find = async function(ctx) {
   }
 }
 
-exports.destroy = async function(ctx) {
+exports.destroy = async function (ctx) {
   const db = new CouchDB(GLOBAL_DB)
   const { id, rev } = ctx.params
 
diff --git a/packages/worker/src/api/controllers/admin/groups.js b/packages/worker/src/api/controllers/admin/groups.js
index baa510f487..8a70721431 100644
--- a/packages/worker/src/api/controllers/admin/groups.js
+++ b/packages/worker/src/api/controllers/admin/groups.js
@@ -7,7 +7,7 @@ const {
 
 const GLOBAL_DB = StaticDatabases.GLOBAL.name
 
-exports.save = async function(ctx) {
+exports.save = async function (ctx) {
   const db = new CouchDB(GLOBAL_DB)
   const groupDoc = ctx.request.body
 
@@ -27,7 +27,7 @@ exports.save = async function(ctx) {
   }
 }
 
-exports.fetch = async function(ctx) {
+exports.fetch = async function (ctx) {
   const db = new CouchDB(GLOBAL_DB)
   const response = await db.allDocs(
     getGroupParams(undefined, {
@@ -37,7 +37,7 @@ exports.fetch = async function(ctx) {
   ctx.body = response.rows.map(row => row.doc)
 }
 
-exports.find = async function(ctx) {
+exports.find = async function (ctx) {
   const db = new CouchDB(GLOBAL_DB)
   try {
     ctx.body = await db.get(ctx.params.id)
@@ -46,7 +46,7 @@ exports.find = async function(ctx) {
   }
 }
 
-exports.destroy = async function(ctx) {
+exports.destroy = async function (ctx) {
   const db = new CouchDB(GLOBAL_DB)
   const { id, rev } = ctx.params
 
diff --git a/yarn.lock b/yarn.lock
index f27c37ebf1..c8c4430e09 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -824,6 +824,31 @@
     estree-walker "^1.0.1"
     micromatch "^4.0.2"
 
+"@spectrum-css/actionbutton@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577"
+  integrity sha512-AUqtyNabHF451Aj9i3xz82TxS5Z6k1dttA68/1hMeU9kbPCSS4P6Viw3vaRGs9CSspuR8xnnhDgrq+F+zMy2Hw==
+
+"@spectrum-css/actiongroup@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-1.0.1.tgz#b95b86e7af229e90fe1e70399d8d4b547b4bd31c"
+  integrity sha512-5Q6uMjzv5BFA2TwGASr/jAtJpTWl26fhWvgGY8kOA0RCSij35l+YJg/FPXf6Nnj2qCOl8DkNycjT9YXJ+bhyVA==
+
+"@spectrum-css/link@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/link/-/link-3.1.1.tgz#cb526a2e10b50ef5a7ae29cca7272e2610d597eb"
+  integrity sha512-Bi88lRhTY7g6nM/ryW1yY4Cji211ZYNtRxkxbV7n2lPvwMAAQtyx0qVD3ru4kTGj/FFVvmPR3XiOE10K13HSNA==
+
+"@spectrum-css/menu@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.1.tgz#2a376f991acc24e12ec892bb6b9db2650fc41fbe"
+  integrity sha512-Qjg0+1O0eC89sb/bRFq2AGnQ8XqhVy23TUXHyffNM8qdcMssnlny3QmhzjURCZKvx/Y5UytCpzhedPQqSpQwZg==
+
+"@spectrum-css/toast@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"
+  integrity sha512-jov++S358BrN2tmMfaoYk1N6u9HojgeuQk61keXrK2m3VE5/n94x7Lg3kIPeSWO0odyDfBlMqT9jacbRey3QTg==
+
 "@types/estree@0.0.39":
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
@@ -3795,15 +3820,15 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier-plugin-svelte@^1.4.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-1.4.1.tgz#2f0f7a149190f476dc9b4ba9da8d482bd196f1e2"
-  integrity sha512-6y0m37Xw01GRf/WIHau+Kp3uXj2JB1agtEmNVKb9opMy34A6OMOYhfneVpNIlrghQSw/jIV+t3e5Ngt4up2CMA==
+prettier-plugin-svelte@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-2.2.0.tgz#4bd94992fa5b76413a8a5556f90b128c4fdaf7a6"
+  integrity sha512-Xdmqgr71tAuMqqzNCK52/v94g/Yv7V7lz+nmbO9NEA+9ol15VV3uUHOfydMNOo3SWvFaVlBcp947ebEaMWqVfQ==
 
-prettier@^1.19.1:
-  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
-  integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
+prettier@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
+  integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
 
 process-nextick-args@~2.0.0:
   version "2.0.1"
@@ -4534,10 +4559,10 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-svelte@^3.30.0:
-  version "3.30.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.30.0.tgz#cbde341e96bf34f4ac73c8f14f8a014e03bfb7d6"
-  integrity sha512-z+hdIACb9TROGvJBQWcItMtlr4s0DBUgJss6qWrtFkOoIInkG+iAMo/FJZQFyDBQZc+dul2+TzYSi/tpTT5/Ag==
+svelte@^3.37.0:
+  version "3.38.2"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.38.2.tgz#55e5c681f793ae349b5cc2fe58e5782af4275ef5"
+  integrity sha512-q5Dq0/QHh4BLJyEVWGe7Cej5NWs040LWjMbicBGZ+3qpFWJ1YObRmUDZKbbovddLC9WW7THTj3kYbTOFmU9fbg==
 
 table@^5.2.3:
   version "5.4.6"