From aee876a68188c3a167829983255072156e972a2c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 22 Jun 2021 09:14:17 +0100
Subject: [PATCH 01/32] Add initial work on merging settings and design panels,
 improve code structure, improve styles

---
 .../src/DetailSummary/DetailSummary.svelte    |  53 ++++-----
 packages/bbui/src/Tabs/Tabs.svelte            |  12 +-
 .../src/builderStore/store/frontend.js        |   6 +-
 .../PropertiesPanel/ActionsSection.svelte     |  50 ++++++++
 .../design/PropertiesPanel/CategoryTab.svelte |  40 -------
 .../CustomStylesSection.svelte                |  33 ++++++
 .../PropertiesPanel/DesignSection.svelte      |  42 +++++++
 .../design/PropertiesPanel/DesignView.svelte  | 111 ------------------
 .../PropertiesPanel/PropertiesPanel.svelte    |  85 ++++++--------
 .../PropertyControls/PropertyControl.svelte   |  81 ++++++-------
 ...ingsView.svelte => SettingsSection.svelte} |  76 +++---------
 .../src/charts/BarChart.svelte                |   2 +-
 .../src/charts/CandleStickChart.svelte        |   2 +-
 .../src/charts/LineChart.svelte               |   2 +-
 .../src/charts/PieChart.svelte                |   2 +-
 15 files changed, 255 insertions(+), 342 deletions(-)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte
 delete mode 100644 packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte
 delete mode 100644 packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
 rename packages/builder/src/components/design/PropertiesPanel/{SettingsView.svelte => SettingsSection.svelte} (72%)

diff --git a/packages/bbui/src/DetailSummary/DetailSummary.svelte b/packages/bbui/src/DetailSummary/DetailSummary.svelte
index 7071ab26d5..f20ccc56ae 100644
--- a/packages/bbui/src/DetailSummary/DetailSummary.svelte
+++ b/packages/bbui/src/DetailSummary/DetailSummary.svelte
@@ -2,12 +2,10 @@
   import Icon from "../Icon/Icon.svelte"
   import { createEventDispatcher } from "svelte"
 
+  export let name
+  export let show = false
+
   const dispatch = createEventDispatcher()
-
-  export let thin = false
-  export let name,
-    show = false
-
   const onHeaderClick = () => {
     show = !show
     if (show) {
@@ -16,12 +14,10 @@
   }
 </script>
 
-<div class="property-group-container" class:thin>
+<div class="property-group-container">
   <div class="property-group-name" on:click={onHeaderClick}>
-    <div class:thin class="name">{name}</div>
-    <div class="icon">
-      <Icon size="S" name={show ? "Remove" : "Add"} />
-    </div>
+    <div class="name">{name}</div>
+    <Icon size="S" name={show ? "Remove" : "Add"} />
   </div>
   <div class="property-panel" class:show>
     <slot />
@@ -32,10 +28,9 @@
   .property-group-container {
     display: flex;
     flex-direction: column;
-    height: auto;
-    justify-content: center;
-    border-radius: var(--border-radius-m);
-    font-family: var(--font-sans);
+    justify-content: flex-start;
+    align-items: stretch;
+    border-bottom: var(--border-light);
   }
 
   .property-group-name {
@@ -45,42 +40,38 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
+    padding: var(--spacing-m) var(--spacing-xl);
+    color: var(--spectrum-global-color-gray-600);
+    transition: color 130ms ease-in-out;
+  }
+  .property-group-name:hover {
+    color: var(--spectrum-global-color-gray-900);
   }
 
   .name {
     text-align: left;
-    font-size: 14px;
+    font-size: var(--font-size-s);
     font-weight: 600;
     letter-spacing: 0.14px;
-    color: var(--ink);
     flex: 1 1 auto;
     overflow: hidden;
     text-overflow: ellipsis;
-    text-transform: capitalize;
+    text-transform: uppercase;
     white-space: nowrap;
     user-select: none;
   }
-  .name.thin {
-    font-size: var(--spectrum-global-dimension-font-size-75);
-  }
-
-  .icon {
-    flex: 0 0 20px;
-    text-align: center;
-  }
 
   .property-panel {
-    /* height: 0px;
-    overflow: hidden; */
     display: none;
+    padding: var(--spacing-s) var(--spacing-xl) var(--spacing-xl)
+      var(--spacing-xl);
   }
 
   .show {
-    /* overflow: auto;
-    height: auto; */
     display: flex;
     flex-direction: column;
-    flex: 1;
-    margin-top: var(--spacing-m);
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-m);
   }
 </style>
diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte
index 3eddb3dfec..3e1080f2cd 100644
--- a/packages/bbui/src/Tabs/Tabs.svelte
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@@ -5,6 +5,8 @@
 
   export let selected
   export let vertical = false
+  export let noPadding = false
+
   let _id = id()
   const tab = writable({ title: selected, id: _id })
   setContext("tab", tab)
@@ -63,14 +65,17 @@
   {/if}
 </div>
 
-<div class="spectrum-Tabs-content spectrum-Tabs-content-{_id}" />
+<div
+  class="spectrum-Tabs-content spectrum-Tabs-content-{_id}"
+  class:noPadding
+/>
 
 <style>
   .spectrum-Tabs {
     padding-left: var(--spacing-xl);
     padding-right: var(--spacing-xl);
     position: relative;
-    border-width: 1px !important;
+    border-bottom: var(--border-light);
   }
   .spectrum-Tabs-content {
     margin-top: var(--spectrum-global-dimension-static-size-150);
@@ -81,4 +86,7 @@
   .spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator {
     bottom: 0 !important;
   }
+  .noPadding {
+    margin: 0;
+  }
 </style>
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 9a7e2715da..a462167ce2 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -488,12 +488,12 @@ export const getFrontendStore = () => {
         })
         await Promise.all(promises)
       },
