From c010eeb31406633afe5b805ccb3b330dfd22caca Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 4 May 2021 11:04:42 +0100
Subject: [PATCH] Fix prettier and fix crash when using certain views as data
 sources

---
 .prettierrc                                   |   2 +-
 package.json                                  |   2 +-
 .../bbui/src/ActionButton/ActionButton.svelte |   9 +-
 packages/bbui/src/Button/Button.svelte        |   6 +-
 .../bbui/src/ButtonGroup/ButtonGroup.svelte   |  26 +--
 packages/bbui/src/Form/Checkbox.svelte        |   2 +-
 packages/bbui/src/Form/Combobox.svelte        |   9 +-
 packages/bbui/src/Form/Core/Checkbox.svelte   |  16 +-
 packages/bbui/src/Form/Core/Combobox.svelte   |  36 ++--
 packages/bbui/src/Form/Core/DatePicker.svelte |  27 +--
 packages/bbui/src/Form/Core/Dropzone.svelte   |  50 ++++--
 .../bbui/src/Form/Core/Multiselect.svelte     |  21 +--
 packages/bbui/src/Form/Core/Picker.svelte     |  35 ++--
 packages/bbui/src/Form/Core/RadioGroup.svelte |  12 +-
 packages/bbui/src/Form/Core/Search.svelte     |  27 +--
 packages/bbui/src/Form/Core/Select.svelte     |  13 +-
 packages/bbui/src/Form/Core/Switch.svelte     |   5 +-
 packages/bbui/src/Form/Core/TextArea.svelte   |  15 +-
 packages/bbui/src/Form/Core/TextField.svelte  |  19 ++-
 packages/bbui/src/Form/DatePicker.svelte      |   5 +-
 packages/bbui/src/Form/Dropzone.svelte        |   5 +-
 packages/bbui/src/Form/Field.svelte           |   2 +-
 packages/bbui/src/Form/FieldLabel.svelte      |   5 +-
 packages/bbui/src/Form/Input.svelte           |   5 +-
 packages/bbui/src/Form/Multiselect.svelte     |   9 +-
 packages/bbui/src/Form/RadioGroup.svelte      |   9 +-
 packages/bbui/src/Form/Search.svelte          |   5 +-
 packages/bbui/src/Form/Select.svelte          |   9 +-
 packages/bbui/src/Form/TextArea.svelte        |   5 +-
 packages/bbui/src/Form/Toggle.svelte          |   2 +-
 packages/bbui/src/Link/Link.svelte            |   3 +-
 packages/bbui/src/Menu/Menu.svelte            |   6 +-
 packages/bbui/src/Menu/Section.svelte         |  13 +-
 packages/bbui/src/Menu/Separator.svelte       |   2 +-
 packages/bbui/src/Modal/CustomContent.svelte  |   2 +-
 packages/bbui/src/Modal/Modal.svelte          |   6 +-
 packages/bbui/src/Modal/ModalContent.svelte   |  12 +-
 packages/bbui/src/Modal/QuizModal.svelte      |   3 +-
 .../Notification/NotificationDisplay.svelte   |  70 ++++----
 packages/bbui/src/Popover/Popover.svelte      |   3 +-
 .../src/ProgressCircle/ProgressCircle.svelte  |  44 ++---
 packages/bbui/src/SideNavigation/Item.svelte  |  66 +++++---
 .../bbui/src/SideNavigation/Navigation.svelte |  10 +-
 .../bbui/src/Table/AttachmentRenderer.svelte  |   2 +-
 .../bbui/src/Table/BooleanRenderer.svelte     |  12 +-
 packages/bbui/src/Table/CellRenderer.svelte   |   4 +-
 .../bbui/src/Table/DateTimeRenderer.svelte    |   2 +-
 .../src/Table/RelationshipRenderer.svelte     |   2 +-
 packages/bbui/src/Table/Table.svelte          |  80 ++++++---
 packages/bbui/src/Tabs/Tab.svelte             |   6 +-
 packages/bbui/src/Tabs/Tabs.svelte            |  15 +-
 packages/bbui/src/Tags/Tag.svelte             |  32 ++--
 packages/bbui/src/Tags/Tags.svelte            |   6 +-
 packages/bbui/src/TreeView/Item.svelte        |  60 ++++---
 packages/bbui/src/TreeView/Tree.svelte        |  19 ++-
 packages/builder/package.json                 |   2 +-
 packages/builder/src/App.svelte               |   4 +-
 .../builder/src/builderStore/dataBinding.js   |  23 ++-
 .../AutomationBuilder.svelte                  |   2 +-
 .../AutomationBuilder/BlockList.svelte        |  23 +--
 .../AutomationBuilder/FlowChart/Arrow.svelte  |   6 +-
 .../FlowChart/AutomationBlockTagline.svelte   |   6 +-
 .../FlowChart/FlowChart.svelte                |   3 +-
 .../FlowChart/FlowItem.svelte                 |  19 ++-
 .../CreateAutomationModal.svelte              |   6 +-
 .../SetupPanel/AutomationBlockSetup.svelte    |  35 ++--
 .../automation/SetupPanel/RowSelector.svelte  |  17 +-
 .../automation/SetupPanel/SchemaSetup.svelte  |  17 +-
 .../SetupPanel/TableSelector.svelte           |   5 +-
 .../backend/DataTable/DataTable.svelte        |  10 +-
 .../DataTable/RelationshipDataTable.svelte    |   4 +-
 .../backend/DataTable/RowFieldControl.svelte  |  18 +-
 .../backend/DataTable/ViewDataTable.svelte    |   7 +-
 .../DataTable/buttons/CalculateButton.svelte  |   3 +-
 .../DataTable/buttons/DeleteRowsButton.svelte |   5 +-
 .../DataTable/buttons/FilterButton.svelte     |   3 +-
 .../DataTable/buttons/GroupByButton.svelte    |   3 +-
 .../buttons/ManageAccessButton.svelte         |   3 +-
 .../backend/DataTable/cells/RoleCell.svelte   |   2 +-
 .../DataTable/modals/CalculateModal.svelte    |  10 +-
 .../DataTable/modals/CreateEditColumn.svelte  |  78 +++++----
 .../DataTable/modals/CreateEditRow.svelte     |   9 +-
 .../DataTable/modals/CreateEditUser.svelte    |  40 +++--
 .../DataTable/modals/CreateViewModal.svelte   |   5 +-
 .../backend/DataTable/modals/EditRoles.svelte |  35 ++--
 .../DataTable/modals/ExportModal.svelte       |   5 +-
 .../DataTable/modals/GroupByModal.svelte      |   2 +-
 .../DatasourceNavigator/icons/Airtable.svelte |  15 +-
 .../DatasourceNavigator/icons/ArangoDB.svelte |  21 ++-
 .../DatasourceNavigator/icons/CouchDB.svelte  |   6 +-
 .../DatasourceNavigator/icons/DynamoDB.svelte |  24 ++-
 .../icons/Elasticsearch.svelte                |  21 ++-
 .../DatasourceNavigator/icons/MongoDB.svelte  |  24 ++-
 .../DatasourceNavigator/icons/MySQL.svelte    |  12 +-
 .../DatasourceNavigator/icons/Postgres.svelte |  18 +-
 .../DatasourceNavigator/icons/Rest.svelte     |   9 +-
 .../DatasourceNavigator/icons/S3.svelte       |  39 +++--
 .../icons/SQLServer.svelte                    |  24 ++-
 .../modals/CreateDatasourceModal.svelte       |  10 +-
 .../backend/TableNavigator/ListItem.svelte    |   3 +-
 .../TableNavigator/TableDataImport.svelte     |  28 +--
 .../TableNavigator/TableNavigator.svelte      |  11 +-
 .../modals/CreateTableModal.svelte            |  17 +-
 .../popovers/EditViewPopover.svelte           |   3 +-
 .../common/DrawerBindableInput.svelte         |  14 +-
 .../src/components/common/Dropzone.svelte     |   8 +-
 .../src/components/common/ErrorsBox.svelte    |   2 +-
 .../src/components/common/Icons/Add.svelte    |   3 +-
 .../src/components/common/Icons/Apps.svelte   |   6 +-
 .../components/common/Icons/ArrowDown.svelte  |   6 +-
 .../src/components/common/Icons/Bug.svelte    |   6 +-
 .../src/components/common/Icons/Check.svelte  |   6 +-
 .../common/Icons/ChevronDown.svelte           |   6 +-
 .../components/common/Icons/ChevronUp.svelte  |   6 +-
 .../src/components/common/Icons/Close.svelte  |   6 +-
 .../common/Icons/CloseCircle.svelte           |   6 +-
 .../components/common/Icons/Community.svelte  |   6 +-
 .../common/Icons/Contribution.svelte          |   6 +-
 .../src/components/common/Icons/Copy.svelte   |   6 +-
 .../common/Icons/Documentation.svelte         |   6 +-
 .../components/common/Icons/DownArrow.svelte  |   3 +-
 .../src/components/common/Icons/Email.svelte  |   6 +-
 .../src/components/common/Icons/Events.svelte |   6 +-
 .../components/common/Icons/Feedback.svelte   |   6 +-
 .../src/components/common/Icons/Grid.svelte   |   6 +-
 .../components/common/Icons/Hosting.svelte    |   6 +-
 .../src/components/common/Icons/Image.svelte  |   6 +-
 .../src/components/common/Icons/Info.svelte   |   3 +-
 .../src/components/common/Icons/Input.svelte  |   6 +-
 .../components/common/Icons/JavaScript.svelte |   9 +-
 .../src/components/common/Icons/Layout.svelte |   6 +-
 .../src/components/common/Icons/More.svelte   |   6 +-
 .../src/components/common/Icons/Paint.svelte  |   6 +-
 .../src/components/common/Icons/Pencil.svelte |   6 +-
 .../components/common/Icons/Preview.svelte    |   6 +-
 .../components/common/Icons/Settings.svelte   |   6 +-
 .../src/components/common/Icons/Shape.svelte  |   6 +-
 .../components/common/Icons/Terminal.svelte   |   6 +-
 .../components/common/Icons/Tutorials.svelte  |   6 +-
 .../components/common/Icons/Twitter.svelte    |   6 +-
 .../components/common/Icons/Updates.svelte    |   6 +-
 .../components/common/Icons/XCircle.svelte    |   6 +-
 .../common/LinkedRowSelector.svelte           |  36 ++--
 .../src/components/common/ValuesList.svelte   |   2 +-
 .../CreateWebhookDeploymentModal.svelte       |   8 +-
 .../deploy/DeploymentHistory.svelte           |  16 +-
 .../AppPreview/ComponentSelectionList.svelte  |  10 +-
 .../ComponentTree.svelte                      |  26 ++-
 .../ComponentNavigationTree/index.svelte      |   2 +-
 .../NavigationPanel/NewScreenModal.svelte     |  21 ++-
 .../PropertiesPanel/BindingPanel.svelte       |  99 ++++++-----
 .../design/PropertiesPanel/CategoryTab.svelte |   5 +-
 .../design/PropertiesPanel/DesignView.svelte  |  22 ++-
 .../PropertiesPanel/PropertiesPanel.svelte    |   8 +-
 .../PropertyControls/ColorPicker.svelte       |   6 +-
 .../DataProviderSelect.svelte                 |   7 +-
 .../PropertyControls/DataSourceSelect.svelte  |  42 +++--
 .../EventsEditor/EventPropertyControl.svelte  |   6 +-
 .../EventsEditor/actions/DeleteRow.svelte     |  11 +-
 .../EventsEditor/actions/LogIn.svelte         |  10 +-
 .../EventsEditor/actions/NavigateTo.svelte    |   5 +-
 .../actions/TriggerAutomation.svelte          |  25 +--
 .../EventsEditor/actions/ValidateForm.svelte  |   5 +-
 .../PropertyControls/FieldSelect.svelte       |  82 ++++-----
 .../FlatButtonGroup/FlatButtonGroup.svelte    |  13 +-
 .../PropertyControls/FormFieldSelect.svelte   |   6 +-
 .../IconSelect/IconSelect.svelte              |  20 +--
 .../PropertyControls/LayoutSelect.svelte      |   5 +-
 .../PropertyControls/MultiFieldSelect.svelte  |   4 +-
 .../PropertyControls/PropertyControl.svelte   |  24 ++-
 .../PropertyControls/PropertyGroup.svelte     |  13 +-
 .../PropertyControls/RoleSelect.svelte        |   5 +-
 .../components/feedback/FeedbackIframe.svelte |   2 +-
 .../src/components/integration/index.svelte   |   6 +-
 .../src/components/login/LoginForm.svelte     |   3 +-
 .../components/settings/Integration.svelte    |   2 +-
 .../src/components/settings/Link.svelte       |   3 +-
 .../components/settings/SettingsModal.svelte  |   3 +-
 .../components/settings/ThemeEditor.svelte    |   3 +-
 .../settings/ThemeEditorDropdown.svelte       |   3 +-
 .../components/settings/tabs/APIKeys.svelte   |   5 +-
 .../settings/tabs/DangerZone.svelte           |  13 +-
 .../components/settings/tabs/General.svelte   |  27 ++-
 .../src/components/start/Indicator.svelte     |   6 +-
 .../pages/builder/[application]/_reset.svelte |  23 ++-
 .../automate/[automation]/_layout.svelte      |   2 +-
 .../builder/[application]/data/_layout.svelte |   5 +-
 .../[query]/_layout.svelte                    |   2 +-
 .../[selectedDatasource]/[query]/index.svelte |   2 +-
 .../[selectedDatasource]/_layout.svelte       |   2 +-
 .../data/table/[selectedTable]/_layout.svelte |   2 +-
 .../[selectedField]/index.svelte              |   3 +-
 .../design/[assetType]/_layout.svelte         |   6 +-
 .../design/[assetType]/index.svelte           |   8 +-
 .../builder/src/pages/builder/_layout.svelte  |   6 +-
 packages/client/package.json                  |   2 +-
 .../client/src/components/Component.svelte    |   4 +-
 .../src/components/NotificationDisplay.svelte |   3 +-
 packages/client/src/components/Router.svelte  |   4 +-
 packages/client/yarn.lock                     |   8 +-
 .../static/templates/BudibaseApp.svelte       |   3 +-
 packages/standard-components/package.json     |   2 +-
 .../standard-components/src/Button.svelte     |   5 +-
 packages/standard-components/src/Card.svelte  |   6 +-
 .../src/CardHorizontal.svelte                 |   9 +-
 .../standard-components/src/Container.svelte  |   3 +-
 .../src/DataProvider.svelte                   |  25 ++-
 .../standard-components/src/Heading.svelte    |  12 +-
 packages/standard-components/src/Icon.svelte  |  42 ++---
 packages/standard-components/src/Image.svelte |   3 +-
 packages/standard-components/src/Link.svelte  |   4 +-
 packages/standard-components/src/Login.svelte |   8 +-
 .../standard-components/src/Search.svelte     |  16 +-
 .../src/charts/BarChart.svelte                | 160 +++++++++---------
 .../src/charts/CandleStickChart.svelte        |  14 +-
 .../src/charts/LineChart.svelte               |  16 +-
 .../src/charts/PieChart.svelte                |   8 +-
 .../src/forms/AttachmentField.svelte          |  17 +-
 .../src/forms/BooleanField.svelte             |   8 +-
 .../src/forms/DateTimeField.svelte            |   5 +-
 .../src/forms/Field.svelte                    |   5 +-
 .../src/forms/FieldGroup.svelte               |   3 +-
 .../standard-components/src/forms/Form.svelte |  20 ++-
 .../src/forms/LongFormField.svelte            |   8 +-
 .../src/forms/OptionsField.svelte             |   6 +-
 .../src/forms/RelationshipField.svelte        |  22 ++-
 .../src/forms/StringField.svelte              |  10 +-
 .../src/table/Table.svelte                    |  10 +-
 yarn.lock                                     |   8 +-
 229 files changed, 1752 insertions(+), 1204 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index e23b0be753..ac8b0f391c 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -4,5 +4,5 @@
   "singleQuote": false,
   "trailingComma": "es5",
   "plugins": ["prettier-plugin-svelte"],
-  "svelteSortOrder" : "scripts-markup-styles"
+  "svelteSortOrder" : "options-scripts-markup-styles"
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index f98624812f..171f9510f3 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "prettier-plugin-svelte": "^2.2.0",
     "rimraf": "^3.0.2",
     "rollup-plugin-replace": "^2.2.0",
