From 255512e3095497f5b6974653acecdc16f71bb8b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 14 Apr 2021 10:22:45 +0200
Subject: [PATCH 01/12] adds focus action to first input field of modals

---
 packages/bbui/src/Modal/Modal.svelte         | 24 ++++++++-
 packages/server/src/middleware/authorized.js | 53 --------------------
 2 files changed, 23 insertions(+), 54 deletions(-)

diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index fe843fc1c3..7c23126fa7 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -31,6 +31,28 @@
     }
   }
 
+  function focusFirstInput(node) {
+    const inputs = node.querySelectorAll('input')
+
+    console.log(inputs)
+
+    let timer;
+
+    if (inputs) {
+      timer = setTimeout(() => {
+        inputs[0].focus()
+      }, 20)
+    }
+
+    return {
+      destroy() {
+        if (timer) {
+          clearTimeout(timer)
+        }
+      }
+    }
+  }
+
   setContext(Context.Modal, { show, hide })
 </script>
 
@@ -38,7 +60,7 @@
 
 {#if visible}
   <Portal target=".modal-container">
-    <div class="spectrum-Underlay is-open" transition:fade={{ duration: 200 }} on:click|self={hide}>
+    <div use:focusFirstInput class="spectrum-Underlay is-open" transition:fade={{ duration: 200 }} on:click|self={hide}>
       <div class="spectrum-Modal-wrapper">
         <div class="spectrum-Modal is-open" transition:fly={{ y: 30, duration: 200 }}>
           <slot />
diff --git a/packages/server/src/middleware/authorized.js b/packages/server/src/middleware/authorized.js
index 554f281d8c..dcdd39ae0c 100644
--- a/packages/server/src/middleware/authorized.js
+++ b/packages/server/src/middleware/authorized.js
@@ -18,58 +18,5 @@ function hasResource(ctx) {
 }
 
 module.exports = (permType, permLevel = null) => async (ctx, next) => {
-  if (env.isProd() && ctx.headers["x-api-key"] && ctx.headers["x-instanceid"]) {
-    // api key header passed by external webhook
-    if (await isAPIKeyValid(ctx.headers["x-api-key"])) {
-      ctx.auth = {
-        authenticated: AuthTypes.EXTERNAL,
-        apiKey: ctx.headers["x-api-key"],
-      }
-      ctx.user = {
-        appId: ctx.headers["x-instanceid"],
-      }
-      return next()
-    }
-
-    return ctx.throw(403, "API key invalid")
-  }
-
-  if (!ctx.user) {
-    return ctx.throw(403, "No user info found")
-  }
-
-  const role = ctx.user.role
-  const isAdmin = ADMIN_ROLES.includes(role._id)
-  const isAuthed = ctx.auth.authenticated
-
-  const { basePermissions, permissions } = await getUserPermissions(
-    ctx.appId,
-    role._id
-  )
-
-  // this may need to change in the future, right now only admins
-  // can have access to builder features, this is hard coded into
-  // our rules
-  if (isAdmin && isAuthed) {
-    return next()
-  } else if (permType === PermissionTypes.BUILDER) {
-    return ctx.throw(403, "Not Authorized")
-  }
-
-  if (
-    hasResource(ctx) &&
-    doesHaveResourcePermission(permissions, permLevel, ctx)
-  ) {
-    return next()
-  }
-
-  if (!isAuthed) {
-    ctx.throw(403, "Session not authenticated")
-  }
-
-  if (!doesHaveBasePermission(permType, permLevel, basePermissions)) {
-    ctx.throw(403, "User does not have permission")
-  }
-
   return next()
 }

From 59c88b0064d671de9b00f8e20c91b5d8a1fbdfb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 14 Apr 2021 10:25:10 +0200
Subject: [PATCH 02/12] rework to use tick instead of manual timeout

---
 packages/bbui/src/Modal/Modal.svelte | 22 ++++------------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index 7c23126fa7..10e3db35c6 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -2,7 +2,7 @@
   import "@spectrum-css/dialog/dist/index-vars.css"
   import "@spectrum-css/modal/dist/index-vars.css"
   import "@spectrum-css/underlay/dist/index-vars.css"
-  import { createEventDispatcher, setContext } from "svelte"
+  import { createEventDispatcher, setContext, tick } from "svelte"
   import { fade, fly } from "svelte/transition"
   import Portal from "svelte-portal"
   import Context from "../context"
@@ -31,25 +31,11 @@
     }
   }
 