-      updateStyle: async (type, name, value) => {
+      updateStyle: async (name, value) => {
         const selected = get(selectedComponent)
         if (value == null || value === "") {
-          delete selected._styles[type][name]
+          delete selected._styles.normal[name]
         } else {
-          selected._styles[type][name] = value
+          selected._styles.normal[name] = value
         }
         await store.actions.preview.saveSelected()
       },
diff --git a/packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte
new file mode 100644
index 0000000000..febfb56f16
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte
@@ -0,0 +1,50 @@
+<script>
+  import { DetailSummary, ActionButton } from "@budibase/bbui"
+  import { currentAsset, store } from "builderStore"
+  import { findClosestMatchingComponent } from "builderStore/storeUtils"
+  import { makeDatasourceFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+
+  export let openSection
+  export let componentDefinition
+  export let componentInstance
+
+  let confirmResetFieldsDialog
+
+  const resetFormFields = () => {
+    const form = findClosestMatchingComponent(
+      $currentAsset.props,
+      componentInstance._id,
+      component => component._component.endsWith("/form")
+    )
+    const dataSource = form?.dataSource
+    const fields = makeDatasourceFormComponents(dataSource)
+    store.actions.components.updateProp(
+      "_children",
+      fields.map(field => field.json())
+    )
+  }
+</script>
+
+<DetailSummary name="Actions" on:open show={openSection === "actions"}>
+  <ActionButton secondary wide on:click={store.actions.components.resetStyles}>
+    Reset styles
+  </ActionButton>
+  {#if componentDefinition?.component?.endsWith("/fieldgroup")}
+    <ActionButton
+      secondary
+      wide
+      on:click={() => confirmResetFieldsDialog?.show()}
+    >
+      Update form fields
+    </ActionButton>
+  {/if}
+</DetailSummary>
+
+<ConfirmDialog
+  bind:this={confirmResetFieldsDialog}
+  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"
+/>
diff --git a/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte b/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte
deleted file mode 100644
index 66212036a8..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-  export let categories = []
-  export let selectedCategory = {}
-  export let onClick = () => {}
-</script>
-
-<div class="tabs">
-  {#each categories as category}
-    <li
-      data-cy={category.name}
-      on:click={() => onClick(category)}
-      class:active={selectedCategory === category}
-    >
-      {category.name}
-    </li>
-  {/each}
-</div>
-
-<style>
-  .tabs {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    list-style: none;
-    font-size: var(--font-size-m);
-    font-weight: 600;
-    height: 24px;
-  }
-
-  li {
-    color: var(--grey-5);
-    cursor: pointer;
-    margin-right: 20px;
-  }
-
-  .active {
-    color: var(--ink);
-  }
-</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte b/packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte
new file mode 100644
index 0000000000..17a3e7c084
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte
@@ -0,0 +1,33 @@
+<script>
+  import { TextArea, DetailSummary } from "@budibase/bbui"
+  import { store } from "builderStore"
+
+  export let componentInstance
+  export let openSection
+
+  function onChange(css) {
+    store.actions.components.updateCustomStyle(css)
+  }
+</script>
+
+<DetailSummary
+  name={`Custom Styles${componentInstance?._styles?.custom ? " *" : ""}`}
+  on:open
+  show={openSection === "custom"}
+>
+  <div class="custom-styles">
+    <TextArea
+      value={componentInstance?._styles?.custom}
+      on:change={event => onChange(event.detail)}
+      placeholder="Enter some CSS..."
+    />
+  </div>
+</DetailSummary>
+
+<style>
+  .custom-styles :global(textarea) {
+    font-family: monospace;
+    min-height: 120px;
+    font-size: var(--font-size-xs);
+  }
+</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte b/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte
new file mode 100644
index 0000000000..bfcb9b6b4a
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte
@@ -0,0 +1,42 @@
+<script>
+  import { DetailSummary } from "@budibase/bbui"
+  import PropertyGroup from "./PropertyControls/PropertyGroup.svelte"
+  import { allStyles } from "./componentStyles"
+  import { store } from "builderStore"
+
+  export let componentDefinition
+  export let componentInstance
+  export let openSection
+
+  let selectedCategory = "normal"
+  let currentGroup
+
+  $: groups = componentDefinition?.styleable ? Object.keys(allStyles) : []
+</script>
+
+<DetailSummary name="Design" show={openSection === "design"} on:open>
+  {#if groups.length > 0}
+    {#each groups as groupName}
+      <PropertyGroup
+        name={groupName}
+        properties={allStyles[groupName]}
+        styleCategory={selectedCategory}
+        onStyleChanged={store.actions.components.updateStyle}
+        {componentInstance}
+        open={currentGroup === groupName}
+        on:open={() => (currentGroup = groupName)}
+      />
+    {/each}
+  {:else}
+    <div class="no-design">
+      This component doesn't have any design properties.
+    </div>
+  {/if}
+</DetailSummary>
+
+<style>
+  .no-design {
+    font-size: var(--spectrum-global-dimension-font-size-75);
+    color: var(--grey-6);
+  }
+</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
deleted file mode 100644
index 1c7ead521a..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
+++ /dev/null
@@ -1,111 +0,0 @@
-<script>
-  import { TextArea, DetailSummary, Button } from "@budibase/bbui"
-  import PropertyGroup from "./PropertyControls/PropertyGroup.svelte"
-  import FlatButtonGroup from "./PropertyControls/FlatButtonGroup"
-  import { allStyles } from "./componentStyles"
-
-  export let componentDefinition = {}
-  export let componentInstance = {}
-  export let onStyleChanged = () => {}
-  export let onCustomStyleChanged = () => {}
-  export let onResetStyles = () => {}
-
-  let selectedCategory = "normal"
-  let currentGroup
-
-  function onChange(category) {
-    selectedCategory = category
-  }
-
-  const buttonProps = [
-    { value: "normal", text: "Normal" },
-    { value: "hover", text: "Hover" },
-    { value: "active", text: "Active" },
-  ]
-
-  $: groups = componentDefinition?.styleable ? Object.keys(allStyles) : []
-</script>
-
-<div class="container">
-  <div class="state-categories">
-    <FlatButtonGroup value={selectedCategory} {buttonProps} {onChange} />
-  </div>
-
-  <div class="positioned-wrapper">
-    <div class="property-groups">
-      {#if groups.length > 0}
-        {#each groups as groupName}
-          <PropertyGroup
-            name={groupName}
-            properties={allStyles[groupName]}
-            styleCategory={selectedCategory}
-            {onStyleChanged}
-            {componentInstance}
-            open={currentGroup === groupName}
-            on:open={() => (currentGroup = groupName)}
-          />
-        {/each}
-        <DetailSummary
-          name={`Custom Styles${componentInstance._styles.custom ? " *" : ""}`}
-          on:open={() => (currentGroup = "custom")}
-          show={currentGroup === "custom"}
-          thin
-        >
-          <div class="custom-styles">
-            <TextArea
-              value={componentInstance._styles.custom}
-              on:change={event => onCustomStyleChanged(event.detail)}
-              placeholder="Enter some CSS..."
-            />
-          </div>
-        </DetailSummary>
-        <Button secondary wide on:click={onResetStyles}>Reset Styles</Button>
-      {:else}
-        <div class="no-design">
-          This component doesn't have any design properties.
-        </div>
-      {/if}
-    </div>
-  </div>
-</div>
-
-<style>
-  .container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    gap: var(--spacing-l);
-  }
-
-  .positioned-wrapper {
-    position: relative;
-    display: flex;
-    min-height: 0;
-    flex: 1 1 auto;
-  }
-
-  .property-groups {
-    flex: 1;
-    overflow-y: auto;
-    min-height: 0;
-    margin: 0 -20px;
-    padding: 0 20px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-m);
-  }
-
-  .no-design {
-    font-size: var(--font-size-xs);
-    color: var(--grey-5);
-  }
-
-  .custom-styles :global(textarea) {
-    font-family: monospace;
-    min-height: 120px;
-    font-size: var(--font-size-xs);
-  }
-</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
index 201a7a8fc7..34762d552d 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@@ -3,11 +3,16 @@
   import { store, selectedComponent, currentAsset } from "builderStore"
   import { Tabs, Tab } from "@budibase/bbui"
   import { FrontendTypes } from "constants"
-  import DesignView from "./DesignView.svelte"
-  import SettingsView from "./SettingsView.svelte"
+  import SettingsSection from "./SettingsSection.svelte"
+  import DesignSection from "./DesignSection.svelte"
+  import CustomStylesSection from "./CustomStylesSection.svelte"
+  import ActionsSection from "./ActionsSection.svelte"
   import { setWith } from "lodash"
 
-  $: definition = store.actions.components.getDefinition(
+  let openSection = "settings"
+
+  $: componentInstance = $selectedComponent
+  $: componentDefinition = store.actions.components.getDefinition(
     $selectedComponent?._component
   )
   $: isComponentOrScreen =
@@ -16,10 +21,6 @@
   $: isNotScreenslot = !$selectedComponent._component.endsWith("screenslot")
   $: showDisplayName = isComponentOrScreen && isNotScreenslot
 
-  const onStyleChanged = store.actions.components.updateStyle
-  const onCustomStyleChanged = store.actions.components.updateCustomStyle
-  const onResetStyles = store.actions.components.resetStyles
-
   function setAssetProps(name, value) {
     const selectedAsset = get(currentAsset)
     store.update(state => {
@@ -37,48 +38,34 @@
   }
 </script>
 
-<Tabs selected="Settings">
+<Tabs selected="Settings" noPadding>
   <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}
-        {onResetStyles}
-      />
-    </div>
+    <SettingsSection
+      {componentInstance}
+      {componentDefinition}
+      {showDisplayName}
+      onScreenPropChange={setAssetProps}
+      assetInstance={$store.currentView !== "component" && $currentAsset}
+      {openSection}
+      on:open={() => (openSection = "settings")}
+    />
+    <DesignSection
+      {componentInstance}
+      {componentDefinition}
+      {openSection}
+      on:open={() => (openSection = "design")}
+    />
+    <CustomStylesSection
+      {componentInstance}
+      {componentDefinition}
+      {openSection}
+      on:open={() => (openSection = "custom")}
+    />
+    <ActionsSection
+      {componentInstance}
+      {componentDefinition}
+      {openSection}
+      on:open={() => (openSection = "actions")}
+    />
   </Tab>
 </Tabs>
-
-<style>
-  .tab-content-padding {
-    padding: 0 var(--spacing-xl);
-  }
-
-  .instance-name {
-    font-size: var(--spectrum-global-dimension-font-size-75);
-    margin-bottom: var(--spacing-m);
-    margin-top: var(--spacing-xs);
-    font-weight: 600;
-    color: var(--grey-7);
-  }
-</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
index d5d51ff52b..ac23e819d5 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Button, Icon, Drawer } from "@budibase/bbui"
+  import { Button, Icon, Drawer, Label } from "@budibase/bbui"
   import { store, currentAsset } from "builderStore"
   import {
     getBindableProperties,
@@ -70,7 +70,11 @@
 </script>
 
 <div class="property-control" bind:this={anchor} data-cy={`setting-${key}`}>
-  <div class="label">{label}</div>
+  {#if type !== "boolean"}
+    <div class="label">
+      <Label>{label}</Label>
+    </div>
+  {/if}
   <div data-cy={`${key}-prop-control`} class="control">
     <svelte:component
       this={control}
@@ -79,63 +83,56 @@
       updateOnChange={false}
       on:change={handleChange}
       onChange={handleChange}
+      name={key}
+      text={label}
       {type}
       {...props}
-      name={key}
     />
-  </div>
-  {#if bindable && !key.startsWith("_") && type === "text"}
-    <div
-      class="icon"
-      data-cy={`${key}-binding-button`}
-      on:click={bindingDrawer.show}
-    >
-      <Icon size="S" name="FlashOn" />
-    </div>
-    <Drawer bind:this={bindingDrawer} title={capitalise(key)}>
-      <svelte:fragment slot="description">
-        Add the objects on the left to enrich your text.
-      </svelte:fragment>
-      <Button cta slot="buttons" disabled={!valid} on:click={handleClose}
-        >Save</Button
+    {#if bindable && !key.startsWith("_") && type === "text"}
+      <div
+        class="icon"
+        data-cy={`${key}-binding-button`}
+        on:click={bindingDrawer.show}
       >
-      <BindingPanel
-        slot="body"
-        bind:valid
-        value={safeValue}
-        close={handleClose}
-        on:update={e => (temporaryBindableValue = e.detail)}
-        {bindableProperties}
-      />
-    </Drawer>
-  {/if}
+        <Icon size="S" name="FlashOn" />
+      </div>
+      <Drawer bind:this={bindingDrawer} title={capitalise(key)}>
+        <svelte:fragment slot="description">
+          Add the objects on the left to enrich your text.
+        </svelte:fragment>
+        <Button cta slot="buttons" disabled={!valid} on:click={handleClose}>
+          Save
+        </Button>
+        <BindingPanel
+          slot="body"
+          bind:valid
+          value={safeValue}
+          close={handleClose}
+          on:update={e => (temporaryBindableValue = e.detail)}
+          {bindableProperties}
+        />
+      </Drawer>
+    {/if}
+  </div>
 </div>
 
 <style>
   .property-control {
     position: relative;
     display: flex;
-    flex-flow: row;
-    align-items: center;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
   }
 
   .label {
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    font-weight: 400;
-    flex: 0 0 80px;
-    text-align: left;
-    color: var(--ink);
-    margin-right: auto;
     text-transform: capitalize;
+    padding-top: var(--spectrum-global-dimension-size-50);
+    padding-bottom: var(--spectrum-global-dimension-size-65);
   }
 
   .control {
-    flex: 1;
-    display: inline-block;
-    padding-left: 2px;
-    width: 0;
+    position: relative;
   }
 
   .icon {
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsSection.svelte
similarity index 72%
rename from packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
rename to packages/builder/src/components/design/PropertiesPanel/SettingsSection.svelte
index 9dcd5f0daa..7a5d8becd1 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsSection.svelte
@@ -1,11 +1,8 @@
 <script>
   import { get } from "lodash"
   import { isEmpty } from "lodash/fp"
-  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 { Checkbox, Input, Select, DetailSummary } from "@budibase/bbui"
+  import { store } from "builderStore"
   import PropertyControl from "./PropertyControls/PropertyControl.svelte"
   import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
   import RoleSelect from "./PropertyControls/RoleSelect.svelte"
@@ -33,9 +30,9 @@
   export let componentDefinition = {}
   export let componentInstance = {}
   export let assetInstance
-  export let onChange = () => {}
   export let onScreenPropChange = () => {}
   export let showDisplayName = false
+  export let openSection
 
   const layoutDefinition = []
   const screenDefinition = [
@@ -44,12 +41,12 @@
     { key: "routing.roleId", label: "Access", control: RoleSelect },
     { key: "layoutId", label: "Layout", control: LayoutSelect },
   ]
-  let confirmResetFieldsDialog
 
   $: settings = componentDefinition?.settings ?? []
   $: isLayout = assetInstance && assetInstance.favicon
   $: assetDefinition = isLayout ? layoutDefinition : screenDefinition
 
+  const updateProp = store.actions.components.updateProp
   const controlMap = {
     text: Input,
     select: Select,
@@ -91,27 +88,13 @@
     }
     return true
   }
-
-  const onInstanceNameChange = name => {
-    onChange("_instanceName", name)
-  }
-
-  const resetFormFields = () => {
-    const form = findClosestMatchingComponent(
-      $currentAsset.props,
-      componentInstance._id,
-      component => component._component.endsWith("/form")
-    )
-    const dataSource = form?.dataSource
-    const fields = makeDatasourceFormComponents(dataSource)
-    onChange(
-      "_children",
-      fields.map(field => field.json())
-    )
-  }
 </script>
 
-<div class="settings-view-container">
+<DetailSummary
+  name={componentDefinition.name}
+  on:open
+  show={openSection === "settings"}
+>
   {#if assetInstance}
     {#each assetDefinition as def (`${componentInstance._id}-${def.key}`)}
       <PropertyControl
@@ -124,7 +107,6 @@
       />
     {/each}
   {/if}
-
   {#if showDisplayName}
     <PropertyControl
       bindable={false}
@@ -132,10 +114,9 @@
       label="Name"
       key="_instanceName"
       value={componentInstance._instanceName}
-      onChange={onInstanceNameChange}
+      onChange={val => updateProp("_instanceName", val)}
     />
   {/if}
-
   {#if settings && settings.length > 0}
     {#each settings as setting (`${componentInstance._id}-${setting.key}`)}
       {#if canRenderControl(setting)}
@@ -147,8 +128,11 @@
           value={componentInstance[setting.key] ??
             componentInstance[setting.key]?.defaultValue}
           {componentInstance}
-          onChange={val => onChange(setting.key, val)}
-          props={{ options: setting.options, placeholder: setting.placeholder }}
+          onChange={val => updateProp(setting.key, val)}
+          props={{
+            options: setting.options,
+            placeholder: setting.placeholder,
+          }}
         />
       {/if}
     {/each}
@@ -160,39 +144,11 @@
       {@html componentDefinition?.info}
     </div>
   {/if}
-
-  {#if componentDefinition?.component?.endsWith("/fieldgroup")}
-    <div class="buttonWrapper">
-      <Button secondary wide on:click={() => confirmResetFieldsDialog?.show()}>
-        Update Form Fields
-      </Button>
-    </div>
-  {/if}
-</div>
-<ConfirmDialog
-  bind:this={confirmResetFieldsDialog}
-  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"
-/>
+</DetailSummary>
 
 <style>
-  .settings-view-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    gap: var(--spacing-s);
-  }
   .text {
     font-size: var(--spectrum-global-dimension-font-size-75);
-    margin-top: var(--spacing-m);
     color: var(--grey-6);
   }
-  .buttonWrapper {
-    margin-top: 10px;
-    display: flex;
-    flex-direction: column;
-  }
 </style>
diff --git a/packages/standard-components/src/charts/BarChart.svelte b/packages/standard-components/src/charts/BarChart.svelte
index 7228af0525..7d0d07a845 100644
--- a/packages/standard-components/src/charts/BarChart.svelte
+++ b/packages/standard-components/src/charts/BarChart.svelte
@@ -21,7 +21,7 @@
 
   const setUpChart = provider => {
     const allCols = [labelColumn, ...(valueColumns || [null])]
-    if (!provider || allCols.find(x => x == null)) {
+    if (!provider || !provider.rows?.length || allCols.find(x => x == null)) {
       return null
     }
 
diff --git a/packages/standard-components/src/charts/CandleStickChart.svelte b/packages/standard-components/src/charts/CandleStickChart.svelte
index 9435b27cfd..b45e7fe663 100644
--- a/packages/standard-components/src/charts/CandleStickChart.svelte
+++ b/packages/standard-components/src/charts/CandleStickChart.svelte
@@ -21,7 +21,7 @@
   // Fetch data on mount
   const setUpChart = provider => {
     const allCols = [dateColumn, openColumn, highColumn, lowColumn, closeColumn]
-    if (!provider || allCols.find(x => x == null)) {
+    if (!provider || !provider.rows?.length || allCols.find(x => x == null)) {
       return null
     }
 
diff --git a/packages/standard-components/src/charts/LineChart.svelte b/packages/standard-components/src/charts/LineChart.svelte
index 095b1b4598..62fc97cf58 100644
--- a/packages/standard-components/src/charts/LineChart.svelte
+++ b/packages/standard-components/src/charts/LineChart.svelte
@@ -28,7 +28,7 @@
   // Fetch data on mount
   const setUpChart = provider => {
     const allCols = [labelColumn, ...(valueColumns || [null])]
-    if (!provider || allCols.find(x => x == null)) {
+    if (!provider || !provider.rows?.length || allCols.find(x => x == null)) {
       return null
     }
 
diff --git a/packages/standard-components/src/charts/PieChart.svelte b/packages/standard-components/src/charts/PieChart.svelte
index 4fa7404637..e14061407e 100644
--- a/packages/standard-components/src/charts/PieChart.svelte
+++ b/packages/standard-components/src/charts/PieChart.svelte
@@ -18,7 +18,7 @@
 
   // Fetch data on mount
   const setUpChart = provider => {
-    if (!provider || !labelColumn || !valueColumn) {
+    if (!provider || !provider.rows?.length || !labelColumn || !valueColumn) {
       return null
     }
 

From 2367a97f39fffbff33d8423eef78f19c7a78b3d5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 22 Jun 2021 09:36:50 +0100
Subject: [PATCH 02/32] Add screen settings section, refactor more of component
 settings panel

---
 .../src/DetailSummary/DetailSummary.svelte    |  2 +-
 ...svelte => ComponentSettingsSection.svelte} | 46 +++++------------
 .../PropertiesPanel/PropertiesPanel.svelte    | 38 ++++----------
 .../PropertyControls/PropertyControl.svelte   |  1 -
 .../ScreenSettingsSection.svelte              | 51 +++++++++++++++++++
 packages/standard-components/manifest.json    |  5 --
 6 files changed, 74 insertions(+), 69 deletions(-)
 rename packages/builder/src/components/design/PropertiesPanel/{SettingsSection.svelte => ComponentSettingsSection.svelte} (83%)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte

diff --git a/packages/bbui/src/DetailSummary/DetailSummary.svelte b/packages/bbui/src/DetailSummary/DetailSummary.svelte
index f20ccc56ae..a3772cee38 100644
--- a/packages/bbui/src/DetailSummary/DetailSummary.svelte
+++ b/packages/bbui/src/DetailSummary/DetailSummary.svelte
@@ -72,6 +72,6 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-m);
+    gap: var(--spacing-l);
   }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
similarity index 83%
rename from packages/builder/src/components/design/PropertiesPanel/SettingsSection.svelte
rename to packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
index 7a5d8becd1..b0f4257a8e 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
@@ -1,8 +1,7 @@
 <script>
-  import { get } from "lodash"
   import { isEmpty } from "lodash/fp"
   import { Checkbox, Input, Select, DetailSummary } from "@budibase/bbui"
-  import { store } from "builderStore"
+  import { selectedComponent, store } from "builderStore"
   import PropertyControl from "./PropertyControls/PropertyControl.svelte"
   import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
   import RoleSelect from "./PropertyControls/RoleSelect.svelte"
@@ -26,12 +25,11 @@
   import DateTimeFieldSelect from "./PropertyControls/DateTimeFieldSelect.svelte"
   import AttachmentFieldSelect from "./PropertyControls/AttachmentFieldSelect.svelte"
   import RelationshipFieldSelect from "./PropertyControls/RelationshipFieldSelect.svelte"
+  import { FrontendTypes } from "constants"
 
-  export let componentDefinition = {}
-  export let componentInstance = {}
+  export let componentDefinition
+  export let componentInstance
   export let assetInstance
-  export let onScreenPropChange = () => {}
-  export let showDisplayName = false
   export let openSection
 
   const layoutDefinition = []
@@ -90,33 +88,15 @@
   }
 </script>
 
-<DetailSummary
-  name={componentDefinition.name}
-  on:open
-  show={openSection === "settings"}
->
-  {#if assetInstance}
-    {#each assetDefinition as def (`${componentInstance._id}-${def.key}`)}
-      <PropertyControl
-        bindable={false}
-        control={def.control}
-        label={def.label}
-        key={def.key}
-        value={get(assetInstance, def.key)}
-        onChange={val => onScreenPropChange(def.key, val)}
-      />
-    {/each}
-  {/if}
-  {#if showDisplayName}
-    <PropertyControl
-      bindable={false}
-      control={Input}
-      label="Name"
-      key="_instanceName"
-      value={componentInstance._instanceName}
-      onChange={val => updateProp("_instanceName", val)}
-    />
-  {/if}
+<DetailSummary name="Component" on:open show={openSection === "settings"}>
+  <PropertyControl
+    bindable={false}
+    control={Input}
+    label="Name"
+    key="_instanceName"
+    value={componentInstance._instanceName}
+    onChange={val => updateProp("_instanceName", val)}
+  />
   {#if settings && settings.length > 0}
     {#each settings as setting (`${componentInstance._id}-${setting.key}`)}
       {#if canRenderControl(setting)}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
index 34762d552d..2e350ce7bc 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@@ -1,13 +1,11 @@
 <script>
-  import { get } from "svelte/store"
   import { store, selectedComponent, currentAsset } from "builderStore"
   import { Tabs, Tab } from "@budibase/bbui"
-  import { FrontendTypes } from "constants"
-  import SettingsSection from "./SettingsSection.svelte"
+  import ScreenSettingsSection from "./ScreenSettingsSection.svelte"
+  import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
   import DesignSection from "./DesignSection.svelte"
   import CustomStylesSection from "./CustomStylesSection.svelte"
   import ActionsSection from "./ActionsSection.svelte"
-  import { setWith } from "lodash"
 
   let openSection = "settings"
 
@@ -15,37 +13,19 @@
   $: componentDefinition = store.actions.components.getDefinition(
     $selectedComponent?._component
   )
-  $: isComponentOrScreen =
-    $store.currentView === "component" ||
-    $store.currentFrontEndType === FrontendTypes.SCREEN
-  $: isNotScreenslot = !$selectedComponent._component.endsWith("screenslot")
-  $: showDisplayName = isComponentOrScreen && isNotScreenslot
-
-  function setAssetProps(name, value) {
-    const selectedAsset = get(currentAsset)
-    store.update(state => {
-      if (
-        name === "_instanceName" &&
-        state.currentFrontEndType === FrontendTypes.SCREEN
-      ) {
-        selectedAsset.props._instanceName = value
-      } else {
-        setWith(selectedAsset, name.split("."), value, Object)
-      }
-      return state
-    })
-    store.actions.preview.saveSelected()
-  }
 </script>
 
 <Tabs selected="Settings" noPadding>
   <Tab title="Settings">
-    <SettingsSection
+    <ScreenSettingsSection
+      {componentInstance}
+      {componentDefinition}
+      {openSection}
+      on:open={() => (openSection = "settings")}
+    />
+    <ComponentSettingsSection
       {componentInstance}
       {componentDefinition}
-      {showDisplayName}
-      onScreenPropChange={setAssetProps}
-      assetInstance={$store.currentView !== "component" && $currentAsset}
       {openSection}
       on:open={() => (openSection = "settings")}
     />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
index ac23e819d5..0ee5646bc4 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@@ -127,7 +127,6 @@
 
   .label {
     text-transform: capitalize;
-    padding-top: var(--spectrum-global-dimension-size-50);
     padding-bottom: var(--spectrum-global-dimension-size-65);
   }
 
diff --git a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
new file mode 100644
index 0000000000..32b5b03c6c
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
@@ -0,0 +1,51 @@
+<script>
+  import { get } from "svelte/store"
+  import { get as deepGet, setWith } from "lodash"
+  import { Input, DetailSummary } from "@budibase/bbui"
+  import PropertyControl from "./PropertyControls/PropertyControl.svelte"
+  import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
+  import RoleSelect from "./PropertyControls/RoleSelect.svelte"
+  import { currentAsset, store } from "builderStore"
+  import { FrontendTypes } from "constants"
+
+  export let componentInstance
+  export let openSection
+
+  function setAssetProps(name, value) {
+    const selectedAsset = get(currentAsset)
+    store.update(state => {
+      if (
+        name === "_instanceName" &&
+        state.currentFrontEndType === FrontendTypes.SCREEN
+      ) {
+        selectedAsset.props._instanceName = value
+      } else {
+        setWith(selectedAsset, name.split("."), value, Object)
+      }
+      return state
+    })
+    store.actions.preview.saveSelected()
+  }
+
+  const screenSettings = [
+    { key: "description", label: "Description", control: Input },
+    { key: "routing.route", label: "Route", control: Input },
+    { key: "routing.roleId", label: "Access", control: RoleSelect },
+    { key: "layoutId", label: "Layout", control: LayoutSelect },
+  ]
+</script>
+
+{#if $currentAsset && $store.currentFrontEndType === FrontendTypes.SCREEN}
+  <DetailSummary name="Screen" on:open show={openSection === "screen"}>
+    {#each screenSettings as def (`${componentInstance._id}-${def.key}`)}
+      <PropertyControl
+        bindable={false}
+        control={def.control}
+        label={def.label}
+        key={def.key}
+        value={deepGet($currentAsset, def.key)}
+        onChange={val => setAssetProps(def.key, val)}
+      />
+    {/each}
+  </DetailSummary>
+{/if}
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 1f10f3ed96..450a0d823c 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -232,11 +232,6 @@
         "type": "event",
         "label": "On Click",
         "key": "onClick"
-      },
-      {
-        "type": "boolean",
-        "label": "Disabled",
-        "key": "disabled"
       }
     ]
   },

From dd4c7a186ec6d0119383479c60116f9e53edf096 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 23 Jun 2021 07:55:33 +0100
Subject: [PATCH 03/32] Add new style definitions for containers

---
 .../src/DetailSummary/DetailSummary.svelte    |   10 +-
 .../PropertiesPanel/ActionsSection.svelte     |   24 +-
 .../ComponentSettingsSection.svelte           |    6 +-
 .../CustomStylesSection.svelte                |   59 +-
 .../PropertiesPanel/DesignSection.svelte      |   58 +-
 .../PropertiesPanel/PropertiesPanel.svelte    |   48 +-
 .../PropertyControls/PropertyGroup.svelte     |   53 +-
 .../ScreenSettingsSection.svelte              |    7 +-
 .../design/PropertiesPanel/componentStyles.js |  792 +++++-----
 packages/server/yarn.lock                     | 1326 +----------------
 packages/standard-components/manifest.json    |    4 +-
 11 files changed, 495 insertions(+), 1892 deletions(-)

diff --git a/packages/bbui/src/DetailSummary/DetailSummary.svelte b/packages/bbui/src/DetailSummary/DetailSummary.svelte
index a3772cee38..518c615504 100644
--- a/packages/bbui/src/DetailSummary/DetailSummary.svelte
+++ b/packages/bbui/src/DetailSummary/DetailSummary.svelte
@@ -4,9 +4,13 @@
 
   export let name
   export let show = false
+  export let collapsible = true
 
   const dispatch = createEventDispatcher()
   const onHeaderClick = () => {
+    if (!collapsible) {
+      return
+    }
     show = !show
     if (show) {
       dispatch("open")
@@ -17,9 +21,11 @@
 <div class="property-group-container">
   <div class="property-group-name" on:click={onHeaderClick}>
     <div class="name">{name}</div>
-    <Icon size="S" name={show ? "Remove" : "Add"} />
+    {#if collapsible}
+      <Icon size="S" name={show ? "Remove" : "Add"} />
+    {/if}
   </div>
-  <div class="property-panel" class:show>
+  <div class="property-panel" class:show={show || !collapsible}>
     <slot />
   </div>
 </div>
diff --git a/packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte
index febfb56f16..9d6297913e 100644
--- a/packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte
@@ -1,11 +1,10 @@
 <script>
-  import { DetailSummary, ActionButton } from "@budibase/bbui"
+  import { ActionButton } from "@budibase/bbui"
   import { currentAsset, store } from "builderStore"
   import { findClosestMatchingComponent } from "builderStore/storeUtils"
   import { makeDatasourceFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
-  export let openSection
   export let componentDefinition
   export let componentInstance
 
@@ -26,20 +25,15 @@
   }
 </script>
 
-<DetailSummary name="Actions" on:open show={openSection === "actions"}>
-  <ActionButton secondary wide on:click={store.actions.components.resetStyles}>
-    Reset styles
+{#if componentDefinition?.component?.endsWith("/fieldgroup")}
+  <ActionButton
+    secondary
+    wide
+    on:click={() => confirmResetFieldsDialog?.show()}
+  >
+    Update form fields
   </ActionButton>
-  {#if componentDefinition?.component?.endsWith("/fieldgroup")}
-    <ActionButton
-      secondary
-      wide
-      on:click={() => confirmResetFieldsDialog?.show()}
-    >
-      Update form fields
-    </ActionButton>
-  {/if}
-</DetailSummary>
+{/if}
 
 <ConfirmDialog
   bind:this={confirmResetFieldsDialog}
diff --git a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
index b0f4257a8e..916120a0c6 100644
--- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
@@ -1,7 +1,7 @@
 <script>
   import { isEmpty } from "lodash/fp"
   import { Checkbox, Input, Select, DetailSummary } from "@budibase/bbui"
-  import { selectedComponent, store } from "builderStore"
+  import { store } from "builderStore"
   import PropertyControl from "./PropertyControls/PropertyControl.svelte"
   import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
   import RoleSelect from "./PropertyControls/RoleSelect.svelte"
@@ -25,12 +25,10 @@
   import DateTimeFieldSelect from "./PropertyControls/DateTimeFieldSelect.svelte"
   import AttachmentFieldSelect from "./PropertyControls/AttachmentFieldSelect.svelte"
   import RelationshipFieldSelect from "./PropertyControls/RelationshipFieldSelect.svelte"
-  import { FrontendTypes } from "constants"
 
   export let componentDefinition
   export let componentInstance
   export let assetInstance
-  export let openSection
 
   const layoutDefinition = []
   const screenDefinition = [
@@ -88,7 +86,7 @@
   }
 </script>
 
-<DetailSummary name="Component" on:open show={openSection === "settings"}>
+<DetailSummary name="General" collapsible={false}>
   <PropertyControl
     bindable={false}
     control={Input}
diff --git a/packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte b/packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte
index 17a3e7c084..af8ba61ae6 100644
--- a/packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte
@@ -1,33 +1,60 @@
 <script>
-  import { TextArea, DetailSummary } from "@budibase/bbui"
+  import {
+    TextArea,
+    DetailSummary,
+    ActionButton,
+    Drawer,
+    DrawerContent,
+    Layout,
+    Body,
+    Button,
+  } from "@budibase/bbui"
   import { store } from "builderStore"
 
   export let componentInstance
-  export let openSection
 
-  function onChange(css) {
-    store.actions.components.updateCustomStyle(css)
+  let tempValue
+  let drawer
+
+  const openDrawer = () => {
+    tempValue = componentInstance?._styles?.custom
+    drawer.show()
+  }
+
+  const save = () => {
+    store.actions.components.updateCustomStyle(tempValue)
+    drawer.hide()
   }
 </script>
 
 <DetailSummary
-  name={`Custom Styles${componentInstance?._styles?.custom ? " *" : ""}`}
-  on:open
-  show={openSection === "custom"}
+  name={`Custom CSS${componentInstance?._styles?.custom ? " *" : ""}`}
+  collapsible={false}
 >
-  <div class="custom-styles">
-    <TextArea
-      value={componentInstance?._styles?.custom}
-      on:change={event => onChange(event.detail)}
-      placeholder="Enter some CSS..."
-    />
+  <div>
+    <ActionButton on:click={openDrawer}>Edit custom CSS</ActionButton>
   </div>
 </DetailSummary>
+<Drawer bind:this={drawer} title="Custom CSS">
+  <Button cta slot="buttons" on:click={save}>Save</Button>
+  <DrawerContent slot="body">
+    <div class="content">
+      <Layout gap="S">
+        <Body size="S">Custom CSS overrides all other component styles.</Body>
+        <TextArea bind:value={tempValue} placeholder="Enter some CSS..." />
+      </Layout>
+    </div>
+  </DrawerContent>
+</Drawer>
 
 <style>
-  .custom-styles :global(textarea) {
+  .content {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+  .content :global(textarea) {
     font-family: monospace;
-    min-height: 120px;
-    font-size: var(--font-size-xs);
+    min-height: 240px !important;
+    font-size: var(--font-size-s);
   }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte b/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte
index bfcb9b6b4a..74798d7012 100644
--- a/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte
@@ -1,42 +1,34 @@
 <script>
-  import { DetailSummary } from "@budibase/bbui"
   import PropertyGroup from "./PropertyControls/PropertyGroup.svelte"
-  import { allStyles } from "./componentStyles"
-  import { store } from "builderStore"
+  import * as ComponentStyles from "./componentStyles"
 
   export let componentDefinition
   export let componentInstance
-  export let openSection
 
-  let selectedCategory = "normal"
-  let currentGroup
+  const getStyles = def => {
+    if (!def?.styles?.length) {
+      return [...ComponentStyles.all]
+    }
+    let styles = [...ComponentStyles.all]
+    def.styles.forEach(style => {
+      if (ComponentStyles[style]) {
+        styles.push(ComponentStyles[style])
+      }
+    })
+    return styles
+  }
 
-  $: groups = componentDefinition?.styleable ? Object.keys(allStyles) : []
+  $: styles = getStyles(componentDefinition)
 </script>
 
-<DetailSummary name="Design" show={openSection === "design"} on:open>
-  {#if groups.length > 0}
-    {#each groups as groupName}
-      <PropertyGroup
-        name={groupName}
-        properties={allStyles[groupName]}
-        styleCategory={selectedCategory}
-        onStyleChanged={store.actions.components.updateStyle}
-        {componentInstance}
-        open={currentGroup === groupName}
-        on:open={() => (currentGroup = groupName)}
-      />
-    {/each}
-  {:else}
-    <div class="no-design">
-      This component doesn't have any design properties.
-    </div>
-  {/if}
-</DetailSummary>
-
-<style>
-  .no-design {
-    font-size: var(--spectrum-global-dimension-font-size-75);
-    color: var(--grey-6);
-  }
-</style>
+{#if styles?.length > 0}
+  {#each styles as style}
+    <PropertyGroup
+      {style}
+      name={style.label}
+      inline={style.inline}
+      properties={style.settings}
+      {componentInstance}
+    />
+  {/each}
+{/if}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
index 2e350ce7bc..c24dbec465 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@@ -7,8 +7,6 @@
   import CustomStylesSection from "./CustomStylesSection.svelte"
   import ActionsSection from "./ActionsSection.svelte"
 
-  let openSection = "settings"
-
   $: componentInstance = $selectedComponent
   $: componentDefinition = store.actions.components.getDefinition(
     $selectedComponent?._component
@@ -17,35 +15,21 @@
 
 <Tabs selected="Settings" noPadding>
   <Tab title="Settings">
-    <ScreenSettingsSection
-      {componentInstance}
-      {componentDefinition}
-      {openSection}
-      on:open={() => (openSection = "settings")}
-    />
-    <ComponentSettingsSection
-      {componentInstance}
-      {componentDefinition}
-      {openSection}
-      on:open={() => (openSection = "settings")}
-    />
-    <DesignSection
-      {componentInstance}
-      {componentDefinition}
-      {openSection}
-      on:open={() => (openSection = "design")}
-    />
-    <CustomStylesSection
-      {componentInstance}
-      {componentDefinition}
-      {openSection}
-      on:open={() => (openSection = "custom")}
-    />
-    <ActionsSection
-      {componentInstance}
-      {componentDefinition}
-      {openSection}
-      on:open={() => (openSection = "actions")}
-    />
+    <div class="container">
+      <ScreenSettingsSection {componentInstance} {componentDefinition} />
+      <ComponentSettingsSection {componentInstance} {componentDefinition} />
+      <DesignSection {componentInstance} {componentDefinition} />
+      <CustomStylesSection {componentInstance} {componentDefinition} />
+      <ActionsSection {componentInstance} {componentDefinition} />
+    </div>
   </Tab>
 </Tabs>
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
index 201d03c61a..ead7ba5938 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
@@ -1,16 +1,15 @@
 <script>
   import PropertyControl from "./PropertyControl.svelte"
   import { DetailSummary } from "@budibase/bbui"
+  import { store } from "builderStore"
 
-  export let name = ""
-  export let styleCategory = "normal"
-  export let properties = []
-  export let componentInstance = {}
-  export let onStyleChanged = () => {}
-  export let open = false
+  export let name
+  export let inline = false
+  export let properties
+  export let componentInstance
 
-  $: style = componentInstance["_styles"][styleCategory] || {}
-  $: changed = properties.some(prop => hasPropChanged(style, prop))
+  $: style = componentInstance._styles.normal || {}
+  $: changed = properties?.some(prop => hasPropChanged(style, prop)) ?? false
 
   const hasPropChanged = (style, prop) => {
     return style[prop.key] != null && style[prop.key] !== ""
@@ -25,30 +24,32 @@
   }
 </script>
 
-<DetailSummary name={`${name}${changed ? " *" : ""}`} on:open show={open} thin>
-  {#if open}
-    <div>
-      {#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)}
-        <PropertyControl
-          bindable={false}
-          label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
-          control={prop.control}
-          key={prop.key}
-          value={style[prop.key]}
-          onChange={value => onStyleChanged(styleCategory, prop.key, value)}
-          props={getControlProps(prop)}
-        />
-      {/each}
-    </div>
-  {/if}
+<DetailSummary collapsible={false} name={`${name}${changed ? " *" : ""}`}>
+  <div class="group-content" class:inline>
+    {#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)}
+      <PropertyControl
+        bindable={false}
+        label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
+        control={prop.control}
+        key={prop.key}
+        value={style[prop.key]}
+        onChange={val => store.actions.components.updateStyle(prop.key, val)}
+        props={getControlProps(prop)}
+      />
+    {/each}
+  </div>
 </DetailSummary>
 
 <style>
-  div {
+  .group-content {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-s);
+    gap: var(--spacing-l);
+  }
+  .inline {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
   }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
index 32b5b03c6c..a153c4fc87 100644
--- a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
@@ -9,7 +9,6 @@
   import { FrontendTypes } from "constants"
 
   export let componentInstance
-  export let openSection
 
   function setAssetProps(name, value) {
     const selectedAsset = get(currentAsset)
@@ -28,15 +27,15 @@
   }
 
   const screenSettings = [
-    { key: "description", label: "Description", control: Input },
+    // { key: "description", label: "Description", control: Input },
     { key: "routing.route", label: "Route", control: Input },
     { key: "routing.roleId", label: "Access", control: RoleSelect },
     { key: "layoutId", label: "Layout", control: LayoutSelect },
   ]
 </script>
 
-{#if $currentAsset && $store.currentFrontEndType === FrontendTypes.SCREEN}
-  <DetailSummary name="Screen" on:open show={openSection === "screen"}>
+{#if $store.currentView !== "component" && $currentAsset && $store.currentFrontEndType === FrontendTypes.SCREEN}
+  <DetailSummary name="Screen" collapsible={false}>
     {#each screenSettings as def (`${componentInstance._id}-${def.key}`)}
       <PropertyControl
         bindable={false}
diff --git a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
index 3388d1772d..3a95bb2b9e 100644
--- a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
+++ b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
@@ -81,239 +81,198 @@ export const layout = [
   },
 ]
 
-export const margin = [
-  {
-    label: "All sides",
-    key: "margin",
-    control: Select,
-    options: [
-      { label: "None", value: "0px" },
-      { label: "4px", value: "4px" },
-      { label: "8px", value: "8px" },
-      { label: "16px", value: "16px" },
-      { label: "20px", value: "20px" },
-      { label: "32px", value: "32px" },
-      { label: "48px", value: "48px" },
-      { label: "64px", value: "64px" },
-      { label: "128px", value: "128px" },
-      { label: "256px", value: "256px" },
-      { label: "Auto", value: "auto" },
-      { label: "100%", value: "100%" },
-    ],
-  },
-  {
-    label: "Top",
-    key: "margin-top",
-    control: Select,
-    options: [
-      { label: "None", value: "0px" },
-      { label: "4px", value: "4px" },
-      { label: "8px", value: "8px" },
-      { label: "16px", value: "16px" },
-      { label: "20px", value: "20px" },
-      { label: "32px", value: "32px" },
-      { label: "48px", value: "48px" },
-      { label: "64px", value: "64px" },
-      { label: "128px", value: "128px" },
-      { label: "256px", value: "256px" },
-      { label: "Auto", value: "auto" },
-      { label: "100%", value: "100%" },
-    ],
-  },
-  {
-    label: "Right",
-    key: "margin-right",
-    control: Select,
-    options: [
-      { label: "None", value: "0px" },
-      { label: "4px", value: "4px" },
-      { label: "8px", value: "8px" },
-      { label: "16px", value: "16px" },
-      { label: "20px", value: "20px" },
-      { label: "32px", value: "32px" },
-      { label: "48px", value: "48px" },
-      { label: "64px", value: "64px" },
-      { label: "128px", value: "128px" },
-      { label: "256px", value: "256px" },
-      { label: "Auto", value: "auto" },
-      { label: "100%", value: "100%" },
-    ],
-  },
-  {
-    label: "Bottom",
-    key: "margin-bottom",
-    control: Select,
-    options: [
-      { label: "None", value: "0px" },
-      { label: "4px", value: "4px" },
-      { label: "8px", value: "8px" },
-      { label: "16px", value: "16px" },
-      { label: "20px", value: "20px" },
-      { label: "32px", value: "32px" },
-      { label: "48px", value: "48px" },
-      { label: "64px", value: "64px" },
-      { label: "128px", value: "128px" },
-      { label: "256px", value: "256px" },
-      { label: "Auto", value: "auto" },
-      { label: "100%", value: "100%" },
-    ],
-  },
-  {
-    label: "Left",
-    key: "margin-left",
-    control: Select,
-    options: [
-      { label: "None", value: "0px" },
-      { label: "4px", value: "4px" },
-      { label: "8px", value: "8px" },
-      { label: "16px", value: "16px" },
-      { label: "20px", value: "20px" },
-      { label: "32px", value: "32px" },
-      { label: "48px", value: "48px" },
-      { label: "64px", value: "64px" },
-      { label: "128px", value: "128px" },
-      { label: "256px", value: "256px" },
-      { label: "Auto", value: "auto" },
-      { label: "100%", value: "100%" },
-    ],
-  },
-]
+export const margin = {
+  label: "Margin",
+  inline: true,
+  settings: [
+    {
+      label: "Top",
+      key: "margin-top",
+      control: Select,
+      bindable: false,
+      placeholder: "None",
+      options: [
+        { label: "4px", value: "4px" },
+        { label: "8px", value: "8px" },
+        { label: "16px", value: "16px" },
+        { label: "20px", value: "20px" },
+        { label: "32px", value: "32px" },
+        { label: "48px", value: "48px" },
+        { label: "64px", value: "64px" },
+        { label: "128px", value: "128px" },
+        { label: "256px", value: "256px" },
+        { label: "Auto", value: "auto" },
+        { label: "100%", value: "100%" },
+      ],
+    },
+    {
+      label: "Right",
+      key: "margin-right",
+      control: Select,
+      bindable: false,
+      placeholder: "None",
+      options: [
+        { label: "4px", value: "4px" },
+        { label: "8px", value: "8px" },
+        { label: "16px", value: "16px" },
+        { label: "20px", value: "20px" },
+        { label: "32px", value: "32px" },
+        { label: "48px", value: "48px" },
+        { label: "64px", value: "64px" },
+        { label: "128px", value: "128px" },
+        { label: "256px", value: "256px" },
+        { label: "Auto", value: "auto" },
+        { label: "100%", value: "100%" },
+      ],
+    },
+    {
+      label: "Bottom",
+      key: "margin-bottom",
+      control: Select,
+      bindable: false,
+      placeholder: "None",
+      options: [
+        { label: "4px", value: "4px" },
+        { label: "8px", value: "8px" },
+        { label: "16px", value: "16px" },
+        { label: "20px", value: "20px" },
+        { label: "32px", value: "32px" },
+        { label: "48px", value: "48px" },
+        { label: "64px", value: "64px" },
+        { label: "128px", value: "128px" },
+        { label: "256px", value: "256px" },
+        { label: "Auto", value: "auto" },
+        { label: "100%", value: "100%" },
+      ],
+    },
+    {
+      label: "Left",
+      key: "margin-left",
+      control: Select,
+      bindable: false,
+      placeholder: "None",
+      options: [
+        { label: "4px", value: "4px" },
+        { label: "8px", value: "8px" },
+        { label: "16px", value: "16px" },
+        { label: "20px", value: "20px" },
+        { label: "32px", value: "32px" },
+        { label: "48px", value: "48px" },
+        { label: "64px", value: "64px" },
+        { label: "128px", value: "128px" },
+        { label: "256px", value: "256px" },
+        { label: "Auto", value: "auto" },
+        { label: "100%", value: "100%" },
+      ],
+    },
+  ],
+}
 
-export const padding = [
-  {
-    label: "All sides",
-    key: "padding",
-    control: Select,
-    options: [
-      { label: "None", value: "0px" },
-      { label: "4px", value: "4px" },
-      { label: "8px", value: "8px" },
-      { label: "16px", value: "16px" },
-      { label: "20px", value: "20px" },
-      { label: "32px", value: "32px" },
-      { label: "48px", value: "48px" },
-      { label: "64px", value: "64px" },
-      { label: "Auto", value: "auto" },
-      { label: "100%", value: "100%" },
-    ],
-  },
-  {
-    label: "Top",
-    key: "padding-top",
-    control: Select,
-    options: [
-      { label: "None", value: "0px" },
-      { label: "4px", value: "4px" },
-      { label: "8px", value: "8px" },
-      { label: "16px", value: "16px" },
-      { label: "20px", value: "20px" },
-      { label: "32px", value: "32px" },
-      { label: "48px", value: "48px" },
-      { label: "64px", value: "64px" },
-      { label: "Auto", value: "auto" },
-      { label: "100%", value: "100%" },
-    ],
-  },
-  {
-    label: "Right",
-    key: "padding-right",
-    control: Select,
-    options: [
-      { label: "None", value: "0px" },
-      { label: "4px", value: "4px" },
-      { label: "8px", value: "8px" },
-      { label: "16px", value: "16px" },
-      { label: "20px", value: "20px" },
-      { label: "32px", value: "32px" },
-      { label: "48px", value: "48px" },
-      { label: "64px", value: "64px" },
-      { label: "Auto", value: "auto" },
-      { label: "100%", value: "100%" },
-    ],
-  },
-  {
-    label: "Bottom",
-    key: "padding-bottom",
-    control: Select,
-    options: [
-      { label: "None", value: "0px" },
-      { label: "4px", value: "4px" },
-      { label: "8px", value: "8px" },
-      { label: "16px", value: "16px" },
-      { label: "20px", value: "20px" },
-      { label: "32px", value: "32px" },
-      { label: "48px", value: "48px" },
-      { label: "64px", value: "64px" },
-      { label: "Auto", value: "auto" },
-      { label: "100%", value: "100%" },
-    ],
-  },
-  {
-    label: "Left",
-    key: "padding-left",
-    control: Select,
-    options: [
-      { label: "None", value: "0px" },
-      { label: "4px", value: "4px" },
-      { label: "8px", value: "8px" },
-      { label: "16px", value: "16px" },
-      { label: "20px", value: "20px" },
-      { label: "32px", value: "32px" },
-      { label: "48px", value: "48px" },
-      { label: "64px", value: "64px" },
-      { label: "Auto", value: "auto" },
-      { label: "100%", value: "100%" },
-    ],
-  },
-]
+export const padding = {
+  label: "Padding",
+  inline: true,
+  settings: [
+    {
+      label: "Top",
+      key: "padding-top",
+      control: Select,
+      bindable: false,
+      placeholder: "None",
+      options: [
+        { label: "4px", value: "4px" },
+        { label: "8px", value: "8px" },
+        { label: "16px", value: "16px" },
+        { label: "20px", value: "20px" },
+        { label: "32px", value: "32px" },
+        { label: "48px", value: "48px" },
+        { label: "64px", value: "64px" },
+        { label: "128px", value: "128px" },
+        { label: "256px", value: "256px" },
+        { label: "Auto", value: "auto" },
+        { label: "100%", value: "100%" },
+      ],
+    },
+    {
+      label: "Right",
+      key: "padding-right",
+      control: Select,
+      bindable: false,
+      placeholder: "None",
+      options: [
+        { label: "4px", value: "4px" },
+        { label: "8px", value: "8px" },
+        { label: "16px", value: "16px" },
+        { label: "20px", value: "20px" },
+        { label: "32px", value: "32px" },
+        { label: "48px", value: "48px" },
+        { label: "64px", value: "64px" },
+        { label: "128px", value: "128px" },
+        { label: "256px", value: "256px" },
+        { label: "Auto", value: "auto" },
+        { label: "100%", value: "100%" },
+      ],
+    },
+    {
+      label: "Bottom",
+      key: "padding-bottom",
+      control: Select,
+      bindable: false,
+      placeholder: "None",
+      options: [
+        { label: "4px", value: "4px" },
+        { label: "8px", value: "8px" },
+        { label: "16px", value: "16px" },
+        { label: "20px", value: "20px" },
+        { label: "32px", value: "32px" },
+        { label: "48px", value: "48px" },
+        { label: "64px", value: "64px" },
+        { label: "128px", value: "128px" },
+        { label: "256px", value: "256px" },
+        { label: "Auto", value: "auto" },
+        { label: "100%", value: "100%" },
+      ],
+    },
+    {
+      label: "Left",
+      key: "padding-left",
+      control: Select,
+      bindable: false,
+      placeholder: "None",
+      options: [
+        { label: "4px", value: "4px" },
+        { label: "8px", value: "8px" },
+        { label: "16px", value: "16px" },
+        { label: "20px", value: "20px" },
+        { label: "32px", value: "32px" },
+        { label: "48px", value: "48px" },
+        { label: "64px", value: "64px" },
+        { label: "128px", value: "128px" },
+        { label: "256px", value: "256px" },
+        { label: "Auto", value: "auto" },
+        { label: "100%", value: "100%" },
+      ],
+    },
+  ],
+}
 
-export const size = [
-  {
-    label: "Flex",
-    key: "flex",
-    control: Select,
-    options: [
-      { label: "Shrink", value: "0 1 auto" },
-      { label: "Grow", value: "1 1 auto" },
-    ],
-  },
-  {
-    label: "Width",
-    key: "width",
-    control: Input,
-    placeholder: "px",
-  },
-  {
-    label: "Height",
-    key: "height",
-    control: Input,
-    placeholder: "px",
-  },
-  {
-    label: "Min Width",
-    key: "min-width",
-    control: Input,
-    placeholder: "px",
-  },
-  {
-    label: "Max Width",
-    key: "max-width",
-    control: Input,
-    placeholder: "px",
-  },
-  {
-    label: "Min Height",
-    key: "min-height",
-    control: Input,
-    placeholder: "px",
-  },
-  {
-    label: "Max Height",
-    key: "max-height",
-    control: Input,
-    placeholder: "px",
-  },
-]
+export const size = {
+  label: "Size",
+  inline: true,
+  settings: [
+    {
+      label: "Width",
+      key: "width",
+      control: Input,
+      placeholder: "px",
+    },
+    {
+      label: "Height",
+      key: "height",
+      control: Input,
+      placeholder: "px",
+    },
+  ],
+}
 
 export const position = [
   {
@@ -480,210 +439,162 @@ export const typography = [
   },
 ]
 
-export const background = [
-  {
-    label: "Color",
-    key: "background",
-    control: Colorpicker,
-  },
-  {
-    label: "Gradient",
-    key: "background-image",
-    control: Select,
-    options: [
-      { label: "None", value: "none" },
-      {
-        label: "Warm Flame",
-        value: "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);",
-      },
-      {
-        label: "Night Fade",
-        value: "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);",
-      },
-      {
-        label: "Spring Warmth",
-        value: "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);",
-      },
-      {
-        label: "Sunny Morning",
-        value: "linear-gradient(120deg, #f6d365 0%, #fda085 100%);",
-      },
-      {
-        label: "Winter Neva",
-        value: "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);",
-      },
-      {
-        label: "Tempting Azure",
-        value: "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);",
-      },
-      {
-        label: "Heavy Rain",
-        value: "linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);",
-      },
-      {
-        label: "Deep Blue",
-        value: "linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);",
-      },
-      {
-        label: "Near Moon",
-        value: "linear-gradient(to top, #5ee7df 0%, #b490ca 100%);",
-      },
-      {
-        label: "Wild Apple",
-        value: "linear-gradient(to top, #d299c2 0%, #fef9d7 100%);",
-      },
-      {
-        label: "Plum Plate",
-        value: "linear-gradient(135deg, #667eea 0%, #764ba2 100%);",
-      },
-      {
-        label: "Peach Kiss",
-        value:
-          "radial-gradient(circle farthest-corner at 50% 100%,rgba(255,173,138,.50), rgba(255,248,247,1) 100%);",
-      },
-      {
-        label: "Flamingo Sunrise",
-        value:
-          "-webkit-radial-gradient(center top, rgb(255, 250, 245), rgb(255, 242, 242))",
-      },
-      {
-        label: "Budi Mist",
-        value:
-          "radial-gradient(circle, rgba(252,215,212,1) 0%, rgba(255,227,214,1) 50%, rgba(207,218,255,1) 100%);",
-      },
-      {
-        label: "Ballet Slipper",
-        value:
-          "linear-gradient(135deg, rgba(252,215,212,1) 20%, rgba(207,218,255,1) 100%);",
-      },
-      {
-        label: "Black Noir",
-        value:
-          "linear-gradient(312deg, rgba(60,60,60,1) 0%, rgba(42,42,42,1) 100%);",
-      },
-    ],
-  },
-  {
-    label: "Image",
-    key: "background",
-    control: Input,
-    placeholder: "URL",
-  },
-]
+export const background = {
+  label: "Background",
+  settings: [
+    {
+      label: "Color",
+      key: "background",
+      control: Colorpicker,
+    },
+    {
+      label: "Gradient",
+      key: "background-image",
+      control: Select,
+      options: [
+        { label: "None", value: "none" },
+        {
+          label: "Warm Flame",
+          value:
+            "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);",
+        },
+        {
+          label: "Night Fade",
+          value: "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);",
+        },
+        {
+          label: "Spring Warmth",
+          value: "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);",
+        },
+        {
+          label: "Sunny Morning",
+          value: "linear-gradient(120deg, #f6d365 0%, #fda085 100%);",
+        },
+        {
+          label: "Winter Neva",
+          value: "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);",
+        },
+        {
+          label: "Tempting Azure",
+          value: "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);",
+        },
+        {
+          label: "Heavy Rain",
+          value: "linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);",
+        },
+        {
+          label: "Deep Blue",
+          value: "linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);",
+        },
+        {
+          label: "Near Moon",
+          value: "linear-gradient(to top, #5ee7df 0%, #b490ca 100%);",
+        },
+        {
+          label: "Wild Apple",
+          value: "linear-gradient(to top, #d299c2 0%, #fef9d7 100%);",
+        },
+        {
+          label: "Plum Plate",
+          value: "linear-gradient(135deg, #667eea 0%, #764ba2 100%);",
+        },
+        {
+          label: "Peach Kiss",
+          value:
+            "radial-gradient(circle farthest-corner at 50% 100%,rgba(255,173,138,.50), rgba(255,248,247,1) 100%);",
+        },
+        {
+          label: "Flamingo Sunrise",
+          value:
+            "-webkit-radial-gradient(center top, rgb(255, 250, 245), rgb(255, 242, 242))",
+        },
+        {
+          label: "Budi Mist",
+          value:
+            "radial-gradient(circle, rgba(252,215,212,1) 0%, rgba(255,227,214,1) 50%, rgba(207,218,255,1) 100%);",
+        },
+        {
+          label: "Ballet Slipper",
+          value:
+            "linear-gradient(135deg, rgba(252,215,212,1) 20%, rgba(207,218,255,1) 100%);",
+        },
+        {
+          label: "Black Noir",
+          value:
+            "linear-gradient(312deg, rgba(60,60,60,1) 0%, rgba(42,42,42,1) 100%);",
+        },
+      ],
+    },
+  ],
+}
 
-export const border = [
-  {
-    label: "Radius",
-    key: "border-radius",
-    control: Select,
-    options: [
-      { label: "None", value: "0" },
-      { label: "X Small", value: "0.125rem" },
-      { label: "Small", value: "0.25rem" },
-      { label: "Medium", value: "0.5rem" },
-      { label: "Large", value: "1rem" },
-      { label: "X Large", value: "2rem" },
-      { label: "XX Large", value: "4rem" },
-      { label: "Round", value: "5678px" },
-    ],
-  },
-  {
-    label: "Width",
-    key: "border-width",
-    control: Select,
-    options: [
-      { label: "None", value: "0" },
-      { label: "X Small", value: "0.5px" },
-      { label: "Small", value: "1px" },
-      { label: "Medium", value: "2px" },
-      { label: "Large", value: "4px" },
-      { label: "X large", value: "8px" },
-    ],
-  },
-  {
-    label: "Color",
-    key: "border-color",
-    control: Colorpicker,
-  },
-  {
-    label: "Style",
-    key: "border-style",
-    control: Select,
-    options: [
-      { label: "None", value: "none" },
-      { label: "Hidden", value: "hidden" },
-      { label: "Dotted", value: "dotted" },
-      { label: "Dashed", value: "dashed" },
-      { label: "Solid", value: "solid" },
-      { label: "Double", value: "double" },
-      { label: "Groove", value: "groove" },
-      { label: "Ridge", value: "ridge" },
-      { label: "Inset", value: "inset" },
-      { label: "Outset", value: "outset" },
-    ],
-  },
-]
-
-export const effects = [
-  {
-    label: "Opacity",
-    key: "opacity",
-    control: Select,
-    options: [
-      { label: "0", value: "0" },
-      { label: "0.2", value: "0.2" },
-      { label: "0.4", value: "0.4" },
-      { label: "0.6", value: "0.6" },
-      { label: "0.8", value: "0.8" },
-      { label: "1", value: "1" },
-    ],
-  },
-  {
-    label: "Rotate",
-    key: "transform",
-    control: Select,
-    options: [
-      { label: "None", value: "0" },
-      { label: "45 deg", value: "rotate(45deg)" },
-      { label: "90 deg", value: "rotate(90deg)" },
-      { label: "135 deg", value: "rotate(135deg)" },
-      { label: "180 deg", value: "rotate(180deg)" },
-      { label: "225 deg", value: "rotate(225deg)" },
-      { label: "270 deg", value: "rotate(270deg)" },
-      { label: "315 deg", value: "rotate(315deg)" },
-      { label: "360 deg", value: "rotate(360deg)" },
-    ],
-  },
-  {
-    label: "Shadow",
-    key: "box-shadow",
-    control: Select,
-    options: [
-      { label: "None", value: "none" },
-      { label: "X Small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
-      {
-        label: "Small",
-        value:
-          "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
-      },
-      {
-        label: "Medium",
-        value:
-          "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-      },
-      {
-        label: "Large",
-        value:
-          "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
-      },
-      {
-        label: "X Large",
-        value:
-          "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
-      },
-    ],
-  },
-]
+export const border = {
+  label: "Border",
+  settings: [
+    {
+      label: "Color",
+      key: "border-color",
+      control: Colorpicker,
+    },
+    {
+      label: "Radius",
+      key: "border-radius",
+      control: Select,
+      options: [
+        { label: "None", value: "0" },
+        { label: "X Small", value: "0.125rem" },
+        { label: "Small", value: "0.25rem" },
+        { label: "Medium", value: "0.5rem" },
+        { label: "Large", value: "1rem" },
+        { label: "X Large", value: "2rem" },
+        { label: "XX Large", value: "4rem" },
+        { label: "Round", value: "5678px" },
+      ],
+    },
+    {
+      label: "Width",
+      key: "border-width",
+      control: Select,
+      options: [
+        { label: "None", value: "0" },
+        { label: "X Small", value: "0.5px" },
+        { label: "Small", value: "1px" },
+        { label: "Medium", value: "2px" },
+        { label: "Large", value: "4px" },
+        { label: "X large", value: "8px" },
+      ],
+    },
+    {
+      label: "Shadow",
+      key: "box-shadow",
+      control: Select,
+      options: [
+        { label: "None", value: "none" },
+        { label: "X Small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
+        {
+          label: "Small",
+          value:
+            "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+        },
+        {
+          label: "Medium",
+          value:
+            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+        },
+        {
+          label: "Large",
+          value:
+            "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+        },
+        {
+          label: "X Large",
+          value:
+            "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+        },
+      ],
+    },
+  ],
+}
 
 export const transitions = [
   {
@@ -734,15 +645,4 @@ export const transitions = [
   },
 ]
 
-export const allStyles = {
-  layout,
-  margin,
-  padding,
-  size,
-  position,
-  typography,
-  background,
-  border,
-  effects,
-  transitions,
-}
+export const all = [margin]
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index d64a2e9aff..56a2f9ac3d 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -2,11 +2,6 @@
 # yarn lockfile v1
 
 
-"@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==
-
 "@azure/abort-controller@^1.0.0":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@azure/abort-controller/-/abort-controller-1.0.4.tgz#fd3c4d46c8ed67aace42498c8e2270960250eafd"
@@ -930,143 +925,6 @@
     "@babel/helper-validator-identifier" "^7.14.0"
     to-fast-properties "^2.0.0"
 
-"@budibase/auth@^0.9.53":
-  version "0.9.53"
-  resolved "https://registry.yarnpkg.com/@budibase/auth/-/auth-0.9.53.tgz#7b84aef4a7683c1da7d872c7e0f29d5897b2331c"
-  integrity sha512-0WO7LVrNfjkvIguVeHWnSeQOvY90EPyKLx9rXpS0etYD52WjdL8dwpydtTmh/pGHhoqiikuLTAgre2F6CZCOTg==
-  dependencies:
-    aws-sdk "^2.901.0"
-    bcryptjs "^2.4.3"
-    ioredis "^4.27.1"
-    jsonwebtoken "^8.5.1"
-    koa-passport "^4.1.4"
-    lodash "^4.17.21"
-    node-fetch "^2.6.1"
-    passport-google-auth "^1.0.2"
-    passport-google-oauth "^2.0.0"
-    passport-jwt "^4.0.0"
-    passport-local "^1.0.0"
-    sanitize-s3-objectkey "^0.0.1"
-    tar-fs "^2.1.1"
-    uuid "^8.3.2"
-    zlib "^1.0.5"
-
-"@budibase/bbui@^0.9.53":
-  version "0.9.53"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-0.9.53.tgz#b6841a31ff2c28feb929c57f7f10a1dae1b3aea3"
-  integrity sha512-jO11Ky1KhPGRv922jMRO49FeTY1TeF3u2JaBJYBkVY95il3uPOI20M1AdA6w2emppDlyP6FSEHk+prdra4Lndw==
-  dependencies:
-    "@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.10"
-    "@spectrum-css/link" "^3.1.1"
-    "@spectrum-css/menu" "^3.0.1"
-    "@spectrum-css/modal" "^3.0.1"
-    "@spectrum-css/pagination" "^3.0.3"
-    "@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/statuslight" "^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/tooltip" "^3.0.3"
-    "@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"
-
-"@budibase/client@^0.9.53":
-  version "0.9.53"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.9.53.tgz#9e430057bdfc2968862ca25eb37dad30c3d2c86c"
-  integrity sha512-KK7e5rnmE61ms3q8F3NShB/nE03DfdHHqdj15tO9dMe/lr6fypK6aKkt4hfMPyDPVjn53n1Bg9tuzLvvGJABIg==
-  dependencies:
-    "@budibase/bbui" "^0.9.53"
-    "@budibase/standard-components" "^0.9.53"
-    "@budibase/string-templates" "^0.9.53"
-    regexparam "^1.3.0"
-    shortid "^2.2.15"
-    svelte-spa-router "^3.0.5"
-
-"@budibase/handlebars-helpers@^0.11.4":
-  version "0.11.4"
-  resolved "https://registry.yarnpkg.com/@budibase/handlebars-helpers/-/handlebars-helpers-0.11.4.tgz#8acfa2ee84134f7be4b2906e710fce6d25c5d000"
-  integrity sha512-AJNJYlJnxZmn9QJ8tBl8nrm4YxbwHP4AR0pbiVGK+EoOylkNBlUnZ/QDL1VyqM5fTkAE/Z2IZVLKrrG3kxuWLA==
-  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/standard-components@^0.9.53":
-  version "0.9.53"
-  resolved "https://registry.yarnpkg.com/@budibase/standard-components/-/standard-components-0.9.53.tgz#5e8d84bf4c3b1ceadfc40b5b5b6c0513b6283fc5"
-  integrity sha512-8QJmjwF51vh+rCiLbk+JLqCNZZBq9M8/LuyQOGvjnhB8l6DNrfjnCypP/xYoBf0uUvlki8TeNuZKQmDpBBnR7A==
-  dependencies:
-    "@budibase/bbui" "^0.9.53"
-    "@spectrum-css/page" "^3.0.1"
-    "@spectrum-css/vars" "^3.0.1"
-    apexcharts "^3.22.1"
-    dayjs "^1.10.5"
-    svelte-apexcharts "^1.0.2"
-    svelte-flatpickr "^3.1.0"
-
-"@budibase/string-templates@^0.9.53":
-  version "0.9.53"
-  resolved "https://registry.yarnpkg.com/@budibase/string-templates/-/string-templates-0.9.53.tgz#9228965afcef4cc19f7d016b291d5f298bb3b725"
-  integrity sha512-TL3Zx6VN+YpbIT5vtuTXEv2SOAwmx+YN42pbWxH3ExHj54bvhmRxSS+xJySs75kWdvQU4OMnYywQcMeMsqkOqg==
-  dependencies:
-    "@budibase/handlebars-helpers" "^0.11.4"
-    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"
@@ -1730,205 +1588,6 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
   integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==
 
-"@spectrum-css/actionbutton@^1.0.1":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.3.tgz#8f7342a69b303c5acdcfa0a59f5e9267b9f3cb30"
-  integrity sha512-P9qoCPSiZ1SB6ZYqK5hub0vGty00YYqonQE0KTjtb1i+T1nYR/87vWqVPERx9j63uhgZncjwFYaThTvRqye7eQ==
-
-"@spectrum-css/actiongroup@^1.0.1":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-1.0.3.tgz#4713ce65e6f5c72c404a7b638fbc3b4fd7e3874f"
-  integrity sha512-NlB9Q4ZlWixXxymoPIYG6g2hkwAGKFodHWPFfxHD8ddkjXWRB9G2akUP7cfsJ4DcYn4VisUORCOYQwqDiSmboQ==
-
-"@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.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.3.tgz#2df1efaab6c7e0b3b06cb4b59e1eae59c7f1fc84"
-  integrity sha512-6CnLPqqtaU/PcSSIGeGRi0iFIIxIUByYLKFO6zn5NEUc12KQ28dJ4PLwB6WBa0L8vRoAGlnWWH2ZZweTijbXgg==
-
-"@spectrum-css/buttongroup@^3.0.2":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/buttongroup/-/buttongroup-3.0.3.tgz#719d868845ac9d2c4f939c1b9f6044507902d5aa"
-  integrity sha512-eXl8U4QWMWXqyTu654FdQdEGnmczgOYlpIFSHyCMVjhtPqZp2xwnLFiGh6LKw+bLio6eeOZ0L+vpk1GcoYqgkw==
-
-"@spectrum-css/checkbox@^3.0.2":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.3.tgz#8577067fc8b97e4609f92bd242364937a533a7bb"
-  integrity sha512-QVG9uMHq+lh70Dh6mDNnY+vEvNz2p7VC6xgLfDYfijp2qeiqYPq72fQK6p/SiyqPk96ZACzNRwgeROU6Xf6Wgg==
-
-"@spectrum-css/dialog@^3.0.1":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/dialog/-/dialog-3.0.3.tgz#7715a4ea435e753afb623d99ca5917ed1bcd6f34"
-  integrity sha512-AhmKgfRIVyTe3ABiJ8lLUQL34VB/H6fN16na2LlbDRJvyRMzkdN1Xf2i6U3f4OMd3qQ8Gm5xat4BvMxIQPBAUQ==
-
-"@spectrum-css/divider@^1.0.1":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/divider/-/divider-1.0.3.tgz#639e2ebaa0834efa40f42397668bbd5c153ea385"
-  integrity sha512-Zy4Rn40w8UtzMh3wx/U9+CepSCpm1aOCGftHgWDub0XZuVTzh0c1WwyzTuLCx2Hf21z5VRGNiDh8bGEEzSbtNA==
-  dependencies:
-    "@spectrum-css/vars" "^3.0.2"
-
-"@spectrum-css/dropzone@^3.0.2":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/dropzone/-/dropzone-3.0.3.tgz#aee71697a2c195947599d7541b858c3c198741dc"
-  integrity sha512-ujrswdtB6bHigklyHsm6zomFd6rUnKJ3xVVRjroVF4+ouK4DxK5tX0iVd0EW6AOfOjx4Cc28uyFot3fpxp+MQw==
-
-"@spectrum-css/fieldgroup@^3.0.2":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-3.0.3.tgz#85d85da048d08200f25ceab378026dd2b11e0bb2"
-  integrity sha512-wXUXTXN1CPnR7M4Ltd+3uh7BfcNGUV1+Xe0/h0tCpq/j+S2Sd4xo7/pUMdU19sIDrAAtpEFp1tt+nouHcU5HGQ==
-
-"@spectrum-css/fieldlabel@^3.0.1":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-3.0.3.tgz#f73c04d20734d4718ffb620dc46458904685b449"
-  integrity sha512-nEvIkEXCD5n4fW67Unq6Iu7VXoauEd/JGpfTY02VsC5p4FJLnwKfPDbJUuUsqClAxqw7nAsmXVKtn4zQFf5yPQ==
-
-"@spectrum-css/icon@^3.0.1":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.3.tgz#5c612822380927087aebd526855d82ed2c3e2cba"
-  integrity sha512-hyloKOejPCXhP3MBNsm3SjR9j8xT1R1S19p32KW/0Qhj+VMUtfyEPmevyFptpn7wcovQccdl/vZVIVDuML/imw==
-
-"@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==
-
-"@spectrum-css/inputgroup@^3.0.2":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.3.tgz#00c9a370ddc2c55cf0f37dd6069faa9501fd7eb5"
-  integrity sha512-FqRJTiLL7jiGfzDVXWUGVLqHryJjCcqQIrqAi+Tq0oenapzsBe2qc/zIrKgh2wtMI+NTIBLXTECvij3L1HlqAg==
-
-"@spectrum-css/label@^2.0.10":
-  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.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/link/-/link-3.1.3.tgz#b0e560a7e0acdb4a2b329b6669696aa3438f5993"
-  integrity sha512-8Pmy5d73MwKcATTPaj+fSrZYnIw7GmfX40AvpC1xx5LauOxsbUb4AVNp1kn2H8rrOBmxF7czyhoBBhEiv66QUg==
-
-"@spectrum-css/menu@^3.0.1":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.3.tgz#46a9b221bb5f470a2f8a934bdfd512d84d2fdc4d"
-  integrity sha512-qKA9J/MrikNKIpCEHsAazG2vY3im5tjGCmo6p9Pdnu8/aQMsiuZDHZayukeCttJUZkrb9guDVL9OIHlK5RZvcQ==
-
-"@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/page@^3.0.1":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/page/-/page-3.0.2.tgz#8f0c03d25f5565fb13115541a8fcaf0e1d3a8ee0"
-  integrity sha512-lCXWjonLwYBg8FHUEkiFX0Mmfk+9Uivgvxq0DTulPlWrJcULTwjaOiY28/YBz7Fy1wuv/0KORbkPRALpYldBZg==
-  dependencies:
-    "@spectrum-css/vars" "^3.0.2"
-
-"@spectrum-css/pagination@^3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/pagination/-/pagination-3.0.3.tgz#b204c3ada384c4af751a354bc428346d82eeea65"
-  integrity sha512-OJ/v9GeNXJOZ9Yr9LDBYPrR2NCiLOWP9wANT/a5sqFuugRnQbn/HYMnRp9TBxwpDY6ihaPo0T/wi7kLiAJFdDw==
-
-"@spectrum-css/picker@^1.0.1":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-1.0.3.tgz#21379bcf8ae94277deeb6ad65dcd9e2bbfacb487"
-  integrity sha512-oHLGxBx5BwVCSGo7/T1C9PTHX1+/5AmVjyLiTJ4UoIdSJmOERw9YcRZbcGZgBJNWbxcjr4TyGtwj1EcSjEy97w==
-
-"@spectrum-css/popover@^3.0.1":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.3.tgz#6fb69873474fb968afb738eacb9e121f93e83a09"
-  integrity sha512-KvmXv4TV19FBx39KfmgVlDYtvtBqv/8RRK7RRLDDHGViTxZtShjVsVpwIgfkfgn4iJztCnXpWzFqRXWUu2XCpQ==
-
-"@spectrum-css/progressbar@^1.0.2":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/progressbar/-/progressbar-1.0.3.tgz#f70bcc38a2a21cff2f422ec825724ebbb9455e67"
-  integrity sha512-vJHplefUuy8+NjCw1X7fLbqHVGNVBpvGFXNAeaIj4SFf4ygxiUq/5c9iRhhsCQixEsJlfD/b7BnGXU7BUDkr6Q==
-
-"@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.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/radio/-/radio-3.0.3.tgz#25c3bc5e9c30a8a8ae728717b7c7fb736cdae640"
-  integrity sha512-LaLGfz/eGNR2iyqouXYILIA+pKRqF769iPdwM0REm5RpWvMQDD7rPZ/kWlg18owjaFsyllEp25gEjmhRJIIVOw==
-
-"@spectrum-css/search@^3.0.2":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/search/-/search-3.0.3.tgz#3415dc106aca0d5dd996e87084a1b47c2b95a882"
-  integrity sha512-kdLpKTt0obljuhS1q1tukujRlvSs8sBwij76D4Qp8KpMzwePfZyvv1kYzuWPNZfTeISxWsmyZ6Wxd1uvzjn+UA==
-
-"@spectrum-css/sidenav@^3.0.2":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-3.0.3.tgz#132141fbd2500a927c312fa4e1d712c438b3d597"
-  integrity sha512-cQ+CgwjxGftrcc79i1XnGd66QTl7H7zopSU0UTV4Qq7hvqfrjjWxfZ6b+3tezrrhNlDope1ff9o8sm67PsPXtg==
-
-"@spectrum-css/statuslight@^3.0.2":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/statuslight/-/statuslight-3.0.2.tgz#dc54b6cd113413dcdb909c486b5d7bae60db65c5"
-  integrity sha512-xodB8g8vGJH20XmUj9ZsPlM1jHrGeRbvmVXkz0q7YvQrYAhim8pP3W+XKKZAletPFAuu8cmUOc6SWn6i4X4z6w==
-
-"@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.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.3.tgz#7f7f19905ef3275cbf907ce3a5818e63c30b2caf"
-  integrity sha512-nxwzVjLPsXoY/v4sdxOVYLcC+cEbGgJyLcLclT5LT9MGSbngFeUMJzzVR4EvehzuN4dH7hrATG7Mbuq29Mf0Hg==
-
-"@spectrum-css/tabs@^3.0.1":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-3.0.3.tgz#51dd6f168c897b0fdc3a7e9f901df7bd2288b4fc"
-  integrity sha512-iLP1I72bJWz9APdQB1jiw+pOv5a7N+hYOCJvRoc56Us/hJKVzowkyGRe3uH+8v36nCG9bHxiAQNLoU8eXisVrg==
-
-"@spectrum-css/tags@^3.0.2":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/tags/-/tags-3.0.3.tgz#fc76d2735cdc442de91b7eb3bee49a928c0767ac"
-  integrity sha512-SL8vPxVDfWcY5VdIuyl0TImEXcOU1I7yCyXkk7MudMwfnYs81FaIyY32hFV9OHj0Tz/36UzRzc7AVMSuRQ53pw==
-
-"@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.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.3.tgz#97c1527384707600832ecda35643ed304615250f"
-  integrity sha512-CjLeaMs+cjUXojCCRtbj0YkD2BoZW16kjj2o5omkEpUTjA34IJ8xJ1a+CCtDILWekhXvN0MBN4sbumcnwcnx8w==
-
-"@spectrum-css/tooltip@^3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/tooltip/-/tooltip-3.0.3.tgz#26b8ca3b3d30e29630244d85eb4fc11d0c841281"
-  integrity sha512-ztRF7WW1FzyNavXBRc+80z67UoOrY9wl3cMYsVD3MpDnyxdzP8cjza1pCcolKBaFqRTcQKkxKw3GWtGICRKR5A==
-
-"@spectrum-css/treeview@^3.0.2":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/treeview/-/treeview-3.0.3.tgz#aeda5175158b9f8d7529cb2b394428eb2a428046"
-  integrity sha512-D5gGzZC/KtRArdx86Mesc9+99W9nTbUOeyYGqoJoAfJSOttoT6Tk5CrDvlCmAqjKf5rajemAkGri1ChqvUIwkw==
-
-"@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==
-
 "@szmarczak/http-timer@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421"
@@ -2279,130 +1938,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@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
@@ -2415,62 +1950,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@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -2491,20 +1970,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.0, ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -2519,32 +1984,6 @@ 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-base@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/any-base/-/any-base-1.1.0.tgz#ae101a62bc08a597b4c9ab5b7089d456630549fe"
@@ -2571,18 +2010,6 @@ anymatch@^3.0.3, anymatch@~3.1.1:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-apexcharts@^3.19.2, apexcharts@^3.22.1:
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.27.1.tgz#b0e6dd3b3ace028f29b32fcd88e19a2420a18089"
-  integrity sha512-2pfw3pxeWhI0ap5lfxyfGNGoGScfEwfc8XnTpbnzgRdr1AOH5JJN9hh3MvfwrC9TQQfJYC2TZc8P/q9qXUj1bQ==
-  dependencies:
-    svg.draggable.js "^2.2.2"
-    svg.easing.js "^2.0.0"
-    svg.filter.js "^2.0.2"
-    svg.pathmorphing.js "^0.1.3"
-    svg.resize.js "^1.4.3"
-    svg.select.js "^3.0.1"
-
 arangojs@7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/arangojs/-/arangojs-7.2.0.tgz#e576926b4b3469c5a130cceba45fada8b5f015d1"
@@ -2601,7 +2028,7 @@ archive-type@^4.0.0:
   dependencies:
     file-type "^4.2.0"
 
-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==
@@ -2648,15 +2075,6 @@ array-flatten@1.1.1:
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
   integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
 
-array-sort@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/array-sort/-/array-sort-0.1.4.tgz#662855eaeb671b4188df4451b2f24a0753992b23"
-  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"
@@ -2709,13 +2127,6 @@ async@>=0.6.0:
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.0.tgz#b3a2685c5ebb641d3de02d161002c60fc9f85720"
   integrity sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==
 
-async@~2.1.4:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.1.5.tgz#e587c68580994ac67fc56ff86d3ac56bdbe810bc"
-  integrity sha1-5YfGhYCZSsZ/xW/4bTrFa9voELw=
-  dependencies:
-    lodash "^4.14.0"
-
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -2731,13 +2142,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.767.0:
   version "2.924.0"
   resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.924.0.tgz#daefcd11729638d9c9279633a0cc5ba1c98fee64"
@@ -2753,21 +2157,6 @@ aws-sdk@^2.767.0:
     uuid "3.3.2"
     xml2js "0.4.19"
 
-aws-sdk@^2.901.0:
-  version "2.931.0"
-  resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.931.0.tgz#7fdc886fa7697095203fe7de16bc948a8b1c8daa"
-  integrity sha512-Db97/aJq8zYl8mHzY6dNO6m9S89TqN4HEUUc2aCYQCTyMb/eNrjf+uZTnutnQbJkClqHzxFcWc3aqe5VlTac/A==
-  dependencies:
-    buffer "4.9.2"
-    events "1.1.1"
-    ieee754 "1.1.13"
-    jmespath "0.15.0"
-    querystring "0.2.0"
-    sax "1.2.1"
-    url "0.10.3"
-    uuid "3.3.2"
-    xml2js "0.4.19"
-
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -2935,11 +2324,6 @@ base64-js@^1.0.2, base64-js@^1.3.1:
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
-base64url@3.x.x:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/base64url/-/base64url-3.0.1.tgz#6399d572e2bc3f90a9a8b22d5dbb0a32d33f788d"
-  integrity sha512-ir1UPr3dkwexU7FdV8qBBbNDRUhMmIekYMFZfi+C/sLNnRESKPl23nB9b2pltqfOQNnGzsDdId90AEtG5tCx4A==
-
 base@^0.11.1:
   version "0.11.2"
   resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
@@ -2960,7 +2344,7 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
-bcryptjs@2.4.3, bcryptjs@^2.4.3:
+bcryptjs@2.4.3:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/bcryptjs/-/bcryptjs-2.4.3.tgz#9ab5627b93e60621ff7cdac5da9733027df1d0cb"
   integrity sha1-mrVie5PmBiH/fNrF2pczAn3x0Ms=
@@ -3005,15 +2389,6 @@ bl@^3.0.0:
   dependencies:
     readable-stream "^3.0.1"
 
-bl@^4.0.3:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
-  integrity sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==
-  dependencies:
-    buffer "^5.5.0"
-    inherits "^2.0.4"
-    readable-stream "^3.4.0"
-
 bluebird@^3.5.1:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
@@ -3356,11 +2731,6 @@ chokidar@^3.2.2:
   optionalDependencies:
     fsevents "~2.3.1"
 
-chownr@^1.1.1:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
-  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
-
 ci-info@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
@@ -3530,13 +2900,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"
@@ -3695,23 +3058,11 @@ date-utils@*:
   resolved "https://registry.yarnpkg.com/date-utils/-/date-utils-1.2.21.tgz#61fb16cdc1274b3c9acaaffe9fc69df8720a2b64"
   integrity sha1-YfsWzcEnSzyayq/+n8ad+HIKK2Q=
 
-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, dayjs@^1.10.5:
-  version "1.10.5"
-  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.5.tgz#5600df4548fc2453b3f163ebb2abbe965ccfb986"
-  integrity sha512-BUFis41ikLz+65iH6LHQCDm4YPMj5r1YFLdupPIyM4SGcXMmtiLQ7U37i+hGS8urIuqe7I/ou3IS1jVc4nbN4g==
-
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -3835,13 +3186,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"
-
 default-shell@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/default-shell/-/default-shell-1.0.1.tgz#752304bddc6174f49eb29cb988feea0b8813c8bc"
@@ -4072,7 +3416,7 @@ encoding-down@^6.3.0:
     level-codec "^9.0.0"
     level-errors "^2.0.0"
 
-end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
+end-of-stream@^1.0.0, 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==
@@ -4086,11 +3430,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, errno@~0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
@@ -4110,11 +3449,6 @@ error-inject@^1.0.0:
   resolved "https://registry.yarnpkg.com/error-inject/-/error-inject-1.0.0.tgz#e2b3d91b54aed672f309d950d154850fa11d4f37"
   integrity sha1-4rPZG1Su1nLzCdlQ0VSFD6EdTzc=
 
-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=
-
 es-abstract@^1.17.0-next.0, es-abstract@^1.18.0-next.2:
   version "1.18.3"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.3.tgz#25c4c3380a27aa203c44b2b685bba94da31b63e0"
@@ -4547,13 +3881,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"
@@ -4751,11 +4078,6 @@ flat-cache@^2.0.1:
     rimraf "2.6.3"
     write "1.0.3"
 
-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==
-
 flatstr@^1.0.12:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/flatstr/-/flatstr-1.0.12.tgz#c2ba6a08173edbb6c9640e3055b95e287ceb5931"
@@ -4778,18 +4100,11 @@ for-each@^0.3.3:
   dependencies:
     is-callable "^1.1.3"
 
-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"
@@ -4853,11 +4168,6 @@ fs-constants@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
   integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
 
-fs-exists-sync@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz#982d6893af918e72d08dec9e8673ff2b5a8d6add"
-  integrity sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=
-
 fs-extra@8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
@@ -4914,14 +4224,6 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.1:
     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"
@@ -5041,32 +4343,6 @@ globals@^12.1.0:
   dependencies:
     type-fest "^0.8.1"
 
-google-auth-library@~0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/google-auth-library/-/google-auth-library-0.10.0.tgz#6e15babee85fd1dd14d8d128a295b6838d52136e"
-  integrity sha1-bhW6vuhf0d0U2NEoopW2g41SE24=
-  dependencies:
-    gtoken "^1.2.1"
-    jws "^3.1.4"
-    lodash.noop "^3.0.1"
-    request "^2.74.0"
-
-google-p12-pem@^0.1.0:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/google-p12-pem/-/google-p12-pem-0.1.2.tgz#33c46ab021aa734fa0332b3960a9a3ffcb2f3177"
-  integrity sha1-M8RqsCGqc0+gMys5YKmj/8svMXc=
-  dependencies:
-    node-forge "^0.7.1"
-
-googleapis@^16.0.0:
-  version "16.1.0"
-  resolved "https://registry.yarnpkg.com/googleapis/-/googleapis-16.1.0.tgz#0f19f2d70572d918881a0f626e3b1a2fa8629576"
-  integrity sha1-Dxny1wVy2RiIGg9ibjsaL6hilXY=
-  dependencies:
-    async "~2.1.4"
-    google-auth-library "~0.10.0"
-    string-template "~1.0.0"
-
 got@^8.3.1:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/got/-/got-8.3.2.tgz#1d23f64390e97f776cac52e5b936e5f514d2e937"
@@ -5117,45 +4393,6 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
 
-gtoken@^1.2.1:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/gtoken/-/gtoken-1.2.3.tgz#5509571b8afd4322e124cf66cf68115284c476d8"
-  integrity sha512-wQAJflfoqSgMWrSBk9Fg86q+sd6s7y6uJhIvvIPz++RElGlMtEqsdAR2oWwZ/WTEtp7P9xFbJRrT976oRgzJ/w==
-  dependencies:
-    google-p12-pem "^0.1.0"
-    jws "^3.0.0"
-    mime "^1.4.1"
-    request "^2.72.0"
-
-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"
@@ -5244,39 +4481,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"
@@ -5299,14 +4503,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"
@@ -5473,11 +4669,6 @@ 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.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
@@ -5566,22 +4757,6 @@ ioredis@^4.27.0:
     redis-parser "^3.0.0"
     standard-as-callback "^2.1.0"
 
-ioredis@^4.27.1:
-  version "4.27.6"
-  resolved "https://registry.yarnpkg.com/ioredis/-/ioredis-4.27.6.tgz#a53d427d3fe75fbd10ed7ad150ce00559df8dcf8"
-  integrity sha512-6W3ZHMbpCa8ByMyC1LJGOi7P2WiOKP9B3resoZOVLDhi+6dDBOW+KNsRq3yI36Hmnb2sifCxHX+YSarTeXh48A==
-  dependencies:
-    cluster-key-slot "^1.1.0"
-    debug "^4.3.1"
-    denque "^1.1.0"
-    lodash.defaults "^4.2.0"
-    lodash.flatten "^4.4.0"
-    p-map "^2.1.0"
-    redis-commands "1.7.0"
-    redis-errors "^1.2.0"
-    redis-parser "^3.0.0"
-    standard-as-callback "^2.1.0"
-
 ipaddr.js@1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
@@ -5703,13 +4878,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"
@@ -5795,13 +4963,6 @@ is-number-object@^1.0.4:
   resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.5.tgz#6edfaeed7950cff19afedce9fbfca9ee6dd289eb"
   integrity sha512-RU0lI/n95pMoUKu9v1BZP5MBcZuNSVJkMkAG2dJqC4z2GlkGUNeH68SuHuBKBD/XFe+LHZ+f9BKkLET60Niedw==
 
-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"
@@ -5809,11 +4970,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"
@@ -5829,13 +4985,6 @@ is-object@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.2.tgz#a56552e1c665c9e950b4a025461da87e72f86fcf"
   integrity sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA==
 
-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"
@@ -5866,13 +5015,6 @@ is-retry-allowed@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz#d778488bd0a4666a3be8a1482b9f2baafedea8b4"
   integrity sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==
 
-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"
@@ -5946,11 +5088,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"
@@ -6605,22 +5742,6 @@ jsonschema@1.4.0:
   resolved "https://registry.yarnpkg.com/jsonschema/-/jsonschema-1.4.0.tgz#1afa34c4bc22190d8e42271ec17ac8b3404f87b2"
   integrity sha512-/YgW6pRMr6M7C+4o8kS+B/2myEpHCrxO4PEWnqJNBFMjn7EWXqlQ4tGwL6xTHeRplwuZmcAncdvfOad1nT2yMw==
 
-jsonwebtoken@^8.2.0, jsonwebtoken@^8.5.1:
-  version "8.5.1"
-  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz#00e71e0b8df54c2121a1f26137df2280673bcc0d"
-  integrity sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==
-  dependencies:
-    jws "^3.2.2"
-    lodash.includes "^4.3.0"
-    lodash.isboolean "^3.0.3"
-    lodash.isinteger "^4.0.4"
-    lodash.isnumber "^3.0.3"
-    lodash.isplainobject "^4.0.6"
-    lodash.isstring "^4.0.1"
-    lodash.once "^4.0.0"
-    ms "^2.1.1"
-    semver "^5.6.0"
-
 jsprim@^1.2.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
@@ -6660,7 +5781,7 @@ jwa@^1.4.1:
     ecdsa-sig-formatter "1.0.11"
     safe-buffer "^5.0.1"
 
-jws@3.x.x, jws@^3.0.0, jws@^3.1.4, jws@^3.2.2:
+jws@3.x.x:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/jws/-/jws-3.2.2.tgz#001099f3639468c9414000e99995fa52fb478304"
   integrity sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==
@@ -6687,7 +5808,7 @@ keyv@^3.0.0:
   dependencies:
     json-buffer "3.0.0"
 
-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=
@@ -6701,7 +5822,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==
@@ -6785,13 +5906,6 @@ koa-is-json@^1.0.0:
   resolved "https://registry.yarnpkg.com/koa-is-json/-/koa-is-json-1.0.0.tgz#273c07edcdcb8df6a2c1ab7d59ee76491451ec14"
   integrity sha1-JzwH7c3Ljfaiwat9We52SRRR7BQ=
 
-koa-passport@^4.1.4:
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/koa-passport/-/koa-passport-4.1.4.tgz#5f1665c1c2a37ace79af9f970b770885ca30ccfa"
-  integrity sha512-dJBCkl4X+zdYxbI2V2OtoGy0PUenpvp2ZLLWObc8UJhsId0iQpTFT8RVcuA0709AL2txGwRHnSPoT1bYNGa6Kg==
-  dependencies:
-    passport "^0.4.0"
-
 koa-pino-logger@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/koa-pino-logger/-/koa-pino-logger-3.0.0.tgz#27600b4f3639e8767dfc6b66493109c5457f53ba"
@@ -6873,13 +5987,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"
-
 lcid@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/lcid/-/lcid-2.0.0.tgz#6ef5d2df60e52f82eb228a4c373e8d1f397253cf"
@@ -7080,11 +6187,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.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -7100,41 +6202,11 @@ lodash.flatten@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"
   integrity sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=
 
-lodash.includes@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f"
-  integrity sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8=
-
-lodash.isboolean@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6"
-  integrity sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY=
-
 lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
   integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
 
-lodash.isinteger@^4.0.4:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz#619c0af3d03f8b04c31f5882840b77b11cd68343"
-  integrity sha1-YZwK89A/iwTDH1iChAt3sRzWg0M=
-
-lodash.isnumber@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz#3ce76810c5928d03352301ac287317f11c0b1ffc"
-  integrity sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w=
-
-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.keys@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-4.2.0.tgz#a08602ac12e4fb83f91fc1fb7a360a4d9ba35205"
@@ -7145,21 +6217,11 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-lodash.noop@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash.noop/-/lodash.noop-3.0.1.tgz#38188f4d650a3a474258439b96ec45b32617133c"
-  integrity sha1-OBiPTWUKOkdCWEObluxFsyYXEzw=
-
 lodash.omit@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
   integrity sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA=
 
-lodash.once@^4.0.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
-  integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
-
 lodash.pick@^4.0.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
@@ -7170,21 +6232,6 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-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.without@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.without/-/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac"
@@ -7195,40 +6242,11 @@ lodash.xor@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.xor/-/lodash.xor-4.5.0.tgz#4d48ed7e98095b0632582ba714d3ff8ae8fb1db6"
   integrity sha1-TUjtfpgJWwYyWCunFNP/iuj7HbY=
 
-lodash@4.17.21, lodash@^4.14.0, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3:
+lodash@4.17.21, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.3:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-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"
-
 loose-envify@^1.0.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -7459,11 +6477,6 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp-classic@^0.5.2:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
-  integrity sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==
-
 mkdirp@^0.5.0, mkdirp@^0.5.1:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
@@ -7478,7 +6491,7 @@ moment-timezone@^0.5.31:
   dependencies:
     moment ">= 2.9.0"
 
-"moment@>= 2.9.0", moment@^2.18.1:
+"moment@>= 2.9.0":
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
@@ -7572,11 +6585,6 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
   integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
 
-nanoid@^2.1.0:
-  version "2.1.11"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
-  integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
-
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -7624,11 +6632,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"
@@ -7649,11 +6652,6 @@ node-fetch@^2.6.1:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
 
-node-forge@^0.7.1:
-  version "0.7.6"
-  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.6.tgz#fdf3b418aee1f94f0ef642cd63486c77ca9724ac"
-  integrity sha512-sol30LUpz1jQFBjOKwbjxijiE3b6pjd74YwfD0fJOKPjF+fONKb2Yg8rYgS6+bK6VDl+/wfr4IYpC7jDzLUIfw==
-
 node-gyp-build@~4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.1.1.tgz#d7270b5d86717068d114cc57fff352f96d745feb"
@@ -7761,11 +6759,6 @@ oauth-sign@~0.9.0:
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
   integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
 
-oauth@0.9.x:
-  version "0.9.15"
-  resolved "https://registry.yarnpkg.com/oauth/-/oauth-0.9.15.tgz#bd1fefaf686c96b75475aed5196412ff60cfb9c1"
-  integrity sha1-vR/vr2hslrdUda7VGWQS/2DPucE=
-
 object-assign@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-2.1.1.tgz#43c36e5d569ff8e4816c4efa8be02d26967c18aa"
@@ -8065,84 +7058,6 @@ pascalcase@^0.1.1:
   resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
   integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
 
-passport-google-auth@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/passport-google-auth/-/passport-google-auth-1.0.2.tgz#8b300b5aa442ef433de1d832ed3112877d0b2938"
-  integrity sha1-izALWqRC70M94dgy7TESh30LKTg=
-  dependencies:
-    googleapis "^16.0.0"
-    passport-strategy "1.x"
-
-passport-google-oauth1@1.x.x:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/passport-google-oauth1/-/passport-google-oauth1-1.0.0.tgz#af74a803df51ec646f66a44d82282be6f108e0cc"
-  integrity sha1-r3SoA99R7GRvZqRNgigr5vEI4Mw=
-  dependencies:
-    passport-oauth1 "1.x.x"
-
-passport-google-oauth20@2.x.x:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/passport-google-oauth20/-/passport-google-oauth20-2.0.0.tgz#0d241b2d21ebd3dc7f2b60669ec4d587e3a674ef"
-  integrity sha512-KSk6IJ15RoxuGq7D1UKK/8qKhNfzbLeLrG3gkLZ7p4A6DBCcv7xpyQwuXtWdpyR0+E0mwkpjY1VfPOhxQrKzdQ==
-  dependencies:
-    passport-oauth2 "1.x.x"
-
-passport-google-oauth@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/passport-google-oauth/-/passport-google-oauth-2.0.0.tgz#f6eb4bc96dd6c16ec0ecfdf4e05ec48ca54d4dae"
-  integrity sha512-JKxZpBx6wBQXX1/a1s7VmdBgwOugohH+IxCy84aPTZNq/iIPX6u7Mqov1zY7MKRz3niFPol0KJz8zPLBoHKtYA==
-  dependencies:
-    passport-google-oauth1 "1.x.x"
-    passport-google-oauth20 "2.x.x"
-
-passport-jwt@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/passport-jwt/-/passport-jwt-4.0.0.tgz#7f0be7ba942e28b9f5d22c2ebbb8ce96ef7cf065"
-  integrity sha512-BwC0n2GP/1hMVjR4QpnvqA61TxenUMlmfNjYNgK0ZAs0HK4SOQkHcSv4L328blNTLtHq7DbmvyNJiH+bn6C5Mg==
-  dependencies:
-    jsonwebtoken "^8.2.0"
-    passport-strategy "^1.0.0"
-
-passport-local@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/passport-local/-/passport-local-1.0.0.tgz#1fe63268c92e75606626437e3b906662c15ba6ee"
-  integrity sha1-H+YyaMkudWBmJkN+O5BmYsFbpu4=
-  dependencies:
-    passport-strategy "1.x.x"
-
-passport-oauth1@1.x.x:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/passport-oauth1/-/passport-oauth1-1.1.0.tgz#a7de988a211f9cf4687377130ea74df32730c918"
-  integrity sha1-p96YiiEfnPRoc3cTDqdN8ycwyRg=
-  dependencies:
-    oauth "0.9.x"
-    passport-strategy "1.x.x"
-    utils-merge "1.x.x"
-
-passport-oauth2@1.x.x:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/passport-oauth2/-/passport-oauth2-1.5.0.tgz#64babbb54ac46a4dcab35e7f266ed5294e3c4108"
-  integrity sha512-kqBt6vR/5VlCK8iCx1/KpY42kQ+NEHZwsSyt4Y6STiNjU+wWICG1i8ucc1FapXDGO15C5O5VZz7+7vRzrDPXXQ==
-  dependencies:
-    base64url "3.x.x"
-    oauth "0.9.x"
-    passport-strategy "1.x.x"
-    uid2 "0.0.x"
-    utils-merge "1.x.x"
-
-passport-strategy@1.x, passport-strategy@1.x.x, passport-strategy@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/passport-strategy/-/passport-strategy-1.0.0.tgz#b5539aa8fc225a3d1ad179476ddf236b440f52e4"
-  integrity sha1-tVOaqPwiWj0a0XlHbd8ja0QPUuQ=
-
-passport@^0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/passport/-/passport-0.4.1.tgz#941446a21cb92fc688d97a0861c38ce9f738f270"
-  integrity sha512-IxXgZZs8d7uFSt3eqNjM9NQ3g3uQCW5avD8mRNoXV99Yig50vjuaez6dQK2qC0kVWPRTujxY0dWgGfT09adjYg==
-  dependencies:
-    passport-strategy "1.x.x"
-    pause "0.0.1"
-
 path-exists@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
@@ -8187,11 +7102,6 @@ path-type@^3.0.0:
   dependencies:
     pify "^3.0.0"
 
-pause@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/pause/-/pause-0.0.1.tgz#1d408b3fdb76923b9543d96fb4c9dfd535d9cb5d"
-  integrity sha1-HUCLP9t2kjuVQ9lvtMnf1TXZy10=
-
 pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
@@ -8859,7 +7769,7 @@ readable-stream@1.1.14, readable-stream@^1.0.27-1:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-"readable-stream@2 || 3", readable-stream@^3.0.0, readable-stream@^3.0.1, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0:
+"readable-stream@2 || 3", readable-stream@^3.0.0, readable-stream@^3.0.1, readable-stream@^3.4.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==
@@ -8993,16 +7903,6 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexparam@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-2.0.0.tgz#059476767d5f5f87f735fc7922d133fd1a118c8c"
-  integrity sha512-gJKwd2MVPWHAIFLsaYDZfyKzHNS4o7E/v8YmNf44vmeV2e4YfVoDToTOKTvE7ab68cRJ++kLuEXJBaEeJVt5ow==
-
-regexparam@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
-  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
-
 regexpp@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
@@ -9046,21 +7946,6 @@ regjsparser@^0.6.4:
   dependencies:
     jsesc "~0.5.0"
 
-relative@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/relative/-/relative-3.0.2.tgz#0dcd8ec54a5d35a3c15e104503d65375b5a5367f"
-  integrity sha1-Dc2OxUpdNaPBXhBFA9ZTdbWlNn8=
-  dependencies:
-    isobject "^2.0.0"
-
-remarkable@^1.6.2, remarkable@^1.7.1:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/remarkable/-/remarkable-1.7.4.tgz#19073cb960398c87a7d6546eaa5e50d2022fcd00"
-  integrity sha512-e6NKUXgX95whv7IgddywbeN/ItCkWbISmc2DiqHJb0wTrqZIexqdco5b8Z3XZoo/48IdNVKM9ZCvTPJ4F5uvhg==
-  dependencies:
-    argparse "^1.0.10"
-    autolinker "~0.28.0"
-
 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"
@@ -9092,7 +7977,7 @@ request-promise-native@^1.0.5:
     stealthy-require "^1.1.1"
     tough-cookie "^2.3.3"
 
-"request@>= 2.52.0", request@^2.72.0, request@^2.74.0, request@^2.87.0:
+"request@>= 2.52.0", request@^2.87.0:
   version "2.88.2"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
   integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
@@ -9277,11 +8162,6 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
-sanitize-s3-objectkey@^0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/sanitize-s3-objectkey/-/sanitize-s3-objectkey-0.0.1.tgz#efa9887cd45275b40234fb4bb12fc5754fe64e7e"
-  integrity sha512-ZTk7aqLxy4sD40GWcYWoLfbe05XLmkKvh6vGKe13ADlei24xlezcvjgKy1qRArlaIbIMYaqK7PCalvZtulZlaQ==
-
 saslprep@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/saslprep/-/saslprep-1.0.3.tgz#4c02f946b56cf54297e347ba1093e7acac4cf226"
@@ -9311,11 +8191,6 @@ seek-bzip@^1.0.5:
   dependencies:
     commander "^2.8.1"
 
-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"
@@ -9384,13 +8259,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.1"
-  resolved "https://registry.yarnpkg.com/set-getter/-/set-getter-0.1.1.tgz#a3110e1b461d31a9cfc8c5c9ee2e9737ad447102"
-  integrity sha512-9sVWOy+gthr+0G9DzqqLaYNA7+5OKkSmcqjL9cBpDEaZrr3ShQlyX2cZ/O/ozE41oxn/Tt0LGEM/w4Rub3A3gw==
-  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"
@@ -9449,13 +8317,6 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
-shortid@^2.2.15:
-  version "2.2.16"
-  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.16.tgz#b742b8f0cb96406fd391c76bfc18a67a57fe5608"
-  integrity sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==
-  dependencies:
-    nanoid "^2.1.0"
-
 side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
@@ -9743,11 +8604,6 @@ string-length@^2.0.0:
     astral-regex "^1.0.0"
     strip-ansi "^4.0.0"
 
-string-template@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/string-template/-/string-template-1.0.0.tgz#9e9f2233dc00f218718ec379a28a5673ecca8b96"
-  integrity sha1-np8iM9wA8hhxjsN5oopWc+zKi5Y=
-
 string-width@^3.0.0, string-width@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
@@ -9870,11 +8726,6 @@ strip-outer@^1.0.0:
   dependencies:
     escape-string-regexp "^1.0.2"
 
-striptags@^3.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/striptags/-/striptags-3.2.0.tgz#cc74a137db2de8b0b9a370006334161f7dd67052"
-  integrity sha512-g45ZOGzHDMe2bdYMdIvdAfCQkCTDMGBazSw1ypMowwGIee7ZQ5dU0rBJ8Jqgl+jAKIv4dbeE1jscZq9wid1Tkw==
-
 sublevel-pouchdb@7.2.2:
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/sublevel-pouchdb/-/sublevel-pouchdb-7.2.2.tgz#49e46cd37883bf7ff5006d7c5b9bcc7bcc1f422f"
@@ -9885,11 +8736,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@^3.8.3:
   version "3.8.3"
   resolved "https://registry.yarnpkg.com/superagent/-/superagent-3.8.3.tgz#460ea0dbdb7d5b11bc4f78deba565f86a178e128"
@@ -9942,92 +8788,11 @@ supports-color@^8.0.0:
   dependencies:
     has-flag "^4.0.0"
 
-svelte-apexcharts@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/svelte-apexcharts/-/svelte-apexcharts-1.0.2.tgz#4e000f8b8f7c901c05658c845457dfc8314d54c1"
-  integrity sha512-6qlx4rE+XsonZ0FZudfwqOQ34Pq+3wpxgAD75zgEmGoYhYBJcwmikTuTf3o8ZBsZue9U/pAwhNy3ed1Bkq1gmA==
-  dependencies:
-    apexcharts "^3.19.2"
-
-svelte-flatpickr@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/svelte-flatpickr/-/svelte-flatpickr-3.1.1.tgz#c79da72a4acab252ed39bac8168f30f79db3ff80"
-  integrity sha512-z/sV/AMTqyybeWPCjoWYUOyuMmu9qX2c2f2cRqYos9K9sM5L3CqagtvfVy7GZQrnEYe+K7l/gGDCAyxJNp2+gA==
-  dependencies:
-    flatpickr "^4.5.2"
-
-svelte-portal@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
-  integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
-
-svelte-spa-router@^3.0.5:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/svelte-spa-router/-/svelte-spa-router-3.2.0.tgz#fae3311d292451236cb57131262406cf312b15ee"
-  integrity sha512-igemo5Vs82TGBBw+DjWt6qKameXYzNs6aDXcTxou5XbEvOjiRcAM6MLkdVRCatn6u8r42dE99bt/br7T4qe/AQ==
-  dependencies:
-    regexparam "2.0.0"
-
 svelte@^3.38.2:
   version "3.38.2"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.38.2.tgz#55e5c681f793ae349b5cc2fe58e5782af4275ef5"
   integrity sha512-q5Dq0/QHh4BLJyEVWGe7Cej5NWs040LWjMbicBGZ+3qpFWJ1YObRmUDZKbbovddLC9WW7THTj3kYbTOFmU9fbg==
 
-svg.draggable.js@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz#c514a2f1405efb6f0263e7958f5b68fce50603ba"
-  integrity sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==
-  dependencies:
-    svg.js "^2.0.1"
-
-svg.easing.js@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/svg.easing.js/-/svg.easing.js-2.0.0.tgz#8aa9946b0a8e27857a5c40a10eba4091e5691f12"
-  integrity sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=
-  dependencies:
-    svg.js ">=2.3.x"
-
-svg.filter.js@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/svg.filter.js/-/svg.filter.js-2.0.2.tgz#91008e151389dd9230779fcbe6e2c9a362d1c203"
-  integrity sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=
-  dependencies:
-    svg.js "^2.2.5"
-
-svg.js@>=2.3.x, svg.js@^2.0.1, svg.js@^2.2.5, svg.js@^2.4.0, svg.js@^2.6.5:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/svg.js/-/svg.js-2.7.1.tgz#eb977ed4737001eab859949b4a398ee1bb79948d"
-  integrity sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==
-
-svg.pathmorphing.js@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz#c25718a1cc7c36e852ecabc380e758ac09bb2b65"
-  integrity sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==
-  dependencies:
-    svg.js "^2.4.0"
-
-svg.resize.js@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/svg.resize.js/-/svg.resize.js-1.4.3.tgz#885abd248e0cd205b36b973c4b578b9a36f23332"
-  integrity sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==
-  dependencies:
-    svg.js "^2.6.5"
-    svg.select.js "^2.1.2"
-
-svg.select.js@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-2.1.2.tgz#e41ce13b1acff43a7441f9f8be87a2319c87be73"
-  integrity sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==
-  dependencies:
-    svg.js "^2.2.5"
-
-svg.select.js@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-3.0.1.tgz#a4198e359f3825739226415f82176a90ea5cc917"
-  integrity sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==
-  dependencies:
-    svg.js "^2.6.5"
-
 symbol-tree@^3.2.2:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -10043,16 +8808,6 @@ table@^5.2.3:
     slice-ansi "^2.1.0"
     string-width "^3.0.0"
 
-tar-fs@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784"
-  integrity sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==
-  dependencies:
-    chownr "^1.1.1"
-    mkdirp-classic "^0.5.2"
-    pump "^3.0.0"
-    tar-stream "^2.1.4"
-
 tar-stream@^1.5.2:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.6.2.tgz#8ea55dab37972253d9a9af90fdcd559ae435c555"
@@ -10066,17 +8821,6 @@ tar-stream@^1.5.2:
     to-buffer "^1.1.1"
     xtend "^4.0.0"
 
-tar-stream@^2.1.4:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.2.0.tgz#acad84c284136b060dc3faa64474aa9aebd77287"
-  integrity sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==
-  dependencies:
-    bl "^4.0.3"
-    end-of-stream "^1.4.1"
-    fs-constants "^1.0.0"
-    inherits "^2.0.3"
-    readable-stream "^3.1.1"
-
 tarn@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/tarn/-/tarn-1.1.5.tgz#7be88622e951738b9fa3fb77477309242cdddc2d"
@@ -10193,11 +8937,6 @@ tildify@2.0.0:
   resolved "https://registry.yarnpkg.com/tildify/-/tildify-2.0.0.tgz#f205f3674d677ce698b7067a99e949ce03b4754a"
   integrity sha512-Cc+OraorugtXNfs50hU9KS369rFXCfgGLpfCfvlc+Ud5u6VWmUQsOAa9HbTvheQdYnrdJqqv1e5oIqXppMYnSw==
 
-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=
-
 timed-out@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
@@ -10240,11 +8979,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-json-schema@0.2.5:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/to-json-schema/-/to-json-schema-0.2.5.tgz#ef3c3f11ad64460dcfbdbafd0fd525d69d62a98f"
@@ -10396,23 +9130,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.9"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.13.9.tgz#4d8d21dcd497f29cfd8e9378b9df123ad025999b"
-  integrity sha512-wZbyTQ1w6Y7fHdt8sJnHfSIuWeDgk6B5rCb4E/AM6QNNPbOMIZph21PW5dRB3h7Df0GszN+t7RuUH6sWK5bF0g==
-
-uid2@0.0.x:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/uid2/-/uid2-0.0.3.tgz#483126e11774df2f71b8b639dcd799c376162b82"
-  integrity sha1-SDEm4Rd03y9xuLY53NeZw3YWK4I=
-
 unbox-primitive@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
@@ -10594,7 +9311,7 @@ util.promisify@^1.0.0, util.promisify@^1.0.1:
     has-symbols "^1.0.1"
     object.getownpropertydescriptors "^2.1.1"
 
-utils-merge@1.0.1, utils-merge@1.x.x:
+utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
@@ -10619,7 +9336,7 @@ uuid@^3.1.0, uuid@^3.2.1, uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-uuid@^8.3.0, uuid@^8.3.2:
+uuid@^8.3.0:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
@@ -10675,11 +9392,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@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
@@ -10750,11 +9462,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=
-
 worker-farm@1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"
@@ -10956,17 +9663,12 @@ yauzl@^2.4.2:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
-year@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/year/-/year-0.2.1.tgz#4083ae520a318b23ec86037f3000cb892bdf9bb0"
-  integrity sha1-QIOuUgoxiyPshgN/MADLiSvfm7A=
-
 ylru@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ylru/-/ylru-1.2.1.tgz#f576b63341547989c1de7ba288760923b27fe84f"
   integrity sha512-faQrqNMzcPCHGVC2aaOINk13K+aaBDUPjGWl0teOXywElLjyVAB6Oe2jj62jHYtwsU49jXhScYbvPENK+6zAvQ==
 
-zlib@1.0.5, zlib@^1.0.5:
+zlib@1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/zlib/-/zlib-1.0.5.tgz#6e7c972fc371c645a6afb03ab14769def114fcc0"
   integrity sha1-bnyXL8NxxkWmr7A6sUdp3vEU/MA=
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 450a0d823c..459617cf43 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -61,7 +61,6 @@
     "description": "This component contains things within itself",
     "icon": "Sandbox",
     "hasChildren": true,
-    "styleable": true,
     "showSettingsBar": true,
     "settings": [
       {
@@ -172,7 +171,8 @@
         ],
         "defaultValue": "shrink"
       }
-    ]
+    ],
+    "styles": ["padding", "size", "background", "border", "shadow"]
   },
   "section": {
     "name": "Section",

From 4b9a863c682b861f9087ebbd4b4fff3b01e3c320 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 23 Jun 2021 09:54:31 +0100
Subject: [PATCH 04/32] Add color picker component and tidy up style options

---
 .../bbui/src/ColorPicker/ColorPicker.svelte   | 218 ++++++++++++++++++
 packages/bbui/src/Form/Core/TextField.svelte  |   2 +
 packages/bbui/src/Form/Input.svelte           |   2 +
 packages/bbui/src/index.js                    |   1 +
 .../design/PropertiesPanel/componentStyles.js |  84 +------
 5 files changed, 230 insertions(+), 77 deletions(-)
 create mode 100644 packages/bbui/src/ColorPicker/ColorPicker.svelte

diff --git a/packages/bbui/src/ColorPicker/ColorPicker.svelte b/packages/bbui/src/ColorPicker/ColorPicker.svelte
new file mode 100644
index 0000000000..4ccd390619
--- /dev/null
+++ b/packages/bbui/src/ColorPicker/ColorPicker.svelte
@@ -0,0 +1,218 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import "@spectrum-css/popover/dist/index-vars.css"
+  import clickOutside from "../Actions/click_outside"
+  import { fly } from "svelte/transition"
+  import Icon from "../Icon/Icon.svelte"
+  import Input from "../Form/Input.svelte"
+  import { capitalise } from "helpers"
+
+  export let value
+
+  let open = false
+
+  $: color = value || "transparent"
+  $: customValue = getCustomValue(value)
+  $: checkColor = getCheckColor(value)
+
+  const dispatch = createEventDispatcher()
+  const categories = [
+    {
+      label: "Grays",
+      colors: [
+        "white",
+        "gray-50",
+        "gray-75",
+        "gray-100",
+        "gray-200",
+        "gray-300",
+        "gray-400",
+        "gray-500",
+        "gray-600",
+        "gray-700",
+        "gray-800",
+        "gray-900",
+        "black",
+      ],
+    },
+    {
+      label: "Colors",
+      colors: [
+        "red-400",
+        "orange-400",
+        "yellow-400",
+        "green-400",
+        "seafoam-400",
+        "blue-400",
+        "indigo-400",
+        "magenta-400",
+
+        "red-500",
+        "orange-500",
+        "yellow-500",
+        "green-500",
+        "seafoam-500",
+        "blue-500",
+        "indigo-500",
+        "magenta-500",
+
+        "red-600",
+        "orange-600",
+        "yellow-600",
+        "green-600",
+        "seafoam-600",
+        "blue-600",
+        "indigo-600",
+        "magenta-600",
+
+        "red-700",
+        "orange-700",
+        "yellow-700",
+        "green-700",
+        "seafoam-700",
+        "blue-700",
+        "indigo-700",
+        "magenta-700",
+      ],
+    },
+  ]
+
+  const onChange = value => {
+    dispatch("change", value)
+    open = false
+  }
+
+  const getCustomValue = value => {
+    if (!value) {
+      return value
+    }
+    let found = false
+    const comparisonValue = value.substring(35, value.length - 1)
+    for (let category of categories) {
+      found = category.colors.includes(comparisonValue)
+      if (found) {
+        break
+      }
+    }
+    return found ? null : value
+  }
+
+  const prettyPrint = color => {
+    return capitalise(color.split("-").join(" "))
+  }
+
+  const getCheckColor = value => {
+    return /^.*(white|(gray-(50|75|100|200|300|400|500)))\)$/.test(value)
+      ? "black"
+      : "white"
+  }
+</script>
+
+<div
+  class="preview"
+  style="background: {color};"
+  on:click={() => (open = true)}
+/>
+{#if open}
+  <div
+    use:clickOutside={() => (open = false)}
+    transition:fly={{ y: -20, duration: 200 }}
+    class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
+  >
+    {#each categories as category}
+      <div class="category">
+        <div class="heading">{category.label}</div>
+        <div class="colors">
+          {#each category.colors as color}
+            <div
+              on:click={() => {
+                onChange(`var(--spectrum-global-color-static-${color})`)
+              }}
+              class="color"
+              style="background: var(--spectrum-global-color-static-{color}); color: {checkColor};"
+              title={prettyPrint(color)}
+            >
+              {#if value === `var(--spectrum-global-color-static-${color})`}
+                <Icon name="Checkmark" size="S" />
+              {/if}
+            </div>
+          {/each}
+        </div>
+      </div>
+    {/each}
+    <div class="category category--custom">
+      <div class="heading">Custom</div>
+      <div class="custom">
+        <Input
+          updateOnChange={false}
+          quiet
+          placeholder="Hex, RGB, HSL..."
+          value={customValue}
+          on:change
+        />
+        <Icon size="S" name="Close" hoverable on:click={() => onChange(null)} />
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .preview {
+    width: 32px;
+    height: 32px;
+    border-radius: 100%;
+    transition: border-color 130ms ease-in-out;
+    box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300);
+  }
+  .preview:hover {
+    cursor: pointer;
+    box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300);
+  }
+  .spectrum-Popover {
+    width: 100%;
+    z-index: 999;
+    top: 100%;
+    padding: var(--spacing-l) var(--spacing-xl);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-xl);
+  }
+  .colors {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    gap: var(--spacing-xs);
+  }
+  .heading {
+    font-size: var(--font-size-s);
+    font-weight: 600;
+    letter-spacing: 0.14px;
+    flex: 1 1 auto;
+    text-transform: uppercase;
+    grid-column: 1 / 5;
+    margin-bottom: var(--spacing-s);
+  }
+  .color {
+    height: 16px;
+    width: 16px;
+    border-radius: 100%;
+    box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300);
+    display: grid;
+    place-items: center;
+  }
+  .color:hover {
+    cursor: pointer;
+    box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300);
+  }
+  .custom {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    gap: var(--spacing-m);
+    margin-right: var(--spacing-xs);
+  }
+  .category--custom .heading {
+    margin-bottom: var(--spacing-xs);
+  }
+</style>
diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte
index 650aee4f82..926c3eda11 100644
--- a/packages/bbui/src/Form/Core/TextField.svelte
+++ b/packages/bbui/src/Form/Core/TextField.svelte
@@ -10,6 +10,7 @@
   export let id = null
   export let readonly = false
   export let updateOnChange = true
+  export let quiet = false
 
   const dispatch = createEventDispatcher()
   let focus = false
@@ -59,6 +60,7 @@
 
 <div
   class="spectrum-Textfield"
+  class:spectrum-Textfield--quiet={quiet}
   class:is-invalid={!!error}
   class:is-disabled={disabled}
   class:is-focused={focus}
diff --git a/packages/bbui/src/Form/Input.svelte b/packages/bbui/src/Form/Input.svelte
index 1d98982b4f..d1dbaff50b 100644
--- a/packages/bbui/src/Form/Input.svelte
+++ b/packages/bbui/src/Form/Input.svelte
@@ -12,6 +12,7 @@
   export let readonly = false
   export let error = null
   export let updateOnChange = true
+  export let quiet = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -29,6 +30,7 @@
     {value}
     {placeholder}
     {type}
+    {quiet}
     on:change={onChange}
     on:click
     on:input
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index f6d2c4eb9c..4d045e504b 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -55,6 +55,7 @@ export { default as Search } from "./Form/Search.svelte"
 export { default as Pagination } from "./Pagination/Pagination.svelte"
 export { default as Badge } from "./Badge/Badge.svelte"
 export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
+export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
 
 // Typography
 export { default as Body } from "./Typography/Body.svelte"
diff --git a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
index 3a95bb2b9e..76c50302d5 100644
--- a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
+++ b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
@@ -1,6 +1,6 @@
-import { Input, Select } from "@budibase/bbui"
+import { Input, Select, ColorPicker } from "@budibase/bbui"
 import FlatButtonGroup from "./PropertyControls/FlatButtonGroup"
-import Colorpicker from "./PropertyControls/ColorPicker.svelte"
+// import Colorpicker from "./PropertyControls/ColorPicker.svelte"
 
 export const layout = [
   {
@@ -274,61 +274,6 @@ export const size = {
   ],
 }
 
-export const position = [
-  {
-    label: "Position",
-    key: "position",
-    control: Select,
-    options: [
-      { label: "Static", value: "static" },
-      { label: "Relative", value: "relative" },
-      { label: "Fixed", value: "fixed" },
-      { label: "Absolute", value: "absolute" },
-      { label: "Sticky", value: "sticky" },
-    ],
-  },
-  {
-    label: "Top",
-    key: "top",
-    control: Input,
-    placeholder: "px",
-  },
-  {
-    label: "Right",
-    key: "right",
-    control: Input,
-    placeholder: "px",
-  },
-  {
-    label: "Bottom",
-    key: "bottom",
-    control: Input,
-    placeholder: "px",
-  },
-  {
-    label: "Left",
-    key: "left",
-    control: Input,
-    placeholder: "px",
-  },
-  {
-    label: "Z-index",
-    key: "z-index",
-    control: Select,
-    options: [
-      { label: "-9999", value: "-9999" },
-      { label: "-3", value: "-3" },
-      { label: "-2", value: "-2" },
-      { label: "-1", value: "-1" },
-      { label: "0", value: "0" },
-      { label: "1", value: "1" },
-      { label: "2", value: "2" },
-      { label: "3", value: "3" },
-      { label: "9999", value: "9999" },
-    ],
-  },
-]
-
 export const typography = [
   {
     label: "Font",
@@ -401,7 +346,7 @@ export const typography = [
   {
     label: "Color",
     key: "color",
-    control: Colorpicker,
+    control: ColorPicker,
   },
   {
     label: "align",
@@ -445,14 +390,13 @@ export const background = {
     {
       label: "Color",
       key: "background",
-      control: Colorpicker,
+      control: ColorPicker,
     },
     {
       label: "Gradient",
       key: "background-image",
       control: Select,
       options: [
-        { label: "None", value: "none" },
         {
           label: "Warm Flame",
           value:
@@ -534,21 +478,17 @@ export const border = {
     {
       label: "Color",
       key: "border-color",
-      control: Colorpicker,
+      control: ColorPicker,
     },
     {
       label: "Radius",
       key: "border-radius",
       control: Select,
       options: [
-        { label: "None", value: "0" },
-        { label: "X Small", value: "0.125rem" },
         { label: "Small", value: "0.25rem" },
         { label: "Medium", value: "0.5rem" },
         { label: "Large", value: "1rem" },
-        { label: "X Large", value: "2rem" },
-        { label: "XX Large", value: "4rem" },
-        { label: "Round", value: "5678px" },
+        { label: "Round", value: "100%" },
       ],
     },
     {
@@ -556,12 +496,9 @@ export const border = {
       key: "border-width",
       control: Select,
       options: [
-        { label: "None", value: "0" },
-        { label: "X Small", value: "0.5px" },
         { label: "Small", value: "1px" },
         { label: "Medium", value: "2px" },
         { label: "Large", value: "4px" },
-        { label: "X large", value: "8px" },
       ],
     },
     {
@@ -569,8 +506,6 @@ export const border = {
       key: "box-shadow",
       control: Select,
       options: [
-        { label: "None", value: "none" },
-        { label: "X Small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
         {
           label: "Small",
           value:
@@ -584,12 +519,7 @@ export const border = {
         {
           label: "Large",
           value:
-            "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
-        },
-        {
-          label: "X Large",
-          value:
-            "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+            "0 8px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
         },
       ],
     },

From 997efa62b39759ce22711c47bc5bd6b08d7dcb40 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 23 Jun 2021 11:47:07 +0100
Subject: [PATCH 05/32] Add wrapper to color picker and fix helper import

---
 .../bbui/src/ColorPicker/ColorPicker.svelte   | 100 ++++++++++--------
 packages/bbui/src/utils/helpers.js            |   2 +
 2 files changed, 57 insertions(+), 45 deletions(-)

diff --git a/packages/bbui/src/ColorPicker/ColorPicker.svelte b/packages/bbui/src/ColorPicker/ColorPicker.svelte
index 4ccd390619..aeba2eae76 100644
--- a/packages/bbui/src/ColorPicker/ColorPicker.svelte
+++ b/packages/bbui/src/ColorPicker/ColorPicker.svelte
@@ -5,7 +5,7 @@
   import { fly } from "svelte/transition"
   import Icon from "../Icon/Icon.svelte"
   import Input from "../Form/Input.svelte"
-  import { capitalise } from "helpers"
+  import { capitalise } from "../utils/helpers"
 
   export let value
 
@@ -108,55 +108,65 @@
   }
 </script>
 
-<div
-  class="preview"
-  style="background: {color};"
-  on:click={() => (open = true)}
-/>
-{#if open}
+<div class="container">
   <div
-    use:clickOutside={() => (open = false)}
-    transition:fly={{ y: -20, duration: 200 }}
-    class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
-  >
-    {#each categories as category}
-      <div class="category">
-        <div class="heading">{category.label}</div>
-        <div class="colors">
-          {#each category.colors as color}
-            <div
-              on:click={() => {
-                onChange(`var(--spectrum-global-color-static-${color})`)
-              }}
-              class="color"
-              style="background: var(--spectrum-global-color-static-{color}); color: {checkColor};"
-              title={prettyPrint(color)}
-            >
-              {#if value === `var(--spectrum-global-color-static-${color})`}
-                <Icon name="Checkmark" size="S" />
-              {/if}
-            </div>
-          {/each}
+    class="preview"
+    style="background: {color};"
+    on:click={() => (open = true)}
+  />
+  {#if open}
+    <div
+      use:clickOutside={() => (open = false)}
+      transition:fly={{ y: -20, duration: 200 }}
+      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
+    >
+      {#each categories as category}
+        <div class="category">
+          <div class="heading">{category.label}</div>
+          <div class="colors">
+            {#each category.colors as color}
+              <div
+                on:click={() => {
+                  onChange(`var(--spectrum-global-color-static-${color})`)
+                }}
+                class="color"
+                style="background: var(--spectrum-global-color-static-{color}); color: {checkColor};"
+                title={prettyPrint(color)}
+              >
+                {#if value === `var(--spectrum-global-color-static-${color})`}
+                  <Icon name="Checkmark" size="S" />
+                {/if}
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/each}
+      <div class="category category--custom">
+        <div class="heading">Custom</div>
+        <div class="custom">
+          <Input
+            updateOnChange={false}
+            quiet
+            placeholder="Hex, RGB, HSL..."
+            value={customValue}
+            on:change
+          />
+          <Icon
+            size="S"
+            name="Close"
+            hoverable
+            on:click={() => onChange(null)}
+          />
         </div>
       </div>
-    {/each}
-    <div class="category category--custom">
-      <div class="heading">Custom</div>
-      <div class="custom">
-        <Input
-          updateOnChange={false}
-          quiet
-          placeholder="Hex, RGB, HSL..."
-          value={customValue}
-          on:change
-        />
-        <Icon size="S" name="Close" hoverable on:click={() => onChange(null)} />
-      </div>
     </div>
-  </div>
-{/if}
+  {/if}
+</div>
 
 <style>
+  .container {
+    position: relative;
+  }
   .preview {
     width: 32px;
     height: 32px;
@@ -169,7 +179,7 @@
     box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300);
   }
   .spectrum-Popover {
-    width: 100%;
+    width: 210px;
     z-index: 999;
     top: 100%;
     padding: var(--spacing-l) var(--spacing-xl);
diff --git a/packages/bbui/src/utils/helpers.js b/packages/bbui/src/utils/helpers.js
index 13531d7f09..83d305d573 100644
--- a/packages/bbui/src/utils/helpers.js
+++ b/packages/bbui/src/utils/helpers.js
@@ -4,3 +4,5 @@ export const generateID = () => {
   // Starts with a letter so that its a valid DOM ID
   return `A${rand}`
 }
+
+export const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)

From d7cc6836a91687cffd1b7302d13f4475739f644d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 23 Jun 2021 12:26:46 +0100
Subject: [PATCH 06/32] Fix instance name on layouts

---
 .../ComponentSettingsSection.svelte           | 20 +++++-----
 .../PropertiesPanel/DesignSection.svelte      |  6 +--
 ...opertyGroup.svelte => StyleSection.svelte} | 34 ++++++++---------
 .../design/PropertiesPanel/componentStyles.js | 37 +++++++++++--------
 packages/server/src/api/controllers/layout.js |  1 +
 packages/server/src/constants/layouts.js      |  2 +
 packages/standard-components/manifest.json    | 25 +++++--------
 7 files changed, 61 insertions(+), 64 deletions(-)
 rename packages/builder/src/components/design/PropertiesPanel/{PropertyControls/PropertyGroup.svelte => StyleSection.svelte} (61%)

diff --git a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
index 916120a0c6..7a5044cbe5 100644
--- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
@@ -87,14 +87,16 @@
 </script>
 
 <DetailSummary name="General" collapsible={false}>
-  <PropertyControl
-    bindable={false}
-    control={Input}
-    label="Name"
-    key="_instanceName"
-    value={componentInstance._instanceName}
-    onChange={val => updateProp("_instanceName", val)}
-  />
+  {#if !componentInstance._component.endsWith("/layout")}
+    <PropertyControl
+      bindable={false}
+      control={Input}
+      label="Name"
+      key="_instanceName"
+      value={componentInstance._instanceName}
+      onChange={val => updateProp("_instanceName", val)}
+    />
+  {/if}
   {#if settings && settings.length > 0}
     {#each settings as setting (`${componentInstance._id}-${setting.key}`)}
       {#if canRenderControl(setting)}
@@ -114,8 +116,6 @@
         />
       {/if}
     {/each}
-  {:else}
-    <div class="text">This component doesn't have any additional settings.</div>
   {/if}
   {#if componentDefinition?.info}
     <div class="text">
diff --git a/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte b/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte
index 74798d7012..639ac90586 100644
--- a/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte
@@ -1,5 +1,5 @@
 <script>
-  import PropertyGroup from "./PropertyControls/PropertyGroup.svelte"
+  import StyleSection from "./StyleSection.svelte"
   import * as ComponentStyles from "./componentStyles"
 
   export let componentDefinition
@@ -23,10 +23,10 @@
 
 {#if styles?.length > 0}
   {#each styles as style}
-    <PropertyGroup
+    <StyleSection
       {style}
       name={style.label}
-      inline={style.inline}
+      columns={style.columns}
       properties={style.settings}
       {componentInstance}
     />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte b/packages/builder/src/components/design/PropertiesPanel/StyleSection.svelte
similarity index 61%
rename from packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
rename to packages/builder/src/components/design/PropertiesPanel/StyleSection.svelte
index ead7ba5938..0341c68534 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/StyleSection.svelte
@@ -1,10 +1,10 @@
 <script>
-  import PropertyControl from "./PropertyControl.svelte"
+  import PropertyControl from "./PropertyControls/PropertyControl.svelte"
   import { DetailSummary } from "@budibase/bbui"
   import { store } from "builderStore"
 
   export let name
-  export let inline = false
+  export let columns
   export let properties
   export let componentInstance
 
@@ -25,31 +25,27 @@
 </script>
 
 <DetailSummary collapsible={false} name={`${name}${changed ? " *" : ""}`}>
-  <div class="group-content" class:inline>
+  <div class="group-content" style="grid-template-columns: {columns || '1fr'}">
     {#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)}
-      <PropertyControl
-        bindable={false}
-        label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
-        control={prop.control}
-        key={prop.key}
-        value={style[prop.key]}
-        onChange={val => store.actions.components.updateStyle(prop.key, val)}
-        props={getControlProps(prop)}
-      />
+      <div style="grid-column: {prop.column || 'auto'}">
+        <PropertyControl
+          bindable={false}
+          label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
+          control={prop.control}
+          key={prop.key}
+          value={style[prop.key]}
+          onChange={val => store.actions.components.updateStyle(prop.key, val)}
+          props={getControlProps(prop)}
+        />
+      </div>
     {/each}
   </div>
 </DetailSummary>
 
 <style>
   .group-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
+    display: grid;
     align-items: stretch;
     gap: var(--spacing-l);
   }
-  .inline {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
index 76c50302d5..450cd70de0 100644
--- a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
+++ b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
@@ -83,7 +83,7 @@ export const layout = [
 
 export const margin = {
   label: "Margin",
-  inline: true,
+  columns: "1fr 1fr",
   settings: [
     {
       label: "Top",
@@ -170,7 +170,7 @@ export const margin = {
 
 export const padding = {
   label: "Padding",
-  inline: true,
+  columns: "1fr 1fr",
   settings: [
     {
       label: "Top",
@@ -257,19 +257,19 @@ export const padding = {
 
 export const size = {
   label: "Size",
-  inline: true,
+  columns: "1fr 1fr",
   settings: [
     {
       label: "Width",
       key: "width",
       control: Input,
-      placeholder: "px",
+      placeholder: "Auto",
     },
     {
       label: "Height",
       key: "height",
       control: Input,
-      placeholder: "px",
+      placeholder: "Auto",
     },
   ],
 }
@@ -386,6 +386,8 @@ export const typography = [
 
 export const background = {
   label: "Background",
+  inline: true,
+  columns: "auto 1fr",
   settings: [
     {
       label: "Color",
@@ -474,23 +476,13 @@ export const background = {
 
 export const border = {
   label: "Border",
+  columns: "auto 1fr",
   settings: [
     {
       label: "Color",
       key: "border-color",
       control: ColorPicker,
     },
-    {
-      label: "Radius",
-      key: "border-radius",
-      control: Select,
-      options: [
-        { label: "Small", value: "0.25rem" },
-        { label: "Medium", value: "0.5rem" },
-        { label: "Large", value: "1rem" },
-        { label: "Round", value: "100%" },
-      ],
-    },
     {
       label: "Width",
       key: "border-width",
@@ -501,10 +493,23 @@ export const border = {
         { label: "Large", value: "4px" },
       ],
     },
+    {
+      label: "Radius",
+      key: "border-radius",
+      control: Select,
+      column: "1 / 3",
+      options: [
+        { label: "Small", value: "0.25rem" },
+        { label: "Medium", value: "0.5rem" },
+        { label: "Large", value: "1rem" },
+        { label: "Round", value: "100%" },
+      ],
+    },
     {
       label: "Shadow",
       key: "box-shadow",
       control: Select,
+      column: "1 / 3",
       options: [
         {
           label: "Small",
diff --git a/packages/server/src/api/controllers/layout.js b/packages/server/src/api/controllers/layout.js
index 2887c6984a..c3cae1b6a7 100644
--- a/packages/server/src/api/controllers/layout.js
+++ b/packages/server/src/api/controllers/layout.js
@@ -14,6 +14,7 @@ exports.save = async function (ctx) {
       ...EMPTY_LAYOUT,
       ...layout,
     }
+    layout.props._instanceName = layout.name
   }
 
   layout._id = layout._id || generateLayoutID()
diff --git a/packages/server/src/constants/layouts.js b/packages/server/src/constants/layouts.js
index ffd04a40d8..89bb3ad787 100644
--- a/packages/server/src/constants/layouts.js
+++ b/packages/server/src/constants/layouts.js
@@ -57,6 +57,7 @@ const BASE_LAYOUTS = [
     name: "Navigation Layout",
     props: {
       _id: "4f569166-a4f3-47ea-a09e-6d218c75586f",
+      _instanceName: "Navigation Layout",
       _component: "@budibase/standard-components/layout",
       _children: [
         {
@@ -102,6 +103,7 @@ const BASE_LAYOUTS = [
     name: "Empty Layout",
     props: {
       _id: "3723ffa1-f9e0-4c05-8013-98195c788ed6",
+      _instanceName: "Empty Layout",
       _component: "@budibase/standard-components/layout",
       _children: [
         {
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 459617cf43..6f4bca50f2 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -5,7 +5,7 @@
     "icon": "Sandbox",
     "hasChildren": true,
     "styleable": true,
-    "illegalChildren": [],
+    "styles": ["padding", "background"],
     "settings": [
       {
         "type": "text",
@@ -62,6 +62,7 @@
     "icon": "Sandbox",
     "hasChildren": true,
     "showSettingsBar": true,
+    "styles": ["padding", "size", "background", "border", "shadow"],
     "settings": [
       {
         "type": "select",
@@ -171,8 +172,7 @@
         ],
         "defaultValue": "shrink"
       }
-    ],
-    "styles": ["padding", "size", "background", "border", "shadow"]
+    ]
   },
   "section": {
     "name": "Section",
@@ -679,7 +679,6 @@
     "name": "Bar Chart",
     "description": "Bar chart",
     "icon": "GraphBarVertical",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -780,7 +779,6 @@
     "name": "Line Chart",
     "description": "Line chart",
     "icon": "GraphTrend",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -882,7 +880,6 @@
     "name": "Area Chart",
     "description": "Line chart",
     "icon": "GraphAreaStacked",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -996,7 +993,6 @@
     "name": "Pie Chart",
     "description": "Pie chart",
     "icon": "GraphPie",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1074,7 +1070,6 @@
     "name": "Donut Chart",
     "description": "Donut chart",
     "icon": "GraphDonut",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1152,7 +1147,6 @@
     "name": "Candlestick Chart",
     "description": "Candlestick chart",
     "icon": "GraphBarVerticalStacked",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1665,7 +1659,6 @@
   "table": {
     "name": "Table",
     "icon": "Table",
-    "styleable": true,
     "illegalChildren": ["section"],
     "hasChildren": true,
     "showEmptyState": false,
@@ -1721,11 +1714,6 @@
           }
         ]
       },
-      {
-        "type": "boolean",
-        "label": "Quiet",
-        "key": "quiet"
-      },
       {
         "type": "multifield",
         "label": "Columns",
@@ -1735,7 +1723,12 @@
       },
       {
         "type": "boolean",
-        "label": "Auto Cols.",
+        "label": "Quiet",
+        "key": "quiet"
+      },
+      {
+        "type": "boolean",
+        "label": "Auto Columns",
         "key": "showAutoColumns",
         "defaultValue": false
       }

From 098131099d6671b5ba709701648921be8f4f82d6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 23 Jun 2021 14:21:37 +0100
Subject: [PATCH 07/32] Add new typography settings, add new settings bar
 dropdowns, add settings bar to text components

---
 .../bbui/src/ColorPicker/ColorPicker.svelte   |  15 +-
 packages/bbui/src/Form/Core/Picker.svelte     |  25 +-
 packages/bbui/src/Form/Core/Select.svelte     |   2 +
 packages/bbui/src/Form/Select.svelte          |   2 +
 .../AppPreview/CurrentItemPreview.svelte      |  24 +-
 .../ComponentSettingsSection.svelte           |   9 +-
 .../design/PropertiesPanel/componentStyles.js | 239 ------------------
 .../src/components/preview/SettingsBar.svelte |  41 ++-
 .../components/preview/SettingsButton.svelte  |   3 +
 .../preview/SettingsColorPicker.svelte        |  26 ++
 .../components/preview/SettingsPicker.svelte  |  31 +++
 packages/client/src/store/builder.js          |   7 +-
 packages/standard-components/manifest.json    | 199 ++++++++++++---
 .../standard-components/src/Heading.svelte    |  84 ++++--
 packages/standard-components/src/Text.svelte  |  56 +++-
 15 files changed, 448 insertions(+), 315 deletions(-)
 create mode 100644 packages/client/src/components/preview/SettingsColorPicker.svelte
 create mode 100644 packages/client/src/components/preview/SettingsPicker.svelte

diff --git a/packages/bbui/src/ColorPicker/ColorPicker.svelte b/packages/bbui/src/ColorPicker/ColorPicker.svelte
index aeba2eae76..f11718badc 100644
--- a/packages/bbui/src/ColorPicker/ColorPicker.svelte
+++ b/packages/bbui/src/ColorPicker/ColorPicker.svelte
@@ -8,6 +8,7 @@
   import { capitalise } from "../utils/helpers"
 
   export let value
+  export let size = "M"
 
   let open = false
 
@@ -110,7 +111,7 @@
 
 <div class="container">
   <div
-    class="preview"
+    class="preview size--{size || 'M'}"
     style="background: {color};"
     on:click={() => (open = true)}
   />
@@ -178,6 +179,18 @@
     cursor: pointer;
     box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300);
   }
+  .size--S {
+    width: 20px;
+    height: 20px;
+  }
+  .size--M {
+    width: 32px;
+    height: 32px;
+  }
+  .size--L {
+    width: 48px;
+    height: 48px;
+  }
   .spectrum-Popover {
     width: 210px;
     z-index: 999;
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index fe49b19aa7..5ca413409c 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -20,6 +20,7 @@
   export let open = false
   export let readonly = false
   export let quiet = false
+  export let autoWidth = false
 
   const dispatch = createEventDispatcher()
   const onClick = () => {
@@ -41,7 +42,11 @@
   aria-haspopup="listbox"
   on:mousedown={onClick}
 >
-  <span class="spectrum-Picker-label" class:is-placeholder={isPlaceholder}>
+  <span
+    class="spectrum-Picker-label"
+    class:is-placeholder={isPlaceholder}
+    class:auto-width={autoWidth}
+  >
     {fieldText}
   </span>
   {#if error}
@@ -67,11 +72,12 @@
     use:clickOutside={() => (open = false)}
     transition:fly={{ y: -20, duration: 200 }}
     class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
+    class:auto-width={autoWidth}
   >
     <ul class="spectrum-Menu" role="listbox">
       {#if placeholderOption}
         <li
-          class="spectrum-Menu-item"
+          class="spectrum-Menu-item placeholder"
           class:is-selected={isPlaceholder}
           role="option"
           aria-selected="true"
@@ -118,17 +124,28 @@
 <style>
   .spectrum-Popover {
     max-height: 240px;
-    width: 100%;
     z-index: 999;
     top: 100%;
   }
+  .spectrum-Popover:not(.auto-width) {
+    width: 100%;
+  }
+  .spectrum-Popover.auto-width :global(.spectrum-Menu-itemLabel) {
+    white-space: nowrap;
+  }
   .spectrum-Picker {
     width: 100%;
   }
-  .spectrum-Picker-label {
+  .spectrum-Picker-label:not(.auto-width) {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 0;
   }
+  .placeholder {
+    font-style: italic;
+  }
+  .spectrum-Picker-label.auto-width.is-placeholder {
+    padding-right: 2px;
+  }
 </style>
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index f449b576e5..93e59e2420 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -12,6 +12,7 @@
   export let getOptionValue = option => option
   export let readonly = false
   export let quiet = false
+  export let autoWidth = false
 
   const dispatch = createEventDispatcher()
   let open = false
@@ -51,6 +52,7 @@
   {readonly}
   {fieldText}
   {options}
+  {autoWidth}
   {getOptionLabel}
   {getOptionValue}
   isPlaceholder={value == null || value === ""}
diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte
index 4a6955a97c..808c4c2789 100644
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@@ -14,6 +14,7 @@
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
   export let quiet = false
+  export let autoWidth = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -37,6 +38,7 @@
     {value}
     {options}
     {placeholder}
+    {autoWidth}
     {getOptionLabel}
     {getOptionValue}
     on:change={onChange}
diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index c624927007..5ae4ac0ddf 100644
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@@ -4,10 +4,13 @@
   import iframeTemplate from "./iframeTemplate"
   import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
   import { FrontendTypes } from "constants"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   let iframe
   let layout
   let screen
+  let confirmDeleteDialog
+  let idToDelete
 
   // Create screen slot placeholder for use when a page is selected rather
   // than a screen
@@ -73,15 +76,26 @@
     // Add listener for events sent by cliebt library in preview
     iframe.contentWindow.addEventListener("bb-event", event => {
       const { type, data } = event.detail
-      if (type === "select-component") {
+      if (type === "select-component" && data.id) {
         store.actions.components.select({ _id: data.id })
       } else if (type === "update-prop") {
         store.actions.components.updateProp(data.prop, data.value)
+      } else if (type === "delete-component" && data.id) {
+        idToDelete = data.id
+        confirmDeleteDialog.show()
       } else {
         console.log(data)
       }
     })
   })
+
+  const deleteComponent = () => {
+    store.actions.components.delete({ _id: idToDelete })
+    idToDelete = null
+  }
+  const cancelDeleteComponent = () => {
+    idToDelete = null
+  }
 </script>
 
 <div class="component-container">
@@ -92,6 +106,14 @@
     srcdoc={template}
   />
 </div>
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  title="Confirm Deletion"
+  body={`Are you sure you want to delete this component?`}
+  okText="Delete component"
+  onOk={deleteComponent}
+  onCancel={cancelDeleteComponent}
+/>
 
 <style>
   .component-container {
diff --git a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
index 7a5044cbe5..6977516baa 100644
--- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
@@ -1,6 +1,12 @@
 <script>
   import { isEmpty } from "lodash/fp"
-  import { Checkbox, Input, Select, DetailSummary } from "@budibase/bbui"
+  import {
+    Checkbox,
+    Input,
+    Select,
+    DetailSummary,
+    ColorPicker,
+  } from "@budibase/bbui"
   import { store } from "builderStore"
   import PropertyControl from "./PropertyControls/PropertyControl.svelte"
   import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
@@ -16,7 +22,6 @@
   import EventsEditor from "./PropertyControls/EventsEditor"
   import FilterEditor from "./PropertyControls/FilterEditor/FilterEditor.svelte"
   import { IconSelect } from "./PropertyControls/IconSelect"
-  import ColorPicker from "./PropertyControls/ColorPicker.svelte"
   import StringFieldSelect from "./PropertyControls/StringFieldSelect.svelte"
   import NumberFieldSelect from "./PropertyControls/NumberFieldSelect.svelte"
   import OptionsFieldSelect from "./PropertyControls/OptionsFieldSelect.svelte"
diff --git a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
index 450cd70de0..219ebed51f 100644
--- a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
+++ b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
@@ -1,85 +1,5 @@
 import { Input, Select, ColorPicker } from "@budibase/bbui"
 import FlatButtonGroup from "./PropertyControls/FlatButtonGroup"
-// import Colorpicker from "./PropertyControls/ColorPicker.svelte"
-
-export const layout = [
-  {
-    label: "Display",
-    key: "display",
-    control: Select,
-    options: [
-      { label: "Block", value: "block" },
-      { label: "Inline Block", value: "inline-block" },
-      { label: "Flex", value: "flex" },
-      { label: "Inline Flex", value: "inline-flex" },
-    ],
-  },
-  {
-    label: "Direction",
-    key: "flex-direction",
-    control: FlatButtonGroup,
-    buttonProps: [
-      { icon: "ri-arrow-right-line", padding: "0px 5px", value: "row" },
-      { icon: "ri-arrow-left-line", padding: "0px 5px", value: "rowReverse" },
-      { icon: "ri-arrow-down-line", padding: "0px 5px", value: "column" },
-      {
-        icon: "ri-arrow-up-line",
-        padding: "0px 5px",
-        value: "columnReverse",
-      },
-      { icon: "ri-close-line", value: "" },
-    ],
-  },
-  {
-    label: "Justify",
-    key: "justify-content",
-    control: Select,
-    options: [
-      { label: "Flex Start", value: "flex-start" },
-      { label: "Flex End", value: "flex-end" },
-      { label: "Center", value: "center" },
-      { label: "Space Between", value: "space-between" },
-      { label: "Space Around", value: "space-around" },
-      { label: "Space Evenly", value: "space-evenly" },
-    ],
-  },
-  {
-    label: "Align",
-    key: "align-items",
-    control: Select,
-    options: [
-      { label: "Flex Start", value: "flex-start" },
-      { label: "Flex End", value: "flex-end" },
-      { label: "Center", value: "center" },
-      { label: "Baseline", value: "baseline" },
-      { label: "Stretch", value: "stretch" },
-    ],
-  },
-  {
-    label: "Wrap",
-    key: "flex-wrap",
-    control: Select,
-    options: [
-      { label: "Wrap", value: "wrap" },
-      { label: "No wrap", value: "nowrap" },
-    ],
-  },
-  {
-    label: "Gap",
-    key: "gap",
-    control: Select,
-    options: [
-      { label: "None", value: "0px" },
-      { label: "4px", value: "4px" },
-      { label: "8px", value: "8px" },
-      { label: "16px", value: "16px" },
-      { label: "20px", value: "20px" },
-      { label: "32px", value: "32px" },
-      { label: "48px", value: "48px" },
-      { label: "64px", value: "64px" },
-    ],
-  },
-]
 
 export const margin = {
   label: "Margin",
@@ -274,116 +194,6 @@ export const size = {
   ],
 }
 
-export const typography = [
-  {
-    label: "Font",
-    key: "font-family",
-    control: Select,
-    options: [
-      { label: "Arial", value: "Arial" },
-      { label: "Arial Black", value: "Arial Black" },
-      { label: "Cursive", value: "Cursive" },
-      { label: "Courier", value: "Courier" },
-      { label: "Comic Sans MS", value: "Comic Sans MS" },
-      { label: "Helvetica", value: "Helvetica" },
-      { label: "Helvetica Neue", value: "Helvetica Neue" },
-      { label: "Impact", value: "Impact" },
-      { label: "Inter", value: "Inter" },
-      { label: "Lucida Sans Unicode", value: "Lucida Sans Unicode" },
-      { label: "Source Sans Pro", value: "Source Sans Pro" },
-      { label: "Times New Roman", value: "Times New Roman" },
-      { label: "Verdana", value: "Verdana" },
-    ],
-    styleBindingProperty: "font-family",
-  },
-  {
-    label: "Weight",
-    key: "font-weight",
-    control: Select,
-    options: [
-      { label: "200", value: "200" },
-      { label: "300", value: "300" },
-      { label: "400", value: "400" },
-      { label: "500", value: "500" },
-      { label: "600", value: "600" },
-      { label: "700", value: "700" },
-      { label: "800", value: "800" },
-      { label: "900", value: "900" },
-    ],
-  },
-  {
-    label: "size",
-    key: "font-size",
-    control: Select,
-    options: [
-      { label: "8px", value: "8px" },
-      { label: "10px", value: "10px" },
-      { label: "12px", value: "12px" },
-      { label: "14px", value: "14px" },
-      { label: "16px", value: "16px" },
-      { label: "18px", value: "18px" },
-      { label: "20px", value: "20px" },
-      { label: "24px", value: "24px" },
-      { label: "32px", value: "32px" },
-      { label: "48px", value: "48px" },
-      { label: "60px", value: "60px" },
-      { label: "72px", value: "72px" },
-    ],
-  },
-  {
-    label: "Line H",
-    key: "line-height",
-    control: Select,
-    options: [
-      { label: "1", value: "1" },
-      { label: "1.25", value: "1.25" },
-      { label: "1.5", value: "1.5" },
-      { label: "1.75", value: "1.75" },
-      { label: "2", value: "2" },
-      { label: "4", value: "4" },
-    ],
-  },
-  {
-    label: "Color",
-    key: "color",
-    control: ColorPicker,
-  },
-  {
-    label: "align",
-    key: "text-align",
-    control: FlatButtonGroup,
-    buttonProps: [
-      { icon: "ri-align-left", padding: "0px 5px", value: "left" },
-      { icon: "ri-align-center", padding: "0px 5px", value: "center" },
-      { icon: "ri-align-right", padding: "0px 5px", value: "right" },
-      { icon: "ri-align-justify", padding: "0px 5px", value: "justify" },
-      { icon: "ri-close-line", value: "" },
-    ],
-  },
-  {
-    label: "transform",
-    key: "text-transform",
-    control: FlatButtonGroup,
-    buttonProps: [
-      { text: "BB", value: "uppercase" },
-      { text: "Bb", value: "capitalize" },
-      { text: "bb", value: "lowercase" },
-      { icon: "ri-close-line", value: "" },
-    ],
-  },
-  {
-    label: "Decoration",
-    key: "text-decoration-line",
-    control: Select,
-    options: [
-      { label: "Underline", value: "underline" },
-      { label: "Overline", value: "overline" },
-      { label: "Line-through", value: "line-through" },
-      { label: "Under Over", value: "underline overline" },
-    ],
-  },
-]
-
 export const background = {
   label: "Background",
   inline: true,
@@ -531,53 +341,4 @@ export const border = {
   ],
 }
 
-export const transitions = [
-  {
-    label: "Property",
-    key: "transition-property",
-    control: Select,
-    options: [
-      { label: "None", value: "none" },
-      { label: "All", value: "all" },
-      { label: "Background Color", value: "background color" },
-      { label: "Color", value: "color" },
-      { label: "Font Size", value: "font size" },
-      { label: "Font Weight", value: "font weight" },
-      { label: "Height", value: "height" },
-      { label: "Margin", value: "margin" },
-      { label: "Opacity", value: "opacity" },
-      { label: "Padding", value: "padding" },
-      { label: "Rotate", value: "rotate" },
-      { label: "Shadow", value: "shadow" },
-      { label: "Width", value: "width" },
-    ],
-  },
-  {
-    label: "Duration",
-    key: "transition-duration",
-    control: Select,
-    placeholder: "sec",
-    options: [
-      { label: "0.4s", value: "0.4s" },
-      { label: "0.6s", value: "0.6s" },
-      { label: "0.8s", value: "0.8s" },
-      { label: "1s", value: "1s" },
-      { label: "2s", value: "2s" },
-      { label: "4s", value: "4s" },
-    ],
-  },
-  {
-    label: "Ease",
-    key: "transition-timing-function",
-    control: Select,
-    options: [
-      { label: "Linear", value: "linear" },
-      { label: "Ease", value: "ease" },
-      { label: "Ease in", value: "ease-in" },
-      { label: "Ease out", value: "ease-out" },
-      { label: "Ease in out", value: "ease-in-out" },
-    ],
-  },
-]
-
 export const all = [margin]
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 8d2b862422..5905535323 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -1,6 +1,8 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import SettingsButton from "./SettingsButton.svelte"
+  import SettingsColorPicker from "./SettingsColorPicker.svelte"
+  import SettingsPicker from "./SettingsPicker.svelte"
   import { builderStore } from "../../store"
   import { domDebounce } from "../../utils/domDebounce"
 
@@ -87,19 +89,44 @@
   >
     {#each settings as setting, idx}
       {#if setting.type === "select"}
-        {#each setting.options as option}
-          <SettingsButton
+        {#if setting.barStyle === "buttons"}
+          {#each setting.options as option}
+            <SettingsButton
+              prop={setting.key}
+              value={option.value}
+              icon={option.barIcon}
+              title={option.barTitle}
+            />
+          {/each}
+        {:else}
+          <SettingsPicker
             prop={setting.key}
-            value={option.value}
-            icon={option.barIcon}
-            title={option.barTitle}
+            options={setting.options}
+            label={setting.label}
           />
-        {/each}
+        {/if}
+      {:else if setting.type === "boolean"}
+        <SettingsButton
+          prop={setting.key}
+          icon={setting.barIcon}
+          title={setting.barTitle}
+          bool
+        />
+      {:else if setting.type === "color"}
+        <SettingsColorPicker prop={setting.key} />
       {/if}
-      {#if idx < settings.length - 1}
+      {#if setting.barSeparator !== false}
         <div class="divider" />
       {/if}
     {/each}
+    <SettingsButton
+      icon="Delete"
+      on:click={() => {
+        builderStore.actions.deleteComponent(
+          $builderStore.selectedComponent._id
+        )
+      }}
+    />
   </div>
 {/if}
 
diff --git a/packages/client/src/components/preview/SettingsButton.svelte b/packages/client/src/components/preview/SettingsButton.svelte
index 35cc8aa14c..c074d4e7f4 100644
--- a/packages/client/src/components/preview/SettingsButton.svelte
+++ b/packages/client/src/components/preview/SettingsButton.svelte
@@ -1,6 +1,7 @@
 <script>
   import { Icon } from "@budibase/bbui"
   import { builderStore } from "../../store"
+  import { createEventDispatcher } from "svelte"
 
   export let prop
   export let value
@@ -9,6 +10,7 @@
   export let rotate = false
   export let bool = false
 
+  const dispatch = createEventDispatcher()
   $: currentValue = $builderStore.selectedComponent?.[prop]
   $: active = prop && (bool ? !!currentValue : currentValue === value)
 </script>
@@ -22,6 +24,7 @@
       const newValue = bool ? !currentValue : value
       builderStore.actions.updateProp(prop, newValue)
     }
+    dispatch("click")
   }}
 >
   <Icon name={icon} size="S" />
diff --git a/packages/client/src/components/preview/SettingsColorPicker.svelte b/packages/client/src/components/preview/SettingsColorPicker.svelte
new file mode 100644
index 0000000000..c16a9972dd
--- /dev/null
+++ b/packages/client/src/components/preview/SettingsColorPicker.svelte
@@ -0,0 +1,26 @@
+<script>
+  import { ColorPicker } from "@budibase/bbui"
+  import { builderStore } from "../../store"
+
+  export let prop
+
+  $: currentValue = $builderStore.selectedComponent?.[prop]
+</script>
+
+<div>
+  <ColorPicker
+    size="S"
+    value={currentValue}
+    on:change={e => {
+      if (prop) {
+        builderStore.actions.updateProp(prop, e.detail)
+      }
+    }}
+  />
+</div>
+
+<style>
+  div {
+    padding: 0 4px;
+  }
+</style>
diff --git a/packages/client/src/components/preview/SettingsPicker.svelte b/packages/client/src/components/preview/SettingsPicker.svelte
new file mode 100644
index 0000000000..eb678eda26
--- /dev/null
+++ b/packages/client/src/components/preview/SettingsPicker.svelte
@@ -0,0 +1,31 @@
+<script>
+  import { Select } from "@budibase/bbui"
+  import { builderStore } from "../../store"
+
+  export let prop
+  export let options
+  export let label
+
+  $: currentValue = $builderStore.selectedComponent?.[prop]
+</script>
+
+<div>
+  <Select
+    quiet
+    autoWidth
+    placeholder={label}
+    {options}
+    value={currentValue}
+    on:change={e => {
+      if (prop) {
+        builderStore.actions.updateProp(prop, e.detail)
+      }
+    }}
+  />
+</div>
+
+<style>
+  div {
+    padding: 0 4px;
+  }
+</style>
diff --git a/packages/client/src/store/builder.js b/packages/client/src/store/builder.js
index 57b6b289f0..f229f66b83 100644
--- a/packages/client/src/store/builder.js
+++ b/packages/client/src/store/builder.js
@@ -56,13 +56,14 @@ const createBuilderStore = () => {
 
   const actions = {
     selectComponent: id => {
-      if (id) {
-        dispatchEvent("select-component", { id })
-      }
+      dispatchEvent("select-component", { id })
     },
     updateProp: (prop, value) => {
       dispatchEvent("update-prop", { prop, value })
     },
+    deleteComponent: id => {
+      dispatchEvent("delete-component", { id })
+    },
   }
   return {
     ...writableStore,
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 6f4bca50f2..f73ba00e8a 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -4,7 +4,6 @@
     "description": "This component is specific only to layouts",
     "icon": "Sandbox",
     "hasChildren": true,
-    "styleable": true,
     "styles": ["padding", "background"],
     "settings": [
       {
@@ -69,6 +68,7 @@
         "label": "Direction",
         "key": "direction",
         "showInBar": true,
+        "barStyle": "buttons",
         "options": [
           {
             "label": "Column",
@@ -90,6 +90,7 @@
         "label": "Horiz. Align",
         "key": "hAlign",
         "showInBar": true,
+        "barStyle": "buttons",
         "options": [
           {
             "label": "Left",
@@ -123,6 +124,7 @@
         "label": "Vert. Align",
         "key": "vAlign",
         "showInBar": "true",
+        "barStyle": "buttons",
         "options": [
           {
             "label": "Top",
@@ -156,6 +158,7 @@
         "label": "Size",
         "key": "size",
         "showInBar": true,
+        "barStyle": "buttons",
         "options": [
           {
             "label": "Shrink",
@@ -179,7 +182,6 @@
     "description": "Add a section to your application",
     "icon": "ColumnTwoB",
     "hasChildren": true,
-    "styleable": true,
     "illegalChildren": ["section"],
     "showEmptyState": false,
     "settings": [
@@ -194,15 +196,13 @@
   "screenslot": {
     "name": "Screenslot",
     "icon": "WebPage",
-    "description": "Contains your app screens",
-    "styleable": true
+    "description": "Contains your app screens"
   },
   "button": {
     "name": "Button",
     "description": "A basic html button that is ready for styling",
     "icon": "Button",
     "illegalChildren": ["section"],
-    "styleable": true,
     "settings": [
       {
         "type": "text",
@@ -239,7 +239,6 @@
     "name": "Repeater",
     "description": "A configurable data list that attaches to your backend tables.",
     "icon": "ViewList",
-    "styleable": true,
     "illegalChildren": ["section"],
     "hasChildren": true,
     "settings": [
@@ -268,7 +267,6 @@
     "name": "Stacked List",
     "icon": "TaskList",
     "description": "A basic card component that can contain content and actions.",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -298,7 +296,6 @@
     "name": "Vertical Card",
     "description": "A basic card component that can contain content and actions.",
     "icon": "ViewColumn",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -359,13 +356,93 @@
     "name": "Paragraph",
     "description": "A component for displaying paragraph text.",
     "icon": "TextParagraph",
-    "styleable": true,
     "illegalChildren": ["section"],
+    "showSettingsBar": true,
     "settings": [
       {
         "type": "text",
         "label": "Text",
         "key": "text"
+      },
+      {
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "defaultValue": "Medium",
+        "showInBar": true,
+        "barStyle": "picker",
+        "options": [{
+          "label": "Small",
+          "value": "S"
+        }, {
+          "label": "Medium",
+          "value": "M"
+        }, {
+          "label": "Large",
+          "value": "L"
+        }]
+      },
+      {
+        "type": "color",
+        "label": "Color",
+        "key": "color",
+        "showInBar": true,
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Bold",
+        "key": "bold",
+        "showInBar": true,
+        "barIcon": "TagBold",
+        "barTitle": "Bold text",
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Italic",
+        "key": "italic",
+        "showInBar": true,
+        "barIcon": "TagItalic",
+        "barTitle": "Italic text",
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Underline",
+        "key": "underline",
+        "showInBar": true,
+        "barIcon": "TagUnderline",
+        "barTitle": "Underline text"
+      },
+      {
+        "type": "select",
+        "label": "Alignment",
+        "key": "align",
+        "defaultValue": "left",
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [{
+          "label": "Left",
+          "value": "left",
+          "barIcon": "TextAlignLeft",
+          "barTitle": "Align left"
+        }, {
+          "label": "Center",
+          "value": "center",
+          "barIcon": "TextAlignCenter",
+          "barTitle": "Align center"
+        }, {
+          "label": "Right",
+          "value": "right",
+          "barIcon": "TextAlignRight",
+          "barTitle": "Align right"
+        }, {
+          "label": "Justify",
+          "value": "justify",
+          "barIcon": "TextAlignJustify",
+          "barTitle": "Justify text"
+        }]
       }
     ]
   },
@@ -373,8 +450,8 @@
     "name": "Headline",
     "icon": "TextBold",
     "description": "A component for displaying heading text",
-    "styleable": true,
     "illegalChildren": ["section"],
+    "showSettingsBar": true,
     "settings": [
       {
         "type": "text",
@@ -383,10 +460,83 @@
       },
       {
         "type": "select",
-        "key": "type",
-        "label": "Type",
-        "options": ["h1", "h2", "h3", "h4", "h5", "h6"],
-        "defaultValue": "h1"
+        "label": "Size",
+        "key": "size",
+        "defaultValue": "Medium",
+        "showInBar": true,
+        "barStyle": "picker",
+        "options": [{
+          "label": "Small",
+          "value": "S"
+        }, {
+          "label": "Medium",
+          "value": "M"
+        }, {
+          "label": "Large",
+          "value": "L"
+        }]
+      },
+      {
+        "type": "color",
+        "label": "Color",
+        "key": "color",
+        "showInBar": true,
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Bold",
+        "key": "bold",
+        "showInBar": true,
+        "barIcon": "TagBold",
+        "barTitle": "Bold text",
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Italic",
+        "key": "italic",
+        "showInBar": true,
+        "barIcon": "TagItalic",
+        "barTitle": "Italic text",
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Underline",
+        "key": "underline",
+        "showInBar": true,
+        "barIcon": "TagUnderline",
+        "barTitle": "Underline text"
+      },
+      {
+        "type": "select",
+        "label": "Alignment",
+        "key": "align",
+        "defaultValue": "left",
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [{
+          "label": "Left",
+          "value": "left",
+          "barIcon": "TextAlignLeft",
+          "barTitle": "Align left"
+        }, {
+          "label": "Center",
+          "value": "center",
+          "barIcon": "TextAlignCenter",
+          "barTitle": "Align center"
+        }, {
+          "label": "Right",
+          "value": "right",
+          "barIcon": "TextAlignRight",
+          "barTitle": "Align right"
+        }, {
+          "label": "Justify",
+          "value": "justify",
+          "barIcon": "TextAlignJustify",
+          "barTitle": "Justify text"
+        }]
       }
     ]
   },
@@ -394,7 +544,6 @@
     "name": "Image",
     "description": "A basic component for displaying images",
     "icon": "Image",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -408,7 +557,6 @@
     "name": "Background Image",
     "description": "A background image",
     "icon": "Images",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -466,7 +614,6 @@
     "name": "Icon",
     "description": "A basic component for displaying icons",
     "icon": "Bell",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -514,7 +661,6 @@
     "name": "Nav Bar",
     "description": "A component for handling the navigation within your app.",
     "icon": "BreadcrumbNavigation",
-    "styleable": true,
     "illegalChildren": ["section"],
     "hasChildren": true,
     "settings": [
@@ -535,7 +681,6 @@
     "name": "Link",
     "description": "A basic link component for internal and external links",
     "icon": "Link",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -565,7 +710,6 @@
     "name": "Horizontal Card",
     "description": "A basic card component that can contain content and actions.",
     "icon": "ViewRow",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -638,7 +782,6 @@
     "name": "Stat Card",
     "description": "A card component for displaying numbers.",
     "icon": "Card",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -665,7 +808,6 @@
     "name": "Embed",
     "icon": "Code",
     "description": "Embed content from 3rd party sources",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1228,7 +1370,6 @@
   "form": {
     "name": "Form",
     "icon": "Form",
-    "styleable": true,
     "hasChildren": true,
     "illegalChildren": ["section"],
     "actions": [
@@ -1301,7 +1442,6 @@
   "fieldgroup": {
     "name": "Field Group",
     "icon": "Group",
-    "styleable": true,
     "illegalChildren": ["section"],
     "hasChildren": true,
     "settings": [
@@ -1330,7 +1470,6 @@
   "stringfield": {
     "name": "Text Field",
     "icon": "Text",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1359,7 +1498,6 @@
   "numberfield": {
     "name": "Number Field",
     "icon": "123",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1388,7 +1526,6 @@
   "passwordfield": {
     "name": "Password Field",
     "icon": "LockClosed",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1417,7 +1554,6 @@
   "optionsfield": {
     "name": "Options Picker",
     "icon": "ViewList",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1447,7 +1583,6 @@
   "booleanfield": {
     "name": "Checkbox",
     "icon": "Checkmark",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1476,7 +1611,6 @@
   "longformfield": {
     "name": "Rich Text",
     "icon": "TextParagraph",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1506,7 +1640,6 @@
   "datetimefield": {
     "name": "Date Picker",
     "icon": "DateInput",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1541,7 +1674,6 @@
   "attachmentfield": {
     "name": "Attachment",
     "icon": "Attach",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1565,7 +1697,6 @@
   "relationshipfield": {
     "name": "Relationship Picker",
     "icon": "TaskList",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1595,7 +1726,6 @@
     "name": "Data Provider",
     "info": "Pagination is only available for data stored in internal tables.",
     "icon": "Data",
-    "styleable": false,
     "illegalChildren": ["section"],
     "hasChildren": true,
     "settings": [
@@ -1740,7 +1870,6 @@
   "daterangepicker": {
     "name": "Date Range",
     "icon": "Date",
-    "styleable": true,
     "hasChildren": false,
     "info": "Your data provider will be automatically filtered to the given date range.",
     "settings": [
diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte
index 93ceba90d6..e27d6e905d 100644
--- a/packages/standard-components/src/Heading.svelte
+++ b/packages/standard-components/src/Heading.svelte
@@ -4,41 +4,83 @@
   const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
-  export let type
   export let text
+  export let color
+  export let align
+  export let bold
+  export let italic
+  export let underline
+  export let size
 
   $: placeholder = $builderStore.inBuilder && !text
   $: componentText = $builderStore.inBuilder
     ? text || "Placeholder text"
     : text || ""
+
+  // Add color styles to main styles object, otherwise the styleable helper
+  // overrides the color when it's passed as inline style.
+  $: styles = {
+    ...$component.styles,
+    normal: {
+      ...$component.styles?.normal,
+      color,
+    },
+  }
 </script>
 
-{#if type === "h1"}
-  <h1 class:placeholder use:styleable={$component.styles}>{componentText}</h1>
-{:else if type === "h2"}
-  <h2 class:placeholder use:styleable={$component.styles}>{componentText}</h2>
-{:else if type === "h3"}
-  <h3 class:placeholder use:styleable={$component.styles}>{componentText}</h3>
-{:else if type === "h4"}
-  <h4 class:placeholder use:styleable={$component.styles}>{componentText}</h4>
-{:else if type === "h5"}
-  <h5 class:placeholder use:styleable={$component.styles}>{componentText}</h5>
-{:else if type === "h6"}
-  <h6 class:placeholder use:styleable={$component.styles}>{componentText}</h6>
-{/if}
+<h1
+  use:styleable={styles}
+  class:placeholder
+  class:bold
+  class:italic
+  class:underline
+  class="align--{align || 'left'} size--{size || 'M'}"
+>
+  {#if bold}
+    <strong>{componentText}</strong>
+  {:else}
+    {componentText}
+  {/if}
+</h1>
 
 <style>
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  h1 {
+    display: inline-block;
     white-space: pre-wrap;
+    font-weight: 600;
   }
-
   .placeholder {
     font-style: italic;
     color: var(--grey-6);
   }
+  .bold {
+    font-weight: 700;
+  }
+  .italic {
+    font-style: italic;
+  }
+  .underline {
+    text-decoration: underline;
+  }
+  .size--S {
+    font-size: 18px;
+  }
+  .size--M {
+    font-size: 22px;
+  }
+  .size--L {
+    font-size: 28px;
+  }
+  .align--left {
+    text-align: left;
+  }
+  .align--center {
+    text-align: center;
+  }
+  .align--right {
+    text-align: right;
+  }
+  .align-justify {
+    text-align: justify;
+  }
 </style>
diff --git a/packages/standard-components/src/Text.svelte b/packages/standard-components/src/Text.svelte
index 32d035b848..2396b7a961 100644
--- a/packages/standard-components/src/Text.svelte
+++ b/packages/standard-components/src/Text.svelte
@@ -5,14 +5,37 @@
   const component = getContext("component")
 
   export let text
+  export let color
+  export let align
+  export let bold
+  export let italic
+  export let underline
+  export let size
 
   $: placeholder = $builderStore.inBuilder && !text
   $: componentText = $builderStore.inBuilder
     ? text || "Placeholder text"
     : text || ""
+
+  // Add color styles to main styles object, otherwise the styleable helper
+  // overrides the color when it's passed as inline style.
+  $: styles = {
+    ...$component.styles,
+    normal: {
+      ...$component.styles?.normal,
+      color,
+    },
+  }
 </script>
 
-<p use:styleable={$component.styles} class:placeholder>
+<p
+  use:styleable={styles}
+  class:placeholder
+  class:bold
+  class:italic
+  class:underline
+  class="align--{align || 'left'} size--{size || 'M'}"
+>
   {componentText}
 </p>
 
@@ -21,9 +44,38 @@
     display: inline-block;
     white-space: pre-wrap;
   }
-
   .placeholder {
     font-style: italic;
     color: var(--grey-6);
   }
+  .bold {
+    font-weight: 600;
+  }
+  .italic {
+    font-style: italic;
+  }
+  .underline {
+    text-decoration: underline;
+  }
+  .size--S {
+    font-size: 14px;
+  }
+  .size--M {
+    font-size: 16px;
+  }
+  .size--L {
+    font-size: 18px;
+  }
+  .align--left {
+    text-align: left;
+  }
+  .align--center {
+    text-align: center;
+  }
+  .align--right {
+    text-align: right;
+  }
+  .align-justify {
+    text-align: justify;
+  }
 </style>

From f21afb165bc9889e8746119768f8433a61f9a0a1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 23 Jun 2021 14:22:59 +0100
Subject: [PATCH 08/32] Remove margin from heading and paragraph

---
 packages/standard-components/src/Heading.svelte | 1 +
 packages/standard-components/src/Text.svelte    | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte
index e27d6e905d..7cb7ed79d8 100644
--- a/packages/standard-components/src/Heading.svelte
+++ b/packages/standard-components/src/Heading.svelte
@@ -48,6 +48,7 @@
     display: inline-block;
     white-space: pre-wrap;
     font-weight: 600;
+    margin: 0;
   }
   .placeholder {
     font-style: italic;
diff --git a/packages/standard-components/src/Text.svelte b/packages/standard-components/src/Text.svelte
index 2396b7a961..2e3b2954fc 100644
--- a/packages/standard-components/src/Text.svelte
+++ b/packages/standard-components/src/Text.svelte
@@ -43,6 +43,7 @@
   p {
     display: inline-block;
     white-space: pre-wrap;
+    margin: 0;
   }
   .placeholder {
     font-style: italic;

From 4a23603c1aafc366d1a3c47fa5f11e105b15a4c7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 24 Jun 2021 11:29:20 +0100
Subject: [PATCH 09/32] Add gap to container settings and remove some colours
 from color picker

---
 .../bbui/src/ColorPicker/ColorPicker.svelte   |  2 --
 packages/standard-components/manifest.json    | 30 +++++++++++++++++--
 .../standard-components/src/Container.svelte  | 24 ++++++++++++---
 3 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/packages/bbui/src/ColorPicker/ColorPicker.svelte b/packages/bbui/src/ColorPicker/ColorPicker.svelte
index f11718badc..2f4b79b91a 100644
--- a/packages/bbui/src/ColorPicker/ColorPicker.svelte
+++ b/packages/bbui/src/ColorPicker/ColorPicker.svelte
@@ -22,8 +22,6 @@
       label: "Grays",
       colors: [
         "white",
-        "gray-50",
-        "gray-75",
         "gray-100",
         "gray-200",
         "gray-300",
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index f73ba00e8a..46359fde90 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -174,6 +174,32 @@
           }
         ],
         "defaultValue": "shrink"
+      },
+      {
+        "type": "select",
+        "label": "Gap",
+        "key": "gap",
+        "showInBar": true,
+        "barStyle": "picker",
+        "options": [
+          {
+            "label": "None",
+            "value": "N"
+          },
+          {
+            "label": "Small",
+            "value": "S"
+          },
+          {
+            "label": "Medium",
+            "value": "M"
+          },
+          {
+            "label": "Large",
+            "value": "L"
+          }
+        ],
+        "defaultValue": "M"
       }
     ]
   },
@@ -368,7 +394,7 @@
         "type": "select",
         "label": "Size",
         "key": "size",
-        "defaultValue": "Medium",
+        "defaultValue": "M",
         "showInBar": true,
         "barStyle": "picker",
         "options": [{
@@ -462,7 +488,7 @@
         "type": "select",
         "label": "Size",
         "key": "size",
-        "defaultValue": "Medium",
+        "defaultValue": "M",
         "showInBar": true,
         "barStyle": "picker",
         "options": [{
diff --git a/packages/standard-components/src/Container.svelte b/packages/standard-components/src/Container.svelte
index c71d3b928d..7e8ae43e2e 100644
--- a/packages/standard-components/src/Container.svelte
+++ b/packages/standard-components/src/Container.svelte
@@ -8,17 +8,23 @@
   export let hAlign
   export let vAlign
   export let size
+  export let gap
 
   $: directionClass = direction ? `valid-container direction-${direction}` : ""
   $: hAlignClass = hAlign ? `hAlign-${hAlign}` : ""
   $: vAlignClass = vAlign ? `vAlign-${vAlign}` : ""
   $: sizeClass = size ? `size-${size}` : ""
+  $: gapClass = gap ? `gap-${gap}` : ""
+  $: classNames = [
+    directionClass,
+    hAlignClass,
+    vAlignClass,
+    sizeClass,
+    gapClass,
+  ].join(" ")
 </script>
 
-<div
-  class={[directionClass, hAlignClass, vAlignClass, sizeClass].join(" ")}
-  use:styleable={$component.styles}
->
+<div class={classNames} use:styleable={$component.styles}>
   <slot />
 </div>
 
@@ -83,4 +89,14 @@
   .direction-column.hAlign-stretch {
     align-items: stretch;
   }
+
+  .gap-S {
+    gap: 8px;
+  }
+  .gap-M {
+    gap: 16px;
+  }
+  .gap-L {
+    gap: 32px;
+  }
 </style>

From 26136f5114bbb478562219f57b14955093f17200 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 24 Jun 2021 12:13:55 +0100
Subject: [PATCH 10/32] Hide overflow when showing empty component placeholders

---
 packages/client/src/utils/styleable.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 27589b2bba..3f02b36600 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -31,6 +31,7 @@ export const styleable = (node, styles = {}) => {
     if (newStyles.empty) {
       baseStyles.border = "2px dashed var(--grey-5)"
       baseStyles.padding = "var(--spacing-l)"
+      baseStyles.overflow = "hidden"
     }
 
     const componentId = newStyles.id

From 5fb09deb486d2c2d74837d83426d5378bbf663e4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 24 Jun 2021 12:14:19 +0100
Subject: [PATCH 11/32] Be more explicit about hiding overflow at the top
 levels of an app

---
 packages/client/src/components/ClientApp.svelte | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index c2bc0caaa3..8e4d8864ed 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -91,14 +91,15 @@
 {/if}
 
 <style>
-  #spectrum-root {
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-  }
+  #spectrum-root,
   #app-root {
     height: 100%;
     width: 100%;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+  }
+  #app-root {
     position: relative;
   }
 </style>

From 77cd7ea3382156ae3b67fabfafd1f63ccc69a2e3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 24 Jun 2021 12:15:04 +0100
Subject: [PATCH 12/32] Add wrap setting to containers and force repeaters to
 always wrap

---
 packages/standard-components/manifest.json    | 41 ++++++++++++++++++-
 .../standard-components/src/Container.svelte  |  7 +++-
 .../standard-components/src/Repeater.svelte   |  3 +-
 3 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 47744394ce..2e7e52fc32 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -123,7 +123,7 @@
         "type": "select",
         "label": "Vert. Align",
         "key": "vAlign",
-        "showInBar": "true",
+        "showInBar": true,
         "barStyle": "buttons",
         "options": [
           {
@@ -200,6 +200,14 @@
           }
         ],
         "defaultValue": "M"
+      },
+      {
+        "type": "boolean",
+        "label": "Wrap",
+        "key": "wrap",
+        "showInBar": true,
+        "barIcon": "ModernGridView",
+        "barTitle": "Wrap"
       }
     ]
   },
@@ -290,6 +298,7 @@
         "label": "Direction",
         "key": "direction",
         "showInBar": true,
+        "barStyle": "buttons",
         "options": [
           {
             "label": "Column",
@@ -311,6 +320,7 @@
         "label": "Horiz. Align",
         "key": "hAlign",
         "showInBar": true,
+        "barStyle": "buttons",
         "options": [
           {
             "label": "Left",
@@ -343,7 +353,8 @@
         "type": "select",
         "label": "Vert. Align",
         "key": "vAlign",
-        "showInBar": "true",
+        "showInBar": true,
+        "barStyle": "buttons",
         "options": [
           {
             "label": "Top",
@@ -371,6 +382,32 @@
           }
         ],
         "defaultValue": "top"
+      },
+      {
+        "type": "select",
+        "label": "Gap",
+        "key": "gap",
+        "showInBar": true,
+        "barStyle": "picker",
+        "options": [
+          {
+            "label": "None",
+            "value": "N"
+          },
+          {
+            "label": "Small",
+            "value": "S"
+          },
+          {
+            "label": "Medium",
+            "value": "M"
+          },
+          {
+            "label": "Large",
+            "value": "L"
+          }
+        ],
+        "defaultValue": "M"
       }
     ],
     "context": {
diff --git a/packages/standard-components/src/Container.svelte b/packages/standard-components/src/Container.svelte
index 7e8ae43e2e..5b2f951c8d 100644
--- a/packages/standard-components/src/Container.svelte
+++ b/packages/standard-components/src/Container.svelte
@@ -9,6 +9,7 @@
   export let vAlign
   export let size
   export let gap
+  export let wrap
 
   $: directionClass = direction ? `valid-container direction-${direction}` : ""
   $: hAlignClass = hAlign ? `hAlign-${hAlign}` : ""
@@ -24,7 +25,7 @@
   ].join(" ")
 </script>
 
-<div class={classNames} use:styleable={$component.styles}>
+<div class={classNames} use:styleable={$component.styles} class:wrap>
   <slot />
 </div>
 
@@ -99,4 +100,8 @@
   .gap-L {
     gap: 32px;
   }
+
+  .wrap {
+    flex-wrap: wrap;
+  }
 </style>
diff --git a/packages/standard-components/src/Repeater.svelte b/packages/standard-components/src/Repeater.svelte
index 97694303f5..b7db019c06 100644
--- a/packages/standard-components/src/Repeater.svelte
+++ b/packages/standard-components/src/Repeater.svelte
@@ -8,6 +8,7 @@
   export let direction
   export let hAlign
   export let vAlign
+  export let gap
 
   const { Provider } = getContext("sdk")
   const component = getContext("component")
@@ -16,7 +17,7 @@
   $: loaded = dataProvider?.loaded ?? true
 </script>
 
-<Container {direction} {hAlign} {vAlign}>
+<Container {direction} {hAlign} {vAlign} {gap} wrap>
   {#if $component.empty}
     <Placeholder />
   {:else if rows.length > 0}

From d4f344aa149b718108535b6bdcb037a89b9c7b42 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 24 Jun 2021 12:15:22 +0100
Subject: [PATCH 13/32] Hide horizontal overflow at layout level

---
 packages/standard-components/src/Layout.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/standard-components/src/Layout.svelte b/packages/standard-components/src/Layout.svelte
index 1e4c083f4c..4d91d850d9 100644
--- a/packages/standard-components/src/Layout.svelte
+++ b/packages/standard-components/src/Layout.svelte
@@ -123,6 +123,7 @@
     align-items: stretch;
     height: 100%;
     overflow: auto;
+    overflow-x: hidden;
   }
 
   .nav-wrapper {

From 83a337e20e3fb43075557491a00ad5cd068656b1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 25 Jun 2021 08:55:45 +0100
Subject: [PATCH 14/32] Add pretty labels to button props, ensure button width
 is always determined by content

---
 packages/standard-components/manifest.json    | 39 +++++++++++++++++--
 .../standard-components/src/Button.svelte     |  7 ++++
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 2e7e52fc32..ba858c44b4 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -245,16 +245,49 @@
       },
       {
         "type": "select",
-        "label": "Button Type",
+        "label": "Variant",
         "key": "type",
-        "options": ["primary", "secondary", "cta", "warning"],
+        "options": [
+          {
+            "label": "Primary",
+            "value": "primary"
+          }, {
+            "label": "Secondary",
+            "value": "secondary"
+          },
+          {
+            "label": "Action",
+            "value": "cta"
+          },
+          {
+            "label": "Warning",
+            "value": "warning"
+          }
+        ],
         "defaultValue": "primary"
       },
       {
         "type": "select",
         "label": "Size",
         "key": "size",
-        "options": ["S", "M", "L", "XL"],
+        "options": [
+          {
+            "label": "Small",
+            "value": "S"
+          },
+          {
+            "label": "Medium",
+            "value": "M"
+          },
+          {
+            "label": "Large",
+            "value": "L"
+          },
+          {
+            "label": "Extra large",
+            "value": "XL"
+          }
+        ],
         "defaultValue": "M"
       },
       {
diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte
index 3739f5e3af..3086fe95cd 100644
--- a/packages/standard-components/src/Button.svelte
+++ b/packages/standard-components/src/Button.svelte
@@ -19,3 +19,10 @@
 >
   {text || ""}
 </button>
+
+<style>
+  button {
+    width: fit-content;
+    width: -moz-fit-content;
+  }
+</style>

From be2ec9b427ff0a16e198d2eba2c86944f0002d6f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 25 Jun 2021 15:04:27 +0100
Subject: [PATCH 15/32] Aggressively optimise client library to prevent
 handlebars enrichment where possible

---
 .../client/src/components/Component.svelte    | 33 +++++++++++++++--
 .../client/src/components/Provider.svelte     | 36 ++++++++++++-------
 packages/client/src/store/context.js          | 16 ++++++++-
 packages/client/src/utils/componentProps.js   | 10 +-----
 4 files changed, 69 insertions(+), 26 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 0ee079a0bc..4440e83845 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -23,6 +23,11 @@
   // props with old ones, depending on how long enrichment takes.
   let latestUpdateTime
 
+  // Keep track of stringified representations of context and instance
+  // to avoid enriching bindings as much as possible
+  let lastContextKey
+  let lastInstanceKey
+
   // Get contexts
   const context = getContext("context")
   const insideScreenslot = !!getContext("screenslot")
@@ -42,7 +47,9 @@
     definition?.hasChildren &&
     definition?.showEmptyState !== false &&
     $builderStore.inBuilder
-  $: updateComponentProps(instance, $context)
+  $: rawProps = getRawProps(instance)
+  $: instanceKey = JSON.stringify(rawProps)
+  $: updateComponentProps(rawProps, instanceKey, $context)
   $: selected =
     $builderStore.inBuilder &&
     $builderStore.selectedComponentId === instance._id
@@ -59,6 +66,16 @@
     name,
   })
 
+  const getRawProps = instance => {
+    let validProps = {}
+    Object.entries(instance)
+      .filter(([name]) => !name.startsWith("_"))
+      .forEach(([key, value]) => {
+        validProps[key] = value
+      })
+    return validProps
+  }
+
   // Gets the component constructor for the specified component
   const getComponentConstructor = component => {
     const split = component?.split("/")
@@ -76,13 +93,23 @@
   }
 
   // Enriches any string component props using handlebars
-  const updateComponentProps = (instance, context) => {
+  const updateComponentProps = (rawProps, instanceKey, context) => {
+    const instanceSame = instanceKey === lastInstanceKey
+    const contextSame = context.key === lastContextKey
+
+    if (instanceSame && contextSame) {
+      return
+    } else {
+      lastInstanceKey = instanceKey
+      lastContextKey = context.key
+    }
+
     // Record the timestamp so we can reference it after enrichment
     latestUpdateTime = Date.now()
     const enrichmentTime = latestUpdateTime
 
     // Enrich props with context
-    const enrichedProps = enrichProps(instance, context)
+    const enrichedProps = enrichProps(rawProps, context)
 
     // Abandon this update if a newer update has started
     if (enrichmentTime !== latestUpdateTime) {
diff --git a/packages/client/src/components/Provider.svelte b/packages/client/src/components/Provider.svelte
index d2679957c0..1079779e9a 100644
--- a/packages/client/src/components/Provider.svelte
+++ b/packages/client/src/components/Provider.svelte
@@ -14,18 +14,32 @@
   const newContext = createContextStore(context)
   setContext("context", newContext)
 
-  $: providerKey = key || $component.id
+  const providerKey = key || $component.id
 
-  // Add data context
-  $: newContext.actions.provideData(providerKey, data)
+  // Generate a permanent unique ID for this component and use it to register
+  // any datasource actions
+  const instanceId = generate()
 
-  // Instance ID is unique to each instance of a provider
-  let instanceId
+  // Keep previous state around so we can avoid updating unless necessary
+  let lastDataKey
+  let lastActionsKey
 
-  // Add actions context
-  $: {
-    if (instanceId) {
-      actions?.forEach(({ type, callback, metadata }) => {
+  $: provideData(data)
+  $: provideActions(actions, instanceId)
+
+  const provideData = newData => {
+    const dataKey = JSON.stringify(newData)
+    if (dataKey !== lastDataKey) {
+      newContext.actions.provideData(providerKey, newData)
+      lastDataKey = dataKey
+    }
+  }
+
+  const provideActions = newActions => {
+    const actionsKey = JSON.stringify(newActions)
+    if (actionsKey !== lastActionsKey) {
+      lastActionsKey = actionsKey
+      newActions?.forEach(({ type, callback, metadata }) => {
         newContext.actions.provideAction(providerKey, type, callback)
 
         // Register any "refresh datasource" actions with a singleton store
@@ -43,10 +57,6 @@
   }
 
   onMount(() => {
-    // Generate a permanent unique ID for this component and use it to register
-    // any datasource actions
-    instanceId = generate()
-
     // Unregister all datasource instances when unmounting this provider
     return () => dataSourceStore.actions.unregisterInstance(instanceId)
   })
diff --git a/packages/client/src/store/context.js b/packages/client/src/store/context.js
index e9d307d4f3..e372b837bd 100644
--- a/packages/client/src/store/context.js
+++ b/packages/client/src/store/context.js
@@ -4,7 +4,21 @@ export const createContextStore = oldContext => {
   const newContext = writable({})
   const contexts = oldContext ? [oldContext, newContext] : [newContext]
   const totalContext = derived(contexts, $contexts => {
-    return $contexts.reduce((total, context) => ({ ...total, ...context }), {})
+    // The key is the serialized representation of context
+    let key = ""
+    for (let i = 0; i < $contexts.length - 1; i++) {
+      key += $contexts[i].key
+    }
+    key += JSON.stringify($contexts[$contexts.length - 1])
+
+    // Reduce global state
+    const reducer = (total, context) => ({ ...total, ...context })
+    const context = $contexts.reduce(reducer, {})
+
+    return {
+      ...context,
+      key,
+    }
   })
 
   // Adds a data context layer to the tree
diff --git a/packages/client/src/utils/componentProps.js b/packages/client/src/utils/componentProps.js
index 14516fdb4c..65e86c28d6 100644
--- a/packages/client/src/utils/componentProps.js
+++ b/packages/client/src/utils/componentProps.js
@@ -22,14 +22,6 @@ export const propsAreSame = (a, b) => {
  * Data bindings are enriched, and button actions are enriched.
  */
 export const enrichProps = (props, context) => {
-  // Exclude all private props that start with an underscore
-  let validProps = {}
-  Object.entries(props)
-    .filter(([name]) => !name.startsWith("_"))
-    .forEach(([key, value]) => {
-      validProps[key] = value
-    })
-
   // Create context of all bindings and data contexts
   // Duplicate the closest context as "data" which the builder requires
   const totalContext = {
@@ -41,7 +33,7 @@ export const enrichProps = (props, context) => {
   }
 
   // Enrich all data bindings in top level props
-  let enrichedProps = enrichDataBindings(validProps, totalContext)
+  let enrichedProps = enrichDataBindings(props, totalContext)
 
   // Enrich click actions if they exist
   if (enrichedProps.onClick) {

From 6d9a1b838228e8a131533d323280c38a15f81d0c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 25 Jun 2021 15:04:54 +0100
Subject: [PATCH 16/32] Remove lodash functions and recursive context mutation
 in string templates to increase performance

---
 packages/string-templates/src/index.cjs    |  7 +++--
 packages/string-templates/src/utilities.js | 32 ----------------------
 2 files changed, 4 insertions(+), 35 deletions(-)

diff --git a/packages/string-templates/src/index.cjs b/packages/string-templates/src/index.cjs
index 0b4515b815..7dbd788819 100644
--- a/packages/string-templates/src/index.cjs
+++ b/packages/string-templates/src/index.cjs
@@ -92,8 +92,6 @@ module.exports.processStringSync = (string, context) => {
   }
   // take a copy of input incase error
   const input = string
-  const clonedContext = removeNull(updateContext(cloneDeep(context)))
-  // remove any null/undefined properties
   if (typeof string !== "string") {
     throw "Cannot process non-string types."
   }
@@ -103,7 +101,10 @@ module.exports.processStringSync = (string, context) => {
     const template = hbsInstance.compile(string, {
       strict: false,
     })
-    return processors.postprocess(template(clonedContext))
+    return processors.postprocess(template({
+      now: new Date().toISOString(),
+      ...context,
+    }))
   } catch (err) {
     return removeHandlebarsStatements(input)
   }
diff --git a/packages/string-templates/src/utilities.js b/packages/string-templates/src/utilities.js
index e94b7f8ee7..d121511d89 100644
--- a/packages/string-templates/src/utilities.js
+++ b/packages/string-templates/src/utilities.js
@@ -11,38 +11,6 @@ module.exports.swapStrings = (string, start, length, swap) => {
   return string.slice(0, start) + swap + string.slice(start + length)
 }
 
-// removes null and undefined
-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)) {
-      obj[key] = module.exports.removeNull(value)
-    }
-  }
-  return obj
-}
-
-module.exports.updateContext = obj => {
-  if (obj.now == null) {
-    obj.now = new Date().toISOString()
-  }
-  function recurse(obj) {
-    for (let key of Object.keys(obj)) {
-      if (!obj[key]) {
-        continue
-      }
-      if (obj[key] instanceof Date) {
-        obj[key] = obj[key].toISOString()
-      } else if (typeof obj[key] === "object") {
-        obj[key] = recurse(obj[key])
-      }
-    }
-    return obj
-  }
-  return recurse(obj)
-}
-
 module.exports.removeHandlebarsStatements = string => {
   let regexp = new RegExp(exports.FIND_HBS_REGEX)
   let matches = string.match(regexp)

From 79b3732ef4322f28ad024ff03d0e112cdb51366e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 25 Jun 2021 15:09:13 +0100
Subject: [PATCH 17/32] Add relative z indices to layouts to allow absolutely
 positioned children in a layout without overlapping the nav

---
 packages/standard-components/src/Layout.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/standard-components/src/Layout.svelte b/packages/standard-components/src/Layout.svelte
index 4d91d850d9..19a8404699 100644
--- a/packages/standard-components/src/Layout.svelte
+++ b/packages/standard-components/src/Layout.svelte
@@ -124,6 +124,7 @@
     height: 100%;
     overflow: auto;
     overflow-x: hidden;
+    position: relative;
   }
 
   .nav-wrapper {
@@ -132,7 +133,7 @@
     justify-content: center;
     align-items: stretch;
     background: white;
-    z-index: 1;
+    z-index: 2;
     box-shadow: 0 0 8px -1px rgba(0, 0, 0, 0.075);
   }
   .layout--top .nav-wrapper.sticky {
@@ -164,6 +165,7 @@
     justify-content: center;
     align-items: stretch;
     flex: 1 1 auto;
+    z-index: 1;
   }
   .main {
     display: flex;

From 1599c8433d0e5b87809dc75b9bfccf1cd5ecb1da Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 25 Jun 2021 15:29:24 +0100
Subject: [PATCH 18/32] Add size styles and placeholder to image component

---
 packages/standard-components/manifest.json    |  1 +
 packages/standard-components/src/Image.svelte | 34 ++++++++++++-------
 .../src/Placeholder.svelte                    |  4 +--
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index ba858c44b4..6b5f8d99b4 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -729,6 +729,7 @@
     "description": "A basic component for displaying images",
     "icon": "Image",
     "illegalChildren": ["section"],
+    "styles": ["size"],
     "settings": [
       {
         "type": "text",
diff --git a/packages/standard-components/src/Image.svelte b/packages/standard-components/src/Image.svelte
index d5cafca4d5..fb04f866c6 100644
--- a/packages/standard-components/src/Image.svelte
+++ b/packages/standard-components/src/Image.svelte
@@ -1,21 +1,29 @@
 <script>
   import { getContext } from "svelte"
+  import Placeholder from "./Placeholder.svelte"
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
 
-  export let className = ""
-  export let url = ""
-  export let description = ""
-  export let height
-  export let width
+  export let url
 </script>
 
-<img
-  {height}
-  {width}
-  class={className}
-  src={url}
-  alt={description}
-  use:styleable={$component.styles}
-/>
+{#if url}
+  <img src={url} alt={$component.name} use:styleable={$component.styles} />
+{:else}
+  <div
+    class="placeholder"
+    use:styleable={{ ...$component.styles, empty: true }}
+  >
+    <Placeholder />
+  </div>
+{/if}
+
+<style>
+  .placeholder {
+    display: grid;
+    place-items: center;
+    height: 75px;
+    width: 150px;
+  }
+</style>
diff --git a/packages/standard-components/src/Placeholder.svelte b/packages/standard-components/src/Placeholder.svelte
index 421ecf17e4..455b6fe747 100644
--- a/packages/standard-components/src/Placeholder.svelte
+++ b/packages/standard-components/src/Placeholder.svelte
@@ -4,12 +4,12 @@
   const { builderStore } = getContext("sdk")
   const component = getContext("component")
 
-  export let text = $component.name || "Placeholder"
+  export let text
 </script>
 
 {#if $builderStore.inBuilder}
   <div>
-    {text}
+    {text || $component.name || "Placeholder"}
   </div>
 {/if}
 

From 86da3b7f289cceab3fd0fd58d998d5cdadddc37e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 25 Jun 2021 15:31:35 +0100
Subject: [PATCH 19/32] Add gap prop by default to screens

---
 .../src/builderStore/store/screenTemplates/utils/Screen.js       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js b/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js
index 239a4dfb50..04ff1f4ba2 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js
@@ -21,6 +21,7 @@ export class Screen extends BaseStructure {
         hAlign: "stretch",
         vAlign: "top",
         size: "grow",
+        gap: "M",
       },
       routing: {
         route: "",

From 748938b1f0450dbde906b780fa21a12fd34bd6b4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 25 Jun 2021 15:36:51 +0100
Subject: [PATCH 20/32] Add placeholder to background image, fix default styles
 and add size styles

---
 packages/standard-components/manifest.json    |  1 +
 .../src/BackgroundImage.svelte                | 25 ++++++++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 6b5f8d99b4..5cca0d7e3d 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -742,6 +742,7 @@
     "name": "Background Image",
     "description": "A background image",
     "icon": "Images",
+    "styles": ["size"],
     "illegalChildren": ["section"],
     "settings": [
       {
diff --git a/packages/standard-components/src/BackgroundImage.svelte b/packages/standard-components/src/BackgroundImage.svelte
index c78cdc87b6..d81e6c800b 100644
--- a/packages/standard-components/src/BackgroundImage.svelte
+++ b/packages/standard-components/src/BackgroundImage.svelte
@@ -1,5 +1,6 @@
 <script>
   import { getContext } from "svelte"
+  import Placeholder from "./Placeholder.svelte"
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
@@ -18,13 +19,24 @@
   }
 </script>
 
-<div class="outer" use:styleable={$component.styles}>
-  <div class="inner" {style} />
-</div>
+{#if url}
+  <div class="outer" use:styleable={$component.styles}>
+    <div class="inner" {style} />
+  </div>
+{:else}
+  <div
+    class="placeholder"
+    use:styleable={{ ...$component.styles, empty: true }}
+  >
+    <Placeholder />
+  </div>
+{/if}
 
 <style>
   .outer {
     position: relative;
+    width: 100%;
+    height: 400px;
   }
 
   .inner {
@@ -35,4 +47,11 @@
     background-size: cover;
     background-position: center center;
   }
+
+  .placeholder {
+    display: grid;
+    place-items: center;
+    height: 75px;
+    width: 150px;
+  }
 </style>

From f3024c56443df0dc407b3edf7352bab5d57ae9c9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 25 Jun 2021 15:39:41 +0100
Subject: [PATCH 21/32] Increase background image placeholder style

---
 packages/standard-components/src/BackgroundImage.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/standard-components/src/BackgroundImage.svelte b/packages/standard-components/src/BackgroundImage.svelte
index d81e6c800b..14025323f3 100644
--- a/packages/standard-components/src/BackgroundImage.svelte
+++ b/packages/standard-components/src/BackgroundImage.svelte
@@ -52,6 +52,6 @@
     display: grid;
     place-items: center;
     height: 75px;
-    width: 150px;
+    width: 300px;
   }
 </style>

From d0d38387adb7abf65a952f9efba624d3c1a3d21f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 25 Jun 2021 15:56:22 +0100
Subject: [PATCH 22/32] Fix placeholder styles, add typography settings to link

---
 packages/standard-components/manifest.json    |  80 +++++++++++++-
 .../src/BackgroundImage.svelte                |   4 +-
 packages/standard-components/src/Image.svelte |   4 +-
 packages/standard-components/src/Link.svelte  | 104 +++++++++++++++---
 4 files changed, 171 insertions(+), 21 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 5cca0d7e3d..63c801f289 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -867,6 +867,7 @@
     "name": "Link",
     "description": "A basic link component for internal and external links",
     "icon": "Link",
+    "showSettingsBar": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -885,10 +886,85 @@
         "label": "New Tab",
         "key": "openInNewTab"
       },
+      {
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "defaultValue": "M",
+        "showInBar": true,
+        "barStyle": "picker",
+        "options": [{
+          "label": "Small",
+          "value": "S"
+        }, {
+          "label": "Medium",
+          "value": "M"
+        }, {
+          "label": "Large",
+          "value": "L"
+        }]
+      },
+      {
+        "type": "color",
+        "label": "Color",
+        "key": "color",
+        "showInBar": true,
+        "barSeparator": false
+      },
       {
         "type": "boolean",
-        "label": "External",
-        "key": "external"
+        "label": "Bold",
+        "key": "bold",
+        "showInBar": true,
+        "barIcon": "TagBold",
+        "barTitle": "Bold text",
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Italic",
+        "key": "italic",
+        "showInBar": true,
+        "barIcon": "TagItalic",
+        "barTitle": "Italic text",
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Underline",
+        "key": "underline",
+        "showInBar": true,
+        "barIcon": "TagUnderline",
+        "barTitle": "Underline text"
+      },
+      {
+        "type": "select",
+        "label": "Alignment",
+        "key": "align",
+        "defaultValue": "left",
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [{
+          "label": "Left",
+          "value": "left",
+          "barIcon": "TextAlignLeft",
+          "barTitle": "Align left"
+        }, {
+          "label": "Center",
+          "value": "center",
+          "barIcon": "TextAlignCenter",
+          "barTitle": "Align center"
+        }, {
+          "label": "Right",
+          "value": "right",
+          "barIcon": "TextAlignRight",
+          "barTitle": "Align right"
+        }, {
+          "label": "Justify",
+          "value": "justify",
+          "barIcon": "TextAlignJustify",
+          "barTitle": "Justify text"
+        }]
       }
     ]
   },
diff --git a/packages/standard-components/src/BackgroundImage.svelte b/packages/standard-components/src/BackgroundImage.svelte
index 14025323f3..96befe560a 100644
--- a/packages/standard-components/src/BackgroundImage.svelte
+++ b/packages/standard-components/src/BackgroundImage.svelte
@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import Placeholder from "./Placeholder.svelte"
 
-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let url
@@ -23,7 +23,7 @@
   <div class="outer" use:styleable={$component.styles}>
     <div class="inner" {style} />
   </div>
-{:else}
+{:else if $builderStore.inBuilder}
   <div
     class="placeholder"
     use:styleable={{ ...$component.styles, empty: true }}
diff --git a/packages/standard-components/src/Image.svelte b/packages/standard-components/src/Image.svelte
index fb04f866c6..9619a16f5b 100644
--- a/packages/standard-components/src/Image.svelte
+++ b/packages/standard-components/src/Image.svelte
@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import Placeholder from "./Placeholder.svelte"
 
-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let url
@@ -10,7 +10,7 @@
 
 {#if url}
   <img src={url} alt={$component.name} use:styleable={$component.styles} />
-{:else}
+{:else if $builderStore.inBuilder}
   <div
     class="placeholder"
     use:styleable={{ ...$component.styles, empty: true }}
diff --git a/packages/standard-components/src/Link.svelte b/packages/standard-components/src/Link.svelte
index a60bfea8e1..93cac2e309 100644
--- a/packages/standard-components/src/Link.svelte
+++ b/packages/standard-components/src/Link.svelte
@@ -1,31 +1,105 @@
 <script>
   import { getContext } from "svelte"
 
-  const { linkable, styleable } = getContext("sdk")
+  const { linkable, styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
-  export let url = ""
-  export let text = ""
-  export let openInNewTab = false
-  export let external = false
+  export let url
+  export let text
+  export let openInNewTab
+  export let color
+  export let align
+  export let bold
+  export let italic
+  export let underline
+  export let size
 
+  $: external = url && !url.startsWith("/")
   $: target = openInNewTab ? "_blank" : "_self"
+  $: placeholder = $builderStore.inBuilder && !text
+  $: componentText = $builderStore.inBuilder
+    ? text || "Placeholder link"
+    : text || ""
+
+  // Add color styles to main styles object, otherwise the styleable helper
+  // overrides the color when it's passed as inline style.
+  $: styles = {
+    ...$component.styles,
+    normal: {
+      ...$component.styles?.normal,
+      color,
+    },
+  }
 </script>
 
-{#if external}
-  <a href={url || "/"} {target} use:styleable={$component.styles}>
-    {text}
-    <slot />
-  </a>
-{:else}
-  <a href={url || "/"} use:linkable {target} use:styleable={$component.styles}>
-    {text}
-    <slot />
-  </a>
+{#if $builderStore.inBuilder || componentText}
+  {#if external}
+    <a
+      {target}
+      href={url || "/"}
+      use:styleable={styles}
+      class:placeholder
+      class:bold
+      class:italic
+      class:underline
+      class="align--{align || 'left'} size--{size || 'M'}"
+    >
+      {componentText}
+    </a>
+  {:else}
+    <a
+      use:linkable
+      href={url || "/"}
+      use:styleable={styles}
+      class:placeholder
+      class:bold
+      class:italic
+      class:underline
+      class="align--{align || 'left'} size--{size || 'M'}"
+    >
+      {componentText}
+    </a>
+  {/if}
 {/if}
 
 <style>
   a {
     color: var(--spectrum-alias-text-color);
+    display: inline-block;
+    white-space: pre-wrap;
+  }
+  .placeholder {
+    font-style: italic;
+    color: var(--grey-6);
+  }
+  .bold {
+    font-weight: 600;
+  }
+  .italic {
+    font-style: italic;
+  }
+  .underline {
+    text-decoration: underline;
+  }
+  .size--S {
+    font-size: 14px;
+  }
+  .size--M {
+    font-size: 16px;
+  }
+  .size--L {
+    font-size: 18px;
+  }
+  .align--left {
+    text-align: left;
+  }
+  .align--center {
+    text-align: center;
+  }
+  .align--right {
+    text-align: right;
+  }
+  .align-justify {
+    text-align: justify;
   }
 </style>

From b6a62de0d3715ccbbed4b7b16cc3f069b394fb18 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 25 Jun 2021 16:04:42 +0100
Subject: [PATCH 23/32] Fix embed showing undefined, add size styles and add
 placeholder

---
 packages/standard-components/manifest.json    |  1 +
 .../src/BackgroundImage.svelte                |  2 --
 packages/standard-components/src/Embed.svelte | 20 ++++++++++++-------
 packages/standard-components/src/Image.svelte |  2 --
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 63c801f289..28b82fe67d 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1071,6 +1071,7 @@
     "icon": "Code",
     "description": "Embed content from 3rd party sources",
     "illegalChildren": ["section"],
+    "styles": ["size"],
     "settings": [
       {
         "type": "text",
diff --git a/packages/standard-components/src/BackgroundImage.svelte b/packages/standard-components/src/BackgroundImage.svelte
index 96befe560a..909e0fd3fd 100644
--- a/packages/standard-components/src/BackgroundImage.svelte
+++ b/packages/standard-components/src/BackgroundImage.svelte
@@ -51,7 +51,5 @@
   .placeholder {
     display: grid;
     place-items: center;
-    height: 75px;
-    width: 300px;
   }
 </style>
diff --git a/packages/standard-components/src/Embed.svelte b/packages/standard-components/src/Embed.svelte
index 350255a8f5..5abd4acf93 100644
--- a/packages/standard-components/src/Embed.svelte
+++ b/packages/standard-components/src/Embed.svelte
@@ -1,23 +1,29 @@
 <script>
   import { getContext } from "svelte"
+  import Placeholder from "./Placeholder.svelte"
 
-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let embed
 </script>
 
-<div use:styleable={$component.styles}>
-  {@html embed}
-</div>
+{#if embed}
+  <div class="embed" use:styleable={$component.styles}>
+    {@html embed}
+  </div>
+{:else if $builderStore.inBuilder}
+  <div use:styleable={{ ...$component.styles, empty: true }}>
+    <Placeholder />
+  </div>
+{/if}
 
 <style>
-  div {
+  .embed {
     position: relative;
   }
-  div :global(> *) {
+  .embed :global(> *) {
     width: 100%;
     height: 100%;
-    position: absolute;
   }
 </style>
diff --git a/packages/standard-components/src/Image.svelte b/packages/standard-components/src/Image.svelte
index 9619a16f5b..519b96d424 100644
--- a/packages/standard-components/src/Image.svelte
+++ b/packages/standard-components/src/Image.svelte
@@ -23,7 +23,5 @@
   .placeholder {
     display: grid;
     place-items: center;
-    height: 75px;
-    width: 150px;
   }
 </style>

From 7b876b2b4269cd44ff9003694e02a0fe3f388011 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 25 Jun 2021 16:07:25 +0100
Subject: [PATCH 24/32] Add ability for buttons to link to external URLs

---
 packages/client/src/utils/buttonActions.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 6a72c494f0..9ad0a23616 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -31,8 +31,14 @@ const triggerAutomationHandler = async action => {
 }
 
 const navigationHandler = action => {
-  if (action.parameters.url) {
-    routeStore.actions.navigate(action.parameters.url)
+  const { url } = action.parameters
+  if (url) {
+    const external = !url.startsWith("/")
+    if (external) {
+      window.location.href = url
+    } else {
+      routeStore.actions.navigate(action.parameters.url)
+    }
   }
 }
 

From 954c83c418082c5fa4213d0154cdc76311e806b0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 25 Jun 2021 17:00:30 +0100
Subject: [PATCH 25/32] Remove deprecated 'inline' style setting

---
 .../src/components/design/PropertiesPanel/componentStyles.js     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
index 219ebed51f..aba67a3926 100644
--- a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
+++ b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
@@ -196,7 +196,6 @@ export const size = {
 
 export const background = {
   label: "Background",
-  inline: true,
   columns: "auto 1fr",
   settings: [
     {

From 50f8931fbe6556b457df65cff7d2746e45150b07 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 25 Jun 2021 17:27:06 +0100
Subject: [PATCH 26/32] Lint

---
 .../components/design/PropertiesPanel/PropertiesPanel.svelte    | 2 +-
 .../src/components/design/PropertiesPanel/componentStyles.js    | 1 -
 packages/string-templates/src/utilities.js                      | 1 -
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
index c24dbec465..003b9d448c 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { store, selectedComponent, currentAsset } from "builderStore"
+  import { store, selectedComponent } from "builderStore"
   import { Tabs, Tab } from "@budibase/bbui"
   import ScreenSettingsSection from "./ScreenSettingsSection.svelte"
   import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
diff --git a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
index aba67a3926..95ca1e52d5 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, Select, ColorPicker } from "@budibase/bbui"
-import FlatButtonGroup from "./PropertyControls/FlatButtonGroup"
 
 export const margin = {
   label: "Margin",
diff --git a/packages/string-templates/src/utilities.js b/packages/string-templates/src/utilities.js
index d121511d89..3dc83b1fdb 100644
--- a/packages/string-templates/src/utilities.js
+++ b/packages/string-templates/src/utilities.js
@@ -1,4 +1,3 @@
-const _ = require("lodash")
 const ALPHA_NUMERIC_REGEX = /^[A-Za-z0-9]+$/g
 
 module.exports.FIND_HBS_REGEX = /{{([^{].*?)}}/g

From d65d4975c9fe407635eb3364a7832072ef6578f5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 28 Jun 2021 10:00:22 +0100
Subject: [PATCH 27/32] Fix tests

---
 packages/string-templates/test/basic.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/string-templates/test/basic.spec.js b/packages/string-templates/test/basic.spec.js
index f9b994be99..4536a159df 100644
--- a/packages/string-templates/test/basic.spec.js
+++ b/packages/string-templates/test/basic.spec.js
@@ -111,7 +111,7 @@ describe("check the utility functions", () => {
   it("should be able to handle an input date object", async () => {
     const date = new Date()
     const output = await processString("{{ dateObj }}", { dateObj: date })
-    expect(date.toISOString()).toEqual(output)
+    expect(date.toString()).toEqual(output)
   })
 })
 

From be37720dc55edb98b9d050bc85463f6a1b2e1b7a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 28 Jun 2021 10:09:31 +0100
Subject: [PATCH 28/32] Fix placement of 'reset fields' button for field groups

---
 .../design/PropertiesPanel/ComponentSettingsSection.svelte   | 4 ++++
 .../components/design/PropertiesPanel/PropertiesPanel.svelte | 2 --
 .../ResetFieldsButton.svelte}                                | 5 ++---
 3 files changed, 6 insertions(+), 5 deletions(-)
 rename packages/builder/src/components/design/PropertiesPanel/{ActionsSection.svelte => PropertyControls/ResetFieldsButton.svelte} (92%)

diff --git a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
index 6977516baa..637ce22233 100644
--- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
@@ -30,6 +30,7 @@
   import DateTimeFieldSelect from "./PropertyControls/DateTimeFieldSelect.svelte"
   import AttachmentFieldSelect from "./PropertyControls/AttachmentFieldSelect.svelte"
   import RelationshipFieldSelect from "./PropertyControls/RelationshipFieldSelect.svelte"
+  import ResetFieldsButton from "./PropertyControls/ResetFieldsButton.svelte"
 
   export let componentDefinition
   export let componentInstance
@@ -122,6 +123,9 @@
       {/if}
     {/each}
   {/if}
+  {#if componentDefinition?.component?.endsWith("/fieldgroup")}
+    <ResetFieldsButton {componentInstance} />
+  {/if}
   {#if componentDefinition?.info}
     <div class="text">
       {@html componentDefinition?.info}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
index 003b9d448c..c1e26e68cd 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@@ -5,7 +5,6 @@
   import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
   import DesignSection from "./DesignSection.svelte"
   import CustomStylesSection from "./CustomStylesSection.svelte"
-  import ActionsSection from "./ActionsSection.svelte"
 
   $: componentInstance = $selectedComponent
   $: componentDefinition = store.actions.components.getDefinition(
@@ -20,7 +19,6 @@
       <ComponentSettingsSection {componentInstance} {componentDefinition} />
       <DesignSection {componentInstance} {componentDefinition} />
       <CustomStylesSection {componentInstance} {componentDefinition} />
-      <ActionsSection {componentInstance} {componentDefinition} />
     </div>
   </Tab>
 </Tabs>
diff --git a/packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ResetFieldsButton.svelte
similarity index 92%
rename from packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/ResetFieldsButton.svelte
index 9d6297913e..d5b82176ce 100644
--- a/packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ResetFieldsButton.svelte
@@ -5,7 +5,6 @@
   import { makeDatasourceFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
-  export let componentDefinition
   export let componentInstance
 
   let confirmResetFieldsDialog
@@ -25,7 +24,7 @@
   }
 </script>
 
-{#if componentDefinition?.component?.endsWith("/fieldgroup")}
+<div>
   <ActionButton
     secondary
     wide
@@ -33,7 +32,7 @@
   >
     Update form fields
   </ActionButton>
-{/if}
+</div>
 
 <ConfirmDialog
   bind:this={confirmResetFieldsDialog}

From 829c2bb8eed904db6b35806f253b322fda4040e1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 28 Jun 2021 10:15:14 +0100
Subject: [PATCH 29/32] Fix border not being applied due to missing
 border-style rule

---
 packages/client/src/utils/styleable.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 3f02b36600..62688e5c07 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -34,6 +34,11 @@ export const styleable = (node, styles = {}) => {
       baseStyles.overflow = "hidden"
     }
 
+    // Append border-style css if border-width is specified
+    if (newStyles.normal?.["border-width"]) {
+      baseStyles["border-style"] = "solid"
+    }
+
     const componentId = newStyles.id
     const customStyles = newStyles.custom || ""
     const normalStyles = { ...baseStyles, ...newStyles.normal }

From 2333754862f527531256ec8f0898dfe86f9ba005 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 28 Jun 2021 10:47:23 +0100
Subject: [PATCH 30/32] Update autoscreens and default layouts to use new
 component props

---
 .../store/screenTemplates/rowListScreen.js    |  4 ++++
 .../screenTemplates/utils/commonComponents.js | 19 ++++++++++++++-----
 packages/server/src/constants/screens.js      |  6 ++----
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
index 7d7283c3d6..83b6e6a502 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
@@ -54,6 +54,10 @@ function generateTitleContainer(table) {
     .type("h2")
     .instanceName("Title")
     .text(table.name)
+    .customProps({
+      size: "M",
+      align: "left",
+    })
 
   return new Component("@budibase/standard-components/container")
     .normalStyle({
diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
index 4d2c13355d..93361e6c11 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
@@ -25,11 +25,8 @@ export function makeLinkComponent(tableName) {
     .customProps({
       url: `/${tableName.toLowerCase()}`,
       openInNewTab: false,
-      color: "",
-      hoverColor: "",
-      underline: false,
-      fontSize: "",
-      fontFamily: "initial",
+      size: "S",
+      align: "left",
     })
 }
 
@@ -62,6 +59,10 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
     .customStyle(spectrumColor(700))
     .text(">")
     .instanceName("Arrow")
+    .customProps({
+      size: "S",
+      align: "left",
+    })
 
   const textStyling = {
     color: "#000000",
@@ -77,6 +78,10 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
     .customStyle(spectrumColor(700))
     .text(text)
     .instanceName("Identifier")
+    .customProps({
+      size: "S",
+      align: "left",
+    })
 
   return new Component("@budibase/standard-components/container")
     .normalStyle({
@@ -148,6 +153,10 @@ export function makeTitleContainer(title) {
     .type("h2")
     .instanceName("Title")
     .text(title)
+    .customProps({
+      size: "M",
+      align: "left",
+    })
 
   return new Component("@budibase/standard-components/container")
     .normalStyle({
diff --git a/packages/server/src/constants/screens.js b/packages/server/src/constants/screens.js
index 8e3bda5cb8..ec07b128e5 100644
--- a/packages/server/src/constants/screens.js
+++ b/packages/server/src/constants/screens.js
@@ -20,15 +20,13 @@ exports.createHomeScreen = () => ({
         _id: "ef60083f-4a02-4df3-80f3-a0d3d16847e7",
         _component: "@budibase/standard-components/heading",
         _styles: {
-          normal: {
-            "text-align": "left",
-          },
           hover: {},
           active: {},
           selected: {},
         },
         text: "Welcome to your Budibase App 👋",
-        type: "h2",
+        size: "M",
+        align: "left",
         _instanceName: "Heading",
         _children: [],
       },

From cdd9bed7add7adbbfd6c76ad56516cfc2605c9b3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 28 Jun 2021 10:55:58 +0100
Subject: [PATCH 31/32] Prevent creating datasource without a type selected

---
 .../DatasourceNavigator/modals/CreateDatasourceModal.svelte     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
index 180d03f7ff..d8c29ed250 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
@@ -45,7 +45,7 @@
   size="L"
   confirmText="Create"
   onConfirm={saveDatasource}
-  disabled={error || !name}
+  disabled={error || !name || !integration?.type}
 >
   <Input
     data-cy="datasource-name-input"

From 39197b318b81572c5d1509a2b904cd979685dacc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 28 Jun 2021 10:56:17 +0100
Subject: [PATCH 32/32] Improve styles in data source page to be more in line
 with the portal

---
 .../[selectedDatasource]/index.svelte         | 21 ++++++++++---------
 .../data/datasource/bb_internal/index.svelte  | 21 ++++++++++---------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
index f805a5724f..5d8e2ca100 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
@@ -62,15 +62,17 @@
 {#if datasource && integration}
   <section>
     <Layout>
-      <header>
-        <svelte:component
-          this={ICONS[datasource.source]}
-          height="26"
-          width="26"
-        />
-        <Heading size="M">{datasource.name}</Heading>
-      </header>
-      <Body size="S" grey lh>{integration.description}</Body>
+      <Layout gap="XS" noPadding>
+        <header>
+          <svelte:component
+            this={ICONS[datasource.source]}
+            height="26"
+            width="26"
+          />
+          <Heading size="M">{datasource.name}</Heading>
+        </header>
+        <Body size="M">{integration.description}</Body>
+      </Layout>
       <Divider />
       <div class="container">
         <div class="config-header">
@@ -139,7 +141,6 @@
   }
 
   header {
-    margin: 0 0 var(--spacing-xs) 0;
     display: flex;
     gap: var(--spacing-l);
     align-items: center;
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/index.svelte
index d6a76b2cf3..5838e0b77c 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/index.svelte
@@ -14,14 +14,16 @@
 
 <section>
   <Layout>
-    <header>
-      <svelte:component this={ICONS.BUDIBASE} height="26" width="26" />
-      <Heading size="M">Budibase Internal</Heading>
-    </header>
-    <Body size="S" grey lh
-      >Budibase internal tables are part of your app, the data will be stored in
-      your apps context.</Body
-    >
+    <Layout gap="XS" noPadding>
+      <header>
+        <svelte:component this={ICONS.BUDIBASE} height="26" width="26" />
+        <Heading size="M">Budibase Internal</Heading>
+      </header>
+      <Body size="M">
+        Budibase internal tables are part of your app, so the data will be
+        stored in your apps context.
+      </Body>
+    </Layout>
     <Divider />
     <Heading size="S">Tables</Heading>
     <div class="table-list">
@@ -32,7 +34,7 @@
         >
           <Body size="S">{table.name}</Body>
           {#if table.primaryDisplay}
-            <Body size="S">display column: {table.primaryDisplay}</Body>
+            <Body size="S">Display column: {table.primaryDisplay}</Body>
           {/if}
         </div>
       {/each}
@@ -50,7 +52,6 @@
   }
 
   header {
-    margin: 0 0 var(--spacing-xs) 0;
     display: flex;
     gap: var(--spacing-l);
     align-items: center;