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..f98624812f 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,8 @@
     "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"
@@ -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/index.js b/packages/auth/src/db/index.js
index f94fe4afea..cca0a3ddba 100644
--- a/packages/auth/src/db/index.js
+++ b/packages/auth/src/db/index.js
@@ -1,9 +1,9 @@
 let Pouch
 
-module.exports.setDB = pouch => {
+module.exports.setDB = (pouch) => {
   Pouch = pouch
 }
 
-module.exports.getDB = dbName => {
+module.exports.getDB = (dbName) => {
   return new Pouch(dbName)
 }
diff --git a/packages/auth/src/db/utils.js b/packages/auth/src/db/utils.js
index 393e03e492..de743a7764 100644
--- a/packages/auth/src/db/utils.js
+++ b/packages/auth/src/db/utils.js
@@ -48,7 +48,7 @@ exports.getGroupParams = (id = "", otherProps = {}) => {
  * Generates a new global user ID.
  * @returns {string} The new user ID which the user doc can be stored under.
  */
-exports.generateGlobalUserID = id => {
+exports.generateGlobalUserID = (id) => {
   return `${DocumentTypes.USER}${SEPARATOR}${id || newid()}`
 }
 
@@ -70,7 +70,7 @@ exports.getGlobalUserParams = (globalId, otherProps = {}) => {
  * Generates a template ID.
  * @param ownerId The owner/user of the template, this could be global or a group level.
  */
-exports.generateTemplateID = ownerId => {
+exports.generateTemplateID = (ownerId) => {
   return `${DocumentTypes.TEMPLATE}${SEPARATOR}${ownerId}${newid()}`
 }
 
@@ -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 },
@@ -132,7 +132,7 @@ const determineScopedConfig = async function(db, { type, user, group }) {
       }
     )
   )
-  const configs = response.rows.map(row => {
+  const configs = response.rows.map((row) => {
     const config = row.doc
 
     // Config is specific to a user and a group
diff --git a/packages/auth/src/hashing.js b/packages/auth/src/hashing.js
index 65976fc1f3..fe9b034c63 100644
--- a/packages/auth/src/hashing.js
+++ b/packages/auth/src/hashing.js
@@ -4,7 +4,7 @@ const { v4 } = require("uuid")
 
 const SALT_ROUNDS = env.SALT_ROUNDS || 10
 
-exports.hash = async data => {
+exports.hash = async (data) => {
   const salt = await bcrypt.genSalt(SALT_ROUNDS)
   return bcrypt.hash(data, salt)
 }
@@ -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/auth/src/utils.js b/packages/auth/src/utils.js
index 10507410b1..beb1c33cf1 100644
--- a/packages/auth/src/utils.js
+++ b/packages/auth/src/utils.js
@@ -22,7 +22,7 @@ function confirmAppId(possibleAppId) {
  * @param {object} ctx The main request body to look through.
  * @returns {string|undefined} If an appId was found it will be returned.
  */
-exports.getAppId = ctx => {
+exports.getAppId = (ctx) => {
   const options = [ctx.headers["x-budibase-app-id"], ctx.params.appId]
   if (ctx.subdomains) {
     options.push(ctx.subdomains[1])
@@ -41,7 +41,7 @@ exports.getAppId = ctx => {
   }
   let appPath =
     ctx.request.headers.referrer ||
-    ctx.path.split("/").filter(subPath => subPath.startsWith(APP_PREFIX))
+    ctx.path.split("/").filter((subPath) => subPath.startsWith(APP_PREFIX))
   if (!appId && appPath.length !== 0) {
     appId = confirmAppId(appPath[0])
   }
@@ -101,11 +101,11 @@ exports.clearCookie = (ctx, name) => {
  * @param {object} ctx The koa context object to be tested.
  * @return {boolean} returns true if the call is from the client lib (a built app rather than the builder).
  */
-exports.isClient = ctx => {
+exports.isClient = (ctx) => {
   return ctx.headers["x-budibase-type"] === "client"
 }
 
-exports.getGlobalUserByEmail = async email => {
+exports.getGlobalUserByEmail = async (email) => {
   const db = getDB(StaticDatabases.GLOBAL.name)
   try {
     let users = (
@@ -114,7 +114,7 @@ exports.getGlobalUserByEmail = async email => {
         include_docs: true,
       })
     ).rows
-    users = users.map(user => user.doc)
+    users = users.map((user) => user.doc)
     return users.length <= 1 ? users[0] : users
   } catch (err) {
     if (err != null && err.name === "not_found") {
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..a4bfd29c83
--- /dev/null
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -0,0 +1,66 @@
+<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..514b473521
--- /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..776fc7f83e 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
     }
 
@@ -47,7 +47,7 @@ export default function positionDropdown(element, { anchor, align }) {
   element.style[positionSide] = `${dimensions[positionSide]}px`
   element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
 
-  const resizeObserver = new ResizeObserver(entries => {
+  const resizeObserver = new ResizeObserver((entries) => {
     entries.forEach(() => {
       dimensions = getDimensions()
       element.style[positionSide] = `${dimensions[positionSide]}px`
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..6e2b63adbd 100644
--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@@ -1,212 +1,50 @@
 <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..51055363a2
--- /dev/null
+++ b/packages/bbui/src/ButtonGroup/ButtonGroup.svelte
@@ -0,0 +1,15 @@
+<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>
\ No newline at end of file
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..f786a54854 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,12 @@
     <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 +66,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..b41b1ab529
--- /dev/null
+++ b/packages/bbui/src/Drawer/DrawerContent.svelte
@@ -0,0 +1,45 @@
+<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..6b1e67a299
--- /dev/null
+++ b/packages/bbui/src/Form/Combobox.svelte
@@ -0,0 +1,39 @@
+<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..bc9b9a9fc7
--- /dev/null
+++ b/packages/bbui/src/Form/Core/Checkbox.svelte
@@ -0,0 +1,43 @@
+<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..4329467bb0
--- /dev/null
+++ b/packages/bbui/src/Form/Core/Combobox.svelte
@@ -0,0 +1,128 @@
+<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..a3a2fefb38
--- /dev/null
+++ b/packages/bbui/src/Form/Core/DatePicker.svelte
@@ -0,0 +1,142 @@
+<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..e6addd4e42
--- /dev/null
+++ b/packages/bbui/src/Form/Core/Dropzone.svelte
@@ -0,0 +1,334 @@
+<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..97420fabad
--- /dev/null
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -0,0 +1,81 @@
+<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..2f5606dcf1
--- /dev/null
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -0,0 +1,123 @@
+<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..385e456a8e
--- /dev/null
+++ b/packages/bbui/src/Form/Core/RadioGroup.svelte
@@ -0,0 +1,37 @@
+<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..6855799e86
--- /dev/null
+++ b/packages/bbui/src/Form/Core/Search.svelte
@@ -0,0 +1,82 @@
+<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..58e1ccca5a
--- /dev/null
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -0,0 +1,57 @@
+<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..520b8ebff1
--- /dev/null
+++ b/packages/bbui/src/Form/Core/Switch.svelte
@@ -0,0 +1,27 @@
+<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..3903c37b28
--- /dev/null
+++ b/packages/bbui/src/Form/Core/TextArea.svelte
@@ -0,0 +1,55 @@
+<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}
+  <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..c470f755b0
--- /dev/null
+++ b/packages/bbui/src/Form/Core/TextField.svelte
@@ -0,0 +1,84 @@
+<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..1ac3b2bef0
--- /dev/null
+++ b/packages/bbui/src/Form/DatePicker.svelte
@@ -0,0 +1,29 @@
+<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..5886c58fa9
--- /dev/null
+++ b/packages/bbui/src/Form/Dropzone.svelte
@@ -0,0 +1,31 @@
+<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..5e4ca01f06
--- /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..c4219f5581
--- /dev/null
+++ b/packages/bbui/src/Form/FieldLabel.svelte
@@ -0,0 +1,26 @@
+<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..e4a155d342 100644
--- a/packages/bbui/src/Form/Input.svelte
+++ b/packages/bbui/src/Form/Input.svelte
@@ -1,190 +1,33 @@
 <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..1615fac2b6 100644
--- a/packages/bbui/src/Form/Multiselect.svelte
+++ b/packages/bbui/src/Form/Multiselect.svelte
@@ -1,324 +1,35 @@
 <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..61bc5f8552
--- /dev/null
+++ b/packages/bbui/src/Form/RadioGroup.svelte
@@ -0,0 +1,37 @@
+<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..e68a6a49fb
--- /dev/null
+++ b/packages/bbui/src/Form/Search.svelte
@@ -0,0 +1,27 @@
+<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..0dd4a98102 100644
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@@ -1,95 +1,42 @@
 <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..a11b87da0d 100644
--- a/packages/bbui/src/Form/TextArea.svelte
+++ b/packages/bbui/src/Form/TextArea.svelte
@@ -1,132 +1,29 @@
 <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..c1613378f6
--- /dev/null
+++ b/packages/bbui/src/Link/Link.svelte
@@ -0,0 +1,20 @@
+<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..2fa1021732
--- /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>
\ No newline at end of file
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..54ae4123be
--- /dev/null
+++ b/packages/bbui/src/Menu/Section.svelte
@@ -0,0 +1,9 @@
+<script>
+    export let heading
+</script>
+<li role="presentation">
+<span class="spectrum-Menu-sectionHeading">{heading}</span>
+    <ul class="spectrum-Menu" role="group">
+        <slot />
+    </ul>
+</li>
\ No newline at end of file
diff --git a/packages/bbui/src/Menu/Separator.svelte b/packages/bbui/src/Menu/Separator.svelte
new file mode 100644
index 0000000000..187fab2347
--- /dev/null
+++ b/packages/bbui/src/Menu/Separator.svelte
@@ -0,0 +1 @@
+<li class="spectrum-Menu-divider" role="separator"></li>
\ No newline at end of file
diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index 3aaf6cd586..f8d07a16df 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,31 @@
     }
   }
 
+  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 +66,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..321c0177a4 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 = "small"
   export let cancelText = "Cancel"
   export let confirmText = "Confirm"
   export let showCancelButton = true
@@ -27,28 +29,33 @@
   }
 </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 spectrum-Dialog--{size}"
+  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}>
@@ -56,46 +63,38 @@
           </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 {
+  .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 +105,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/Notification/NotificationDisplay.svelte b/packages/bbui/src/Notification/NotificationDisplay.svelte
new file mode 100644
index 0000000000..161d31ec6c
--- /dev/null
+++ b/packages/bbui/src/Notification/NotificationDisplay.svelte
@@ -0,0 +1,44 @@
+<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>
+  
\ No newline at end of file
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 8a075242cd..bea421fd07 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,18 @@
   <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..bca427b7ff
--- /dev/null
+++ b/packages/bbui/src/ProgressBar/ProgressBar.svelte
@@ -0,0 +1,63 @@
+<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--sizeS={s}
+      class:spectrum-FieldLabel--sizeM={m}
+      class:spectrum-FieldLabel--sizeL={l}
+      class:spectrum-FieldLabel--sizeXL={xl}
+      class="spectrum-FieldLabel spectrum-ProgressBar-label"
+    >
+      <slot />
+    </div>
+  {/if}
+  {#if value}
+    <div
+      class:spectrum-FieldLabel--sizeS={s}
+      class:spectrum-FieldLabel--sizeM={m}
+      class:spectrum-FieldLabel--sizeL={l}
+      class:spectrum-FieldLabel--sizeXL={xl}
+      class="spectrum-FieldLabel spectrum-ProgressBar-percentage"
+    >
+      {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..ba1dc10965
--- /dev/null
+++ b/packages/bbui/src/ProgressCircle/ProgressCircle.svelte
@@ -0,0 +1,29 @@
+<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>
+    <div class="spectrum-ProgressCircle-fills">
+      <div class="spectrum-ProgressCircle-fillMask1">
+        <div class="spectrum-ProgressCircle-fillSubMask1">
+          <div class="spectrum-ProgressCircle-fill"></div>
+        </div>
+      </div>
+      <div class="spectrum-ProgressCircle-fillMask2">
+        <div class="spectrum-ProgressCircle-fillSubMask2">
+          <div class="spectrum-ProgressCircle-fill"></div>
+        </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..17b83d1605
--- /dev/null
+++ b/packages/bbui/src/SideNavigation/Item.svelte
@@ -0,0 +1,30 @@
+<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>
\ No newline at end of file
diff --git a/packages/bbui/src/SideNavigation/Navigation.svelte b/packages/bbui/src/SideNavigation/Navigation.svelte
new file mode 100644
index 0000000000..1400f0a508
--- /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>
\ No newline at end of file
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..0f397f4dba 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 100%
rename from packages/standard-components/src/table/BooleanRenderer.svelte
rename to packages/bbui/src/Table/BooleanRenderer.svelte
diff --git a/packages/bbui/src/Table/CellRenderer.svelte b/packages/bbui/src/Table/CellRenderer.svelte
new file mode 100644
index 0000000000..d0323487e1
--- /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 100%
rename from packages/standard-components/src/table/DateTimeRenderer.svelte
rename to packages/bbui/src/Table/DateTimeRenderer.svelte
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..3c7c224555
--- /dev/null
+++ b/packages/bbui/src/Table/Table.svelte
@@ -0,0 +1,426 @@
+<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
+  $: 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 chanegs
+  $: data.length, reset()
+  const reset = () => {
+    nextScrollTop = 0
+    scrollTop = 0
+    clearTimeout(timeout)
+    timeout = null
+  }
+
+  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
+      }
+      schema[field].name = field
+      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..b2637f2784
--- /dev/null
+++ b/packages/bbui/src/Tabs/Tab.svelte
@@ -0,0 +1,49 @@
+<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..7cd3e50b18
--- /dev/null
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@@ -0,0 +1,85 @@
+<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..e186514376
--- /dev/null
+++ b/packages/bbui/src/Tags/Tag.svelte
@@ -0,0 +1,24 @@
+<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>
\ No newline at end of file
diff --git a/packages/bbui/src/Tags/Tags.svelte b/packages/bbui/src/Tags/Tags.svelte
new file mode 100644
index 0000000000..8eecc1dbff
--- /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>
\ No newline at end of file
diff --git a/packages/bbui/src/TreeView/Item.svelte b/packages/bbui/src/TreeView/Item.svelte
new file mode 100644
index 0000000000..1744cd5c8f
--- /dev/null
+++ b/packages/bbui/src/TreeView/Item.svelte
@@ -0,0 +1,28 @@
+<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>
\ No newline at end of file
diff --git a/packages/bbui/src/TreeView/Tree.svelte b/packages/bbui/src/TreeView/Tree.svelte
new file mode 100644
index 0000000000..5a4e254732
--- /dev/null
+++ b/packages/bbui/src/TreeView/Tree.svelte
@@ -0,0 +1,11 @@
+<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>
\ No newline at end of file
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..57a5fe16de 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -6,15 +6,13 @@
 //
 
 Cypress.Commands.add("login", () => {
-  cy.getCookie("budibase:auth").then(cookie => {
+  cy.getCookie("budibase:auth").then((cookie) => {
     // Already logged in
     if (cookie) return
 
     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")
 
@@ -22,43 +20,46 @@ Cypress.Commands.add("login", () => {
   })
 })
 
-Cypress.Commands.add("createApp", name => {
+Cypress.Commands.add("createApp", (name) => {
   cy.visit(`localhost:${Cypress.env("PORT")}/builder`)
   // wait for init API calls on visit
   cy.wait(100)
   cy.contains("Create New Web App").click()
   cy.get("body")
-    .then($body => {
+    .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")
+        })
     })
 })
 
-Cypress.Commands.add("deleteApp", name => {
+Cypress.Commands.add("deleteApp", (name) => {
   cy.visit(`localhost:${Cypress.env("PORT")}/builder`)
-  cy.get(".apps").then($apps => {
+  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()
       })
     }
@@ -77,16 +78,12 @@ Cypress.Commands.add("createTestTableWithData", () => {
   cy.addColumn("dog", "age", "Number")
 })
 
-Cypress.Commands.add("createTable", tableName => {
+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(() => {
+Cypress.Commands.add("addRow", (values) => {
+  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()
   })
 })
 
@@ -151,7 +134,7 @@ Cypress.Commands.add("addComponent", (category, component) => {
   }
   cy.get(`[data-cy="component-${component}"]`).click()
   cy.wait(1000)
-  cy.location().then(loc => {
+  cy.location().then((loc) => {
     const params = loc.pathname.split("/")
     const componentId = params[params.length - 1]
     cy.getComponent(componentId).should("exist")
@@ -159,7 +142,7 @@ Cypress.Commands.add("addComponent", (category, component) => {
   })
 })
 
-Cypress.Commands.add("getComponent", componentId => {
+Cypress.Commands.add("getComponent", (componentId) => {
   return cy
     .get("iframe")
     .its("0.contentDocument")
@@ -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..12a4664823 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",
diff --git a/packages/builder/src/App.svelte b/packages/builder/src/App.svelte
index 0f9d0695f2..507eaaa5de 100644
--- a/packages/builder/src/App.svelte
+++ b/packages/builder/src/App.svelte
@@ -3,8 +3,8 @@
   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>
\ No newline at end of file
diff --git a/packages/builder/src/analytics.js b/packages/builder/src/analytics.js
index e6a647a08b..f801eb84db 100644
--- a/packages/builder/src/analytics.js
+++ b/packages/builder/src/analytics.js
@@ -32,7 +32,7 @@ function identify(id) {
   if (!analyticsEnabled || !id) return
   if (posthogConfigured) posthog.identify(id)
   if (sentryConfigured)
-    Sentry.configureScope(scope => {
+    Sentry.configureScope((scope) => {
       scope.setUser({ id: id })
     })
 }
@@ -73,7 +73,7 @@ if (!localStorage.getItem(APP_FIRST_STARTED_KEY)) {
   localStorage.setItem(APP_FIRST_STARTED_KEY, Date.now())
 }
 
-const isFeedbackTimeElapsed = sinceDateStr => {
+const isFeedbackTimeElapsed = (sinceDateStr) => {
   const sinceDate = parseFloat(sinceDateStr)
   const feedbackMilliseconds = feedbackHours * 60 * 60 * 1000
   return Date.now() > sinceDate + feedbackMilliseconds
@@ -107,7 +107,7 @@ function highlightFeedbackIcon() {
 }
 
 // Opt In/Out
-const ifAnalyticsEnabled = func => () => {
+const ifAnalyticsEnabled = (func) => () => {
   if (analyticsEnabled && process.env.POSTHOG_TOKEN) {
     return func()
   }
diff --git a/packages/builder/src/builderStore/api.js b/packages/builder/src/builderStore/api.js
index 2e683238bc..a9244bfa6a 100644
--- a/packages/builder/src/builderStore/api.js
+++ b/packages/builder/src/builderStore/api.js
@@ -2,7 +2,7 @@ import { store } from "./index"
 import { get as svelteGet } from "svelte/store"
 import { removeCookie, Cookies } from "./cookies"
 
-const apiCall = method => async (
+const apiCall = (method) => async (
   url,
   body,
   headers = { "Content-Type": "application/json" }
diff --git a/packages/builder/src/builderStore/cookies.js b/packages/builder/src/builderStore/cookies.js
index a84f1a4f20..2966087524 100644
--- a/packages/builder/src/builderStore/cookies.js
+++ b/packages/builder/src/builderStore/cookies.js
@@ -4,7 +4,7 @@ export const Cookies = {
 }
 
 export function getCookie(cookieName) {
-  return document.cookie.split(";").some(cookie => {
+  return document.cookie.split(";").some((cookie) => {
     return cookie.trim().startsWith(`${cookieName}=`)
   })
 }
diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 58c4d8f4b6..633f56176e 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -34,7 +34,7 @@ export const getDataProviderComponents = (asset, componentId) => {
   path.pop()
 
   // Filter by only data provider components
-  return path.filter(component => {
+  return path.filter((component) => {
     const def = store.actions.components.getDefinition(component._component)
     return def?.context != null
   })
@@ -54,7 +54,7 @@ export const getActionProviderComponents = (asset, componentId, actionType) => {
   path.pop()
 
   // Filter by only data provider components
-  return path.filter(component => {
+  return path.filter((component) => {
     const def = store.actions.components.getDefinition(component._component)
     return def?.actions?.includes(actionType)
   })
@@ -70,7 +70,7 @@ export const getDatasourceForProvider = (asset, component) => {
   }
 
   // If this component has a dataProvider setting, go up the stack and use it
-  const dataProviderSetting = def.settings.find(setting => {
+  const dataProviderSetting = def.settings.find((setting) => {
     return setting.type === "dataProvider"
   })
   if (dataProviderSetting) {
@@ -82,7 +82,7 @@ export const getDatasourceForProvider = (asset, component) => {
 
   // Extract datasource from component instance
   const validSettingTypes = ["dataSource", "table", "schema"]
-  const datasourceSetting = def.settings.find(setting => {
+  const datasourceSetting = def.settings.find((setting) => {
     return validSettingTypes.includes(setting.type)
   })
   if (!datasourceSetting) {
@@ -112,7 +112,7 @@ const getContextBindings = (asset, componentId) => {
   let bindings = []
 
   // Create bindings for each data provider
-  dataProviders.forEach(component => {
+  dataProviders.forEach((component) => {
     const def = store.actions.components.getDefinition(component._component)
     const contextDefinition = def.context
     let schema
@@ -127,7 +127,7 @@ const getContextBindings = (asset, componentId) => {
       // Static contexts are fully defined by the components
       schema = {}
       const values = contextDefinition.values || []
-      values.forEach(value => {
+      values.forEach((value) => {
         schema[value.key] = { name: value.label, type: "string" }
       })
     } else if (contextDefinition.type === "schema") {
@@ -148,7 +148,7 @@ const getContextBindings = (asset, componentId) => {
 
     // Create bindable properties for each schema field
     const safeComponentId = makePropSafe(component._id)
-    keys.forEach(key => {
+    keys.forEach((key) => {
       const fieldSchema = schema[key]
 
       // Make safe runtime binding and replace certain bindings with a
@@ -197,7 +197,7 @@ const getUserBindings = () => {
   })
   const keys = Object.keys(schema).sort()
   const safeUser = makePropSafe("user")
-  keys.forEach(key => {
+  keys.forEach((key) => {
     const fieldSchema = schema[key]
     // Replace certain bindings with a new property to help display components
     let runtimeBoundKey = key
@@ -224,17 +224,17 @@ const getUserBindings = () => {
 /**
  * Gets all bindable properties from URL parameters.
  */
-const getUrlBindings = asset => {
+const getUrlBindings = (asset) => {
   const url = asset?.routing?.route ?? ""
   const split = url.split("/")
   let params = []
-  split.forEach(part => {
+  split.forEach((part) => {
     if (part.startsWith(":") && part.length > 1) {
       params.push(part.replace(/:/g, "").replace(/\?/g, ""))
     }
   })
   const safeURL = makePropSafe("url")
-  return params.map(param => ({
+  return params.map((param) => ({
     type: "context",
     runtimeBinding: `${safeURL}.${makePropSafe(param)}`,
     readableBinding: `URL.${param}`,
@@ -250,10 +250,10 @@ export const getSchemaForDatasource = (datasource, isForm = false) => {
     const { type } = datasource
     if (type === "query") {
       const queries = get(queriesStores).list
-      table = queries.find(query => query._id === datasource._id)
+      table = queries.find((query) => query._id === datasource._id)
     } else {
       const tables = get(tablesStore).list
-      table = tables.find(table => table._id === datasource.tableId)
+      table = tables.find((table) => table._id === datasource.tableId)
     }
     if (table) {
       if (type === "view") {
@@ -261,7 +261,7 @@ export const getSchemaForDatasource = (datasource, isForm = false) => {
       } else if (type === "query" && isForm) {
         schema = {}
         const params = table.parameters || []
-        params.forEach(param => {
+        params.forEach((param) => {
           if (param?.name) {
             schema[param.name] = { ...param, type: "string" }
           }
@@ -279,7 +279,7 @@ export const getSchemaForDatasource = (datasource, isForm = false) => {
 
     // Ensure there are "name" properties for all fields
     if (schema) {
-      Object.keys(schema).forEach(field => {
+      Object.keys(schema).forEach((field) => {
         if (!schema[field].name) {
           schema[field].name = field
         }
@@ -293,14 +293,14 @@ export const getSchemaForDatasource = (datasource, isForm = false) => {
  * Builds a form schema given a form component.
  * A form schema is a schema of all the fields nested anywhere within a form.
  */
-const buildFormSchema = component => {
+const buildFormSchema = (component) => {
   let schema = {}
   if (!component) {
     return schema
   }
   const def = store.actions.components.getDefinition(component._component)
   const fieldSetting = def?.settings?.find(
-    setting => setting.key === "field" && setting.type.startsWith("field/")
+    (setting) => setting.key === "field" && setting.type.startsWith("field/")
   )
   if (fieldSetting && component.field) {
     const type = fieldSetting.type.split("field/")[1]
@@ -308,7 +308,7 @@ const buildFormSchema = component => {
       schema[component.field] = { type }
     }
   }
-  component._children?.forEach(child => {
+  component._children?.forEach((child) => {
     const childSchema = buildFormSchema(child)
     schema = { ...schema, ...childSchema }
   })
@@ -339,7 +339,7 @@ function bindingReplacement(bindableProperties, textWithBindings, convertTo) {
     return textWithBindings
   }
   const convertFromProps = bindableProperties
-    .map(el => el[convertFrom])
+    .map((el) => el[convertFrom])
     .sort((a, b) => {
       return b.length - a.length
     })
@@ -349,7 +349,9 @@ function bindingReplacement(bindableProperties, textWithBindings, convertTo) {
     let newBoundValue = boundValue
     for (let from of convertFromProps) {
       if (newBoundValue.includes(from)) {
-        const binding = bindableProperties.find(el => el[convertFrom] === from)
+        const binding = bindableProperties.find(
+          (el) => el[convertFrom] === from
+        )
         newBoundValue = newBoundValue.replace(from, binding[convertTo])
       }
     }
diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js
index 6fecda84c0..e3ed25b92e 100644
--- a/packages/builder/src/builderStore/index.js
+++ b/packages/builder/src/builderStore/index.js
@@ -12,12 +12,16 @@ export const automationStore = getAutomationStore()
 export const themeStore = getThemeStore()
 export const hostingStore = getHostingStore()
 
-export const currentAsset = derived(store, $store => {
+export const currentAsset = derived(store, ($store) => {
   const type = $store.currentFrontEndType
   if (type === FrontendTypes.SCREEN) {
-    return $store.screens.find(screen => screen._id === $store.selectedScreenId)
+    return $store.screens.find(
+      (screen) => screen._id === $store.selectedScreenId
+    )
   } else if (type === FrontendTypes.LAYOUT) {
-    return $store.layouts.find(layout => layout._id === $store.selectedLayoutId)
+    return $store.layouts.find(
+      (layout) => layout._id === $store.selectedLayoutId
+    )
   }
   return null
 })
@@ -32,24 +36,24 @@ export const selectedComponent = derived(
   }
 )
 
-export const currentAssetId = derived(store, $store => {
+export const currentAssetId = derived(store, ($store) => {
   return $store.currentFrontEndType === FrontendTypes.SCREEN
     ? $store.selectedScreenId
     : $store.selectedLayoutId
 })
 
-export const currentAssetName = derived(currentAsset, $currentAsset => {
+export const currentAssetName = derived(currentAsset, ($currentAsset) => {
   return $currentAsset?.name
 })
 
 // leave this as before for consistency
-export const allScreens = derived(store, $store => {
+export const allScreens = derived(store, ($store) => {
   return $store.screens
 })
 
-export const mainLayout = derived(store, $store => {
+export const mainLayout = derived(store, ($store) => {
   return $store.layouts?.find(
-    layout => layout._id === LAYOUT_NAMES.MASTER.PRIVATE
+    (layout) => layout._id === LAYOUT_NAMES.MASTER.PRIVATE
   )
 })
 
diff --git a/packages/builder/src/builderStore/loadComponentLibraries.js b/packages/builder/src/builderStore/loadComponentLibraries.js
index 8bdfcf7538..be8ce41d24 100644
--- a/packages/builder/src/builderStore/loadComponentLibraries.js
+++ b/packages/builder/src/builderStore/loadComponentLibraries.js
@@ -5,7 +5,7 @@ import { get } from "builderStore/api"
  * their props and other metadata from components.json.
  * @param {string} appId - ID of the currently running app
  */
-export const fetchComponentLibDefinitions = async appId => {
+export const fetchComponentLibDefinitions = async (appId) => {
   const LIB_DEFINITION_URL = `/api/${appId}/components/definitions`
   try {
     const libDefinitionResponse = await get(LIB_DEFINITION_URL)
diff --git a/packages/builder/src/builderStore/store/automation/Automation.js b/packages/builder/src/builderStore/store/automation/Automation.js
index a9dce88258..89f6c2f9af 100644
--- a/packages/builder/src/builderStore/store/automation/Automation.js
+++ b/packages/builder/src/builderStore/store/automation/Automation.js
@@ -37,7 +37,7 @@ export default class Automation {
       return
     }
 
-    const stepIdx = steps.findIndex(step => step.id === id)
+    const stepIdx = steps.findIndex((step) => step.id === id)
     if (stepIdx < 0) throw new Error("Block not found.")
     steps.splice(stepIdx, 1, updatedBlock)
     this.automation.definition.steps = steps
@@ -51,7 +51,7 @@ export default class Automation {
       return
     }
 
-    const stepIdx = steps.findIndex(step => step.id === id)
+    const stepIdx = steps.findIndex((step) => step.id === id)
     if (stepIdx < 0) throw new Error("Block not found.")
     steps.splice(stepIdx, 1)
     this.automation.definition.steps = steps
diff --git a/packages/builder/src/builderStore/store/automation/index.js b/packages/builder/src/builderStore/store/automation/index.js
index 7a01bccfab..4b75f12abb 100644
--- a/packages/builder/src/builderStore/store/automation/index.js
+++ b/packages/builder/src/builderStore/store/automation/index.js
@@ -4,14 +4,14 @@ import Automation from "./Automation"
 import { cloneDeep } from "lodash/fp"
 import analytics from "analytics"
 
-const automationActions = store => ({
+const automationActions = (store) => ({
   fetch: async () => {
     const responses = await Promise.all([
       api.get(`/api/automations`),
       api.get(`/api/automations/definitions/list`),
     ])
-    const jsonResponses = await Promise.all(responses.map(x => x.json()))
-    store.update(state => {
+    const jsonResponses = await Promise.all(responses.map((x) => x.json()))
+    store.update((state) => {
       let selected = state.selectedAutomation?.automation
       state.automations = jsonResponses[0]
       state.blockDefinitions = {
@@ -22,7 +22,7 @@ const automationActions = store => ({
       // if previously selected find the new obj and select it
       if (selected) {
         selected = jsonResponses[0].filter(
-          automation => automation._id === selected._id
+          (automation) => automation._id === selected._id
         )
         state.selectedAutomation = new Automation(selected[0])
       }
@@ -40,7 +40,7 @@ const automationActions = store => ({
     const CREATE_AUTOMATION_URL = `/api/automations`
     const response = await api.post(CREATE_AUTOMATION_URL, automation)
     const json = await response.json()
-    store.update(state => {
+    store.update((state) => {
       state.automations = [...state.automations, json.automation]
       store.actions.select(json.automation)
       return state
@@ -50,9 +50,9 @@ const automationActions = store => ({
     const UPDATE_AUTOMATION_URL = `/api/automations`
     const response = await api.put(UPDATE_AUTOMATION_URL, automation)
     const json = await response.json()
-    store.update(state => {
+    store.update((state) => {
       const existingIdx = state.automations.findIndex(
-        existing => existing._id === automation._id
+        (existing) => existing._id === automation._id
       )
       state.automations.splice(existingIdx, 1, json.automation)
       state.automations = state.automations
@@ -65,9 +65,9 @@ const automationActions = store => ({
     const DELETE_AUTOMATION_URL = `/api/automations/${_id}/${_rev}`
     await api.delete(DELETE_AUTOMATION_URL)
 
-    store.update(state => {
+    store.update((state) => {
       const existingIdx = state.automations.findIndex(
-        existing => existing._id === _id
+        (existing) => existing._id === _id
       )
       state.automations.splice(existingIdx, 1)
       state.automations = state.automations
@@ -81,15 +81,15 @@ const automationActions = store => ({
     const TRIGGER_AUTOMATION_URL = `/api/automations/${_id}/trigger`
     return await api.post(TRIGGER_AUTOMATION_URL)
   },
-  select: automation => {
-    store.update(state => {
+  select: (automation) => {
+    store.update((state) => {
       state.selectedAutomation = new Automation(cloneDeep(automation))
       state.selectedBlock = null
       return state
     })
   },
-  addBlockToAutomation: block => {
-    store.update(state => {
+  addBlockToAutomation: (block) => {
+    store.update((state) => {
       const newBlock = state.selectedAutomation.addBlock(cloneDeep(block))
       state.selectedBlock = newBlock
       return state
@@ -98,10 +98,10 @@ const automationActions = store => ({
       name: block.name,
     })
   },
-  deleteAutomationBlock: block => {
-    store.update(state => {
+  deleteAutomationBlock: (block) => {
+    store.update((state) => {
       const idx = state.selectedAutomation.automation.definition.steps.findIndex(
-        x => x.id === block.id
+        (x) => x.id === block.id
       )
       state.selectedAutomation.deleteBlock(block.id)
 
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/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index be553066b9..92a1a3015b 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -49,10 +49,10 @@ export const getFrontendStore = () => {
   const store = writable({ ...INITIAL_FRONTEND_STATE })
 
   store.actions = {
-    initialise: async pkg => {
+    initialise: async (pkg) => {
       const { layouts, screens, application, clientLibPath } = pkg
       const components = await fetchComponentLibDefinitions(application._id)
-      store.update(state => ({
+      store.update((state) => ({
         ...state,
         libraries: application.componentLibraries,
         components,
@@ -70,7 +70,7 @@ export const getFrontendStore = () => {
 
       // Initialise backend stores
       const [_integrations] = await Promise.all([
-        api.get("/api/integrations").then(r => r.json()),
+        api.get("/api/integrations").then((r) => r.json()),
       ])
       datasources.init()
       integrations.set(_integrations)
@@ -82,18 +82,18 @@ export const getFrontendStore = () => {
       fetch: async () => {
         const response = await api.get("/api/routing")
         const json = await response.json()
-        store.update(state => {
+        store.update((state) => {
           state.routes = json.routes
           return state
         })
       },
     },
     screens: {
-      select: screenId => {
-        store.update(state => {
+      select: (screenId) => {
+        store.update((state) => {
           let screens = get(allScreens)
           let screen =
-            screens.find(screen => screen._id === screenId) || screens[0]
+            screens.find((screen) => screen._id === screenId) || screens[0]
           if (!screen) return state
 
           // Update role to the screen's role setting so that it will always
@@ -107,9 +107,9 @@ export const getFrontendStore = () => {
           return state
         })
       },
-      create: async screen => {
+      create: async (screen) => {
         screen = await store.actions.screens.save(screen)
-        store.update(state => {
+        store.update((state) => {
           state.selectedScreenId = screen._id
           state.selectedComponentId = screen.props._id
           state.currentFrontEndType = FrontendTypes.SCREEN
@@ -118,15 +118,15 @@ export const getFrontendStore = () => {
         })
         return screen
       },
-      save: async screen => {
+      save: async (screen) => {
         const creatingNewScreen = screen._id === undefined
         const response = await api.post(`/api/screens`, screen)
         screen = await response.json()
         await store.actions.routing.fetch()
 
-        store.update(state => {
+        store.update((state) => {
           const foundScreen = state.screens.findIndex(
-            el => el._id === screen._id
+            (el) => el._id === screen._id
           )
           if (foundScreen !== -1) {
             state.screens.splice(foundScreen, 1)
@@ -141,14 +141,14 @@ export const getFrontendStore = () => {
 
         return screen
       },
-      delete: async screens => {
+      delete: async (screens) => {
         const screensToDelete = Array.isArray(screens) ? screens : [screens]
 
         const screenDeletePromises = []
-        store.update(state => {
+        store.update((state) => {
           for (let screenToDelete of screensToDelete) {
             state.screens = state.screens.filter(
-              screen => screen._id !== screenToDelete._id
+              (screen) => screen._id !== screenToDelete._id
             )
             screenDeletePromises.push(
               api.delete(
@@ -177,8 +177,8 @@ export const getFrontendStore = () => {
       },
     },
     layouts: {
-      select: layoutId => {
-        store.update(state => {
+      select: (layoutId) => {
+        store.update((state) => {
           const layout =
             store.actions.layouts.find(layoutId) || get(store).layouts[0]
           if (!layout) return
@@ -189,15 +189,15 @@ export const getFrontendStore = () => {
           return state
         })
       },
-      save: async layout => {
+      save: async (layout) => {
         const layoutToSave = cloneDeep(layout)
         const creatingNewLayout = layoutToSave._id === undefined
         const response = await api.post(`/api/layouts`, layoutToSave)
         const savedLayout = await response.json()
 
-        store.update(state => {
+        store.update((state) => {
           const layoutIdx = state.layouts.findIndex(
-            stateLayout => stateLayout._id === savedLayout._id
+            (stateLayout) => stateLayout._id === savedLayout._id
           )
           if (layoutIdx >= 0) {
             // update existing layout
@@ -216,14 +216,14 @@ export const getFrontendStore = () => {
 
         return savedLayout
       },
-      find: layoutId => {
+      find: (layoutId) => {
         if (!layoutId) {
           return get(mainLayout)
         }
         const storeContents = get(store)
-        return storeContents.layouts.find(layout => layout._id === layoutId)
+        return storeContents.layouts.find((layout) => layout._id === layoutId)
       },
-      delete: async layoutToDelete => {
+      delete: async (layoutToDelete) => {
         const response = await api.delete(
           `/api/layouts/${layoutToDelete._id}/${layoutToDelete._rev}`
         )
@@ -231,9 +231,9 @@ export const getFrontendStore = () => {
           const json = await response.json()
           throw new Error(json.message)
         }
-        store.update(state => {
+        store.update((state) => {
           state.layouts = state.layouts.filter(
-            layout => layout._id !== layoutToDelete._id
+            (layout) => layout._id !== layoutToDelete._id
           )
           if (layoutToDelete._id === state.selectedLayoutId) {
             state.selectedLayoutId = get(mainLayout)._id
@@ -243,7 +243,7 @@ export const getFrontendStore = () => {
       },
     },
     components: {
-      select: component => {
+      select: (component) => {
         if (!component) {
           return
         }
@@ -263,13 +263,13 @@ export const getFrontendStore = () => {
         }
 
         // Otherwise select the component
-        store.update(state => {
+        store.update((state) => {
           state.selectedComponentId = component._id
           state.currentView = "component"
           return state
         })
       },
-      getDefinition: componentName => {
+      getDefinition: (componentName) => {
         if (!componentName) {
           return null
         }
@@ -287,7 +287,7 @@ export const getFrontendStore = () => {
         // Generate default props
         let props = { ...presetProps }
         if (definition.settings) {
-          definition.settings.forEach(setting => {
+          definition.settings.forEach((setting) => {
             if (setting.defaultValue !== undefined) {
               props[setting.key] = setting.defaultValue
             }
@@ -367,7 +367,7 @@ export const getFrontendStore = () => {
 
         // Save components and update UI
         await store.actions.preview.saveSelected()
-        store.update(state => {
+        store.update((state) => {
           state.currentView = "component"
           state.selectedComponentId = componentInstance._id
           return state
@@ -380,7 +380,7 @@ export const getFrontendStore = () => {
 
         return componentInstance
       },
-      delete: async component => {
+      delete: async (component) => {
         if (!component) {
           return
         }
@@ -391,7 +391,7 @@ export const getFrontendStore = () => {
         const parent = findComponentParent(asset.props, component._id)
         if (parent) {
           parent._children = parent._children.filter(
-            child => child._id !== component._id
+            (child) => child._id !== component._id
           )
           store.actions.components.select(parent)
         }
@@ -404,7 +404,7 @@ export const getFrontendStore = () => {
         }
 
         // Update store with copied component
-        store.update(state => {
+        store.update((state) => {
           state.componentToPaste = cloneDeep(component)
           state.componentToPaste.isCut = cut
           return state
@@ -415,7 +415,7 @@ export const getFrontendStore = () => {
           const parent = findComponentParent(selectedAsset.props, component._id)
           if (parent) {
             parent._children = parent._children.filter(
-              child => child._id !== component._id
+              (child) => child._id !== component._id
             )
             store.actions.components.select(parent)
           }
@@ -423,7 +423,7 @@ export const getFrontendStore = () => {
       },
       paste: async (targetComponent, mode) => {
         let promises = []
-        store.update(state => {
+        store.update((state) => {
           // Stop if we have nothing to paste
           if (!state.componentToPaste) {
             return state
@@ -444,7 +444,7 @@ export const getFrontendStore = () => {
           if (cut) {
             state.componentToPaste = null
           } else {
-            const randomizeIds = component => {
+            const randomizeIds = (component) => {
               if (!component) {
                 return
               }
@@ -497,7 +497,7 @@ export const getFrontendStore = () => {
         }
         await store.actions.preview.saveSelected()
       },
-      updateCustomStyle: async style => {
+      updateCustomStyle: async (style) => {
         const selected = get(selectedComponent)
         selected._styles.custom = style
         await store.actions.preview.saveSelected()
@@ -507,7 +507,7 @@ export const getFrontendStore = () => {
         selected._styles = { normal: {}, hover: {}, active: {} }
         await store.actions.preview.saveSelected()
       },
-      updateTransition: async transition => {
+      updateTransition: async (transition) => {
         const selected = get(selectedComponent)
         if (transition == null || transition === "") {
           selected._transition = ""
@@ -522,7 +522,7 @@ export const getFrontendStore = () => {
           return
         }
         component[name] = value
-        store.update(state => {
+        store.update((state) => {
           state.selectedComponentId = component._id
           return state
         })
diff --git a/packages/builder/src/builderStore/store/hosting.js b/packages/builder/src/builderStore/store/hosting.js
index f180d4157a..d2112df862 100644
--- a/packages/builder/src/builderStore/store/hosting.js
+++ b/packages/builder/src/builderStore/store/hosting.js
@@ -17,18 +17,20 @@ export const getHostingStore = () => {
         api.get("/api/hosting/"),
         api.get("/api/hosting/urls"),
       ])
-      const [info, urls] = await Promise.all(responses.map(resp => resp.json()))
-      store.update(state => {
+      const [info, urls] = await Promise.all(
+        responses.map((resp) => resp.json())
+      )
+      store.update((state) => {
         state.hostingInfo = info
         state.appUrl = urls.app
         return state
       })
       return info
     },
-    save: async hostingInfo => {
+    save: async (hostingInfo) => {
       const response = await api.post("/api/hosting", hostingInfo)
       const revision = (await response.json()).rev
-      store.update(state => {
+      store.update((state) => {
         state.hostingInfo = {
           ...hostingInfo,
           _rev: revision,
@@ -38,10 +40,12 @@ export const getHostingStore = () => {
     },
     fetchDeployedApps: async () => {
       let deployments = await (await get("/api/hosting/apps")).json()
-      store.update(state => {
+      store.update((state) => {
         state.deployedApps = deployments
-        state.deployedAppNames = Object.values(deployments).map(app => app.name)
-        state.deployedAppUrls = Object.values(deployments).map(app => app.url)
+        state.deployedAppNames = Object.values(deployments).map(
+          (app) => app.name
+        )
+        state.deployedAppUrls = Object.values(deployments).map((app) => app.url)
         return state
       })
       return deployments
diff --git a/packages/builder/src/builderStore/store/localStorage.js b/packages/builder/src/builderStore/store/localStorage.js
index aaf10460b6..a09031498e 100644
--- a/packages/builder/src/builderStore/store/localStorage.js
+++ b/packages/builder/src/builderStore/store/localStorage.js
@@ -12,13 +12,13 @@ export const localStorageStore = (localStorageKey, initialValue) => {
   })
 
   // New store setter which updates the store and localstorage
-  const set = value => {
+  const set = (value) => {
     store.set(value)
     localStorage.setItem(localStorageKey, JSON.stringify(value))
   }
 
   // New store updater which updates the store and localstorage
-  const update = updaterFn => set(updaterFn(get(store)))
+  const update = (updaterFn) => set(updaterFn(get(store)))
 
   // Hydrates the store from localstorage
   const hydrate = () => {
diff --git a/packages/builder/src/builderStore/store/notifications.js b/packages/builder/src/builderStore/store/notifications.js
index 85e708e92a..933e4a1d12 100644
--- a/packages/builder/src/builderStore/store/notifications.js
+++ b/packages/builder/src/builderStore/store/notifications.js
@@ -6,7 +6,7 @@ export const notificationStore = writable({
 })
 
 export function send(message, type = "default") {
-  notificationStore.update(state => {
+  notificationStore.update((state) => {
     state.notifications = [
       ...state.notifications,
       { id: generate(), type, message },
@@ -16,8 +16,8 @@ export function send(message, type = "default") {
 }
 
 export const notifier = {
-  danger: msg => send(msg, "danger"),
-  warning: msg => send(msg, "warning"),
-  info: msg => send(msg, "info"),
-  success: msg => send(msg, "success"),
+  danger: (msg) => send(msg, "danger"),
+  warning: (msg) => send(msg, "warning"),
+  info: (msg) => send(msg, "info"),
+  success: (msg) => send(msg, "success"),
 }
diff --git a/packages/builder/src/builderStore/store/screenTemplates/index.js b/packages/builder/src/builderStore/store/screenTemplates/index.js
index 38ae434753..217426f489 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/index.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/index.js
@@ -3,7 +3,7 @@ import rowDetailScreen from "./rowDetailScreen"
 import rowListScreen from "./rowListScreen"
 import createFromScratchScreen from "./createFromScratchScreen"
 
-const allTemplates = tables => [
+const allTemplates = (tables) => [
   ...newRowScreen(tables),
   ...rowDetailScreen(tables),
   ...rowListScreen(tables),
@@ -18,7 +18,7 @@ const createTemplateOverride = (frontendState, create) => () => {
 }
 
 export default (frontendState, tables) => {
-  const enrichTemplate = template => ({
+  const enrichTemplate = (template) => ({
     ...template,
     create: createTemplateOverride(frontendState, template.create),
   })
diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
index 7788245d46..1599a07725 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
@@ -9,8 +9,8 @@ import {
   makeDatasourceFormComponents,
 } from "./utils/commonComponents"
 
-export default function(tables) {
-  return tables.map(table => {
+export default function (tables) {
+  return tables.map((table) => {
     return {
       name: `${table.name} - New`,
       create: () => createScreen(table),
@@ -19,14 +19,14 @@ export default function(tables) {
   })
 }
 
-export const newRowUrl = table => sanitizeUrl(`/${table.name}/new/row`)
+export const newRowUrl = (table) => sanitizeUrl(`/${table.name}/new/row`)
 export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE"
 
 function generateTitleContainer(table, formId) {
   return makeTitleContainer("New Row").addChild(makeSaveButton(table, formId))
 }
 
-const createScreen = table => {
+const createScreen = (table) => {
   const screen = new Screen()
     .component("@budibase/standard-components/container")
     .instanceName(`${table.name} - New`)
@@ -52,7 +52,7 @@ const createScreen = table => {
 
   // Add all form fields from this schema to the field group
   const datasource = { type: "table", tableId: table._id }
-  makeDatasourceFormComponents(datasource).forEach(component => {
+  makeDatasourceFormComponents(datasource).forEach((component) => {
     fieldGroup.addChild(component)
   })
 
diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
index 67a1d1c916..02889fa537 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
@@ -12,8 +12,8 @@ import {
   makeDatasourceFormComponents,
 } from "./utils/commonComponents"
 
-export default function(tables) {
-  return tables.map(table => {
+export default function (tables) {
+  return tables.map((table) => {
     return {
       name: `${table.name} - Detail`,
       create: () => createScreen(table),
@@ -23,7 +23,7 @@ export default function(tables) {
 }
 
 export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE"
-export const rowDetailUrl = table => sanitizeUrl(`/${table.name}/:id`)
+export const rowDetailUrl = (table) => sanitizeUrl(`/${table.name}/:id`)
 
 function generateTitleContainer(table, title, formId, repeaterId) {
   // have to override style for this, its missing margin
@@ -77,12 +77,10 @@ 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 => {
+const createScreen = (table) => {
   const provider = new Component("@budibase/standard-components/dataprovider")
     .instanceName(`Data Provider`)
     .customProps({
@@ -124,7 +122,7 @@ const createScreen = table => {
 
   // Add all form fields from this schema to the field group
   const datasource = { type: "table", tableId: table._id }
-  makeDatasourceFormComponents(datasource).forEach(component => {
+  makeDatasourceFormComponents(datasource).forEach((component) => {
     fieldGroup.addChild(component)
   })
 
diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
index 603c730508..390edfb143 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
@@ -4,8 +4,8 @@ import { Screen } from "./utils/Screen"
 import { Component } from "./utils/Component"
 import { makePropSafe } from "@budibase/string-templates"
 
-export default function(tables) {
-  return tables.map(table => {
+export default function (tables) {
+  return tables.map((table) => {
     return {
       name: `${table.name} - List`,
       create: () => createScreen(table),
@@ -15,7 +15,7 @@ export default function(tables) {
 }
 
 export const ROW_LIST_TEMPLATE = "ROW_LIST_TEMPLATE"
-export const rowListUrl = table => sanitizeUrl(`/${table.name}`)
+export const rowListUrl = (table) => sanitizeUrl(`/${table.name}`)
 
 function generateTitleContainer(table) {
   const newButton = new Component("@budibase/standard-components/button")
@@ -70,7 +70,7 @@ function generateTitleContainer(table) {
     .addChild(newButton)
 }
 
-const createScreen = table => {
+const createScreen = (table) => {
   const provider = new Component("@budibase/standard-components/dataprovider")
     .instanceName(`Data Provider`)
     .customProps({
@@ -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/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
index 19f950226c..18a777e509 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
@@ -178,7 +178,7 @@ export function makeDatasourceFormComponents(datasource) {
   const { schema } = getSchemaForDatasource(datasource, true)
   let components = []
   let fields = Object.keys(schema || {})
-  fields.forEach(field => {
+  fields.forEach((field) => {
     const fieldSchema = schema[field]
     // skip autocolumns
     if (fieldSchema.autocolumn) {
diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/sanitizeUrl.js b/packages/builder/src/builderStore/store/screenTemplates/utils/sanitizeUrl.js
index 96b7633e41..96e6b9df5d 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/sanitizeUrl.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/sanitizeUrl.js
@@ -1,7 +1,7 @@
-export default function(url) {
+export default function (url) {
   return url
     .split("/")
-    .map(part => {
+    .map((part) => {
       // if parameter, then use as is
       if (part.startsWith(":")) return part
       return encodeURIComponent(part.replace(/ /g, "-"))
diff --git a/packages/builder/src/builderStore/store/theme.js b/packages/builder/src/builderStore/store/theme.js
index 1ff326e173..2c3ccd857c 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/builderStore/storeUtils.js b/packages/builder/src/builderStore/storeUtils.js
index 6d0f0beab0..2fd1dae8c1 100644
--- a/packages/builder/src/builderStore/storeUtils.js
+++ b/packages/builder/src/builderStore/storeUtils.js
@@ -2,14 +2,14 @@
  * Recursively searches for a specific component ID
  */
 export const findComponent = (rootComponent, id) => {
-  return searchComponentTree(rootComponent, comp => comp._id === id)
+  return searchComponentTree(rootComponent, (comp) => comp._id === id)
 }
 
 /**
  * Recursively searches for a specific component type
  */
 export const findComponentType = (rootComponent, type) => {
-  return searchComponentTree(rootComponent, comp => comp._component === type)
+  return searchComponentTree(rootComponent, (comp) => comp._component === type)
 }
 
 /**
@@ -68,7 +68,7 @@ export const findAllMatchingComponents = (rootComponent, selector) => {
   }
   let components = []
   if (rootComponent._children) {
-    rootComponent._children.forEach(child => {
+    rootComponent._children.forEach((child) => {
       components = [
         ...components,
         ...findAllMatchingComponents(child, selector),
diff --git a/packages/builder/src/builderStore/uuid.js b/packages/builder/src/builderStore/uuid.js
index 149da83c68..9cddf638bc 100644
--- a/packages/builder/src/builderStore/uuid.js
+++ b/packages/builder/src/builderStore/uuid.js
@@ -1,7 +1,7 @@
 export function uuid() {
   // always want to make this start with a letter, as this makes it
   // easier to use with template string bindings in the client
-  return "cxxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, c => {
+  return "cxxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, (c) => {
     const r = (Math.random() * 16) | 0,
       v = c == "x" ? r : (r & 0x3) | 0x8
     return v.toString(16)
diff --git a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
index 8c3e2996c9..4e6a0d9c18 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,19 +63,19 @@
 
 <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}
@@ -89,7 +89,7 @@
         on:click={() => addBlockToAutomation(stepId, blockDefinition)} />
     {/each}
   </DropdownContainer>
-</DropdownMenu>
+</Popover>
 <Modal bind:this={webhookModal} width="30%">
   <CreateWebhookModal />
 </Modal>
@@ -100,32 +100,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/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index a00e65c69f..a385ad1307 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>
@@ -23,20 +25,20 @@
   on:click={() => onSelect(block)}>
   <header>
     {#if block.type === 'TRIGGER'}
-      <i class="ri-lightbulb-fill" />
+      <Icon name="Light" />
       <span>When this happens...</span>
     {:else if block.type === 'ACTION'}
-      <i class="ri-flashlight-fill" />
+      <Icon name="FlashOn" />
       <span>Do this...</span>
     {:else if block.type === 'LOGIC'}
-      <i class="ri-git-branch-line" />
+      <Icon name="Branch2" />
       <span>Only continue if...</span>
     {/if}
     <div class="label">
       {#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" />
+    <div on:click|stopPropagation={deleteStep}><Icon name="Close"/></div>
     {/if}
   </header>
   <hr />
@@ -52,9 +54,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 +79,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 +93,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..d91937b812 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,17 @@
 <ModalContent
   title="Create Automation"
   confirmText="Create"
+  size="L"
   onConfirm={createAutomation}
   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 +49,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..20fb152691 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
index bda233f9f2..897c0469e4 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
@@ -1,6 +1,12 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import { Input, TextArea, Heading, Spacer, Label } from "@budibase/bbui"
+  import {
+    Input,
+    TextArea,
+    Heading,
+    Layout,
+    DrawerContent,
+  } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { isValid } from "@budibase/string-templates"
   import { handlebarsCompletions } from "constants/completions"
@@ -44,45 +50,52 @@
   }
 </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>
+<DrawerContent>
+  <div slot="sidebar" class="list">
+    <Layout>
+      <div class="section">
+        <Heading size="S">Available bindings</Heading>
+        <Input extraThin placeholder="Search" bind:value={search} />
       </div>
-    {/each}
+      <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={() => 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}
+      </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={() => 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>
+    </Layout>
   </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." />
+      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
@@ -91,29 +104,17 @@
       </p>
     {/if}
   </div>
-</div>
+</DrawerContent>
 
 <style>
-  .container {
-    height: 40vh;
+  .list {
+    grid-gap: var(--spacing-s);
+    border-right: var(--border-light);
     overflow-y: auto;
+  }
+  .section {
     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;
+    grid-gap: var(--spacing-s);
   }
 
   .text {
@@ -159,21 +160,6 @@
     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;
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 1e2ee46cad..e096ccb85a 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -49,62 +49,64 @@
   }
 </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}
+<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 wide secondary on:click={() => webhookModal.show()}>
-    Set Up Webhook
-  </Button>
+  <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/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index bee56045ff..064a4665d9 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -19,30 +19,24 @@
   }
 </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>
+          <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}
@@ -57,8 +51,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..2793342962 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 {
@@ -46,16 +64,9 @@
         placeholder="Enter 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)} />
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..35e6a9855f 100644
--- a/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
@@ -5,11 +5,8 @@
   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..53d1efb330 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 || []
       })
     }
   }
@@ -48,7 +57,7 @@
   <CreateColumnButton />
   {#if schema && Object.keys(schema).length > 0}
     <CreateRowButton
-      title={isUsersTable ? 'Create New User' : 'Create New Row'}
+      title={isUsersTable ? 'Create user' : 'Create row'}
       modalContentComponent={isUsersTable ? CreateEditUser : CreateEditRow} />
     <CreateViewButton />
     <ManageAccessButton resourceId={$tables.selected?._id} />
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..7f160600ba 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"
@@ -21,33 +14,23 @@
 </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>
+  <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>
+  <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>
+  <LinkedRowSelector bind:linkedRows={value} schema={meta} />
 {:else if type === 'longform'}
-  <div>
-    <Label extraSmall grey>{label}</Label>
-    <RichText bind:value />
-  </div>
+  <TextArea {label} bind:value />
 {:else}
   <Input
-    thin
     {label}
     data-cy="{meta.name}-input"
     {type}
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 059fe1e123..4273089d89 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}`
     )
   }
 
@@ -141,15 +68,31 @@
       rows: selectedRows,
       type: "delete",
     })
-    data = data.filter(row => !selectedRows.includes(row))
-    notifier.success(`Successfully deleted ${selectedRows.length} rows`)
+    data = data.filter((row) => !selectedRows.includes(row))
+    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..1001e98ed3 100644
--- a/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
@@ -57,6 +57,7 @@
   tableId={view.tableId}
   {data}
   {loading}
+  allowEditing={!view?.calculation}
   bind:hideAutocolumns>
   <FilterButton {view} />
   <CalculateButton {view} />
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
index 0452491247..7316b1c69c 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
@@ -1,23 +1,20 @@
 <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..18bbef6122 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,14 +13,11 @@
   }
 </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"
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..e93c355404 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
@@ -1,23 +1,20 @@
 <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..e3fff01c9d 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
@@ -1,19 +1,21 @@
 <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..38dfcbf26a 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
@@ -1,37 +1,25 @@
 <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>
+    permissions={resourcePermissions} />
+</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/modals/CalculateModal.svelte b/packages/builder/src/components/backend/DataTable/modals/CalculateModal.svelte
new file mode 100644
index 0000000000..3eec950edb
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/modals/CalculateModal.svelte
@@ -0,0 +1,68 @@
+<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..1c3700c169 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,17 @@
     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 { getContext } from "svelte"
 
   const AUTO_COL = "auto"
   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,9 +57,10 @@
       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
@@ -81,46 +83,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 +129,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,58 +180,60 @@
   }
 </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_COL }]}
+    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'}
     <Input
-      thin
       type="number"
       label="Max Length"
       bind:value={field.constraints.length.maximum} />
@@ -245,64 +248,46 @@
     <DatePicker label="Latest" bind:value={field.constraints.datetime.latest} />
   {:else if field.type === 'number'}
     <Input
-      thin
       type="number"
       label="Min Value"
       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>
+    <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} />
+    <Input label={`Column name in other table`} 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>
+    <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.`}
@@ -310,45 +295,3 @@
   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>
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
index b50c12bc1f..98b858836f 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
@@ -1,6 +1,6 @@
 <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"
@@ -33,7 +33,7 @@
       return false
     }
 
-    notifier.success("Row saved successfully.")
+    notifications.success("Row saved successfully.")
     rows.save(rowResponse)
   }
 </script>
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
index 56935a9c7b..bfead2ade5 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,7 +67,7 @@
       return false
     }
 
-    notifier.success("User saved successfully.")
+    notifications.success("User saved successfully.")
     rows.save(rowResponse)
   }
 </script>
@@ -86,20 +87,18 @@
   <!-- 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..d70b51f4c5
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateViewModal.svelte
@@ -0,0 +1,36 @@
+<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..5cf33f8d3d 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.")
     }
   }
 
@@ -94,42 +94,34 @@
     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)} />
     <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..0344b3a925
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/modals/ExportModal.svelte
@@ -0,0 +1,37 @@
+<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..f2dd629348 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
   }
 
@@ -94,127 +102,91 @@
     return viewTable.schema[field].type === "number"
   }
 
-  const fieldChanged = filter => ev => {
+  const fieldChanged = (filter) => (ev) => {
     // 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="large"
+>
   {#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..f7bc5b5089
--- /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..cccc0f7259 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}
+      {#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/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
index 27a058cd5d..8f5d4012fc 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,16 @@
 
 <ModalContent
   title="Create Datasource"
+  size="large"
   confirmText="Create"
   onConfirm={saveDatasource}
   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>
+  <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/TableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
index 293f52b487..3335428b9d 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,7 +68,7 @@
   async function handleFile(evt) {
     const fileArray = Array.from(evt.target.files)
     if (fileArray.some(file => file.size >= FILE_SIZE_LIMIT)) {
-      notifier.danger(
+      notifications.error(
         `Files cannot exceed ${FILE_SIZE_LIMIT /
           BYTES_IN_MB}MB. Please try again with smaller files.`
       )
@@ -91,9 +91,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,20 +117,18 @@
     {#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'}
         </span>
@@ -124,16 +137,15 @@
           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 +177,10 @@
     display: none;
   }
 
+  .schema-fields {
+    margin-top: var(--spacing-xl);
+  }
+
   label {
     font-family: var(--font-sans);
     cursor: pointer;
@@ -201,11 +217,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..beb435f69f 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@@ -34,7 +34,7 @@
     {#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)}>
@@ -45,7 +45,7 @@
       {#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)}>
diff --git a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
index 5c9559088a..4462eb8099 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
@@ -105,27 +105,20 @@
     <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 +127,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..0c88741d5e 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -2,38 +2,34 @@
   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}`)
+    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 +38,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 +111,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..1bd9798fdb 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
@@ -1,115 +1,56 @@
 <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>
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
index e7723aba85..6f55c5ef48 100644
--- a/packages/builder/src/components/common/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/DrawerBindableInput.svelte
@@ -1,23 +1,21 @@
 <script>
-  import { Icon, Input, Drawer, Label, Body, Button } from "@budibase/bbui"
+  import { Icon, Input, Drawer, 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
 
+  const dispatch = createEventDispatcher()
   let bindingDrawer
-
   $: tempValue = value
   $: readableValue = runtimeToReadableBinding(bindings, value)
 
@@ -34,31 +32,25 @@
 <div class="control">
   <Input
     {label}
-    {thin}
     value={readableValue}
-    on:change={event => onChange(event.target.value)}
+    on:change={event => onChange(event.detail)}
     {placeholder} />
   <div class="icon" on:click={bindingDrawer.show}>
-    <Icon name="lightning" />
+    <Icon size="S" name="FlashOn" />
   </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>
+  <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
+    slot="body"
+    this={panel}
+    value={readableValue}
+    close={handleClose}
+    on:update={event => (tempValue = event.detail)}
+    bindableProperties={bindings} />
 </Drawer>
 
 <style>
@@ -68,24 +60,31 @@
   }
 
   .icon {
-    right: 2px;
-    bottom: 2px;
+    right: 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;
-    height: 40px;
+    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 {
-    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/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..d44b975a41 100644
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -1,14 +1,14 @@
 <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(
+    notifications.error(
       `Files cannot exceed ${fileSizeLimit /
         BYTES_IN_MB}MB. Please try again with smaller files.`
     )
@@ -24,4 +24,9 @@
   }
 </script>
 
-<Dropzone bind:files {processFiles} {handleFileTooLarge} />
+<Dropzone
+  bind:value
+  {label}
+  {...$$restProps}
+  {processFiles}
+  {handleFileTooLarge} />
diff --git a/packages/builder/src/components/common/LinkedRowSelector.svelte b/packages/builder/src/components/common/LinkedRowSelector.svelte
index 272d4fc4b7..a5e6bc8cee 100644
--- a/packages/builder/src/components/common/LinkedRowSelector.svelte
+++ b/packages/builder/src/components/common/LinkedRowSelector.svelte
@@ -42,27 +42,18 @@
 {: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>
+      value={linkedIds?.[0]}
+      options={rows}
+      getOptionLabel={getPrettyName}
+      getOptionValue={row => row._id}
+      on:change={e => (linkedIds = e.detail ? [e.detail] : [])}
+      {label} />
   {:else}
     <Multiselect
-      secondary
       bind:value={linkedIds}
       {label}
-      placeholder="Choose some options">
-      {#each rows as row}
-        <option value={row._id}>{getPrettyName(row)}</option>
-      {/each}
-    </Multiselect>
+      options={rows}
+      getOptionLabel={getPrettyName}
+      getOptionValue={row => row._id} />
   {/if}
 {/if}
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 0f000d7ca8..4e2e1f6e1d 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,18 @@
   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 +48,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 +97,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/deploy/CreateWebhookDeploymentModal.svelte b/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte
index 01ab529432..a7f5e38bb0 100644
--- a/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte
+++ b/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte
@@ -37,12 +37,13 @@
   {#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..21942727af 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>
@@ -148,13 +150,13 @@
 </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 +165,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 +186,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..391bf18086 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,66 @@
     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..9490773621 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)
@@ -30,7 +24,7 @@
     if (currentIndex === 0) {
       return
     }
-    const newChildren = parent._children.filter(c => c !== component)
+    const newChildren = parent._children.filter((c) => c !== component)
     newChildren.splice(currentIndex - 1, 0, component)
     parent._children = newChildren
     store.actions.preview.saveSelected()
@@ -46,7 +40,7 @@
     if (currentIndex === parent._children.length - 1) {
       return
     }
-    const newChildren = parent._children.filter(c => c !== component)
+    const newChildren = parent._children.filter((c) => c !== component)
     newChildren.splice(currentIndex + 1, 0, component)
     parent._children = newChildren
     store.actions.preview.saveSelected()
@@ -66,65 +60,55 @@
     store.actions.components.copy(component, cut)
   }
 
-  const pasteComponent = mode => {
+  const pasteComponent = (mode) => {
     // lives in store - also used by drag drop
     store.actions.components.paste(component, mode)
   }
 </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/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..18a1367a7a 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
@@ -35,11 +35,11 @@
     route.subpaths[selectedScreen?.routing?.route] !== undefined
   $: routeOpened = routeManuallyOpened || routeSelected || hasSearchMatch
 
-  const changeScreen = screenId => {
+  const changeScreen = (screenId) => {
     store.actions.screens.select(screenId)
   }
 
-  const getAllScreens = route => {
+  const getAllScreens = (route) => {
     let screens = []
     Object.entries(route.subpaths).forEach(([route, subpath]) => {
       Object.entries(subpath.screens).forEach(([role, id]) => {
@@ -51,7 +51,7 @@
 
   const getFilteredScreens = (screens, searchString) => {
     return screens.filter(
-      screen => !searchString || screen.route.includes(searchString)
+      (screen) => !searchString || screen.route.includes(searchString)
     )
   }
 
@@ -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..899551d5bc 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
@@ -1,18 +1,14 @@
 <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)
+  $: screen = $allScreens.find((screen) => screen._id === screenId)
 
   const deleteScreen = () => {
     try {
@@ -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..31ac3032f9 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/dragDropStore.js
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/dragDropStore.js
@@ -13,12 +13,12 @@ export const DropPosition = {
   INSIDE: "inside",
 }
 
-export default function() {
+export default function () {
   const store = writable({})
 
   store.actions = {
-    dragstart: component => {
-      store.update(state => {
+    dragstart: (component) => {
+      store.update((state) => {
         state.dragged = component
         return state
       })
@@ -29,7 +29,7 @@ export default function() {
       canHaveChildrenButIsEmpty,
       mousePosition,
     }) => {
-      store.update(state => {
+      store.update((state) => {
         state.targetComponent = component
         // only allow dropping inside when container is empty
         // if container has children, drag over them
@@ -65,7 +65,7 @@ export default function() {
       })
     },
     reset: () => {
-      store.update(state => {
+      store.update((state) => {
         state.dropPosition = ""
         state.targetComponent = null
         state.dragged = null
@@ -85,7 +85,7 @@ export default function() {
       }
       // Stop if the target is a child of source
       const path = findComponentPath(state.dragged, state.targetComponent._id)
-      const ids = path.map(component => component._id)
+      const ids = path.map((component) => component._id)
       if (ids.includes(state.targetComponent._id)) {
         return
       }
diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
index 70e2306dcf..4f73791820 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,24 +26,22 @@
   ]
 
   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 updateAccessRole = (event) => {
+    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
     // back the current role again because the same screen ID is still selected
     const firstValidScreenId = $allScreens.find(
-      screen => screen.routing.roleId === role
+      (screen) => screen.routing.roleId === role
     )?._id
     if (firstValidScreenId) {
       store.actions.screens.select(firstValidScreenId)
@@ -53,7 +50,7 @@
     // Otherwise clear the selected screen ID so that the first new valid screen
     // can be selected by ComponentNavigationTree
     else {
-      store.update(state => {
+      store.update((state) => {
         state.selectedScreenId = null
         return state
       })
@@ -68,53 +65,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 +115,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 +134,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..1253ab91bf 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,22 @@
   <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} />
+  <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
index 6656d23eac..f8fcce0d24 100644
--- a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
@@ -1,6 +1,6 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import { Input, TextArea, Heading, Spacer, Label } from "@budibase/bbui"
+  import { Search, TextArea, Heading, Label, DrawerContent, Layout } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { isValid } from "@budibase/string-templates"
   import {
@@ -57,16 +57,15 @@
   }
 </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 />
+<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 =>
+          {#each context.filter((context) =>
             context.readableBinding.match(searchRgx)
           ) as { readableBinding }}
             <li on:click={() => addToText(readableBinding)}>
@@ -74,13 +73,13 @@
             </li>
           {/each}
         </ul>
-      {/if}
-      <Spacer small />
-      {#if instance}
-        <Heading extraSmall>Components</Heading>
-        <Spacer small />
+      </section>
+    {/if}
+    {#if instance}
+      <section>
+        <Heading size="XS">Components</Heading>
         <ul>
-          {#each instance.filter(instance =>
+          {#each instance.filter((instance) =>
             instance.readableBinding.match(searchRgx)
           ) as { readableBinding }}
             <li on:click={() => addToText(readableBinding)}>
@@ -88,12 +87,12 @@
             </li>
           {/each}
         </ul>
-      {/if}
-      <Spacer small />
-      <Heading extraSmall>Helpers</Heading>
-      <Spacer small />
+      </section>
+    {/if}
+    <section>
+      <Heading size="XS">Helpers</Heading>
       <ul>
-        {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
+        {#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>
@@ -105,50 +104,32 @@
           </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>
+    </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>
-</div>
+</DrawerContent>
 
 <style>
-  .container {
-    height: 100%;
+  .main {
+    padding: var(--spacing-m)
+  }
+  section {
     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;
+    grid-gap: var(--spacing-s);
   }
   ul {
     list-style: none;
@@ -160,14 +141,15 @@
   li {
     display: flex;
     font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-s);
     color: var(--grey-7);
-    padding: var(--spacing-m) 0;
+    padding: var(--spacing-m);
     margin: auto 0px;
     align-items: center;
     cursor: pointer;
-    border: var(--border-light);
+    border-top: var(--border-light);
     border-width: 1px 0 1px 0;
+    border-radius: 4px;
   }
 
   pre,
@@ -176,19 +158,14 @@
   }
 
   li:hover {
-    color: var(--ink);
-    font-weight: 500;
+    background-color: var(--grey-2);
+    cursor: pointer;
   }
 
   li:active {
     color: var(--blue);
   }
 
-  .drawer-contents {
-    height: 40vh;
-    overflow-y: auto;
-  }
-
   .syntax-error {
     padding-top: var(--spacing-m);
     color: var(--red);
diff --git a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
index cf1816dc62..66802e5985 100644
--- a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
@@ -63,7 +63,7 @@
           <div class="custom-styles">
             <TextArea
               value={componentInstance._styles.custom}
-              on:change={event => onCustomStyleChanged(event.target.value)}
+              on:change={event => onCustomStyleChanged(event.detail)}
               placeholder="Enter some CSS..." />
           </div>
         </DetailSummary>
@@ -79,15 +79,11 @@
     <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 +101,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..3d0209b4d3 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,46 @@
   }
 </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/DataProviderSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
index e773ba5e5d..3581658b0d 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
@@ -13,13 +13,9 @@
   )
 </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..579e612f0e 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,92 +95,75 @@
   }
 </script>
 
-<div class="container">
-  <div
-    class="dropdownbutton"
-    bind:this={anchorRight}
-    on:click={dropdownRight.show}>
-    <span>{value?.label ?? 'Choose option'}</span>
-    <Icon name="arrowdown" />
-  </div>
+<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>
+      <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}
@@ -190,22 +176,18 @@
     </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 +196,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 +218,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..dfd8475d60 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,19 +19,21 @@
   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 =
     selectedAction &&
-    actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_KEY]).component
+    actionTypes.find((t) => t.name === selectedAction[EVENT_TYPE_KEY]).component
 
   // Select the first action if we delete an action
   $: {
@@ -32,26 +42,25 @@
     }
   }
 
-  const deleteAction = index => {
+  const deleteAction = (index) => {
     actions.splice(index, 1)
     actions = actions
   }
 
-  const addAction = actionType => () => {
+  const addAction = (actionType) => () => {
     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 => () => {
+  const selectAction = (action) => () => {
     selectedAction = 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..97a8654971 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>
+<Button secondary 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>
+  <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..d7ec0e8dd9 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
@@ -7,18 +7,17 @@
 
   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
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..3d4dd7fb38 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"
@@ -8,9 +8,9 @@
 
   export let parameters
 
-  $: query = $queries.list.find(q => q._id === parameters.queryId)
+  $: query = $queries.list.find((q) => q._id === parameters.queryId)
   $: datasource = $datasources.list.find(
-    ds => ds._id === parameters.datasourceId
+    (ds) => ds._id === parameters.datasourceId
   )
   $: bindableProperties = getBindableProperties(
     $currentAsset,
@@ -18,42 +18,44 @@
   )
 
   function fetchQueryDefinition(query) {
-    const source = $datasources.list.find(ds => ds._id === query.datasourceId)
+    const source = $datasources.list.find((ds) => ds._id === query.datasourceId)
       .source
     return $integrations[source].query[query.queryVerb]
   }
 </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/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/SaveFields.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
index fb5cb3ef16..400de67a08 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,8 +1,7 @@
 <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"
 
@@ -21,11 +20,11 @@
   )
 
   const addField = () => {
-    fields = [...fields.filter(field => field[0]), ["", ""]]
+    fields = [...fields.filter((field) => field[0]), ["", ""]]
   }
 
-  const removeField = name => {
-    fields = fields.filter(field => field[0] !== name)
+  const removeField = (name) => {
+    fields = fields.filter((field) => field[0] !== name)
   }
 
   const updateFieldValue = (idx, value) => {
@@ -38,10 +37,10 @@
     fields = fields
   }
 
-  const onChange = fields => {
+  const onChange = (fields) => {
     const newParamFields = {}
     fields
-      .filter(field => field[0])
+      .filter((field) => field[0])
       .forEach(([field, value]) => {
         newParamFields[field] = value
       })
@@ -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..9193713a07 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,46 +15,48 @@
     $store.selectedComponentId
   )
   $: schemaFields = getSchemaFields(parameters?.tableId)
-  $: tableOptions = $tables || []
+  $: tableOptions = $tables.list || []
 
-  const getSchemaFields = tableId => {
+  const getSchemaFields = (tableId) => {
     const { schema } = getSchemaForDatasource({ type: "table", tableId })
     return Object.values(schema || {})
   }
 
-  const onFieldsChanged = e => {
+  const onFieldsChanged = (e) => {
     parameters.fields = e.detail
   }
 </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..7362d6920f 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
@@ -75,17 +75,13 @@
 
     {#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" />
     {/if}
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..7e79e5ce4f 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,18 @@
 
 <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..dc0a739355 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 { 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 onChange = () => {}
   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>
 
-{#if multiselect}
-  <MultiOptionSelect {value} {onChange} {options} {placeholder} />
-{:else}
-  <OptionSelect {value} {onChange} {options} {placeholder} />
-{/if}
+<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..12b3c395bc 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,
@@ -18,7 +18,7 @@
 
   $: schemaFields = getSchemaFields(componentInstance)
 
-  const getSchemaFields = component => {
+  const getSchemaFields = (component) => {
     const datasource = getDatasourceForProvider($currentAsset, component)
     const { schema } = getSchemaForDatasource(datasource)
     return Object.values(schema || {})
@@ -26,23 +26,21 @@
 
   const saveFilter = async () => {
     dispatch("change", tempValue)
-    notifier.success("Filters saved.")
+    notifications.success("Filters saved.")
     drawer.hide()
   }
 
-  const onFieldsChanged = event => {
+  const onFieldsChanged = (event) => {
     tempValue = event.detail
   }
 </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/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..406dc16d50 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,7 +119,7 @@
 <div bind:this={buttonAnchor}>
   <Button secondary small on:click={dropdown.show}>{displayValue}</Button>
 </div>
-<DropdownMenu
+<Popover
   bind:this={dropdown}
   on:open={setSelectedUI}
   anchor={buttonAnchor}>
@@ -187,7 +187,7 @@
       </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..4e0a2c3f67 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LayoutSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LayoutSelect.svelte
@@ -5,9 +5,9 @@
   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..59aff93be1 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@@ -87,25 +87,20 @@
       class="icon"
       data-cy={`${key}-binding-button`}
       on:click={bindingDrawer.show}>
-      <Icon name="lightning" />
+      <Icon size="S" name="FlashOn" />
     </div>
     <Drawer bind:this={bindingDrawer} title={capitalise(key)}>
-      <div slot="description">
-        <Body extraSmall grey>
+      <svelte:fragment slot="description">
           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>
+      <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 +129,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/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..d8de89a92a 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RoleSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RoleSelect.svelte
@@ -5,9 +5,9 @@
   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..fc8e42b95e 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,
@@ -85,11 +80,11 @@
     "field/link": RelationshipFieldSelect,
   }
 
-  const getControl = type => {
+  const getControl = (type) => {
     return controlMap[type]
   }
 
-  const canRenderControl = setting => {
+  const canRenderControl = (setting) => {
     const control = getControl(setting?.type)
     if (!control) {
       return false
@@ -100,7 +95,7 @@
     return true
   }
 
-  const onInstanceNameChange = name => {
+  const onInstanceNameChange = (name) => {
     onChange("_instanceName", name)
   }
 
@@ -108,13 +103,13 @@
     const form = findClosestMatchingComponent(
       $currentAsset.props,
       componentInstance._id,
-      component => component._component.endsWith("/form")
+      (component) => component._component.endsWith("/form")
     )
     const dataSource = form?.dataSource
     const fields = makeDatasourceFormComponents(dataSource)
     onChange(
       "_children",
-      fields.map(field => field.json())
+      fields.map((field) => field.json())
     )
   }
 </script>
@@ -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 }} />
+          onChange={(val) => onChange(setting.key, val)}
+          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/FeedbackNavLink.svelte b/packages/builder/src/components/feedback/FeedbackNavLink.svelte
index 5b7a2faf2a..a0450ca37e 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"
 
@@ -13,7 +13,7 @@
 
   onMount(() => {
     const interval = setInterval(() => {
-      store.update(state => {
+      store.update((state) => {
         state.highlightFeedbackIcon = analytics.highlightFeedbackIcon()
         return state
       })
@@ -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..aa64965eaf 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,15 @@
 <!-- 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..0780b6939a 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"
 
@@ -134,7 +134,7 @@
 
     editor = CodeMirror.fromTextArea(refs.editor, opts)
 
-    editor.on("change", instance => {
+    editor.on("change", (instance) => {
       if (!updating_externally) {
         const value = instance.getValue()
         dispatch("change", { value })
@@ -160,13 +160,12 @@
   }
 
   function sleep(ms) {
-    return new Promise(fulfil => setTimeout(fulfil, ms))
+    return new Promise((fulfil) => setTimeout(fulfil, ms))
   }
 </script>
 
 {#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 +176,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..4c3532abee 100644
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Body, Button, Input, Heading, Spacer } from "@budibase/bbui"
+  import { Icon, Body, Button, Input, Heading, Layout } from "@budibase/bbui"
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
@@ -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} />
+          on:change={(evt) => onBindingChange(parameter.name, evt.detail)}
+          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..73b701082f 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)
-
+  $: 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,22 +79,22 @@
       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
-      fields = json.schemaFields.map(field => ({
+      fields = json.schemaFields.map((field) => ({
         name: field,
         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/login/LoginForm.svelte b/packages/builder/src/components/login/LoginForm.svelte
index 888054df1b..405d429e7f 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,51 @@
         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/Link.svelte b/packages/builder/src/components/settings/Link.svelte
index 41e09104f9..fdfc8bb613 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>
@@ -9,7 +9,7 @@
   class="topnavitemright settings"
   data-cy="settings-icon"
   on:click={modal.show}>
-  <i class="ri-settings-3-line" />
+  <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..5e69489830 100644
--- a/packages/builder/src/components/settings/SettingsModal.svelte
+++ b/packages/builder/src/components/settings/SettingsModal.svelte
@@ -1,28 +1,6 @@
 <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
@@ -30,9 +8,17 @@
   showConfirmButton={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..d971f01764 100644
--- a/packages/builder/src/components/settings/ThemeEditor.svelte
+++ b/packages/builder/src/components/settings/ThemeEditor.svelte
@@ -1,54 +1,11 @@
 <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..b7a6d4e6ad 100644
--- a/packages/builder/src/components/settings/ThemeEditorDropdown.svelte
+++ b/packages/builder/src/components/settings/ThemeEditorDropdown.svelte
@@ -1,32 +1,23 @@
 <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 +31,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..8f9945e6d3 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,12 @@
 
 <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">
+  <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..b9643e9b76 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 = ""
@@ -23,16 +23,13 @@
     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="" />
   <div class="buttons">
     <Button
-      primary
+      warning
       disabled={value !== 'DELETE' || loading}
-      red
       on:click={deleteApp}>
       Delete Entire App
     </Button>
diff --git a/packages/builder/src/components/settings/tabs/General.svelte b/packages/builder/src/components/settings/tabs/General.svelte
index f670fcdbb4..a556b0b855 100644
--- a/packages/builder/src/components/settings/tabs/General.svelte
+++ b/packages/builder/src/components/settings/tabs/General.svelte
@@ -80,25 +80,19 @@
 
 <div class="container">
   <Input
-    on:save={e => updateApplication({ name: e.detail })}
-    thin
-    edit
-    bind:value={$store.name}
-    bind:error={nameError}
+    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}
+      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" />
 </div>
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..357214a137 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -1,112 +1,71 @@
 <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",
           "App with same name already exists. Please try another app name.",
-          value =>
+          (value) =>
             !existingAppNames.some(
-              appName => appName.toLowerCase() === value.toLowerCase()
+              (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/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..ffb963d465 100644
--- a/packages/builder/src/components/start/Steps/Info.svelte
+++ b/packages/builder/src/components/start/Steps/Info.svelte
@@ -1,21 +1,24 @@
 <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
 
   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.`
+    if (fileArray.some((file) => file.size >= FILE_SIZE_LIMIT)) {
+      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..6fa1750976 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/completions.js b/packages/builder/src/constants/completions.js
index 32de934324..7cee222046 100644
--- a/packages/builder/src/constants/completions.js
+++ b/packages/builder/src/constants/completions.js
@@ -3,7 +3,7 @@ import { getManifest } from "@budibase/string-templates"
 export function handlebarsCompletions() {
   const manifest = getManifest()
 
-  return Object.keys(manifest).flatMap(key =>
+  return Object.keys(manifest).flatMap((key) =>
     Object.entries(manifest[key]).map(([helperName, helperConfig]) => ({
       text: helperName,
       path: helperName,
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/helpers.js b/packages/builder/src/helpers.js
index 89c7a0a6aa..8de210c159 100644
--- a/packages/builder/src/helpers.js
+++ b/packages/builder/src/helpers.js
@@ -1,6 +1,6 @@
 import { last, flow } from "lodash/fp"
 
-export const buildStyle = styles => {
+export const buildStyle = (styles) => {
   let str = ""
   for (let s in styles) {
     if (styles[s]) {
@@ -11,14 +11,15 @@ export const buildStyle = styles => {
   return str
 }
 
-export const convertCamel = str => {
-  return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
+export const convertCamel = (str) => {
+  return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
 }
 
 export const pipe = (arg, funcs) => flow(funcs)(arg)
 
-export const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
+export const capitalise = (s) =>
+  s.substring(0, 1).toUpperCase() + s.substring(1)
 
-export const get_name = s => (!s ? "" : last(s.split("/")))
+export const get_name = (s) => (!s ? "" : last(s.split("/")))
 
-export const get_capitalised_name = name => pipe(name, [get_name, capitalise])
+export const get_capitalised_name = (name) => pipe(name, [get_name, capitalise])
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..b2165efd89 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`)
@@ -59,15 +63,20 @@
             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 />
@@ -125,14 +134,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 +152,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 +185,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 +195,7 @@
   }
 
   .home-logo img {
-    height: 40px;
-  }
-  span:first-letter {
-    text-transform: capitalize;
+    height: 32px;
   }
 
   i {
@@ -220,4 +212,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..18f81114b2 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,29 @@
 <!-- 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 +65,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..072151cc48 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,29 +1,29 @@
 <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
 
-  $: datasource = $datasources.list.find(ds => ds._id === $datasources.selected)
+  $: datasource = $datasources.list.find(
+    (ds) => ds._id === $datasources.selected
+  )
   $: integration = datasource && $integrations[datasource.source]
 
   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 +32,7 @@
 
   $beforeUrlChange((event, store) => {
     if (unsaved) {
-      notifier.danger(
+      notifications.error(
         "Unsaved changes. Please save your datasource configuration before leaving."
       )
       return false
@@ -43,83 +43,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}
+        {#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 +106,7 @@
   }
 
   .container {
+    width: 100%;
     border-radius: var(--border-radius-m);
     margin: 0 auto;
   }
@@ -150,7 +128,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]/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..f4f1eb15c8 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,27 @@
         <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 +64,6 @@
     grid-template-columns: 260px 1fr;
     height: 100%;
     width: 100%;
-    background: var(--grey-1);
   }
 
   .login {
@@ -106,4 +105,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/auth.js b/packages/builder/src/stores/backend/auth.js
index 29dd6dcdd0..a2548a3deb 100644
--- a/packages/builder/src/stores/backend/auth.js
+++ b/packages/builder/src/stores/backend/auth.js
@@ -13,12 +13,12 @@ export function createAuthStore() {
   const { subscribe, set } = writable(null)
 
   checkAuth()
-    .then(user => set({ user }))
+    .then((user) => set({ user }))
     .catch(() => set({ user: null }))
 
   return {
     subscribe,
-    login: async creds => {
+    login: async (creds) => {
       const response = await api.post(`/api/admin/auth`, creds)
       const json = await response.json()
       if (response.status === 200) {
@@ -36,7 +36,7 @@ export function createAuthStore() {
       await response.json()
       set({ user: null })
     },
-    createUser: async user => {
+    createUser: async (user) => {
       const response = await api.post(`/api/admin/users`, user)
       if (response.status !== 200) {
         throw "Unable to create user"
diff --git a/packages/builder/src/stores/backend/datasources.js b/packages/builder/src/stores/backend/datasources.js
index ff634c0185..563d3a98dd 100644
--- a/packages/builder/src/stores/backend/datasources.js
+++ b/packages/builder/src/stores/backend/datasources.js
@@ -21,19 +21,19 @@ export function createDatasourcesStore() {
     fetch: async () => {
       const response = await api.get(`/api/datasources`)
       const json = await response.json()
-      update(state => ({ ...state, list: json }))
+      update((state) => ({ ...state, list: json }))
       return json
     },
-    select: async datasourceId => {
-      update(state => ({ ...state, selected: datasourceId }))
-      queries.update(state => ({ ...state, selected: null }))
+    select: async (datasourceId) => {
+      update((state) => ({ ...state, selected: datasourceId }))
+      queries.update((state) => ({ ...state, selected: null }))
     },
-    save: async datasource => {
+    save: async (datasource) => {
       const response = await api.post("/api/datasources", datasource)
       const json = await response.json()
 
-      update(state => {
-        const currentIdx = state.list.findIndex(ds => ds._id === json._id)
+      update((state) => {
+        const currentIdx = state.list.findIndex((ds) => ds._id === json._id)
 
         const sources = state.list
 
@@ -47,13 +47,13 @@ export function createDatasourcesStore() {
       })
       return json
     },
-    delete: async datasource => {
+    delete: async (datasource) => {
       const response = await api.delete(
         `/api/datasources/${datasource._id}/${datasource._rev}`
       )
-      update(state => {
+      update((state) => {
         const sources = state.list.filter(
-          existing => existing._id !== datasource._id
+          (existing) => existing._id !== datasource._id
         )
         return { list: sources, selected: null }
       })
diff --git a/packages/builder/src/stores/backend/permissions.js b/packages/builder/src/stores/backend/permissions.js
index 9172210872..8d84e6d74b 100644
--- a/packages/builder/src/stores/backend/permissions.js
+++ b/packages/builder/src/stores/backend/permissions.js
@@ -6,7 +6,7 @@ export function createPermissionStore() {
 
   return {
     subscribe,
-    forResource: async resourceId => {
+    forResource: async (resourceId) => {
       const response = await api.get(`/api/permission/${resourceId}`)
       const json = await response.json()
       return json
diff --git a/packages/builder/src/stores/backend/queries.js b/packages/builder/src/stores/backend/queries.js
index 3870b7ec96..2eed72a635 100644
--- a/packages/builder/src/stores/backend/queries.js
+++ b/packages/builder/src/stores/backend/queries.js
@@ -17,13 +17,13 @@ export function createQueriesStore() {
     fetch: async () => {
       const response = await api.get(`/api/queries`)
       const json = await response.json()
-      update(state => ({ ...state, list: json }))
+      update((state) => ({ ...state, list: json }))
       return json
     },
     save: async (datasourceId, query) => {
       const _integrations = get(integrations)
       const dataSource = get(datasources).list.filter(
-        ds => ds._id === datasourceId
+        (ds) => ds._id === datasourceId
       )
       // check if readable attribute is found
       if (dataSource.length !== 0) {
@@ -39,8 +39,10 @@ export function createQueriesStore() {
         throw new Error("Failed saving query.")
       }
       const json = await response.json()
-      update(state => {
-        const currentIdx = state.list.findIndex(query => query._id === json._id)
+      update((state) => {
+        const currentIdx = state.list.findIndex(
+          (query) => query._id === json._id
+        )
 
         const queries = state.list
 
@@ -53,16 +55,19 @@ export function createQueriesStore() {
       })
       return json
     },
-    select: query => {
-      update(state => ({ ...state, selected: query._id }))
-      datasources.update(state => ({ ...state, selected: query.datasourceId }))
+    select: (query) => {
+      update((state) => ({ ...state, selected: query._id }))
+      datasources.update((state) => ({
+        ...state,
+        selected: query.datasourceId,
+      }))
     },
-    delete: async query => {
+    delete: async (query) => {
       const response = await api.delete(
         `/api/queries/${query._id}/${query._rev}`
       )
-      update(state => {
-        state.list = state.list.filter(existing => existing._id !== query._id)
+      update((state) => {
+        state.list = state.list.filter((existing) => existing._id !== query._id)
         if (state.selected === query._id) {
           state.selected = null
         }
diff --git a/packages/builder/src/stores/backend/roles.js b/packages/builder/src/stores/backend/roles.js
index 1a1a9c04c5..782036aefe 100644
--- a/packages/builder/src/stores/backend/roles.js
+++ b/packages/builder/src/stores/backend/roles.js
@@ -9,12 +9,12 @@ export function createRolesStore() {
     fetch: async () => {
       set(await getRoles())
     },
-    delete: async role => {
+    delete: async (role) => {
       const response = await api.delete(`/api/roles/${role._id}/${role._rev}`)
-      update(state => state.filter(existing => existing._id !== role._id))
+      update((state) => state.filter((existing) => existing._id !== role._id))
       return response
     },
-    save: async role => {
+    save: async (role) => {
       const response = await api.post("/api/roles", role)
       set(await getRoles())
       return response
diff --git a/packages/builder/src/stores/backend/tables.js b/packages/builder/src/stores/backend/tables.js
index faecf0d753..52e0a914c2 100644
--- a/packages/builder/src/stores/backend/tables.js
+++ b/packages/builder/src/stores/backend/tables.js
@@ -10,17 +10,17 @@ export function createTablesStore() {
   async function fetch() {
     const tablesResponse = await api.get(`/api/tables`)
     const tables = await tablesResponse.json()
-    update(state => ({ ...state, list: tables }))
+    update((state) => ({ ...state, list: tables }))
   }
 
   async function select(table) {
     if (!table) {
-      update(state => ({
+      update((state) => ({
         ...state,
         selected: {},
       }))
     } else {
-      update(state => ({
+      update((state) => ({
         ...state,
         selected: table,
         draft: cloneDeep(table),
@@ -31,7 +31,7 @@ export function createTablesStore() {
 
   async function save(table) {
     const updatedTable = cloneDeep(table)
-    const oldTable = get(store).list.filter(t => t._id === table._id)[0]
+    const oldTable = get(store).list.filter((t) => t._id === table._id)[0]
 
     const fieldNames = []
     // update any renamed schema keys to reflect their names
@@ -78,16 +78,16 @@ export function createTablesStore() {
         draft: {},
       })
     },
-    delete: async table => {
+    delete: async (table) => {
       await api.delete(`/api/tables/${table._id}/${table._rev}`)
-      update(state => ({
+      update((state) => ({
         ...state,
-        list: state.list.filter(existing => existing._id !== table._id),
+        list: state.list.filter((existing) => existing._id !== table._id),
         selected: {},
       }))
     },
     saveField: ({ originalName, field, primaryDisplay = false, indexes }) => {
-      update(state => {
+      update((state) => {
         // delete the original if renaming
         // need to handle if the column had no name, empty string
         if (originalName || originalName === "") {
@@ -115,8 +115,8 @@ export function createTablesStore() {
         return state
       })
     },
-    deleteField: field => {
-      update(state => {
+    deleteField: (field) => {
+      update((state) => {
         delete state.draft.schema[field.name]
         save(state.draft)
         return state
diff --git a/packages/builder/src/stores/backend/views.js b/packages/builder/src/stores/backend/views.js
index d6497bf871..b45f0aa4ed 100644
--- a/packages/builder/src/stores/backend/views.js
+++ b/packages/builder/src/stores/backend/views.js
@@ -10,17 +10,17 @@ export function createViewsStore() {
 
   return {
     subscribe,
-    select: async view => {
-      update(state => ({
+    select: async (view) => {
+      update((state) => ({
         ...state,
         selected: view,
       }))
     },
-    delete: async view => {
+    delete: async (view) => {
       await api.delete(`/api/views/${view}`)
       await tables.fetch()
     },
-    save: async view => {
+    save: async (view) => {
       const response = await api.post(`/api/views`, view)
       const json = await response.json()
 
@@ -30,14 +30,14 @@ export function createViewsStore() {
       }
 
       const viewTable = get(tables).list.find(
-        table => table._id === view.tableId
+        (table) => table._id === view.tableId
       )
 
       if (view.originalName) delete viewTable.views[view.originalName]
       viewTable.views[view.name] = viewMeta
       await tables.save(viewTable)
 
-      update(state => ({ ...state, selected: viewMeta }))
+      update((state) => ({ ...state, selected: viewMeta }))
     },
   }
 }
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..b45f6d8c8f 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -882,13 +882,6 @@
   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==
-  dependencies:
-    ag-grid-community "^24.0.0"
-
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -1318,6 +1311,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 +1337,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 +1561,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"
diff --git a/packages/cli/src/hosting/makeEnv.js b/packages/cli/src/hosting/makeEnv.js
index 318a72def1..ee14fd5e31 100644
--- a/packages/cli/src/hosting/makeEnv.js
+++ b/packages/cli/src/hosting/makeEnv.js
@@ -61,7 +61,7 @@ module.exports.make = async (inputs = {}) => {
   )
 }
 
-module.exports.get = property => {
+module.exports.get = (property) => {
   const props = fs.readFileSync(FILE_PATH, "utf8").split(property)
   if (props[0].charAt(0) === "=") {
     property = props[0]
diff --git a/packages/cli/src/index.js b/packages/cli/src/index.js
index 6693446b39..13e5386b59 100644
--- a/packages/cli/src/index.js
+++ b/packages/cli/src/index.js
@@ -17,6 +17,6 @@ async function init() {
   await program.parseAsync(process.argv)
 }
 
-init().catch(err => {
+init().catch((err) => {
   console.error(`Unexpected error - `, err)
 })
diff --git a/packages/cli/src/questions.js b/packages/cli/src/questions.js
index ea0c412a60..d363c32790 100644
--- a/packages/cli/src/questions.js
+++ b/packages/cli/src/questions.js
@@ -1,6 +1,6 @@
 const inquirer = require("inquirer")
 
-exports.confirmation = async question => {
+exports.confirmation = async (question) => {
   const config = {
     type: "confirm",
     message: question,
@@ -27,7 +27,7 @@ exports.number = async (question, defaultNumber) => {
     type: "input",
     name: "number",
     message: question,
-    validate: value => {
+    validate: (value) => {
       let valid = !isNaN(parseFloat(value))
       return valid || "Please enter a number"
     },
diff --git a/packages/cli/src/structures/Command.js b/packages/cli/src/structures/Command.js
index a8d24566be..6d7da1a206 100644
--- a/packages/cli/src/structures/Command.js
+++ b/packages/cli/src/structures/Command.js
@@ -34,7 +34,7 @@ class Command {
       "--help",
       getSubHelpDescription(`Get help with ${this.command} options`)
     )
-    command.action(async options => {
+    command.action(async (options) => {
       try {
         let executed = false
         for (let opt of thisCmd.opts) {
diff --git a/packages/cli/src/utils.js b/packages/cli/src/utils.js
index f61636389d..9da1eeeefa 100644
--- a/packages/cli/src/utils.js
+++ b/packages/cli/src/utils.js
@@ -21,23 +21,23 @@ exports.downloadFile = async (url, filePath) => {
   })
 }
 
-exports.getHelpDescription = string => {
+exports.getHelpDescription = (string) => {
   return chalk.cyan(string)
 }
 
-exports.getSubHelpDescription = string => {
+exports.getSubHelpDescription = (string) => {
   return chalk.green(string)
 }
 
-exports.error = error => {
+exports.error = (error) => {
   return chalk.red(`Error - ${error}`)
 }
 
-exports.success = success => {
+exports.success = (success) => {
   return chalk.green(success)
 }
 
-exports.info = info => {
+exports.info = (info) => {
   return chalk.cyan(info)
 }
 
@@ -45,7 +45,7 @@ exports.logErrorToFile = (file, error) => {
   fs.writeFileSync(path.resolve(`./${file}`), `Budibase Error\n${error}`)
 }
 
-exports.parseEnv = env => {
+exports.parseEnv = (env) => {
   const lines = env.toString().split("\n")
   let result = {}
   for (const line of lines) {
diff --git a/packages/client/src/api/api.js b/packages/client/src/api/api.js
index 8b2328c6a2..cd11f71ef4 100644
--- a/packages/client/src/api/api.js
+++ b/packages/client/src/api/api.js
@@ -7,7 +7,7 @@ let cache = {}
 /**
  * Handler for API errors.
  */
-const handleError = error => {
+const handleError = (error) => {
   return { error }
 }
 
@@ -61,7 +61,7 @@ const makeApiCall = async ({ method, url, body, json = true }) => {
  * Future invocation for this URL will return the cached result instead of
  * hitting the server again.
  */
-const makeCachedApiCall = async params => {
+const makeCachedApiCall = async (params) => {
   const identifier = params.url
   if (!identifier) {
     return null
@@ -76,7 +76,7 @@ const makeCachedApiCall = async params => {
 /**
  * Constructs an API call function for a particular HTTP method.
  */
-const requestApiCall = method => async params => {
+const requestApiCall = (method) => async (params) => {
   const { url, cache = false } = params
   const fixedUrl = `/${url}`.replace("//", "/")
   const enrichedParams = { ...params, method, url: fixedUrl }
diff --git a/packages/client/src/api/app.js b/packages/client/src/api/app.js
index 61c23ef6a6..6f1f0679af 100644
--- a/packages/client/src/api/app.js
+++ b/packages/client/src/api/app.js
@@ -3,7 +3,7 @@ import API from "./api"
 /**
  * Fetches screen definition for an app.
  */
-export const fetchAppDefinition = async appId => {
+export const fetchAppDefinition = async (appId) => {
   return await API.get({
     url: `/api/applications/${appId}/definition`,
   })
diff --git a/packages/client/src/api/attachments.js b/packages/client/src/api/attachments.js
index ff5c48c911..a03aa595f9 100644
--- a/packages/client/src/api/attachments.js
+++ b/packages/client/src/api/attachments.js
@@ -3,7 +3,7 @@ import API from "./api"
 /**
  * Uploads an attachment to the server.
  */
-export const uploadAttachment = async data => {
+export const uploadAttachment = async (data) => {
   return await API.post({
     url: "/api/attachments/upload",
     body: data,
diff --git a/packages/client/src/api/datasources.js b/packages/client/src/api/datasources.js
index 508e1e8db0..49d1132467 100644
--- a/packages/client/src/api/datasources.js
+++ b/packages/client/src/api/datasources.js
@@ -7,7 +7,7 @@ import { executeQuery } from "./queries"
 /**
  * Fetches all rows for a particular Budibase data source.
  */
-export const fetchDatasource = async dataSource => {
+export const fetchDatasource = async (dataSource) => {
   if (!dataSource || !dataSource.type) {
     return []
   }
diff --git a/packages/client/src/api/rows.js b/packages/client/src/api/rows.js
index 87cc9a9d37..b67c6318ae 100644
--- a/packages/client/src/api/rows.js
+++ b/packages/client/src/api/rows.js
@@ -18,7 +18,7 @@ export const fetchRow = async ({ tableId, rowId }) => {
 /**
  * Creates a row in a table.
  */
-export const saveRow = async row => {
+export const saveRow = async (row) => {
   if (!row?.tableId) {
     return
   }
@@ -39,7 +39,7 @@ export const saveRow = async row => {
 /**
  * Updates a row in a table.
  */
-export const updateRow = async row => {
+export const updateRow = async (row) => {
   if (!row?.tableId || !row?._id) {
     return
   }
@@ -115,15 +115,15 @@ export const enrichRows = async (rows, tableId) => {
     const schema = tableDefinition && tableDefinition.schema
     if (schema) {
       const keys = Object.keys(schema)
-      rows.forEach(row => {
+      rows.forEach((row) => {
         for (let key of keys) {
           const type = schema[key].type
           if (type === "link") {
             // Enrich row a string join of relationship fields
             row[`${key}_text`] =
               row[key]
-                ?.map(option => option?.primaryDisplay)
-                .filter(option => !!option)
+                ?.map((option) => option?.primaryDisplay)
+                .filter((option) => !!option)
                 .join(", ") || ""
           } else if (type === "attachment") {
             // Enrich row with the first image URL for any attachment fields
diff --git a/packages/client/src/api/tables.js b/packages/client/src/api/tables.js
index 248e1516c2..86be3cd748 100644
--- a/packages/client/src/api/tables.js
+++ b/packages/client/src/api/tables.js
@@ -5,14 +5,14 @@ import { enrichRows } from "./rows"
  * Fetches a table definition.
  * Since definitions cannot change at runtime, the result is cached.
  */
-export const fetchTableDefinition = async tableId => {
+export const fetchTableDefinition = async (tableId) => {
   return await API.get({ url: `/api/tables/${tableId}`, cache: true })
 }
 
 /**
  * Fetches all rows from a table.
  */
-export const fetchTableData = async tableId => {
+export const fetchTableData = async (tableId) => {
   const rows = await API.get({ url: `/api/${tableId}/rows` })
   return await enrichRows(rows, tableId)
 }
diff --git a/packages/client/src/store/builder.js b/packages/client/src/store/builder.js
index 295bb6ccc9..9e1e87c800 100644
--- a/packages/client/src/store/builder.js
+++ b/packages/client/src/store/builder.js
@@ -12,7 +12,7 @@ const createBuilderStore = () => {
   }
   const store = writable(initialState)
   const actions = {
-    selectComponent: id => {
+    selectComponent: (id) => {
       if (id) {
         window.dispatchEvent(
           new CustomEvent("bb-select-component", { detail: id })
diff --git a/packages/client/src/store/context.js b/packages/client/src/store/context.js
index e9d307d4f3..51d288fa38 100644
--- a/packages/client/src/store/context.js
+++ b/packages/client/src/store/context.js
@@ -1,9 +1,9 @@
 import { writable, derived } from "svelte/store"
 
-export const createContextStore = oldContext => {
+export const createContextStore = (oldContext) => {
   const newContext = writable({})
   const contexts = oldContext ? [oldContext, newContext] : [newContext]
-  const totalContext = derived(contexts, $contexts => {
+  const totalContext = derived(contexts, ($contexts) => {
     return $contexts.reduce((total, context) => ({ ...total, ...context }), {})
   })
 
@@ -12,7 +12,7 @@ export const createContextStore = oldContext => {
     if (!providerId || data === undefined) {
       return
     }
-    newContext.update(state => {
+    newContext.update((state) => {
       state[providerId] = data
 
       // Keep track of the closest component ID so we can later hydrate a "data" prop.
@@ -29,7 +29,7 @@ export const createContextStore = oldContext => {
     if (!providerId || !actionType) {
       return
     }
-    newContext.update(state => {
+    newContext.update((state) => {
       state[`${providerId}_${actionType}`] = callback
       return state
     })
diff --git a/packages/client/src/store/dataSource.js b/packages/client/src/store/dataSource.js
index 2645c949a2..75d844a27e 100644
--- a/packages/client/src/store/dataSource.js
+++ b/packages/client/src/store/dataSource.js
@@ -40,8 +40,8 @@ export const createDataSourceStore = () => {
 
     // Store configs for each relevant dataSource ID
     if (dataSourceIds.length) {
-      store.update(state => {
-        dataSourceIds.forEach(id => {
+      store.update((state) => {
+        dataSourceIds.forEach((id) => {
           state.push({
             dataSourceId: id,
             instanceId,
@@ -55,22 +55,22 @@ export const createDataSourceStore = () => {
 
   // Removes all registered dataSource instances belonging to a particular
   // instance ID
-  const unregisterInstance = instanceId => {
-    store.update(state => {
-      return state.filter(instance => instance.instanceId !== instanceId)
+  const unregisterInstance = (instanceId) => {
+    store.update((state) => {
+      return state.filter((instance) => instance.instanceId !== instanceId)
     })
   }
 
   // Invalidates a specific dataSource ID by refreshing all instances
   // which depend on data from that dataSource
-  const invalidateDataSource = dataSourceId => {
-    const relatedInstances = get(store).filter(instance => {
+  const invalidateDataSource = (dataSourceId) => {
+    const relatedInstances = get(store).filter((instance) => {
       return instance.dataSourceId === dataSourceId
     })
     if (relatedInstances?.length) {
       notificationStore.blockNotifications(1000)
     }
-    relatedInstances?.forEach(instance => {
+    relatedInstances?.forEach((instance) => {
       instance.refresh()
     })
   }
diff --git a/packages/client/src/store/notification.js b/packages/client/src/store/notification.js
index 3efd40a882..6e06760702 100644
--- a/packages/client/src/store/notification.js
+++ b/packages/client/src/store/notification.js
@@ -7,7 +7,7 @@ const createNotificationStore = () => {
   const _notifications = writable([], () => {
     return () => {
       // clear all the timers
-      timeoutIds.forEach(timeoutId => {
+      timeoutIds.forEach((timeoutId) => {
         clearTimeout(timeoutId)
       })
       _notifications.set([])
@@ -25,11 +25,11 @@ const createNotificationStore = () => {
       return
     }
     let _id = id()
-    _notifications.update(state => {
+    _notifications.update((state) => {
       return [...state, { id: _id, type, message }]
     })
     const timeoutId = setTimeout(() => {
-      _notifications.update(state => {
+      _notifications.update((state) => {
         return state.filter(({ id }) => id !== _id)
       })
     }, NOTIFICATION_TIMEOUT)
@@ -41,21 +41,16 @@ const createNotificationStore = () => {
   return {
     subscribe,
     send,
-    danger: msg => send(msg, "danger"),
-    warning: msg => send(msg, "warning"),
-    info: msg => send(msg, "info"),
-    success: msg => send(msg, "success"),
+    danger: (msg) => send(msg, "danger"),
+    warning: (msg) => send(msg, "warning"),
+    info: (msg) => send(msg, "info"),
+    success: (msg) => send(msg, "success"),
     blockNotifications,
   }
 }
 
 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/store/routes.js b/packages/client/src/store/routes.js
index aa86718ec0..71e61c9a58 100644
--- a/packages/client/src/store/routes.js
+++ b/packages/client/src/store/routes.js
@@ -14,7 +14,7 @@ const createRouteStore = () => {
   const fetchRoutes = async () => {
     const routeConfig = await API.fetchRoutes()
     let routes = []
-    Object.values(routeConfig.routes).forEach(route => {
+    Object.values(routeConfig.routes).forEach((route) => {
       Object.entries(route.subpaths).forEach(([path, config]) => {
         routes.push({
           path,
@@ -28,21 +28,21 @@ const createRouteStore = () => {
       return a.path > b.path ? -1 : 1
     })
 
-    store.update(state => {
+    store.update((state) => {
       state.routes = routes
       state.routeSessionId = Math.random()
       return state
     })
   }
-  const setRouteParams = routeParams => {
-    store.update(state => {
+  const setRouteParams = (routeParams) => {
+    store.update((state) => {
       state.routeParams = routeParams
       return state
     })
   }
-  const setActiveRoute = route => {
-    store.update(state => {
-      state.activeRoute = state.routes.find(x => x.path === route)
+  const setActiveRoute = (route) => {
+    store.update((state) => {
+      state.activeRoute = state.routes.find((x) => x.path === route)
       return state
     })
   }
diff --git a/packages/client/src/store/screens.js b/packages/client/src/store/screens.js
index 49927db9d7..7f21199acc 100644
--- a/packages/client/src/store/screens.js
+++ b/packages/client/src/store/screens.js
@@ -25,12 +25,12 @@ const createScreenStore = () => {
           activeScreen = screens[0]
         } else if ($routeStore.activeRoute) {
           activeScreen = screens.find(
-            screen => screen._id === $routeStore.activeRoute.screenId
+            (screen) => screen._id === $routeStore.activeRoute.screenId
           )
         }
         if (activeScreen) {
           activeLayout = layouts.find(
-            layout => layout._id === activeScreen.layoutId
+            (layout) => layout._id === activeScreen.layoutId
           )
         }
       }
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 4d2865d586..0b988f0314 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -16,27 +16,27 @@ const saveRowHandler = async (action, context) => {
   }
 }
 
-const deleteRowHandler = async action => {
+const deleteRowHandler = async (action) => {
   const { tableId, revId, rowId } = action.parameters
   if (tableId && revId && rowId) {
     await deleteRow({ tableId, rowId, revId })
   }
 }
 
-const triggerAutomationHandler = async action => {
+const triggerAutomationHandler = async (action) => {
   const { fields } = action.parameters
   if (fields) {
     await triggerAutomation(action.parameters.automationId, fields)
   }
 }
 
-const navigationHandler = action => {
+const navigationHandler = (action) => {
   if (action.parameters.url) {
     routeStore.actions.navigate(action.parameters.url)
   }
 }
 
-const queryExecutionHandler = async action => {
+const queryExecutionHandler = async (action) => {
   const { datasourceId, queryId, queryParams } = action.parameters
   await executeQuery({
     datasourceId,
@@ -68,7 +68,7 @@ const refreshDatasourceHandler = async (action, context) => {
   )
 }
 
-const loginHandler = async action => {
+const loginHandler = async (action) => {
   const { email, password } = action.parameters
   await authStore.actions.logIn({ email, password })
 }
@@ -98,7 +98,7 @@ export const enrichButtonActions = (actions, context) => {
   if (get(builderStore).inBuilder) {
     return () => {}
   }
-  const handlers = actions.map(def => handlerMap[def["##eventHandlerType"]])
+  const handlers = actions.map((def) => handlerMap[def["##eventHandlerType"]])
   return async () => {
     for (let i = 0; i < handlers.length; i++) {
       try {
diff --git a/packages/client/src/utils/hash.js b/packages/client/src/utils/hash.js
index 2c42007e43..30c7913c20 100644
--- a/packages/client/src/utils/hash.js
+++ b/packages/client/src/utils/hash.js
@@ -1,4 +1,4 @@
-export const hashString = str => {
+export const hashString = (str) => {
   if (!str) {
     return 0
   }
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 6cc387058a..92707c7543 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
   }
@@ -50,7 +53,7 @@ export const styleable = (node, styles = {}) => {
     }
 
     // Applies a style string to a DOM node
-    const applyStyles = styleString => {
+    const applyStyles = (styleString) => {
       node.style = addBuilderPreviewStyles(node, styleString, componentId)
       node.dataset.componentId = componentId
     }
@@ -67,7 +70,7 @@ export const styleable = (node, styles = {}) => {
 
     // Handler to select a component in the builder when clicking it in the
     // builder preview
-    selectComponent = event => {
+    selectComponent = (event) => {
       builderStore.actions.selectComponent(componentId)
       event.preventDefault()
       event.stopPropagation()
@@ -103,7 +106,7 @@ export const styleable = (node, styles = {}) => {
 
   return {
     // Clean up old listeners and apply new ones on update
-    update: newStyles => {
+    update: (newStyles) => {
       removeListeners()
       setupStyles(newStyles)
     },
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__/aws-sdk.js b/packages/server/__mocks__/aws-sdk.js
index 503d098256..e76b1616e6 100644
--- a/packages/server/__mocks__/aws-sdk.js
+++ b/packages/server/__mocks__/aws-sdk.js
@@ -1,6 +1,6 @@
 const aws = {}
 
-const response = body => () => ({ promise: () => body })
+const response = (body) => () => ({ promise: () => body })
 
 function DocumentClient() {
   this.put = jest.fn(response({}))
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/scripts/dev/manage.js b/packages/server/scripts/dev/manage.js
index 4e170d1c63..0133bc8667 100644
--- a/packages/server/scripts/dev/manage.js
+++ b/packages/server/scripts/dev/manage.js
@@ -46,7 +46,7 @@ async function init() {
     SELF_HOSTED: 1,
   }
   let envFile = ""
-  Object.keys(envFileJson).forEach(key => {
+  Object.keys(envFileJson).forEach((key) => {
     envFile += `${key}=${envFileJson[key]}\n`
   })
   fs.writeFileSync(envFilePath, envFile)
@@ -78,7 +78,7 @@ const managementCommand = process.argv.slice(2)[0]
 
 if (
   !managementCommand ||
-  !Object.values(Commands).some(command => managementCommand === command)
+  !Object.values(Commands).some((command) => managementCommand === command)
 ) {
   throw new Error(
     "You must supply either an 'up', 'down' or 'nuke' commmand to manage the budibase development environment."
@@ -104,7 +104,7 @@ command()
   .then(() => {
     console.log("Done! 🎉")
   })
-  .catch(err => {
+  .catch((err) => {
     console.error(
       "Something went wrong while managing budibase dev environment:",
       err.message
diff --git a/packages/server/scripts/exportAppTemplate.js b/packages/server/scripts/exportAppTemplate.js
index 34988cda37..2673b9b284 100755
--- a/packages/server/scripts/exportAppTemplate.js
+++ b/packages/server/scripts/exportAppTemplate.js
@@ -25,7 +25,7 @@ yargs
         type: "string",
       },
     },
-    async args => {
+    async (args) => {
       if (!env.isDev()) {
         throw "Only works in dev"
       }
diff --git a/packages/server/scripts/replicateApp.js b/packages/server/scripts/replicateApp.js
index bbf44a7907..90f54087ce 100644
--- a/packages/server/scripts/replicateApp.js
+++ b/packages/server/scripts/replicateApp.js
@@ -14,7 +14,7 @@ console.log(`Replicating from ${appName} to ${remoteUrl}/${appName}`)
 
 const run = async () => {
   const allDbs = await CouchDB.allDbs()
-  const appDbNames = allDbs.filter(dbName => dbName.startsWith("inst_app"))
+  const appDbNames = allDbs.filter((dbName) => dbName.startsWith("inst_app"))
   let apps = []
   for (let dbName of appDbNames) {
     const db = new CouchDB(dbName)
@@ -22,12 +22,12 @@ const run = async () => {
   }
   apps = await Promise.all(apps)
   const app = apps.find(
-    a => a.name === appName || a.name.toLowerCase() === appName
+    (a) => a.name === appName || a.name.toLowerCase() === appName
   )
 
   if (!app) {
     console.log(
-      `Could not find app... apps: ${apps.map(app => app.name).join(", ")}`
+      `Could not find app... apps: ${apps.map((app) => app.name).join(", ")}`
     )
     return
   }
@@ -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..4668a31675 100644
--- a/packages/server/src/api/controllers/application.js
+++ b/packages/server/src/api/controllers/application.js
@@ -43,7 +43,7 @@ async function getLayouts(db) {
         include_docs: true,
       })
     )
-  ).rows.map(row => row.doc)
+  ).rows.map((row) => row.doc)
 }
 
 async function getScreens(db) {
@@ -53,7 +53,7 @@ async function getScreens(db) {
         include_docs: true,
       })
     )
-  ).rows.map(row => row.doc)
+  ).rows.map((row) => row.doc)
 }
 
 function getUserRoleId(ctx) {
@@ -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/auth.js b/packages/server/src/api/controllers/auth.js
index 2ac3d30e48..ed70254222 100644
--- a/packages/server/src/api/controllers/auth.js
+++ b/packages/server/src/api/controllers/auth.js
@@ -3,7 +3,7 @@ const { outputProcessing } = require("../../utilities/rowProcessor")
 const { InternalTables } = require("../../db/utils")
 const { getFullUser } = require("../../utilities/users")
 
-exports.fetchSelf = async ctx => {
+exports.fetchSelf = async (ctx) => {
   if (!ctx.user) {
     ctx.throw(403, "No user logged in")
   }
diff --git a/packages/server/src/api/controllers/automation.js b/packages/server/src/api/controllers/automation.js
index 0f210f633c..8238ffdb6b 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,22 +149,22 @@ 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, {
       include_docs: true,
     })
   )
-  ctx.body = response.rows.map(row => row.doc)
+  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..2c9440058e 100644
--- a/packages/server/src/api/controllers/component.js
+++ b/packages/server/src/api/controllers/component.js
@@ -1,13 +1,13 @@
 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)
 
   let componentManifests = await Promise.all(
-    app.componentLibraries.map(async library => {
+    app.componentLibraries.map(async (library) => {
       let manifest = await getComponentLibraryManifest(appId, library)
 
       return {
diff --git a/packages/server/src/api/controllers/datasource.js b/packages/server/src/api/controllers/datasource.js
index b5a207dbbe..bd8497c4a4 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(
@@ -13,10 +13,10 @@ exports.fetch = async function(ctx) {
         include_docs: true,
       })
     )
-  ).rows.map(row => row.doc)
+  ).rows.map((row) => row.doc)
 }
 
-exports.save = async function(ctx) {
+exports.save = async function (ctx) {
   const db = new CouchDB(ctx.appId)
 
   const datasource = {
@@ -33,12 +33,12 @@ 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
   const rows = await db.allDocs(getQueryParams(ctx.params.datasourceId, null))
-  await db.bulkDocs(rows.rows.map(row => ({ ...row.doc, _deleted: true })))
+  await db.bulkDocs(rows.rows.map((row) => ({ ...row.doc, _deleted: true })))
 
   // delete the datasource
   await db.remove(ctx.params.datasourceId, ctx.params.revId)
@@ -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..2b5d0af2ed 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)
       },
@@ -129,6 +131,6 @@ exports.performReplication = (appId, session, dbUrl) => {
     const replication = local.sync(remote)
 
     replication.on("complete", () => resolve())
-    replication.on("error", err => reject(err))
+    replication.on("error", (err) => reject(err))
   })
 }
diff --git a/packages/server/src/api/controllers/dev.js b/packages/server/src/api/controllers/dev.js
index 003f82faa8..2e2a6d57f8 100644
--- a/packages/server/src/api/controllers/dev.js
+++ b/packages/server/src/api/controllers/dev.js
@@ -21,14 +21,14 @@ async function redirect(ctx, method) {
   ctx.cookies
 }
 
-exports.redirectGet = async ctx => {
+exports.redirectGet = async (ctx) => {
   await redirect(ctx, "GET")
 }
 
-exports.redirectPost = async ctx => {
+exports.redirectPost = async (ctx) => {
   await redirect(ctx, "POST")
 }
 
-exports.redirectDelete = async ctx => {
+exports.redirectDelete = async (ctx) => {
   await redirect(ctx, "DELETE")
 }
diff --git a/packages/server/src/api/controllers/hosting.js b/packages/server/src/api/controllers/hosting.js
index 8b7b31e00a..1720378fa2 100644
--- a/packages/server/src/api/controllers/hosting.js
+++ b/packages/server/src/api/controllers/hosting.js
@@ -7,13 +7,13 @@ const {
 } = require("../../utilities/builder/hosting")
 const { StaticDatabases } = require("../../db/utils")
 
-exports.fetchInfo = async ctx => {
+exports.fetchInfo = async (ctx) => {
   ctx.body = {
     types: Object.values(HostingTypes),
   }
 }
 
-exports.save = async ctx => {
+exports.save = async (ctx) => {
   const db = new CouchDB(StaticDatabases.BUILDER_HOSTING.name)
   const { type } = ctx.request.body
   if (type === HostingTypes.CLOUD && ctx.request.body._rev) {
@@ -29,16 +29,16 @@ exports.save = async ctx => {
   }
 }
 
-exports.fetch = async ctx => {
+exports.fetch = async (ctx) => {
   ctx.body = await getHostingInfo()
 }
 
-exports.fetchUrls = async ctx => {
+exports.fetchUrls = async (ctx) => {
   ctx.body = {
     app: await getAppUrl(ctx.appId),
   }
 }
 
-exports.getDeployedApps = async ctx => {
+exports.getDeployedApps = async (ctx) => {
   ctx.body = await getDeployedApps(ctx)
 }
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..f745761d42 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
@@ -32,7 +32,7 @@ exports.destroy = async function(ctx) {
         include_docs: true,
       })
     )
-  ).rows.map(element => element.doc.layoutId)
+  ).rows.map((element) => element.doc.layoutId)
   if (layoutsUsedByScreens.includes(layoutId)) {
     ctx.throw(400, "Cannot delete a layout that's being used by a screen")
   }
diff --git a/packages/server/src/api/controllers/permission.js b/packages/server/src/api/controllers/permission.js
index 56c9d3f8c6..ffce2e8d97 100644
--- a/packages/server/src/api/controllers/permission.js
+++ b/packages/server/src/api/controllers/permission.js
@@ -47,7 +47,7 @@ async function getAllDBRoles(db) {
       include_docs: true,
     })
   )
-  return body.rows.map(row => row.doc)
+  return body.rows.map((row) => row.doc)
 }
 
 async function updatePermissionOnRole(
@@ -63,7 +63,7 @@ async function updatePermissionOnRole(
   const docUpdates = []
 
   // the permission is for a built in, make sure it exists
-  if (isABuiltin && !dbRoles.some(role => role._id === dbRoleId)) {
+  if (isABuiltin && !dbRoles.some((role) => role._id === dbRoleId)) {
     const builtin = getBuiltinRoles()[roleId]
     builtin._id = getDBRoleID(builtin._id)
     dbRoles.push(builtin)
@@ -101,23 +101,23 @@ async function updatePermissionOnRole(
   }
 
   const response = await db.bulkDocs(docUpdates)
-  return response.map(resp => {
+  return response.map((resp) => {
     resp._id = getExternalRoleID(resp.id)
     delete resp.id
     return resp
   })
 }
 
-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(
@@ -152,7 +152,7 @@ exports.getResourcePerms = async function(ctx) {
       include_docs: true,
     })
   )
-  const roles = body.rows.map(row => row.doc)
+  const roles = body.rows.map((row) => row.doc)
   let permissions = {}
   for (let level of SUPPORTED_LEVELS) {
     // update the various roleIds in the resource permissions
@@ -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..1f3e7370d8 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(
@@ -35,10 +35,10 @@ exports.fetch = async function(ctx) {
       include_docs: true,
     })
   )
-  ctx.body = enrichQueries(body.rows.map(row => row.doc))
+  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..19174cac35 100644
--- a/packages/server/src/api/controllers/role.js
+++ b/packages/server/src/api/controllers/role.js
@@ -50,27 +50,27 @@ 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, {
       include_docs: true,
     })
   )
-  let roles = body.rows.map(row => row.doc)
+  let roles = body.rows.map((row) => row.doc)
   const builtinRoles = getBuiltinRoles()
 
   // need to combine builtin with any DB record of them (for sake of permissions)
   for (let builtinRoleId of EXTERNAL_BUILTIN_ROLE_IDS) {
     const builtinRole = builtinRoles[builtinRoleId]
     const dbBuiltin = roles.filter(
-      dbRole => getExternalRoleID(dbRole._id) === builtinRoleId
+      (dbRole) => getExternalRoleID(dbRole._id) === builtinRoleId
     )[0]
     if (dbBuiltin == null) {
       roles.push(builtinRole)
     } else {
       // remove role and all back after combining with the builtin
-      roles = roles.filter(role => role._id !== dbBuiltin._id)
+      roles = roles.filter((role) => role._id !== dbBuiltin._id)
       dbBuiltin._id = getExternalRoleID(dbBuiltin._id)
       roles.push(Object.assign(builtinRole, dbBuiltin))
     }
@@ -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)) {
@@ -116,8 +116,8 @@ exports.destroy = async function(ctx) {
         include_docs: true,
       })
     )
-  ).rows.map(row => row.doc)
-  const usersWithRole = users.filter(user => user.roleId === roleId)
+  ).rows.map((row) => row.doc)
+  const usersWithRole = users.filter((user) => user.roleId === roleId)
   if (usersWithRole.length !== 0) {
     ctx.throw(400, "Cannot delete role when it is in use.")
   }
diff --git a/packages/server/src/api/controllers/routing.js b/packages/server/src/api/controllers/routing.js
index ab1489145b..502b78f107 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
 }
 
@@ -56,11 +56,11 @@ async function getRoutingStructure(appId) {
   return { routes: routing.json }
 }
 
-exports.fetch = async ctx => {
+exports.fetch = async (ctx) => {
   ctx.body = await getRoutingStructure(ctx.appId)
 }
 
-exports.clientFetch = async ctx => {
+exports.clientFetch = async (ctx) => {
   const routing = await getRoutingStructure(ctx.appId)
   let roleId = ctx.user.role._id
   // builder is a special case, always return the full routing structure
diff --git a/packages/server/src/api/controllers/row.js b/packages/server/src/api/controllers/row.js
index 48766129b2..f085ca91db 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
 
@@ -213,7 +213,7 @@ exports.fetchView = async function(ctx) {
   })
 
   if (!calculation) {
-    response.rows = response.rows.map(row => row.doc)
+    response.rows = response.rows.map((row) => row.doc)
     let table
     try {
       table = await db.get(viewInfo.meta.tableId)
@@ -227,7 +227,7 @@ exports.fetchView = async function(ctx) {
   }
 
   if (calculation === CALCULATION_TYPES.STATS) {
-    response.rows = response.rows.map(row => ({
+    response.rows = response.rows.map((row) => ({
       group: row.key,
       field,
       ...row.value,
@@ -240,7 +240,7 @@ exports.fetchView = async function(ctx) {
     calculation === CALCULATION_TYPES.COUNT ||
     calculation === CALCULATION_TYPES.SUM
   ) {
-    ctx.body = response.rows.map(row => ({
+    ctx.body = response.rows.map((row) => ({
       group: row.key,
       field,
       value: row.value,
@@ -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)
 
@@ -303,12 +303,12 @@ exports.fetchTableRows = async function(ctx) {
         include_docs: true,
       })
     )
-    rows = response.rows.map(row => row.doc)
+    rows = response.rows.map((row) => row.doc)
   }
   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
@@ -399,13 +399,13 @@ exports.fetchEnrichedRow = async function(ctx) {
   // look up the actual rows based on the ids
   const response = await db.allDocs({
     include_docs: true,
-    keys: linkVals.map(linkVal => linkVal.id),
+    keys: linkVals.map((linkVal) => linkVal.id),
   })
   // need to include the IDs in these rows for any links they may have
   let linkedRows = await outputProcessing(
     appId,
     table,
-    response.rows.map(row => row.doc)
+    response.rows.map((row) => row.doc)
   )
   // insert the link rows in the correct place throughout the main row
   for (let fieldName of Object.keys(table.schema)) {
@@ -413,8 +413,8 @@ exports.fetchEnrichedRow = async function(ctx) {
     if (field.type === FieldTypes.LINK) {
       // find the links that pertain to this field, get their indexes
       const linkIndexes = linkVals
-        .filter(link => link.fieldName === fieldName)
-        .map(link => linkVals.indexOf(link))
+        .filter((link) => link.fieldName === fieldName)
+        .map((link) => linkVals.indexOf(link))
       // find the rows that the links state are linked to this field
       row[fieldName] = linkedRows.filter((linkRow, index) =>
         linkIndexes.includes(index)
@@ -430,7 +430,7 @@ async function bulkDelete(ctx) {
   const { rows } = ctx.request.body
   const db = new CouchDB(appId)
 
-  let updates = rows.map(row =>
+  let updates = rows.map((row) =>
     linkRows.updateLinks({
       appId,
       eventType: linkRows.EventType.ROW_DELETE,
@@ -441,7 +441,7 @@ async function bulkDelete(ctx) {
   // TODO remove special user case in future
   if (ctx.params.tableId === InternalTables.USER_METADATA) {
     updates = updates.concat(
-      rows.map(row => {
+      rows.map((row) => {
         ctx.params = {
           id: row._id,
         }
@@ -449,11 +449,11 @@ async function bulkDelete(ctx) {
       })
     )
   } else {
-    await db.bulkDocs(rows.map(row => ({ ...row, _deleted: true })))
+    await db.bulkDocs(rows.map((row) => ({ ...row, _deleted: true })))
   }
   await Promise.all(updates)
 
-  rows.forEach(row => {
+  rows.forEach((row) => {
     ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:delete`, appId, row)
   })
 }
diff --git a/packages/server/src/api/controllers/screen.js b/packages/server/src/api/controllers/screen.js
index 6095d00c95..3638b41958 100644
--- a/packages/server/src/api/controllers/screen.js
+++ b/packages/server/src/api/controllers/screen.js
@@ -2,7 +2,7 @@ const CouchDB = require("../../db")
 const { getScreenParams, generateScreenID } = require("../../db/utils")
 const { AccessController } = require("../../utilities/security/roles")
 
-exports.fetch = async ctx => {
+exports.fetch = async (ctx) => {
   const appId = ctx.appId
   const db = new CouchDB(appId)
 
@@ -12,7 +12,7 @@ exports.fetch = async ctx => {
         include_docs: true,
       })
     )
-  ).rows.map(element => element.doc)
+  ).rows.map((element) => element.doc)
 
   ctx.body = await new AccessController(appId).checkScreensAccess(
     screens,
@@ -20,7 +20,7 @@ exports.fetch = async ctx => {
   )
 }
 
-exports.save = async ctx => {
+exports.save = async (ctx) => {
   const appId = ctx.appId
   const db = new CouchDB(appId)
   let screen = ctx.request.body
@@ -38,7 +38,7 @@ exports.save = async ctx => {
   }
 }
 
-exports.destroy = async ctx => {
+exports.destroy = async (ctx) => {
   const db = new CouchDB(ctx.appId)
   await db.remove(ctx.params.screenId, ctx.params.screenRev)
   ctx.body = {
diff --git a/packages/server/src/api/controllers/search/index.js b/packages/server/src/api/controllers/search/index.js
index 234c7eb258..87dc9a1f09 100644
--- a/packages/server/src/api/controllers/search/index.js
+++ b/packages/server/src/api/controllers/search/index.js
@@ -1,6 +1,6 @@
 const { QueryBuilder, buildSearchUrl, search } = require("./utils")
 
-exports.rowSearch = async ctx => {
+exports.rowSearch = async (ctx) => {
   const appId = ctx.appId
   const { tableId } = ctx.params
   const { bookmark, query, raw } = ctx.request.body
diff --git a/packages/server/src/api/controllers/search/utils.js b/packages/server/src/api/controllers/search/utils.js
index d3ffb26be7..18c10ceb93 100644
--- a/packages/server/src/api/controllers/search/utils.js
+++ b/packages/server/src/api/controllers/search/utils.js
@@ -116,7 +116,7 @@ class QueryBuilder {
   }
 }
 
-exports.search = async query => {
+exports.search = async (query) => {
   const response = await fetch(query, {
     method: "GET",
   })
@@ -125,7 +125,7 @@ exports.search = async query => {
     rows: [],
   }
   if (json.rows != null && json.rows.length > 0) {
-    output.rows = json.rows.map(row => row.doc)
+    output.rows = json.rows.map((row) => row.doc)
   }
   if (json.bookmark) {
     output.bookmark = json.bookmark
diff --git a/packages/server/src/api/controllers/static/index.js b/packages/server/src/api/controllers/static/index.js
index f0c9baf338..750297f8ef 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,27 +32,28 @@ 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)
       : [ctx.request.files.file]
 
-  const uploads = files.map(async file => {
+  const uploads = files.map(async (file) => {
     const fileExtension = [...file.name.split(".")].pop()
     // filenames converted to UUIDs so they are unique
     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/table/index.js b/packages/server/src/api/controllers/table/index.js
index 995ba8f72c..221febe6ff 100644
--- a/packages/server/src/api/controllers/table/index.js
+++ b/packages/server/src/api/controllers/table/index.js
@@ -9,22 +9,22 @@ 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, {
       include_docs: true,
     })
   )
-  ctx.body = body.rows.map(row => row.doc)
+  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)
@@ -137,7 +137,7 @@ exports.destroy = async function(ctx) {
       include_docs: true,
     })
   )
-  await db.bulkDocs(rows.rows.map(row => ({ ...row.doc, _deleted: true })))
+  await db.bulkDocs(rows.rows.map((row) => ({ ...row.doc, _deleted: true })))
 
   // update linked rows
   await linkRows.updateLinks({
@@ -152,7 +152,7 @@ exports.destroy = async function(ctx) {
   // remove table search index
   const currentIndexes = await db.getIndexes()
   const existingIndex = currentIndexes.indexes.find(
-    existing => existing.name === `search:${ctx.params.tableId}`
+    (existing) => existing.name === `search:${ctx.params.tableId}`
   )
   if (existingIndex) {
     await db.deleteIndex(existingIndex)
@@ -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/table/utils.js b/packages/server/src/api/controllers/table/utils.js
index 3cf64e8e31..a549f248f5 100644
--- a/packages/server/src/api/controllers/table/utils.js
+++ b/packages/server/src/api/controllers/table/utils.js
@@ -16,7 +16,7 @@ exports.checkForColumnUpdates = async (db, oldTable, updatedTable) => {
   let deletedColumns = []
   if (oldTable && oldTable.schema && updatedTable.schema) {
     deletedColumns = Object.keys(oldTable.schema).filter(
-      colName => updatedTable.schema[colName] == null
+      (colName) => updatedTable.schema[colName] == null
     )
   }
   // check for renaming of columns or deleted columns
@@ -31,7 +31,7 @@ exports.checkForColumnUpdates = async (db, oldTable, updatedTable) => {
         doc[rename.updated] = doc[rename.old]
         delete doc[rename.old]
       } else if (deletedColumns.length !== 0) {
-        deletedColumns.forEach(colName => delete doc[colName])
+        deletedColumns.forEach((colName) => delete doc[colName])
       }
       return doc
     })
@@ -102,12 +102,12 @@ exports.handleSearchIndexes = async (appId, table) => {
     const indexName = `search:${table._id}`
 
     const existingIndex = currentIndexes.indexes.find(
-      existing => existing.name === indexName
+      (existing) => existing.name === indexName
     )
 
     if (existingIndex) {
       const currentFields = existingIndex.def.fields.map(
-        field => Object.keys(field)[0]
+        (field) => Object.keys(field)[0]
       )
 
       // if index fields have changed, delete the original index
@@ -138,7 +138,7 @@ exports.handleSearchIndexes = async (appId, table) => {
   return table
 }
 
-exports.checkStaticTables = table => {
+exports.checkStaticTables = (table) => {
   // check user schema has all required elements
   if (table._id === InternalTables.USER_METADATA) {
     for (let [key, schema] of Object.entries(USERS_TABLE_SCHEMA.schema)) {
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..cbcebe93cc 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 = (
@@ -22,11 +22,11 @@ exports.fetchMetadata = async function(ctx) {
         include_docs: true,
       })
     )
-  ).rows.map(row => row.doc)
+  ).rows.map((row) => row.doc)
   const users = []
   for (let user of global) {
     // find the metadata that matches up to the global ID
-    const info = metadata.find(meta => meta._id.includes(user._id))
+    const info = metadata.find((meta) => meta._id.includes(user._id))
     // remove these props, not for the correct DB
     users.push({
       ...user,
@@ -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
@@ -94,7 +94,7 @@ exports.updateMetadata = async function(ctx) {
   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 +108,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..bdd9ce1a3e 100644
--- a/packages/server/src/api/controllers/view/exporters.js
+++ b/packages/server/src/api/controllers/view/exporters.js
@@ -1,14 +1,14 @@
-exports.csv = function(headers, rows) {
-  let csv = headers.map(key => `"${key}"`).join(",")
+exports.csv = function (headers, rows) {
+  let csv = headers.map((key) => `"${key}"`).join(",")
 
   for (let row of rows) {
     csv = `${csv}\n${headers
-      .map(header => `"${row[header]}"`.trim())
+      .map((header) => `"${row[header]}"`.trim())
       .join(",")}`
   }
   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/index.js b/packages/server/src/api/controllers/view/index.js
index 3d0f236fce..dc3b9c0bec 100644
--- a/packages/server/src/api/controllers/view/index.js
+++ b/packages/server/src/api/controllers/view/index.js
@@ -6,7 +6,7 @@ const { fetchView } = require("../row")
 const { ViewNames } = require("../../../db/utils")
 
 const controller = {
-  fetch: async ctx => {
+  fetch: async (ctx) => {
     const db = new CouchDB(ctx.appId)
     const designDoc = await db.get("_design/database")
     const response = []
@@ -24,7 +24,7 @@ const controller = {
 
     ctx.body = response
   },
-  save: async ctx => {
+  save: async (ctx) => {
     const db = new CouchDB(ctx.appId)
     const { originalName, ...viewToSave } = ctx.request.body
     const designDoc = await db.get("_design/database")
@@ -65,7 +65,7 @@ const controller = {
       name: viewToSave.name,
     }
   },
-  destroy: async ctx => {
+  destroy: async (ctx) => {
     const db = new CouchDB(ctx.appId)
     const designDoc = await db.get("_design/database")
     const viewName = decodeURI(ctx.params.viewName)
@@ -80,7 +80,7 @@ const controller = {
 
     ctx.body = view
   },
-  exportView: async ctx => {
+  exportView: async (ctx) => {
     const db = new CouchDB(ctx.appId)
     const designDoc = await db.get("_design/database")
     const viewName = decodeURI(ctx.query.view)
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/controllers/webhook.js b/packages/server/src/api/controllers/webhook.js
index c810f85004..f83de104fb 100644
--- a/packages/server/src/api/controllers/webhook.js
+++ b/packages/server/src/api/controllers/webhook.js
@@ -21,17 +21,17 @@ exports.WebhookType = {
   AUTOMATION: "automation",
 }
 
-exports.fetch = async ctx => {
+exports.fetch = async (ctx) => {
   const db = new CouchDB(ctx.appId)
   const response = await db.allDocs(
     getWebhookParams(null, {
       include_docs: true,
     })
   )
-  ctx.body = response.rows.map(row => row.doc)
+  ctx.body = response.rows.map((row) => row.doc)
 }
 
-exports.save = async ctx => {
+exports.save = async (ctx) => {
   const db = new CouchDB(ctx.appId)
   const webhook = ctx.request.body
   webhook.appId = ctx.appId
@@ -50,12 +50,12 @@ exports.save = async ctx => {
   }
 }
 
-exports.destroy = async ctx => {
+exports.destroy = async (ctx) => {
   const db = new CouchDB(ctx.appId)
   ctx.body = await db.remove(ctx.params.id, ctx.params.rev)
 }
 
-exports.buildSchema = async ctx => {
+exports.buildSchema = async (ctx) => {
   const db = new CouchDB(ctx.params.instance)
   const webhook = await db.get(ctx.params.id)
   webhook.bodySchema = toJsonSchema(ctx.request.body)
@@ -75,7 +75,7 @@ exports.buildSchema = async ctx => {
   ctx.body = await db.put(webhook)
 }
 
-exports.trigger = async ctx => {
+exports.trigger = async (ctx) => {
   const db = new CouchDB(ctx.params.instance)
   const webhook = await db.get(ctx.params.id)
   // validate against the schema
diff --git a/packages/server/src/api/index.js b/packages/server/src/api/index.js
index 369578d05e..1e1a9dd707 100644
--- a/packages/server/src/api/index.js
+++ b/packages/server/src/api/index.js
@@ -36,8 +36,8 @@ router
     }
     await next()
   })
-  .use("/health", ctx => (ctx.status = 200))
-  .use("/version", ctx => (ctx.body = pkg.version))
+  .use("/health", (ctx) => (ctx.status = 200))
+  .use("/version", (ctx) => (ctx.body = pkg.version))
   .use(buildAuthMiddleware(NO_AUTH_ENDPOINTS))
   .use(currentApp)
 
@@ -58,7 +58,7 @@ router.use(async (ctx, next) => {
   }
 })
 
-router.get("/health", ctx => (ctx.status = 200))
+router.get("/health", (ctx) => (ctx.status = 200))
 
 // authenticated routes
 for (let route of mainRoutes) {
diff --git a/packages/server/src/api/routes/tests/utilities/TestFunctions.js b/packages/server/src/api/routes/tests/utilities/TestFunctions.js
index 0e11dd2056..5ad3ed61be 100644
--- a/packages/server/src/api/routes/tests/utilities/TestFunctions.js
+++ b/packages/server/src/api/routes/tests/utilities/TestFunctions.js
@@ -7,7 +7,7 @@ function Request(appId, params) {
   this.params = params
 }
 
-exports.getAllTableRows = async config => {
+exports.getAllTableRows = async (config) => {
   const req = new Request(config.appId, { tableId: config.table._id })
   await rowController.fetchTableRows(req)
   return req.body
@@ -26,7 +26,7 @@ exports.clearAllApps = async () => {
   }
 }
 
-exports.clearAllAutomations = async config => {
+exports.clearAllAutomations = async (config) => {
   const automations = await config.getAllAutomations()
   for (let auto of automations) {
     await config.deleteAutomation(auto)
@@ -88,6 +88,6 @@ exports.checkPermissionsEndpoint = async ({
     .expect(403)
 }
 
-exports.getDB = config => {
+exports.getDB = (config) => {
   return new CouchDB(config.getAppId())
 }
diff --git a/packages/server/src/api/routes/tests/utilities/index.js b/packages/server/src/api/routes/tests/utilities/index.js
index e9361aa67d..b8b9e04ec3 100644
--- a/packages/server/src/api/routes/tests/utilities/index.js
+++ b/packages/server/src/api/routes/tests/utilities/index.js
@@ -11,7 +11,7 @@ jest.mock("../../../../utilities/workerRequests", () => ({
   }),
 }))
 
-exports.delay = ms => new Promise(resolve => setTimeout(resolve, ms))
+exports.delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
 
 let request, config
 
@@ -44,7 +44,7 @@ exports.getConfig = () => {
   return config
 }
 
-exports.switchToSelfHosted = async func => {
+exports.switchToSelfHosted = async (func) => {
   // self hosted stops any attempts to Dynamo
   env._set("NODE_ENV", "production")
   env._set("SELF_HOSTED", true)
diff --git a/packages/server/src/app.js b/packages/server/src/app.js
index 2f3b977bbe..87435d68a8 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)
@@ -73,7 +73,7 @@ module.exports = server.listen(env.PORT || 0, async () => {
   await automations.init()
 })
 
-process.on("uncaughtException", err => {
+process.on("uncaughtException", (err) => {
   console.error(err)
   server.close()
   server.destroy()
diff --git a/packages/server/src/automations/actions.js b/packages/server/src/automations/actions.js
index 9675568808..f211b52cd5 100644
--- a/packages/server/src/automations/actions.js
+++ b/packages/server/src/automations/actions.js
@@ -36,7 +36,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 +53,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..e50b853a9e 100644
--- a/packages/server/src/automations/index.js
+++ b/packages/server/src/automations/index.js
@@ -9,7 +9,7 @@ let workers = workerFarm(require.resolve("./thread"))
 
 function runWorker(job) {
   return new Promise((resolve, reject) => {
-    workers(job, err => {
+    workers(job, (err) => {
       if (err) {
         reject(err)
       } else {
@@ -30,9 +30,9 @@ 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 => {
+  triggers.automationQueue.process(async (job) => {
     try {
       if (env.USE_QUOTAS) {
         job.data.automation.apiKey = await updateQuota(job.data.automation)
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/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/tests/utilities/index.js b/packages/server/src/automations/tests/utilities/index.js
index ab9de55430..7f65d08690 100644
--- a/packages/server/src/automations/tests/utilities/index.js
+++ b/packages/server/src/automations/tests/utilities/index.js
@@ -17,7 +17,7 @@ exports.afterAll = () => {
   config.end()
 }
 
-exports.runInProd = async fn => {
+exports.runInProd = async (fn) => {
   env._set("NODE_ENV", "production")
   env._set("USE_QUOTAS", 1)
   let error
@@ -37,7 +37,7 @@ exports.runStep = async function runStep(stepId, inputs) {
   let step
   if (
     Object.values(exports.actions)
-      .map(action => action.stepId)
+      .map((action) => action.stepId)
       .includes(stepId)
   ) {
     step = await actions.getAction(stepId)
diff --git a/packages/server/src/automations/triggers.js b/packages/server/src/automations/triggers.js
index 7e50e5ee74..8d97e095d2 100644
--- a/packages/server/src/automations/triggers.js
+++ b/packages/server/src/automations/triggers.js
@@ -204,8 +204,8 @@ async function queueRelevantRowAutomations(event, eventType) {
 
   // filter down to the correct event type
   automations = automations.rows
-    .map(automation => automation.doc)
-    .filter(automation => {
+    .map((automation) => automation.doc)
+    .filter((automation) => {
       const trigger = automation.definition.trigger
       return trigger && trigger.event === eventType
     })
@@ -224,7 +224,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 +232,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 +240,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 +281,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/screens.js b/packages/server/src/constants/screens.js
index ac6112a63f..0634758929 100644
--- a/packages/server/src/constants/screens.js
+++ b/packages/server/src/constants/screens.js
@@ -50,7 +50,7 @@ exports.createHomeScreen = () => ({
   name: "home-screen",
 })
 
-exports.createLoginScreen = app => ({
+exports.createLoginScreen = (app) => ({
   description: "",
   url: "",
   layoutId: BASE_LAYOUT_PROP_IDS.PUBLIC,
diff --git a/packages/server/src/db/builder.js b/packages/server/src/db/builder.js
index d2bbcd404b..21ff25d327 100644
--- a/packages/server/src/db/builder.js
+++ b/packages/server/src/db/builder.js
@@ -27,7 +27,7 @@ exports.getBuilderMainDoc = async () => {
   }
 }
 
-exports.setBuilderMainDoc = async doc => {
+exports.setBuilderMainDoc = async (doc) => {
   if (!env.SELF_HOSTED) {
     throw SELF_HOST_ERR
   }
diff --git a/packages/server/src/db/client.js b/packages/server/src/db/client.js
index 3e3a4f50fe..bf86603270 100644
--- a/packages/server/src/db/client.js
+++ b/packages/server/src/db/client.js
@@ -31,7 +31,7 @@ allDbs(Pouch)
 /* istanbul ignore next */
 // eslint-disable-next-line no-unused-vars
 function replicateLocal() {
-  Pouch.allDbs().then(dbs => {
+  Pouch.allDbs().then((dbs) => {
     for (let db of dbs) {
       new Pouch(db).sync(
         new PouchDB(`http://127.0.0.1:5984/${db}`, { live: true })
diff --git a/packages/server/src/db/dynamoClient.js b/packages/server/src/db/dynamoClient.js
index 19924b1a7e..59e21c6119 100644
--- a/packages/server/src/db/dynamoClient.js
+++ b/packages/server/src/db/dynamoClient.js
@@ -100,7 +100,7 @@ class Table {
   }
 }
 
-exports.init = endpoint => {
+exports.init = (endpoint) => {
   let AWS = require("aws-sdk")
   AWS.config.update({
     region: AWS_REGION,
diff --git a/packages/server/src/db/linkedRows/LinkController.js b/packages/server/src/db/linkedRows/LinkController.js
index 53ce8e45ad..1be4bb9fec 100644
--- a/packages/server/src/db/linkedRows/LinkController.js
+++ b/packages/server/src/db/linkedRows/LinkController.js
@@ -194,11 +194,11 @@ class LinkController {
       if (field.type === FieldTypes.LINK && rowField != null) {
         // check which links actual pertain to the update in this row
         const thisFieldLinkDocs = linkDocs.filter(
-          linkDoc =>
+          (linkDoc) =>
             linkDoc.doc1.fieldName === fieldName ||
             linkDoc.doc2.fieldName === fieldName
         )
-        const linkDocIds = thisFieldLinkDocs.map(linkDoc => {
+        const linkDocIds = thisFieldLinkDocs.map((linkDoc) => {
           return linkDoc.doc1.rowId === row._id
             ? linkDoc.doc2.rowId
             : linkDoc.doc1.rowId
@@ -218,7 +218,7 @@ class LinkController {
                 rowId: linkId,
                 includeDocs: IncludeDocs.EXCLUDE,
               })
-            ).filter(link => link.id !== row._id)
+            ).filter((link) => link.id !== row._id)
 
             // The 1 side of 1:N is already related to something else
             // You must remove the existing relationship
@@ -251,12 +251,12 @@ class LinkController {
         }
         // find the docs that need to be deleted
         let toDeleteDocs = thisFieldLinkDocs
-          .filter(doc => {
+          .filter((doc) => {
             let correctDoc =
               doc.doc1.fieldName === fieldName ? doc.doc2 : doc.doc1
             return rowField.indexOf(correctDoc.rowId) === -1
           })
-          .map(doc => {
+          .map((doc) => {
             return { ...doc, _deleted: true }
           })
         // now add the docs to be deleted to the bulk operation
@@ -282,7 +282,7 @@ class LinkController {
     if (linkDocs.length === 0) {
       return null
     }
-    const toDelete = linkDocs.map(doc => {
+    const toDelete = linkDocs.map((doc) => {
       return {
         ...doc,
         _deleted: true,
@@ -301,7 +301,7 @@ class LinkController {
     let oldTable = this._oldTable
     let field = oldTable.schema[fieldName]
     const linkDocs = await this.getTableLinkDocs()
-    let toDelete = linkDocs.filter(linkDoc => {
+    let toDelete = linkDocs.filter((linkDoc) => {
       let correctFieldName =
         linkDoc.doc1.tableId === oldTable._id
           ? linkDoc.doc1.fieldName
@@ -309,7 +309,7 @@ class LinkController {
       return correctFieldName === fieldName
     })
     await this._db.bulkDocs(
-      toDelete.map(doc => {
+      toDelete.map((doc) => {
         return {
           ...doc,
           _deleted: true,
@@ -434,7 +434,7 @@ class LinkController {
       return null
     }
     // get link docs for this table and configure for deletion
-    const toDelete = linkDocs.map(doc => {
+    const toDelete = linkDocs.map((doc) => {
       return {
         ...doc,
         _deleted: true,
diff --git a/packages/server/src/db/linkedRows/index.js b/packages/server/src/db/linkedRows/index.js
index 8de2093fb2..0c129d62fa 100644
--- a/packages/server/src/db/linkedRows/index.js
+++ b/packages/server/src/db/linkedRows/index.js
@@ -33,11 +33,11 @@ exports.getLinkDocuments = getLinkDocuments
 exports.createLinkView = createLinkView
 
 async function getLinksForRows(appId, rows) {
-  const tableIds = [...new Set(rows.map(el => el.tableId))]
+  const tableIds = [...new Set(rows.map((el) => el.tableId))]
   // start by getting all the link values for performance reasons
   const responses = flatten(
     await Promise.all(
-      tableIds.map(tableId =>
+      tableIds.map((tableId) =>
         getLinkDocuments({
           appId,
           tableId: tableId,
@@ -51,7 +51,7 @@ async function getLinksForRows(appId, rows) {
   return getUniqueByProp(
     responses
       // create a unique ID which we can use for getting only unique ones
-      .map(el => ({ ...el, unique: el.id + el.thisId + el.fieldName })),
+      .map((el) => ({ ...el, unique: el.id + el.thisId + el.fieldName })),
     "unique"
   )
 }
@@ -68,7 +68,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,
@@ -127,8 +127,8 @@ exports.attachLinkIDs = async (appId, rows) => {
   for (let row of rows) {
     // find anything that matches the row's ID we are searching for and join it
     links
-      .filter(el => el.thisId === row._id)
-      .forEach(link => {
+      .filter((el) => el.thisId === row._id)
+      .forEach((link) => {
         if (row[link.fieldName] == null) {
           row[link.fieldName] = []
         }
@@ -154,21 +154,21 @@ exports.attachLinkedPrimaryDisplay = async (appId, table, rows) => {
     return rows
   }
   const db = new CouchDB(appId)
-  const links = (await getLinksForRows(appId, rows)).filter(link =>
-    rows.some(row => row._id === link.thisId)
+  const links = (await getLinksForRows(appId, rows)).filter((link) =>
+    rows.some((row) => row._id === link.thisId)
   )
-  const linkedRowIds = links.map(link => link.id)
+  const linkedRowIds = links.map((link) => link.id)
   const linked = (await db.allDocs(getMultiIDParams(linkedRowIds))).rows.map(
-    row => row.doc
+    (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)) {
+    for (let link of links.filter((link) => link.thisId === row._id)) {
       if (row[link.fieldName] == null) {
         row[link.fieldName] = []
       }
-      const linkedRow = linked.find(row => row._id === link.id)
+      const linkedRow = linked.find((row) => row._id === link.id)
       const linkedTableId =
         linkedRow.tableId || getRelatedTableForField(table, link.fieldName)
       const linkedTable = await getLinkedTable(db, linkedTableId, linkedTables)
diff --git a/packages/server/src/db/linkedRows/linkUtils.js b/packages/server/src/db/linkedRows/linkUtils.js
index 9200a05b98..6c28918555 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,
@@ -49,7 +49,7 @@ exports.getLinkDocuments = async function({
     let linkRows = (await db.query(getQueryIndex(ViewNames.LINK), params)).rows
     // filter to get unique entries
     const foundIds = []
-    linkRows = linkRows.filter(link => {
+    linkRows = linkRows.filter((link) => {
       // make sure anything unique is the correct key
       if (
         (tableId && link.key[0] !== tableId) ||
@@ -65,9 +65,9 @@ exports.getLinkDocuments = async function({
     })
 
     if (includeDocs) {
-      return linkRows.map(row => row.doc)
+      return linkRows.map((row) => row.doc)
     } else {
-      return linkRows.map(row => row.value)
+      return linkRows.map((row) => row.value)
     }
   } catch (err) {
     // check if the view doesn't exist, it should for all new instances
@@ -83,18 +83,18 @@ exports.getLinkDocuments = async function({
 
 exports.getUniqueByProp = (array, prop) => {
   return array.filter((obj, pos, arr) => {
-    return arr.map(mapObj => mapObj[prop]).indexOf(obj[prop]) === pos
+    return arr.map((mapObj) => mapObj[prop]).indexOf(obj[prop]) === pos
   })
 }
 
-exports.getLinkedTableIDs = table => {
+exports.getLinkedTableIDs = (table) => {
   return Object.values(table.schema)
-    .filter(column => column.type === FieldTypes.LINK)
-    .map(column => column.tableId)
+    .filter((column) => column.type === FieldTypes.LINK)
+    .map((column) => column.tableId)
 }
 
 exports.getLinkedTable = async (db, id, tables) => {
-  let linkedTable = tables.find(table => table._id === id)
+  let linkedTable = tables.find((table) => table._id === id)
   if (linkedTable) {
     return linkedTable
   }
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/utils.js b/packages/server/src/db/utils.js
index bbed248cf8..0d492cde33 100644
--- a/packages/server/src/db/utils.js
+++ b/packages/server/src/db/utils.js
@@ -52,7 +52,7 @@ exports.SEPARATOR = SEPARATOR
 exports.UNICODE_MAX = UNICODE_MAX
 exports.SearchIndexes = SearchIndexes
 
-exports.getQueryIndex = viewName => {
+exports.getQueryIndex = (viewName) => {
   return `database/${viewName}`
 }
 
@@ -135,14 +135,14 @@ exports.getUserMetadataParams = (userId = null, otherProps = {}) => {
  * @param {string} globalId The ID of the global user.
  * @returns {string} The new user ID which the user doc can be stored under.
  */
-exports.generateUserMetadataID = globalId => {
+exports.generateUserMetadataID = (globalId) => {
   return exports.generateRowID(InternalTables.USER_METADATA, globalId)
 }
 
 /**
  * Breaks up the ID to get the global ID.
  */
-exports.getGlobalIDFromUserMetadataID = id => {
+exports.getGlobalIDFromUserMetadataID = (id) => {
   return id.split(
     `${DocumentTypes.ROW}${SEPARATOR}${InternalTables.USER_METADATA}${SEPARATOR}`
   )[1]
@@ -214,7 +214,7 @@ exports.getAppParams = (appId = null, otherProps = {}) => {
  * Generates a new role ID.
  * @returns {string} The new role ID which the role doc can be stored under.
  */
-exports.generateRoleID = id => {
+exports.generateRoleID = (id) => {
   return `${DocumentTypes.ROLE}${SEPARATOR}${id || newid()}`
 }
 
@@ -229,7 +229,7 @@ exports.getRoleParams = (roleId = null, otherProps = {}) => {
  * Generates a new layout ID.
  * @returns {string} The new layout ID which the layout doc can be stored under.
  */
-exports.generateLayoutID = id => {
+exports.generateLayoutID = (id) => {
   return `${DocumentTypes.LAYOUT}${SEPARATOR}${id || newid()}`
 }
 
@@ -289,7 +289,7 @@ exports.getDatasourceParams = (datasourceId = null, otherProps = {}) => {
  * Generates a new query ID.
  * @returns {string} The new query ID which the query doc can be stored under.
  */
-exports.generateQueryID = datasourceId => {
+exports.generateQueryID = (datasourceId) => {
   return `${
     DocumentTypes.QUERY
   }${SEPARATOR}${datasourceId}${SEPARATOR}${newid()}`
@@ -313,7 +313,7 @@ exports.getQueryParams = (datasourceId = null, otherProps = {}) => {
 /**
  * This can be used with the db.allDocs to get a list of IDs
  */
-exports.getMultiIDParams = ids => {
+exports.getMultiIDParams = (ids) => {
   return {
     keys: ids,
     include_docs: true,
diff --git a/packages/server/src/db/views/staticViews.js b/packages/server/src/db/views/staticViews.js
index 305d042217..f1fcd05275 100644
--- a/packages/server/src/db/views/staticViews.js
+++ b/packages/server/src/db/views/staticViews.js
@@ -25,11 +25,11 @@ const SCREEN_PREFIX = DocumentTypes.SCREEN + SEPARATOR
  * @returns {Promise<void>} The view now exists, please note that the next view of this query will actually build it,
  * so it may be slow.
  */
-exports.createLinkView = async appId => {
+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
@@ -57,7 +57,7 @@ exports.createLinkView = async appId => {
   await db.put(designDoc)
 }
 
-exports.createRoutingView = async appId => {
+exports.createRoutingView = async (appId) => {
   const db = new CouchDB(appId)
   const designDoc = await db.get("_design/database")
   const view = {
@@ -89,11 +89,11 @@ async function searchIndex(appId, indexName, fnString) {
   await db.put(designDoc)
 }
 
-exports.createAllSearchIndex = async appId => {
+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/integrations/couchdb.js b/packages/server/src/integrations/couchdb.js
index df58b0e487..3dd6a5898f 100644
--- a/packages/server/src/integrations/couchdb.js
+++ b/packages/server/src/integrations/couchdb.js
@@ -61,7 +61,7 @@ class CouchDBIntegration {
         include_docs: true,
         ...query.json,
       })
-      return result.rows.map(row => row.doc)
+      return result.rows.map((row) => row.doc)
     } catch (err) {
       console.error("Error querying couchDB", err)
       throw err
diff --git a/packages/server/src/middleware/joi-validator.js b/packages/server/src/middleware/joi-validator.js
index 1686b0e727..8e5feab255 100644
--- a/packages/server/src/middleware/joi-validator.js
+++ b/packages/server/src/middleware/joi-validator.js
@@ -19,10 +19,10 @@ function validate(schema, property) {
   }
 }
 
-module.exports.body = schema => {
+module.exports.body = (schema) => {
   return validate(schema, "body")
 }
 
-module.exports.params = schema => {
+module.exports.params = (schema) => {
   return validate(schema, "params")
 }
diff --git a/packages/server/src/middleware/resourceId.js b/packages/server/src/middleware/resourceId.js
index 4216131119..1c677f6b9e 100644
--- a/packages/server/src/middleware/resourceId.js
+++ b/packages/server/src/middleware/resourceId.js
@@ -38,7 +38,7 @@ class ResourceIdGetter {
 
 module.exports.ResourceIdGetter = ResourceIdGetter
 
-module.exports.paramResource = main => {
+module.exports.paramResource = (main) => {
   return new ResourceIdGetter("params").mainResource(main).build()
 }
 
@@ -49,7 +49,7 @@ module.exports.paramSubResource = (main, sub) => {
     .build()
 }
 
-module.exports.bodyResource = main => {
+module.exports.bodyResource = (main) => {
   return new ResourceIdGetter("body").mainResource(main).build()
 }
 
diff --git a/packages/server/src/middleware/usageQuota.js b/packages/server/src/middleware/usageQuota.js
index ac8336e769..02d1f6d13c 100644
--- a/packages/server/src/middleware/usageQuota.js
+++ b/packages/server/src/middleware/usageQuota.js
@@ -54,7 +54,7 @@ module.exports = async (ctx, next) => {
       ctx.request.files.file.length > 1
         ? Array.from(ctx.request.files.file)
         : [ctx.request.files.file]
-    usage = files.map(file => file.size).reduce((total, size) => total + size)
+    usage = files.map((file) => file.size).reduce((total, size) => total + size)
   }
   try {
     await usageQuota.update(ctx.auth.apiKey, property, usage)
diff --git a/packages/server/src/tests/utilities/TestConfiguration.js b/packages/server/src/tests/utilities/TestConfiguration.js
index c031cf082d..34d5bf0da5 100644
--- a/packages/server/src/tests/utilities/TestConfiguration.js
+++ b/packages/server/src/tests/utilities/TestConfiguration.js
@@ -89,7 +89,7 @@ class TestConfiguration {
     if (this.server) {
       this.server.close()
     }
-    cleanup(this.allApps.map(app => app._id))
+    cleanup(this.allApps.map((app) => app._id))
   }
 
   defaultHeaders() {
diff --git a/packages/server/src/tests/utilities/index.js b/packages/server/src/tests/utilities/index.js
index aa8039ce2f..46bbae470a 100644
--- a/packages/server/src/tests/utilities/index.js
+++ b/packages/server/src/tests/utilities/index.js
@@ -1,4 +1,4 @@
-exports.makePartial = obj => {
+exports.makePartial = (obj) => {
   const newObj = {}
   for (let key of Object.keys(obj)) {
     if (typeof obj[key] === "object") {
diff --git a/packages/server/src/tests/utilities/structures.js b/packages/server/src/tests/utilities/structures.js
index 5e27ff4a3b..b3a103adf2 100644
--- a/packages/server/src/tests/utilities/structures.js
+++ b/packages/server/src/tests/utilities/structures.js
@@ -44,7 +44,7 @@ exports.basicAutomation = () => {
   }
 }
 
-exports.basicRow = tableId => {
+exports.basicRow = (tableId) => {
   return {
     name: "Test Contact",
     description: "original description",
@@ -78,7 +78,7 @@ exports.basicDatasource = () => {
   }
 }
 
-exports.basicQuery = datasourceId => {
+exports.basicQuery = (datasourceId) => {
   return {
     datasourceId: datasourceId,
     name: "New Query",
@@ -89,7 +89,7 @@ exports.basicQuery = datasourceId => {
   }
 }
 
-exports.basicUser = role => {
+exports.basicUser = (role) => {
   return {
     email: "bill@bill.com",
     password: "yeeooo",
@@ -105,7 +105,7 @@ exports.basicLayout = () => {
   return cloneDeep(EMPTY_LAYOUT)
 }
 
-exports.basicWebhook = automationId => {
+exports.basicWebhook = (automationId) => {
   return {
     live: true,
     name: "webhook",
diff --git a/packages/server/src/utilities/bcrypt.js b/packages/server/src/utilities/bcrypt.js
index 6c52d2c2c7..1457afb350 100644
--- a/packages/server/src/utilities/bcrypt.js
+++ b/packages/server/src/utilities/bcrypt.js
@@ -5,7 +5,7 @@ const env = require("../environment")
 
 const SALT_ROUNDS = env.SALT_ROUNDS || 10
 
-exports.hash = async data => {
+exports.hash = async (data) => {
   const salt = await bcrypt.genSalt(SALT_ROUNDS)
   const result = await bcrypt.hash(data, salt)
   return result
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/builder/hosting.js b/packages/server/src/utilities/builder/hosting.js
index 271e4a1b07..73ce93e261 100644
--- a/packages/server/src/utilities/builder/hosting.js
+++ b/packages/server/src/utilities/builder/hosting.js
@@ -42,7 +42,7 @@ exports.getHostingInfo = async () => {
   return doc
 }
 
-exports.getAppUrl = async appId => {
+exports.getAppUrl = async (appId) => {
   const hostingInfo = await exports.getHostingInfo()
   const protocol = getProtocol(hostingInfo)
   let url
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/csvParser.js b/packages/server/src/utilities/csvParser.js
index 3ae020eb65..fe63eb9075 100644
--- a/packages/server/src/utilities/csvParser.js
+++ b/packages/server/src/utilities/csvParser.js
@@ -2,13 +2,13 @@ const csv = require("csvtojson")
 
 const VALIDATORS = {
   string: () => true,
-  number: attribute => !isNaN(Number(attribute)),
-  datetime: attribute => !isNaN(new Date(attribute).getTime()),
+  number: (attribute) => !isNaN(Number(attribute)),
+  datetime: (attribute) => !isNaN(new Date(attribute).getTime()),
 }
 
 const PARSERS = {
-  number: attribute => Number(attribute),
-  datetime: attribute => new Date(attribute).toISOString(),
+  number: (attribute) => Number(attribute),
+  datetime: (attribute) => new Date(attribute).toISOString(),
 }
 
 function parse(csvString, parsers) {
@@ -17,7 +17,7 @@ function parse(csvString, parsers) {
   const schema = {}
 
   return new Promise((resolve, reject) => {
-    result.on("header", headers => {
+    result.on("header", (headers) => {
       for (let header of headers) {
         schema[header] = {
           type: parsers[header] ? parsers[header].type : "string",
@@ -25,7 +25,7 @@ function parse(csvString, parsers) {
         }
       }
     })
-    result.subscribe(row => {
+    result.subscribe((row) => {
       // For each CSV row parse all the columns that need parsed
       for (let key in parsers) {
         if (!schema[key] || schema[key].success) {
@@ -41,7 +41,7 @@ function parse(csvString, parsers) {
         }
       }
     })
-    result.on("done", error => {
+    result.on("done", (error) => {
       if (error) {
         console.error(error)
         reject(error)
diff --git a/packages/server/src/utilities/fileSystem/index.js b/packages/server/src/utilities/fileSystem/index.js
index d84c6deb8a..64a9960c80 100644
--- a/packages/server/src/utilities/fileSystem/index.js
+++ b/packages/server/src/utilities/fileSystem/index.js
@@ -73,7 +73,7 @@ exports.checkDevelopmentEnvironment = () => {
  * @param {Object} template The template object retrieved from the Koa context object.
  * @returns {Object} Returns an fs read stream which can be loaded into the database.
  */
-exports.getTemplateStream = async template => {
+exports.getTemplateStream = async (template) => {
   if (template.file) {
     return fs.createReadStream(template.file.path)
   } else {
@@ -89,7 +89,7 @@ exports.getTemplateStream = async template => {
  * @param {string} path The path to the handlebars file which is to be loaded.
  * @returns {string} The loaded handlebars file as a string - loaded as utf8.
  */
-exports.loadHandlebarsFile = path => {
+exports.loadHandlebarsFile = (path) => {
   return fs.readFileSync(path, "utf8")
 }
 
@@ -99,7 +99,7 @@ exports.loadHandlebarsFile = path => {
  * @param {string} contents the contents of the file which is to be returned from the API.
  * @return {Object} the read stream which can be put into the koa context body.
  */
-exports.apiFileReturn = contents => {
+exports.apiFileReturn = (contents) => {
   const path = join(budibaseTempDir(), uuid())
   fs.writeFileSync(path, contents)
   return fs.createReadStream(path)
@@ -132,7 +132,7 @@ exports.performBackup = async (appId, backupName) => {
  * @param {string} appId The ID of the app which is being created.
  * @return {Promise<void>} once promise completes app resources should be ready in object store.
  */
-exports.createApp = async appId => {
+exports.createApp = async (appId) => {
   await downloadLibraries(appId)
   await newAppPublicPath(appId)
 }
@@ -142,7 +142,7 @@ exports.createApp = async appId => {
  * @param {string} appId The ID of the app which is being deleted.
  * @return {Promise<void>} once promise completes the app resources will be removed from object store.
  */
-exports.deleteApp = async appId => {
+exports.deleteApp = async (appId) => {
   await deleteFolder(ObjectStoreBuckets.APPS, `${appId}/`)
 }
 
@@ -225,7 +225,7 @@ exports.readFileSync = (filepath, options = "utf8") => {
 /**
  * Given a set of app IDs makes sure file system is cleared of any of their temp info.
  */
-exports.cleanup = appIds => {
+exports.cleanup = (appIds) => {
   for (let appId of appIds) {
     fs.rmdirSync(join(budibaseTempDir(), appId), { recursive: true })
   }
diff --git a/packages/server/src/utilities/fileSystem/newApp.js b/packages/server/src/utilities/fileSystem/newApp.js
index 91cc771743..ae2c6d1bbd 100644
--- a/packages/server/src/utilities/fileSystem/newApp.js
+++ b/packages/server/src/utilities/fileSystem/newApp.js
@@ -8,7 +8,7 @@ const BUCKET_NAME = ObjectStoreBuckets.APPS
 
 // can't really test this due to the downloading nature of it, wouldn't be a great test case
 /* istanbul ignore next */
-exports.downloadLibraries = async appId => {
+exports.downloadLibraries = async (appId) => {
   const LIBRARIES = ["standard-components"]
 
   const paths = {}
@@ -26,7 +26,7 @@ exports.downloadLibraries = async appId => {
   return paths
 }
 
-exports.newAppPublicPath = async appId => {
+exports.newAppPublicPath = async (appId) => {
   const path = join(appId, "public")
   const sourcepath = require.resolve("@budibase/client")
   const destPath = join(path, "budibase-client.js")
diff --git a/packages/server/src/utilities/fileSystem/processor.js b/packages/server/src/utilities/fileSystem/processor.js
index 3778b50168..1ad608bf1c 100644
--- a/packages/server/src/utilities/fileSystem/processor.js
+++ b/packages/server/src/utilities/fileSystem/processor.js
@@ -6,7 +6,7 @@ const FORMATS = {
 
 function processImage(file) {
   // this will overwrite the temp file
-  return jimp.read(file.path).then(img => {
+  return jimp.read(file.path).then((img) => {
     return img.resize(300, jimp.AUTO).write(file.path)
   })
 }
diff --git a/packages/server/src/utilities/fileSystem/utilities.js b/packages/server/src/utilities/fileSystem/utilities.js
index b586cfcfe5..8103b734dd 100644
--- a/packages/server/src/utilities/fileSystem/utilities.js
+++ b/packages/server/src/utilities/fileSystem/utilities.js
@@ -53,7 +53,7 @@ const PUBLIC_BUCKETS = [ObjectStoreBuckets.APPS]
  * @return {Object} an S3 object store object, check S3 Nodejs SDK for usage.
  * @constructor
  */
-exports.ObjectStore = bucket => {
+exports.ObjectStore = (bucket) => {
   if (env.SELF_HOSTED) {
     AWS.config.update({
       accessKeyId: env.MINIO_ACCESS_KEY,
@@ -199,7 +199,7 @@ exports.deleteFolder = async (bucket, folder) => {
     },
   }
 
-  response.Contents.forEach(content => {
+  response.Contents.forEach((content) => {
     deleteParams.Delete.Objects.push({ Key: content.Key })
   })
 
diff --git a/packages/server/src/utilities/index.js b/packages/server/src/utilities/index.js
index d9aeae60df..041e558004 100644
--- a/packages/server/src/utilities/index.js
+++ b/packages/server/src/utilities/index.js
@@ -1,12 +1,12 @@
 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
 
-exports.wait = ms => new Promise(resolve => setTimeout(resolve, ms))
+exports.wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
 
 exports.isDev = env.isDev
 
@@ -19,14 +19,14 @@ exports.isDev = env.isDev
  */
 exports.getAllApps = async () => {
   let allDbs = await CouchDB.allDbs()
-  const appDbNames = allDbs.filter(dbName => dbName.startsWith(APP_PREFIX))
-  const appPromises = appDbNames.map(db => new CouchDB(db).get(db))
+  const appDbNames = allDbs.filter((dbName) => dbName.startsWith(APP_PREFIX))
+  const appPromises = appDbNames.map((db) => new CouchDB(db).get(db))
   if (appPromises.length === 0) {
     return []
   } else {
     const response = await Promise.allSettled(appPromises)
     return response
-      .filter(result => result.status === "fulfilled")
+      .filter((result) => result.status === "fulfilled")
       .map(({ value }) => value)
   }
 }
@@ -37,7 +37,7 @@ exports.getAllApps = async () => {
  * @param {string} url The URL to test and remove any extra double slashes.
  * @return {string} The updated url.
  */
-exports.checkSlashesInUrl = url => {
+exports.checkSlashesInUrl = (url) => {
   return url.replace(/(https?:\/\/)|(\/)+/g, "$1$2")
 }
 
@@ -63,10 +63,16 @@ exports.objectStoreUrl = () => {
  * @return {string} The URL to be inserted into appPackage response or server rendered
  * app index file.
  */
-exports.clientLibraryPath = appId => {
+exports.clientLibraryPath = (appId) => {
   if (env.isProd()) {
     return `${exports.objectStoreUrl()}/${appId}/budibase-client.js`
   } else {
     return `/api/assets/client`
   }
 }
+
+exports.attachmentsRelativeURL = (attachmentKey) => {
+  return exports.checkSlashesInUrl(
+    `/${ObjectStoreBuckets.APPS}/${attachmentKey}`
+  )
+}
diff --git a/packages/server/src/utilities/routing/index.js b/packages/server/src/utilities/routing/index.js
index 541733dcc4..223eef7664 100644
--- a/packages/server/src/utilities/routing/index.js
+++ b/packages/server/src/utilities/routing/index.js
@@ -2,14 +2,14 @@ const CouchDB = require("../../db")
 const { createRoutingView } = require("../../db/views/staticViews")
 const { ViewNames, getQueryIndex, UNICODE_MAX } = require("../../db/utils")
 
-exports.getRoutingInfo = async appId => {
+exports.getRoutingInfo = async (appId) => {
   const db = new CouchDB(appId)
   try {
     const allRouting = await db.query(getQueryIndex(ViewNames.ROUTING), {
       startKey: "",
       endKey: UNICODE_MAX,
     })
-    return allRouting.rows.map(row => row.value)
+    return allRouting.rows.map((row) => row.value)
   } catch (err) {
     // check if the view doesn't exist, it should for all new instances
     /* istanbul ignore next */
diff --git a/packages/server/src/utilities/rowProcessor.js b/packages/server/src/utilities/rowProcessor.js
index c0c3aff8ae..28a0ee51ac 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 { ObjectStoreBuckets } = require("../constants")
 const linkRows = require("../db/linkedRows")
 const { cloneDeep } = require("lodash/fp")
 const { FieldTypes, AutoFieldSubTypes } = require("../constants")
+const { attachmentsRelativeURL } = require("./index")
 
 const BASE_AUTO_ID = 1
 
@@ -14,9 +14,9 @@ const TYPE_TRANSFORM_MAP = {
     "": [],
     [null]: [],
     [undefined]: undefined,
-    parse: link => {
+    parse: (link) => {
       if (Array.isArray(link) && typeof link[0] === "object") {
-        return link.map(el => (el && el._id ? el._id : el))
+        return link.map((el) => (el && el._id ? el._id : el))
       }
       if (typeof link === "string") {
         return [link]
@@ -43,13 +43,13 @@ const TYPE_TRANSFORM_MAP = {
     "": null,
     [null]: null,
     [undefined]: undefined,
-    parse: n => parseFloat(n),
+    parse: (n) => parseFloat(n),
   },
   [FieldTypes.DATETIME]: {
     "": null,
     [undefined]: undefined,
     [null]: null,
-    parse: date => {
+    parse: (date) => {
       if (date instanceof Date) {
         return date.toISOString()
       }
@@ -180,18 +180,15 @@ exports.outputProcessing = async (appId, table, rows) => {
     rows
   )
   // 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 outputRows) {
+        if (row[property] == null || row[property].length === 0) {
+          continue
         }
+        row[property].forEach((attachment) => {
+          attachment.url = attachmentsRelativeURL(attachment.key)
+        })
       }
     }
   }
diff --git a/packages/server/src/utilities/security/permissions.js b/packages/server/src/utilities/security/permissions.js
index 03fa5fa562..33d42a9414 100644
--- a/packages/server/src/utilities/security/permissions.js
+++ b/packages/server/src/utilities/security/permissions.js
@@ -126,9 +126,9 @@ exports.getBuiltinPermissions = () => {
   return cloneDeep(BUILTIN_PERMISSIONS)
 }
 
-exports.getBuiltinPermissionByID = id => {
+exports.getBuiltinPermissionByID = (id) => {
   const perms = Object.values(BUILTIN_PERMISSIONS)
-  return perms.find(perm => perm._id === id)
+  return perms.find((perm) => perm._id === id)
 }
 
 exports.doesHaveResourcePermission = (
@@ -163,8 +163,8 @@ exports.doesHaveBasePermission = (permType, permLevel, permissionIds) => {
   const builtins = Object.values(BUILTIN_PERMISSIONS)
   let permissions = flatten(
     builtins
-      .filter(builtin => permissionIds.indexOf(builtin._id) !== -1)
-      .map(builtin => builtin.permissions)
+      .filter((builtin) => permissionIds.indexOf(builtin._id) !== -1)
+      .map((builtin) => builtin.permissions)
   )
   for (let permission of permissions) {
     if (
@@ -181,7 +181,7 @@ exports.higherPermission = (perm1, perm2) => {
   return levelToNumber(perm1) > levelToNumber(perm2) ? perm1 : perm2
 }
 
-exports.isPermissionLevelHigherThanRead = level => {
+exports.isPermissionLevelHigherThanRead = (level) => {
   return levelToNumber(level) > 1
 }
 
diff --git a/packages/server/src/utilities/security/roles.js b/packages/server/src/utilities/security/roles.js
index b0cd843591..3517235d00 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
 }
@@ -49,15 +49,15 @@ exports.getBuiltinRoles = () => {
 }
 
 exports.BUILTIN_ROLE_ID_ARRAY = Object.values(BUILTIN_ROLES).map(
-  role => role._id
+  (role) => role._id
 )
 
 exports.BUILTIN_ROLE_NAME_ARRAY = Object.values(BUILTIN_ROLES).map(
-  role => role.name
+  (role) => role.name
 )
 
 function isBuiltin(role) {
-  return exports.BUILTIN_ROLE_ID_ARRAY.some(builtin => role.includes(builtin))
+  return exports.BUILTIN_ROLE_ID_ARRAY.some((builtin) => role.includes(builtin))
 }
 
 /**
@@ -112,7 +112,7 @@ exports.getRole = async (appId, roleId) => {
   // but can be extended by a doc stored about them (e.g. permissions)
   if (isBuiltin(roleId)) {
     role = cloneDeep(
-      Object.values(BUILTIN_ROLES).find(role => role._id === roleId)
+      Object.values(BUILTIN_ROLES).find((role) => role._id === roleId)
     )
   }
   try {
@@ -163,7 +163,7 @@ async function getAllUserRoles(appId, userRoleId) {
  */
 exports.getUserRoleHierarchy = async (appId, userRoleId) => {
   // special case, if they don't have a role then they are a public user
-  return (await getAllUserRoles(appId, userRoleId)).map(role => role._id)
+  return (await getAllUserRoles(appId, userRoleId)).map((role) => role._id)
 }
 
 /**
@@ -176,7 +176,7 @@ exports.getUserRoleHierarchy = async (appId, userRoleId) => {
 exports.getUserPermissions = async (appId, userRoleId) => {
   const rolesHierarchy = await getAllUserRoles(appId, userRoleId)
   const basePermissions = [
-    ...new Set(rolesHierarchy.map(role => role.permissionId)),
+    ...new Set(rolesHierarchy.map((role) => role.permissionId)),
   ]
   const permissions = {}
   for (let role of rolesHierarchy) {
@@ -245,7 +245,7 @@ class AccessController {
 /**
  * Adds the "role_" for builtin role IDs which are to be written to the DB (for permissions).
  */
-exports.getDBRoleID = roleId => {
+exports.getDBRoleID = (roleId) => {
   if (roleId.startsWith(DocumentTypes.ROLE)) {
     return roleId
   }
@@ -255,7 +255,7 @@ exports.getDBRoleID = roleId => {
 /**
  * Remove the "role_" from builtin role IDs that have been written to the DB (for permissions).
  */
-exports.getExternalRoleID = roleId => {
+exports.getExternalRoleID = (roleId) => {
   // for built in roles we want to remove the DB role ID element (role_)
   if (roleId.startsWith(DocumentTypes.ROLE) && isBuiltin(roleId)) {
     return roleId.split(`${DocumentTypes.ROLE}${SEPARATOR}`)[1]
diff --git a/packages/server/src/utilities/security/utilities.js b/packages/server/src/utilities/security/utilities.js
index f22b11dbd3..1cd6543dcb 100644
--- a/packages/server/src/utilities/security/utilities.js
+++ b/packages/server/src/utilities/security/utilities.js
@@ -15,8 +15,8 @@ const CURRENTLY_SUPPORTED_LEVELS = [
   PermissionLevels.READ,
 ]
 
-exports.getPermissionType = resourceId => {
-  const docType = Object.values(DocumentTypes).filter(docType =>
+exports.getPermissionType = (resourceId) => {
+  const docType = Object.values(DocumentTypes).filter((docType) =>
     resourceId.startsWith(docType)
   )[0]
   switch (docType) {
@@ -41,7 +41,7 @@ exports.getPermissionType = resourceId => {
  * @param resourceId
  * @returns {{}}
  */
-exports.getBasePermissions = resourceId => {
+exports.getBasePermissions = (resourceId) => {
   const type = exports.getPermissionType(resourceId)
   const permissions = {}
   for (let [roleId, role] of Object.entries(getBuiltinRoles())) {
@@ -49,7 +49,7 @@ exports.getBasePermissions = resourceId => {
       continue
     }
     const perms = getBuiltinPermissionByID(role.permissionId)
-    const typedPermission = perms.permissions.find(perm => perm.type === type)
+    const typedPermission = perms.permissions.find((perm) => perm.type === type)
     if (
       typedPermission &&
       CURRENTLY_SUPPORTED_LEVELS.indexOf(typedPermission.level) !== -1
diff --git a/packages/server/src/utilities/usageQuota.js b/packages/server/src/utilities/usageQuota.js
index d042d290d5..77844f771f 100644
--- a/packages/server/src/utilities/usageQuota.js
+++ b/packages/server/src/utilities/usageQuota.js
@@ -49,7 +49,7 @@ exports.Properties = {
   AUTOMATION: "automationRuns",
 }
 
-exports.getAPIKey = async appId => {
+exports.getAPIKey = async (appId) => {
   if (!env.USE_QUOTAS) {
     return { apiKey: null }
   }
diff --git a/packages/server/src/utilities/workerRequests.js b/packages/server/src/utilities/workerRequests.js
index 2de74aa155..2dea9b1a30 100644
--- a/packages/server/src/utilities/workerRequests.js
+++ b/packages/server/src/utilities/workerRequests.js
@@ -34,7 +34,7 @@ function request(ctx, request) {
 
 exports.request = request
 
-exports.getDeployedApps = async ctx => {
+exports.getDeployedApps = async (ctx) => {
   if (!env.SELF_HOSTED) {
     throw "Can only check apps for self hosted environments"
   }
@@ -84,7 +84,7 @@ exports.getGlobalUsers = async (ctx, appId = null, globalId = null) => {
     return users
   }
   if (Array.isArray(users)) {
-    users = users.map(user => getAppRole(appId, user))
+    users = users.map((user) => getAppRole(appId, user))
   } else {
     users = getAppRole(appId, users)
   }
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..16d2beeb08 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -23,8 +23,6 @@
   ],
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.5",
-    "lodash": "^4.17.15",
-    "sirv-cli": "^0.4.4",
     "svelte": "^3.35.0",
     "vite": "^2.1.5"
   },
@@ -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/scripts/deploy.js b/packages/standard-components/scripts/deploy.js
index e0a63d0607..2d5cc9a778 100644
--- a/packages/standard-components/scripts/deploy.js
+++ b/packages/standard-components/scripts/deploy.js
@@ -36,6 +36,6 @@ run()
   .then(() => {
     console.log(`Deployment complete, version ${packageJson.version}`)
   })
-  .catch(err => {
+  .catch((err) => {
     console.error(err)
   })
diff --git a/packages/standard-components/src/DataProvider.svelte b/packages/standard-components/src/DataProvider.svelte
index e7feb804f3..83de1ceb66 100644
--- a/packages/standard-components/src/DataProvider.svelte
+++ b/packages/standard-components/src/DataProvider.svelte
@@ -103,6 +103,8 @@
   }
 </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/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/ApexOptionsBuilder.js b/packages/standard-components/src/charts/ApexOptionsBuilder.js
index 5c2ae1eb05..d1c93e99a0 100644
--- a/packages/standard-components/src/charts/ApexOptionsBuilder.js
+++ b/packages/standard-components/src/charts/ApexOptionsBuilder.js
@@ -1,8 +1,8 @@
 export class ApexOptionsBuilder {
   formatters = {
-    ["Default"]: val => Math.round(val * 100) / 100,
-    ["Thousands"]: val => `${Math.round(val / 1000)}K`,
-    ["Millions"]: val => `${Math.round(val / 1000000)}M`,
+    ["Default"]: (val) => Math.round(val * 100) / 100,
+    ["Thousands"]: (val) => `${Math.round(val / 1000)}K`,
+    ["Millions"]: (val) => `${Math.round(val / 1000000)}M`,
   }
   options = {
     series: [],
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..fbc5ef0426 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,25 @@
   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
@@ -30,16 +39,12 @@
   bind:fieldState
   bind:fieldApi
   defaultValue={[]}>
-  {#if mounted}
-    <div class:disabled={$fieldState.disabled}>
-      <Dropzone bind:files={value} />
-    </div>
+  {#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..95b672b63a 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
@@ -24,37 +20,12 @@
   bind:fieldApi
   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..5acb4d499a 100644
--- a/packages/standard-components/src/forms/DateTimeField.svelte
+++ b/packages/standard-components/src/forms/DateTimeField.svelte
@@ -1,146 +1,26 @@
 <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/Form.svelte b/packages/standard-components/src/forms/Form.svelte
index 5e810d5086..e35bee0554 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,
     })
   }
diff --git a/packages/standard-components/src/forms/LongFormField.svelte b/packages/standard-components/src/forms/LongFormField.svelte
index a5ef5d94ed..c9673ac4d7 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
@@ -47,35 +19,13 @@
   bind:fieldState
   bind:fieldApi
   defaultValue="">
-  {#if mounted}
-    <div class:disabled={$fieldState.disabled}>
-      <RichText bind:value {options} />
-    </div>
+  {#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..29ab4be584 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
@@ -33,14 +21,13 @@
   bind:fieldApi
   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..2dd884f89a 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>
 
@@ -98,12 +69,16 @@
   bind:fieldApi
   bind:fieldSchema
   defaultValue={[]}>
-  <Picker
-    {fieldState}
-    {fieldText}
-    {options}
-    {isOptionSelected}
-    onSelectOption={toggleOption}
-    getOptionLabel={getDisplayName}
-    getOptionValue={option => option._id} />
+  {#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..26895710fb 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,25 +10,6 @@
 
   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
@@ -39,34 +20,13 @@
   bind:fieldState
   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/forms/validation.js b/packages/standard-components/src/forms/validation.js
index 5b49fa0848..bef2b6e40f 100644
--- a/packages/standard-components/src/forms/validation.js
+++ b/packages/standard-components/src/forms/validation.js
@@ -21,11 +21,15 @@ export const createValidatorFromConstraints = (constraints, field, table) => {
     // Min / max number constraint
     if (exists(constraints.numericality?.greaterThanOrEqualTo)) {
       const min = constraints.numericality.greaterThanOrEqualTo
-      checks.push(numericalConstraint(x => x >= min, `Minimum value is ${min}`))
+      checks.push(
+        numericalConstraint((x) => x >= min, `Minimum value is ${min}`)
+      )
     }
     if (exists(constraints.numericality?.lessThanOrEqualTo)) {
       const max = constraints.numericality.lessThanOrEqualTo
-      checks.push(numericalConstraint(x => x <= max, `Maximum value is ${max}`))
+      checks.push(
+        numericalConstraint((x) => x <= max, `Maximum value is ${max}`)
+      )
     }
 
     // Inclusion constraint
@@ -46,7 +50,7 @@ export const createValidatorFromConstraints = (constraints, field, table) => {
   }
 
   // Evaluate each constraint
-  return value => {
+  return (value) => {
     for (let check of checks) {
       const error = check(value)
       if (error) {
@@ -57,9 +61,9 @@ export const createValidatorFromConstraints = (constraints, field, table) => {
   }
 }
 
-const exists = value => value != null && value !== ""
+const exists = (value) => value != null && value !== ""
 
-const presenceConstraint = value => {
+const presenceConstraint = (value) => {
   let invalid
   if (Array.isArray(value)) {
     invalid = value.length === 0
@@ -69,14 +73,14 @@ const presenceConstraint = value => {
   return invalid ? "Required" : null
 }
 
-const lengthConstraint = maxLength => value => {
+const lengthConstraint = (maxLength) => (value) => {
   if (value && value.length > maxLength) {
     return `Maximum ${maxLength} characters`
   }
   return null
 }
 
-const numericalConstraint = (constraint, error) => value => {
+const numericalConstraint = (constraint, error) => (value) => {
   if (isNaN(value)) {
     return "Must be a number"
   }
@@ -87,7 +91,7 @@ const numericalConstraint = (constraint, error) => value => {
   return null
 }
 
-const inclusionConstraint = (options = []) => value => {
+const inclusionConstraint = (options = []) => (value) => {
   if (value == null || value === "") {
     return null
   }
@@ -99,7 +103,7 @@ const inclusionConstraint = (options = []) => value => {
 
 const dateConstraint = (dateString, isEarliest) => {
   const dateLimit = Date.parse(dateString)
-  return value => {
+  return (value) => {
     if (value == null || value === "") {
       return null
     }
diff --git a/packages/standard-components/src/helpers.js b/packages/standard-components/src/helpers.js
index af98473ac9..91652b358f 100644
--- a/packages/standard-components/src/helpers.js
+++ b/packages/standard-components/src/helpers.js
@@ -4,7 +4,7 @@
  * @param string
  * @returns {string}
  */
-export const capitalise = string => {
+export const capitalise = (string) => {
   return string.substring(0, 1).toUpperCase() + string.substring(1)
 }
 
@@ -26,7 +26,9 @@ export const cssVars = (node, props) => {
         delete props[key]
       })
 
-      Object.keys(props).forEach(name => node.style.removeProperty(`--${name}`))
+      Object.keys(props).forEach((name) =>
+        node.style.removeProperty(`--${name}`)
+      )
       props = new_props
     },
   }
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..f5206f4f5a 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,39 @@
     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..1cd20dc272 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"
@@ -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..8e902fe07f 100644
--- a/packages/string-templates/scripts/gen-collection-info.js
+++ b/packages/string-templates/scripts/gen-collection-info.js
@@ -93,8 +93,8 @@ function getCommentInfo(file, func) {
   docs.description = docs.description.replace(/[ ]{2,}/g, " ")
   docs.description = docs.description.replace(/is is/g, "is")
   const examples = docs.tags
-    .filter(el => el.title === "example")
-    .map(el => el.description)
+    .filter((el) => el.title === "example")
+    .map((el) => el.description)
   const blocks = docs.description.split("```")
   if (examples.length > 0) {
     docs.example = examples.join(" ")
@@ -130,14 +130,11 @@ function run() {
       const fnc = entry[1].toString()
       const jsDocInfo = getCommentInfo(collectionFile, fnc)
       let args = jsDocInfo.tags
-        .filter(tag => tag.title === "param")
+        .filter((tag) => tag.title === "param")
         .map(
-          tag =>
+          (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/helpers/Helper.js b/packages/string-templates/src/helpers/Helper.js
index 8eee332678..979100d2f7 100644
--- a/packages/string-templates/src/helpers/Helper.js
+++ b/packages/string-templates/src/helpers/Helper.js
@@ -6,7 +6,7 @@ class Helper {
 
   register(handlebars) {
     // wrap the function so that no helper can cause handlebars to break
-    handlebars.registerHelper(this.name, value => {
+    handlebars.registerHelper(this.name, (value) => {
       return this.fn(value) || value
     })
   }
diff --git a/packages/string-templates/src/helpers/external.js b/packages/string-templates/src/helpers/external.js
index 0fa7f734d0..cb3197c232 100644
--- a/packages/string-templates/src/helpers/external.js
+++ b/packages/string-templates/src/helpers/external.js
@@ -23,7 +23,7 @@ const ADDED_HELPERS = {
   duration: duration,
 }
 
-exports.registerAll = handlebars => {
+exports.registerAll = (handlebars) => {
   for (let [name, helper] of Object.entries(ADDED_HELPERS)) {
     handlebars.registerHelper(name, helper)
   }
@@ -51,7 +51,7 @@ exports.registerAll = handlebars => {
   exports.externalHelperNames = externalNames.concat(Object.keys(ADDED_HELPERS))
 }
 
-exports.unregisterAll = handlebars => {
+exports.unregisterAll = (handlebars) => {
   for (let name of Object.keys(ADDED_HELPERS)) {
     handlebars.unregisterHelper(name)
   }
diff --git a/packages/string-templates/src/helpers/index.js b/packages/string-templates/src/helpers/index.js
index 05145f7c7a..d8dc0045f1 100644
--- a/packages/string-templates/src/helpers/index.js
+++ b/packages/string-templates/src/helpers/index.js
@@ -14,11 +14,11 @@ const HTML_SWAPS = {
 
 const HELPERS = [
   // external helpers
-  new Helper(HelperFunctionNames.OBJECT, value => {
+  new Helper(HelperFunctionNames.OBJECT, (value) => {
     return new SafeString(JSON.stringify(value))
   }),
   // this help is applied to all statements
-  new Helper(HelperFunctionNames.ALL, value => {
+  new Helper(HelperFunctionNames.ALL, (value) => {
     // null/undefined values produce bad results
     if (value == null) {
       return ""
@@ -27,12 +27,12 @@ const HELPERS = [
     if (text == null || typeof text !== "string") {
       return text
     }
-    return text.replace(/[<>]/g, tag => {
+    return text.replace(/[<>]/g, (tag) => {
       return HTML_SWAPS[tag] || tag
     })
   }),
   // adds a note for post-processor
-  new Helper(HelperFunctionNames.LITERAL, value => {
+  new Helper(HelperFunctionNames.LITERAL, (value) => {
     const type = typeof value
     const outputVal = type === "object" ? JSON.stringify(value) : value
     return `{{${LITERAL_MARKER} ${type}-${outputVal}}}`
@@ -46,7 +46,7 @@ module.exports.HelperNames = () => {
   )
 }
 
-module.exports.registerAll = handlebars => {
+module.exports.registerAll = (handlebars) => {
   for (let helper of HELPERS) {
     helper.register(handlebars)
   }
@@ -54,7 +54,7 @@ module.exports.registerAll = handlebars => {
   externalHandlebars.registerAll(handlebars)
 }
 
-module.exports.unregisterAll = handlebars => {
+module.exports.unregisterAll = (handlebars) => {
   for (let helper of HELPERS) {
     helper.unregister(handlebars)
   }
diff --git a/packages/string-templates/src/processors/index.js b/packages/string-templates/src/processors/index.js
index 174041133a..c42b80fe8b 100644
--- a/packages/string-templates/src/processors/index.js
+++ b/packages/string-templates/src/processors/index.js
@@ -27,12 +27,12 @@ module.exports.preprocess = (string, finalise = true) => {
   // might want to pre-process for other benefits but still want to see errors
   if (!finalise) {
     processors = processors.filter(
-      processor => processor.name !== preprocessor.PreprocessorNames.FINALISE
+      (processor) => processor.name !== preprocessor.PreprocessorNames.FINALISE
     )
   }
   return process(string, processors)
 }
 
-module.exports.postprocess = string => {
+module.exports.postprocess = (string) => {
   return process(string, postprocessor.processors)
 }
diff --git a/packages/string-templates/src/processors/postprocessor.js b/packages/string-templates/src/processors/postprocessor.js
index adc8362abe..ba2fbc9878 100644
--- a/packages/string-templates/src/processors/postprocessor.js
+++ b/packages/string-templates/src/processors/postprocessor.js
@@ -17,7 +17,7 @@ class Postprocessor {
 }
 
 module.exports.processors = [
-  new Postprocessor(PostProcessorNames.CONVERT_LITERALS, statement => {
+  new Postprocessor(PostProcessorNames.CONVERT_LITERALS, (statement) => {
     if (!statement.includes(LITERAL_MARKER)) {
       return statement
     }
diff --git a/packages/string-templates/src/processors/preprocessor.js b/packages/string-templates/src/processors/preprocessor.js
index ee3a3a9730..02027049c5 100644
--- a/packages/string-templates/src/processors/preprocessor.js
+++ b/packages/string-templates/src/processors/preprocessor.js
@@ -24,7 +24,7 @@ class Preprocessor {
 }
 
 module.exports.processors = [
-  new Preprocessor(PreprocessorNames.SWAP_TO_DOT, statement => {
+  new Preprocessor(PreprocessorNames.SWAP_TO_DOT, (statement) => {
     let startBraceIdx = statement.indexOf("[")
     let lastIdx = 0
     while (startBraceIdx !== -1) {
@@ -39,7 +39,7 @@ module.exports.processors = [
     return statement
   }),
 
-  new Preprocessor(PreprocessorNames.FIX_FUNCTIONS, statement => {
+  new Preprocessor(PreprocessorNames.FIX_FUNCTIONS, (statement) => {
     for (let specialCase of FUNCTION_CASES) {
       const toFind = `{ ${specialCase}`,
         replacement = `{${specialCase}`
@@ -48,7 +48,7 @@ module.exports.processors = [
     return statement
   }),
 
-  new Preprocessor(PreprocessorNames.FINALISE, statement => {
+  new Preprocessor(PreprocessorNames.FINALISE, (statement) => {
     let insideStatement = statement.slice(2, statement.length - 2)
     if (insideStatement.charAt(0) === " ") {
       insideStatement = insideStatement.slice(1)
@@ -63,7 +63,7 @@ module.exports.processors = [
         return statement
       }
     }
-    if (HelperNames().some(option => option.includes(possibleHelper))) {
+    if (HelperNames().some((option) => option.includes(possibleHelper))) {
       insideStatement = `(${insideStatement})`
     }
     return `{{ all ${insideStatement} }}`
diff --git a/packages/string-templates/src/utilities.js b/packages/string-templates/src/utilities.js
index b33e8bfe1d..b1a9d6415c 100644
--- a/packages/string-templates/src/utilities.js
+++ b/packages/string-templates/src/utilities.js
@@ -3,7 +3,7 @@ const ALPHA_NUMERIC_REGEX = /^[A-Za-z0-9]+$/g
 
 module.exports.FIND_HBS_REGEX = /{{([^{].*?)}}/g
 
-module.exports.isAlphaNumeric = char => {
+module.exports.isAlphaNumeric = (char) => {
   return char.match(ALPHA_NUMERIC_REGEX)
 }
 
@@ -12,11 +12,8 @@ module.exports.swapStrings = (string, start, length, swap) => {
 }
 
 // removes null and undefined
-module.exports.removeNull = obj => {
-  obj = _(obj)
-    .omitBy(_.isUndefined)
-    .omitBy(_.isNull)
-    .value()
+module.exports.removeNull = (obj) => {
+  obj = _(obj).omitBy(_.isUndefined).omitBy(_.isNull).value()
   for (let [key, value] of Object.entries(obj)) {
     // only objects
     if (typeof value === "object" && !Array.isArray(value)) {
@@ -26,14 +23,14 @@ module.exports.removeNull = obj => {
   return obj
 }
 
-module.exports.addConstants = obj => {
+module.exports.addConstants = (obj) => {
   if (obj.now == null) {
     obj.now = new Date()
   }
   return obj
 }
 
-module.exports.removeHandlebarsStatements = string => {
+module.exports.removeHandlebarsStatements = (string) => {
   let regexp = new RegExp(exports.FIND_HBS_REGEX)
   let matches = string.match(regexp)
   if (matches == null) {
diff --git a/packages/worker/scripts/dev/manage.js b/packages/worker/scripts/dev/manage.js
index f363bd05ac..a3d545b4a1 100644
--- a/packages/worker/scripts/dev/manage.js
+++ b/packages/worker/scripts/dev/manage.js
@@ -16,7 +16,7 @@ async function init() {
     COUCH_DB_URL: "http://budibase:budibase@localhost:10000/db/",
   }
   let envFile = ""
-  Object.keys(envFileJson).forEach(key => {
+  Object.keys(envFileJson).forEach((key) => {
     envFile += `${key}=${envFileJson[key]}\n`
   })
   fs.writeFileSync(envFilePath, envFile)
@@ -32,7 +32,7 @@ command()
   .then(() => {
     console.log("Done! 🎉")
   })
-  .catch(err => {
+  .catch((err) => {
     console.error(
       "Something went wrong while managing budibase dev worker:",
       err.message
diff --git a/packages/worker/src/api/controllers/admin/configs.js b/packages/worker/src/api/controllers/admin/configs.js
index 107c0c8fa8..6a84b299f0 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,28 +45,28 @@ 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, {
       include_docs: true,
     })
   )
-  ctx.body = response.rows.map(row => row.doc)
+  ctx.body = response.rows.map((row) => row.doc)
 }
 
 /**
  * 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
 
   const { group } = ctx.query
   if (group) {
     const group = await db.get(group)
-    const userInGroup = group.users.some(groupUser => groupUser === userId)
+    const userInGroup = group.users.some((groupUser) => groupUser === userId)
     if (!ctx.user.admin && !userInGroup) {
       ctx.throw(400, `User is not in specified group: ${group}.`)
     }
@@ -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/email.js b/packages/worker/src/api/controllers/admin/email.js
index 9f4060d20f..dfb0d5b461 100644
--- a/packages/worker/src/api/controllers/admin/email.js
+++ b/packages/worker/src/api/controllers/admin/email.js
@@ -53,7 +53,7 @@ async function buildEmail(purpose, email, user) {
   })
 }
 
-exports.sendEmail = async ctx => {
+exports.sendEmail = async (ctx) => {
   const { groupId, email, userId, purpose } = ctx.request.body
   const db = new CouchDB(GLOBAL_DB)
   const params = {}
diff --git a/packages/worker/src/api/controllers/admin/groups.js b/packages/worker/src/api/controllers/admin/groups.js
index baa510f487..6abc986394 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,17 +27,17 @@ 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, {
       include_docs: true,
     })
   )
-  ctx.body = response.rows.map(row => row.doc)
+  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/packages/worker/src/api/controllers/admin/templates.js b/packages/worker/src/api/controllers/admin/templates.js
index 30c90d50bf..0a3f2fa487 100644
--- a/packages/worker/src/api/controllers/admin/templates.js
+++ b/packages/worker/src/api/controllers/admin/templates.js
@@ -9,7 +9,7 @@ const { getTemplates } = require("../../../constants/templates")
 
 const GLOBAL_DB = StaticDatabases.GLOBAL.name
 
-exports.save = async ctx => {
+exports.save = async (ctx) => {
   const db = new CouchDB(GLOBAL_DB)
   const type = ctx.params.type
   let template = ctx.request.body
@@ -30,36 +30,36 @@ exports.save = async ctx => {
   }
 }
 
-exports.definitions = async ctx => {
+exports.definitions = async (ctx) => {
   ctx.body = {
     purpose: TemplateMetadata,
     bindings: Object.values(TemplateBindings),
   }
 }
 
-exports.fetch = async ctx => {
+exports.fetch = async (ctx) => {
   ctx.body = await getTemplates()
 }
 
-exports.fetchByType = async ctx => {
+exports.fetchByType = async (ctx) => {
   ctx.body = await getTemplates({
     type: ctx.params.type,
   })
 }
 
-exports.fetchByOwner = async ctx => {
+exports.fetchByOwner = async (ctx) => {
   ctx.body = await getTemplates({
     ownerId: ctx.params.ownerId,
   })
 }
 
-exports.find = async ctx => {
+exports.find = async (ctx) => {
   ctx.body = await getTemplates({
     id: ctx.params.id,
   })
 }
 
-exports.destroy = async ctx => {
+exports.destroy = async (ctx) => {
   const db = new CouchDB(GLOBAL_DB)
   await db.remove(ctx.params.id, ctx.params.rev)
   ctx.message = `Template ${ctx.params.id} deleted.`
diff --git a/packages/worker/src/api/controllers/admin/users.js b/packages/worker/src/api/controllers/admin/users.js
index 146373e671..bcb159b618 100644
--- a/packages/worker/src/api/controllers/admin/users.js
+++ b/packages/worker/src/api/controllers/admin/users.js
@@ -11,7 +11,7 @@ const FIRST_USER_EMAIL = "test@test.com"
 const FIRST_USER_PASSWORD = "test"
 const GLOBAL_DB = StaticDatabases.GLOBAL.name
 
-exports.save = async ctx => {
+exports.save = async (ctx) => {
   const db = new CouchDB(GLOBAL_DB)
   const { email, password, _id } = ctx.request.body
 
@@ -60,7 +60,7 @@ exports.save = async ctx => {
   }
 }
 
-exports.firstUser = async ctx => {
+exports.firstUser = async (ctx) => {
   ctx.request.body = {
     email: FIRST_USER_EMAIL,
     password: FIRST_USER_PASSWORD,
@@ -72,7 +72,7 @@ exports.firstUser = async ctx => {
   await exports.save(ctx)
 }
 
-exports.destroy = async ctx => {
+exports.destroy = async (ctx) => {
   const db = new CouchDB(GLOBAL_DB)
   const dbUser = await db.get(ctx.params.id)
   await db.remove(dbUser._id, dbUser._rev)
@@ -82,14 +82,14 @@ exports.destroy = async ctx => {
 }
 
 // called internally by app server user fetch
-exports.fetch = async ctx => {
+exports.fetch = async (ctx) => {
   const db = new CouchDB(GLOBAL_DB)
   const response = await db.allDocs(
     getGlobalUserParams(null, {
       include_docs: true,
     })
   )
-  const users = response.rows.map(row => row.doc)
+  const users = response.rows.map((row) => row.doc)
   // user hashed password shouldn't ever be returned
   for (let user of users) {
     if (user) {
@@ -100,7 +100,7 @@ exports.fetch = async ctx => {
 }
 
 // called internally by app server user find
-exports.find = async ctx => {
+exports.find = async (ctx) => {
   const db = new CouchDB(GLOBAL_DB)
   let user
   try {
diff --git a/packages/worker/src/api/controllers/app.js b/packages/worker/src/api/controllers/app.js
index bed3b55942..8c96ccdfbc 100644
--- a/packages/worker/src/api/controllers/app.js
+++ b/packages/worker/src/api/controllers/app.js
@@ -5,7 +5,7 @@ const env = require("../../environment")
 const APP_PREFIX = "app_"
 const URL_REGEX_SLASH = /\/|\\/g
 
-exports.getApps = async ctx => {
+exports.getApps = async (ctx) => {
   let allDbs
   // allDbs call of CouchDB is very inaccurate in production
   if (env.COUCH_DB_URL) {
@@ -13,8 +13,8 @@ exports.getApps = async ctx => {
   } else {
     allDbs = await CouchDB.allDbs()
   }
-  const appDbNames = allDbs.filter(dbName => dbName.startsWith(APP_PREFIX))
-  const appPromises = appDbNames.map(db => new CouchDB(db).get(db))
+  const appDbNames = allDbs.filter((dbName) => dbName.startsWith(APP_PREFIX))
+  const appPromises = appDbNames.map((db) => new CouchDB(db).get(db))
 
   const apps = await Promise.allSettled(appPromises)
   const body = {}
diff --git a/packages/worker/src/api/controllers/auth.js b/packages/worker/src/api/controllers/auth.js
index bcda523a93..58e277f6a2 100644
--- a/packages/worker/src/api/controllers/auth.js
+++ b/packages/worker/src/api/controllers/auth.js
@@ -34,7 +34,7 @@ exports.authenticate = async (ctx, next) => {
   })(ctx, next)
 }
 
-exports.logout = async ctx => {
+exports.logout = async (ctx) => {
   clearCookie(ctx, Cookies.Auth)
   ctx.body = { message: "User logged out" }
 }
diff --git a/packages/worker/src/api/index.js b/packages/worker/src/api/index.js
index d0e60ffcd2..fe8609de7e 100644
--- a/packages/worker/src/api/index.js
+++ b/packages/worker/src/api/index.js
@@ -26,7 +26,7 @@ router
       br: false,
     })
   )
-  .use("/health", ctx => (ctx.status = 200))
+  .use("/health", (ctx) => (ctx.status = 200))
   .use(buildAuthMiddleware(NO_AUTH_ENDPOINTS))
   // for now no public access is allowed to worker (bar health check)
   .use((ctx, next) => {
@@ -50,7 +50,7 @@ router.use(async (ctx, next) => {
   }
 })
 
-router.get("/health", ctx => (ctx.status = 200))
+router.get("/health", (ctx) => (ctx.status = 200))
 
 // authenticated routes
 for (let route of routes) {
diff --git a/packages/worker/src/constants/templates/index.js b/packages/worker/src/constants/templates/index.js
index 23e5508341..18904bb8df 100644
--- a/packages/worker/src/constants/templates/index.js
+++ b/packages/worker/src/constants/templates/index.js
@@ -35,7 +35,7 @@ exports.addBaseTemplates = (templates, type = null) => {
   }
   for (let purpose of purposeList) {
     // check if a template exists already for purpose
-    if (templates.find(template => template.purpose === purpose)) {
+    if (templates.find((template) => template.purpose === purpose)) {
       continue
     }
     if (exports.EmailTemplates[purpose]) {
@@ -56,18 +56,18 @@ exports.getTemplates = async ({ ownerId, type, id } = {}) => {
       include_docs: true,
     })
   )
-  let templates = response.rows.map(row => row.doc)
+  let templates = response.rows.map((row) => row.doc)
   // should only be one template with ID
   if (id) {
     return templates[0]
   }
   if (type) {
-    templates = templates.filter(template => template.type === type)
+    templates = templates.filter((template) => template.type === type)
   }
   return exports.addBaseTemplates(templates, type)
 }
 
 exports.getTemplateByPurpose = async (type, purpose) => {
   const templates = await exports.getTemplates({ type })
-  return templates.find(template => template.purpose === purpose)
+  return templates.find((template) => template.purpose === purpose)
 }
diff --git a/packages/worker/src/index.js b/packages/worker/src/index.js
index 8b67181fcc..c80d27ddae 100644
--- a/packages/worker/src/index.js
+++ b/packages/worker/src/index.js
@@ -44,7 +44,7 @@ module.exports = server.listen(parseInt(env.PORT || 4002), async () => {
   console.log(`Worker running on ${JSON.stringify(server.address())}`)
 })
 
-process.on("uncaughtException", err => {
+process.on("uncaughtException", (err) => {
   console.error(err)
   server.close()
   server.destroy()
diff --git a/packages/worker/src/middleware/joi-validator.js b/packages/worker/src/middleware/joi-validator.js
index 1686b0e727..8e5feab255 100644
--- a/packages/worker/src/middleware/joi-validator.js
+++ b/packages/worker/src/middleware/joi-validator.js
@@ -19,10 +19,10 @@ function validate(schema, property) {
   }
 }
 
-module.exports.body = schema => {
+module.exports.body = (schema) => {
   return validate(schema, "body")
 }
 
-module.exports.params = schema => {
+module.exports.params = (schema) => {
   return validate(schema, "params")
 }
diff --git a/packages/worker/src/utilities/email.js b/packages/worker/src/utilities/email.js
index b5e64a2793..3a17b2bfd1 100644
--- a/packages/worker/src/utilities/email.js
+++ b/packages/worker/src/utilities/email.js
@@ -1,6 +1,6 @@
 const nodemailer = require("nodemailer")
 
-exports.createSMTPTransport = config => {
+exports.createSMTPTransport = (config) => {
   const options = {
     port: config.port,
     host: config.host,
@@ -15,7 +15,7 @@ exports.createSMTPTransport = config => {
   return nodemailer.createTransport(options)
 }
 
-exports.verifyConfig = async config => {
+exports.verifyConfig = async (config) => {
   const transport = exports.createSMTPTransport(config)
   await transport.verify()
 }
diff --git a/packages/worker/src/utilities/fileSystem.js b/packages/worker/src/utilities/fileSystem.js
index 8f0bc8d3ed..6bb44fa4ac 100644
--- a/packages/worker/src/utilities/fileSystem.js
+++ b/packages/worker/src/utilities/fileSystem.js
@@ -1,5 +1,5 @@
 const { readFileSync } = require("fs")
 
-exports.readStaticFile = path => {
+exports.readStaticFile = (path) => {
   return readFileSync(path, "utf-8")
 }
diff --git a/packages/worker/src/utilities/index.js b/packages/worker/src/utilities/index.js
index b402a82cf3..4ad800cc58 100644
--- a/packages/worker/src/utilities/index.js
+++ b/packages/worker/src/utilities/index.js
@@ -4,6 +4,6 @@
  * @param {string} url The URL to test and remove any extra double slashes.
  * @return {string} The updated url.
  */
-exports.checkSlashesInUrl = url => {
+exports.checkSlashesInUrl = (url) => {
   return url.replace(/(https?:\/\/)|(\/)+/g, "$1$2")
 }
diff --git a/packages/worker/src/utilities/templates.js b/packages/worker/src/utilities/templates.js
index 3035dc2bbc..4000ed5365 100644
--- a/packages/worker/src/utilities/templates.js
+++ b/packages/worker/src/utilities/templates.js
@@ -14,7 +14,7 @@ exports.getSettingsTemplateContext = async () => {
       include_docs: true,
     })
   )
-  let settings = response.rows.map(row => row.doc)[0] || {}
+  let settings = response.rows.map((row) => row.doc)[0] || {}
   if (!settings.platformUrl) {
     settings.platformUrl = LOCAL_URL
   }
diff --git a/packages/worker/yarn.lock b/packages/worker/yarn.lock
index 9510f6cd5c..ce1185f832 100644
--- a/packages/worker/yarn.lock
+++ b/packages/worker/yarn.lock
@@ -287,49 +287,6 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@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:
-    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":
-  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"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -851,130 +808,6 @@ ansi-align@^3.0.0:
   dependencies:
     string-width "^3.0.0"
 
-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-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@^4.2.1:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
@@ -982,62 +815,6 @@ 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@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
@@ -1048,20 +825,6 @@ 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@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -1076,32 +839,6 @@ 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-promise@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
@@ -1131,7 +868,7 @@ anymatch@~3.1.1:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-argparse@^1.0.10, argparse@^1.0.7:
+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==
@@ -1168,15 +905,6 @@ 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-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
@@ -1224,13 +952,6 @@ atomic-sleep@^1.0.0:
   resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
   integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
 
-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-sdk@^2.811.0:
   version "2.811.0"
   resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.811.0.tgz#a7e4040b2ee7d8b825b142ed5179d36dc3f315c4"
@@ -1763,13 +1484,6 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
-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"
-
 configstore@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/configstore/-/configstore-5.0.1.tgz#d365021b5df4b98cdd187d6a3b0e3f6a7cc5ed96"
@@ -1889,23 +1603,11 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-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"
-
 dateformat@^3.0.3:
   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.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -1983,13 +1685,6 @@ 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"
-
 defer-to-connect@^1.0.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.1.3.tgz#331ae050c08dcf789f8c83a7b81f0ed94f4ac591"
@@ -2176,11 +1871,6 @@ end-stream@~0.1.0:
   dependencies:
     write-stream "~0.4.3"
 
-ent@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/ent/-/ent-2.2.0.tgz#e964219325a21d05f44466a2f686ed6ce5f5dd1d"
-  integrity sha1-6WQhkyWiHQX0RGai9obtbOX13R0=
-
 errno@~0.1.1:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
@@ -2195,11 +1885,6 @@ 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=
-
 es3ify@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/es3ify/-/es3ify-0.1.4.tgz#ad9fa5df1ae34f3f31e1211b5818b2d51078dfd1"
@@ -2427,13 +2112,6 @@ falafel@^1.0.1:
     isarray "0.0.1"
     object-keys "^1.0.6"
 
-"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"
@@ -2510,18 +2188,11 @@ flatstr@^1.0.12:
   resolved "https://registry.yarnpkg.com/flatstr/-/flatstr-1.0.12.tgz#c2ba6a08173edbb6c9640e3055b95e287ceb5931"
   integrity sha512-4zPxDyhCyiN2wIAtSLI6gc82/EjqZc1onI4Mz/l0pWrAlsSfYH/2ZIcU+e3oA2wDwbzIWNKwa23F8rh6+DRWkw==
 
-for-in@^1.0.1, for-in@^1.0.2:
+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"
-
 foreach@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
@@ -2567,11 +2238,6 @@ fresh@~0.5.2:
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
   integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
 
-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.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -2611,14 +2277,6 @@ 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"
@@ -2741,35 +2399,6 @@ 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"
@@ -2841,39 +2470,6 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-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.9"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
@@ -2891,14 +2487,6 @@ 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-assert@^1.3.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/http-assert/-/http-assert-1.4.1.tgz#c5f725d677aa7e873ef736199b89686cceb37878"
@@ -3029,12 +2617,7 @@ 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.4, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -3149,13 +2732,6 @@ is-docker@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
   integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
 
-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"
@@ -3193,7 +2769,7 @@ is-generator-function@^1.0.7:
   resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.8.tgz#dfb5c2b120e02b0a8d9d2c6806cd5621aa922f7b"
   integrity sha512-2Omr/twNtufVZFr1GhxjOMFPAj2sjc/dKaIqBhvo4qciXfJmITGH6ZGd8eZYNHza8t1y0e01AuqRhJwfWp26WQ==
 
-is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
+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"
   integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
@@ -3213,13 +2789,6 @@ is-npm@^4.0.0:
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
   integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==
 
-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"
@@ -3227,11 +2796,6 @@ 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"
@@ -3242,13 +2806,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-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"
@@ -3266,13 +2823,6 @@ is-potential-custom-element-name@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
   integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
 
-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"
@@ -3319,7 +2869,7 @@ isarray@0.0.1:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
   integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
 
-isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
+isarray@1.0.0, isarray@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
@@ -3329,11 +2879,6 @@ 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"
@@ -3962,7 +3507,7 @@ keyv@^4.0.0:
   dependencies:
     json-buffer "3.0.1"
 
-kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.1.0, kind-of@^3.2.0:
+kind-of@^3.0.2, kind-of@^3.0.3, 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=
@@ -3976,7 +3521,7 @@ kind-of@^4.0.0:
   dependencies:
     is-buffer "^1.1.5"
 
-kind-of@^5.0.0, kind-of@^5.0.2:
+kind-of@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
   integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
@@ -4113,13 +3658,6 @@ latest-version@^5.0.0:
   dependencies:
     package-json "^6.3.0"
 
-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"
-
 level-codec@9.0.2, level-codec@^9.0.0:
   version "9.0.2"
   resolved "https://registry.yarnpkg.com/level-codec/-/level-codec-9.0.2.tgz#fd60df8c64786a80d44e63423096ffead63d8cbc"
@@ -4249,11 +3787,6 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
-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.includes@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f"
@@ -4289,55 +3822,11 @@ lodash.once@^4.0.0:
   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@^4.17.19, lodash@^4.17.20, lodash@^4.7.0:
+lodash@^4.17.19, 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-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"
-
 lowercase-keys@^1.0.0, lowercase-keys@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
@@ -4516,11 +4005,6 @@ mkdirp@^0.5.0:
   dependencies:
     minimist "^1.2.5"
 
-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==
-
 mri@1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.4.tgz#7cb1dd1b9b40905f1fac053abe25b6720f44744a"
@@ -4573,11 +4057,6 @@ negotiator@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==
-
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -5206,11 +4685,6 @@ private@^0.1.6, private@~0.1.5:
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
   integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
 
-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==
-
 prompts@^2.0.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.1.tgz#befd3b1195ba052f9fd2fde8a486c4e82ee77f61"
@@ -5379,19 +4853,6 @@ readable-stream@~0.0.2:
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-0.0.4.tgz#f32d76e3fb863344a548d79923007173665b3b8d"
   integrity sha1-8y124/uGM0SlSNeZIwBxc2ZbO40=
 
-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"
-
 readdirp@~3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
@@ -5441,21 +4902,6 @@ registry-url@^5.0.0:
   dependencies:
     rc "^1.2.8"
 
-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"
-
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -5592,7 +5038,7 @@ rsvp@^4.8.4:
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
-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==
@@ -5646,11 +5092,6 @@ 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-diff@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-3.1.1.tgz#05f77ce59f325e00e2706afd67bb506ddb1ca32b"
@@ -5685,13 +5126,6 @@ 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"
@@ -5994,13 +5428,6 @@ string_decoder@~0.10.x:
   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"
-
 strip-ansi@^5.1.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
@@ -6040,11 +5467,6 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
-striptags@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/striptags/-/striptags-3.1.1.tgz#c8c3e7fdd6fb4bb3a32a3b752e5b5e3e38093ebd"
-  integrity sha1-yMPn/db7S7OjKjt1LltePjgJPr0=
-
 sublevel-pouchdb@7.2.2:
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/sublevel-pouchdb/-/sublevel-pouchdb-7.2.2.tgz#49e46cd37883bf7ff5006d7c5b9bcc7bcc1f422f"
@@ -6055,11 +5477,6 @@ sublevel-pouchdb@7.2.2:
     ltgt "2.2.1"
     readable-stream "1.1.14"
 
-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=
-
 superagent@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/superagent/-/superagent-6.1.0.tgz#09f08807bc41108ef164cfb4be293cebd480f4a6"
@@ -6155,24 +5572,11 @@ through2@^0.6.2, through2@^0.6.5:
     readable-stream ">=1.0.33-1 <1.1.0-0"
     xtend ">=4.0.0 <4.1.0-0"
 
-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.3.4:
   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=
-
 tiny-queue@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/tiny-queue/-/tiny-queue-0.2.1.tgz#25a67f2c6e253b2ca941977b5ef7442ef97a6046"
@@ -6188,11 +5592,6 @@ 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"
@@ -6325,18 +5724,6 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
-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"
-
-uglify-js@^3.1.4:
-  version "3.13.4"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.13.4.tgz#592588bb9f47ae03b24916e2471218d914955574"
-  integrity sha512-kv7fCkIXyQIilD5/yQy8O+uagsYIOt5cZvs890W40/e/rvjMSzJw81o9Bg0tkURxzZBROtDQhW2LFjOGoK3RZw==
-
 uid2@0.0.x:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/uid2/-/uid2-0.0.3.tgz#483126e11774df2f71b8b639dcd799c376162b82"
@@ -6449,7 +5836,7 @@ use@^3.1.0:
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
-util-deprecate@^1.0.1, util-deprecate@~1.0.1:
+util-deprecate@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
@@ -6536,11 +5923,6 @@ 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"
@@ -6603,11 +5985,6 @@ 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@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
@@ -6672,7 +6049,7 @@ 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.0 <4.1.0-0", xtend@^4.0.2, xtend@~4.0.0, xtend@~4.0.1:
+"xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.2, xtend@~4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
@@ -6712,11 +6089,6 @@ yargs@^15.4.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
-year@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/year/-/year-0.2.1.tgz#4083ae520a318b23ec86037f3000cb892bdf9bb0"
-  integrity sha1-QIOuUgoxiyPshgN/MADLiSvfm7A=
-
 ylru@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ylru/-/ylru-1.2.1.tgz#f576b63341547989c1de7ba288760923b27fe84f"
diff --git a/yarn.lock b/yarn.lock
index f27c37ebf1..29a01a69bd 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"