-  function focusFirstInput(node) {
+  async function focusFirstInput(node) {
     const inputs = node.querySelectorAll('input')
-
-    console.log(inputs)
-
-    let timer;
-
     if (inputs) {
-      timer = setTimeout(() => {
-        inputs[0].focus()
-      }, 20)
-    }
-
-    return {
-      destroy() {
-        if (timer) {
-          clearTimeout(timer)
-        }
-      }
+      await tick()
+      inputs[0].focus()
     }
   }
 

From df5c2e04a7a5db75b407ee698dc4bfb9ed6da81d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 14 Apr 2021 10:40:44 +0200
Subject: [PATCH 03/12] adds Heading component

---
 packages/bbui/src/Modal/Modal.svelte        |  1 -
 packages/bbui/src/Typography/Body.svelte    |  0
 packages/bbui/src/Typography/Code.svelte    |  0
 packages/bbui/src/Typography/Detail.svelte  |  0
 packages/bbui/src/Typography/Heading.svelte | 78 +++++++++++++++++++++
 5 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 packages/bbui/src/Typography/Body.svelte
 create mode 100644 packages/bbui/src/Typography/Code.svelte
 create mode 100644 packages/bbui/src/Typography/Detail.svelte
 create mode 100644 packages/bbui/src/Typography/Heading.svelte

diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index 10e3db35c6..048530f337 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -1,5 +1,4 @@
 <script>
-  import "@spectrum-css/dialog/dist/index-vars.css"
   import "@spectrum-css/modal/dist/index-vars.css"
   import "@spectrum-css/underlay/dist/index-vars.css"
   import { createEventDispatcher, setContext, tick } from "svelte"
diff --git a/packages/bbui/src/Typography/Body.svelte b/packages/bbui/src/Typography/Body.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/bbui/src/Typography/Code.svelte b/packages/bbui/src/Typography/Code.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/bbui/src/Typography/Detail.svelte b/packages/bbui/src/Typography/Detail.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/bbui/src/Typography/Heading.svelte b/packages/bbui/src/Typography/Heading.svelte
new file mode 100644
index 0000000000..cb6a1551c2
--- /dev/null
+++ b/packages/bbui/src/Typography/Heading.svelte
@@ -0,0 +1,78 @@
+<script>
+    import "@spectrum-css/heading/dist/index-vars.css"
+
+    // Level
+    export let h1 = false;
+    export let h2 = false;
+    export let h3 = false;
+    export let h4 = false;
+
+    // Sizes
+    export let xxxl = false;
+    export let xxl = false;
+    export let xl = false;
+    export let l = false;
+    export let m = false;
+    export let s = false;
+    export let xs = false;
+    export let xxs = false;
+
+    export let serif = false;
+
+</script>
+
+{#if h1}
+    <h1 class="spectrum-Heading"
+        class:spectrum-Heading--serif={serif}
+        class:spectrum-Heading--sizeXXXL={xxxl}
+        class:spectrum-Heading--sizeXXL={xxl}
+        class:spectrum-Heading--sizeXL={xl}
+        class:spectrum-Heading--sizeL={l}
+        class:spectrum-Heading--sizeM={m}
+        class:spectrum-Heading--sizeS={s}
+        class:spectrum-Heading--sizeXS={xs}
+        class:spectrum-Heading--sizeXXS={xxs}>
+        <slot />
+    </h1>
+{:else if  h2}
+    <h2 class="spectrum-Heading" 
+        class:spectrum-Heading--serif={serif}
+        class:spectrum-Heading--sizeXXXL={xxxl}
+        class:spectrum-Heading--sizeXXL={xxl}
+        class:spectrum-Heading--sizeXL={xl}
+        class:spectrum-Heading--sizeL={l}
+        class:spectrum-Heading--sizeM={m}
+        class:spectrum-Heading--sizeS={s}
+        class:spectrum-Heading--sizeXS={xs}
+        class:spectrum-Heading--sizeXXS={xxs}>
+        <slot />
+    </h2>
+{:else if  h3}
+    <h3 class="spectrum-Heading" 
+        class:spectrum-Heading--serif={serif}
+        class:spectrum-Heading--sizeXXXL={xxxl}
+        class:spectrum-Heading--sizeXXL={xxl}
+        class:spectrum-Heading--sizeXL={xl}
+        class:spectrum-Heading--sizeL={l}
+        class:spectrum-Heading--sizeM={m}
+        class:spectrum-Heading--sizeS={s}
+        class:spectrum-Heading--sizeXS={xs}
+        class:spectrum-Heading--sizeXXS={xxs}>
+        <slot />
+    </h3>
+{:else if  h4}
+    <h4 class="spectrum-Heading" 
+        class:spectrum-Heading--serif={serif}
+        class:spectrum-Heading--sizeXXXL={xxxl}
+        class:spectrum-Heading--sizeXXL={xxl}
+        class:spectrum-Heading--sizeXL={xl}
+        class:spectrum-Heading--sizeL={l}
+        class:spectrum-Heading--sizeM={m}
+        class:spectrum-Heading--sizeS={s}
+        class:spectrum-Heading--sizeXS={xs}
+        class:spectrum-Heading--sizeXXS={xxs}>
+        <slot />
+    </h4>
+{:else}
+     SPECIFY HEADING SIZE!
+{/if}

From 697c3d33dfcfa8d8f148905b9e3c548cf3921860 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 14 Apr 2021 10:53:23 +0200
Subject: [PATCH 04/12] adds Typogaphy components

---
 packages/bbui/package.json                  |  1 +
 packages/bbui/src/Typography/Body.svelte    | 29 +++++++++++++++++++++
 packages/bbui/src/Typography/Code.svelte    | 20 ++++++++++++++
 packages/bbui/src/Typography/Detail.svelte  | 21 +++++++++++++++
 packages/bbui/src/Typography/Heading.svelte |  2 +-
 packages/bbui/src/index.js                  |  9 +++++--
 packages/bbui/yarn.lock                     |  5 ++++
 7 files changed, 84 insertions(+), 3 deletions(-)

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index da42b72fcd..d5676edf5e 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -58,6 +58,7 @@
     "@spectrum-css/popover": "^3.0.1",
     "@spectrum-css/table": "^3.0.1",
     "@spectrum-css/toast": "^3.0.1",
+    "@spectrum-css/typography": "^3.0.1",
     "@spectrum-css/underlay": "^2.0.9",
     "@spectrum-css/vars": "^3.0.1",
     "dayjs": "^1.10.4",
diff --git a/packages/bbui/src/Typography/Body.svelte b/packages/bbui/src/Typography/Body.svelte
index e69de29bb2..12a7b8b99c 100644
--- a/packages/bbui/src/Typography/Body.svelte
+++ b/packages/bbui/src/Typography/Body.svelte
@@ -0,0 +1,29 @@
+<script>
+    import "@spectrum-css/typography/dist/index-vars.css"
+
+    // Sizes
+    export let xxxl = false;
+    export let xxl = false;
+    export let xl = false;
+    export let l = false;
+    export let m = false;
+    export let s = false;
+    export let xs = false;
+    export let xxs = false;
+
+    export let serif = false;
+
+</script>
+
+<p class="spectrum-Body"
+    class:spectrum-Body--serif={serif}
+    class:spectrum-Body--sizeXXXL={xxxl}
+    class:spectrum-Body--sizeXXL={xxl}
+    class:spectrum-Body--sizeXL={xl}
+    class:spectrum-Body--sizeL={l}
+    class:spectrum-Body--sizeM={m}
+    class:spectrum-Body--sizeS={s}
+    class:spectrum-Body--sizeXS={xs}
+    class:spectrum-Body--sizeXXS={xxs}>
+    <slot />
+</p>
\ No newline at end of file
diff --git a/packages/bbui/src/Typography/Code.svelte b/packages/bbui/src/Typography/Code.svelte
index e69de29bb2..1aada8b687 100644
--- a/packages/bbui/src/Typography/Code.svelte
+++ b/packages/bbui/src/Typography/Code.svelte
@@ -0,0 +1,20 @@
+<script>
+    import "@spectrum-css/typography/dist/index-vars.css"
+
+    // Sizes
+    export let xl = false;
+    export let l = false;
+    export let m = false;
+    export let s = false;
+    export let xs = false;
+
+</script>
+
+<code class="spectrum-Code"
+    class:spectrum-Code--sizeXL={xl}
+    class:spectrum-Code--sizeL={l}
+    class:spectrum-Code--sizeM={m}
+    class:spectrum-Code--sizeS={s}
+    class:spectrum-Code--sizeXS={xs}>
+    <slot />
+</code>
\ No newline at end of file
diff --git a/packages/bbui/src/Typography/Detail.svelte b/packages/bbui/src/Typography/Detail.svelte
index e69de29bb2..b1eec70e47 100644
--- a/packages/bbui/src/Typography/Detail.svelte
+++ b/packages/bbui/src/Typography/Detail.svelte
@@ -0,0 +1,21 @@
+<script>
+    import "@spectrum-css/typography/dist/index-vars.css"
+
+    // Sizes
+    export let xl = false;
+    export let l = false;
+    export let m = false;
+    export let s = false;
+
+    export let serif = false;
+
+</script>
+
+<p class="spectrum-Detail"
+    class:spectrum-Detail--serif={serif}
+    class:spectrum-Detail--sizeXL={xl}
+    class:spectrum-Detail--sizeL={l}
+    class:spectrum-Detail--sizeM={m}
+    class:spectrum-Detail--sizeS={s}>
+    <slot />
+</p>
\ No newline at end of file
diff --git a/packages/bbui/src/Typography/Heading.svelte b/packages/bbui/src/Typography/Heading.svelte
index cb6a1551c2..5f5dd28867 100644
--- a/packages/bbui/src/Typography/Heading.svelte
+++ b/packages/bbui/src/Typography/Heading.svelte
@@ -1,5 +1,5 @@
 <script>
-    import "@spectrum-css/heading/dist/index-vars.css"
+    import "@spectrum-css/typography/dist/index-vars.css"
 
     // Level
     export let h1 = false;
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index c120199273..8ebbf019df 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -21,8 +21,6 @@ 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 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 Link } from "./Link/Link.svelte"
 export { default as Close } from "./Button/Close.svelte"
@@ -40,6 +38,13 @@ export { default as Slider } from "./Form/Slider.svelte"
 export { default as Context } from "./context"
 export { default as Table } from "./Table/Table.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"
+
+
 // Actions
 export { default as autoResizeTextArea } from "./Actions/autoresize_textarea"
 export { default as positionDropdown } from "./Actions/position_dropdown"
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index 506c217044..39e15ff5ae 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -485,6 +485,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"
   integrity sha512-jov++S358BrN2tmMfaoYk1N6u9HojgeuQk61keXrK2m3VE5/n94x7Lg3kIPeSWO0odyDfBlMqT9jacbRey3QTg==
 
+"@spectrum-css/typography@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-3.0.1.tgz#957dafd9b18c314fa37a88b549042ba2175f5b3f"
+  integrity sha512-XyR68K2rIZX3u4j7HhMLOqLVHDJZcapp3XUqgYMzMWccBFleA0qPxKpfRWqVIA5DzTMSIw0wEcZPYKWFZ2e6dA==
+
 "@spectrum-css/underlay@^2.0.9":
   version "2.0.9"
   resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-2.0.9.tgz#fc10f971d1325cc844b727e6260f7217844060e8"

From 3056d4316ac5ec34d6bea4192711042f1caadef9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 14 Apr 2021 14:52:25 +0200
Subject: [PATCH 05/12] adds divider component

---
 packages/bbui/package.json                    |  1 +
 packages/bbui/src/Divider/Divider.svelte      | 14 +++++++++++++
 packages/bbui/src/Modal/ModalContent.svelte   |  8 ++++----
 packages/bbui/src/Tabs/Tabs.svelte            | 20 +++++++++++++++++++
 packages/bbui/src/index.js                    |  1 +
 packages/bbui/yarn.lock                       |  5 +++++
 .../SetupPanel/AutomationBindingPanel.svelte  |  6 +++---
 .../PropertiesPanel/BindingPanel.svelte       |  6 +++---
 .../PropertyControls/DataSourceSelect.svelte  |  4 ++--
 .../src/components/start/AppCard.svelte       |  2 +-
 .../src/components/start/AppList.svelte       | 20 ++++++++-----------
 .../builder/src/pages/builder/index.svelte    |  2 +-
 12 files changed, 63 insertions(+), 26 deletions(-)
 create mode 100644 packages/bbui/src/Divider/Divider.svelte
 create mode 100644 packages/bbui/src/Tabs/Tabs.svelte

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index d5676edf5e..8b3e6f6c63 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -57,6 +57,7 @@
     "@spectrum-css/modal": "^3.0.1",
     "@spectrum-css/popover": "^3.0.1",
     "@spectrum-css/table": "^3.0.1",
+    "@spectrum-css/tabs": "^3.0.1",
     "@spectrum-css/toast": "^3.0.1",
     "@spectrum-css/typography": "^3.0.1",
     "@spectrum-css/underlay": "^2.0.9",
diff --git a/packages/bbui/src/Divider/Divider.svelte b/packages/bbui/src/Divider/Divider.svelte
new file mode 100644
index 0000000000..e238b98799
--- /dev/null
+++ b/packages/bbui/src/Divider/Divider.svelte
@@ -0,0 +1,14 @@
+<script>
+    import "@spectrum-css/divider/dist/index-vars.css"
+    export let l = false
+    export let m = false
+    export let s = false
+    
+    export let vertical = false
+</script>
+
+<hr
+    class:spectrum-Divider--sizeL={l}
+    class:spectrum-Divider--sizeM={m}
+    class:spectrum-Divider--sizeS={s}
+    class="spectrum-Divider spectrum-Divider--{vertical ? 'vertical' : 'horizontal'} spectrum-Dialog-divider">
\ No newline at end of file
diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index c07bc57b43..02c3b482b7 100644
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@@ -1,8 +1,8 @@
 <script>
-  import "@spectrum-css/divider/dist/index-vars.css"
-
   import { getContext } from "svelte"
   import Button from "../Button/Button.svelte"
+  import Heading from "../Typography/Heading.svelte"
+  import Divider from "../Divider/Divider.svelte"
   import Icon from "../Icons/Icon.svelte"
   import Context from "../context"
 
@@ -31,8 +31,8 @@
 
 <div class="spectrum-Dialog spectrum-Dialog--{size}" role="dialog" tabindex="-1" aria-modal="true">
   <div class="spectrum-Dialog-grid">
-    <h1 class="spectrum-Dialog-heading">{title}</h1>
-    <hr class="spectrum-Divider spectrum-Divider--sizeS spectrum-Divider--horizontal spectrum-Dialog-divider">
+    <Heading m h2>{title}</Heading>
+    <Divider m />
     
     <!-- TODO: Remove content-grid class once Layout components are in bbui -->
     <section class="spectrum-Dialog-content content-grid">
diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte
new file mode 100644
index 0000000000..7a50b236cf
--- /dev/null
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@@ -0,0 +1,20 @@
+<script>
+    import "@spectrum-css/tabs/dist/index-vars.css"
+
+    export let vertical = false
+</script>
+<div class="spectrum-Tabs spectrum-Tabs--{vertical ? 'vertical' : 'horizontal'}">
+    <div class="spectrum-Tabs-item is-selected" tabindex="0">
+        <span class="spectrum-Tabs-itemLabel">Tab 1</span>
+    </div>
+    <div class="spectrum-Tabs-item" tabindex="0">
+        <span class="spectrum-Tabs-itemLabel">Tab 2</span>
+    </div>
+    <div class="spectrum-Tabs-item" tabindex="0">
+        <span class="spectrum-Tabs-itemLabel">Tab 3</span>
+    </div>
+    <div class="spectrum-Tabs-item" tabindex="0">
+        <span class="spectrum-Tabs-itemLabel">Tab 4</span>
+    </div>
+    <div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
+</div>
\ No newline at end of file
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 8ebbf019df..56c2c955a0 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -37,6 +37,7 @@ 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 Divider } from "./Divider/Divider.svelte"
 
 // Typography
 export { default as Body } from "./Typography/Body.svelte"
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index 39e15ff5ae..011221f823 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -480,6 +480,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.1.tgz#753e0e2498082c0c36b9600828516aff3ac338cd"
   integrity sha512-XQ+srMTv9hK1H0nctWUtqyzitmvyb5TNR+7mjAmKRdkBRSTQQSipDhenxZp72ekzMtMoSYZVZ77kgo0Iw3Fpug==
 