-    "svelte": "^3.30.0"
+    "svelte": "^3.37.0"
   },
   "scripts": {
     "bootstrap": "lerna link && lerna bootstrap",
diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index a4bfd29c83..4bb592aa26 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -42,12 +42,14 @@
   class="spectrum-ActionButton spectrum-ActionButton--size{size}"
   {disabled}
   on:longPress
-  on:click|preventDefault>
+  on:click|preventDefault
+>
   {#if longPressable}
     <svg
       class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold"
       focusable="false"
-      aria-hidden="true">
+      aria-hidden="true"
+    >
       <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
     </svg>
   {/if}
@@ -56,7 +58,8 @@
       class="spectrum-Icon spectrum-Icon--size{size}"
       focusable="false"
       aria-hidden="true"
-      aria-label={icon}>
+      aria-label={icon}
+    >
       <use xlink:href="#spectrum-icon-18-{icon}" />
     </svg>
   {/if}
diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte
index 6e2b63adbd..da4d405f02 100644
--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@@ -23,13 +23,15 @@
   class:active
   class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
   {disabled}
-  on:click|preventDefault>
+  on:click|preventDefault
+>
   {#if icon}
     <svg
       class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
       focusable="false"
       aria-hidden="true"
-      aria-label={icon}>
+      aria-label={icon}
+    >
       <use xlink:href="#spectrum-icon-18-{icon}" />
     </svg>
   {/if}
diff --git a/packages/bbui/src/ButtonGroup/ButtonGroup.svelte b/packages/bbui/src/ButtonGroup/ButtonGroup.svelte
index 51055363a2..f33f8566c3 100644
--- a/packages/bbui/src/ButtonGroup/ButtonGroup.svelte
+++ b/packages/bbui/src/ButtonGroup/ButtonGroup.svelte
@@ -1,15 +1,19 @@
 <script>
-    import "@spectrum-css/buttongroup/dist/index-vars.css"
-    export let vertical = false
+  import "@spectrum-css/buttongroup/dist/index-vars.css"
+  export let vertical = false
 
-    function group(element) {
-        const buttons = Array.from(element.getElementsByTagName('button'))
-        buttons.forEach(button => {
-            button.classList.add('spectrum-ButtonGroup-item')
-        })
-    }
+  function group(element) {
+    const buttons = Array.from(element.getElementsByTagName("button"))
+    buttons.forEach((button) => {
+      button.classList.add("spectrum-ButtonGroup-item")
+    })
+  }
 </script>
 
-<div use:group class="spectrum-ButtonGroup" class:spectrum-ButtonGroup--vertical={vertical}>
-    <slot />
-</div>
\ No newline at end of file
+<div
+  use:group
+  class="spectrum-ButtonGroup"
+  class:spectrum-ButtonGroup--vertical={vertical}
+>
+  <slot />
+</div>
diff --git a/packages/bbui/src/Form/Checkbox.svelte b/packages/bbui/src/Form/Checkbox.svelte
index 1f3e439c2a..c8d473e7c8 100644
--- a/packages/bbui/src/Form/Checkbox.svelte
+++ b/packages/bbui/src/Form/Checkbox.svelte
@@ -11,7 +11,7 @@
   export let error = null
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e) => {
     value = e.detail
     dispatch("change", e.detail)
   }
diff --git a/packages/bbui/src/Form/Combobox.svelte b/packages/bbui/src/Form/Combobox.svelte
index 6b1e67a299..4926ef1f18 100644
--- a/packages/bbui/src/Form/Combobox.svelte
+++ b/packages/bbui/src/Form/Combobox.svelte
@@ -10,11 +10,11 @@
   export let error = null
   export let placeholder = "Choose an option"
   export let options = []
-  export let getOptionLabel = option => extractProperty(option, "label")
-  export let getOptionValue = option => extractProperty(option, "value")
+  export let getOptionLabel = (option) => extractProperty(option, "label")
+  export let getOptionValue = (option) => extractProperty(option, "value")
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -35,5 +35,6 @@
     {placeholder}
     {getOptionLabel}
     {getOptionValue}
-    on:change={onChange} />
+    on:change={onChange}
+  />
 </Field>
diff --git a/packages/bbui/src/Form/Core/Checkbox.svelte b/packages/bbui/src/Form/Core/Checkbox.svelte
index bc9b9a9fc7..510a67a185 100644
--- a/packages/bbui/src/Form/Core/Checkbox.svelte
+++ b/packages/bbui/src/Form/Core/Checkbox.svelte
@@ -10,34 +10,38 @@
   export let disabled = false
 
   const dispatch = createEventDispatcher()
-  const onChange = event => {
+  const onChange = (event) => {
     dispatch("change", event.target.checked)
   }
 </script>
 
 <label
   class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized"
-  class:is-invalid={!!error}>
+  class:is-invalid={!!error}
+>
   <input
     checked={value}
     {disabled}
     on:change={onChange}
     type="checkbox"
     class="spectrum-Checkbox-input"
-    {id} />
+    {id}
+  />
   <span class="spectrum-Checkbox-box">
     <svg
       class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
       focusable="false"
-      aria-hidden="true">
+      aria-hidden="true"
+    >
       <use xlink:href="#spectrum-css-icon-Checkmark100" />
     </svg>
     <svg
       class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
       focusable="false"
-      aria-hidden="true">
+      aria-hidden="true"
+    >
       <use xlink:href="#spectrum-css-icon-Dash100" />
     </svg>
   </span>
-  <span class="spectrum-Checkbox-label">{text || ''}</span>
+  <span class="spectrum-Checkbox-label">{text || ""}</span>
 </label>
diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte
index 4329467bb0..1d1df810d9 100644
--- a/packages/bbui/src/Form/Core/Combobox.svelte
+++ b/packages/bbui/src/Form/Core/Combobox.svelte
@@ -11,8 +11,8 @@
   export let disabled = false
   export let error = null
   export let options = []
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
+  export let getOptionLabel = (option) => option
+  export let getOptionValue = (option) => option
 
   const dispatch = createEventDispatcher()
   let open = false
@@ -31,16 +31,16 @@
     }
 
     // Render the label if the selected option is found, otherwise raw value
-    const selected = options.find(option => getOptionValue(option) === value)
+    const selected = options.find((option) => getOptionValue(option) === value)
     return selected ? getOptionLabel(selected) : value
   }
 
-  const selectOption = value => {
+  const selectOption = (value) => {
     dispatch("change", value)
     open = false
   }
 
-  const onChange = e => {
+  const onChange = (e) => {
     selectOption(e.target.value)
   }
 </script>
@@ -49,7 +49,8 @@
   <div
     class="spectrum-Textfield spectrum-InputGroup-textfield"
     class:is-disabled={!!error}
-    class:is-focused={open || focus}>
+    class:is-focused={open || focus}
+  >
     <input
       type="text"
       on:focus={() => (focus = true)}
@@ -57,18 +58,21 @@
       on:change={onChange}
       {value}
       {placeholder}
-      class="spectrum-Textfield-input spectrum-InputGroup-input" />
+      class="spectrum-Textfield-input spectrum-InputGroup-input"
+    />
   </div>
   <button
     class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
     tabindex="-1"
     aria-haspopup="true"
     disabled={!!error}
-    on:click={() => (open = true)}>
+    on:click={() => (open = true)}
+  >
     <svg
       class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon"
       focusable="false"
-      aria-hidden="true">
+      aria-hidden="true"
+    >
       <use xlink:href="#spectrum-css-icon-Chevron100" />
     </svg>
   </button>
@@ -76,7 +80,8 @@
     <div class="overlay" on:mousedown|self={() => (open = false)} />
     <div
       transition:fly={{ y: -20, duration: 200 }}
-      class="spectrum-Popover spectrum-Popover--bottom is-open">
+      class="spectrum-Popover spectrum-Popover--bottom is-open"
+    >
       <ul class="spectrum-Menu" role="listbox">
         {#if options && Array.isArray(options)}
           {#each options as option}
@@ -86,13 +91,16 @@
               role="option"
               aria-selected="true"
               tabindex="0"
-              on:click={() => selectOption(getOptionValue(option))}>
-              <span
-                class="spectrum-Menu-itemLabel">{getOptionLabel(option)}</span>
+              on:click={() => selectOption(getOptionValue(option))}
+            >
+              <span class="spectrum-Menu-itemLabel"
+                >{getOptionLabel(option)}</span
+              >
               <svg
                 class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
                 focusable="false"
-                aria-hidden="true">
+                aria-hidden="true"
+              >
                 <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
             </li>
diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker.svelte
index a3a2fefb38..1b57e55b27 100644
--- a/packages/bbui/src/Form/Core/DatePicker.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker.svelte
@@ -27,12 +27,12 @@
     wrap: true,
   }
 
-  const handleChange = event => {
+  const handleChange = (event) => {
     const [dates] = event.detail
     dispatch("change", dates[0])
   }
 
-  const clearDateOnBackspace = event => {
+  const clearDateOnBackspace = (event) => {
     if (["Backspace", "Clear", "Delete"].includes(event.key)) {
       dispatch("change", null)
       flatpickr.close()
@@ -53,7 +53,7 @@
     // We need to blur both because the focus styling does not get properly
     // applied.
     const els = document.querySelectorAll(`#${flatpickrId} input`)
-    els.forEach(el => el.blur())
+    els.forEach((el) => el.blur())
   }
 </script>
 
@@ -64,7 +64,8 @@
   on:close={onClose}
   options={flatpickrOptions}
   on:change={handleChange}
-  element={`#${flatpickrId}`}>
+  element={`#${flatpickrId}`}
+>
   <div
     id={flatpickrId}
     class:is-disabled={disabled}
@@ -73,17 +74,20 @@
     class:is-focused={open}
     aria-readonly="false"
     aria-required="false"
-    aria-haspopup="true">
+    aria-haspopup="true"
+  >
     <div
       on:click={flatpickr?.open}
       class="spectrum-Textfield spectrum-InputGroup-textfield"
       class:is-disabled={disabled}
-      class:is-invalid={!!error}>
+      class:is-invalid={!!error}
+    >
       {#if !!error}
         <svg
           class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
           focusable="false"
-          aria-hidden="true">
+          aria-hidden="true"
+        >
           <use xlink:href="#spectrum-icon-18-Alert" />
         </svg>
       {/if}
@@ -94,7 +98,8 @@
         class="spectrum-Textfield-input spectrum-InputGroup-input"
         {placeholder}
         {id}
-        {value} />
+        {value}
+      />
     </div>
     <button
       type="button"
@@ -102,12 +107,14 @@
       tabindex="-1"
       {disabled}
       class:is-invalid={!!error}
-      on:click={flatpickr?.open}>
+      on:click={flatpickr?.open}
+    >
       <svg
         class="spectrum-Icon spectrum-Icon--sizeM"
         focusable="false"
         aria-hidden="true"
-        aria-label="Calendar">
+        aria-label="Calendar"
+      >
         <use xlink:href="#spectrum-icon-18-Calendar" />
       </svg>
     </button>
diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte
index e6addd4e42..77099b09a4 100644
--- a/packages/bbui/src/Form/Core/Dropzone.svelte
+++ b/packages/bbui/src/Form/Core/Dropzone.svelte
@@ -28,7 +28,7 @@
     "bmp",
     "jfif",
   ]
-  const onChange = event => {
+  const onChange = (event) => {
     dispatch("change", event.target.checked)
   }
 
@@ -42,7 +42,7 @@
   async function processFileList(fileList) {
     if (
       handleFileTooLarge &&
-      Array.from(fileList).some(file => file.size >= fileSizeLimit)
+      Array.from(fileList).some((file) => file.size >= fileSizeLimit)
     ) {
       handleFileTooLarge(fileSizeLimit, value)
       return
@@ -119,13 +119,15 @@
       <div
         class="nav left"
         class:visible={selectedImageIdx > 0}
-        on:click={navigateLeft}>
+        on:click={navigateLeft}
+      >
         <Icon name="ChevronLeft" />
       </div>
       <div
         class="nav right"
         class:visible={selectedImageIdx < fileCount - 1}
-        on:click={navigateRight}>
+        on:click={navigateRight}
+      >
         <Icon name="ChevronRight" />
       </div>
       <div class="footer">File {selectedImageIdx + 1} of {fileCount}</div>
@@ -140,19 +142,22 @@
     on:dragleave={handleDragLeave}
     on:dragenter={handleDragOver}
     on:drop={handleDrop}
-    class:is-dragged={fileDragged}>
+    class:is-dragged={fileDragged}
+  >
     <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
       <input
         id={fieldId}
         {disabled}
         type="file"
         multiple
-        on:change={handleFile} />
+        on:change={handleFile}
+      />
       <svg
         class="spectrum-IllustratedMessage-illustration"
         width="125"
         height="60"
-        viewBox="0 0 199 97.7"><defs>
+        viewBox="0 0 199 97.7"
+        ><defs>
           <style>
             .cls-1,
             .cls-2 {
@@ -170,25 +175,31 @@
         </defs>
         <path
           class="cls-1"
-          d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66" />
+          d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"
+        />
         <line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5" />
         <path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43" />
         <path
           class="cls-1"
-          d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19" />
+          d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"
+        />
         <line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5" />
         <path
           class="cls-2"
-          d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z" />
+          d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"
+        />
         <path
           class="cls-2"
-          d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2" />
+          d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"
+        />
         <path
           class="cls-2"
-          d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7" />
+          d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"
+        />
         <path
           class="cls-1"
-          d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66" />
+          d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"
+        />
         <rect
           class="cls-1"
           x="1.5"
@@ -196,16 +207,21 @@
           width="58"
           height="39"
           rx="2"
-          ry="2" />
+          ry="2"
+        />
       </svg>
       <h2
-        class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading">
+        class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading"
+      >
         Drag and drop your file
       </h2>
       {#if !disabled}
         <p
-          class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description">
-          <label for={fieldId} class="spectrum-Link">Select a file to upload</label>
+          class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"
+        >
+          <label for={fieldId} class="spectrum-Link"
+            >Select a file to upload</label
+          >
           <br />
           from your computer
         </p>
diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index 97420fabad..46ec5d9157 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -8,14 +8,14 @@
   export let disabled = false
   export let error = null
   export let options = []
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
+  export let getOptionLabel = (option) => option
+  export let getOptionValue = (option) => option
 
   const dispatch = createEventDispatcher()
   $: selectedLookupMap = getSelectedLookupMap(value)
   $: optionLookupMap = getOptionLookupMap(options)
   $: fieldText = getFieldText(value, optionLookupMap, placeholder)
-  $: isOptionSelected = optionValue => selectedLookupMap[optionValue] === true
+  $: isOptionSelected = (optionValue) => selectedLookupMap[optionValue] === true
   $: toggleOption = makeToggleOption(selectedLookupMap, value)
 
   const getFieldText = (value, map, placeholder) => {
@@ -23,17 +23,17 @@
       if (!map) {
         return ""
       }
-      const vals = value.map(option => map[option] || option).join(", ")
+      const vals = value.map((option) => map[option] || option).join(", ")
       return `(${value.length}) ${vals}`
     } else {
       return placeholder || "Choose some options"
     }
   }
 
-  const getSelectedLookupMap = value => {
+  const getSelectedLookupMap = (value) => {
     let map = {}
     if (value?.length) {
-      value.forEach(option => {
+      value.forEach((option) => {
         if (option) {
           map[option] = true
         }
@@ -42,7 +42,7 @@
     return map
   }
 
-  const getOptionLookupMap = options => {
+  const getOptionLookupMap = (options) => {
     let map = null
     if (options?.length) {
       map = {}
@@ -57,9 +57,9 @@
   }
 
   const makeToggleOption = (map, value) => {
-    return optionValue => {
+    return (optionValue) => {
       if (map[optionValue]) {
-        const filtered = value.filter(option => option !== optionValue)
+        const filtered = value.filter((option) => option !== optionValue)
         dispatch("change", filtered)
       } else {
         dispatch("change", [...value, optionValue])
@@ -78,4 +78,5 @@
   {isOptionSelected}
   {getOptionLabel}
   {getOptionValue}
-  onSelectOption={toggleOption} />
+  onSelectOption={toggleOption}
+/>
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index 2f5606dcf1..3911eee306 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -15,13 +15,13 @@
   export let options = []
   export let isOptionSelected = () => false
   export let onSelectOption = () => {}
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
+  export let getOptionLabel = (option) => option
+  export let getOptionValue = (option) => option
   export let open = false
   export let readonly = false
 
   const dispatch = createEventDispatcher()
-  const onClick = e => {
+  const onClick = (e) => {
     dispatch("click")
     if (readonly) {
       return
@@ -37,7 +37,8 @@
   class:is-invalid={!!error}
   class:is-open={open}
   aria-haspopup="listbox"
-  on:mousedown={onClick}>
+  on:mousedown={onClick}
+>
   <span class="spectrum-Picker-label" class:is-placeholder={isPlaceholder}>
     {fieldText}
   </span>
@@ -46,14 +47,16 @@
       class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
       focusable="false"
       aria-hidden="true"
-      aria-label="Folder">
+      aria-label="Folder"
+    >
       <use xlink:href="#spectrum-icon-18-Alert" />
     </svg>
   {/if}
   <svg
     class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
     focusable="false"
-    aria-hidden="true">
+    aria-hidden="true"
+  >
     <use xlink:href="#spectrum-css-icon-Chevron100" />
   </svg>
 </button>
@@ -61,7 +64,8 @@
   <div
     use:clickOutside={() => (open = false)}
     transition:fly={{ y: -20, duration: 200 }}
-    class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open">
+    class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
+  >
     <ul class="spectrum-Menu" role="listbox">
       {#if placeholderOption}
         <li
@@ -70,12 +74,14 @@
           role="option"
           aria-selected="true"
           tabindex="0"
-          on:click={() => onSelectOption(null)}>
+          on:click={() => onSelectOption(null)}
+        >
           <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
           <svg
             class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
             focusable="false"
-            aria-hidden="true">
+            aria-hidden="true"
+          >
             <use xlink:href="#spectrum-css-icon-Checkmark100" />
           </svg>
         </li>
@@ -88,13 +94,16 @@
             role="option"
             aria-selected="true"
             tabindex="0"
-            on:click={() => onSelectOption(getOptionValue(option, idx))}>
-            <span
-              class="spectrum-Menu-itemLabel">{getOptionLabel(option, idx)}</span>
+            on:click={() => onSelectOption(getOptionValue(option, idx))}
+          >
+            <span class="spectrum-Menu-itemLabel"
+              >{getOptionLabel(option, idx)}</span
+            >
             <svg
               class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
               focusable="false"
-              aria-hidden="true">
+              aria-hidden="true"
+            >
               <use xlink:href="#spectrum-css-icon-Checkmark100" />
             </svg>
           </li>
diff --git a/packages/bbui/src/Form/Core/RadioGroup.svelte b/packages/bbui/src/Form/Core/RadioGroup.svelte
index 385e456a8e..b29d39c017 100644
--- a/packages/bbui/src/Form/Core/RadioGroup.svelte
+++ b/packages/bbui/src/Form/Core/RadioGroup.svelte
@@ -8,11 +8,11 @@
   export let options = []
   export let error = null
   export let disabled = false
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
+  export let getOptionLabel = (option) => option
+  export let getOptionValue = (option) => option
 
   const dispatch = createEventDispatcher()
-  const onChange = e => dispatch("change", e.target.value)
+  const onChange = (e) => dispatch("change", e.target.value)
 </script>
 
 <div class={`spectrum-FieldGroup spectrum-FieldGroup--${direction}`}>
@@ -21,14 +21,16 @@
       <div
         title={getOptionLabel(option)}
         class="spectrum-Radio spectrum-FieldGroup-item spectrum-Radio--emphasized"
-        class:is-invalid={!!error}>
+        class:is-invalid={!!error}
+      >
         <input
           on:change={onChange}
           bind:group={value}
           value={getOptionValue(option)}
           type="radio"
           class="spectrum-Radio-input"
-          {disabled} />
+          {disabled}
+        />
         <span class="spectrum-Radio-button" />
         <label class="spectrum-Radio-label">{getOptionLabel(option)}</label>
       </div>
diff --git a/packages/bbui/src/Form/Core/Search.svelte b/packages/bbui/src/Form/Core/Search.svelte
index 6855799e86..9ffba779e4 100644
--- a/packages/bbui/src/Form/Core/Search.svelte
+++ b/packages/bbui/src/Form/Core/Search.svelte
@@ -10,7 +10,7 @@
   const dispatch = createEventDispatcher()
   let focus = false
 
-  const updateValue = value => {
+  const updateValue = (value) => {
     dispatch("change", value)
   }
 
@@ -18,12 +18,12 @@
     focus = true
   }
 
-  const onBlur = event => {
+  const onBlur = (event) => {
     focus = false
     updateValue(event.target.value)
   }
 
-  const updateValueOnEnter = event => {
+  const updateValueOnEnter = (event) => {
     if (event.key === "Enter") {
       updateValue(event.target.value)
     }
@@ -34,11 +34,13 @@
   <div
     class="spectrum-Textfield"
     class:is-focused={focus}
-    class:is-disabled={disabled}>
+    class:is-disabled={disabled}
+  >
     <svg
       class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-icon"
       focusable="false"
-      aria-hidden="true">
+      aria-hidden="true"
+    >
       <use xlink:href="#spectrum-icon-18-Magnify" />
     </svg>
     <input
@@ -46,23 +48,26 @@
       on:keyup={updateValueOnEnter}
       {disabled}
       {id}
-      value={value || ''}
-      placeholder={placeholder || ''}
+      value={value || ""}
+      placeholder={placeholder || ""}
       on:blur={onBlur}
       on:focus={onFocus}
       on:input
       type="search"
       class="spectrum-Textfield-input spectrum-Search-input"
-      autocomplete="off" />
+      autocomplete="off"
+    />
   </div>
   <button
-    on:click={() => updateValue('')}
+    on:click={() => updateValue("")}
     type="reset"
-    class="spectrum-ClearButton spectrum-Search-clearButton">
+    class="spectrum-ClearButton spectrum-Search-clearButton"
+  >
     <svg
       class="spectrum-Icon spectrum-UIIcon-Cross75"
       focusable="false"
-      aria-hidden="true">
+      aria-hidden="true"
+    >
       <use xlink:href="#spectrum-css-icon-Cross75" />
     </svg>
   </button>
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index 58e1ccca5a..3249423feb 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -8,8 +8,8 @@
   export let disabled = false
   export let error = null
   export let options = []
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
+  export let getOptionLabel = (option) => option
+  export let getOptionValue = (option) => option
   export let readonly = false
 
   const dispatch = createEventDispatcher()
@@ -34,7 +34,7 @@
     return index !== -1 ? getOptionLabel(options[index], index) : value
   }
 
-  const selectOption = value => {
+  const selectOption = (value) => {
     dispatch("change", value)
     open = false
   }
@@ -51,7 +51,8 @@
   {options}
   {getOptionLabel}
   {getOptionValue}
-  isPlaceholder={value == null || value === ''}
+  isPlaceholder={value == null || value === ""}
   placeholderOption={placeholder}
-  isOptionSelected={option => option === value}
-  onSelectOption={selectOption} />
+  isOptionSelected={(option) => option === value}
+  onSelectOption={selectOption}
+/>
diff --git a/packages/bbui/src/Form/Core/Switch.svelte b/packages/bbui/src/Form/Core/Switch.svelte
index 520b8ebff1..a4df7547c6 100644
--- a/packages/bbui/src/Form/Core/Switch.svelte
+++ b/packages/bbui/src/Form/Core/Switch.svelte
@@ -9,7 +9,7 @@
   export let disabled = false
 
   const dispatch = createEventDispatcher()
-  const onChange = event => {
+  const onChange = (event) => {
     dispatch("change", event.target.checked)
   }
 </script>
@@ -21,7 +21,8 @@
     on:change={onChange}
     {id}
     type="checkbox"
-    class="spectrum-Switch-input" />
+    class="spectrum-Switch-input"
+  />
   <span class="spectrum-Switch-switch" />
   <label class="spectrum-Switch-label" for={id}>{text}</label>
 </div>
diff --git a/packages/bbui/src/Form/Core/TextArea.svelte b/packages/bbui/src/Form/Core/TextArea.svelte
index 3903c37b28..ae89efc151 100644
--- a/packages/bbui/src/Form/Core/TextArea.svelte
+++ b/packages/bbui/src/Form/Core/TextArea.svelte
@@ -15,7 +15,7 @@
   let focus = false
   let textarea
   const dispatch = createEventDispatcher()
-  const onChange = event => {
+  const onChange = (event) => {
     dispatch("change", event.target.value)
     focus = false
   }
@@ -25,23 +25,28 @@
   class="spectrum-Textfield spectrum-Textfield--multiline"
   class:is-invalid={!!error}
   class:is-disabled={disabled}
-  class:is-focused={focus}>
+  class:is-focused={focus}
+>
   {#if error}
     <svg
       class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
       focusable="false"
-      aria-hidden="true">
+      aria-hidden="true"
+    >
       <use xlink:href="#spectrum-icon-18-Alert" />
     </svg>
   {/if}
   <textarea
     bind:this={textarea}
-    placeholder={placeholder || ''}
+    placeholder={placeholder || ""}
     class="spectrum-Textfield-input"
     {disabled}
     {id}
     on:focus={() => (focus = true)}
-    on:blur={onChange}>{value || ''}</textarea>
+    on:blur={onChange}
+  >
+    {value || ""}
+  </textarea>
 </div>
 
 <style>
diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte
index c470f755b0..3df63f464e 100644
--- a/packages/bbui/src/Form/Core/TextField.svelte
+++ b/packages/bbui/src/Form/Core/TextField.svelte
@@ -13,7 +13,7 @@
   const dispatch = createEventDispatcher()
   let focus = false
 
-  const updateValue = value => {
+  const updateValue = (value) => {
     if (readonly) {
       return
     }
@@ -31,7 +31,7 @@
     focus = true
   }
 
-  const onBlur = event => {
+  const onBlur = (event) => {
     if (readonly) {
       return
     }
@@ -39,7 +39,7 @@
     updateValue(event.target.value)
   }
 
-  const updateValueOnEnter = event => {
+  const updateValueOnEnter = (event) => {
     if (readonly) {
       return
     }
@@ -53,12 +53,14 @@
   class="spectrum-Textfield"
   class:is-invalid={!!error}
   class:is-disabled={disabled}
-  class:is-focused={focus}>
+  class:is-focused={focus}
+>
   {#if error}
     <svg
       class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
       focusable="false"
-      aria-hidden="true">
+      aria-hidden="true"
+    >
       <use xlink:href="#spectrum-icon-18-Alert" />
     </svg>
   {/if}
@@ -68,13 +70,14 @@
     {disabled}
     {readonly}
     {id}
-    value={value || ''}
-    placeholder={placeholder || ''}
+    value={value || ""}
+    placeholder={placeholder || ""}
     on:blur={onBlur}
     on:focus={onFocus}
     on:input
     {type}
-    class="spectrum-Textfield-input" />
+    class="spectrum-Textfield-input"
+  />
 </div>
 
 <style>
diff --git a/packages/bbui/src/Form/DatePicker.svelte b/packages/bbui/src/Form/DatePicker.svelte
index 1ac3b2bef0..8875e3262c 100644
--- a/packages/bbui/src/Form/DatePicker.svelte
+++ b/packages/bbui/src/Form/DatePicker.svelte
@@ -12,7 +12,7 @@
   export let placeholder = null
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -25,5 +25,6 @@
     {value}
     {placeholder}
     {enableTime}
-    on:change={onChange} />
+    on:change={onChange}
+  />
 </Field>
diff --git a/packages/bbui/src/Form/Dropzone.svelte b/packages/bbui/src/Form/Dropzone.svelte
index 5886c58fa9..be5f7322a0 100644
--- a/packages/bbui/src/Form/Dropzone.svelte
+++ b/packages/bbui/src/Form/Dropzone.svelte
@@ -13,7 +13,7 @@
   export let handleFileTooLarge = undefined
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -27,5 +27,6 @@
     {fileSizeLimit}
     {processFiles}
     {handleFileTooLarge}
-    on:change={onChange} />
+    on:change={onChange}
+  />
 </Field>
diff --git a/packages/bbui/src/Form/Field.svelte b/packages/bbui/src/Form/Field.svelte
index 5e4ca01f06..5ecc7ba866 100644
--- a/packages/bbui/src/Form/Field.svelte
+++ b/packages/bbui/src/Form/Field.svelte
@@ -9,7 +9,7 @@
   export let error = null
 </script>
 
-<div class="spectrum-Form-item" class:above={labelPosition === 'above'}>
+<div class="spectrum-Form-item" class:above={labelPosition === "above"}>
   {#if label}
     <FieldLabel forId={id} {label} position={labelPosition} />
   {/if}
diff --git a/packages/bbui/src/Form/FieldLabel.svelte b/packages/bbui/src/Form/FieldLabel.svelte
index c4219f5581..b070df8cae 100644
--- a/packages/bbui/src/Form/FieldLabel.svelte
+++ b/packages/bbui/src/Form/FieldLabel.svelte
@@ -10,8 +10,9 @@
 
 <label
   for={forId}
-  class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${className}`}>
-  {label || ''}
+  class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${className}`}
+>
+  {label || ""}
 </label>
 
 <style>
diff --git a/packages/bbui/src/Form/Input.svelte b/packages/bbui/src/Form/Input.svelte
index e4a155d342..9defe407f5 100644
--- a/packages/bbui/src/Form/Input.svelte
+++ b/packages/bbui/src/Form/Input.svelte
@@ -13,7 +13,7 @@
   export let error = null
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -29,5 +29,6 @@
     {type}
     on:change={onChange}
     on:click
-    on:input />
+    on:input
+  />
 </Field>
diff --git a/packages/bbui/src/Form/Multiselect.svelte b/packages/bbui/src/Form/Multiselect.svelte
index 1615fac2b6..5c1a6fd7d7 100644
--- a/packages/bbui/src/Form/Multiselect.svelte
+++ b/packages/bbui/src/Form/Multiselect.svelte
@@ -11,11 +11,11 @@
   export let error = null
   export let placeholder = null
   export let options = []
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
+  export let getOptionLabel = (option) => option
+  export let getOptionValue = (option) => option
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -31,5 +31,6 @@
     {getOptionLabel}
     {getOptionValue}
     on:change={onChange}
-    on:click />
+    on:click
+  />
 </Field>
diff --git a/packages/bbui/src/Form/RadioGroup.svelte b/packages/bbui/src/Form/RadioGroup.svelte
index 61bc5f8552..e4f2ef666e 100644
--- a/packages/bbui/src/Form/RadioGroup.svelte
+++ b/packages/bbui/src/Form/RadioGroup.svelte
@@ -9,11 +9,11 @@
   export let labelPosition = "above"
   export let error = null
   export let options = []
-  export let getOptionLabel = option => extractProperty(option, "label")
-  export let getOptionValue = option => extractProperty(option, "value")
+  export let getOptionLabel = (option) => extractProperty(option, "label")
+  export let getOptionValue = (option) => extractProperty(option, "value")
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -33,5 +33,6 @@
     {options}
     {getOptionLabel}
     {getOptionValue}
-    on:change={onChange} />
+    on:change={onChange}
+  />
 </Field>
diff --git a/packages/bbui/src/Form/Search.svelte b/packages/bbui/src/Form/Search.svelte
index e68a6a49fb..6a1ac27c0c 100644
--- a/packages/bbui/src/Form/Search.svelte
+++ b/packages/bbui/src/Form/Search.svelte
@@ -10,7 +10,7 @@
   export let disabled = false
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -23,5 +23,6 @@
     {placeholder}
     on:change={onChange}
     on:click
-    on:input />
+    on:input
+  />
 </Field>
diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte
index 0dd4a98102..598d8c5469 100644
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@@ -11,11 +11,11 @@
   export let error = null
   export let placeholder = "Choose an option"
   export let options = []
-  export let getOptionLabel = option => extractProperty(option, "label")
-  export let getOptionValue = option => extractProperty(option, "value")
+  export let getOptionLabel = (option) => extractProperty(option, "label")
+  export let getOptionValue = (option) => extractProperty(option, "value")
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -38,5 +38,6 @@
     {getOptionLabel}
     {getOptionValue}
     on:change={onChange}
-    on:click />
+    on:click
+  />
 </Field>
diff --git a/packages/bbui/src/Form/TextArea.svelte b/packages/bbui/src/Form/TextArea.svelte
index a11b87da0d..fa969bff47 100644
--- a/packages/bbui/src/Form/TextArea.svelte
+++ b/packages/bbui/src/Form/TextArea.svelte
@@ -12,7 +12,7 @@
   export let getCaretPosition = null
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -25,5 +25,6 @@
     {disabled}
     {value}
     {placeholder}
-    on:change={onChange} />
+    on:change={onChange}
+  />
 </Field>
diff --git a/packages/bbui/src/Form/Toggle.svelte b/packages/bbui/src/Form/Toggle.svelte
index 798f0a63ec..73055a7256 100644
--- a/packages/bbui/src/Form/Toggle.svelte
+++ b/packages/bbui/src/Form/Toggle.svelte
@@ -11,7 +11,7 @@
   export let error = null
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e) => {
     value = e.detail
     dispatch("change", e.detail)
   }
diff --git a/packages/bbui/src/Link/Link.svelte b/packages/bbui/src/Link/Link.svelte
index c1613378f6..6447993430 100644
--- a/packages/bbui/src/Link/Link.svelte
+++ b/packages/bbui/src/Link/Link.svelte
@@ -17,4 +17,5 @@
   class:spectrum-Link--secondary={secondary}
   class:spectrum-Link--overBackground={overBackground}
   class:spectrum-Link--quiet={quiet}
-  class="spectrum-Link spectrum-Link--size{size}"><slot /></a>
+  class="spectrum-Link spectrum-Link--size{size}"><slot /></a
+>
diff --git a/packages/bbui/src/Menu/Menu.svelte b/packages/bbui/src/Menu/Menu.svelte
index 2fa1021732..6c31b603a3 100644
--- a/packages/bbui/src/Menu/Menu.svelte
+++ b/packages/bbui/src/Menu/Menu.svelte
@@ -1,7 +1,7 @@
 <script>
-    import "@spectrum-css/menu/dist/index-vars.css"
+  import "@spectrum-css/menu/dist/index-vars.css"
 </script>
 
 <ul class="spectrum-Menu" role="menu">
-    <slot />
-</ul>
\ No newline at end of file
+  <slot />
+</ul>
diff --git a/packages/bbui/src/Menu/Section.svelte b/packages/bbui/src/Menu/Section.svelte
index 54ae4123be..5aea52b029 100644
--- a/packages/bbui/src/Menu/Section.svelte
+++ b/packages/bbui/src/Menu/Section.svelte
@@ -1,9 +1,10 @@
 <script>
-    export let heading
+  export let heading
 </script>
+
 <li role="presentation">
-<span class="spectrum-Menu-sectionHeading">{heading}</span>
-    <ul class="spectrum-Menu" role="group">
-        <slot />
-    </ul>
-</li>
\ No newline at end of file
+  <span class="spectrum-Menu-sectionHeading">{heading}</span>
+  <ul class="spectrum-Menu" role="group">
+    <slot />
+  </ul>
+</li>
diff --git a/packages/bbui/src/Menu/Separator.svelte b/packages/bbui/src/Menu/Separator.svelte
index 187fab2347..3118c7262f 100644
--- a/packages/bbui/src/Menu/Separator.svelte
+++ b/packages/bbui/src/Menu/Separator.svelte
@@ -1 +1 @@
-<li class="spectrum-Menu-divider" role="separator"></li>
\ No newline at end of file
+<li class="spectrum-Menu-divider" role="separator" />
diff --git a/packages/bbui/src/Modal/CustomContent.svelte b/packages/bbui/src/Modal/CustomContent.svelte
index b15b61ca05..6eca00cc5c 100644
--- a/packages/bbui/src/Modal/CustomContent.svelte
+++ b/packages/bbui/src/Modal/CustomContent.svelte
@@ -17,7 +17,7 @@
 <div on:click={increment}>
   Click me
   {remaining}
-  more time{remaining === 1 ? '' : 's'}
+  more time{remaining === 1 ? "" : "s"}
   to close this modal!
 </div>
 
diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index f8d07a16df..adc726a7ab 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -50,13 +50,15 @@
     <div
       class="spectrum-Underlay is-open"
       transition:fade={{ duration: 200 }}
-      on:mousedown|self={hide}>
+      on:mousedown|self={hide}
+    >
       <div class="modal-wrapper" on:mousedown|self={hide}>
         <div class="modal-inner-wrapper" on:mousedown|self={hide}>
           <div
             use:focusFirstInput
             class="spectrum-Modal is-open"
-            transition:fly={{ y: 30, duration: 200 }}>
+            transition:fly={{ y: 30, duration: 200 }}
+          >
             <slot />
           </div>
         </div>
diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index 321c0177a4..14f0a7b6bf 100644
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@@ -34,7 +34,8 @@
   style="position: relative;"
   role="dialog"
   tabindex="-1"
-  aria-modal="true">
+  aria-modal="true"
+>
   <div class="spectrum-Dialog-grid">
     <h1 class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader">
       {title}
@@ -47,7 +48,8 @@
     </section>
     {#if showCancelButton || showConfirmButton}
       <div
-        class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter">
+        class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter"
+      >
         <slot name="footer" />
         {#if showCancelButton}
           <Button group secondary on:click={hide}>{cancelText}</Button>
@@ -58,7 +60,8 @@
             cta
             {...$$restProps}
             disabled={confirmDisabled}
-            on:click={confirm}>
+            on:click={confirm}
+          >
             {confirmText}
           </Button>
         {/if}
@@ -73,6 +76,9 @@
 </div>
 
 <style>
+  .spectrum-Dialog--XL {
+    width: 1200px;
+  }
   .content-grid {
     display: grid;
     position: relative;
diff --git a/packages/bbui/src/Modal/QuizModal.svelte b/packages/bbui/src/Modal/QuizModal.svelte
index 6b5d4c94d2..285c04ebc5 100644
--- a/packages/bbui/src/Modal/QuizModal.svelte
+++ b/packages/bbui/src/Modal/QuizModal.svelte
@@ -31,7 +31,8 @@
   bind:this={modal}
   confirmText="Submit"
   onConfirm={answerQuiz}
-  on:show={resetState}>
+  on:show={resetState}
+>
   {#if error}
     <p class="error">Wrong answer! Try again.</p>
   {/if}
diff --git a/packages/bbui/src/Notification/NotificationDisplay.svelte b/packages/bbui/src/Notification/NotificationDisplay.svelte
index 161d31ec6c..89e7666cc7 100644
--- a/packages/bbui/src/Notification/NotificationDisplay.svelte
+++ b/packages/bbui/src/Notification/NotificationDisplay.svelte
@@ -1,17 +1,25 @@
 <script>
-    import "@spectrum-css/toast/dist/index-vars.css"
-    import Portal from "svelte-portal"
-    import { flip } from "svelte/animate"
-    import { fly } from "svelte/transition"
-    import { notifications } from '../Stores/notifications'
+  import "@spectrum-css/toast/dist/index-vars.css"
+  import Portal from "svelte-portal"
+  import { flip } from "svelte/animate"
+  import { fly } from "svelte/transition"
+  import { notifications } from "../Stores/notifications"
 </script>
-  
- <Portal target=".modal-container">
+
+<Portal target=".modal-container">
   <div class="notifications">
-    {#each $notifications as {type, icon, message, id} (id)}
-      <div animate:flip transition:fly={{ y: -30 }} class="spectrum-Toast spectrum-Toast--{type} notification-offset">
+    {#each $notifications as { type, icon, message, id } (id)}
+      <div
+        animate:flip
+        transition:fly={{ y: -30 }}
+        class="spectrum-Toast spectrum-Toast--{type} notification-offset"
+      >
         {#if icon}
-          <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
+          <svg
+            class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon"
+            focusable="false"
+            aria-hidden="true"
+          >
             <use xlink:href="#spectrum-icon-18-{icon}" />
           </svg>
         {/if}
@@ -21,24 +29,24 @@
       </div>
     {/each}
   </div>
- </Portal>
-  <style>
-    .notifications {
-      position: fixed;
-      top: 10px;
-      left: 0;
-      right: 0;
-      margin: 0 auto;
-      padding: 0;
-      z-index: 9999;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: center;
-      pointer-events: none;
-    }
-    .notification-offset {
-      margin-bottom: 10px;
-    }
-  </style>
-  
\ No newline at end of file
+</Portal>
+
+<style>
+  .notifications {
+    position: fixed;
+    top: 10px;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    padding: 0;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    pointer-events: none;
+  }
+  .notification-offset {
+    margin-bottom: 10px;
+  }
+</style>
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index bea421fd07..e07dc28ccf 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -37,7 +37,8 @@
       use:clickOutside={hide}
       on:keydown={handleEscape}
       class="spectrum-Popover is-open"
-      role="presentation">
+      role="presentation"
+    >
       <slot />
     </div>
   </Portal>
diff --git a/packages/bbui/src/ProgressCircle/ProgressCircle.svelte b/packages/bbui/src/ProgressCircle/ProgressCircle.svelte
index ba1dc10965..c3c0fb39d6 100644
--- a/packages/bbui/src/ProgressCircle/ProgressCircle.svelte
+++ b/packages/bbui/src/ProgressCircle/ProgressCircle.svelte
@@ -1,29 +1,33 @@
 <script>
-    // WIP! Does not yet work.
-    import "@spectrum-css/progresscircle/dist/index-vars.css"
-    import { tweened } from 'svelte/motion';
-    import { cubicOut } from 'svelte/easing';
+  // WIP! Does not yet work.
+  import "@spectrum-css/progresscircle/dist/index-vars.css"
+  import { tweened } from "svelte/motion"
+  import { cubicOut } from "svelte/easing"
 
-    export let value = false
-    export let small;
-    export let large;
+  export let value = false
+  export let small
+  export let large
 
-    export let overBackground;
+  export let overBackground
 </script>
 
-<div class:spectrum-ProgressBar--indeterminate={!value} class:spectrum-ProgressCircle--small={small} class:spectrum-ProgressCircle--large={large} class="spectrum-ProgressCircle">
-    <div class="spectrum-ProgressCircle-track"></div>
-    <div class="spectrum-ProgressCircle-fills">
-      <div class="spectrum-ProgressCircle-fillMask1">
-        <div class="spectrum-ProgressCircle-fillSubMask1">
-          <div class="spectrum-ProgressCircle-fill"></div>
-        </div>
+<div
+  class:spectrum-ProgressBar--indeterminate={!value}
+  class:spectrum-ProgressCircle--small={small}
+  class:spectrum-ProgressCircle--large={large}
+  class="spectrum-ProgressCircle"
+>
+  <div class="spectrum-ProgressCircle-track" />
+  <div class="spectrum-ProgressCircle-fills">
+    <div class="spectrum-ProgressCircle-fillMask1">
+      <div class="spectrum-ProgressCircle-fillSubMask1">
+        <div class="spectrum-ProgressCircle-fill" />
       </div>
-      <div class="spectrum-ProgressCircle-fillMask2">
-        <div class="spectrum-ProgressCircle-fillSubMask2">
-          <div class="spectrum-ProgressCircle-fill"></div>
-        </div>
+    </div>
+    <div class="spectrum-ProgressCircle-fillMask2">
+      <div class="spectrum-ProgressCircle-fillSubMask2">
+        <div class="spectrum-ProgressCircle-fill" />
       </div>
     </div>
   </div>
-
+</div>
diff --git a/packages/bbui/src/SideNavigation/Item.svelte b/packages/bbui/src/SideNavigation/Item.svelte
index 17b83d1605..75440796b5 100644
--- a/packages/bbui/src/SideNavigation/Item.svelte
+++ b/packages/bbui/src/SideNavigation/Item.svelte
@@ -1,30 +1,44 @@
 <script>
-    import { getContext } from 'svelte'
-    const multilevel = getContext('sidenav-type');
-    export let href = "";
-    export let external = false;
-    export let heading = ""
-    export let icon = "";
-    export let selected = false;
-    export let disabled = false;
-
+  import { getContext } from "svelte"
+  const multilevel = getContext("sidenav-type")
+  export let href = ""
+  export let external = false
+  export let heading = ""
+  export let icon = ""
+  export let selected = false
+  export let disabled = false
 </script>
 
-<li class="spectrum-SideNav-item" class:is-selected={selected} class:is-disabled={disabled}>
-    {#if heading}
-        <h2 class="spectrum-SideNav-heading" id="nav-heading-{heading}">{heading}</h2>
+<li
+  class="spectrum-SideNav-item"
+  class:is-selected={selected}
+  class:is-disabled={disabled}
+>
+  {#if heading}
+    <h2 class="spectrum-SideNav-heading" id="nav-heading-{heading}">
+      {heading}
+    </h2>
+  {/if}
+  <a
+    target={external ? "_blank" : "_self"}
+    {href}
+    class="spectrum-SideNav-itemLink"
+    aria-current="page"
+  >
+    {#if icon}
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM spectrum-SideNav-itemIcon"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-icon-18-{icon}" />
+      </svg>
     {/if}
-    <a target={external ? '_blank' : '_self'} {href} class="spectrum-SideNav-itemLink" aria-current="page">
-        {#if icon}
-            <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-SideNav-itemIcon" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-icon-18-{icon}" />
-            </svg>
-        {/if}
-        <slot />
-    </a>
-    {#if multilevel && $$slots.subnav}
-        <ul class="spectrum-SideNav">
-            <slot name="subnav" />
-        </ul>
-    {/if}
-</li>
\ No newline at end of file
+    <slot />
+  </a>
+  {#if multilevel && $$slots.subnav}
+    <ul class="spectrum-SideNav">
+      <slot name="subnav" />
+    </ul>
+  {/if}
+</li>
diff --git a/packages/bbui/src/SideNavigation/Navigation.svelte b/packages/bbui/src/SideNavigation/Navigation.svelte
index 1400f0a508..d4d090ec1f 100644
--- a/packages/bbui/src/SideNavigation/Navigation.svelte
+++ b/packages/bbui/src/SideNavigation/Navigation.svelte
@@ -1,12 +1,12 @@
 <script>
-    import { setContext } from 'svelte'
-    import "@spectrum-css/sidenav/dist/index-vars.css"
-    export let multilevel = false;
-    setContext('sidenav-type', multilevel)
+  import { setContext } from "svelte"
+  import "@spectrum-css/sidenav/dist/index-vars.css"
+  export let multilevel = false
+  setContext("sidenav-type", multilevel)
 </script>
 
 <nav>
   <ul class="spectrum-SideNav" class:spectrum-SideNav--multiLevel={multilevel}>
     <slot />
   </ul>
-</nav>
\ No newline at end of file
+</nav>
diff --git a/packages/bbui/src/Table/AttachmentRenderer.svelte b/packages/bbui/src/Table/AttachmentRenderer.svelte
index ab9760a980..b0c5815641 100644
--- a/packages/bbui/src/Table/AttachmentRenderer.svelte
+++ b/packages/bbui/src/Table/AttachmentRenderer.svelte
@@ -6,7 +6,7 @@
   $: leftover = (value?.length ?? 0) - attachments.length
 
   const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
-  const isImage = extension => {
+  const isImage = (extension) => {
     return imageExtensions.includes(extension?.toLowerCase())
   }
 </script>
diff --git a/packages/bbui/src/Table/BooleanRenderer.svelte b/packages/bbui/src/Table/BooleanRenderer.svelte
index a71e28cb91..4e1aa3b4e1 100644
--- a/packages/bbui/src/Table/BooleanRenderer.svelte
+++ b/packages/bbui/src/Table/BooleanRenderer.svelte
@@ -5,24 +5,28 @@
 </script>
 
 <label
-  class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized">
+  class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized"
+>
   <input
     type="checkbox"
     class="spectrum-Checkbox-input"
     id="checkbox-1"
     disabled
-    checked={!!value} />
+    checked={!!value}
+  />
   <span class="spectrum-Checkbox-box">
     <svg
       class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
       focusable="false"
-      aria-hidden="true">
+      aria-hidden="true"
+    >
       <use xlink:href="#spectrum-css-icon-Checkmark100" />
     </svg>
     <svg
       class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
       focusable="false"
-      aria-hidden="true">
+      aria-hidden="true"
+    >
       <use xlink:href="#spectrum-css-icon-Dash100" />
     </svg>
   </span>
diff --git a/packages/bbui/src/Table/CellRenderer.svelte b/packages/bbui/src/Table/CellRenderer.svelte
index d0323487e1..85234c7243 100644
--- a/packages/bbui/src/Table/CellRenderer.svelte
+++ b/packages/bbui/src/Table/CellRenderer.svelte
@@ -22,11 +22,11 @@
     longform: StringRenderer,
   }
   $: type = schema?.type ?? "string"
-  $: customRenderer = customRenderers?.find(x => x.column === schema?.name)
+  $: customRenderer = customRenderers?.find((x) => x.column === schema?.name)
   $: renderer = customRenderer?.component ?? typeMap[type]
 </script>
 
-{#if renderer && (customRenderer || (value != null && value !== ''))}
+{#if renderer && (customRenderer || (value != null && value !== ""))}
   <svelte:component this={renderer} {row} {schema} {value} on:clickrelationship>
     <slot />
   </svelte:component>
diff --git a/packages/bbui/src/Table/DateTimeRenderer.svelte b/packages/bbui/src/Table/DateTimeRenderer.svelte
index 169adab163..8a06082d58 100644
--- a/packages/bbui/src/Table/DateTimeRenderer.svelte
+++ b/packages/bbui/src/Table/DateTimeRenderer.svelte
@@ -4,7 +4,7 @@
   export let value
 </script>
 
-<div>{dayjs(value).format('MMMM D YYYY, HH:mm')}</div>
+<div>{dayjs(value).format("MMMM D YYYY, HH:mm")}</div>
 
 <style>
   div {
diff --git a/packages/bbui/src/Table/RelationshipRenderer.svelte b/packages/bbui/src/Table/RelationshipRenderer.svelte
index 4db0c63d95..94a7ee5f72 100644
--- a/packages/bbui/src/Table/RelationshipRenderer.svelte
+++ b/packages/bbui/src/Table/RelationshipRenderer.svelte
@@ -12,7 +12,7 @@
   $: relationships = value?.slice(0, displayLimit) ?? []
   $: leftover = (value?.length ?? 0) - relationships.length
 
-  const onClick = e => {
+  const onClick = (e) => {
     e.stopPropagation()
     dispatch("clickrelationship", {
       tableId: row.tableId,
diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index 3c7c224555..8f1272e832 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -31,6 +31,7 @@
   // Table state
   let height = 0
   let loaded = false
+  $: schema = fixSchema(schema)
   $: if (!loading) loaded = true
   $: rows = data ?? []
   $: visibleRowCount = getVisibleRowCount(loaded, height, rows.length, rowCount)
@@ -50,7 +51,7 @@
     rows.length
   )
 
-  // Reset state when data chanegs
+  // Reset state when data changes
   $: data.length, reset()
   const reset = () => {
     nextScrollTop = 0
@@ -59,6 +60,24 @@
     timeout = null
   }
 
+  const fixSchema = (schema) => {
+    let fixedSchema = {}
+    Object.entries(schema || {}).forEach(([fieldName, fieldSchema]) => {
+      if (typeof fieldSchema === "string") {
+        fixedSchema[fieldName] = {
+          type: fieldSchema,
+          name: fieldName,
+        }
+      } else {
+        fixedSchema[fieldName] = {
+          ...fieldSchema,
+          name: fieldName,
+        }
+      }
+    })
+    return fixedSchema
+  }
+
   const getVisibleRowCount = (loaded, height, allRows, rowCount) => {
     if (!loaded) {
       return rowCount || 0
@@ -91,7 +110,7 @@
     })
   }
 
-  const sortBy = fieldSchema => {
+  const sortBy = (fieldSchema) => {
     if (fieldSchema.sortable === false) {
       return
     }
@@ -103,7 +122,7 @@
     }
   }
 
-  const getDisplayName = schema => {
+  const getDisplayName = (schema) => {
     let name = schema?.displayName
     if (schema && name === undefined) {
       name = schema.name
@@ -118,7 +137,6 @@
       if (!field || !fieldSchema) {
         return
       }
-      schema[field].name = field
       if (!fieldSchema?.autocolumn) {
         columns.push(fieldSchema)
       } else if (showAutoColumns) {
@@ -137,10 +155,10 @@
         return nameA < nameB ? a : b
       })
       .concat(autoColumns)
-      .map(column => column.name)
+      .map((column) => column.name)
   }
 
-  const onScroll = event => {
+  const onScroll = (event) => {
     nextScrollTop = event.target.scrollTop
     if (timeout) {
       return
@@ -151,7 +169,7 @@
     }, 50)
   }
 
-  const calculateFirstVisibleRow = scrollTop => {
+  const calculateFirstVisibleRow = (scrollTop) => {
     return Math.max(Math.floor(scrollTop / (rowHeight + 1)) - rowPreload, 0)
   }
 
@@ -172,12 +190,12 @@
     dispatch("editrow", row)
   }
 
-  const toggleSelectRow = row => {
+  const toggleSelectRow = (row) => {
     if (!allowSelectRows) {
       return
     }
     if (selectedRows.includes(row)) {
-      selectedRows = selectedRows.filter(selectedRow => selectedRow !== row)
+      selectedRows = selectedRows.filter((selectedRow) => selectedRow !== row)
     } else {
       selectedRows = [...selectedRows, row]
     }
@@ -192,7 +210,8 @@
       on:scroll={onScroll}
       class:quiet
       style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
-      class="container">
+      class="container"
+    >
       <div style={contentStyle}>
         <table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
           {#if sortedRows?.length}
@@ -201,7 +220,7 @@
                 {#if showEditColumn}
                   <th class="spectrum-Table-headCell">
                     <div class="spectrum-Table-headCell-content">
-                      {editColumnTitle || ''}
+                      {editColumnTitle || ""}
                     </div>
                   </th>
                 {/if}
@@ -209,15 +228,19 @@
                   <th
                     class="spectrum-Table-headCell"
                     class:is-sortable={schema[field].sortable !== false}
-                    class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
-                    class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
-                    on:click={() => sortBy(schema[field])}>
+                    class:is-sorted-desc={sortColumn === field &&
+                      sortOrder === "Descending"}
+                    class:is-sorted-asc={sortColumn === field &&
+                      sortOrder === "Ascending"}
+                    on:click={() => sortBy(schema[field])}
+                  >
                     <div class="spectrum-Table-headCell-content">
                       <div class="title">{getDisplayName(schema[field])}</div>
                       {#if schema[field]?.autocolumn}
                         <svg
                           class="spectrum-Icon spectrum-Table-autoIcon"
-                          focusable="false">
+                          focusable="false"
+                        >
                           <use xlink:href="#spectrum-icon-18-MagicWand" />
                         </svg>
                       {/if}
@@ -225,7 +248,8 @@
                         <svg
                           class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
                           focusable="false"
-                          aria-hidden="true">
+                          aria-hidden="true"
+                        >
                           <use xlink:href="#spectrum-css-icon-Arrow100" />
                         </svg>
                       {/if}
@@ -233,7 +257,8 @@
                         <svg
                           class="spectrum-Icon spectrum-Table-editIcon"
                           focusable="false"
-                          on:click={e => editColumn(e, field)}>
+                          on:click={(e) => editColumn(e, field)}
+                        >
                           <use xlink:href="#spectrum-icon-18-Edit" />
                         </svg>
                       {/if}
@@ -249,33 +274,39 @@
                 <tr
                   on:click={() => toggleSelectRow(row)}
                   class="spectrum-Table-row"
-                  class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}>
+                  class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}
+                >
                   {#if idx >= firstVisibleRow && idx <= lastVisibleRow}
                     {#if showEditColumn}
                       <td
-                        class="spectrum-Table-cell spectrum-Table-cell--divider">
+                        class="spectrum-Table-cell spectrum-Table-cell--divider"
+                      >
                         <div class="spectrum-Table-cell-content">
                           <SelectEditRenderer
                             data={row}
                             selected={selectedRows.includes(row)}
                             onToggleSelection={() => toggleSelectRow(row)}
-                            onEdit={e => editRow(e, row)}
+                            onEdit={(e) => editRow(e, row)}
                             {allowSelectRows}
-                            {allowEditRows} />
+                            {allowEditRows}
+                          />
                         </div>
                       </td>
                     {/if}
                     {#each fields as field}
                       <td
                         class="spectrum-Table-cell"
-                        class:spectrum-Table-cell--divider={!!schema[field].divider}>
+                        class:spectrum-Table-cell--divider={!!schema[field]
+                          .divider}
+                      >
                         <div class="spectrum-Table-cell-content">
                           <CellRenderer
                             {customRenderers}
                             {row}
                             schema={schema[field]}
                             value={row[field]}
-                            on:clickrelationship>
+                            on:clickrelationship
+                          >
                             <slot />
                           </CellRenderer>
                         </div>
@@ -288,7 +319,8 @@
               <div class="placeholder">
                 <svg
                   class="spectrum-Icon spectrum-Icon--sizeXXL"
-                  focusable="false">
+                  focusable="false"
+                >
                   <use xlink:href="#spectrum-icon-18-Table" />
                 </svg>
                 <div>No rows found</div>
diff --git a/packages/bbui/src/Tabs/Tab.svelte b/packages/bbui/src/Tabs/Tab.svelte
index b2637f2784..b0f59c76f0 100644
--- a/packages/bbui/src/Tabs/Tab.svelte
+++ b/packages/bbui/src/Tabs/Tab.svelte
@@ -30,13 +30,15 @@
   on:click={onClick}
   class:is-selected={$selected.title === title}
   class="spectrum-Tabs-item"
-  tabindex="0">
+  tabindex="0"
+>
   {#if icon}
     <svg
       class="spectrum-Icon spectrum-Icon--sizeM"
       focusable="false"
       aria-hidden="true"
-      aria-label="Folder">
+      aria-label="Folder"
+    >
       <use xlink:href="#spectrum-icon-18-{icon}" />
     </svg>
   {/if}
diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte
index 7cd3e50b18..3eddb3dfec 100644
--- a/packages/bbui/src/Tabs/Tabs.svelte
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@@ -44,23 +44,22 @@
   })
 
   function id() {
-    return (
-      "_" +
-      Math.random()
-        .toString(36)
-        .substr(2, 9)
-    )
+    return "_" + Math.random().toString(36).substr(2, 9)
   }
 </script>
 
 <div
   bind:this={container}
-  class="selected-border spectrum-Tabs spectrum-Tabs--{vertical ? 'vertical' : 'horizontal'}">
+  class="selected-border spectrum-Tabs spectrum-Tabs--{vertical
+    ? 'vertical'
+    : 'horizontal'}"
+>
   <slot />
   {#if $tab.info}
     <div
       class="spectrum-Tabs-selectionIndicator indicator-transition"
-      style="width: {width}; height: {height}; left: {left}; top: {top};" />
+      style="width: {width}; height: {height}; left: {left}; top: {top};"
+    />
   {/if}
 </div>
 
diff --git a/packages/bbui/src/Tags/Tag.svelte b/packages/bbui/src/Tags/Tag.svelte
index e186514376..906065cc71 100644
--- a/packages/bbui/src/Tags/Tag.svelte
+++ b/packages/bbui/src/Tags/Tag.svelte
@@ -1,24 +1,34 @@
 <script>
-  import Avatar from '../Avatar/Avatar.svelte'
-  import ClearButton from '../ClearButton/ClearButton.svelte'
-  export let icon = "";
-  export let avatar = "";
-  export let invalid = false;
-  export let disabled = false;
-  export let closable = false;
+  import Avatar from "../Avatar/Avatar.svelte"
+  import ClearButton from "../ClearButton/ClearButton.svelte"
+  export let icon = ""
+  export let avatar = ""
+  export let invalid = false
+  export let disabled = false
+  export let closable = false
 </script>
 
-<div class:is-invalid={invalid} class:is-disabled={disabled} class="spectrum-Tags-item" role="listitem">
+<div
+  class:is-invalid={invalid}
+  class:is-disabled={disabled}
+  class="spectrum-Tags-item"
+  role="listitem"
+>
   {#if avatar}
     <Avatar url={avatar} />
   {/if}
   {#if icon}
-    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Tag">
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeS"
+      focusable="false"
+      aria-hidden="true"
+      aria-label="Tag"
+    >
       <use xlink:href="#spectrum-icon-24-{icon}" />
     </svg>
   {/if}
   <span class="spectrum-Tags-itemLabel"><slot /></span>
   {#if closable}
-     <ClearButton on:click />
+    <ClearButton on:click />
   {/if}
-</div>
\ No newline at end of file
+</div>
diff --git a/packages/bbui/src/Tags/Tags.svelte b/packages/bbui/src/Tags/Tags.svelte
index 8eecc1dbff..36d34507f3 100644
--- a/packages/bbui/src/Tags/Tags.svelte
+++ b/packages/bbui/src/Tags/Tags.svelte
@@ -1,7 +1,7 @@
 <script>
-    import "@spectrum-css/tags/dist/index-vars.css"
+  import "@spectrum-css/tags/dist/index-vars.css"
 </script>
 
 <div class="spectrum-Tags" role="list" aria-label="list">
-    <slot />
-</div>
\ No newline at end of file
+  <slot />
+</div>
diff --git a/packages/bbui/src/TreeView/Item.svelte b/packages/bbui/src/TreeView/Item.svelte
index 1744cd5c8f..ef6b0aa021 100644
--- a/packages/bbui/src/TreeView/Item.svelte
+++ b/packages/bbui/src/TreeView/Item.svelte
@@ -1,28 +1,40 @@
 <script>
-    export let selected = false;
-    export let open = false;
-    export let title;
-    export let icon;
+  export let selected = false
+  export let open = false
+  export let title
+  export let icon
 </script>
 
 <li
-    class:is-selected={selected} class:is-open={open} class="spectrum-TreeView-item">
-        <a on:click class="spectrum-TreeView-itemLink" href="#">
-            {#if $$slots.default}
-                <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Chevron100" />
-                </svg>
-            {/if}
-            {#if icon}
-                <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
-                    <use xlink:href="#spectrum-icon-18-{icon}" />
-                </svg>
-            {/if}
-            <span class="spectrum-TreeView-itemLabel">{title}</span>
-        </a>
-        {#if $$slots.default}
-            <ul class="spectrum-TreeView">
-                <slot />
-            </ul>
-        {/if}
-</li>
\ No newline at end of file
+  class:is-selected={selected}
+  class:is-open={open}
+  class="spectrum-TreeView-item"
+>
+  <a on:click class="spectrum-TreeView-itemLink" href="#">
+    {#if $$slots.default}
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-css-icon-Chevron100" />
+      </svg>
+    {/if}
+    {#if icon}
+      <svg
+        class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM"
+        focusable="false"
+        aria-hidden="true"
+        aria-label="Layers"
+      >
+        <use xlink:href="#spectrum-icon-18-{icon}" />
+      </svg>
+    {/if}
+    <span class="spectrum-TreeView-itemLabel">{title}</span>
+  </a>
+  {#if $$slots.default}
+    <ul class="spectrum-TreeView">
+      <slot />
+    </ul>
+  {/if}
+</li>
diff --git a/packages/bbui/src/TreeView/Tree.svelte b/packages/bbui/src/TreeView/Tree.svelte
index 5a4e254732..cecc357243 100644
--- a/packages/bbui/src/TreeView/Tree.svelte
+++ b/packages/bbui/src/TreeView/Tree.svelte
@@ -1,11 +1,16 @@
 <script>
-    import "@spectrum-css/treeview/dist/index-vars.css"
+  import "@spectrum-css/treeview/dist/index-vars.css"
 
-    export let quiet = false
-    export let standalone = true
-    export let width = '250px';
+  export let quiet = false
+  export let standalone = true
+  export let width = "250px"
 </script>
 
-<ul class:spectrum-TreeView--standalone={standalone} class:spectrum-TreeView--quiet={quiet} class="spectrum-TreeView" style="width: {width}">
-    <slot />
-</ul>
\ No newline at end of file
+<ul
+  class:spectrum-TreeView--standalone={standalone}
+  class:spectrum-TreeView--quiet={quiet}
+  class="spectrum-TreeView"
+  style="width: {width}"
+>
+  <slot />
+</ul>
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 12a4664823..4b9522aab0 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -106,7 +106,7 @@
     "rollup": "^2.44.0",
     "rollup-plugin-copy": "^3.4.0",
     "start-server-and-test": "^1.12.1",
-    "svelte": "^3.36.0",
+    "svelte": "^3.37.0",
     "svelte-jester": "^1.3.2",
     "vite": "^2.1.5"
   },
diff --git a/packages/builder/src/App.svelte b/packages/builder/src/App.svelte
index 507eaaa5de..4ff9b9c835 100644
--- a/packages/builder/src/App.svelte
+++ b/packages/builder/src/App.svelte
@@ -4,7 +4,7 @@
   import { routes } from "../.routify/routes"
   import { initialise } from "builderStore"
   import { NotificationDisplay } from "@budibase/bbui"
-  
+
   onMount(async () => {
     await initialise()
   })
@@ -20,4 +20,4 @@
   .modal-container {
     position: absolute;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 633f56176e..b64318f6e1 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -277,14 +277,23 @@ export const getSchemaForDatasource = (datasource, isForm = false) => {
       schema["_rev"] = { type: "string" }
     }
 
-    // Ensure there are "name" properties for all fields
-    if (schema) {
-      Object.keys(schema).forEach((field) => {
-        if (!schema[field].name) {
-          schema[field].name = field
+    // Ensure there are "name" properties for all fields and that field schema
+    // are objects
+    let fixedSchema = {}
+    Object.entries(schema || {}).forEach(([fieldName, fieldSchema]) => {
+      if (typeof fieldSchema === "string") {
+        fixedSchema[fieldName] = {
+          type: fieldSchema,
+          name: fieldName,
         }
-      })
-    }
+      } else {
+        fixedSchema[fieldName] = {
+          ...fieldSchema,
+          name: fieldName,
+        }
+      }
+    })
+    schema = fixedSchema
   }
   return { schema, table }
 }
diff --git a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
index 62faff3caa..380cb29acf 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
@@ -6,7 +6,7 @@
   $: automation = $automationStore.selectedAutomation?.automation
 
   function onSelect(block) {
-    automationStore.update(state => {
+    automationStore.update((state) => {
       state.selectedBlock = block
       return state
     })
diff --git a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
index 4e6a0d9c18..b0cd610611 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
@@ -33,7 +33,7 @@
   let webhookModal
   $: selectedTab = selectedIndex == null ? null : tabs[selectedIndex].value
   $: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
-  $: blocks = sortBy(entry => entry[1].name)(
+  $: blocks = sortBy((entry) => entry[1].name)(
     Object.entries($automationStore.blockDefinitions[selectedTab] ?? {})
   )
 
@@ -63,13 +63,14 @@
 
 <div class="tab-container">
   {#each tabs as tab, idx}
-  <div bind:this={anchors[idx]}>
-    <ActionButton
-      quiet
-      size="S"
-      icon={tab.icon}
-      disabled={tab.disabled}
-      on:click={tab.disabled ? null : () => onChangeTab(idx)}>
+    <div bind:this={anchors[idx]}>
+      <ActionButton
+        quiet
+        size="S"
+        icon={tab.icon}
+        disabled={tab.disabled}
+        on:click={tab.disabled ? null : () => onChangeTab(idx)}
+      >
         {tab.label}
       </ActionButton>
     </div>
@@ -79,14 +80,16 @@
   on:close={() => (selectedIndex = null)}
   bind:this={popover}
   {anchor}
-  align="left">
+  align="left"
+>
   <DropdownContainer>
     {#each blocks as [stepId, blockDefinition]}
       <DropdownItem
         icon={blockDefinition.icon}
         title={blockDefinition.name}
         subtitle={blockDefinition.description}
-        on:click={() => addBlockToAutomation(stepId, blockDefinition)} />
+        on:click={() => addBlockToAutomation(stepId, blockDefinition)}
+      />
     {/each}
   </DropdownContainer>
 </Popover>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte
index 0e0c6bb83a..931490b197 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte
@@ -3,10 +3,12 @@
   height="75"
   viewBox="0 0 9 75"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <path
     d="M5.0625 70H9L4.5 75L0 70H3.9375V65H5.0625V70Z"
-    fill="var(--grey-5)" />
+    fill="var(--grey-5)"
+  />
   <rect x="4" width="1" height="65" fill="var(--grey-5)" />
 </svg>
 
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte
index 48cd1dacc3..bf12a20c00 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte
@@ -16,7 +16,7 @@
     const tableId = inputs.tableId || inputs.row?.tableId
     if (tableId) {
       enrichedInputs.enriched.table = $tables.list.find(
-        table => table._id === tableId
+        (table) => table._id === tableId
       )
     }
     return enrichedInputs
@@ -30,8 +30,8 @@
 
     // Extract schema paths for any input bindings
     let inputPaths = formattedTagline.match(/{{\s*\S+\s*}}/g) || []
-    inputPaths = inputPaths.map(path => path.replace(/[{}]/g, "").trim())
-    const schemaPaths = inputPaths.map(path =>
+    inputPaths = inputPaths.map((path) => path.replace(/[{}]/g, "").trim())
+    const schemaPaths = inputPaths.map((path) =>
       path.replace(/\./g, ".properties.")
     )
 
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index 48bafb8cd3..e960271b87 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -26,7 +26,8 @@
       class="block"
       animate:flip={{ duration: 600 }}
       in:fade|local
-      out:fly|local={{ x: 100 }}>
+      out:fly|local={{ x: 100 }}
+    >
       <FlowItem {onSelect} {block} />
       {#if idx !== blocks.length - 1}
         <Arrow />
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index a385ad1307..2113d5e4b9 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -10,11 +10,11 @@
   $: selected = $automationStore.selectedBlock?.id === block.id
   $: steps =
     $automationStore.selectedAutomation?.automation?.definition?.steps ?? []
-  $: blockIdx = steps.findIndex(step => step.id === block.id)
+  $: blockIdx = steps.findIndex((step) => step.id === block.id)
   $: allowDeleteTrigger = !steps.length
 
   function deleteStep() {
-    console.log('Running')
+    console.log("Running")
     automationStore.actions.deleteAutomationBlock(block)
   }
 </script>
@@ -22,23 +22,24 @@
 <div
   class={`block ${block.type} hoverable`}
   class:selected
-  on:click={() => onSelect(block)}>
+  on:click={() => onSelect(block)}
+>
   <header>
-    {#if block.type === 'TRIGGER'}
+    {#if block.type === "TRIGGER"}
       <Icon name="Light" />
       <span>When this happens...</span>
-    {:else if block.type === 'ACTION'}
+    {:else if block.type === "ACTION"}
       <Icon name="FlashOn" />
       <span>Do this...</span>
-    {:else if block.type === 'LOGIC'}
+    {:else if block.type === "LOGIC"}
       <Icon name="Branch2" />
       <span>Only continue if...</span>
     {/if}
     <div class="label">
-      {#if block.type === 'TRIGGER'}Trigger{:else}Step {blockIdx + 1}{/if}
+      {#if block.type === "TRIGGER"}Trigger{:else}Step {blockIdx + 1}{/if}
     </div>
-    {#if block.type !== 'TRIGGER' || allowDeleteTrigger}
-    <div on:click|stopPropagation={deleteStep}><Icon name="Close"/></div>
+    {#if block.type !== "TRIGGER" || allowDeleteTrigger}
+      <div on:click|stopPropagation={deleteStep}><Icon name="Close" /></div>
     {/if}
   </header>
   <hr />
diff --git a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
index d91937b812..7a83c8357b 100644
--- a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
@@ -27,12 +27,14 @@
   confirmText="Create"
   size="L"
   onConfirm={createAutomation}
-  disabled={!valid}>
+  disabled={!valid}
+>
   <Input bind:value={name} label="Name" />
   <a
     slot="footer"
     target="_blank"
-    href="https://docs.budibase.com/automate/introduction-to-automate">
+    href="https://docs.budibase.com/automate/introduction-to-automate"
+  >
     <Icon name="InfoOutline" />
     <span>Learn about automations</span>
   </a>
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index e096ccb85a..d4c9f560be 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -27,7 +27,7 @@
     if (automation.trigger) {
       allSteps = [automation.trigger, ...allSteps]
     }
-    const blockIdx = allSteps.findIndex(step => step.id === block.id)
+    const blockIdx = allSteps.findIndex((step) => step.id === block.id)
 
     // Extract all outputs from all previous steps as available bindings
     let bindings = []
@@ -54,40 +54,43 @@
   {#each inputs as [key, value]}
     <div class="block-field">
       <Label>{value.title}</Label>
-      {#if value.type === 'string' && value.enum}
+      {#if value.type === "string" && value.enum}
         <Select
           bind:value={block.inputs[key]}
           options={value.enum}
-          getOptionLabel={(x, idx) => (value.pretty ? value.pretty[idx] : x)} />
-      {:else if value.customType === 'password'}
+          getOptionLabel={(x, idx) => (value.pretty ? value.pretty[idx] : x)}
+        />
+      {:else if value.customType === "password"}
         <Input type="password" bind:value={block.inputs[key]} />
-      {:else if value.customType === 'email'}
+      {:else if value.customType === "email"}
         <DrawerBindableInput
           panel={AutomationBindingPanel}
-          type={'email'}
+          type={"email"}
           value={block.inputs[key]}
-          on:change={e => (block.inputs[key] = e.detail)}
-          {bindings} />
-      {:else if value.customType === 'table'}
+          on:change={(e) => (block.inputs[key] = e.detail)}
+          {bindings}
+        />
+      {:else if value.customType === "table"}
         <TableSelector bind:value={block.inputs[key]} />
-      {:else if value.customType === 'row'}
+      {:else if value.customType === "row"}
         <RowSelector bind:value={block.inputs[key]} {bindings} />
-      {:else if value.customType === 'webhookUrl'}
+      {:else if value.customType === "webhookUrl"}
         <WebhookDisplay value={block.inputs[key]} />
-      {:else if value.customType === 'triggerSchema'}
+      {:else if value.customType === "triggerSchema"}
         <SchemaSetup bind:value={block.inputs[key]} />
-      {:else if value.type === 'string' || value.type === 'number'}
+      {:else if value.type === "string" || value.type === "number"}
         <DrawerBindableInput
           panel={AutomationBindingPanel}
           type={value.customType}
           value={block.inputs[key]}
-          on:change={e => (block.inputs[key] = e.detail)}
-          {bindings} />
+          on:change={(e) => (block.inputs[key] = e.detail)}
+          {bindings}
+        />
       {/if}
     </div>
   {/each}
 </div>
-{#if stepId === 'WEBHOOK'}
+{#if stepId === "WEBHOOK"}
   <Button secondary on:click={() => webhookModal.show()}>Set Up Webhook</Button>
 {/if}
 
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index 064a4665d9..23c293d102 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -7,7 +7,7 @@
   export let value
   export let bindings
 
-  $: table = $tables.list.find(table => table._id === value?.tableId)
+  $: table = $tables.list.find((table) => table._id === value?.tableId)
   $: schemaFields = Object.entries(table?.schema ?? {})
 
   // Ensure any nullish tableId values get set to empty string so
@@ -22,8 +22,9 @@
 <Select
   bind:value={value.tableId}
   options={$tables.list}
-  getOptionLabel={table => table.name}
-  getOptionValue={table => table._id} />
+  getOptionLabel={(table) => table.name}
+  getOptionValue={(table) => table._id}
+/>
 
 {#if schemaFields.length}
   <div class="schema-fields">
@@ -33,15 +34,17 @@
           <Select
             label={field}
             bind:value={value[field]}
-            options={schema.constraints.inclusion} />
-        {:else if schema.type === 'string' || schema.type === 'number'}
+            options={schema.constraints.inclusion}
+          />
+        {:else if schema.type === "string" || schema.type === "number"}
           <DrawerBindableInput
             panel={AutomationBindingPanel}
             value={value[field]}
-            on:change={e => (value[field] = e.detail)}
+            on:change={(e) => (value[field] = e.detail)}
             label={field}
             type="string"
-            {bindings} />
+            {bindings}
+          />
         {/if}
       {/if}
     {/each}
diff --git a/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte b/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
index 2793342962..f2522d70c1 100644
--- a/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
@@ -37,14 +37,14 @@
     value = newValues
   }
 
-  const fieldNameChanged = originalName => e => {
+  const fieldNameChanged = (originalName) => (e) => {
     // reconstruct using fieldsArray, so field order is preserved
     let entries = [...fieldsArray]
     const newName = e.detail
     if (newName) {
-      entries.find(f => f.name === originalName).name = newName
+      entries.find((f) => f.name === originalName).name = newName
     } else {
-      entries = entries.filter(f => f.name !== originalName)
+      entries = entries.filter((f) => f.name !== originalName)
     }
     value = entries.reduce((newVals, current) => {
       newVals[current.name] = current.type
@@ -62,14 +62,17 @@
         value={field.name}
         secondary
         placeholder="Enter field name"
-        on:change={fieldNameChanged(field.name)} />
+        on:change={fieldNameChanged(field.name)}
+      />
       <Select
         value={field.type}
-        on:change={e => (value[field.name] = e.target.value)}
-        options={typeOptions} />
+        on:change={(e) => (value[field.name] = e.target.value)}
+        options={typeOptions}
+      />
       <i
         class="remove-field ri-delete-bin-line"
-        on:click={() => removeField(field.name)} />
+        on:click={() => removeField(field.name)}
+      />
     </div>
   {/each}
 </div>
diff --git a/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
index 35e6a9855f..c0c80e8444 100644
--- a/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
@@ -8,5 +8,6 @@
 <Select
   bind:value
   options={$tables.list}
-  getOptionLabel={table => table.name}
-  getOptionValue={table => table._id} />
+  getOptionLabel={(table) => table.name}
+  getOptionValue={(table) => table._id}
+/>
diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte
index 53d1efb330..6c021ded3e 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@@ -30,7 +30,7 @@
     if ($views.selected?.name?.startsWith("all_")) {
       loading = true
       const loadingTableId = $tables.selected?._id
-      api.fetchDataForView($views.selected).then(rows => {
+      api.fetchDataForView($views.selected).then((rows) => {
         loading = false
 
         // If we started a slow request then quickly change table, sometimes
@@ -53,12 +53,14 @@
   {data}
   allowEditing={true}
   bind:hideAutocolumns
-  {loading}>
+  {loading}
+>
   <CreateColumnButton />
   {#if schema && Object.keys(schema).length > 0}
     <CreateRowButton
-      title={isUsersTable ? 'Create user' : 'Create row'}
-      modalContentComponent={isUsersTable ? CreateEditUser : CreateEditRow} />
+      title={isUsersTable ? "Create user" : "Create row"}
+      modalContentComponent={isUsersTable ? CreateEditUser : CreateEditRow}
+    />
     <CreateViewButton />
     <ManageAccessButton resourceId={$tables.selected?._id} />
     {#if isUsersTable}
diff --git a/packages/builder/src/components/backend/DataTable/RelationshipDataTable.svelte b/packages/builder/src/components/backend/DataTable/RelationshipDataTable.svelte
index 635a509e50..21501c6723 100644
--- a/packages/builder/src/components/backend/DataTable/RelationshipDataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/RelationshipDataTable.svelte
@@ -12,9 +12,9 @@
 
   $: data = row?.[fieldName] ?? []
   $: linkedTableId = data?.length ? data[0].tableId : null
-  $: linkedTable = $tables.list.find(table => table._id === linkedTableId)
+  $: linkedTable = $tables.list.find((table) => table._id === linkedTableId)
   $: schema = linkedTable?.schema
-  $: table = $tables.list.find(table => table._id === tableId)
+  $: table = $tables.list.find((table) => table._id === tableId)
   $: fetchData(tableId, rowId)
   $: {
     let rowLabel = row?.[table?.primaryDisplay]
diff --git a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
index 7f160600ba..46c77d6411 100644
--- a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
+++ b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
@@ -13,21 +13,22 @@
   $: label = capitalise(meta.name)
 </script>
 
-{#if type === 'options'}
+{#if type === "options"}
   <Select
     {label}
     data-cy="{meta.name}-select"
     bind:value
-    options={meta.constraints.inclusion} />
-{:else if type === 'datetime'}
+    options={meta.constraints.inclusion}
+  />
+{:else if type === "datetime"}
   <DatePicker {label} bind:value />
-{:else if type === 'attachment'}
+{:else if type === "attachment"}
   <Dropzone {label} bind:value />
-{:else if type === 'boolean'}
+{:else if type === "boolean"}
   <Toggle text={label} bind:checked={value} data-cy="{meta.name}-input" />
-{:else if type === 'link'}
+{:else if type === "link"}
   <LinkedRowSelector bind:linkedRows={value} schema={meta} />
-{:else if type === 'longform'}
+{:else if type === "longform"}
   <TextArea {label} bind:value />
 {:else}
   <Input
@@ -35,5 +36,6 @@
     data-cy="{meta.name}-input"
     {type}
     bind:value
-    disabled={readonly} />
+    disabled={readonly}
+  />
 {/if}
diff --git a/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
index 1001e98ed3..95fdc23559 100644
--- a/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
@@ -28,9 +28,9 @@
 
   async function fetchViewData(name, field, groupBy, calculation) {
     const _tables = $tables.list
-    const allTableViews = _tables.map(table => table.views)
+    const allTableViews = _tables.map((table) => table.views)
     const thisView = allTableViews.filter(
-      views => views != null && views[name] != null
+      (views) => views != null && views[name] != null
     )[0]
     // don't fetch view data if the view no longer exists
     if (!thisView) {
@@ -58,7 +58,8 @@
   {data}
   {loading}
   allowEditing={!view?.calculation}
-  bind:hideAutocolumns>
+  bind:hideAutocolumns
+>
   <FilterButton {view} />
   <CalculateButton {view} />
   {#if view.calculation}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
index 7316b1c69c..7145171ee1 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
@@ -12,7 +12,8 @@
   size="S"
   quiet
   on:click={modal.show}
-  active={view.field && view.calculation}>
+  active={view.field && view.calculation}
+>
   Calculate
 </ActionButton>
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
index 18bbef6122..c17b7e82df 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
@@ -22,8 +22,9 @@
   bind:this={modal}
   okText="Delete"
   onOk={confirmDeletion}
-  title="Confirm Deletion">
+  title="Confirm Deletion"
+>
   Are you sure you want to delete
   {selectedRows.length}
-  row{selectedRows.length > 1 ? 's' : ''}?
+  row{selectedRows.length > 1 ? "s" : ""}?
 </ConfirmDialog>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
index e93c355404..2e2026baed 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
@@ -12,7 +12,8 @@
   size="S"
   quiet
   on:click={modal.show}
-  active={view.filters?.length}>
+  active={view.filters?.length}
+>
   Filter
 </ActionButton>
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
index e3fff01c9d..309dd9922b 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
@@ -13,7 +13,8 @@
   size="S"
   quiet
   active={!!view.groupBy}
-  on:click={modal.show}>
+  on:click={modal.show}
+>
   Group By
 </Button>
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
index 38dfcbf26a..7a9e582c2d 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
@@ -21,5 +21,6 @@
   <ManageAccessModal
     {resourceId}
     levels={$permissions}
-    permissions={resourcePermissions} />
+    permissions={resourcePermissions}
+  />
 </Modal>
diff --git a/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte b/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte
index 4b4ce1622b..e8756854d0 100644
--- a/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte
+++ b/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte
@@ -3,7 +3,7 @@
 
   export let value
 
-  $: role = $roles.find(role => role._id === value)
+  $: role = $roles.find((role) => role._id === value)
   $: roleName = role?.name ?? "Unknown role"
 </script>
 
diff --git a/packages/builder/src/components/backend/DataTable/modals/CalculateModal.svelte b/packages/builder/src/components/backend/DataTable/modals/CalculateModal.svelte
index 3eec950edb..91c783c4c7 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CalculateModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CalculateModal.svelte
@@ -25,7 +25,7 @@
   $: fields =
     viewTable &&
     Object.keys(viewTable.schema).filter(
-      field =>
+      (field) =>
         view.calculation === "count" ||
         // don't want to perform calculations based on auto ID
         (viewTable.schema[field].type === "number" &&
@@ -43,14 +43,16 @@
   title="Calculate"
   confirmText="Save"
   onConfirm={saveView}
-  disabled={!view.field}>
+  disabled={!view.field}
+>
   <div class="input-group-row">
     <Label>The</Label>
     <Select
       bind:value={view.calculation}
       options={CALCULATIONS}
-      getOptionLabel={x => x.name}
-      getOptionValue={x => x.key} />
+      getOptionLabel={(x) => x.name}
+      getOptionValue={(x) => x.key}
+    />
     {#if view.calculation}
       <Label>Of</Label>
       <Select bind:value={view.field} options={fields} />
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 1c3700c169..01c24b5f11 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -49,7 +49,7 @@
   let deletion
 
   $: tableOptions = $tables.list.filter(
-    table => table._id !== $tables.draft._id
+    (table) => table._id !== $tables.draft._id
   )
   $: required = !!field?.constraints?.presence || primaryDisplay
   $: uneditable =
@@ -60,7 +60,7 @@
     !field.name ||
     (field.type === LINK_TYPE && !field.tableId) ||
     Object.keys($tables.draft?.schema ?? {}).some(
-      key => key !== originalName && key === field.name
+      (key) => key !== originalName && key === field.name
     )
 
   // used to select what different options can be displayed for column type
@@ -154,7 +154,7 @@
     if (!field || !field.tableId) {
       return null
     }
-    const linkTable = tableOptions.find(table => table._id === field.tableId)
+    const linkTable = tableOptions.find((table) => table._id === field.tableId)
     if (!linkTable) {
       return null
     }
@@ -181,10 +181,11 @@
 </script>
 
 <ModalContent
-  title={originalName ? 'Edit Column' : 'Create Column'}
+  title={originalName ? "Edit Column" : "Create Column"}
   confirmText="Save Column"
   onConfirm={saveColumn}
-  disabled={invalid}>
+  disabled={invalid}
+>
   <Input label="Name" bind:value={field.name} disabled={uneditable} />
 
   <Select
@@ -192,9 +193,13 @@
     label="Type"
     bind:value={field.type}
     on:change={handleTypeChange}
-    options={[...Object.values(fieldDefinitions), { name: 'Auto Column', type: AUTO_COL }]}
-    getOptionLabel={field => field.name}
-    getOptionValue={field => field.type} />
+    options={[
+      ...Object.values(fieldDefinitions),
+      { name: "Auto Column", type: AUTO_COL },
+    ]}
+    getOptionLabel={(field) => field.name}
+    getOptionValue={(field) => field.type}
+  />
 
   {#if canBeRequired || canBeDisplay}
     <div>
@@ -204,14 +209,16 @@
           on:change={onChangeRequired}
           disabled={primaryDisplay}
           thin
-          text="Required" />
+          text="Required"
+        />
       {/if}
       {#if canBeDisplay}
         <Toggle
           bind:value={primaryDisplay}
           on:change={onChangePrimaryDisplay}
           thin
-          text="Use as table display column" />
+          text="Use as table display column"
+        />
       {/if}
     </div>
   {/if}
@@ -223,63 +230,73 @@
         value={indexes[0] === field.name}
         disabled={indexes[1] === field.name}
         on:change={onChangePrimaryIndex}
-        text="Primary" />
+        text="Primary"
+      />
       <Toggle
         value={indexes[1] === field.name}
         disabled={!indexes[0] || indexes[0] === field.name}
         on:change={onChangeSecondaryIndex}
-        text="Secondary" />
+        text="Secondary"
+      />
     </div>
   {/if}
 
-  {#if field.type === 'string'}
+  {#if field.type === "string"}
     <Input
       type="number"
       label="Max Length"
-      bind:value={field.constraints.length.maximum} />
-  {:else if field.type === 'options'}
+      bind:value={field.constraints.length.maximum}
+    />
+  {:else if field.type === "options"}
     <ValuesList
       label="Options (one per line)"
-      bind:values={field.constraints.inclusion} />
-  {:else if field.type === 'datetime'}
+      bind:values={field.constraints.inclusion}
+    />
+  {:else if field.type === "datetime"}
     <DatePicker
       label="Earliest"
-      bind:value={field.constraints.datetime.earliest} />
+      bind:value={field.constraints.datetime.earliest}
+    />
     <DatePicker label="Latest" bind:value={field.constraints.datetime.latest} />
-  {:else if field.type === 'number'}
+  {:else if field.type === "number"}
     <Input
       type="number"
       label="Min Value"
-      bind:value={field.constraints.numericality.greaterThanOrEqualTo} />
+      bind:value={field.constraints.numericality.greaterThanOrEqualTo}
+    />
     <Input
       type="number"
       label="Max Value"
-      bind:value={field.constraints.numericality.lessThanOrEqualTo} />
-  {:else if field.type === 'link'}
+      bind:value={field.constraints.numericality.lessThanOrEqualTo}
+    />
+  {:else if field.type === "link"}
     <Select
       label="Table"
       bind:value={field.tableId}
       options={tableOptions}
-      getOptionLabel={table => table.name}
-      getOptionValue={table => table._id} />
+      getOptionLabel={(table) => table.name}
+      getOptionValue={(table) => table._id}
+    />
     {#if relationshipOptions && relationshipOptions.length > 0}
       <RadioGroup
         disabled={originalName}
         label="Define the relationship"
         bind:value={field.relationshipType}
         options={relationshipOptions}
-        getOptionLabel={option => option.name}
-        getOptionValue={option => option.value} />
+        getOptionLabel={(option) => option.name}
+        getOptionValue={(option) => option.value}
+      />
     {/if}
     <Input label={`Column name in other table`} bind:value={field.fieldName} />
   {:else if field.type === AUTO_COL}
     <Select
       label="Auto Column Type"
       value={field.subtype}
-      on:change={e => (field.subtype = e.detail)}
+      on:change={(e) => (field.subtype = e.detail)}
       options={Object.entries(getAutoColumnInformation())}
-      getOptionLabel={option => option[1].name}
-      getOptionValue={option => option[0]} />
+      getOptionLabel={(option) => option[1].name}
+      getOptionValue={(option) => option[0]}
+    />
   {/if}
 
   <div slot="footer">
@@ -294,4 +311,5 @@
   okText="Delete Column"
   onOk={deleteColumn}
   onCancel={hideDeleteDialog}
-  title="Confirm Deletion" />
+  title="Confirm Deletion"
+/>
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
index 98b858836f..27978335a7 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
@@ -12,7 +12,7 @@
 
   $: creating = row?._id == null
   $: table = row.tableId
-    ? $tables.list.find(table => table._id === row?.tableId)
+    ? $tables.list.find((table) => table._id === row?.tableId)
     : $tables.selected
   $: tableSchema = Object.entries(table?.schema ?? {})
 
@@ -39,9 +39,10 @@
 </script>
 
 <ModalContent
-  title={creating ? 'Create Row' : 'Edit Row'}
-  confirmText={creating ? 'Create Row' : 'Save Row'}
-  onConfirm={saveRow}>
+  title={creating ? "Create Row" : "Edit Row"}
+  confirmText={creating ? "Create Row" : "Save Row"}
+  onConfirm={saveRow}
+>
   <ErrorsBox {errors} />
   {#each tableSchema as [key, meta]}
     {#if !meta.autocolumn}
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
index bfead2ade5..330ee9326a 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
@@ -13,13 +13,13 @@
 
   $: creating = row?._id == null
   $: table = row.tableId
-    ? $tables.list.find(table => table._id === row?.tableId)
+    ? $tables.list.find((table) => table._id === row?.tableId)
     : $tables.selected
   $: tableSchema = getUserSchema(table)
   $: customSchemaKeys = getCustomSchemaKeys(tableSchema)
   $: if (!row.status) row.status = "active"
 
-  const getUserSchema = table => {
+  const getUserSchema = (table) => {
     let schema = table?.schema ?? {}
     if (schema.username) {
       schema.username.name = "Username"
@@ -27,7 +27,7 @@
     return schema
   }
 
-  const getCustomSchemaKeys = schema => {
+  const getCustomSchemaKeys = (schema) => {
     let customSchema = { ...schema }
     delete customSchema["email"]
     delete customSchema["roleId"]
@@ -55,7 +55,7 @@
     )
     if (rowResponse.errors) {
       if (Array.isArray(rowResponse.errors)) {
-        errors = rowResponse.errors.map(error => ({ message: error }))
+        errors = rowResponse.errors.map((error) => ({ message: error }))
       } else {
         errors = Object.entries(rowResponse.errors)
           .map(([key, error]) => ({ dataPath: key, message: error }))
@@ -73,17 +73,20 @@
 </script>
 
 <ModalContent
-  title={creating ? 'Create User' : 'Edit User'}
-  confirmText={creating ? 'Create User' : 'Save User'}
-  onConfirm={saveRow}>
+  title={creating ? "Create User" : "Edit User"}
+  confirmText={creating ? "Create User" : "Save User"}
+  onConfirm={saveRow}
+>
   <ErrorsBox {errors} />
   <RowFieldControl
-    meta={{ ...tableSchema.email, name: 'Email' }}
+    meta={{ ...tableSchema.email, name: "Email" }}
     bind:value={row.email}
-    readonly={!creating} />
+    readonly={!creating}
+  />
   <RowFieldControl
-    meta={{ name: 'password', type: 'password' }}
-    bind:value={row.password} />
+    meta={{ name: "password", type: "password" }}
+    bind:value={row.password}
+  />
   <!-- Defer rendering this select until roles load, otherwise the initial
        selection is always undefined -->
   <Select
@@ -91,14 +94,19 @@
     data-cy="roleId-select"
     bind:value={row.roleId}
     options={$roles}
-    getOptionLabel={role => role.name}
-    getOptionValue={role => role._id} />
+    getOptionLabel={(role) => role.name}
+    getOptionValue={(role) => role._id}
+  />
   <Select
     label="Status"
     bind:value={row.status}
-    options={[{ label: 'Active', value: 'active' }, { label: 'Inactive', value: 'inactive' }]}
-    getOptionLabel={status => status.label}
-    getOptionValue={status => status.value} />
+    options={[
+      { label: "Active", value: "active" },
+      { label: "Inactive", value: "inactive" },
+    ]}
+    getOptionLabel={(status) => status.label}
+    getOptionValue={(status) => status.value}
+  />
   {#each customSchemaKeys as [key, meta]}
     {#if !meta.autocolumn}
       <RowFieldControl {meta} bind:value={row[key]} {creating} />
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateViewModal.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateViewModal.svelte
index d70b51f4c5..9d370c983a 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateViewModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateViewModal.svelte
@@ -10,7 +10,7 @@
   let name
   let field
 
-  $: views = $tables.list.flatMap(table => Object.keys(table.views || {}))
+  $: views = $tables.list.flatMap((table) => Object.keys(table.views || {}))
 
   function saveView() {
     if (views.includes(name)) {
@@ -31,6 +31,7 @@
 <ModalContent
   title="Create View"
   confirmText="Create View"
-  onConfirm={saveView}>
+  onConfirm={saveView}
+>
   <Input label="View Name" thin bind:value={name} />
 </ModalContent>
diff --git a/packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte b/packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte
index 5cf33f8d3d..c803c06373 100644
--- a/packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte
@@ -11,7 +11,7 @@
   let errors = []
   let builtInRoles = ["Admin", "Power", "Basic", "Public"]
   $: selectedRoleId = selectedRole._id
-  $: otherRoles = $roles.filter(role => role._id !== selectedRoleId)
+  $: otherRoles = $roles.filter((role) => role._id !== selectedRoleId)
   $: isCreating = selectedRoleId == null || selectedRoleId === ""
 
   const fetchBasePermissions = async () => {
@@ -20,9 +20,9 @@
   }
 
   // Changes the selected role
-  const changeRole = event => {
+  const changeRole = (event) => {
     const id = event?.detail
-    const role = $roles.find(role => role._id === id)
+    const role = $roles.find((role) => role._id === id)
     if (role) {
       selectedRole = {
         ...role,
@@ -41,7 +41,7 @@
 
     // Clean up empty strings
     const keys = ["_id", "inherits", "permissionId"]
-    keys.forEach(key => {
+    keys.forEach((key) => {
       if (selectedRole[key] === "") {
         delete selectedRole[key]
       }
@@ -84,8 +84,9 @@
 
 <ModalContent
   title="Edit Roles"
-  confirmText={isCreating ? 'Create' : 'Save'}
-  onConfirm={saveRole}>
+  confirmText={isCreating ? "Create" : "Save"}
+  onConfirm={saveRole}
+>
   {#if errors.length}
     <ErrorsBox {errors} />
   {/if}
@@ -97,27 +98,31 @@
     on:change={changeRole}
     options={$roles}
     placeholder="Create new role"
-    getOptionValue={role => role._id}
-    getOptionLabel={role => role.name} />
+    getOptionValue={(role) => role._id}
+    getOptionLabel={(role) => role.name}
+  />
   {#if selectedRole}
     <Input
       label="Name"
       bind:value={selectedRole.name}
-      disabled={builtInRoles.includes(selectedRole.name)} />
+      disabled={builtInRoles.includes(selectedRole.name)}
+    />
     <Select
       label="Inherits Role"
       bind:value={selectedRole.inherits}
       options={otherRoles}
-      getOptionValue={role => role._id}
-      getOptionLabel={role => role.name}
-      placeholder="None" />
+      getOptionValue={(role) => role._id}
+      getOptionLabel={(role) => role.name}
+      placeholder="None"
+    />
     <Select
       label="Base Permissions"
       bind:value={selectedRole.permissionId}
       options={basePermissions}
-      getOptionValue={x => x._id}
-      getOptionLabel={x => x.name}
-      placeholder="Choose permissions" />
+      getOptionValue={(x) => x._id}
+      getOptionLabel={(x) => x.name}
+      placeholder="Choose permissions"
+    />
   {/if}
   <div slot="footer">
     {#if !isCreating}
diff --git a/packages/builder/src/components/backend/DataTable/modals/ExportModal.svelte b/packages/builder/src/components/backend/DataTable/modals/ExportModal.svelte
index 0344b3a925..9f194c589a 100644
--- a/packages/builder/src/components/backend/DataTable/modals/ExportModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/ExportModal.svelte
@@ -32,6 +32,7 @@
     bind:value={exportFormat}
     options={FORMATS}
     placeholder={null}
-    getOptionLabel={x => x.name}
-    getOptionValue={x => x.key} />
+    getOptionLabel={(x) => x.name}
+    getOptionValue={(x) => x.key}
+  />
 </ModalContent>
diff --git a/packages/builder/src/components/backend/DataTable/modals/GroupByModal.svelte b/packages/builder/src/components/backend/DataTable/modals/GroupByModal.svelte
index 5eab472c01..a0c6f380a2 100644
--- a/packages/builder/src/components/backend/DataTable/modals/GroupByModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/GroupByModal.svelte
@@ -10,7 +10,7 @@
   $: fields =
     viewTable &&
     Object.entries(viewTable.schema)
-      .filter(entry => entry[1].type !== FIELDS.LINK.type)
+      .filter((entry) => entry[1].type !== FIELDS.LINK.type)
       .map(([key]) => key)
 
   function saveView() {
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/Airtable.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/Airtable.svelte
index ce689df205..33e6908214 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/Airtable.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/Airtable.svelte
@@ -8,14 +8,16 @@
   {height}
   viewBox="0 0 256 215"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <g clip-path="url(#clip0)">
     <path
       d="M114.259 2.701L18.86 42.176C13.555 44.371 13.61 51.906 18.949
       54.023L114.746 92.012C123.163 95.3503 132.537 95.3503 140.954
       92.012L236.753 54.022C242.09 51.907 242.146 44.372 236.839 42.176L141.442
       2.7C132.739 -0.901099 122.962 -0.901099 114.259 2.7"
-      fill="#FFBF00" />
+      fill="#FFBF00"
+    />
     <path
       d="M136.35 112.757V207.659C136.35 212.173 140.9 215.264 145.096
       213.601L251.844 172.166C253.034 171.694 254.056 170.875 254.775
@@ -23,20 +25,23 @@
       66.808 251.328 63.718 247.132 65.381L140.384 106.815C139.194 107.287
       138.172 108.106 137.453 109.166C136.734 110.225 136.349 111.476 136.349
       112.757"
-      fill="#26B5F8" />
+      fill="#26B5F8"
+    />
     <path
       d="M111.423 117.654L79.743 132.95L76.526 134.505L9.65 166.548C5.411
       168.593 0 165.504 0 160.795V71.72C0 70.016 0.874 68.545 2.046
       67.437C2.52616 66.9592 3.07076 66.5509 3.664 66.224C5.262 65.265 7.542
       65.009 9.48 65.776L110.89 105.956C116.045 108.001 116.45 115.224 111.423
       117.653"
-      fill="#ED3049" />
+      fill="#ED3049"
+    />
     <path
       d="M111.423 117.654L79.743 132.95L2.045 67.438C2.52516 66.9602 3.06976
       66.5519 3.663 66.225C5.261 65.266 7.541 65.01 9.479 65.777L110.889
       105.957C116.044 108.002 116.449 115.225 111.422 117.654"
       fill="black"
-      fill-opacity="0.25" />
+      fill-opacity="0.25"
+    />
   </g>
   <defs>
     <clipPath id="clip0">
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/ArangoDB.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/ArangoDB.svelte
index d305c08af0..c4b772ed41 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/ArangoDB.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/ArangoDB.svelte
@@ -11,31 +11,38 @@
   y="0px"
   {width}
   {height}
-  viewBox="0 0 2900 2000">
+  viewBox="0 0 2900 2000"
+>
   <g id="layer101">
     <path
       fill="#5b350f"
-      d="M735 1983 c-137 -19 -322 -95 -431 -175 -138 -103 -250 -315 -284 -542 -24 -161 22 -298 129 -382 123 -97 318 -180 577 -243 l130 -32 29 -67 c41 -94 135 -231 199 -289 292 -267 732 -319 1094 -128 148 79 224 151 418 400 137 176 173 242 228 414 41 130 70 301 70 416 0 236 -146 421 -382 484 -206 56 -392 19 -733 -144 -96 -47 -181 -85 -189 -85 -7 0 -61 46 -119 103 -163 159 -283 231 -433 261 -71 15 -229 19 -303 9z" />
+      d="M735 1983 c-137 -19 -322 -95 -431 -175 -138 -103 -250 -315 -284 -542 -24 -161 22 -298 129 -382 123 -97 318 -180 577 -243 l130 -32 29 -67 c41 -94 135 -231 199 -289 292 -267 732 -319 1094 -128 148 79 224 151 418 400 137 176 173 242 228 414 41 130 70 301 70 416 0 236 -146 421 -382 484 -206 56 -392 19 -733 -144 -96 -47 -181 -85 -189 -85 -7 0 -61 46 -119 103 -163 159 -283 231 -433 261 -71 15 -229 19 -303 9z"
+    />
   </g>
   <g id="layer102">
     <path
       fill="#406f23"
-      d="M735 1983 c-137 -19 -322 -95 -431 -175 -138 -103 -250 -315 -284 -542 -24 -161 22 -298 129 -382 123 -97 318 -180 577 -243 l130 -32 29 -67 c41 -94 135 -231 199 -289 292 -267 732 -319 1094 -128 148 79 224 151 418 400 137 176 173 242 228 414 41 130 70 301 70 416 0 236 -146 421 -382 484 -206 56 -392 19 -733 -144 -96 -47 -181 -85 -189 -85 -7 0 -61 46 -119 103 -163 159 -283 231 -433 261 -71 15 -229 19 -303 9z m460 -643 c163 -51 296 -150 329 -246 23 -69 20 -93 -20 -174 -51 -100 -126 -173 -238 -230 l-89 -45 -131 0 c-151 0 -222 18 -323 84 -138 89 -243 264 -243 406 0 62 12 76 120 134 160 85 229 102 405 96 87 -2 139 -9 190 -25z" />
+      d="M735 1983 c-137 -19 -322 -95 -431 -175 -138 -103 -250 -315 -284 -542 -24 -161 22 -298 129 -382 123 -97 318 -180 577 -243 l130 -32 29 -67 c41 -94 135 -231 199 -289 292 -267 732 -319 1094 -128 148 79 224 151 418 400 137 176 173 242 228 414 41 130 70 301 70 416 0 236 -146 421 -382 484 -206 56 -392 19 -733 -144 -96 -47 -181 -85 -189 -85 -7 0 -61 46 -119 103 -163 159 -283 231 -433 261 -71 15 -229 19 -303 9z m460 -643 c163 -51 296 -150 329 -246 23 -69 20 -93 -20 -174 -51 -100 -126 -173 -238 -230 l-89 -45 -131 0 c-151 0 -222 18 -323 84 -138 89 -243 264 -243 406 0 62 12 76 120 134 160 85 229 102 405 96 87 -2 139 -9 190 -25z"
+    />
   </g>
   <g id="layer103">
     <path
       fill="#c6d821"
-      d="M2215 1789 c-27 -4 -68 -15 -90 -23 -42 -15 -264 -116 -397 -180 l-77 -38 78 -102 c102 -134 144 -208 175 -305 37 -116 49 -200 44 -309 -7 -157 -46 -218 -175 -278 -94 -44 -178 -56 -313 -43 -108 10 -401 53 -479 70 -24 5 -45 8 -47 6 -2 -2 20 -44 49 -92 67 -115 176 -225 281 -284 87 -49 235 -103 335 -121 91 -16 253 -14 346 5 175 37 269 95 419 264 307 347 422 563 457 859 18 148 9 247 -29 325 -88 179 -340 286 -577 246z" />
+      d="M2215 1789 c-27 -4 -68 -15 -90 -23 -42 -15 -264 -116 -397 -180 l-77 -38 78 -102 c102 -134 144 -208 175 -305 37 -116 49 -200 44 -309 -7 -157 -46 -218 -175 -278 -94 -44 -178 -56 -313 -43 -108 10 -401 53 -479 70 -24 5 -45 8 -47 6 -2 -2 20 -44 49 -92 67 -115 176 -225 281 -284 87 -49 235 -103 335 -121 91 -16 253 -14 346 5 175 37 269 95 419 264 307 347 422 563 457 859 18 148 9 247 -29 325 -88 179 -340 286 -577 246z"
+    />
     <path
       fill="#c6d821"
-      d="M549 1680 c-272 -34 -426 -142 -495 -346 -22 -68 -26 -91 -22 -164 6 -115 32 -173 112 -248 70 -65 236 -153 370 -196 241 -79 722 -172 985 -192 180 -14 343 55 404 170 34 64 30 168 -11 271 -88 223 -245 373 -568 542 -222 116 -379 161 -584 168 -69 2 -155 0 -191 -5z m646 -340 c163 -51 296 -150 329 -246 23 -69 20 -93 -20 -174 -50 -100 -126 -173 -235 -229 -84 -42 -90 -44 -200 -48 -190 -8 -312 37 -434 161 -98 99 -155 221 -155 331 0 62 12 76 120 134 160 85 229 102 405 96 87 -2 139 -9 190 -25z" />
+      d="M549 1680 c-272 -34 -426 -142 -495 -346 -22 -68 -26 -91 -22 -164 6 -115 32 -173 112 -248 70 -65 236 -153 370 -196 241 -79 722 -172 985 -192 180 -14 343 55 404 170 34 64 30 168 -11 271 -88 223 -245 373 -568 542 -222 116 -379 161 -584 168 -69 2 -155 0 -191 -5z m646 -340 c163 -51 296 -150 329 -246 23 -69 20 -93 -20 -174 -50 -100 -126 -173 -235 -229 -84 -42 -90 -44 -200 -48 -190 -8 -312 37 -434 161 -98 99 -155 221 -155 331 0 62 12 76 120 134 160 85 229 102 405 96 87 -2 139 -9 190 -25z"
+    />
   </g>
   <g id="layer104">
     <path
       fill="#f6f654"
-      d="M2190 1721 c-57 -19 -469 -184 -494 -198 -12 -7 -5 -21 34 -72 28 -35 71 -96 97 -137 l46 -74 69 0 c38 0 83 -6 102 -14 52 -22 105 -75 139 -140 28 -55 32 -70 32 -147 0 -84 -2 -90 -48 -183 -96 -187 -234 -296 -376 -296 -44 0 -80 7 -110 20 -28 13 -65 20 -105 20 -72 0 -264 22 -426 49 -63 10 -117 17 -118 15 -10 -8 59 -113 110 -169 106 -115 238 -183 448 -231 155 -35 313 -29 447 17 78 27 210 117 279 191 82 89 277 353 336 456 92 159 137 344 125 513 -9 117 -37 189 -101 258 -109 116 -332 172 -486 122z" />
+      d="M2190 1721 c-57 -19 -469 -184 -494 -198 -12 -7 -5 -21 34 -72 28 -35 71 -96 97 -137 l46 -74 69 0 c38 0 83 -6 102 -14 52 -22 105 -75 139 -140 28 -55 32 -70 32 -147 0 -84 -2 -90 -48 -183 -96 -187 -234 -296 -376 -296 -44 0 -80 7 -110 20 -28 13 -65 20 -105 20 -72 0 -264 22 -426 49 -63 10 -117 17 -118 15 -10 -8 59 -113 110 -169 106 -115 238 -183 448 -231 155 -35 313 -29 447 17 78 27 210 117 279 191 82 89 277 353 336 456 92 159 137 344 125 513 -9 117 -37 189 -101 258 -109 116 -332 172 -486 122z"
+    />
     <path
       fill="#f6f654"
-      d="M490 1624 c-153 -33 -275 -125 -339 -257 -54 -109 -59 -201 -17 -301 32 -76 164 -189 288 -245 51 -23 260 -91 281 -91 3 0 -21 25 -54 56 -94 91 -150 193 -170 313 -14 90 1 111 123 172 161 81 195 91 343 96 111 5 143 2 215 -16 221 -55 380 -192 380 -327 0 -52 -46 -143 -106 -212 -75 -85 -233 -170 -323 -173 -25 -1 -25 -1 4 -10 140 -43 411 -62 527 -38 142 30 238 125 238 234 0 88 -58 230 -139 337 -105 139 -431 343 -676 423 -161 52 -429 71 -575 39z" />
+      d="M490 1624 c-153 -33 -275 -125 -339 -257 -54 -109 -59 -201 -17 -301 32 -76 164 -189 288 -245 51 -23 260 -91 281 -91 3 0 -21 25 -54 56 -94 91 -150 193 -170 313 -14 90 1 111 123 172 161 81 195 91 343 96 111 5 143 2 215 -16 221 -55 380 -192 380 -327 0 -52 -46 -143 -106 -212 -75 -85 -233 -170 -323 -173 -25 -1 -25 -1 4 -10 140 -43 411 -62 527 -38 142 30 238 125 238 234 0 88 -58 230 -139 337 -105 139 -431 343 -676 423 -161 52 -429 71 -575 39z"
+    />
   </g>
 </svg>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/CouchDB.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/CouchDB.svelte
index 1ed737fc81..9d449bd2c0 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/CouchDB.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/CouchDB.svelte
@@ -8,7 +8,8 @@
   {height}
   viewBox="0 0 175 115"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <path
     d="M142.187 76.6667C142.187 83.9288 138.367 87.4876 131.249
     87.6136V87.6184H43.7507V87.6136C36.6331 87.4876 32.8132 83.9288 32.8132
@@ -31,5 +32,6 @@
     54.703 38.5444 60.0403 49.2194 60.2292V60.2381H125.782V60.2299C136.456
     60.0416 142.187 54.7037 142.187 43.8109C142.187 32.9174 147.918 27.5795
     158.593 27.3912V27.381H158.594Z"
-    fill="#E42528" />
+    fill="#E42528"
+  />
 </svg>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/DynamoDB.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/DynamoDB.svelte
index 1ec061ca20..d06cb87deb 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/DynamoDB.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/DynamoDB.svelte
@@ -8,16 +8,19 @@
   {height}
   viewBox="0 0 256 289"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <g clip-path="url(#clip0)">
     <path
       d="M165.258 288.501H168.766L226.027 259.867L226.98 258.52V29.964L226.027
       28.61L168.766 0H165.215L165.258 288.501Z"
-      fill="#5294CF" />
+      fill="#5294CF"
+    />
     <path
       d="M90.741 288.501H87.184L29.972 259.867L28.811 257.87L28.222
       31.128L29.972 28.61L87.184 0H90.785L90.741 288.501Z"
-      fill="#1F5B98" />
+      fill="#1F5B98"
+    />
     <path d="M87.285 0H168.711V288.501H87.285V0Z" fill="#2D72B8" />
     <path
       d="M256 137.769L254.065 137.34L226.437 134.764L226.027 134.968L168.715
@@ -33,22 +36,27 @@
       210.584V210.6H87.285V210.584L29.972 197.325V153.461L87.285
       155.745V155.801H168.715L226.027 153.461L227.332 154.061L254.111
       151.755L256 150.832L247.096 150.704V137.897L256 137.769"
-      fill="#1A476F" />
+      fill="#1A476F"
+    />
     <path
       d="M226.027 215.966V259.867L256 224.749V194.288L226.2 215.914L226.027
       215.966Z"
-      fill="#2D72B8" />
+      fill="#2D72B8"
+    />
     <path
       d="M226.027 197.421L226.2 197.381L256 181.353V150.704L226.027
       153.461V197.421"
-      fill="#2D72B8" />
+      fill="#2D72B8"
+    />
     <path
       d="M226.2 91.208L226.027 91.168V134.968L256 137.769V107.135L226.2 91.208Z"
-      fill="#2D72B8" />
+      fill="#2D72B8"
+    />
     <path
       d="M226.2 72.687L256 94.193V63.731L226.027 28.61V72.515L226.2
       72.575V72.687Z"
-      fill="#2D72B8" />
+      fill="#2D72B8"
+    />
   </g>
   <defs>
     <clipPath id="clip0">
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/Elasticsearch.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/Elasticsearch.svelte
index 20df3bd620..f06733d11b 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/Elasticsearch.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/Elasticsearch.svelte
@@ -8,36 +8,43 @@
   {height}
   viewBox="0 0 128 143"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <g clip-path="url(#clip0)">
     <path
       d="M7.172 40.0865H101.775C112.201 40.0865 121.51 35.3065 127.757
       27.843C114.727 10.918 94.2765 0 71.265 0C43.089 0 18.738 16.3555 7.172
       40.0865Z"
-      fill="#F0BF1A" />
+      fill="#F0BF1A"
+    />
     <path
       d="M93.7575 51.222H2.8775C0.969102 57.732 0.000154178 64.4811 0 71.265C0
       78.227 1.0165 84.9485 2.8775 91.3085H93.7575C104.67 91.3085 113.801
       82.4005 113.801 71.265C113.801 60.13 104.893 51.222 93.7575 51.222"
-      fill="#07A5DE" />
+      fill="#07A5DE"
+    />
     <path
       d="M128 114.378C121.793 107.082 112.559 102.443 102.22
       102.443H7.173C18.7385 126.175 43.0895 142.53 71.265 142.53C94.418 142.53
       114.983 131.482 128 114.378Z"
-      fill="#3EBEB0" />
+      fill="#3EBEB0"
+    />
     <path
       d="M2.87749 51.222C-0.959651 64.3087 -0.959651 78.2218 2.87749
       91.3085H62.357C63.916 85.2955 64.8065 78.6145 64.8065 71.265C64.8065
       63.916 63.916 57.235 62.3565 51.222H2.87849H2.87749Z"
-      fill="#231F20" />
+      fill="#231F20"
+    />
     <path
       d="M35.41 9.5765C23.3835 16.703 13.362 27.3925 7.1265
       40.0865H59.6845C54.3395 27.838 45.877 17.594 35.4095 9.5765"
-      fill="#D7A229" />
+      fill="#D7A229"
+    />
     <path
       d="M37.637 134.068C47.881 125.828 56.121 114.915 61.2435
       102.443H7.1265C13.8075 115.806 24.4975 126.941 37.637 134.068Z"
-      fill="#019B8F" />
+      fill="#019B8F"
+    />
   </g>
   <defs>
     <clipPath id="clip0">
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/MongoDB.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/MongoDB.svelte
index 823ec3a2fa..2d9ab079a4 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/MongoDB.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/MongoDB.svelte
@@ -8,31 +8,36 @@
   {height}
   viewBox="0 0 179 179"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <path
     d="M153.828 30.7656H101.806L90.0594
     54.2594H24.6125V148.234H165.575V30.7656H153.828ZM153.828
     54.2594H107.959L114.112 42.5125H153.828V54.2594Z"
-    fill="#458248" />
+    fill="#458248"
+  />
   <path
     d="M149.773 173.406L146.623 172.36C146.623 172.36 147.026 156.412 141.276
     155.299C137.483 150.903 141.835 -32.4046 155.635 154.673C153.015 156 151.011
     158.289 150.041 161.061C149.521 165.155 149.431 169.293 149.773
     173.406V173.406Z"
-    fill="url(#paint0_linear)" />
+    fill="url(#paint0_linear)"
+  />
   <path
     d="M151.473 158.007C159.86 151.69 166.283 143.124 169.994 133.302C173.705
     123.48 174.553 112.807 172.439 102.522C166.285 75.3142 151.68 66.3698
     150.108 62.9577C148.75 60.8316 147.591 58.5845 146.646 56.2452L147.809
     132.052C147.809 132.052 145.398 155.215 151.473 158.007Z"
-    fill="url(#paint1_linear)" />
+    fill="url(#paint1_linear)"
+  />
   <path
     d="M145.018 159.014C145.018 159.014 119.337 141.522 120.825 110.583C120.964
     101.255 123.102 92.0662 127.096 83.636C131.091 75.2058 136.847 67.7308
     143.978 61.7158C144.809 61.0059 145.469 60.1177 145.91 59.1173C146.351
     58.1169 146.56 57.03 146.523 55.9375C148.123 59.3777 147.86 107.299 148.027
     112.904C148.682 134.709 146.819 154.897 145.018 159.014V159.014Z"
-    fill="url(#paint2_linear)" />
+    fill="url(#paint2_linear)"
+  />
   <defs>
     <linearGradient
       id="paint0_linear"
@@ -40,7 +45,8 @@
       y1="115.729"
       x2="164.805"
       y2="128.016"
-      gradientUnits="userSpaceOnUse">
+      gradientUnits="userSpaceOnUse"
+    >
       <stop offset="0.231" stop-color="#999875" />
       <stop offset="0.563" stop-color="#9B9977" />
       <stop offset="0.683" stop-color="#A09F7E" />
@@ -57,7 +63,8 @@
       y1="55.7038"
       x2="157.883"
       y2="155.673"
-      gradientUnits="userSpaceOnUse">
+      gradientUnits="userSpaceOnUse"
+    >
       <stop stop-color="#48A547" />
       <stop offset="1" stop-color="#3F9143" />
     </linearGradient>
@@ -67,7 +74,8 @@
       y1="113.645"
       x2="161.577"
       y2="99.2572"
-      gradientUnits="userSpaceOnUse">
+      gradientUnits="userSpaceOnUse"
+    >
       <stop stop-color="#41A247" />
       <stop offset="0.352" stop-color="#4BA74B" />
       <stop offset="0.956" stop-color="#67B554" />
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/MySQL.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/MySQL.svelte
index d2e612e7e3..3501e2ca74 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/MySQL.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/MySQL.svelte
@@ -8,12 +8,14 @@
   {height}
   viewBox="0 0 147 147"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <path
     d="M128.244 27.5625H83.3444L74.1569
     45.9375H22.9688V124.031H137.812V27.5625H128.244ZM128.625
     45.9375H92.7478L97.5621 36.75H128.625V45.9375Z"
-    fill="#2A4B59" />
+    fill="#2A4B59"
+  />
   <path
     fill-rule="evenodd"
     clip-rule="evenodd"
@@ -23,7 +25,8 @@
     73.4258 75.6415 72.917 75.8825 72.3379C76.1234 71.7589 76.2141 71.1283
     76.146 70.5048C75.8564 70.0602 75.5911 69.6001 75.3513 69.1267C74.9562
     68.4652 74.0926 68.1345 73.5597 67.6062"
-    fill="white" />
+    fill="white"
+  />
   <path
     fill-rule="evenodd"
     clip-rule="evenodd"
@@ -79,5 +82,6 @@
     114.951 109.408 116.856 112.175C117.848 113.553 121.822 114.293 123.609
     115.023C125.17 115.557 126.703 116.17 128.202 116.86C130.453 118.239 132.7
     119.842 134.822 121.367C135.879 122.162 139.191 123.815 139.388 125.143"
-    fill="#F3FDFF" />
+    fill="#F3FDFF"
+  />
 </svg>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/Postgres.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/Postgres.svelte
index 56268f75b3..016e9c5667 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/Postgres.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/Postgres.svelte
@@ -8,7 +8,8 @@
   {height}
   viewBox="0 0 170 175"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <path
     d="M169.341 104.792C168.322 101.71 165.652 99.5637 162.199 99.0487C160.57
     98.8061 158.706 98.9095 156.499 99.3635C152.653 100.156 149.799 100.457
@@ -32,7 +33,8 @@
     134.335 126.893 134.386 126.453L134.492 125.551L135.685 125.655L135.993
     125.676C142.635 125.978 150.756 124.572 155.744 122.259C159.685 120.434
     172.315 113.778 169.341 104.792"
-    fill="black" />
+    fill="black"
+  />
   <path
     d="M157.984 106.539C138.235 110.606 136.877 103.931 136.877 103.931C157.729
     73.046 166.446 33.8413 158.924 24.2462C138.402 -1.92761 102.878 10.451
@@ -50,21 +52,24 @@
     130.43C128.417 120.001 127.363 116.636 134.573 118.201L136.326
     118.355C141.632 118.596 148.578 117.503 152.655 115.611C161.432 111.545
     166.639 104.755 157.983 106.539H157.984"
-    fill="#336791" />
+    fill="#336791"
+  />
   <path
     d="M71.7692 54.0412C69.9895 53.7939 68.3778 54.0226 67.5623 54.6391C67.1041
     54.9858 66.962 55.3875 66.9235 55.6639C66.8212 56.3964 67.3352 57.2064
     67.6513 57.624C68.5452 58.8066 69.8507 59.6193 71.143 59.7983C71.3302
     59.8248 71.5168 59.8367 71.7021 59.8367C73.857 59.8367 75.8167 58.1616
     75.9893 56.9254C76.2051 55.3769 73.9533 54.3448 71.7692 54.0418"
-    fill="white" />
+    fill="white"
+  />
   <path
     d="M130.727 54.0902C130.557 52.8765 128.394 52.5305 126.341 52.8155C124.29
     53.1006 122.302 54.0246 122.468 55.241C122.601 56.1869 124.312 57.8017
     126.337 57.8017C126.509 57.8017 126.681 57.7904 126.855 57.7659C128.207
     57.579 129.199 56.7219 129.671 56.228C130.388 55.475 130.804 54.6358 130.727
     54.0902"
-    fill="white" />
+    fill="white"
+  />
   <path
     d="M164.556 106.077C163.803 103.804 161.379 103.073 157.352 103.903C145.396
     106.366 141.114 104.66 139.708 103.627C149.002 89.494 156.647 72.4103
@@ -145,5 +150,6 @@
     136.156 107.46 136.491 107.343C136.699 107.512 136.926 107.68 137.176
     107.844C141.168 110.475 148.289 110.758 158.342 108.687L158.453
     108.665C157.097 109.931 154.776 111.629 151.487 113.154Z"
-    fill="white" />
+    fill="white"
+  />
 </svg>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/Rest.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/Rest.svelte
index f4c8863fd4..4d12638603 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/Rest.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/Rest.svelte
@@ -8,12 +8,14 @@
   {height}
   viewBox="0 0 120 120"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <path
     d="M103.125 20.625H68.25L60.375
     36.375H16.5V99.375H111V20.625H103.125ZM103.125 36.375H72.375L76.5
     28.5H103.125V36.375Z"
-    fill="#FFBA58" />
+    fill="#FFBA58"
+  />
   <path
     d="M75 46.875V52.5H60C58.0127 52.5059 56.1085 53.298 54.7033 54.7033C53.298
     56.1085 52.5059 58.0127 52.5 60V75H46.875C44.3886 75 42.004 75.9877 40.2459
@@ -32,5 +34,6 @@
     44.3886 92.7623 42.004 91.0041 40.2459C89.246 38.4877 86.8614 37.5 84.375
     37.5C81.8886 37.5 79.504 38.4877 77.7459 40.2459C75.9877 42.004 75 44.3886
     75 46.875Z"
-    fill="#E76A00" />
+    fill="#E76A00"
+  />
 </svg>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/S3.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/S3.svelte
index 23168a3501..0173e717e2 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/S3.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/S3.svelte
@@ -8,48 +8,61 @@
   {height}
   viewBox="0 0 128 155"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <path
     d="M10.312 26.843L0 32V122.51L10.312 127.637L10.374 127.562V26.914L10.312
     26.843Z"
-    fill="#8C3123" />
+    fill="#8C3123"
+  />
   <path
     d="M65.5 114.5L10.312 127.637V26.843L65.5 39.6935V114.5Z"
-    fill="#E05243" />
+    fill="#E05243"
+  />
   <path
     d="M40.589 93.933L63.998 96.913L64.145 96.574L64.2765 58.189L63.998
     57.889L40.589 60.826V93.933"
-    fill="#8C3123" />
+    fill="#8C3123"
+  />
   <path
     d="M63.998 114.647L117.683 127.665L117.768 127.53L117.766 26.933L117.681
     26.843L63.998 39.841V114.647"
-    fill="#8C3123" />
+    fill="#8C3123"
+  />
   <path
     d="M87.4135 93.933L63.998 96.913V57.889L87.4135 60.826V93.933Z"
-    fill="#E05243" />
+    fill="#E05243"
+  />
   <path
     d="M87.4135 44.8155L63.998 49.083L40.589 44.8155L63.9685 38.6875L87.4135
     44.8155Z"
-    fill="#5E1F18" />
+    fill="#5E1F18"
+  />
   <path
     d="M87.4135 109.901L63.998 105.605L40.589 109.901L63.9695 116.427L87.4135
     109.901Z"
-    fill="#F2B0A9" />
+    fill="#F2B0A9"
+  />
   <path
     d="M40.589 44.8155L63.998 39.0225L64.1875 38.964V0.1565L63.998 0L40.589
     11.7065V44.8155Z"
-    fill="#8C3123" />
+    fill="#8C3123"
+  />
   <path
     d="M87.4135 44.8155L63.998 39.0225V0L87.4135 11.7065V44.8155Z"
-    fill="#E05243" />
+    fill="#E05243"
+  />
   <path
     d="M63.998 154.714L40.5865 143.012V109.903L63.998 115.694L64.3425
     116.086L64.249 154.039L63.998 154.714Z"
-    fill="#8C3123" />
+    fill="#8C3123"
+  />
   <path
     d="M63.998 154.714L87.4115 143.012V109.903L63.998 115.694V154.714"
-    fill="#E05243" />
+    fill="#E05243"
+  />
   <path
     d="M117.684 26.843L128 32V122.51L117.684 127.665V26.843Z"
-    fill="#E05243" />
+    fill="#E05243"
+  />
 </svg>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/SQLServer.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/SQLServer.svelte
index 6aa2fcafca..5bc3a8e061 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/SQLServer.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/SQLServer.svelte
@@ -7,7 +7,8 @@
   {width}
   {height}
   xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 1478.201 1195.111">
+  viewBox="0 0 1478.201 1195.111"
+>
   <g transform="matrix(.569 0 0 .569 199.451 -82.735)">
     <linearGradient
       id="a"
@@ -16,7 +17,8 @@
       y1="923.573"
       x2="-2061.249"
       y2="1420.331"
-      gradientTransform="matrix(.1234 0 0 -.1234 1158.33 1550.273)">
+      gradientTransform="matrix(.1234 0 0 -.1234 1158.33 1550.273)"
+    >
       <stop offset="0" stop-color="#909ca9" />
       <stop offset="1" stop-color="#ededee" />
     </linearGradient>
@@ -107,7 +109,8 @@
       99.755-47.06 130.547-2.815 6.939-3.896 8.677-5.417
       8.456-3.687-.213-54.646-7.37-85.66-11.925-53.994-8.24-144.641-24.073-167.409-29.275l-5.204-1.083
       32.307-7.378c69.396-15.613 102.791-24.069 136.619-34.478 42.722-13.011
-      85.011-29.276 127.729-49.225 6.722-3.037 12.361-5.422 13.879-5.639z" />
+      85.011-29.276 127.729-49.225 6.722-3.037 12.361-5.422 13.879-5.639z"
+    />
     <linearGradient
       id="b"
       gradientUnits="userSpaceOnUse"
@@ -115,7 +118,8 @@
       y1="10288.81"
       x2="-2206.249"
       y2="10288.81"
-      gradientTransform="matrix(.1234 0 0 -.1234 1158.33 1550.273)">
+      gradientTransform="matrix(.1234 0 0 -.1234 1158.33 1550.273)"
+    >
       <stop offset="0" stop-color="#939fab" />
       <stop offset="1" stop-color="#dcdee1" />
     </linearGradient>
@@ -142,14 +146,16 @@
       4.552 7.806 7.373 16.263 30.364 60.07 35.997 68.526 1.74 2.822 4.771
       3.038-25.802-1.95-73.512-11.93-97.152-15.829-97.152-16.263 0-.216
       2.169-1.735 4.988-3.254 22.771-12.575 45.756-28.624 66.142-45.756
-      4.988-4.121 9.542-8.024 10.407-8.676.216-.433.652-.649.868-.433z" />
+      4.988-4.121 9.542-8.024 10.407-8.676.216-.433.652-.649.868-.433z"
+    />
     <radialGradient
       id="c"
       cx="-14217.448"
       cy="7277.705"
       r="898.12"
       gradientTransform="matrix(-.1185 -.0178 -.036 .237 -198.955 -1314.415)"
-      gradientUnits="userSpaceOnUse">
+      gradientUnits="userSpaceOnUse"
+    >
       <stop offset="0" stop-color="#ee352c" />
       <stop offset="1" stop-color="#a91d22" />
     </radialGradient>
@@ -241,7 +247,8 @@
       45.971-41.853 42.723-83.273 76.12-134.669 108.649-6.505 4.119-12.359
       7.804-13.011 8.24-1.519.867.432-1.303 22.986-25.808 14.314-15.397
       25.155-28.408 37.516-44.453 8.24-10.624 9.759-12.143 21.688-20.604
-      31.878-22.987 105.39-72.864 106.258-71.995z" />
+      31.878-22.987 105.39-72.864 106.258-71.995z"
+    />
   </g>
   <path
     fill="#231F1F"
@@ -387,5 +394,6 @@
     18.172h1.301l8.152-18.347c.219-.563.393-1.301.76-2.275-.174 1.887-.174
     3.401-.174 4.553v16.048h2.82V792.52h-3.406l-7.371 16.438c-.174.587-.762
     1.734-1.129
-    3.037h-.217c-.152-.761-.541-1.519-1.084-2.818l-7.373-16.655h-3.816v23.854h2.666v-15.917l.152-.023z" />
+    3.037h-.217c-.152-.761-.541-1.519-1.084-2.818l-7.373-16.655h-3.816v23.854h2.666v-15.917l.152-.023z"
+  />
 </svg>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
index 8f5d4012fc..1dc751d6b6 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
@@ -14,7 +14,9 @@
   function checkValid(evt) {
     const datasourceName = evt.target.value
     if (
-      $datasources?.list.some(datasource => datasource.name === datasourceName)
+      $datasources?.list.some(
+        (datasource) => datasource.name === datasourceName
+      )
     ) {
       error = `Datasource with name ${datasourceName} already exists. Please choose another name.`
       return
@@ -44,13 +46,15 @@
   size="large"
   confirmText="Create"
   onConfirm={saveDatasource}
-  disabled={error || !name}>
+  disabled={error || !name}
+>
   <Input
     data-cy="datasource-name-input"
     label="Datasource Name"
     on:input={checkValid}
     bind:value={name}
-    {error} />
+    {error}
+  />
   <Label>Datasource Type</Label>
   <TableIntegrationMenu bind:integration />
 </ModalContent>
diff --git a/packages/builder/src/components/backend/TableNavigator/ListItem.svelte b/packages/builder/src/components/backend/TableNavigator/ListItem.svelte
index f148eaf8b2..aa94297977 100644
--- a/packages/builder/src/components/backend/TableNavigator/ListItem.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/ListItem.svelte
@@ -11,7 +11,8 @@
   class:indented
   class:selected
   on:click
-  class={className}>
+  class={className}
+>
   <i class={icon} />
   <span>{title}</span>
   <slot />
diff --git a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
index 3335428b9d..9bec1f696d 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
@@ -18,7 +18,7 @@
   let schema = {}
   let fields = []
 
-  $: valid = !schema || fields.every(column => schema[column].success)
+  $: valid = !schema || fields.every((column) => schema[column].success)
   $: dataImport = {
     valid,
     schema: buildTableSchema(schema),
@@ -51,7 +51,7 @@
     const parseResult = await response.json()
     schema = parseResult && parseResult.schema
     fields = Object.keys(schema || {}).filter(
-      key => schema[key].type !== "omit"
+      (key) => schema[key].type !== "omit"
     )
 
     // Check primary display is valid
@@ -67,17 +67,18 @@
 
   async function handleFile(evt) {
     const fileArray = Array.from(evt.target.files)
-    if (fileArray.some(file => file.size >= FILE_SIZE_LIMIT)) {
+    if (fileArray.some((file) => file.size >= FILE_SIZE_LIMIT)) {
       notifications.error(
-        `Files cannot exceed ${FILE_SIZE_LIMIT /
-          BYTES_IN_MB}MB. Please try again with smaller files.`
+        `Files cannot exceed ${
+          FILE_SIZE_LIMIT / BYTES_IN_MB
+        }MB. Please try again with smaller files.`
       )
       return
     }
 
     // Read CSV as plain text to upload alongside schema
     let reader = new FileReader()
-    reader.addEventListener("load", function(e) {
+    reader.addEventListener("load", function (e) {
       csvString = e.target.result
       files = fileArray
       validateCSV()
@@ -90,7 +91,7 @@
     await validateCSV()
   }
 
-  const handleTypeChange = column => evt => {
+  const handleTypeChange = (column) => (evt) => {
     schema[column].type = evt.detail
     validateCSV()
   }
@@ -127,14 +128,16 @@
           on:change={handleTypeChange(columnName)}
           options={typeOptions}
           placeholder={null}
-          getOptionLabel={option => option.label}
-          getOptionValue={option => option.value} />
+          getOptionLabel={(option) => option.label}
+          getOptionValue={(option) => option.value}
+        />
         <span class="field-status" class:error={!schema[columnName].success}>
-          {schema[columnName].success ? 'Success' : 'Failure'}
+          {schema[columnName].success ? "Success" : "Failure"}
         </span>
         <i
           class="omit-button ri-close-circle-fill"
-          on:click={() => omitColumn(columnName)} />
+          on:click={() => omitColumn(columnName)}
+        />
       </div>
     {/each}
   </div>
@@ -145,7 +148,8 @@
     <Select
       label="Display Column"
       bind:value={primaryDisplay}
-      options={fields} />
+      options={fields}
+    />
   </div>
 {/if}
 
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
index beb435f69f..fa8733a8b3 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@@ -34,10 +34,11 @@
     {#each $tables.list as table, idx}
       <NavItem
         border={idx > 0}
-        icon={table._id === TableNames.USERS ? 'UserGroup' : 'Table'}
+        icon={table._id === TableNames.USERS ? "UserGroup" : "Table"}
         text={table.name}
         selected={selectedView === `all_${table._id}`}
-        on:click={() => selectTable(table)}>
+        on:click={() => selectTable(table)}
+      >
         {#if table._id !== TableNames.USERS}
           <EditTablePopover {table} />
         {/if}
@@ -48,9 +49,11 @@
           icon="Remove"
           text={viewName}
           selected={selectedView === viewName}
-          on:click={() => onClickView(table, viewName)}>
+          on:click={() => onClickView(table, viewName)}
+        >
           <EditViewPopover
-            view={{ name: viewName, ...table.views[viewName] }} />
+            view={{ name: viewName, ...table.views[viewName] }}
+          />
         </NavItem>
       {/each}
     {/each}
diff --git a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
index 4462eb8099..b207e7a756 100644
--- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
@@ -18,7 +18,7 @@
     ROW_LIST_TEMPLATE,
   ]
 
-  $: tableNames = $tables.list.map(table => table.name)
+  $: tableNames = $tables.list.map((table) => table.name)
 
   let modal
   let name
@@ -66,8 +66,8 @@
     // Create auto screens
     if (createAutoscreens) {
       const screens = screenTemplates($store, [table])
-        .filter(template => defaultScreens.includes(template.id))
-        .map(template => template.create())
+        .filter((template) => defaultScreens.includes(template.id))
+        .map((template) => template.create())
       for (let screen of screens) {
         // Record the table that created this screen so we can link it later
         screen.autoTableId = table._id
@@ -75,7 +75,7 @@
       }
 
       // Create autolink to newly created list screen
-      const listScreen = screens.find(screen =>
+      const listScreen = screens.find((screen) =>
         screen.props._instanceName.endsWith("List")
       )
       await store.actions.components.links.save(
@@ -93,14 +93,16 @@
   title="Create Table"
   confirmText="Create"
   onConfirm={saveTable}
-  disabled={error || !name || (dataImport && !dataImport.valid)}>
+  disabled={error || !name || (dataImport && !dataImport.valid)}
+>
   <Input
     data-cy="table-name-input"
     thin
     label="Table Name"
     on:input={checkValid}
     bind:value={name}
-    {error} />
+    {error}
+  />
   <div class="autocolumns">
     <Label extraSmall grey>Auto Columns</Label>
     <div class="toggles">
@@ -118,7 +120,8 @@
   </div>
   <Toggle
     text="Generate screens in Design section"
-    bind:value={createAutoscreens} />
+    bind:value={createAutoscreens}
+  />
   <div>
     <Label grey extraSmall>Create Table from CSV (Optional)</Label>
     <TableDataImport bind:dataImport />
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
index 1bd9798fdb..e8a02c8eb3 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
@@ -53,4 +53,5 @@
   body={`Are you sure you wish to delete the view '${view.name}'? Your data will be deleted and this action cannot be undone.`}
   okText="Delete View"
   onOk={deleteView}
-  title="Confirm Deletion" />
+  title="Confirm Deletion"
+/>
diff --git a/packages/builder/src/components/common/DrawerBindableInput.svelte b/packages/builder/src/components/common/DrawerBindableInput.svelte
index 6f55c5ef48..c121aaceaf 100644
--- a/packages/builder/src/components/common/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/DrawerBindableInput.svelte
@@ -24,7 +24,7 @@
     bindingDrawer.hide()
   }
 
-  const onChange = value => {
+  const onChange = (value) => {
     dispatch("change", readableToRuntimeBinding(bindings, value))
   }
 </script>
@@ -33,8 +33,9 @@
   <Input
     {label}
     value={readableValue}
-    on:change={event => onChange(event.detail)}
-    {placeholder} />
+    on:change={(event) => onChange(event.detail)}
+    {placeholder}
+  />
   <div class="icon" on:click={bindingDrawer.show}>
     <Icon size="S" name="FlashOn" />
   </div>
@@ -45,12 +46,13 @@
   </svelte:fragment>
   <Button cta slot="buttons" on:click={handleClose}>Save</Button>
   <svelte:component
-    slot="body"
     this={panel}
+    slot="body"
     value={readableValue}
     close={handleClose}
-    on:update={event => (tempValue = event.detail)}
-    bindableProperties={bindings} />
+    on:update={(event) => (tempValue = event.detail)}
+    bindableProperties={bindings}
+  />
 </Drawer>
 
 <style>
diff --git a/packages/builder/src/components/common/Dropzone.svelte b/packages/builder/src/components/common/Dropzone.svelte
index d44b975a41..328cd31f23 100644
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -9,8 +9,9 @@
 
   function handleFileTooLarge(fileSizeLimit) {
     notifications.error(
-      `Files cannot exceed ${fileSizeLimit /
-        BYTES_IN_MB}MB. Please try again with smaller files.`
+      `Files cannot exceed ${
+        fileSizeLimit / BYTES_IN_MB
+      }MB. Please try again with smaller files.`
     )
   }
 
@@ -29,4 +30,5 @@
   {label}
   {...$$restProps}
   {processFiles}
-  {handleFileTooLarge} />
+  {handleFileTooLarge}
+/>
diff --git a/packages/builder/src/components/common/ErrorsBox.svelte b/packages/builder/src/components/common/ErrorsBox.svelte
index f05e03f596..d406112e7d 100644
--- a/packages/builder/src/components/common/ErrorsBox.svelte
+++ b/packages/builder/src/components/common/ErrorsBox.svelte
@@ -7,7 +7,7 @@
 {#if hasErrors}
   <div class="container">
     {#each errors as error}
-      <div class="error">{error.dataPath || ''} {error.message}</div>
+      <div class="error">{error.dataPath || ""} {error.message}</div>
     {/each}
   </div>
 {/if}
diff --git a/packages/builder/src/components/common/Icons/Add.svelte b/packages/builder/src/components/common/Icons/Add.svelte
index 89b3e21b4f..1c7338886b 100644
--- a/packages/builder/src/components/common/Icons/Add.svelte
+++ b/packages/builder/src/components/common/Icons/Add.svelte
@@ -2,7 +2,8 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="100%"
-  height="100%">
+  height="100%"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Apps.svelte b/packages/builder/src/components/common/Icons/Apps.svelte
index 270acefe8b..1037406fac 100644
--- a/packages/builder/src/components/common/Icons/Apps.svelte
+++ b/packages/builder/src/components/common/Icons/Apps.svelte
@@ -2,11 +2,13 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M7 11.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0 10a4.5 4.5 0 1 1 0-9 4.5
     4.5 0 0 1 0 9zm10-10a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0 10a4.5 4.5 0 1 1
     0-9 4.5 4.5 0 0 1 0 9z"
-    fill="rgba(128,129,146,1)" />
+    fill="rgba(128,129,146,1)"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/ArrowDown.svelte b/packages/builder/src/components/common/Icons/ArrowDown.svelte
index bc1bfd2363..e9e6adfb90 100644
--- a/packages/builder/src/components/common/Icons/ArrowDown.svelte
+++ b/packages/builder/src/components/common/Icons/ArrowDown.svelte
@@ -2,9 +2,11 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="100%"
-  height="100%">
+  height="100%"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
-    d="M12 15l-4.243-4.243 1.415-1.414L12 12.172l2.828-2.829 1.415 1.414z" />
+    d="M12 15l-4.243-4.243 1.415-1.414L12 12.172l2.828-2.829 1.415 1.414z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Bug.svelte b/packages/builder/src/components/common/Icons/Bug.svelte
index 027c4c4b70..47c1e4d658 100644
--- a/packages/builder/src/components/common/Icons/Bug.svelte
+++ b/packages/builder/src/components/common/Icons/Bug.svelte
@@ -2,7 +2,8 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M5.07 16A7.06 7.06 0 0 1 5
@@ -11,5 +12,6 @@
     0l1.683-1.684 1.415 1.415-1.05 1.05A7.03 7.03 0 0 1 18.326
     8H21v2h-2.07c.046.327.07.66.07 1v1h2v2h-2v1c0 .34-.024.673-.07
     1H21v2h-2.674a7 7 0 0 1-12.652 0H3v-2h2.07zM9 10v2h6v-2H9zm0 4v2h6v-2H9z"
-    fill="rgba(128,129,146,1)" />
+    fill="rgba(128,129,146,1)"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Check.svelte b/packages/builder/src/components/common/Icons/Check.svelte
index 8293996bc9..6fa2f1bcea 100644
--- a/packages/builder/src/components/common/Icons/Check.svelte
+++ b/packages/builder/src/components/common/Icons/Check.svelte
@@ -2,9 +2,11 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="100%"
-  height="100%">
+  height="100%"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
-    d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" />
+    d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/ChevronDown.svelte b/packages/builder/src/components/common/Icons/ChevronDown.svelte
index 6300702ae9..41b3428953 100644
--- a/packages/builder/src/components/common/Icons/ChevronDown.svelte
+++ b/packages/builder/src/components/common/Icons/ChevronDown.svelte
@@ -2,9 +2,11 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="100%"
-  height="100%">
+  height="100%"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
-    d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
+    d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/ChevronUp.svelte b/packages/builder/src/components/common/Icons/ChevronUp.svelte
index fcdd07176b..d9cb5ef159 100644
--- a/packages/builder/src/components/common/Icons/ChevronUp.svelte
+++ b/packages/builder/src/components/common/Icons/ChevronUp.svelte
@@ -2,9 +2,11 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="100%"
-  height="100%">
+  height="100%"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
-    d="M12 10.828l-4.95 4.95-1.414-1.414L12 8l6.364 6.364-1.414 1.414z" />
+    d="M12 10.828l-4.95 4.95-1.414-1.414L12 8l6.364 6.364-1.414 1.414z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Close.svelte b/packages/builder/src/components/common/Icons/Close.svelte
index b6cacd076c..2a68781a38 100644
--- a/packages/builder/src/components/common/Icons/Close.svelte
+++ b/packages/builder/src/components/common/Icons/Close.svelte
@@ -2,9 +2,11 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414
-    1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
+    1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/CloseCircle.svelte b/packages/builder/src/components/common/Icons/CloseCircle.svelte
index cdad65f422..808fa3906d 100644
--- a/packages/builder/src/components/common/Icons/CloseCircle.svelte
+++ b/packages/builder/src/components/common/Icons/CloseCircle.svelte
@@ -2,11 +2,13 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10
     10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12
-    13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z" />
+    13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Community.svelte b/packages/builder/src/components/common/Icons/Community.svelte
index ca4b8792c9..8b5914753d 100644
--- a/packages/builder/src/components/common/Icons/Community.svelte
+++ b/packages/builder/src/components/common/Icons/Community.svelte
@@ -2,7 +2,8 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M12 11a5 5 0 0 1 5 5v6H7v-6a5 5 0 0 1 5-5zm-6.712 3.006a6.983 6.983 0 0
@@ -10,5 +11,6 @@
     3.501 0 0 1 22 17.5V22h-3v-6c0-.693-.1-1.362-.288-1.994zM5.5 8a2.5 2.5 0 1 1
     0 5 2.5 2.5 0 0 1 0-5zm13 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM12 2a4 4 0
     1 1 0 8 4 4 0 0 1 0-8z"
-    fill="rgba(128,129,146,1)" />
+    fill="rgba(128,129,146,1)"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Contribution.svelte b/packages/builder/src/components/common/Icons/Contribution.svelte
index faa7560167..4d22b1539a 100644
--- a/packages/builder/src/components/common/Icons/Contribution.svelte
+++ b/packages/builder/src/components/common/Icons/Contribution.svelte
@@ -2,7 +2,8 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M14.121 10.48a1 1 0 0 0-1.414 0l-.707.706a2 2 0 1
@@ -10,5 +11,6 @@
     2.135-4.95-4.95zM3.161 4.468a6.503 6.503 0 0 1 8.009-.938L7.757 6.944a4 4 0
     0 0 5.513 5.794l.144-.137 4.243 4.242-4.243 4.243a2 2 0 0 1-2.828 0L3.16
     13.66a6.5 6.5 0 0 1 0-9.192z"
-    fill="rgba(128,129,146,1)" />
+    fill="rgba(128,129,146,1)"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Copy.svelte b/packages/builder/src/components/common/Icons/Copy.svelte
index eb37af47cc..e5571272ab 100644
--- a/packages/builder/src/components/common/Icons/Copy.svelte
+++ b/packages/builder/src/components/common/Icons/Copy.svelte
@@ -2,11 +2,13 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="100%"
-  height="100%">
+  height="100%"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45
     1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003
-    8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z" />
+    8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Documentation.svelte b/packages/builder/src/components/common/Icons/Documentation.svelte
index 56481ab385..3148a0e2d0 100644
--- a/packages/builder/src/components/common/Icons/Documentation.svelte
+++ b/packages/builder/src/components/common/Icons/Documentation.svelte
@@ -2,10 +2,12 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M20 22H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1
     1zM8 7v2h8V7H8zm0 4v2h8v-2H8zm0 4v2h5v-2H8z"
-    fill="rgba(128,129,146,1)" />
+    fill="rgba(128,129,146,1)"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/DownArrow.svelte b/packages/builder/src/components/common/Icons/DownArrow.svelte
index 708de09276..4fbff83dc6 100644
--- a/packages/builder/src/components/common/Icons/DownArrow.svelte
+++ b/packages/builder/src/components/common/Icons/DownArrow.svelte
@@ -2,7 +2,8 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="100%"
-  height="100%">
+  height="100%"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path fill="rgba(0,3,51,1)" d="M12 14l-4-4h8z" />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Email.svelte b/packages/builder/src/components/common/Icons/Email.svelte
index 8a88818192..e8a48ea3d6 100644
--- a/packages/builder/src/components/common/Icons/Email.svelte
+++ b/packages/builder/src/components/common/Icons/Email.svelte
@@ -2,11 +2,13 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1
     1-1zm9.06 8.683L5.648 6.238 4.353 7.762l7.72 6.555
     7.581-6.56-1.308-1.513-6.285 5.439z"
-    fill="rgba(128,129,146,1)" />
+    fill="rgba(128,129,146,1)"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Events.svelte b/packages/builder/src/components/common/Icons/Events.svelte
index b7d92481e3..5363aa7bf7 100644
--- a/packages/builder/src/components/common/Icons/Events.svelte
+++ b/packages/builder/src/components/common/Icons/Events.svelte
@@ -2,8 +2,10 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
-    d="M13 9h8L11 24v-9H4l9-15v9zm-2 2V7.22L7.532 13H13v4.394L17.263 11H11z" />
+    d="M13 9h8L11 24v-9H4l9-15v9zm-2 2V7.22L7.532 13H13v4.394L17.263 11H11z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Feedback.svelte b/packages/builder/src/components/common/Icons/Feedback.svelte
index e34415d612..7edf19d53f 100644
--- a/packages/builder/src/components/common/Icons/Feedback.svelte
+++ b/packages/builder/src/components/common/Icons/Feedback.svelte
@@ -2,10 +2,12 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M6.455 19L2 22.5V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1
-    1H6.455zM11 13v2h2v-2h-2zm0-6v5h2V7h-2z" />
+    1H6.455zM11 13v2h2v-2h-2zm0-6v5h2V7h-2z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Grid.svelte b/packages/builder/src/components/common/Icons/Grid.svelte
index 175ba0aa11..ee7df57b68 100644
--- a/packages/builder/src/components/common/Icons/Grid.svelte
+++ b/packages/builder/src/components/common/Icons/Grid.svelte
@@ -2,11 +2,13 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="100%"
-  height="100%">
+  height="100%"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M14 10v4h-4v-4h4zm2 0h5v4h-5v-4zm-2 11h-4v-5h4v5zm2 0v-5h5v4a1 1 0 0 1-1
     1h-4zM14 3v5h-4V3h4zm2 0h4a1 1 0 0 1 1 1v4h-5V3zm-8 7v4H3v-4h5zm0 11H4a1 1 0
-    0 1-1-1v-4h5v5zM8 3v5H3V4a1 1 0 0 1 1-1h4z" />
+    0 1-1-1v-4h5v5zM8 3v5H3V4a1 1 0 0 1 1-1h4z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Hosting.svelte b/packages/builder/src/components/common/Icons/Hosting.svelte
index 9511e4fe3c..9d9fd172ca 100644
--- a/packages/builder/src/components/common/Icons/Hosting.svelte
+++ b/packages/builder/src/components/common/Icons/Hosting.svelte
@@ -2,10 +2,12 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M7 20.981a6.5 6.5 0 0 1-2.936-12 8.001 8.001 0 0 1 15.872 0 6.5 6.5 0 0
     1-2.936 12V21H7v-.019zM13 13h3l-4-5-4 5h3v4h2v-4z"
-    fill="rgba(128,129,146,1)" />
+    fill="rgba(128,129,146,1)"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Image.svelte b/packages/builder/src/components/common/Icons/Image.svelte
index 698ef41213..49a11c747b 100644
--- a/packages/builder/src/components/common/Icons/Image.svelte
+++ b/packages/builder/src/components/common/Icons/Image.svelte
@@ -2,12 +2,14 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M4.828 21l-.02.02-.021-.02H2.992A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1
     2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H4.828zM20
     15V5H4v14L14 9l6 6zm0 2.828l-6-6L6.828 19H20v-1.172zM8 11a2 2 0 1 1 0-4 2 2
-    0 0 1 0 4z" />
+    0 0 1 0 4z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Info.svelte b/packages/builder/src/components/common/Icons/Info.svelte
index ea9779858d..18cc66f662 100644
--- a/packages/builder/src/components/common/Icons/Info.svelte
+++ b/packages/builder/src/components/common/Icons/Info.svelte
@@ -2,5 +2,6 @@
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10
-    10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z" />
+    10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Input.svelte b/packages/builder/src/components/common/Icons/Input.svelte
index 4a322bcc03..1aaee79201 100644
--- a/packages/builder/src/components/common/Icons/Input.svelte
+++ b/packages/builder/src/components/common/Icons/Input.svelte
@@ -2,11 +2,13 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M5 5v14h14V5H5zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1
     1 0 0 1 1-1zm5.869 12l-.82 2H6.833L11 7h2l4.167
-    10H14.95l-.82-2H9.87zm.82-2h2.622L12 9.8 10.689 13z" />
+    10H14.95l-.82-2H9.87zm.82-2h2.622L12 9.8 10.689 13z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/JavaScript.svelte b/packages/builder/src/components/common/Icons/JavaScript.svelte
index 9ccca99de3..dfecf2a48e 100644
--- a/packages/builder/src/components/common/Icons/JavaScript.svelte
+++ b/packages/builder/src/components/common/Icons/JavaScript.svelte
@@ -3,10 +3,12 @@
   height="20"
   viewBox="0 0 20 20"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <path
     d="M0.220001 0.220001H19.78V19.7802H0.220001V0.220001Z"
-    fill="#F0DB4F" />
+    fill="#F0DB4F"
+  />
   <path
     d="M18.1792 15.115C18.0359 14.2227 17.4541 13.4731 15.7305 12.7742C15.1317
     12.4991 14.4642 12.302 14.2653 11.8483C14.1947 11.5842 14.1853 11.4355 14.23
@@ -27,5 +29,6 @@
     8.07359 18.3539 9.05359 18.1289C9.6914 17.9431 10.2417 17.5583 10.5298
     16.9725C10.9464 16.2045 10.857 15.275 10.8533 14.2469C10.8626 12.5695
     10.8534 10.8925 10.8534 9.20985Z"
-    fill="#323330" />
+    fill="#323330"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Layout.svelte b/packages/builder/src/components/common/Icons/Layout.svelte
index 872c05af19..b80fe5c8cf 100644
--- a/packages/builder/src/components/common/Icons/Layout.svelte
+++ b/packages/builder/src/components/common/Icons/Layout.svelte
@@ -2,10 +2,12 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M21 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h16a1 1 0 0 1 1
-    1v16zM11 5H5v14h6V5zm8 8h-6v6h6v-6zm0-8h-6v6h6V5z" />
+    1v16zM11 5H5v14h6V5zm8 8h-6v6h6v-6zm0-8h-6v6h6V5z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/More.svelte b/packages/builder/src/components/common/Icons/More.svelte
index 1ec4139eae..e88ac6ba98 100644
--- a/packages/builder/src/components/common/Icons/More.svelte
+++ b/packages/builder/src/components/common/Icons/More.svelte
@@ -2,11 +2,13 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6
     12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21
     12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5
-    1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z" />
+    1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Paint.svelte b/packages/builder/src/components/common/Icons/Paint.svelte
index e6cbe60798..09582286cb 100644
--- a/packages/builder/src/components/common/Icons/Paint.svelte
+++ b/packages/builder/src/components/common/Icons/Paint.svelte
@@ -2,12 +2,14 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M19.228 18.732l1.768-1.768 1.767 1.768a2.5 2.5 0 1 1-3.535 0zM8.878
     1.08l11.314 11.313a1 1 0 0 1 0 1.415l-8.485 8.485a1 1 0 0 1-1.414
     0l-8.485-8.485a1 1 0 0 1 0-1.415l7.778-7.778-2.122-2.121L8.88 1.08zM11
-    6.03L3.929 13.1 11 20.173l7.071-7.071L11 6.029z" />
+    6.03L3.929 13.1 11 20.173l7.071-7.071L11 6.029z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Pencil.svelte b/packages/builder/src/components/common/Icons/Pencil.svelte
index eb24716838..46d51c5492 100644
--- a/packages/builder/src/components/common/Icons/Pencil.svelte
+++ b/packages/builder/src/components/common/Icons/Pencil.svelte
@@ -3,13 +3,15 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M15.728 9.686l-1.414-1.414L5
     17.586V19h1.414l9.314-9.314zm1.414-1.414l1.414-1.414-1.414-1.414-1.414 1.414
     1.414 1.414zM7.242 21H3v-4.243L16.435 3.322a1 1 0 0 1 1.414 0l2.829 2.829a1
-    1 0 0 1 0 1.414L7.243 21z" />
+    1 0 0 1 0 1.414L7.243 21z"
+  />
 </svg>
 
 <style>
diff --git a/packages/builder/src/components/common/Icons/Preview.svelte b/packages/builder/src/components/common/Icons/Preview.svelte
index b32fce951a..e45d715ba7 100644
--- a/packages/builder/src/components/common/Icons/Preview.svelte
+++ b/packages/builder/src/components/common/Icons/Preview.svelte
@@ -2,11 +2,13 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10
     10zM10.622 8.415a.4.4 0 00-.622.332v6.506a.4.4 0 00.622.332l4.879-3.252a.4.4
     0 000-.666l-4.88-3.252z"
-    fill="currentColor" />
+    fill="currentColor"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Settings.svelte b/packages/builder/src/components/common/Icons/Settings.svelte
index 1be6b326cb..15bf4424c5 100644
--- a/packages/builder/src/components/common/Icons/Settings.svelte
+++ b/packages/builder/src/components/common/Icons/Settings.svelte
@@ -2,7 +2,8 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
@@ -10,5 +11,6 @@
     1v3.686l2.607 2.607a1 1 0 0 1 0 1.414L20 15.314V19a1 1 0 0 1-1
     1h-3.686l-2.607 2.607a1 1 0 0 1-1.414 0L8.686 20H5a1 1 0 0
     1-1-1v-3.686l-2.607-2.607a1 1 0 0 1 0-1.414L4 8.686V5a1 1 0 0 1
-    1-1h3.686zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
+    1-1h3.686zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Shape.svelte b/packages/builder/src/components/common/Icons/Shape.svelte
index e3c4d08e2e..d95424f593 100644
--- a/packages/builder/src/components/common/Icons/Shape.svelte
+++ b/packages/builder/src/components/common/Icons/Shape.svelte
@@ -2,11 +2,13 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="100%"
-  height="100%">
+  height="100%"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M5 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm14 0a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0
     14a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM5 22a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM9
-    4h6v2H9V4zm0 14h6v2H9v-2zM4 9h2v6H4V9zm14 0h2v6h-2V9z" />
+    4h6v2H9V4zm0 14h6v2H9v-2zM4 9h2v6H4V9zm14 0h2v6h-2V9z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Terminal.svelte b/packages/builder/src/components/common/Icons/Terminal.svelte
index 4d3b6e3b5b..d77c2719ec 100644
--- a/packages/builder/src/components/common/Icons/Terminal.svelte
+++ b/packages/builder/src/components/common/Icons/Terminal.svelte
@@ -2,11 +2,13 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1
     2v14h16V5H4zm8 10h6v2h-6v-2zm-3.333-3L5.838 9.172l1.415-1.415L11.495
-    12l-4.242 4.243-1.415-1.415L8.667 12z" />
+    12l-4.242 4.243-1.415-1.415L8.667 12z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Tutorials.svelte b/packages/builder/src/components/common/Icons/Tutorials.svelte
index 169d6a8d45..67bbe61344 100644
--- a/packages/builder/src/components/common/Icons/Tutorials.svelte
+++ b/packages/builder/src/components/common/Icons/Tutorials.svelte
@@ -2,10 +2,12 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M13 16.938V19h5v2H6v-2h5v-2.062A8.001 8.001 0 0 1 4 9V3h16v6a8.001 8.001
     0 0 1-7 7.938zM1 5h2v4H1V5zm20 0h2v4h-2V5z"
-    fill="rgba(128,129,146,1)" />
+    fill="rgba(128,129,146,1)"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Twitter.svelte b/packages/builder/src/components/common/Icons/Twitter.svelte
index eaac6dc86b..50fe9df469 100644
--- a/packages/builder/src/components/common/Icons/Twitter.svelte
+++ b/packages/builder/src/components/common/Icons/Twitter.svelte
@@ -2,7 +2,8 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6
@@ -12,5 +13,6 @@
     4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191
     1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9
     0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z"
-    fill="rgba(128,129,146,1)" />
+    fill="rgba(128,129,146,1)"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/Updates.svelte b/packages/builder/src/components/common/Icons/Updates.svelte
index b25555094d..18b89d306b 100644
--- a/packages/builder/src/components/common/Icons/Updates.svelte
+++ b/packages/builder/src/components/common/Icons/Updates.svelte
@@ -2,12 +2,14 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="24"
-  height="24">
+  height="24"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10
     10zm4.82-4.924A7 7 0 0 0 9.032 5.658l.975 1.755A5 5 0 0 1 17 12h-3l2.82
     5.076zm-1.852 1.266l-.975-1.755A5 5 0 0 1 7 12h3L7.18 6.924a7 7 0 0 0 7.788
     11.418z"
-    fill="rgba(128,129,146,1)" />
+    fill="rgba(128,129,146,1)"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/Icons/XCircle.svelte b/packages/builder/src/components/common/Icons/XCircle.svelte
index 77742e644a..a9433fb8c3 100644
--- a/packages/builder/src/components/common/Icons/XCircle.svelte
+++ b/packages/builder/src/components/common/Icons/XCircle.svelte
@@ -2,10 +2,12 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   width="100%"
-  height="100%">
+  height="100%"
+>
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
     d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414
-    1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
+    1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"
+  />
 </svg>
diff --git a/packages/builder/src/components/common/LinkedRowSelector.svelte b/packages/builder/src/components/common/LinkedRowSelector.svelte
index a5e6bc8cee..c57210a33b 100644
--- a/packages/builder/src/components/common/LinkedRowSelector.svelte
+++ b/packages/builder/src/components/common/LinkedRowSelector.svelte
@@ -8,12 +8,12 @@
   export let linkedRows = []
 
   let rows = []
-  let linkedIds = (linkedRows || [])?.map(row => row?._id || row)
+  let linkedIds = (linkedRows || [])?.map((row) => row?._id || row)
 
   $: linkedRows = linkedIds
   $: label = capitalise(schema.name)
   $: linkedTableId = schema.tableId
-  $: linkedTable = $tables.list.find(table => table._id === linkedTableId)
+  $: linkedTable = $tables.list.find((table) => table._id === linkedTableId)
   $: fetchRows(linkedTableId)
 
   async function fetchRows(linkedTableId) {
@@ -39,21 +39,21 @@
     <b>{linkedTable.name}</b>
     table.
   </Label>
+{:else if schema.relationshipType === "one-to-many"}
+  <Select
+    value={linkedIds?.[0]}
+    options={rows}
+    getOptionLabel={getPrettyName}
+    getOptionValue={(row) => row._id}
+    on:change={(e) => (linkedIds = e.detail ? [e.detail] : [])}
+    {label}
+  />
 {:else}
-  {#if schema.relationshipType === 'one-to-many'}
-    <Select
-      value={linkedIds?.[0]}
-      options={rows}
-      getOptionLabel={getPrettyName}
-      getOptionValue={row => row._id}
-      on:change={e => (linkedIds = e.detail ? [e.detail] : [])}
-      {label} />
-  {:else}
-    <Multiselect
-      bind:value={linkedIds}
-      {label}
-      options={rows}
-      getOptionLabel={getPrettyName}
-      getOptionValue={row => row._id} />
-  {/if}
+  <Multiselect
+    bind:value={linkedIds}
+    {label}
+    options={rows}
+    getOptionLabel={getPrettyName}
+    getOptionValue={(row) => row._id}
+  />
 {/if}
diff --git a/packages/builder/src/components/common/ValuesList.svelte b/packages/builder/src/components/common/ValuesList.svelte
index ff8cdb5479..c968e87abb 100644
--- a/packages/builder/src/components/common/ValuesList.svelte
+++ b/packages/builder/src/components/common/ValuesList.svelte
@@ -5,7 +5,7 @@
   export let values
   export let label
 
-  const inputChanged = ev => {
+  const inputChanged = (ev) => {
     try {
       values = ev.target.value.split("\n")
     } catch (_) {
diff --git a/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte b/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte
index a7f5e38bb0..11b9d0521b 100644
--- a/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte
+++ b/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte
@@ -10,7 +10,7 @@
   $: automations = $automationStore.automations
 
   onMount(() => {
-    webhookUrls = automations.map(automation => {
+    webhookUrls = automations.map((automation) => {
       const trigger = automation.definition.trigger
       if (trigger?.stepId === "WEBHOOK" && trigger.inputs) {
         return {
@@ -26,7 +26,8 @@
 <ModalContent
   title="Webhook Endpoints"
   confirmText="OK"
-  showCancelButton={false}>
+  showCancelButton={false}
+>
   <p>See below the list of deployed webhook URLs.</p>
   {#each webhookUrls as webhookUrl}
     <div>
@@ -40,7 +41,8 @@
   <a
     slot="footer"
     target="_blank"
-    href="https://docs.budibase.com/automate/steps/triggers">
+    href="https://docs.budibase.com/automate/steps/triggers"
+  >
     <i class="ri-information-line" />
     <span>Learn about webhooks</span>
   </a>
diff --git a/packages/builder/src/components/deploy/DeploymentHistory.svelte b/packages/builder/src/components/deploy/DeploymentHistory.svelte
index 21942727af..e00f7d71df 100644
--- a/packages/builder/src/components/deploy/DeploymentHistory.svelte
+++ b/packages/builder/src/components/deploy/DeploymentHistory.svelte
@@ -48,7 +48,7 @@
     for (let incomingDeployment of incoming) {
       if (incomingDeployment.status === DeploymentStatus.FAILURE) {
         const currentDeployment = current.find(
-          deployment => deployment._id === incomingDeployment._id
+          (deployment) => deployment._id === incomingDeployment._id
         )
 
         // We have just been notified of an ongoing deployments failure
@@ -100,7 +100,7 @@
     <header>
       <Heading>Deployment History</Heading>
       <div class="deploy-div">
-        {#if deployments.some(deployment => deployment.status === DeploymentStatus.SUCCESS)}
+        {#if deployments.some((deployment) => deployment.status === DeploymentStatus.SUCCESS)}
           <a target="_blank" href={deploymentUrl}> View Your Deployed App → </a>
           <Button primary on:click={() => modal.show()}>View webhooks</Button>
         {/if}
@@ -111,19 +111,20 @@
         <article class="deployment">
           <div class="deployment-info">
             <span class="deploy-date">
-              {formatDate(deployment.updatedAt, 'fullDate')}
+              {formatDate(deployment.updatedAt, "fullDate")}
             </span>
             <span class="deploy-time">
-              {formatDate(deployment.updatedAt, 'timeOnly')}
+              {formatDate(deployment.updatedAt, "timeOnly")}
             </span>
           </div>
           <div class="deployment-right">
-            {#if deployment.status.toLowerCase() === 'pending'}
+            {#if deployment.status.toLowerCase() === "pending"}
               <Spinner size="10" />
             {/if}
             <div
               on:click={() => showErrorReasonModal(deployment.err)}
-              class={`deployment-status ${deployment.status}`}>
+              class={`deployment-status ${deployment.status}`}
+            >
               <span>
                 {deployment.status}
                 {#if deployment.status === DeploymentStatus.FAILURE}
@@ -144,7 +145,8 @@
   <ModalContent
     title="Deployment Error"
     confirmText="OK"
-    showCancelButton={false}>
+    showCancelButton={false}
+  >
     {errorReason}
   </ModalContent>
 </Modal>
diff --git a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
index 391bf18086..b75334cc45 100644
--- a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
@@ -13,7 +13,7 @@
 
   const enrichStructure = (structure, definitions) => {
     let enrichedStructure = []
-    structure.forEach(item => {
+    structure.forEach((item) => {
       if (typeof item === "string") {
         const def = definitions[`@budibase/standard-components/${item}`]
         if (def) {
@@ -33,7 +33,7 @@
     return enrichedStructure
   }
 
-  const onItemChosen = async item => {
+  const onItemChosen = async (item) => {
     if (!item.isCategory) {
       await store.actions.components.create(item.component)
     }
@@ -49,7 +49,8 @@
         size="S"
         slot="control"
         dataCy={`category-${item.name}`}
-        on:click={() => onItemChosen(item)}>
+        on:click={() => onItemChosen(item)}
+      >
         <div class="buttonContent">
           {item.name}
           {#if item.isCategory}
@@ -62,7 +63,8 @@
           <MenuItem
             dataCy={`component-${item.name}`}
             icon={item.icon}
-            on:click={() => onItemChosen(item)}>
+            on:click={() => onItemChosen(item)}
+          >
             {item.name}
           </MenuItem>
         {/if}
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
index bd912ca916..902b646f31 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
@@ -11,18 +11,18 @@
   export let level = 0
   export let dragDropStore
 
-  const isScreenslot = name => name?.endsWith("screenslot")
+  const isScreenslot = (name) => name?.endsWith("screenslot")
 
-  const selectComponent = component => {
+  const selectComponent = (component) => {
     store.actions.components.select(component)
   }
 
-  const dragstart = component => e => {
+  const dragstart = (component) => (e) => {
     e.dataTransfer.dropEffect = DropEffect.MOVE
     dragDropStore.actions.dragstart(component)
   }
 
-  const dragover = (component, index) => e => {
+  const dragover = (component, index) => (e) => {
     const definition = store.actions.components.getDefinition(
       component._component
     )
@@ -54,7 +54,8 @@
           ondragover="return false"
           ondragenter="return false"
           class="drop-item"
-          style="margin-left: {(level + 1) * 16}px" />
+          style="margin-left: {(level + 1) * 16}px"
+        />
       {/if}
 
       <NavItem
@@ -63,10 +64,13 @@
         on:dragstart={dragstart(component)}
         on:dragover={dragover(component, index)}
         on:drop={dragDropStore.actions.drop}
-        text={isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
+        text={isScreenslot(component._component)
+          ? "Screenslot"
+          : component._instanceName}
         withArrow
         indentLevel={level + 1}
-        selected={$store.selectedComponentId === component._id}>
+        selected={$store.selectedComponentId === component._id}
+      >
         <ComponentDropdownMenu {component} />
       </NavItem>
 
@@ -76,7 +80,8 @@
           {currentComponent}
           {onSelect}
           {dragDropStore}
-          level={level + 1} />
+          level={level + 1}
+        />
       {/if}
 
       {#if $dragDropStore?.targetComponent === component && ($dragDropStore.dropPosition === DropPosition.INSIDE || $dragDropStore.dropPosition === DropPosition.BELOW)}
@@ -85,7 +90,10 @@
           ondragover="return false"
           ondragenter="return false"
           class="drop-item"
-          style="margin-left: {(level + ($dragDropStore.dropPosition === DropPosition.INSIDE ? 3 : 1)) * 16}px" />
+          style="margin-left: {(level +
+            ($dragDropStore.dropPosition === DropPosition.INSIDE ? 3 : 1)) *
+            16}px"
+        />
       {/if}
     </li>
   {/each}
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/index.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/index.svelte
index 65425a5b9f..02e1dcacbc 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/index.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/index.svelte
@@ -17,7 +17,7 @@
     let screenRoleId
 
     // Filter all routes down to only those which match the current role
-    sortedPaths.forEach(path => {
+    sortedPaths.forEach((path) => {
       const config = allRoutes[path]
       Object.entries(config.subpaths).forEach(([subpath, pathConfig]) => {
         Object.entries(pathConfig.screens).forEach(([roleId, screenId]) => {
diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
index 1253ab91bf..15fb5f535a 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@@ -25,7 +25,7 @@
     }
   }
 
-  const templateChanged = newTemplateIndex => {
+  const templateChanged = (newTemplateIndex) => {
     if (newTemplateIndex === undefined) return
     draftScreen = templates[newTemplateIndex].create()
     if (draftScreen.props._instanceName) {
@@ -75,13 +75,13 @@
 
   const routeExists = (route, roleId) => {
     return $allScreens.some(
-      screen =>
+      (screen) =>
         screen.routing.route.toLowerCase() === route.toLowerCase() &&
         screen.routing.roleId === roleId
     )
   }
 
-  const routeChanged = event => {
+  const routeChanged = (event) => {
     if (!event.detail.startsWith("/")) {
       route = "/" + event.detail
     }
@@ -92,22 +92,25 @@
   <Select
     label="Choose a Template"
     bind:value={templateIndex}
-    on:change={ev => templateChanged(ev.detail)}
+    on:change={(ev) => templateChanged(ev.detail)}
     options={templates}
     placeholder={null}
-    getOptionLabel={x => x.name}
-    getOptionValue={(x, idx) => idx} />
+    getOptionLabel={(x) => x.name}
+    getOptionValue={(x, idx) => idx}
+  />
   <Input label="Name" bind:value={name} />
   <Input
     label="Url"
     error={routeError}
     bind:value={route}
-    on:change={routeChanged} />
+    on:change={routeChanged}
+  />
   <Select
     label="Access"
     bind:value={roleId}
     options={$roles}
-    getOptionLabel={x => x.name}
-    getOptionValue={x => x._id} />
+    getOptionLabel={(x) => x.name}
+    getOptionValue={(x) => x._id}
+  />
   <Toggle text="Create link in navigation bar" bind:value={createLink} />
 </ModalContent>
diff --git a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
index f8fcce0d24..99e414b47e 100644
--- a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
@@ -1,6 +1,13 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import { Search, TextArea, Heading, Label, DrawerContent, Layout } from "@budibase/bbui"
+  import {
+    Search,
+    TextArea,
+    Heading,
+    Label,
+    DrawerContent,
+    Layout,
+  } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { isValid } from "@budibase/string-templates"
   import {
@@ -59,53 +66,53 @@
 
 <DrawerContent>
   <svelte:fragment slot="sidebar">
-  <Layout>
-    <Search placeholder="Search" bind:value={search} />
-    {#if context}
+    <Layout>
+      <Search placeholder="Search" bind:value={search} />
+      {#if context}
+        <section>
+          <Heading size="XS">Columns</Heading>
+          <ul>
+            {#each context.filter((context) =>
+              context.readableBinding.match(searchRgx)
+            ) as { readableBinding }}
+              <li on:click={() => addToText(readableBinding)}>
+                {readableBinding}
+              </li>
+            {/each}
+          </ul>
+        </section>
+      {/if}
+      {#if instance}
+        <section>
+          <Heading size="XS">Components</Heading>
+          <ul>
+            {#each instance.filter((instance) =>
+              instance.readableBinding.match(searchRgx)
+            ) as { readableBinding }}
+              <li on:click={() => addToText(readableBinding)}>
+                {readableBinding}
+              </li>
+            {/each}
+          </ul>
+        </section>
+      {/if}
       <section>
-        <Heading size="XS">Columns</Heading>
+        <Heading size="XS">Helpers</Heading>
         <ul>
-          {#each context.filter((context) =>
-            context.readableBinding.match(searchRgx)
-          ) as { readableBinding }}
-            <li on:click={() => addToText(readableBinding)}>
-              {readableBinding}
-            </li>
-          {/each}
-        </ul>
-      </section>
-    {/if}
-    {#if instance}
-      <section>
-        <Heading size="XS">Components</Heading>
-        <ul>
-          {#each instance.filter((instance) =>
-            instance.readableBinding.match(searchRgx)
-          ) as { readableBinding }}
-            <li on:click={() => addToText(readableBinding)}>
-              {readableBinding}
-            </li>
-          {/each}
-        </ul>
-      </section>
-    {/if}
-    <section>
-      <Heading size="XS">Helpers</Heading>
-      <ul>
-        {#each helpers.filter((helper) => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
-          <li on:click={() => addToText(helper.text)}>
-            <div>
-              <Label extraSmall>{helper.displayText}</Label>
-              <div class="description">
-                {@html helper.description}
+          {#each helpers.filter((helper) => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
+            <li on:click={() => addToText(helper.text)}>
+              <div>
+                <Label extraSmall>{helper.displayText}</Label>
+                <div class="description">
+                  {@html helper.description}
+                </div>
+                <pre>{helper.example || ''}</pre>
               </div>
-              <pre>{helper.example || ''}</pre>
-            </div>
-          </li>
-        {/each}
-      </ul>
-    </section>
-  </Layout>
+            </li>
+          {/each}
+        </ul>
+      </section>
+    </Layout>
   </svelte:fragment>
   <div class="main">
     <TextArea
@@ -125,7 +132,7 @@
 
 <style>
   .main {
-    padding: var(--spacing-m)
+    padding: var(--spacing-m);
   }
   section {
     display: grid;
diff --git a/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte b/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte
index ba3f4e920d..02e8624f2e 100644
--- a/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte
@@ -1,7 +1,7 @@
 <script>
   export let categories = []
   export let selectedCategory = {}
-  export let onClick = category => {}
+  export let onClick = (category) => {}
 </script>
 
 <div class="tabs">
@@ -9,7 +9,8 @@
     <li
       data-cy={category.name}
       on:click={() => onClick(category)}
-      class:active={selectedCategory === category}>
+      class:active={selectedCategory === category}
+    >
       {category.name}
     </li>
   {/each}
diff --git a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
index 66802e5985..ba58b783b7 100644
--- a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
@@ -53,18 +53,21 @@
             {onStyleChanged}
             {componentInstance}
             open={currentGroup === groupName}
-            on:open={() => (currentGroup = groupName)} />
+            on:open={() => (currentGroup = groupName)}
+          />
         {/each}
         <DetailSummary
-          name={`Custom Styles${componentInstance._styles.custom ? ' *' : ''}`}
-          on:open={() => (currentGroup = 'custom')}
-          show={currentGroup === 'custom'}
-          thin>
+          name={`Custom Styles${componentInstance._styles.custom ? " *" : ""}`}
+          on:open={() => (currentGroup = "custom")}
+          show={currentGroup === "custom"}
+          thin
+        >
           <div class="custom-styles">
             <TextArea
               value={componentInstance._styles.custom}
-              on:change={event => onCustomStyleChanged(event.detail)}
-              placeholder="Enter some CSS..." />
+              on:change={(event) => onCustomStyleChanged(event.detail)}
+              placeholder="Enter some CSS..."
+            />
           </div>
         </DetailSummary>
         <Button secondary wide on:click={onResetStyles}>Reset Styles</Button>
@@ -79,11 +82,12 @@
     <div class="transitions">
       <Select
         value={componentInstance._transition}
-        on:change={event => onUpdateTransition(event.detail)}
+        on:change={(event) => onUpdateTransition(event.detail)}
         name="transition"
         label="Transition"
         options={transitions}
-        getOptionLabel={capitalize} />
+        getOptionLabel={capitalize}
+      />
     </div>
   {/if}
 </div>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
index 3d0209b4d3..b669663bd4 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@@ -30,7 +30,7 @@
 
   function setAssetProps(name, value) {
     const selectedAsset = get(currentAsset)
-    store.update(state => {
+    store.update((state) => {
       if (
         name === "_instanceName" &&
         state.currentFrontEndType === FrontendTypes.SCREEN
@@ -57,7 +57,8 @@
         {showDisplayName}
         onChange={store.actions.components.updateProp}
         onScreenPropChange={setAssetProps}
-        assetInstance={$store.currentView !== 'component' && $currentAsset} />
+        assetInstance={$store.currentView !== "component" && $currentAsset}
+      />
     </div>
   </Tab>
   <Tab title="Design">
@@ -71,7 +72,8 @@
         {onStyleChanged}
         {onCustomStyleChanged}
         {onUpdateTransition}
-        {onResetStyles} />
+        {onResetStyles}
+      />
     </div>
   </Tab>
 </Tabs>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte
index c777f79666..97ea3af231 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte
@@ -12,7 +12,7 @@
     let timeout = null
     let initialCall = true
 
-    return function() {
+    return function () {
       const callNow = immediate && initialCall
       const next = () => {
         callback.apply(this, arguments)
@@ -31,7 +31,7 @@
   }
 
   const onChange = throttle(
-    e => {
+    (e) => {
       dispatch("change", e.detail)
     },
     WAIT,
@@ -39,4 +39,4 @@
   )
 </script>
 
-<Colorpicker value={value || '#C4C4C4'} on:change={onChange} />
+<Colorpicker value={value || "#C4C4C4"} on:change={onChange} />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
index 3581658b0d..7b2aa75541 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
@@ -8,7 +8,7 @@
 
   $: path = findComponentPath($currentAsset.props, $store.selectedComponentId)
   $: providers = path.filter(
-    component =>
+    (component) =>
       component._component === "@budibase/standard-components/dataprovider"
   )
 </script>
@@ -17,5 +17,6 @@
   {value}
   on:change
   options={providers}
-  getOptionLabel={component => component._instanceName}
-  getOptionValue={component => `{{ literal ${makePropSafe(component._id)} }}`} />
+  getOptionLabel={(component) => component._instanceName}
+  getOptionValue={(component) => `{{ literal ${makePropSafe(component._id)} }}`}
+/>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
index 579e612f0e..aa685f7b90 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
@@ -30,7 +30,7 @@
   export let showAllQueries
 
   $: text = value?.label ?? "Choose an option"
-  $: tables = $tablesStore.list.map(m => ({
+  $: tables = $tablesStore.list.map((m) => ({
     label: m.name,
     tableId: m._id,
     type: "table",
@@ -46,9 +46,9 @@
   }, [])
   $: queries = $queriesStore.list
     .filter(
-      query => showAllQueries || query.queryVerb === "read" || query.readable
+      (query) => showAllQueries || query.queryVerb === "read" || query.readable
     )
-    .map(query => ({
+    .map((query) => ({
       label: query.name,
       name: query.name,
       tableId: query._id,
@@ -61,15 +61,15 @@
     $currentAsset,
     $store.selectedComponentId
   )
-  $: queryBindableProperties = bindableProperties.map(property => ({
+  $: queryBindableProperties = bindableProperties.map((property) => ({
     ...property,
     category: property.type === "instance" ? "Component" : "Table",
     label: property.readableBinding,
     path: property.readableBinding,
   }))
   $: links = bindableProperties
-    .filter(x => x.fieldSchema?.type === "link")
-    .map(property => {
+    .filter((x) => x.fieldSchema?.type === "link")
+    .map((property) => {
       return {
         providerId: property.providerId,
         label: property.readableBinding,
@@ -89,7 +89,7 @@
   }
 
   function fetchQueryDefinition(query) {
-    const source = $datasources.list.find(ds => ds._id === query.datasourceId)
+    const source = $datasources.list.find((ds) => ds._id === query.datasourceId)
       .source
     return $integrations[source].query[query.queryVerb]
   }
@@ -100,18 +100,20 @@
     readonly
     value={text}
     options={[text]}
-    on:click={dropdownRight.show} />
-  {#if value?.type === 'query'}
+    on:click={dropdownRight.show}
+  />
+  {#if value?.type === "query"}
     <i class="ri-settings-5-line" on:click={drawer.show} />
-    <Drawer title={'Query Parameters'} bind:this={drawer}>
+    <Drawer title={"Query Parameters"} bind:this={drawer}>
       <Button
         slot="buttons"
         cta
         on:click={() => {
-          notifications.success('Query parameters saved.')
+          notifications.success("Query parameters saved.")
           handleSelected(value)
           drawer.hide()
-        }}>
+        }}
+      >
         Save
       </Button>
       <DrawerContent slot="body">
@@ -119,15 +121,20 @@
           {#if value.parameters.length > 0}
             <ParameterBuilder
               bind:customParams={value.queryParams}
-              parameters={queries.find(query => query._id === value._id).parameters}
-              bindings={queryBindableProperties} />
+              parameters={queries.find((query) => query._id === value._id)
+                .parameters}
+              bindings={queryBindableProperties}
+            />
           {/if}
           <IntegrationQueryEditor
             height={200}
             query={value}
             schema={fetchQueryDefinition(value)}
-            datasource={$datasources.list.find(ds => ds._id === value.datasourceId)}
-            editable={false} />
+            datasource={$datasources.list.find(
+              (ds) => ds._id === value.datasourceId
+            )}
+            editable={false}
+          />
         </Layout>
       </DrawerContent>
     </Drawer>
@@ -169,7 +176,8 @@
       {#each queries as query}
         <li
           class:selected={value === query}
-          on:click={() => handleSelected(query)}>
+          on:click={() => handleSelected(query)}
+        >
           {query.label}
         </li>
       {/each}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte
index 97a8654971..b2fb30f920 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte
@@ -15,7 +15,7 @@
   const saveEventData = async () => {
     // any automations that need created from event triggers
     const automationsToCreate = value.filter(
-      action => action["##eventHandlerType"] === "Trigger Automation"
+      (action) => action["##eventHandlerType"] === "Trigger Automation"
     )
     for (let action of automationsToCreate) {
       await createAutomation(action.parameters)
@@ -27,7 +27,7 @@
   }
 
   // called by the parent modal when actions are saved
-  const createAutomation = async parameters => {
+  const createAutomation = async (parameters) => {
     if (parameters.automationId || !parameters.newAutomationName) return
     await automationStore.actions.create({ name: parameters.newAutomationName })
     const appActionDefinition = $automationStore.blockDefinitions.TRIGGER.APP
@@ -52,7 +52,7 @@
 </script>
 
 <Button secondary on:click={drawer.show}>Define Actions</Button>
-<Drawer bind:this={drawer} title={'Actions'}>
+<Drawer bind:this={drawer} title={"Actions"}>
   <svelte:fragment slot="description">
     Define what actions to run.
   </svelte:fragment>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte
index d7ec0e8dd9..b824d09bab 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte
@@ -16,22 +16,25 @@
   <Select
     bind:value={parameters.tableId}
     options={tableOptions}
-    getOptionLabel={table => table.name}
-    getOptionValue={table => table._id} />
+    getOptionLabel={(table) => table.name}
+    getOptionValue={(table) => table._id}
+  />
 
   <Label small>Row ID</Label>
   <DrawerBindableInput
     {bindings}
     title="Row ID to delete"
     value={parameters.rowId}
-    on:change={value => (parameters.rowId = value.detail)} />
+    on:change={(value) => (parameters.rowId = value.detail)}
+  />
 
   <Label small>Row Rev</Label>
   <DrawerBindableInput
     {bindings}
     title="Row rev to delete"
     value={parameters.revId}
-    on:change={value => (parameters.revId = value.detail)} />
+    on:change={(value) => (parameters.revId = value.detail)}
+  />
 </div>
 
 <style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogIn.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogIn.svelte
index eee4dc2bc7..21a60d7906 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogIn.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogIn.svelte
@@ -15,14 +15,16 @@
   <DrawerBindableInput
     title="Email"
     value={parameters.email}
-    on:change={value => (parameters.email = value.detail)}
-    {bindings} />
+    on:change={(value) => (parameters.email = value.detail)}
+    {bindings}
+  />
   <Label small>Password</Label>
   <DrawerBindableInput
     title="Password"
     value={parameters.password}
-    on:change={value => (parameters.password = value.detail)}
-    {bindings} />
+    on:change={(value) => (parameters.password = value.detail)}
+    {bindings}
+  />
 </div>
 
 <style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
index b9567c6523..4b7766ed6d 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
@@ -18,8 +18,9 @@
     title="Destination URL"
     placeholder="/screen"
     value={parameters.url}
-    on:change={value => (parameters.url = value.detail)}
-    {bindings} />
+    on:change={(value) => (parameters.url = value.detail)}
+    {bindings}
+  />
 </div>
 
 <style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte
index 7362d6920f..abd43c33e4 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte
@@ -15,8 +15,8 @@
     : AUTOMATION_STATUS.NEW
 
   $: automations = $automationStore.automations
-    .filter(a => a.definition.trigger?.stepId === "APP")
-    .map(automation => {
+    .filter((a) => a.definition.trigger?.stepId === "APP")
+    .map((automation) => {
       const schema = Object.entries(
         automation.definition.trigger.inputs.fields
       ).map(([name, type]) => ({ name, type }))
@@ -29,11 +29,11 @@
     })
   $: hasAutomations = automations && automations.length > 0
   $: selectedAutomation = automations?.find(
-    a => a._id === parameters?.automationId
+    (a) => a._id === parameters?.automationId
   )
   $: selectedSchema = selectedAutomation?.schema
 
-  const onFieldsChanged = e => {
+  const onFieldsChanged = (e) => {
     parameters.fields = e.detail
   }
 
@@ -57,7 +57,8 @@
       <input
         type="radio"
         value={AUTOMATION_STATUS.NEW}
-        bind:group={automationStatus} />
+        bind:group={automationStatus}
+      />
       <Label small>Create a new automation</Label>
     </div>
     <div class="radio-container" on:click={hasAutomations ? setExisting : null}>
@@ -65,7 +66,8 @@
         type="radio"
         value={AUTOMATION_STATUS.EXISTING}
         bind:group={automationStatus}
-        disabled={!hasAutomations} />
+        disabled={!hasAutomations}
+      />
       <Label small grey={!hasAutomations}>Use an existing automation</Label>
     </div>
   </div>
@@ -78,12 +80,14 @@
         bind:value={parameters.automationId}
         placeholder="Choose automation"
         options={automations}
-        getOptionLabel={x => x.name}
-        getOptionValue={x => x._id} />
+        getOptionLabel={(x) => x.name}
+        getOptionValue={(x) => x._id}
+      />
     {:else}
       <Input
         bind:value={parameters.newAutomationName}
-        placeholder="Enter automation name" />
+        placeholder="Enter automation name"
+      />
     {/if}
 
     {#key parameters.automationId}
@@ -91,7 +95,8 @@
         schemaFields={selectedSchema}
         parameterFields={parameters.fields}
         fieldLabel="Field"
-        on:change={onFieldsChanged} />
+        on:change={onFieldsChanged}
+      />
     {/key}
   </div>
 </div>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
index 7e79e5ce4f..f0e6bda8aa 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
@@ -17,8 +17,9 @@
   <Select
     bind:value={parameters.componentId}
     options={actionProviders}
-    getOptionLabel={x => x._instanceName}
-    getOptionValue={x => x._id} />
+    getOptionLabel={(x) => x._instanceName}
+    getOptionValue={(x) => x._id}
+  />
 </div>
 
 <style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
index dc0a739355..e0e019a5a1 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
@@ -1,41 +1,41 @@
-<script>
-  import { Select } from "@budibase/bbui"
-  import {
-    getDatasourceForProvider,
-    getSchemaForDatasource,
-  } from "builderStore/dataBinding"
-  import { currentAsset } from "builderStore"
-  import { createEventDispatcher } from "svelte"
-
-  export let componentInstance = {}
-  export let value = ""
-  export let multiselect = false
-  export let placeholder
-
-  const dispatch = createEventDispatcher()
-  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
-  $: schema = getSchemaForDatasource(datasource).schema
-  $: options = Object.keys(schema || {})
-  $: boundValue = getValidValue(value, options)
-
-  const getValidValue = (value, options) => {
-    // Reset value if there aren't any options
-    if (!Array.isArray(options)) {
-      return null
-    }
-
-    // Reset value if the value isn't found in the options
-    if (options.indexOf(value) === -1) {
-      return null
-    }
-
-    return value
-  }
-
-  const onChange = value => {
-    boundValue = getValidValue(value.detail, options)
-    dispatch("change", boundValue)
-  }
-</script>
-
-<Select {placeholder} value={boundValue} on:change={onChange} {options} />
+<script>
+  import { Select } from "@budibase/bbui"
+  import {
+    getDatasourceForProvider,
+    getSchemaForDatasource,
+  } from "builderStore/dataBinding"
+  import { currentAsset } from "builderStore"
+  import { createEventDispatcher } from "svelte"
+
+  export let componentInstance = {}
+  export let value = ""
+  export let multiselect = false
+  export let placeholder
+
+  const dispatch = createEventDispatcher()
+  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: schema = getSchemaForDatasource(datasource).schema
+  $: options = Object.keys(schema || {})
+  $: boundValue = getValidValue(value, options)
+
+  const getValidValue = (value, options) => {
+    // Reset value if there aren't any options
+    if (!Array.isArray(options)) {
+      return null
+    }
+
+    // Reset value if the value isn't found in the options
+    if (options.indexOf(value) === -1) {
+      return null
+    }
+
+    return value
+  }
+
+  const onChange = (value) => {
+    boundValue = getValidValue(value.detail, options)
+    dispatch("change", boundValue)
+  }
+</script>
+
+<Select {placeholder} value={boundValue} on:change={onChange} {options} />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButtonGroup.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButtonGroup.svelte
index f8c5f5cf48..aaae1b993c 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButtonGroup.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButtonGroup.svelte
@@ -6,7 +6,7 @@
   export let isMultiSelect = false
   export let value = []
   export let initialValue = ""
-  export let onChange = selected => {}
+  export let onChange = (selected) => {}
 
   onMount(() => {
     if (!value && !!initialValue) {
@@ -18,7 +18,7 @@
     let val
     if (isMultiSelect) {
       if (value.includes(v)) {
-        let idx = value.findIndex(i => i === v)
+        let idx = value.findIndex((i) => i === v)
         val = [...value].splice(idx, 1)
       } else {
         val = [...value, v]
@@ -29,7 +29,7 @@
     onChange(val)
   }
 
-  const checkSelected = val =>
+  const checkSelected = (val) =>
     isMultiSelect ? value.includes(val) : value === val
 </script>
 
@@ -37,9 +37,12 @@
   {#each buttonProps as props}
     <div class="button-container">
       <FlatButton
-        selected={isMultiSelect ? value.includes(props.value) : value === props.value}
+        selected={isMultiSelect
+          ? value.includes(props.value)
+          : value === props.value}
         onClick={onButtonClicked}
-        {...props} />
+        {...props}
+      />
     </div>
   {/each}
 </div>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
index 1d7f5367df..4216bba018 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
@@ -15,7 +15,7 @@
   $: form = findClosestMatchingComponent(
     $currentAsset.props,
     componentInstance._id,
-    component => component._component === "@budibase/standard-components/form"
+    (component) => component._component === "@budibase/standard-components/form"
   )
   $: datasource = getDatasourceForProvider($currentAsset, form)
   $: schema = getSchemaForDatasource(datasource, true).schema
@@ -24,9 +24,9 @@
   const getOptions = (schema, fieldType) => {
     let entries = Object.entries(schema ?? {})
     if (fieldType) {
-      entries = entries.filter(entry => entry[1].type === fieldType)
+      entries = entries.filter((entry) => entry[1].type === fieldType)
     }
-    return entries.map(entry => entry[0])
+    return entries.map((entry) => entry[0])
   }
 </script>
 
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
index 406dc16d50..597c01ec43 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
@@ -58,7 +58,7 @@
 
   function findIconByTerm(term) {
     const r = new RegExp(`\^${term}`, "i")
-    return icons.filter(i => r.test(i))
+    return icons.filter((i) => r.test(i))
   }
 
   async function switchLetter(letter) {
@@ -72,7 +72,7 @@
   }
   async function findIconOnPage() {
     loading = true
-    const iconIdx = filteredIcons.findIndex(i => i.value === value)
+    const iconIdx = filteredIcons.findIndex((i) => i.value === value)
     if (iconIdx !== -1) {
       currentPage = Math.ceil(iconIdx / maxIconsPerPage)
     }
@@ -119,10 +119,7 @@
 <div bind:this={buttonAnchor}>
   <Button secondary small on:click={dropdown.show}>{displayValue}</Button>
 </div>
-<Popover
-  bind:this={dropdown}
-  on:open={setSelectedUI}
-  anchor={buttonAnchor}>
+<Popover bind:this={dropdown} on:open={setSelectedUI} anchor={buttonAnchor}>
   <div class="container">
     <div class="search-area">
       <div class="alphabet-area">
@@ -130,7 +127,8 @@
           <span
             class="letter"
             class:letter-selected={letter === selectedLetter}
-            on:click={() => switchLetter(letter)}>
+            on:click={() => switchLetter(letter)}
+          >
             {letter}
           </span>
           {#if idx !== alphabet.length - 1}<span>-</span>{/if}
@@ -161,7 +159,8 @@
             <div
               class="icon-container"
               class:selected={value === `ri-${icon}-fill`}
-              on:click={() => (value = `ri-${icon}-fill`)}>
+              on:click={() => (value = `ri-${icon}-fill`)}
+            >
               <div class="icon-preview">
                 <i class={`ri-${icon}-fill ri-xl`} />
               </div>
@@ -170,7 +169,8 @@
             <div
               class="icon-container"
               class:selected={value === `ri-${icon}-line`}
-              on:click={() => (value = `ri-${icon}-line`)}>
+              on:click={() => (value = `ri-${icon}-line`)}
+            >
               <div class="icon-preview">
                 <i class={`ri-${icon}-line ri-xl`} />
               </div>
@@ -182,7 +182,7 @@
     {:else}
       <div class="no-icons">
         <h5>
-          {`There is no icons for this ${searchTerm ? 'search' : 'page'}`}
+          {`There is no icons for this ${searchTerm ? "search" : "page"}`}
         </h5>
       </div>
     {/if}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LayoutSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LayoutSelect.svelte
index 4e0a2c3f67..5fcbc8a236 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LayoutSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LayoutSelect.svelte
@@ -9,5 +9,6 @@
   bind:value
   on:change
   options={$store.layouts}
-  getOptionLabel={layout => layout.name}
-  getOptionValue={layout => layout._id} />
+  getOptionLabel={(layout) => layout.name}
+  getOptionValue={(layout) => layout._id}
+/>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
index 44cea7a627..645ae0af1c 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
@@ -23,10 +23,10 @@
     if (!Array.isArray(selectedOptions)) {
       selectedOptions = []
     }
-    return selectedOptions.filter(val => allOptions.indexOf(val) !== -1)
+    return selectedOptions.filter((val) => allOptions.indexOf(val) !== -1)
   }
 
-  const setValue = value => {
+  const setValue = (value) => {
     boundValue = getValidOptions(value.detail, options)
     dispatch("change", boundValue)
   }
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
index 59aff93be1..18626f8919 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@@ -29,7 +29,8 @@
     $store.selectedComponentId
   )
   $: safeValue = getSafeValue(value, props.defaultValue, bindableProperties)
-  $: replaceBindings = val => readableToRuntimeBinding(bindableProperties, val)
+  $: replaceBindings = (val) =>
+    readableToRuntimeBinding(bindableProperties, val)
 
   const handleClose = () => {
     handleChange(temporaryBindableValue)
@@ -38,7 +39,7 @@
 
   // Handle a value change of any type
   // String values have any bindings handled
-  const handleChange = value => {
+  const handleChange = (value) => {
     let innerVal = value
     if (value && typeof value === "object") {
       if ("detail" in value) {
@@ -80,27 +81,32 @@
       onChange={handleChange}
       {type}
       {...props}
-      name={key} />
+      name={key}
+    />
   </div>
-  {#if bindable && !key.startsWith('_') && type === 'text'}
+  {#if bindable && !key.startsWith("_") && type === "text"}
     <div
       class="icon"
       data-cy={`${key}-binding-button`}
-      on:click={bindingDrawer.show}>
+      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.
+        Add the objects on the left to enrich your text.
       </svelte:fragment>
-      <Button cta slot="buttons" disabled={!valid} on:click={handleClose}>Save</Button>
+      <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} />
+        on:update={(e) => (temporaryBindableValue = e.detail)}
+        {bindableProperties}
+      />
     </Drawer>
   {/if}
 </div>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
index 93be958d55..b2bd763014 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
@@ -10,30 +10,31 @@
   export let open = false
 
   $: style = componentInstance["_styles"][styleCategory] || {}
-  $: changed = properties.some(prop => hasPropChanged(style, prop))
+  $: changed = properties.some((prop) => hasPropChanged(style, prop))
 
   const hasPropChanged = (style, prop) => {
     return style[prop.key] != null && style[prop.key] !== ""
   }
 
-  const getControlProps = props => {
+  const getControlProps = (props) => {
     const { label, key, control, ...otherProps } = props || {}
     return otherProps || {}
   }
 </script>
 
-<DetailSummary name={`${name}${changed ? ' *' : ''}`} on:open show={open} thin>
+<DetailSummary name={`${name}${changed ? " *" : ""}`} on:open show={open} thin>
   {#if open}
     <div>
       {#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)}
         <PropertyControl
           bindable={false}
-          label={`${prop.label}${hasPropChanged(style, prop) ? ' *' : ''}`}
+          label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
           control={prop.control}
           key={prop.key}
           value={style[prop.key]}
-          onChange={value => onStyleChanged(styleCategory, prop.key, value)}
-          props={getControlProps(prop)} />
+          onChange={(value) => onStyleChanged(styleCategory, prop.key, value)}
+          props={getControlProps(prop)}
+        />
       {/each}
     </div>
   {/if}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RoleSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RoleSelect.svelte
index d8de89a92a..751883c4ea 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RoleSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RoleSelect.svelte
@@ -9,5 +9,6 @@
   bind:value
   on:change
   options={$roles}
-  getOptionLabel={role => role.name}
-  getOptionValue={role => role._id} />
+  getOptionLabel={(role) => role.name}
+  getOptionValue={(role) => role._id}
+/>
diff --git a/packages/builder/src/components/feedback/FeedbackIframe.svelte b/packages/builder/src/components/feedback/FeedbackIframe.svelte
index 17c6059de4..3a23d818da 100644
--- a/packages/builder/src/components/feedback/FeedbackIframe.svelte
+++ b/packages/builder/src/components/feedback/FeedbackIframe.svelte
@@ -13,7 +13,7 @@
   // this means that we can submit using the Builder's posthog setup
   window.addEventListener(
     "message",
-    function(ev) {
+    function (ev) {
       if (ev.origin !== feedbackUrl) return
 
       if (ev.data.type === "loaded") {
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index 21cdcd0577..a6477370c8 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -34,7 +34,8 @@
         on:change={updateQuery}
         readOnly={!editable}
         value={query.fields.sql}
-        parameters={query.parameters} />
+        parameters={query.parameters}
+      />
     {:else if schema.type === QueryTypes.JSON}
       <Editor
         editorHeight={height}
@@ -43,7 +44,8 @@
         on:change={updateQuery}
         readOnly={!editable}
         value={query.fields.json}
-        parameters={query.parameters} />
+        parameters={query.parameters}
+      />
     {:else if schema.type === QueryTypes.FIELDS}
       <FieldsBuilder bind:fields={query.fields} {schema} {editable} />
       {#if schema.urlDisplay}
diff --git a/packages/builder/src/components/login/LoginForm.svelte b/packages/builder/src/components/login/LoginForm.svelte
index 405d429e7f..4de003379b 100644
--- a/packages/builder/src/components/login/LoginForm.svelte
+++ b/packages/builder/src/components/login/LoginForm.svelte
@@ -43,7 +43,8 @@
     onConfirm={login}
     confirmText="Log In"
     showCancelButton={false}
-    showCloseIcon={false}>
+    showCloseIcon={false}
+  >
     <Input label="Email" bind:value={username} />
     <Input label="Password" type="password" on:change bind:value={password} />
     <div class="footer" slot="footer">
diff --git a/packages/builder/src/components/settings/Integration.svelte b/packages/builder/src/components/settings/Integration.svelte
index f588649c9d..cd2a38ba1b 100644
--- a/packages/builder/src/components/settings/Integration.svelte
+++ b/packages/builder/src/components/settings/Integration.svelte
@@ -15,7 +15,7 @@
   </div>
   <div class="footer">
     <Button wide error={remove} secondary={!remove} on:click>
-      <span>{remove ? 'Remove' : 'Add'}</span>
+      <span>{remove ? "Remove" : "Add"}</span>
     </Button>
   </div>
 </div>
diff --git a/packages/builder/src/components/settings/Link.svelte b/packages/builder/src/components/settings/Link.svelte
index fdfc8bb613..88bd698dc1 100644
--- a/packages/builder/src/components/settings/Link.svelte
+++ b/packages/builder/src/components/settings/Link.svelte
@@ -8,7 +8,8 @@
 <div
   class="topnavitemright settings"
   data-cy="settings-icon"
-  on:click={modal.show}>
+  on:click={modal.show}
+>
   <Icon hoverable name="Settings" />
 </div>
 <Modal bind:this={modal} width="600px">
diff --git a/packages/builder/src/components/settings/SettingsModal.svelte b/packages/builder/src/components/settings/SettingsModal.svelte
index 5e69489830..5563ad9fbd 100644
--- a/packages/builder/src/components/settings/SettingsModal.svelte
+++ b/packages/builder/src/components/settings/SettingsModal.svelte
@@ -6,7 +6,8 @@
 <ModalContent
   title="Settings"
   showConfirmButton={false}
-  showCancelButton={false}>
+  showCancelButton={false}
+>
   <div class="container">
     <Tabs selected="General">
       <Tab title="General">
diff --git a/packages/builder/src/components/settings/ThemeEditor.svelte b/packages/builder/src/components/settings/ThemeEditor.svelte
index d971f01764..8e387b6492 100644
--- a/packages/builder/src/components/settings/ThemeEditor.svelte
+++ b/packages/builder/src/components/settings/ThemeEditor.svelte
@@ -8,4 +8,5 @@
   options={$themeStore.options}
   bind:value={$themeStore.theme}
   placeholder={null}
-  getOptionLabel={capitalise} />
+  getOptionLabel={capitalise}
+/>
diff --git a/packages/builder/src/components/settings/ThemeEditorDropdown.svelte b/packages/builder/src/components/settings/ThemeEditorDropdown.svelte
index b7a6d4e6ad..8e1a9a4601 100644
--- a/packages/builder/src/components/settings/ThemeEditorDropdown.svelte
+++ b/packages/builder/src/components/settings/ThemeEditorDropdown.svelte
@@ -12,7 +12,8 @@
   <ModalContent
     title="Builder Theme"
     confirmText="Done"
-    showCancelButton={false}>
+    showCancelButton={false}
+  >
     <ThemeEditor />
   </ModalContent>
 </Modal>
diff --git a/packages/builder/src/components/settings/tabs/APIKeys.svelte b/packages/builder/src/components/settings/tabs/APIKeys.svelte
index 8f9945e6d3..e0b3daf9d4 100644
--- a/packages/builder/src/components/settings/tabs/APIKeys.svelte
+++ b/packages/builder/src/components/settings/tabs/APIKeys.svelte
@@ -36,9 +36,10 @@
 
 <div class="container">
   <Input
-    on:change={e => updateKey(['budibase', e.detail])}
+    on:change={(e) => updateKey(["budibase", e.detail])}
     value={keys.budibase}
-    label="Budibase Cloud API Key" />
+    label="Budibase Cloud API Key"
+  />
   <Link primary href="https://portal.budi.live">
     Log in to the Budibase Hosting Portal to get your API Key. →
   </Link>
diff --git a/packages/builder/src/components/settings/tabs/DangerZone.svelte b/packages/builder/src/components/settings/tabs/DangerZone.svelte
index b9643e9b76..f113bd1b77 100644
--- a/packages/builder/src/components/settings/tabs/DangerZone.svelte
+++ b/packages/builder/src/components/settings/tabs/DangerZone.svelte
@@ -19,18 +19,19 @@
   <Body>
     Type
     <b>DELETE</b>
-    into the textbox, then click the following button to delete your entire web
-    app.
+    into the textbox, then click the following button to delete your entire web app.
   </Body>
   <Input
-    on:change={e => (value = e.detail)}
+    on:change={(e) => (value = e.detail)}
     disabled={loading}
-    placeholder="" />
+    placeholder=""
+  />
   <div class="buttons">
     <Button
       warning
-      disabled={value !== 'DELETE' || loading}
-      on:click={deleteApp}>
+      disabled={value !== "DELETE" || loading}
+      on:click={deleteApp}
+    >
       Delete Entire App
     </Button>
   </div>
diff --git a/packages/builder/src/components/settings/tabs/General.svelte b/packages/builder/src/components/settings/tabs/General.svelte
index a556b0b855..018017eacb 100644
--- a/packages/builder/src/components/settings/tabs/General.svelte
+++ b/packages/builder/src/components/settings/tabs/General.svelte
@@ -15,7 +15,7 @@
   async function updateApplication(data) {
     const response = await api.put(`/api/applications/${$store.appId}`, data)
     await response.json()
-    store.update(state => {
+    store.update((state) => {
       state = {
         ...state,
         ...data,
@@ -63,14 +63,10 @@
         existingAppUrls.splice(urlIdx, 1)
       }
       nameValidation = {
-        name: string()
-          .required(nameError)
-          .notOneOf(existingAppNames),
+        name: string().required(nameError).notOneOf(existingAppNames),
       }
       urlValidation = {
-        url: string()
-          .required(urlError)
-          .notOneOf(existingAppUrls),
+        url: string().required(urlError).notOneOf(existingAppUrls),
       }
     } else {
       nameValidation = { name: string().required(nameError) }
@@ -80,21 +76,24 @@
 
 <div class="container">
   <Input
-    on:change={e => updateApplication({ name: e.detail })}
+    on:change={(e) => updateApplication({ name: e.detail })}
     value={$store.name}
     error={nameError}
-    label="App Name" />
-  {#if $hostingStore.hostingInfo.type === 'self'}
+    label="App Name"
+  />
+  {#if $hostingStore.hostingInfo.type === "self"}
     <Input
-      on:change={e => updateApplication({ url: e.detail })}
+      on:change={(e) => updateApplication({ url: e.detail })}
       value={$store.url}
       error={urlError}
-      label="App URL" />
+      label="App URL"
+    />
   {/if}
   <TextArea
-    on:change={e => updateApplication({ description: e.detail })}
+    on:change={(e) => updateApplication({ description: e.detail })}
     value={$store.description}
-    label="App Description" />
+    label="App Description"
+  />
 </div>
 
 <style>
diff --git a/packages/builder/src/components/start/Indicator.svelte b/packages/builder/src/components/start/Indicator.svelte
index 416336124f..b77d2589fd 100644
--- a/packages/builder/src/components/start/Indicator.svelte
+++ b/packages/builder/src/components/start/Indicator.svelte
@@ -10,7 +10,8 @@
         height="10"
         viewBox="0 0 12 10"
         fill="none"
-        xmlns="http://www.w3.org/2000/svg">
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
           fill-rule="evenodd"
           clip-rule="evenodd"
@@ -29,7 +30,8 @@
           1.41607 3.46441 1.55132 3.52467C1.68657 3.58493 1.80829 3.67182
           1.90923 3.78014L4.98762 6.85706L10.0933 0.35187C10.1024 0.340482
           10.1122 0.329679 10.1227 0.319527H10.1212Z"
-          fill="var(--background)" />
+          fill="var(--background)"
+        />
       </svg>
     {:else}{step}{/if}
   </div>
diff --git a/packages/builder/src/pages/builder/[application]/_reset.svelte b/packages/builder/src/pages/builder/[application]/_reset.svelte
index b2165efd89..6ac66b1f90 100644
--- a/packages/builder/src/pages/builder/[application]/_reset.svelte
+++ b/packages/builder/src/pages/builder/[application]/_reset.svelte
@@ -15,7 +15,7 @@
 
   let promise = getPackage()
   $: selected = capitalise(
-    $layout.children.find(layout => $isActive(layout.path))?.title ?? "data"
+    $layout.children.find((layout) => $isActive(layout.path))?.title ?? "data"
   )
 
   async function getPackage() {
@@ -37,10 +37,10 @@
   // e.g. if one of your screens is selected on front end, then
   // you browse to backend, when you click frontend, you will be
   // brought back to the same screen
-  const topItemNavigate = path => () => {
-    const activeTopNav = $layout.children.find(c => $isActive(c.path))
+  const topItemNavigate = (path) => () => {
+    const activeTopNav = $layout.children.find((c) => $isActive(c.path))
     if (!activeTopNav) return
-    store.update(state => {
+    store.update((state) => {
       if (!state.previousTopNavPath) state.previousTopNavPath = {}
       state.previousTopNavPath[activeTopNav.path] = window.location.pathname
       $goto(state.previousTopNavPath[path] || path)
@@ -60,7 +60,8 @@
           <img
             src={Logo}
             alt="budibase icon"
-            on:click={() => $goto(`/builder/`)} />
+            on:click={() => $goto(`/builder/`)}
+          />
         </button>
 
         <div class="tabs">
@@ -70,7 +71,8 @@
                 quiet
                 selected={$isActive(path)}
                 on:click={topItemNavigate(path)}
-                title={capitalise(title)} />
+                title={capitalise(title)}
+              />
             {/each}
           </Tabs>
         </div>
@@ -84,7 +86,8 @@
         <div class="topnavitemright">
           <a
             target="_blank"
-            href="https://github.com/Budibase/budibase/discussions">
+            href="https://github.com/Budibase/budibase/discussions"
+          >
             <i class="ri-github-fill" />
           </a>
         </div>
@@ -93,7 +96,8 @@
           secondary
           on:click={() => {
             window.open(`/${application}`)
-          }}>
+          }}
+        >
           Preview
         </Button>
       </div>
@@ -101,7 +105,8 @@
     <div class="beta">
       <Button
         secondary
-        href="https://github.com/Budibase/budibase/discussions/categories/ideas">
+        href="https://github.com/Budibase/budibase/discussions/categories/ideas"
+      >
         Request feature
       </Button>
     </div>
diff --git a/packages/builder/src/pages/builder/[application]/automate/[automation]/_layout.svelte b/packages/builder/src/pages/builder/[application]/automate/[automation]/_layout.svelte
index 3be71a1bbe..11eb2b043b 100644
--- a/packages/builder/src/pages/builder/[application]/automate/[automation]/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/automate/[automation]/_layout.svelte
@@ -4,7 +4,7 @@
 
   if ($params.automation) {
     const automation = $automationStore.automations.find(
-      m => m._id === $params.automation
+      (m) => m._id === $params.automation
     )
     if (automation) {
       automationStore.actions.select(automation)
diff --git a/packages/builder/src/pages/builder/[application]/data/_layout.svelte b/packages/builder/src/pages/builder/[application]/data/_layout.svelte
index 18f81114b2..212235f5f9 100644
--- a/packages/builder/src/pages/builder/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/_layout.svelte
@@ -20,7 +20,7 @@
   let selected = $isActive("./datasource") ? "External" : "Internal"
 
   function selectFirstTableOrSource({ detail }) {
-    const { key } = tabs.find(t => t.title === detail)
+    const { key } = tabs.find((t) => t.title === detail)
     if (key === "datasource") {
       $goto("./datasource")
     } else {
@@ -54,7 +54,8 @@
     </Tabs>
     <div
       class="add-button"
-      data-cy={`new-${selected === 'External' ? 'datasource' : 'table'}`}>
+      data-cy={`new-${selected === "External" ? "datasource" : "table"}`}
+    >
       <Icon hoverable name="AddCircle" on:click={modal.show} />
     </div>
   </div>
diff --git a/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/[query]/_layout.svelte b/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/[query]/_layout.svelte
index 4d6acc22ae..f1fe67840b 100644
--- a/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/[query]/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/[query]/_layout.svelte
@@ -3,7 +3,7 @@
   import { queries } from "stores/backend"
 
   if ($params.query) {
-    const query = $queries.list.find(m => m._id === $params.query)
+    const query = $queries.list.find((m) => m._id === $params.query)
     if (query) {
       queries.select(query)
     }
diff --git a/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte b/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
index eece44f50b..8e5e471972 100644
--- a/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
@@ -15,7 +15,7 @@
   }
 
   $: selectedQuery = $queries.list.find(
-    query => query._id === $queries.selected
+    (query) => query._id === $queries.selected
   ) || {
     datasourceId: $params.selectedDatasource,
     parameters: [],
diff --git a/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/_layout.svelte b/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/_layout.svelte
index 13f8719594..cfae619955 100644
--- a/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/_layout.svelte
@@ -4,7 +4,7 @@
 
   if ($params.selectedDatasource) {
     const datasource = $datasources.list.find(
-      m => m._id === $params.selectedDatasource
+      (m) => m._id === $params.selectedDatasource
     )
     if (datasource) {
       datasources.select(datasource._id)
diff --git a/packages/builder/src/pages/builder/[application]/data/table/[selectedTable]/_layout.svelte b/packages/builder/src/pages/builder/[application]/data/table/[selectedTable]/_layout.svelte
index 14f6303e5f..5c3772620a 100644
--- a/packages/builder/src/pages/builder/[application]/data/table/[selectedTable]/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/table/[selectedTable]/_layout.svelte
@@ -3,7 +3,7 @@
   import { tables } from "stores/backend"
 
   if ($params.selectedTable) {
-    const table = $tables.list.find(m => m._id === $params.selectedTable)
+    const table = $tables.list.find((m) => m._id === $params.selectedTable)
     if (table) {
       tables.select(table)
     }
diff --git a/packages/builder/src/pages/builder/[application]/data/table/[selectedTable]/relationship/[selectedRow]/[selectedField]/index.svelte b/packages/builder/src/pages/builder/[application]/data/table/[selectedTable]/relationship/[selectedRow]/[selectedField]/index.svelte
index 5e90236ec7..eddb5ab598 100644
--- a/packages/builder/src/pages/builder/[application]/data/table/[selectedTable]/relationship/[selectedRow]/[selectedField]/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/table/[selectedTable]/relationship/[selectedRow]/[selectedField]/index.svelte
@@ -6,4 +6,5 @@
 <RelationshipDataTable
   tableId={$params.selectedTable}
   rowId={$params.selectedRow}
-  fieldName={decodeURI($params.selectedField)} />
+  fieldName={decodeURI($params.selectedField)}
+/>
diff --git a/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
index 38562fbfa7..1e474de58e 100644
--- a/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
@@ -51,7 +51,7 @@
       assetType = FrontendTypes.SCREEN
     }
     if (assetType !== state.currentFrontEndType) {
-      store.update(state => {
+      store.update((state) => {
         state.currentFrontEndType = assetType
         return state
       })
@@ -74,7 +74,7 @@
       }
 
       // Find and select the current asset
-      asset = assetList.find(asset => asset._id === assetId)
+      asset = assetList.find((asset) => asset._id === assetId)
       if (asset && asset._id !== selectedAsset?._id) {
         actions.select(assetId)
       }
@@ -128,7 +128,7 @@
             const componentPath = findComponentPath(asset.props, componentId)
             const componentURL = componentPath
               .slice(1)
-              .map(comp => comp._id)
+              .map((comp) => comp._id)
               .join("/")
             url += `/${componentURL}`
           }
diff --git a/packages/builder/src/pages/builder/[application]/design/[assetType]/index.svelte b/packages/builder/src/pages/builder/[application]/design/[assetType]/index.svelte
index a767b56b4f..bd9a61096e 100644
--- a/packages/builder/src/pages/builder/[application]/design/[assetType]/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/design/[assetType]/index.svelte
@@ -9,7 +9,7 @@
   // If we ever land on this index page we want to correctly update state
   // to select a valid asset. The layout page will in turn update the URL
   // to reflect state.
-  const selectValidAsset = assetType => {
+  const selectValidAsset = (assetType) => {
     let id
     const state = get(store)
     const screens = get(allScreens)
@@ -19,7 +19,7 @@
     if (assetType === FrontendTypes.LAYOUT) {
       if (
         state.selectedLayoutId &&
-        state.layouts.find(layout => layout._id === state.selectedLayoutId)
+        state.layouts.find((layout) => layout._id === state.selectedLayoutId)
       ) {
         id = state.selectedLayoutId
       } else {
@@ -31,12 +31,12 @@
     } else if (assetType === FrontendTypes.SCREEN) {
       if (
         state.selectedScreenId &&
-        screens.find(screen => screen._id === state.selectedScreenId)
+        screens.find((screen) => screen._id === state.selectedScreenId)
       ) {
         id = state.selectedScreenId
       } else {
         // Select the first screen matching the selected role ID
-        const filteredScreens = screens.filter(screen => {
+        const filteredScreens = screens.filter((screen) => {
           return screen.routing?.roleId === role
         })
         id = filteredScreens[0]?._id
diff --git a/packages/builder/src/pages/builder/_layout.svelte b/packages/builder/src/pages/builder/_layout.svelte
index f4f1eb15c8..c01de46334 100644
--- a/packages/builder/src/pages/builder/_layout.svelte
+++ b/packages/builder/src/pages/builder/_layout.svelte
@@ -30,13 +30,15 @@
               <Item
                 external
                 href="https://github.com/Budibase/budibase/discussions"
-                icon="PeopleGroup">
+                icon="PeopleGroup"
+              >
                 Community
               </Item>
               <Item
                 external
                 href="https://github.com/Budibase/budibase/issues/new/choose"
-                icon="Bug">
+                icon="Bug"
+              >
                 Raise an issue
               </Item>
             </Navigation>
diff --git a/packages/client/package.json b/packages/client/package.json
index 01dde2f719..a34835eccf 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -38,7 +38,7 @@
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "svelte": "^3.35.0"
+    "svelte": "^3.37.0"
   },
   "gitHead": "4b6efc42ed3273595c7a129411f4d883733d3321"
 }
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index b32222ce2f..9cd334e780 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -45,7 +45,7 @@
   })
 
   // Gets the component constructor for the specified component
-  const getComponentConstructor = component => {
+  const getComponentConstructor = (component) => {
     const split = component?.split("/")
     const name = split?.[split.length - 1]
     if (name === "screenslot" && $builderStore.previewType !== "layout") {
@@ -79,7 +79,7 @@
       componentProps = {}
       propsChanged = true
     }
-    Object.keys(enrichedProps).forEach(key => {
+    Object.keys(enrichedProps).forEach((key) => {
       if (!propsAreSame(enrichedProps[key], componentProps[key])) {
         propsChanged = true
         componentProps[key] = enrichedProps[key]
diff --git a/packages/client/src/components/NotificationDisplay.svelte b/packages/client/src/components/NotificationDisplay.svelte
index 9f7f4083c2..ca457ca2c4 100644
--- a/packages/client/src/components/NotificationDisplay.svelte
+++ b/packages/client/src/components/NotificationDisplay.svelte
@@ -19,7 +19,8 @@
       animate:flip
       class="toast"
       style="background: {themes[notification.type]};"
-      transition:fly={{ y: -30 }}>
+      transition:fly={{ y: -30 }}
+    >
       <div class="content">{notification.message}</div>
       {#if notification.icon}<i class={notification.icon} />{/if}
     </div>
diff --git a/packages/client/src/components/Router.svelte b/packages/client/src/components/Router.svelte
index ddbe7b77e9..a1114822bb 100644
--- a/packages/client/src/components/Router.svelte
+++ b/packages/client/src/components/Router.svelte
@@ -15,9 +15,9 @@
     id: $routeStore.routeSessionId,
   }
 
-  const getRouterConfig = routes => {
+  const getRouterConfig = (routes) => {
     let config = {}
-    routes.forEach(route => {
+    routes.forEach((route) => {
       config[route.path] = Screen
     })
 
diff --git a/packages/client/yarn.lock b/packages/client/yarn.lock
index aff171b725..1e982786e2 100644
--- a/packages/client/yarn.lock
+++ b/packages/client/yarn.lock
@@ -2873,10 +2873,10 @@ svelte-spa-router@^3.0.5:
   dependencies:
     regexparam "1.3.0"
 
-svelte@^3.35.0:
-  version "3.35.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.35.0.tgz#e0d0ba60c4852181c2b4fd851194be6fda493e65"
-  integrity sha512-gknlZkR2sXheu/X+B7dDImwANVvK1R0QGQLd8CNIfxxGPeXBmePnxfzb6fWwTQRsYQG7lYkZXvpXJvxvpsoB7g==
+svelte@^3.37.0:
+  version "3.38.2"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.38.2.tgz#55e5c681f793ae349b5cc2fe58e5782af4275ef5"
+  integrity sha512-q5Dq0/QHh4BLJyEVWGe7Cej5NWs040LWjMbicBGZ+3qpFWJ1YObRmUDZKbbovddLC9WW7THTj3kYbTOFmU9fbg==
 
 svgo@^1.0.0:
   version "1.3.2"
diff --git a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
index ee819ed8b5..8b856ba15f 100644
--- a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
+++ b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
@@ -16,7 +16,8 @@
   <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
   <link
     href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
-    rel="stylesheet" />
+    rel="stylesheet"
+  />
   <style>
     html,
     body {
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 16d2beeb08..d3030d590d 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -23,7 +23,7 @@
   ],
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.5",
-    "svelte": "^3.35.0",
+    "svelte": "^3.37.0",
     "vite": "^2.1.5"
   },
   "keywords": [
diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte
index 7ce4256844..d7132f0d6d 100644
--- a/packages/standard-components/src/Button.svelte
+++ b/packages/standard-components/src/Button.svelte
@@ -14,8 +14,9 @@
   class="default"
   disabled={disabled || false}
   use:styleable={$component.styles}
-  on:click={onClick}>
-  {text || ''}
+  on:click={onClick}
+>
+  {text || ""}
 </button>
 
 <style>
diff --git a/packages/standard-components/src/Card.svelte b/packages/standard-components/src/Card.svelte
index 85f30c5a09..7c21603351 100644
--- a/packages/standard-components/src/Card.svelte
+++ b/packages/standard-components/src/Card.svelte
@@ -32,7 +32,8 @@
       style="--imageHeight: {imageHeight}"
       class="image"
       src={imageUrl}
-      alt="" />
+      alt=""
+    />
   {/if}
   <div class="content">
     <h2 class="heading">{heading}</h2>
@@ -40,7 +41,8 @@
     <a
       use:linkable
       style="--linkColor: {linkColor}; --linkHoverColor: {linkHoverColor}"
-      href={linkUrl || '/'}>
+      href={linkUrl || "/"}
+    >
       {linkText}
     </a>
   </div>
diff --git a/packages/standard-components/src/CardHorizontal.svelte b/packages/standard-components/src/CardHorizontal.svelte
index 523d796cf5..1fae5a9d81 100644
--- a/packages/standard-components/src/CardHorizontal.svelte
+++ b/packages/standard-components/src/CardHorizontal.svelte
@@ -23,13 +23,15 @@
 <div
   use:styleable={$component.styles}
   class="container"
-  style="--cardWidth: {cardWidth}">
+  style="--cardWidth: {cardWidth}"
+>
   {#if showImage}
     <img
       style="--imageWidth: {imageWidth}; --imageHeight: {imageHeight}"
       class="image"
       src={imageUrl}
-      alt="" />
+      alt=""
+    />
   {/if}
   <div class="content">
     <main>
@@ -40,7 +42,8 @@
       <p class="subtext">{subtext}</p>
       <a
         style="--linkColor: {linkColor}; --linkHoverColor: {linkHoverColor}"
-        href={linkUrl || '/'}>{linkText}</a>
+        href={linkUrl || "/"}>{linkText}</a
+      >
     </footer>
   </div>
 </div>
diff --git a/packages/standard-components/src/Container.svelte b/packages/standard-components/src/Container.svelte
index fb149ef969..03870cb79f 100644
--- a/packages/standard-components/src/Container.svelte
+++ b/packages/standard-components/src/Container.svelte
@@ -7,6 +7,7 @@
 
 <div
   in:transition={{ type: $component.transition }}
-  use:styleable={$component.styles}>
+  use:styleable={$component.styles}
+>
   <slot />
 </div>
diff --git a/packages/standard-components/src/DataProvider.svelte b/packages/standard-components/src/DataProvider.svelte
index 83de1ceb66..1824203381 100644
--- a/packages/standard-components/src/DataProvider.svelte
+++ b/packages/standard-components/src/DataProvider.svelte
@@ -39,7 +39,7 @@
     loaded,
   }
 
-  const fetchData = async dataSource => {
+  const fetchData = async (dataSource) => {
     loading = true
     allRows = await API.fetchDatasource(dataSource)
     loading = false
@@ -53,7 +53,7 @@
     let filteredData = [...rows]
     Object.entries(filter).forEach(([field, value]) => {
       if (value != null && value !== "") {
-        filteredData = filteredData.filter(row => {
+        filteredData = filteredData.filter((row) => {
           return row[field] === value
         })
       }
@@ -84,7 +84,7 @@
     return rows.slice(0, numLimit)
   }
 
-  const getSchema = async dataSource => {
+  const getSchema = async (dataSource) => {
     if (dataSource?.schema) {
       schema = dataSource.schema
     } else if (dataSource?.tableId) {
@@ -94,12 +94,23 @@
       schema = {}
     }
 
-    // Ensure all schema fields have a name property
-    Object.entries(schema).forEach(([key, value]) => {
-      if (!value.name) {
-        value.name = key
+    // Ensure there are "name" properties for all fields and that field schema
+    // are objects
+    let fixedSchema = {}
+    Object.entries(schema || {}).forEach(([fieldName, fieldSchema]) => {
+      if (typeof fieldSchema === "string") {
+        fixedSchema[fieldName] = {
+          type: fieldSchema,
+          name: fieldName,
+        }
+      } else {
+        fixedSchema[fieldName] = {
+          ...fieldSchema,
+          name: fieldName,
+        }
       }
     })
+    schema = fixedSchema
   }
 </script>
 
diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte
index f06ac86afd..09fd0ca6c5 100644
--- a/packages/standard-components/src/Heading.svelte
+++ b/packages/standard-components/src/Heading.svelte
@@ -8,17 +8,17 @@
   export let text = ""
 </script>
 
-{#if type === 'h1'}
+{#if type === "h1"}
   <h1 use:styleable={$component.styles}>{text}</h1>
-{:else if type === 'h2'}
+{:else if type === "h2"}
   <h2 use:styleable={$component.styles}>{text}</h2>
-{:else if type === 'h3'}
+{:else if type === "h3"}
   <h3 use:styleable={$component.styles}>{text}</h3>
-{:else if type === 'h4'}
+{:else if type === "h4"}
   <h4 use:styleable={$component.styles}>{text}</h4>
-{:else if type === 'h5'}
+{:else if type === "h5"}
   <h5 use:styleable={$component.styles}>{text}</h5>
-{:else if type === 'h6'}
+{:else if type === "h6"}
   <h6 use:styleable={$component.styles}>{text}</h6>
 {/if}
 
diff --git a/packages/standard-components/src/Icon.svelte b/packages/standard-components/src/Icon.svelte
index 51e4f5d50b..12dc21d325 100644
--- a/packages/standard-components/src/Icon.svelte
+++ b/packages/standard-components/src/Icon.svelte
@@ -1,21 +1,21 @@
-<script>
-  import { getContext } from "svelte"
-
-  const { styleable } = getContext("sdk")
-  const component = getContext("component")
-
-  export let icon = ""
-  export let size = "fa-lg"
-  export let color = "#f00"
-  export let onClick
-
-  $: styles = {
-    ...$component.styles,
-    normal: {
-      ...$component.styles.normal,
-      color,
-    },
-  }
-</script>
-
-<i use:styleable={styles} class="{icon} {size}" on:click={onClick} />
+<script>
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
+
+  export let icon = ""
+  export let size = "fa-lg"
+  export let color = "#f00"
+  export let onClick
+
+  $: styles = {
+    ...$component.styles,
+    normal: {
+      ...$component.styles.normal,
+      color,
+    },
+  }
+</script>
+
+<i use:styleable={styles} class="{icon} {size}" on:click={onClick} />
diff --git a/packages/standard-components/src/Image.svelte b/packages/standard-components/src/Image.svelte
index b54c84e691..d5cafca4d5 100644
--- a/packages/standard-components/src/Image.svelte
+++ b/packages/standard-components/src/Image.svelte
@@ -17,4 +17,5 @@
   class={className}
   src={url}
   alt={description}
-  use:styleable={$component.styles} />
+  use:styleable={$component.styles}
+/>
diff --git a/packages/standard-components/src/Link.svelte b/packages/standard-components/src/Link.svelte
index 0ada211eb7..2829fef80d 100644
--- a/packages/standard-components/src/Link.svelte
+++ b/packages/standard-components/src/Link.svelte
@@ -13,12 +13,12 @@
 </script>
 
 {#if external}
-  <a href={url || '/'} {target} use:styleable={$component.styles}>
+  <a href={url || "/"} {target} use:styleable={$component.styles}>
     {text}
     <slot />
   </a>
 {:else}
-  <a href={url || '/'} use:linkable {target} use:styleable={$component.styles}>
+  <a href={url || "/"} use:linkable {target} use:styleable={$component.styles}>
     {text}
     <slot />
   </a>
diff --git a/packages/standard-components/src/Login.svelte b/packages/standard-components/src/Login.svelte
index edec1f3992..4d52cccd46 100644
--- a/packages/standard-components/src/Login.svelte
+++ b/packages/standard-components/src/Login.svelte
@@ -55,7 +55,8 @@
           bind:value={email}
           type="email"
           placeholder="Email"
-          class={_inputClass} />
+          class={_inputClass}
+        />
       </div>
 
       <div class="control">
@@ -63,11 +64,12 @@
           bind:value={password}
           type="password"
           placeholder="Password"
-          class={_inputClass} />
+          class={_inputClass}
+        />
       </div>
 
       <button disabled={loading} on:click={login} class={_buttonClass}>
-        {buttonText || 'Log In'}
+        {buttonText || "Log In"}
       </button>
     </div>
 
diff --git a/packages/standard-components/src/Search.svelte b/packages/standard-components/src/Search.svelte
index aeaebcc0fa..29ca3b011b 100644
--- a/packages/standard-components/src/Search.svelte
+++ b/packages/standard-components/src/Search.svelte
@@ -86,20 +86,20 @@
         {#each columns as field}
           <div class="form-field">
             <Label extraSmall grey>{schema[field].name}</Label>
-            {#if schema[field].type === 'options'}
+            {#if schema[field].type === "options"}
               <Select secondary bind:value={search[field]}>
                 <option value="">Choose an option</option>
                 {#each schema[field].constraints.inclusion as opt}
                   <option>{opt}</option>
                 {/each}
               </Select>
-            {:else if schema[field].type === 'datetime'}
+            {:else if schema[field].type === "datetime"}
               <DatePicker bind:value={search[field]} />
-            {:else if schema[field].type === 'boolean'}
+            {:else if schema[field].type === "boolean"}
               <Toggle text={schema[field].name} bind:checked={search[field]} />
-            {:else if schema[field].type === 'number'}
+            {:else if schema[field].type === "number"}
               <Input type="number" bind:value={search[field]} />
-            {:else if schema[field].type === 'string'}
+            {:else if schema[field].type === "string"}
               <Input bind:value={search[field]} />
             {/if}
           </div>
@@ -111,7 +111,8 @@
           on:click={() => {
             search = {}
             bookmark = null
-          }}>
+          }}
+        >
           Reset
         </Button>
         <Button
@@ -119,7 +120,8 @@
           on:click={() => {
             bookmark = null
             fetchData(table, bookmark)
-          }}>
+          }}
+        >
           Search
         </Button>
       </div>
diff --git a/packages/standard-components/src/charts/BarChart.svelte b/packages/standard-components/src/charts/BarChart.svelte
index a2259aa754..58fde4cfcd 100644
--- a/packages/standard-components/src/charts/BarChart.svelte
+++ b/packages/standard-components/src/charts/BarChart.svelte
@@ -1,80 +1,80 @@
-<script>
-  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
-  import ApexChart from "./ApexChart.svelte"
-
-  export let title
-  export let dataProvider
-  export let labelColumn
-  export let valueColumns
-  export let xAxisLabel
-  export let yAxisLabel
-  export let height
-  export let width
-  export let color
-  export let dataLabels
-  export let animate
-  export let legend
-  export let stacked
-  export let yAxisUnits
-  export let palette
-
-  $: options = setUpChart(dataProvider)
-
-  const setUpChart = provider => {
-    const allCols = [labelColumn, ...(valueColumns || [null])]
-    if (!provider || allCols.find(x => x == null)) {
-      return null
-    }
-
-    // Fatch data
-    const { schema, rows } = provider
-    const reducer = row => (valid, column) => valid && row[column] != null
-    const hasAllColumns = row => allCols.reduce(reducer(row), true)
-    const data = rows.filter(row => hasAllColumns(row)).slice(0, 100)
-    if (!schema || !data.length) {
-      return null
-    }
-
-    // Initialise default chart
-    let builder = new ApexOptionsBuilder()
-      .type("bar")
-      .title(title)
-      .width(width)
-      .height(height)
-      .xLabel(xAxisLabel)
-      .yLabel(yAxisLabel)
-      .dataLabels(dataLabels)
-      .animate(animate)
-      .legend(legend)
-      .stacked(stacked)
-      .yUnits(yAxisUnits)
-      .palette(palette)
-
-    // Add data
-    let useDates = false
-    if (schema[labelColumn]) {
-      const labelFieldType = schema[labelColumn].type
-      builder = builder.xType(labelFieldType)
-      useDates = labelFieldType === "datetime"
-    }
-    const series = valueColumns.map(column => ({
-      name: column,
-      data: data.map(row => {
-        if (!useDates) {
-          return row[column]
-        } else {
-          return [row[labelColumn], row[column]]
-        }
-      }),
-    }))
-    builder = builder.series(series)
-    if (!useDates) {
-      builder = builder.categories(data.map(row => row[labelColumn]))
-    }
-
-    // Build chart options
-    return builder.getOptions()
-  }
-</script>
-
-<ApexChart {options} />
+<script>
+  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
+  import ApexChart from "./ApexChart.svelte"
+
+  export let title
+  export let dataProvider
+  export let labelColumn
+  export let valueColumns
+  export let xAxisLabel
+  export let yAxisLabel
+  export let height
+  export let width
+  export let color
+  export let dataLabels
+  export let animate
+  export let legend
+  export let stacked
+  export let yAxisUnits
+  export let palette
+
+  $: options = setUpChart(dataProvider)
+
+  const setUpChart = (provider) => {
+    const allCols = [labelColumn, ...(valueColumns || [null])]
+    if (!provider || allCols.find((x) => x == null)) {
+      return null
+    }
+
+    // Fatch data
+    const { schema, rows } = provider
+    const reducer = (row) => (valid, column) => valid && row[column] != null
+    const hasAllColumns = (row) => allCols.reduce(reducer(row), true)
+    const data = rows.filter((row) => hasAllColumns(row)).slice(0, 100)
+    if (!schema || !data.length) {
+      return null
+    }
+
+    // Initialise default chart
+    let builder = new ApexOptionsBuilder()
+      .type("bar")
+      .title(title)
+      .width(width)
+      .height(height)
+      .xLabel(xAxisLabel)
+      .yLabel(yAxisLabel)
+      .dataLabels(dataLabels)
+      .animate(animate)
+      .legend(legend)
+      .stacked(stacked)
+      .yUnits(yAxisUnits)
+      .palette(palette)
+
+    // Add data
+    let useDates = false
+    if (schema[labelColumn]) {
+      const labelFieldType = schema[labelColumn].type
+      builder = builder.xType(labelFieldType)
+      useDates = labelFieldType === "datetime"
+    }
+    const series = valueColumns.map((column) => ({
+      name: column,
+      data: data.map((row) => {
+        if (!useDates) {
+          return row[column]
+        } else {
+          return [row[labelColumn], row[column]]
+        }
+      }),
+    }))
+    builder = builder.series(series)
+    if (!useDates) {
+      builder = builder.categories(data.map((row) => row[labelColumn]))
+    }
+
+    // Build chart options
+    return builder.getOptions()
+  }
+</script>
+
+<ApexChart {options} />
diff --git a/packages/standard-components/src/charts/CandleStickChart.svelte b/packages/standard-components/src/charts/CandleStickChart.svelte
index 9435b27cfd..2b819f8003 100644
--- a/packages/standard-components/src/charts/CandleStickChart.svelte
+++ b/packages/standard-components/src/charts/CandleStickChart.svelte
@@ -19,17 +19,17 @@
   $: options = setUpChart(dataProvider)
 
   // Fetch data on mount
-  const setUpChart = provider => {
+  const setUpChart = (provider) => {
     const allCols = [dateColumn, openColumn, highColumn, lowColumn, closeColumn]
-    if (!provider || allCols.find(x => x == null)) {
+    if (!provider || allCols.find((x) => x == null)) {
       return null
     }
 
     // Fetch data
     const { schema, rows } = provider
-    const reducer = row => (valid, column) => valid && row[column] != null
-    const hasAllColumns = row => allCols.reduce(reducer(row), true)
-    const data = rows.filter(row => hasAllColumns(row))
+    const reducer = (row) => (valid, column) => valid && row[column] != null
+    const hasAllColumns = (row) => allCols.reduce(reducer(row), true)
+    const data = rows.filter((row) => hasAllColumns(row))
     if (!schema || !data.length) {
       return null
     }
@@ -48,8 +48,8 @@
       .xType("datetime")
 
     // Add data
-    const parseDate = d => (isNaN(d) ? Date.parse(d).valueOf() : parseInt(d))
-    const chartData = data.map(row => ({
+    const parseDate = (d) => (isNaN(d) ? Date.parse(d).valueOf() : parseInt(d))
+    const chartData = data.map((row) => ({
       x: parseDate(row[dateColumn]),
       y: [row[openColumn], row[highColumn], row[lowColumn], row[closeColumn]],
     }))
diff --git a/packages/standard-components/src/charts/LineChart.svelte b/packages/standard-components/src/charts/LineChart.svelte
index 47823955c0..bca0656153 100644
--- a/packages/standard-components/src/charts/LineChart.svelte
+++ b/packages/standard-components/src/charts/LineChart.svelte
@@ -27,17 +27,17 @@
   $: options = setUpChart(dataProvider)
 
   // Fetch data on mount
-  const setUpChart = provider => {
+  const setUpChart = (provider) => {
     const allCols = [labelColumn, ...(valueColumns || [null])]
-    if (!provider || allCols.find(x => x == null)) {
+    if (!provider || allCols.find((x) => x == null)) {
       return null
     }
 
     // Fetch, filter and sort data
     const { schema, rows } = provider
-    const reducer = row => (valid, column) => valid && row[column] != null
-    const hasAllColumns = row => allCols.reduce(reducer(row), true)
-    const data = rows.filter(row => hasAllColumns(row))
+    const reducer = (row) => (valid, column) => valid && row[column] != null
+    const hasAllColumns = (row) => allCols.reduce(reducer(row), true)
+    const data = rows.filter((row) => hasAllColumns(row))
     if (!schema || !data.length) {
       return null
     }
@@ -66,9 +66,9 @@
       builder = builder.xType(labelFieldType)
       useDates = labelFieldType === "datetime"
     }
-    const series = valueColumns.map(column => ({
+    const series = valueColumns.map((column) => ({
       name: column,
-      data: data.map(row => {
+      data: data.map((row) => {
         if (!useDates) {
           return row[column]
         } else {
@@ -78,7 +78,7 @@
     }))
     builder = builder.series(series)
     if (!useDates) {
-      builder = builder.categories(data.map(row => row[labelColumn]))
+      builder = builder.categories(data.map((row) => row[labelColumn]))
     }
 
     // Build chart options
diff --git a/packages/standard-components/src/charts/PieChart.svelte b/packages/standard-components/src/charts/PieChart.svelte
index 19cb1d2472..b429de9672 100644
--- a/packages/standard-components/src/charts/PieChart.svelte
+++ b/packages/standard-components/src/charts/PieChart.svelte
@@ -18,7 +18,7 @@
   $: options = setUpChart(dataProvider)
 
   // Fetch data on mount
-  const setUpChart = provider => {
+  const setUpChart = (provider) => {
     if (!provider || !labelColumn || !valueColumn) {
       return null
     }
@@ -26,7 +26,7 @@
     // Fetch, filter and sort data
     const { schema, rows } = provider
     const data = rows
-      .filter(row => row[labelColumn] != null && row[valueColumn] != null)
+      .filter((row) => row[labelColumn] != null && row[valueColumn] != null)
       .slice(0, 100)
     if (!schema || !data.length) {
       return null
@@ -45,8 +45,8 @@
       .palette(palette)
 
     // Add data if valid datasource
-    const series = data.map(row => parseFloat(row[valueColumn]))
-    const labels = data.map(row => row[labelColumn])
+    const series = data.map((row) => parseFloat(row[valueColumn]))
+    const labels = data.map((row) => row[labelColumn])
     builder = builder.series(series).labels(labels)
 
     // Build chart options
diff --git a/packages/standard-components/src/forms/AttachmentField.svelte b/packages/standard-components/src/forms/AttachmentField.svelte
index fbc5ef0426..c135024866 100644
--- a/packages/standard-components/src/forms/AttachmentField.svelte
+++ b/packages/standard-components/src/forms/AttachmentField.svelte
@@ -15,14 +15,15 @@
 
   export let files = []
 
-  const handleFileTooLarge = fileSizeLimit => {
+  const handleFileTooLarge = (fileSizeLimit) => {
     notifications.warning(
-      `Files cannot exceed ${fileSizeLimit /
-        BYTES_IN_MB} MB. Please try again with smaller files.`
+      `Files cannot exceed ${
+        fileSizeLimit / BYTES_IN_MB
+      } MB. Please try again with smaller files.`
     )
   }
 
-  const processFiles = async fileList => {
+  const processFiles = async (fileList) => {
     let data = new FormData()
     for (let i = 0; i < fileList.length; i++) {
       data.append("file", fileList[i])
@@ -38,13 +39,15 @@
   type="attachment"
   bind:fieldState
   bind:fieldApi
-  defaultValue={[]}>
+  defaultValue={[]}
+>
   {#if $fieldState}
     <CoreDropzone
       value={$fieldState.value}
       disabled={$fieldState.disabled}
-      on:change={e => fieldApi.setValue(e.detail)}
+      on:change={(e) => fieldApi.setValue(e.detail)}
       {processFiles}
-      {handleFileTooLarge} />
+      {handleFileTooLarge}
+    />
   {/if}
 </Field>
diff --git a/packages/standard-components/src/forms/BooleanField.svelte b/packages/standard-components/src/forms/BooleanField.svelte
index 95b672b63a..0fef45d8fd 100644
--- a/packages/standard-components/src/forms/BooleanField.svelte
+++ b/packages/standard-components/src/forms/BooleanField.svelte
@@ -18,14 +18,16 @@
   type="boolean"
   bind:fieldState
   bind:fieldApi
-  defaultValue={false}>
+  defaultValue={false}
+>
   {#if fieldState}
     <CoreCheckbox
       value={$fieldState.value}
       disabled={$fieldState.disabled}
       error={$fieldState.error}
       id={$fieldState.fieldId}
-      on:change={e => fieldApi.setValue(e.detail)}
-      {text} />
+      on:change={(e) => fieldApi.setValue(e.detail)}
+      {text}
+    />
   {/if}
 </Field>
diff --git a/packages/standard-components/src/forms/DateTimeField.svelte b/packages/standard-components/src/forms/DateTimeField.svelte
index 5acb4d499a..104dd37073 100644
--- a/packages/standard-components/src/forms/DateTimeField.svelte
+++ b/packages/standard-components/src/forms/DateTimeField.svelte
@@ -16,11 +16,12 @@
   {#if fieldState}
     <CoreDatePicker
       value={$fieldState.value}
-      on:change={e => fieldApi.setValue(e.detail)}
+      on:change={(e) => fieldApi.setValue(e.detail)}
       disabled={$fieldState.disabled}
       error={$fieldState.error}
       id={$fieldState.fieldId}
       {enableTime}
-      {placeholder} />
+      {placeholder}
+    />
   {/if}
 </Field>
diff --git a/packages/standard-components/src/forms/Field.svelte b/packages/standard-components/src/forms/Field.svelte
index 1a6ec20be9..2c83a7dac4 100644
--- a/packages/standard-components/src/forms/Field.svelte
+++ b/packages/standard-components/src/forms/Field.svelte
@@ -37,8 +37,9 @@
   <div class="spectrum-Form-item" use:styleable={$component.styles}>
     <label
       for={$fieldState?.fieldId}
-      class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}>
-      {label || ''}
+      class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}
+    >
+      {label || ""}
     </label>
     <div class="spectrum-Form-itemField">
       {#if !formContext}
diff --git a/packages/standard-components/src/forms/FieldGroup.svelte b/packages/standard-components/src/forms/FieldGroup.svelte
index 79e1ecad62..561572fab8 100644
--- a/packages/standard-components/src/forms/FieldGroup.svelte
+++ b/packages/standard-components/src/forms/FieldGroup.svelte
@@ -11,7 +11,8 @@
 <div class="wrapper" use:styleable={$component.styles}>
   <div
     class="spectrum-Form"
-    class:spectrum-Form--labelsAbove={labelPosition === 'above'}>
+    class:spectrum-Form--labelsAbove={labelPosition === "above"}
+  >
     <slot />
   </div>
 </div>
diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte
index e35bee0554..10b6a7b231 100644
--- a/packages/standard-components/src/forms/Form.svelte
+++ b/packages/standard-components/src/forms/Form.svelte
@@ -19,7 +19,7 @@
   let fieldMap = {}
 
   // Returns the closes data context which isn't a built in context
-  const getInitialValues = context => {
+  const getInitialValues = (context) => {
     if (["user", "url"].includes(context.closestComponentId)) {
       return {}
     }
@@ -47,7 +47,7 @@
         // state in the builder makes updates in real time.
         // We only need this because of optimisations which prevent fully
         // remounting when settings change.
-        fieldMap[field].fieldState.update(state => {
+        fieldMap[field].fieldState.update((state) => {
           state.disabled = disabled || fieldDisabled || isAutoColumn
           return state
         })
@@ -71,7 +71,7 @@
     },
     validate: () => {
       const fields = Object.keys(fieldMap)
-      fields.forEach(field => {
+      fields.forEach((field) => {
         const { fieldApi } = fieldMap[field]
         fieldApi.validate()
       })
@@ -99,14 +99,14 @@
       const newError = validate ? validate(newValue) : null
 
       // Update field state
-      fieldState.update(state => {
+      fieldState.update((state) => {
         state.value = newValue
         state.error = newError
         return state
       })
 
       // Update form state
-      formState.update(state => {
+      formState.update((state) => {
         state.values = { ...state.values, [field]: newValue }
         if (newError) {
           state.errors = { ...state.errors, [field]: newError }
@@ -150,7 +150,7 @@
         if (dataSource?.type === "query") {
           schema = {}
           const params = table.parameters || []
-          params.forEach(param => {
+          params.forEach((param) => {
             schema[param.name] = { ...param, type: "string" }
           })
         } else {
@@ -167,12 +167,16 @@
 
 <Provider
   {actions}
-  data={{ ...$formState.values, tableId: dataSource?.tableId }}>
+  data={{ ...$formState.values, tableId: dataSource?.tableId }}
+>
   <div
     lang="en"
     dir="ltr"
     use:styleable={$component.styles}
-    class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
+    class={`spectrum ${size || "spectrum--medium"} ${
+      theme || "spectrum--light"
+    }`}
+  >
     {#if loaded}
       <slot />
     {/if}
diff --git a/packages/standard-components/src/forms/LongFormField.svelte b/packages/standard-components/src/forms/LongFormField.svelte
index c9673ac4d7..93f3959c55 100644
--- a/packages/standard-components/src/forms/LongFormField.svelte
+++ b/packages/standard-components/src/forms/LongFormField.svelte
@@ -18,14 +18,16 @@
   type="longform"
   bind:fieldState
   bind:fieldApi
-  defaultValue="">
+  defaultValue=""
+>
   {#if fieldState}
     <CoreTextArea
       value={$fieldState.value}
-      on:change={e => fieldApi.setValue(e.detail)}
+      on:change={(e) => fieldApi.setValue(e.detail)}
       disabled={$fieldState.disabled}
       error={$fieldState.error}
       id={$fieldState.fieldId}
-      {placeholder} />
+      {placeholder}
+    />
   {/if}
 </Field>
diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte
index 29ab4be584..7045f27dd4 100644
--- a/packages/standard-components/src/forms/OptionsField.svelte
+++ b/packages/standard-components/src/forms/OptionsField.svelte
@@ -19,7 +19,8 @@
   type="options"
   bind:fieldState
   bind:fieldApi
-  bind:fieldSchema>
+  bind:fieldSchema
+>
   {#if fieldState}
     <CoreSelect
       value={$fieldState.value}
@@ -28,6 +29,7 @@
       error={$fieldState.error}
       options={fieldSchema?.constraints?.inclusion ?? []}
       {placeholder}
-      on:change={e => fieldApi.setValue(e.detail)} />
+      on:change={(e) => fieldApi.setValue(e.detail)}
+    />
   {/if}
 </Field>
diff --git a/packages/standard-components/src/forms/RelationshipField.svelte b/packages/standard-components/src/forms/RelationshipField.svelte
index 2dd884f89a..7f6c7f5549 100644
--- a/packages/standard-components/src/forms/RelationshipField.svelte
+++ b/packages/standard-components/src/forms/RelationshipField.svelte
@@ -24,7 +24,7 @@
   $: singleValue = flatten($fieldState?.value)?.[0]
   $: multiValue = flatten($fieldState?.value) ?? []
 
-  const fetchTable = async id => {
+  const fetchTable = async (id) => {
     if (id) {
       const result = await API.fetchTableDefinition(id)
       if (!result.error) {
@@ -33,29 +33,31 @@
     }
   }
 
-  const fetchRows = async id => {
+  const fetchRows = async (id) => {
     if (id) {
       const rows = await API.fetchTableData(id)
       options = rows && !rows.error ? rows : []
     }
   }
 
-  const flatten = values => {
+  const flatten = (values) => {
     if (!values) {
       return []
     }
-    return values.map(value => (typeof value === "object" ? value._id : value))
+    return values.map((value) =>
+      typeof value === "object" ? value._id : value
+    )
   }
 
-  const getDisplayName = row => {
+  const getDisplayName = (row) => {
     return row?.[tableDefinition?.primaryDisplay || "_id"] || "-"
   }
 
-  const singleHandler = e => {
+  const singleHandler = (e) => {
     fieldApi.setValue(e.detail == null ? [] : [e.detail])
   }
 
-  const multiHandler = e => {
+  const multiHandler = (e) => {
     fieldApi.setValue(e.detail)
   }
 </script>
@@ -68,7 +70,8 @@
   bind:fieldState
   bind:fieldApi
   bind:fieldSchema
-  defaultValue={[]}>
+  defaultValue={[]}
+>
   {#if fieldState}
     <svelte:component
       this={multiselect ? CoreMultiselect : CoreSelect}
@@ -79,6 +82,7 @@
       disabled={$fieldState.disabled}
       error={$fieldState.error}
       getOptionLabel={getDisplayName}
-      getOptionValue={option => option._id} />
+      getOptionValue={(option) => option._id}
+    />
   {/if}
 </Field>
diff --git a/packages/standard-components/src/forms/StringField.svelte b/packages/standard-components/src/forms/StringField.svelte
index 26895710fb..c6e4ffa6d6 100644
--- a/packages/standard-components/src/forms/StringField.svelte
+++ b/packages/standard-components/src/forms/StringField.svelte
@@ -16,17 +16,19 @@
   {label}
   {field}
   {disabled}
-  type={type === 'number' ? 'number' : 'string'}
+  type={type === "number" ? "number" : "string"}
   bind:fieldState
-  bind:fieldApi>
+  bind:fieldApi
+>
   {#if fieldState}
     <CoreTextField
       value={$fieldState.value}
-      on:change={e => fieldApi.setValue(e.detail)}
+      on:change={(e) => fieldApi.setValue(e.detail)}
       disabled={$fieldState.disabled}
       error={$fieldState.error}
       id={$fieldState.fieldId}
       {placeholder}
-      {type} />
+      {type}
+    />
   {/if}
 </Field>
diff --git a/packages/standard-components/src/table/Table.svelte b/packages/standard-components/src/table/Table.svelte
index f5206f4f5a..00928422c3 100644
--- a/packages/standard-components/src/table/Table.svelte
+++ b/packages/standard-components/src/table/Table.svelte
@@ -32,7 +32,7 @@
   const getFields = (schema, customColumns, showAutoColumns) => {
     // Check for an invalid column selection
     let invalid = false
-    customColumns?.forEach(column => {
+    customColumns?.forEach((column) => {
       if (schema[column] == null) {
         invalid = true
       }
@@ -66,7 +66,7 @@
         divider: true,
       }
     }
-    fields.forEach(field => {
+    fields.forEach((field) => {
       newSchema[field] = schema[field]
     })
     return newSchema
@@ -77,7 +77,8 @@
   lang="en"
   dir="ltr"
   use:styleable={$component.styles}
-  class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
+  class={`spectrum ${size || "spectrum--medium"} ${theme || "spectrum--light"}`}
+>
   <Table
     {data}
     {schema}
@@ -88,7 +89,8 @@
     allowSelectRows={false}
     allowEditRows={false}
     allowEditColumns={false}
-    showAutoColumns={true}>
+    showAutoColumns={true}
+  >
     <slot />
   </Table>
 </div>
diff --git a/yarn.lock b/yarn.lock
index 29a01a69bd..c8c4430e09 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4559,10 +4559,10 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-svelte@^3.30.0:
-  version "3.30.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.30.0.tgz#cbde341e96bf34f4ac73c8f14f8a014e03bfb7d6"
-  integrity sha512-z+hdIACb9TROGvJBQWcItMtlr4s0DBUgJss6qWrtFkOoIInkG+iAMo/FJZQFyDBQZc+dul2+TzYSi/tpTT5/Ag==
+svelte@^3.37.0:
+  version "3.38.2"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.38.2.tgz#55e5c681f793ae349b5cc2fe58e5782af4275ef5"
+  integrity sha512-q5Dq0/QHh4BLJyEVWGe7Cej5NWs040LWjMbicBGZ+3qpFWJ1YObRmUDZKbbovddLC9WW7THTj3kYbTOFmU9fbg==
 
 table@^5.2.3:
   version "5.4.6"