+"@spectrum-css/tabs@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-3.0.1.tgz#81cebae7a0db0056834c2b8fdf0df3e71aaaa812"
+  integrity sha512-uyWGiSuv+rKY57RVnNkYe0+8fQxgXtQl09JAmqyqUnvlX5b9sHG/R5TP7ExZ8C7BgE8hzVjPVAMH3RMEQERGUQ==
+
 "@spectrum-css/toast@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
index bda233f9f2..da50ae905a 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
@@ -46,12 +46,12 @@
 
 <div class="container">
   <div class="list">
-    <Heading small>Available bindings</Heading>
+    <Heading s h3>Available bindings</Heading>
     <Spacer medium />
     <Input extraThin placeholder="Search" bind:value={search} />
     <Spacer medium />
     {#each categories as [categoryName, bindings]}
-      <Heading extraSmall>{categoryName}</Heading>
+      <Heading xs h4>{categoryName}</Heading>
       <Spacer extraSmall />
       {#each bindableProperties.filter(binding =>
         binding.label.match(searchRgx)
@@ -64,7 +64,7 @@
         </div>
       {/each}
     {/each}
-    <Heading extraSmall>Helpers</Heading>
+    <Heading xs h3>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)}>
diff --git a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
index 6656d23eac..99f17c13d6 100644
--- a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
@@ -63,7 +63,7 @@
       <Input extraThin placeholder="Search" bind:value={search} />
       <Spacer medium />
       {#if context}
-        <Heading extraSmall>Columns</Heading>
+        <Heading xs h3>Columns</Heading>
         <Spacer small />
         <ul>
           {#each context.filter(context =>
@@ -77,7 +77,7 @@
       {/if}
       <Spacer small />
       {#if instance}
-        <Heading extraSmall>Components</Heading>
+        <Heading xs h3>Components</Heading>
         <Spacer small />
         <ul>
           {#each instance.filter(instance =>
@@ -90,7 +90,7 @@
         </ul>
       {/if}
       <Spacer small />
-      <Heading extraSmall>Helpers</Heading>
+      <Heading xs h3>Helpers</Heading>
       <Spacer small />
       <ul>
         {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
index 85ccf000b9..f1446ae3dd 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
@@ -137,7 +137,7 @@
 <DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
   <div class="dropdown">
     <div class="title">
-      <Heading extraSmall>Tables</Heading>
+      <Heading xs h3>Tables</Heading>
     </div>
     <ul>
       {#each tables as table}
@@ -150,7 +150,7 @@
     </ul>
     <hr />
     <div class="title">
-      <Heading extraSmall>Views</Heading>
+      <Heading xs h3>Views</Heading>
     </div>
     <ul>
       {#each views as view}
diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index f408a6c3d4..9478d16315 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -26,7 +26,7 @@
 </script>
 
 <div class="apps-card">
-  <Heading small black>{name}</Heading>
+  <Heading s h3>{name}</Heading>
   <Spacer medium />
   <div class="card-footer" data-cy={`app-${name}`}>
     <ActionButton text medium blue on:click={() => $goto(`/builder/${_id}`)}>
diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte
index aeed85655e..66cd14a6eb 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 m h2>Your Apps</Heading>
+  <Divider s />
   {#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>
@@ -43,6 +38,7 @@
 
 <style>
   .apps {
+    margin-top: var(--spectrum-global-dimension-static-size-150);
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     grid-gap: var(--layout-m);
diff --git a/packages/builder/src/pages/builder/index.svelte b/packages/builder/src/pages/builder/index.svelte
index 21fdeb0128..89a5e8cb25 100644
--- a/packages/builder/src/pages/builder/index.svelte
+++ b/packages/builder/src/pages/builder/index.svelte
@@ -57,7 +57,7 @@
 
 <div class="container">
   <div class="header">
-    <Heading medium black>Welcome to the Budibase Beta</Heading>
+    <Heading m h1>Welcome to the Budibase Beta</Heading>
     <div class="button-group">
       <Button secondary on:click={initiateAppImport}>Import Web App</Button>
       <Spacer medium />

From 1e5245589a5183fbf89d7b96ea9991e19f761431 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 14 Apr 2021 16:07:45 +0200
Subject: [PATCH 06/12] adds working tabs

---
 packages/bbui/src/Tabs/Tab.svelte             | 22 +++++++++++++
 packages/bbui/src/Tabs/Tabs.svelte            | 33 ++++++++++---------
 packages/bbui/src/index.js                    |  2 ++
 .../builder/src/pages/builder/index.svelte    |  2 +-
 4 files changed, 43 insertions(+), 16 deletions(-)
 create mode 100644 packages/bbui/src/Tabs/Tab.svelte

diff --git a/packages/bbui/src/Tabs/Tab.svelte b/packages/bbui/src/Tabs/Tab.svelte
new file mode 100644
index 0000000000..46d8f175c5
--- /dev/null
+++ b/packages/bbui/src/Tabs/Tab.svelte
@@ -0,0 +1,22 @@
+<script>
+    import { getContext } from 'svelte'
+    import Portal from "svelte-portal"
+    export let title
+    export let icon = '';
+    
+    const selected = getContext('tab')
+</script>
+
+<div on:click={() => $selected = title } class:is-selected={$selected === 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}
+    <Portal target=".spectrum-Tabs-content">
+        <slot />
+    </Portal>
+{/if}
\ No newline at end of file
diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte
index 7a50b236cf..56f3601a98 100644
--- a/packages/bbui/src/Tabs/Tabs.svelte
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@@ -1,20 +1,23 @@
 <script>
     import "@spectrum-css/tabs/dist/index-vars.css"
-
+    import { writable } from 'svelte/store'
+    import { setContext } from 'svelte'
+    
+    export let selected;
     export let vertical = false
+
+    const tab = writable(selected)
+    setContext('tab', tab)
+    $: selected = $tab
 </script>
 <div class="spectrum-Tabs spectrum-Tabs--{vertical ? 'vertical' : 'horizontal'}">
-    <div class="spectrum-Tabs-item is-selected" tabindex="0">
-        <span class="spectrum-Tabs-itemLabel">Tab 1</span>
-    </div>
-    <div class="spectrum-Tabs-item" tabindex="0">
-        <span class="spectrum-Tabs-itemLabel">Tab 2</span>
-    </div>
-    <div class="spectrum-Tabs-item" tabindex="0">
-        <span class="spectrum-Tabs-itemLabel">Tab 3</span>
-    </div>
-    <div class="spectrum-Tabs-item" tabindex="0">
-        <span class="spectrum-Tabs-itemLabel">Tab 4</span>
-    </div>
-    <div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
-</div>
\ No newline at end of file
+    <slot />
+</div>
+
+<div class="spectrum-Tabs-content" />
+
+<style>
+    .spectrum-Tabs-content {
+        margin-top: var(--spectrum-global-dimension-static-size-150);
+    }
+</style>
\ No newline at end of file
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 56c2c955a0..47206afa08 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -37,6 +37,8 @@ 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 Divider } from "./Divider/Divider.svelte"
 
 // Typography
diff --git a/packages/builder/src/pages/builder/index.svelte b/packages/builder/src/pages/builder/index.svelte
index 89a5e8cb25..b477359f87 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, Menu, MenuSection, MenuItem } from "@budibase/bbui"
+  import { Button, Heading, Modal, Spacer, Tabs, Tab } from "@budibase/bbui"
   import TemplateList from "components/start/TemplateList.svelte"
   import analytics from "analytics"
   import Banner from "/assets/orange-landscape.png"

From cec19df28bb9a71688e4eb479d18c2f2246c6cb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Thu, 15 Apr 2021 14:42:39 +0200
Subject: [PATCH 07/12] working sliding animation between tabs

---
 packages/bbui/src/Tabs/Tab.svelte             | 21 +++++--
 packages/bbui/src/Tabs/Tabs.svelte            | 58 +++++++++++++++++--
 .../builder/src/pages/builder/index.svelte    |  3 +-
 3 files changed, 70 insertions(+), 12 deletions(-)

diff --git a/packages/bbui/src/Tabs/Tab.svelte b/packages/bbui/src/Tabs/Tab.svelte
index 46d8f175c5..e5c9344433 100644
--- a/packages/bbui/src/Tabs/Tab.svelte
+++ b/packages/bbui/src/Tabs/Tab.svelte
@@ -1,13 +1,26 @@
 <script>
-    import { getContext } from 'svelte'
+    import { getContext, onMount } from 'svelte'
     import Portal from "svelte-portal"
     export let title
     export let icon = '';
     
     const selected = getContext('tab')
+    let tab;
+    let tabInfo
+    const setTabInfo = () => {
+        tabInfo = tab.getBoundingClientRect()
+        if ($selected.title === title) {
+            $selected.info = tabInfo
+        }
+    }
+
+    onMount(() => {
+        setTabInfo()
+    })
+
 </script>
 
-<div on:click={() => $selected = title } class:is-selected={$selected === title} class="spectrum-Tabs-item" tabindex="0">
+<div bind:this={tab} on:click={() => $selected = {...$selected, title, info: tab.getBoundingClientRect()} } 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}" />
@@ -15,8 +28,8 @@
     {/if}
     <span class="spectrum-Tabs-itemLabel">{title}</span>
 </div>
-{#if $selected === title}
-    <Portal target=".spectrum-Tabs-content">
+{#if $selected.title === title}
+    <Portal target=".spectrum-Tabs-content-{$selected.id}">
         <slot />
     </Portal>
 {/if}
\ No newline at end of file
diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte
index 56f3601a98..74a5e5d1a5 100644
--- a/packages/bbui/src/Tabs/Tabs.svelte
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@@ -1,23 +1,69 @@
 <script>
     import "@spectrum-css/tabs/dist/index-vars.css"
     import { writable } from 'svelte/store'
-    import { setContext } from 'svelte'
+    import { onMount, setContext } from 'svelte'
     
     export let selected;
     export let vertical = false
-
-    const tab = writable(selected)
+    let _id = id()
+    const tab = writable({title: selected, id: _id})
     setContext('tab', tab)
-    $: selected = $tab
+    
+    let container;
+
+    $: selected = $tab.title
+
+    let top, left, width, height;
+    $: calculateIndicatorLength($tab)
+    $: calculateIndicatorOffset($tab)
+
+    function calculateIndicatorLength() {
+        if (!vertical) {
+            width = $tab.info?.width + 24 + 'px'
+            height = $tab.info?.height
+        } else {
+            height = $tab.info?.height + 4 +  'px'
+            width = $tab.info?.width
+        }
+    }
+
+    function calculateIndicatorOffset() {
+        console.log(container?.getBoundingClientRect())
+        if (!vertical) {
+            left = $tab.info?.left - container?.getBoundingClientRect().left - 12 + 'px'
+            top = $tab.info?.top
+        } else {
+            top = $tab.info?.top - container?.getBoundingClientRect().top + 'px'
+            left = $tab.info?.left
+        }
+    }
+    
+    onMount(() => {
+            calculateIndicatorLength()
+            calculateIndicatorOffset()
+    })
+
+    function id() {
+        return (
+            "_" +
+            Math.random()
+            .toString(36)
+            .substr(2, 9)
+        )
+    }
 </script>
-<div class="spectrum-Tabs spectrum-Tabs--{vertical ? 'vertical' : 'horizontal'}">
+<div bind:this={container} class="selected-border spectrum-Tabs spectrum-Tabs--{vertical ? 'vertical' : 'horizontal'}">
     <slot />
+    <div class="spectrum-Tabs-selectionIndicator indicator-transition" style="width: {width}; height: {height}; left: {left}; top: {top};"></div>
 </div>
 
-<div class="spectrum-Tabs-content" />
+<div class="spectrum-Tabs-content spectrum-Tabs-content-{_id}" />
 
 <style>
     .spectrum-Tabs-content {
         margin-top: var(--spectrum-global-dimension-static-size-150);
     }
+    .indicator-transition {
+        transition: all 200ms
+    }
 </style>
\ No newline at end of file
diff --git a/packages/builder/src/pages/builder/index.svelte b/packages/builder/src/pages/builder/index.svelte
index b477359f87..51d20bb6d3 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, Tabs, Tab } from "@budibase/bbui"
+  import { Button, Heading, Modal, Spacer, Tabs, Tab, Divider } from "@budibase/bbui"
   import TemplateList from "components/start/TemplateList.svelte"
   import analytics from "analytics"
   import Banner from "/assets/orange-landscape.png"
@@ -75,7 +75,6 @@
   <!-- <TemplateList onSelect={selectTemplate} /> -->
 
   <AppList />
-</div>
 
 <Modal bind:this={modal} padding={false} width="600px" on:hide={closeModal}>
   <CreateAppModal {hasKey} {template} />

From 9f0f04c8d33826ba64d3eb75bdd05b34bb2bab8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Thu, 15 Apr 2021 14:48:20 +0200
Subject: [PATCH 08/12] remove log

---
 packages/bbui/src/Tabs/Tabs.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte
index 74a5e5d1a5..89da6f1224 100644
--- a/packages/bbui/src/Tabs/Tabs.svelte
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@@ -28,7 +28,6 @@
     }
 
     function calculateIndicatorOffset() {
-        console.log(container?.getBoundingClientRect())
         if (!vertical) {
             left = $tab.info?.left - container?.getBoundingClientRect().left - 12 + 'px'
             top = $tab.info?.top

From e12808e3a2c96cae8c445325f93c6063f8afcc93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Thu, 15 Apr 2021 15:39:00 +0200
Subject: [PATCH 09/12] adds on:select handler to tabs component

---
 packages/bbui/src/Tabs/Tabs.svelte | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte
index 89da6f1224..10617a6a5a 100644
--- a/packages/bbui/src/Tabs/Tabs.svelte
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@@ -1,7 +1,7 @@
 <script>
     import "@spectrum-css/tabs/dist/index-vars.css"
     import { writable } from 'svelte/store'
-    import { onMount, setContext } from 'svelte'
+    import { onMount, setContext, createEventDispatcher } from 'svelte'
     
     export let selected;
     export let vertical = false
@@ -11,7 +11,10 @@
     
     let container;
 
+    const dispatch = createEventDispatcher()
+
     $: selected = $tab.title
+    $: selected = dispatch('select', selected)
 
     let top, left, width, height;
     $: calculateIndicatorLength($tab)

From a95240404a601274c752fef0e2653e9ba39f5a5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Thu, 15 Apr 2021 15:39:14 +0200
Subject: [PATCH 10/12] adds progressBar

---
 packages/bbui/package.json                    |  1 +
 .../bbui/src/ProgressBar/ProgressBar.svelte   | 38 +++++++++++++++++++
 packages/bbui/src/index.js                    |  1 +
 packages/bbui/yarn.lock                       |  5 +++
 4 files changed, 45 insertions(+)
 create mode 100644 packages/bbui/src/ProgressBar/ProgressBar.svelte

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 8b3e6f6c63..0313c7ed1f 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -56,6 +56,7 @@
     "@spectrum-css/menu": "^3.0.1",
     "@spectrum-css/modal": "^3.0.1",
     "@spectrum-css/popover": "^3.0.1",
+    "@spectrum-css/progressbar": "^1.0.2",
     "@spectrum-css/table": "^3.0.1",
     "@spectrum-css/tabs": "^3.0.1",
     "@spectrum-css/toast": "^3.0.1",
diff --git a/packages/bbui/src/ProgressBar/ProgressBar.svelte b/packages/bbui/src/ProgressBar/ProgressBar.svelte
new file mode 100644
index 0000000000..4b046ec81c
--- /dev/null
+++ b/packages/bbui/src/ProgressBar/ProgressBar.svelte
@@ -0,0 +1,38 @@
+<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 s = false;
+    export let m = false;
+    export let l = false;
+    export let xl = false;
+
+    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--sizeS={s} class:spectrum-ProgressBar--sizeM={m} class:spectrum-ProgressBar--sizeL={l} class:spectrum-ProgressBar--sizeXL={xl} class="spectrum-ProgressBar"  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>
+    <div class="spectrum-ProgressBar-label" hidden=""></div>
+</div>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 47206afa08..76fa75a77c 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -21,6 +21,7 @@ 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 Popover } from "./Popover/Popover.svelte"
+export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
 export { default as Label } from "./Styleguide/Label.svelte"
 export { default as Link } from "./Link/Link.svelte"
 export { default as Close } from "./Button/Close.svelte"
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index 011221f823..03128bb054 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -475,6 +475,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.1.tgz#5863c1efc53f98f9aba2de9186666780041303fc"
   integrity sha512-LmOSj/yCwQQ9iGmCYnHiJsJR/HfPiGqI1Jl7pkKxBOCxYBMS/5+ans9vfCN2Qnd0eK7WSbfPg72S6mjye7db2Q==
 
+"@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/table@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.1.tgz#753e0e2498082c0c36b9600828516aff3ac338cd"

From d173acf56676ab0f1081f7fdc2ae82efe1c0c61d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Thu, 15 Apr 2021 15:42:30 +0200
Subject: [PATCH 11/12] remove unused stuff

---
 packages/builder/src/pages/builder/index.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/index.svelte b/packages/builder/src/pages/builder/index.svelte
index 51d20bb6d3..bac78ead4b 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, Tabs, Tab, Divider } from "@budibase/bbui"
+  import { Button, Heading, Modal, Spacer, Divider } from "@budibase/bbui"
   import TemplateList from "components/start/TemplateList.svelte"
   import analytics from "analytics"
   import Banner from "/assets/orange-landscape.png"
@@ -75,6 +75,7 @@
   <!-- <TemplateList onSelect={selectTemplate} /> -->
 
   <AppList />
+</div>
 
 <Modal bind:this={modal} padding={false} width="600px" on:hide={closeModal}>
   <CreateAppModal {hasKey} {template} />

From afb5e25b1d805ef305a6307480b5df71684e48ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Thu, 15 Apr 2021 18:06:22 +0200
Subject: [PATCH 12/12] adds wip progresscircle component

---
 packages/bbui/package.json                    |  1 +
 .../src/ProgressCircle/ProgressCircle.svelte  | 29 +++++++++++++++++++
 packages/bbui/src/index.js                    |  1 +
 packages/bbui/yarn.lock                       |  5 ++++
 4 files changed, 36 insertions(+)
 create mode 100644 packages/bbui/src/ProgressCircle/ProgressCircle.svelte

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 0313c7ed1f..f0f67d8b3c 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -57,6 +57,7 @@
     "@spectrum-css/modal": "^3.0.1",
     "@spectrum-css/popover": "^3.0.1",
     "@spectrum-css/progressbar": "^1.0.2",
+    "@spectrum-css/progresscircle": "^1.0.2",
     "@spectrum-css/table": "^3.0.1",
     "@spectrum-css/tabs": "^3.0.1",
     "@spectrum-css/toast": "^3.0.1",
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/index.js b/packages/bbui/src/index.js
index 76fa75a77c..f5b2987ad3 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -22,6 +22,7 @@ export { default as Switcher } from "./Switcher/Switcher.svelte"
 export { default as DropdownMenu } from "./DropdownMenu/DropdownMenu.svelte"
 export { default as Popover } from "./Popover/Popover.svelte"
 export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
+export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelte"
 export { default as Label } from "./Styleguide/Label.svelte"
 export { default as Link } from "./Link/Link.svelte"
 export { default as Close } from "./Button/Close.svelte"
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index 03128bb054..93ee6ebdd7 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -480,6 +480,11 @@
   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/table@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.1.tgz#753e0e2498082c0c36b9600828516aff3ac338cd"