diff --git a/lerna.json b/lerna.json
index 3470e54f0f..3c41aaab35 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.0.29",
+  "version": "0.0.31",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/package.json b/package.json
index ea235ae5b4..278a91a8f6 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "build": "lerna run build",
     "initialise": "lerna run initialise",
     "publishdev": "lerna run publishdev",
+    "publishnpm":"yarn build && lerna publish",
     "clean": "lerna clean",
     "dev": "lerna run --parallel --stream dev:builder",
     "test": "lerna run test",
diff --git a/packages/bootstrap-components/package.json b/packages/bootstrap-components/package.json
index 23e805c479..3952204437 100644
--- a/packages/bootstrap-components/package.json
+++ b/packages/bootstrap-components/package.json
@@ -12,7 +12,7 @@
     "publishdev": "yarn build && node ./scripts/publishDev.js"
   },
   "devDependencies": {
-    "@budibase/client": "^0.0.29",
+    "@budibase/client": "^0.0.31",
     "fs-extra": "^8.1.0",
     "lodash": "^4.17.15",
     "npm-run-all": "^4.1.5",
@@ -30,7 +30,7 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.0.29",
+  "version": "0.0.31",
   "license": "MIT",
   "gitHead": "72a77a035eb7c1443b079bf93c29b3e5fe02094e"
 }
diff --git a/packages/builder/package.json b/packages/builder/package.json
index d266c0e952..18da0324cb 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
@@ -38,7 +38,7 @@
     ]
   },
   "dependencies": {
-    "@budibase/client": "^0.0.29",
+    "@budibase/client": "^0.0.31",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",
     "date-fns": "^1.29.0",
@@ -80,4 +80,4 @@
     "svelte": "^3.0.0"
   },
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
-}
\ No newline at end of file
+}
diff --git a/packages/builder/src/BackendRoot.svelte b/packages/builder/src/BackendRoot.svelte
index 50dd713196..f127c803cb 100644
--- a/packages/builder/src/BackendRoot.svelte
+++ b/packages/builder/src/BackendRoot.svelte
@@ -37,7 +37,7 @@
 
   .content {
     flex: 1 1 auto;
-    margin: 40px 40px;
+    margin: 20px 40px;
   }
 
   .nav {
diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index fce34b256e..48b6d2d7f3 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -37,7 +37,7 @@
 
 .budibase__label--medium {
     font-weight: 500;
-    font-size: 12px;
+    font-size: 13px;
     opacity: 0.6;
     text-transform: uppercase;
 }
@@ -64,7 +64,7 @@
     display: flex;
     align-items: baseline;
     font-weight: 500;
-    font-size: 12px;
+    font-size: 13px;
 }
 
 .budibase__nav-item.selected {
diff --git a/packages/builder/src/components/common/ActionButton.svelte b/packages/builder/src/components/common/ActionButton.svelte
index f4f13c0757..7f04f59e8f 100644
--- a/packages/builder/src/components/common/ActionButton.svelte
+++ b/packages/builder/src/components/common/ActionButton.svelte
@@ -46,7 +46,8 @@
 
   .button:hover {
     cursor: pointer;
-    font-weight: 700;
+    font-weight: 600;
+    filter:saturate(90%);
   }
 
   .button:disabled {
diff --git a/packages/builder/src/components/common/AppNotification.svelte b/packages/builder/src/components/common/AppNotification.svelte
index 59e6730857..fdd0de8f4a 100644
--- a/packages/builder/src/components/common/AppNotification.svelte
+++ b/packages/builder/src/components/common/AppNotification.svelte
@@ -63,7 +63,7 @@
   }
 
   :global(.refresh-page-button) {
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 600;
     border-radius: 5px;
     border: none;
diff --git a/packages/builder/src/components/common/Icons/DownArrow.svelte b/packages/builder/src/components/common/Icons/DownArrow.svelte
new file mode 100644
index 0000000000..9f5f1f25d9
--- /dev/null
+++ b/packages/builder/src/components/common/Icons/DownArrow.svelte
@@ -0,0 +1,10 @@
+<svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 24 24" 
+    width="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/index.js b/packages/builder/src/components/common/Icons/index.js
index f62fb42ca0..fae247b311 100644
--- a/packages/builder/src/components/common/Icons/index.js
+++ b/packages/builder/src/components/common/Icons/index.js
@@ -4,6 +4,7 @@ export { default as TerminalIcon } from "./Terminal.svelte"
 export { default as InputIcon } from "./Input.svelte"
 export { default as ImageIcon } from "./Image.svelte"
 export { default as ArrowDownIcon } from "./ArrowDown.svelte"
+export { default as DownArrowIcon } from "./DownArrow.svelte"
 export { default as CircleIndicator } from "./CircleIndicator.svelte"
 export { default as PencilIcon } from "./Pencil.svelte"
 export { default as EventsIcon } from "./Events.svelte"
diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte
index aec6bcc297..078edea28f 100644
--- a/packages/builder/src/components/common/Inputs/InputGroup.svelte
+++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte
@@ -30,7 +30,7 @@
 
   input {
     width: 83px;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 700;
     color: #163057;
     opacity: 0.7;
diff --git a/packages/builder/src/components/common/Select.svelte b/packages/builder/src/components/common/Select.svelte
index 1fd2c06935..39dbe6d059 100644
--- a/packages/builder/src/components/common/Select.svelte
+++ b/packages/builder/src/components/common/Select.svelte
@@ -19,22 +19,22 @@
 
 <style>
   .select-container {
-    font-size: 0.9rem;
-    color: var(--secondary50);
+    font-size: 14px;
+    color: var(--secondary60);
     font-weight: bold;
     position: relative;
-    max-width: 300px;
-    min-width: 200px;
+    max-width: 400px;
+    min-width: 275px;
   }
 
   .adjusted {
-    padding-left: 2.5em;
+    padding-left: 30px;
   }
 
   i {
     position: absolute;
-    left: 8px;
-    top: 8px;
+    left: 10px;
+    top: 10px;
   }
 
   select {
@@ -42,8 +42,9 @@
     display: block;
     font-family: sans-serif;
     font-weight: 400;
+    font-size: 14px;
     color: #000333;
-    padding: 0 2.6em 0em 1.4em;
+    padding: 0 40px 0px 20px;
     width: 100%;
     max-width: 100%;
     box-sizing: border-box;
@@ -51,7 +52,7 @@
     -moz-appearance: none;
     -webkit-appearance: none;
     appearance: none;
-    background: var(--lightslate);
+    background: var(--white);
   }
 
   .arrow {
@@ -62,6 +63,6 @@
     width: 30px;
     height: 30px;
     pointer-events: none;
-    color: var(--primary100);
+    color: var(--secondary100);
   }
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
index efb083f831..1b35a094ee 100644
--- a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
@@ -99,9 +99,9 @@
 
 <section>
   <div class="table-controls">
-    <h4 class="budibase__title--3">
+    <h2 class="title">
       {takeRight(2, $backendUiStore.breadcrumbs).join(' / ')}
-    </h4>
+    </h2>
     <Select icon="ri-eye-line" bind:value={$backendUiStore.selectedView}>
       {#each views as view}
         <option value={view}>{view.name}</option>
@@ -166,6 +166,18 @@
 </section>
 
 <style>
+
+  .title {
+    font-size: 24px;
+    font-weight: 600;
+    text-rendering: optimizeLegibility;
+    text-transform: capitalize;
+  }
+
+  .select {
+    background: white;
+  }
+
   table {
     border: 1px solid #ccc;
     background: #fff;
@@ -174,19 +186,24 @@
   }
 
   thead {
-    background: var(--background-button);
+    background: #f9f9f9;
+    border: 1px solid #ccc;
   }
 
   thead th {
     color: var(--button-text);
     text-transform: capitalize;
     font-weight: 500;
+    font-size: 14px;  
+    text-rendering: optimizeLegibility;
+    letter-spacing: 1px;
   }
 
   tbody tr {
     border-bottom: 1px solid #ccc;
     transition: 0.3s background-color;
-    color: var(--darkslate);
+    color: var(--secondary100);
+    font-size: 14px;
   }
 
   tbody tr:hover {
@@ -196,7 +213,8 @@
   .table-controls {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: baseline;
+    margin-top: 10px;
   }
 
   .ri-more-line:hover,
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
index 99c7e78116..20aa67c912 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
@@ -18,6 +18,7 @@
   export let onClosed
 
   let errors = []
+  let selectedModel
 
   const childModelsForModel = compose(flatten, map("children"), get("children"))
 
@@ -29,7 +30,6 @@
     ? childModelsForModel($store.hierarchy)
     : $store.hierarchy.children
 
-  let selectedModel
   $: {
     if (record) {
       selectedModel = getExactNodeForKey($store.hierarchy)(record.key)
@@ -48,7 +48,6 @@
 
   $: editingRecord =
     record ||
-    editingRecord ||
     getNewRecord(
       selectedModel,
       getCurrentCollectionKey($backendUiStore.selectedRecord)
diff --git a/packages/builder/src/components/nav/BackendNav.svelte b/packages/builder/src/components/nav/BackendNav.svelte
index 813ac7f29c..a50ef29641 100644
--- a/packages/builder/src/components/nav/BackendNav.svelte
+++ b/packages/builder/src/components/nav/BackendNav.svelte
@@ -53,7 +53,7 @@
     flex-direction: column;
     max-height: 100%;
     height: 100%;
-    background-color: var(--white);
+    background: var(--white);
   }
 
   .nav-group-header {
@@ -66,7 +66,7 @@
   .hierarchy-title {
     align-items: center;
     text-transform: uppercase;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: bold;
     opacity: 0.6;
     letter-spacing: 1px;
diff --git a/packages/builder/src/components/nav/DatabasesList.svelte b/packages/builder/src/components/nav/DatabasesList.svelte
index d5b3a95296..eb45141ff7 100644
--- a/packages/builder/src/components/nav/DatabasesList.svelte
+++ b/packages/builder/src/components/nav/DatabasesList.svelte
@@ -60,7 +60,7 @@
 
 <style>
   .root {
-    font-size: 12px;
+    font-size: 13px;
     color: var(--secondary100);
     position: relative;
     padding-left: 20px;
@@ -88,7 +88,7 @@
     padding: 0;
     border: none;
     font-family: Roboto;
-    font-size: 12px;
+    font-size: 13px;
     outline: none;
     cursor: pointer;
     background: rgba(0, 0, 0, 0);
diff --git a/packages/builder/src/components/nav/HierarchyRow.svelte b/packages/builder/src/components/nav/HierarchyRow.svelte
index 45811c5ca5..06f864d61e 100644
--- a/packages/builder/src/components/nav/HierarchyRow.svelte
+++ b/packages/builder/src/components/nav/HierarchyRow.svelte
@@ -52,7 +52,7 @@
 
 <style>
   .hierarchy-item {
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 400;
     margin-bottom: 10px;
   }
diff --git a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
index 90ba653e9b..40b1d2dee4 100644
--- a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
+++ b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
@@ -68,7 +68,7 @@
   .hierarchy-title {
     align-items: center;
     text-transform: uppercase;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: bold;
     opacity: 0.6;
     letter-spacing: 1px;
diff --git a/packages/builder/src/components/nav/UsersList.svelte b/packages/builder/src/components/nav/UsersList.svelte
index 1caabf8a2a..1ea129e7c4 100644
--- a/packages/builder/src/components/nav/UsersList.svelte
+++ b/packages/builder/src/components/nav/UsersList.svelte
@@ -68,7 +68,7 @@
     padding: 0;
     border: none;
     font-family: Roboto;
-    font-size: 0.8rem;
+    font-size: 13px;
     outline: none;
     cursor: pointer;
     background: rgba(0, 0, 0, 0);
diff --git a/packages/builder/src/components/userInterface/CodeEditor.svelte b/packages/builder/src/components/userInterface/CodeEditor.svelte
index 7f6bc9c297..668a05bbee 100644
--- a/packages/builder/src/components/userInterface/CodeEditor.svelte
+++ b/packages/builder/src/components/userInterface/CodeEditor.svelte
@@ -86,14 +86,14 @@
 <style>
   h3 {
     text-transform: uppercase;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 700;
     color: #8997ab;
     margin-bottom: 10px;
   }
 
   p {
-    font-size: 12px;
+    font-size: 13px;
     color: #333;
     margin-top: 0;
   }
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index b9af0888d5..b953217f4d 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -120,11 +120,11 @@
 
   .detail-prop label {
     word-wrap: break-word;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 700;
     color: #163057;
     opacity: 0.6;
-    padding-top: 12px;
+    padding-top: 13px;
     margin-bottom: 0;
   }
 
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 0ba617c32f..dab98f9173 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -258,7 +258,7 @@
   .component > .name {
     color: #000333;
     display: inline-block;
-    font-size: 12px;
+    font-size: 13px;
     opacity: 0.8;
   }
 
@@ -282,7 +282,7 @@
   }
 
   .preset-menu > span {
-    font-size: 12px;
+    font-size: 13px;
     text-transform: uppercase;
     margin-top: 5px;
   }
@@ -308,7 +308,7 @@
     background: none;
     border: none;
     border-radius: 5px;
-    padding: 12px;
+    padding: 13px;
     outline: none;
     cursor: pointer;
   } */
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index 945d956c04..2df4f8feef 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -98,12 +98,13 @@
 <style>
   .root {
     font-weight: 400;
-    color: #333;
+    color: #000333;
   }
 
   .title {
     margin-left: 10px;
     margin-top: 2px;
+    font-size: 13px;
   }
 
   .icon {
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index d62886ac55..f1d72da457 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -95,6 +95,7 @@
     height: 35px;
     align-items: center;
     font-weight: 400;
+    font-size: 13px;
   }
 
   .item button {
diff --git a/packages/builder/src/components/userInterface/EditComponentProps.svelte b/packages/builder/src/components/userInterface/EditComponentProps.svelte
index f193d7cd55..775957c64b 100644
--- a/packages/builder/src/components/userInterface/EditComponentProps.svelte
+++ b/packages/builder/src/components/userInterface/EditComponentProps.svelte
@@ -85,6 +85,6 @@
     background: none;
     border: none;
     border-radius: 5px;
-    padding: 12px;
+    padding: 13px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
index de5f0dd883..d579248ddf 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
@@ -160,7 +160,7 @@
 
   a {
     color: rgba(22, 48, 87, 0.6);
-    font-size: 12px;
+    font-size: 13px;
     margin-top: 0;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
index d4c31ae2c0..cb9ede73c3 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
@@ -88,7 +88,7 @@
 <style>
   h3 {
     text-transform: uppercase;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 700;
     color: #8997ab;
     margin-bottom: 10px;
diff --git a/packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte b/packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
index dacdf60681..bcfb757937 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
@@ -139,7 +139,7 @@
   }
 
   span {
-    font-size: 12px;
+    font-size: 13px;
     margin-bottom: 5px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
index fdadc20a67..46801e2723 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
@@ -68,7 +68,7 @@
   }
 
   span {
-    font-size: 12px;
+    font-size: 13px;
     margin-bottom: 5px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/LayoutEditor.svelte b/packages/builder/src/components/userInterface/LayoutEditor.svelte
index 4ded376d47..0f3efaec0a 100644
--- a/packages/builder/src/components/userInterface/LayoutEditor.svelte
+++ b/packages/builder/src/components/userInterface/LayoutEditor.svelte
@@ -131,7 +131,7 @@
 <style>
   h3 {
     text-transform: uppercase;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 700;
     color: #000333;
     opacity: 0.6;
@@ -149,11 +149,11 @@
   }
 
   h5 {
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 400;
     color: #000333;
     opacity: 0.8;
-    padding-top: 12px;
+    padding-top: 13px;
     margin-bottom: 0;
   }
 
diff --git a/packages/builder/src/components/userInterface/MasterLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
similarity index 85%
rename from packages/builder/src/components/userInterface/MasterLayout.svelte
rename to packages/builder/src/components/userInterface/PageLayout.svelte
index 4f7cfd2cec..56d8cf8a2e 100644
--- a/packages/builder/src/components/userInterface/MasterLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -50,24 +50,23 @@
   }
 </script>
 
-<div>
+<div class="pagelayoutSection">
+  <div class="components-nav-page">Page Layout</div>
   <div
-    class="budibase__nav-item"
+    class="budibase__nav-item root"
     class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
     on:click|stopPropagation={() => store.setScreenType('page')}>
     <span
       class="icon"
       class:rotate={$store.currentPreviewItem.name !== _layout.title}>
-      {#if _layout.component.props._children.length}
-        <ArrowDownIcon />
-      {/if}
+      <ArrowDownIcon />
     </span>
 
     <span class="icon">
       <GridIcon />
     </span>
 
-    <span class="title">Master Layout</span>
+    <span class="title">Page Layout</span>
   </div>
 
   {#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children}
@@ -90,9 +89,27 @@
   onOk={() => store.deleteComponent(componentToDelete)} />
 
 <style>
+.components-nav-page {
+  font-size: 13px;
+  color: #000333;
+  text-transform: uppercase;
+  margin-bottom: 10px;
+  padding-left: 20px;
+  font-weight: 600;
+  opacity: 0.4;
+  letter-spacing: 1px;
+}
+
+
+.pagelayoutSection {
+  margin: 20px 0px 20px 0px;
+}
+  .root {
+
+  }
   .title {
     margin-left: 10px;
-    margin-top: 2px;
+    font-size: 13px;
   }
 
   .icon {
@@ -100,7 +117,7 @@
     transition: 0.2s;
     width: 20px;
     margin-top: 2px;
-    color: #333;
+    color: #000333;
   }
 
   .icon:nth-of-type(2) {
diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte
index 0f0a9f4dc7..56b5fe7874 100644
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@@ -67,7 +67,7 @@
     padding: 0;
     border: none;
     font-family: Roboto;
-    font-size: 0.8rem;
+    font-size: 13px;
     outline: none;
     cursor: pointer;
     background: rgba(0, 0, 0, 0);
diff --git a/packages/builder/src/components/userInterface/PropControl.svelte b/packages/builder/src/components/userInterface/PropControl.svelte
index 7106245428..62a0ba6103 100644
--- a/packages/builder/src/components/userInterface/PropControl.svelte
+++ b/packages/builder/src/components/userInterface/PropControl.svelte
@@ -39,11 +39,11 @@
 
   h5 {
     word-wrap: break-word;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 400;
     color: #000333;
     opacity: 0.8;
-    padding-top: 12px;
+    padding-top: 13px;
     margin-bottom: 0;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/PropertyCascader/StateBindingOptions.svelte b/packages/builder/src/components/userInterface/PropertyCascader/StateBindingOptions.svelte
index bd35366929..06f8289a34 100644
--- a/packages/builder/src/components/userInterface/PropertyCascader/StateBindingOptions.svelte
+++ b/packages/builder/src/components/userInterface/PropertyCascader/StateBindingOptions.svelte
@@ -45,7 +45,7 @@
 
   .name {
     color: rgba(22, 48, 87, 0.6);
-    font-size: 12px;
+    font-size: 13px;
     font-weight: bold;
     text-transform: uppercase;
     margin-top: 5px;
diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
index c075a4e199..549573a121 100644
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
@@ -1,7 +1,7 @@
 <script>
   import ComponentsHierarchy from "./ComponentsHierarchy.svelte"
   import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
-  import MasterLayout from "./MasterLayout.svelte"
+  import PageLayout from "./PageLayout.svelte"
   import PagesList from "./PagesList.svelte"
   import { store } from "builderStore"
   import IconButton from "components/common/IconButton.svelte"
@@ -55,6 +55,10 @@
 
     <div class="border-line" />
 
+    <PageLayout layout={$store.pages[$store.currentPageName]} />
+
+    <div class="border-line" />
+
     <div class="components-list-container">
       <div class="nav-group-header">
         <span class="components-nav-header" style="margin-top: 0;">
@@ -67,7 +71,6 @@
         </div>
       </div>
       <div class="nav-items-container">
-        <MasterLayout layout={$store.pages[$store.currentPageName]} />
         <ComponentsHierarchy screens={$store.screens} />
       </div>
     </div>
@@ -154,7 +157,7 @@
   }
 
   .components-nav-page {
-    font-size: 12px;
+    font-size: 13px;
     color: #000333;
     text-transform: uppercase;
     padding-left: 20px;
@@ -165,7 +168,7 @@
   }
 
   .components-nav-header {
-    font-size: 12px;
+    font-size: 13px;
     color: #000333;
     text-transform: uppercase;
     margin-top: 20px;
diff --git a/packages/builder/src/index.html b/packages/builder/src/index.html
index 94a1f16944..c878c3d67a 100644
--- a/packages/builder/src/index.html
+++ b/packages/builder/src/index.html
@@ -7,6 +7,7 @@
 	<title>Budibase Builder</title>
 
 	<link href="https://cdn.jsdelivr.net/npm/remixicon@2.3.0/fonts/remixicon.css" rel="stylesheet">
+
 	<link rel='icon' type='image/png' href='/_builder/favicon.png'>
 	<link rel='stylesheet' href='/_builder/global.css'>
 	<link rel='stylesheet' href='/_builder/codemirror.css'>
diff --git a/packages/builder/src/pages/[application]/backend/database/_layout.svelte b/packages/builder/src/pages/[application]/backend/database/_layout.svelte
index 2c800c18c3..bc9e7e65ac 100644
--- a/packages/builder/src/pages/[application]/backend/database/_layout.svelte
+++ b/packages/builder/src/pages/[application]/backend/database/_layout.svelte
@@ -59,7 +59,7 @@
 
 <div class="root">
   <div class="node-view">
-    <slot />
+
   </div>
 </div>
 
@@ -73,4 +73,5 @@
     overflow-y: auto;
     flex: 1 1 auto;
   }
+
 </style>
diff --git a/packages/cli/package.json b/packages/cli/package.json
index c7dfcb3121..2efb91b503 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "budibase",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "description": "Budibase CLI",
   "repository": "https://github.com/Budibase/Budibase",
   "homepage": "https://budibase.com",
@@ -20,8 +20,8 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/datastores": "^0.0.29",
-    "@budibase/server": "^0.0.29",
+    "@budibase/datastores": "^0.0.31",
+    "@budibase/server": "^0.0.31",
     "@inquirer/password": "^0.0.6-alpha.0",
     "chalk": "^2.4.2",
     "fs-extra": "^8.1.0",
diff --git a/packages/client/package.json b/packages/client/package.json
index 634883b247..b3d784c982 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "license": "MPL-2.0",
   "main": "dist/budibase-client.js",
   "module": "dist/budibase-client.esm.mjs",
diff --git a/packages/core/package.json b/packages/core/package.json
index 90f7b2022b..0931d1d05f 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/core",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "description": "core javascript library for budibase",
   "main": "dist/budibase-core.umd.js",
   "module": "dist/budibase-core.esm.js",
diff --git a/packages/datastores/package.json b/packages/datastores/package.json
index 46454d5425..4477c64061 100644
--- a/packages/datastores/package.json
+++ b/packages/datastores/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/datastores",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "description": "implementations of all the datastores... azureblob, local etc",
   "main": "index.js",
   "scripts": {
@@ -27,7 +27,7 @@
     "@babel/core": "^7.1.2",
     "@babel/node": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
-    "@budibase/core": "^0.0.29",
+    "@budibase/core": "^0.0.31",
     "es6-promisify": "^6.0.1",
     "fs-extra": "^8.1.0",
     "lodash": "^4.17.13",
diff --git a/packages/materialdesign-components/components.json b/packages/materialdesign-components/components.json
index 6922b1bec7..3581e7b369 100644
--- a/packages/materialdesign-components/components.json
+++ b/packages/materialdesign-components/components.json
@@ -14,7 +14,9 @@
     "name": "Body1",
     "description": "Sets the font properties as Roboto Body 1",
     "props": {
-      "text": "string"
+      "text": "string",
+      "verticalMargin": "number",
+      "horizontalMargin": "number"
     }, 
     "tags": []
   },
diff --git a/packages/materialdesign-components/dist/index.js.map b/packages/materialdesign-components/dist/index.js.map
deleted file mode 100644
index 57d8fa5bf6..0000000000
--- a/packages/materialdesign-components/dist/index.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../node_modules/svelte/internal/index.mjs","../src/Button.svelte","../src/Textbox.svelte","../src/Form.svelte","../src/api.js","../src/Login.svelte","../src/buildStyle.js","../src/Grid.svelte","../src/StackPanel.svelte"],"sourcesContent":["function noop() { }\nconst identity = x => x;\nfunction assign(tar, src) {\n    // @ts-ignore\n    for (const k in src)\n        tar[k] = src[k];\n    return tar;\n}\nfunction is_promise(value) {\n    return value && typeof value === 'object' && typeof value.then === 'function';\n}\nfunction add_location(element, file, line, column, char) {\n    element.__svelte_meta = {\n        loc: { file, line, column, char }\n    };\n}\nfunction run(fn) {\n    return fn();\n}\nfunction blank_object() {\n    return Object.create(null);\n}\nfunction run_all(fns) {\n    fns.forEach(run);\n}\nfunction is_function(thing) {\n    return typeof thing === 'function';\n}\nfunction safe_not_equal(a, b) {\n    return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');\n}\nfunction not_equal(a, b) {\n    return a != a ? b == b : a !== b;\n}\nfunction validate_store(store, name) {\n    if (!store || typeof store.subscribe !== 'function') {\n        throw new Error(`'${name}' is not a store with a 'subscribe' method`);\n    }\n}\nfunction subscribe(store, callback) {\n    const unsub = store.subscribe(callback);\n    return unsub.unsubscribe ? () => unsub.unsubscribe() : unsub;\n}\nfunction get_store_value(store) {\n    let value;\n    subscribe(store, _ => value = _)();\n    return value;\n}\nfunction component_subscribe(component, store, callback) {\n    component.$$.on_destroy.push(subscribe(store, callback));\n}\nfunction create_slot(definition, ctx, fn) {\n    if (definition) {\n        const slot_ctx = get_slot_context(definition, ctx, fn);\n        return definition[0](slot_ctx);\n    }\n}\nfunction get_slot_context(definition, ctx, fn) {\n    return definition[1]\n        ? assign({}, assign(ctx.$$scope.ctx, definition[1](fn ? fn(ctx) : {})))\n        : ctx.$$scope.ctx;\n}\nfunction get_slot_changes(definition, ctx, changed, fn) {\n    return definition[1]\n        ? assign({}, assign(ctx.$$scope.changed || {}, definition[1](fn ? fn(changed) : {})))\n        : ctx.$$scope.changed || {};\n}\nfunction exclude_internal_props(props) {\n    const result = {};\n    for (const k in props)\n        if (k[0] !== '$')\n            result[k] = props[k];\n    return result;\n}\nfunction once(fn) {\n    let ran = false;\n    return function (...args) {\n        if (ran)\n            return;\n        ran = true;\n        fn.call(this, ...args);\n    };\n}\nfunction null_to_empty(value) {\n    return value == null ? '' : value;\n}\nfunction set_store_value(store, ret, value = ret) {\n    store.set(value);\n    return ret;\n}\n\nconst is_client = typeof window !== 'undefined';\nlet now = is_client\n    ? () => window.performance.now()\n    : () => Date.now();\nlet raf = is_client ? cb => requestAnimationFrame(cb) : noop;\n// used internally for testing\nfunction set_now(fn) {\n    now = fn;\n}\nfunction set_raf(fn) {\n    raf = fn;\n}\n\nconst tasks = new Set();\nlet running = false;\nfunction run_tasks() {\n    tasks.forEach(task => {\n        if (!task[0](now())) {\n            tasks.delete(task);\n            task[1]();\n        }\n    });\n    running = tasks.size > 0;\n    if (running)\n        raf(run_tasks);\n}\nfunction clear_loops() {\n    // for testing...\n    tasks.forEach(task => tasks.delete(task));\n    running = false;\n}\nfunction loop(fn) {\n    let task;\n    if (!running) {\n        running = true;\n        raf(run_tasks);\n    }\n    return {\n        promise: new Promise(fulfil => {\n            tasks.add(task = [fn, fulfil]);\n        }),\n        abort() {\n            tasks.delete(task);\n        }\n    };\n}\n\nfunction append(target, node) {\n    target.appendChild(node);\n}\nfunction insert(target, node, anchor) {\n    target.insertBefore(node, anchor || null);\n}\nfunction detach(node) {\n    node.parentNode.removeChild(node);\n}\nfunction destroy_each(iterations, detaching) {\n    for (let i = 0; i < iterations.length; i += 1) {\n        if (iterations[i])\n            iterations[i].d(detaching);\n    }\n}\nfunction element(name) {\n    return document.createElement(name);\n}\nfunction element_is(name, is) {\n    return document.createElement(name, { is });\n}\nfunction object_without_properties(obj, exclude) {\n    // eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion\n    const target = {};\n    for (const k in obj) {\n        if (Object.prototype.hasOwnProperty.call(obj, k)\n            // @ts-ignore\n            && exclude.indexOf(k) === -1) {\n            // @ts-ignore\n            target[k] = obj[k];\n        }\n    }\n    return target;\n}\nfunction svg_element(name) {\n    return document.createElementNS('http://www.w3.org/2000/svg', name);\n}\nfunction text(data) {\n    return document.createTextNode(data);\n}\nfunction space() {\n    return text(' ');\n}\nfunction empty() {\n    return text('');\n}\nfunction listen(node, event, handler, options) {\n    node.addEventListener(event, handler, options);\n    return () => node.removeEventListener(event, handler, options);\n}\nfunction prevent_default(fn) {\n    return function (event) {\n        event.preventDefault();\n        // @ts-ignore\n        return fn.call(this, event);\n    };\n}\nfunction stop_propagation(fn) {\n    return function (event) {\n        event.stopPropagation();\n        // @ts-ignore\n        return fn.call(this, event);\n    };\n}\nfunction self(fn) {\n    return function (event) {\n        // @ts-ignore\n        if (event.target === this)\n            fn.call(this, event);\n    };\n}\nfunction attr(node, attribute, value) {\n    if (value == null)\n        node.removeAttribute(attribute);\n    else\n        node.setAttribute(attribute, value);\n}\nfunction set_attributes(node, attributes) {\n    for (const key in attributes) {\n        if (key === 'style') {\n            node.style.cssText = attributes[key];\n        }\n        else if (key in node) {\n            node[key] = attributes[key];\n        }\n        else {\n            attr(node, key, attributes[key]);\n        }\n    }\n}\nfunction set_svg_attributes(node, attributes) {\n    for (const key in attributes) {\n        attr(node, key, attributes[key]);\n    }\n}\nfunction set_custom_element_data(node, prop, value) {\n    if (prop in node) {\n        node[prop] = value;\n    }\n    else {\n        attr(node, prop, value);\n    }\n}\nfunction xlink_attr(node, attribute, value) {\n    node.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value);\n}\nfunction get_binding_group_value(group) {\n    const value = [];\n    for (let i = 0; i < group.length; i += 1) {\n        if (group[i].checked)\n            value.push(group[i].__value);\n    }\n    return value;\n}\nfunction to_number(value) {\n    return value === '' ? undefined : +value;\n}\nfunction time_ranges_to_array(ranges) {\n    const array = [];\n    for (let i = 0; i < ranges.length; i += 1) {\n        array.push({ start: ranges.start(i), end: ranges.end(i) });\n    }\n    return array;\n}\nfunction children(element) {\n    return Array.from(element.childNodes);\n}\nfunction claim_element(nodes, name, attributes, svg) {\n    for (let i = 0; i < nodes.length; i += 1) {\n        const node = nodes[i];\n        if (node.nodeName === name) {\n            for (let j = 0; j < node.attributes.length; j += 1) {\n                const attribute = node.attributes[j];\n                if (!attributes[attribute.name])\n                    node.removeAttribute(attribute.name);\n            }\n            return nodes.splice(i, 1)[0]; // TODO strip unwanted attributes\n        }\n    }\n    return svg ? svg_element(name) : element(name);\n}\nfunction claim_text(nodes, data) {\n    for (let i = 0; i < nodes.length; i += 1) {\n        const node = nodes[i];\n        if (node.nodeType === 3) {\n            node.data = '' + data;\n            return nodes.splice(i, 1)[0];\n        }\n    }\n    return text(data);\n}\nfunction claim_space(nodes) {\n    return claim_text(nodes, ' ');\n}\nfunction set_data(text, data) {\n    data = '' + data;\n    if (text.data !== data)\n        text.data = data;\n}\nfunction set_input_value(input, value) {\n    if (value != null || input.value) {\n        input.value = value;\n    }\n}\nfunction set_input_type(input, type) {\n    try {\n        input.type = type;\n    }\n    catch (e) {\n        // do nothing\n    }\n}\nfunction set_style(node, key, value, important) {\n    node.style.setProperty(key, value, important ? 'important' : '');\n}\nfunction select_option(select, value) {\n    for (let i = 0; i < select.options.length; i += 1) {\n        const option = select.options[i];\n        if (option.__value === value) {\n            option.selected = true;\n            return;\n        }\n    }\n}\nfunction select_options(select, value) {\n    for (let i = 0; i < select.options.length; i += 1) {\n        const option = select.options[i];\n        option.selected = ~value.indexOf(option.__value);\n    }\n}\nfunction select_value(select) {\n    const selected_option = select.querySelector(':checked') || select.options[0];\n    return selected_option && selected_option.__value;\n}\nfunction select_multiple_value(select) {\n    return [].map.call(select.querySelectorAll(':checked'), option => option.__value);\n}\nfunction add_resize_listener(element, fn) {\n    if (getComputedStyle(element).position === 'static') {\n        element.style.position = 'relative';\n    }\n    const object = document.createElement('object');\n    object.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');\n    object.type = 'text/html';\n    object.tabIndex = -1;\n    let win;\n    object.onload = () => {\n        win = object.contentDocument.defaultView;\n        win.addEventListener('resize', fn);\n    };\n    if (/Trident/.test(navigator.userAgent)) {\n        element.appendChild(object);\n        object.data = 'about:blank';\n    }\n    else {\n        object.data = 'about:blank';\n        element.appendChild(object);\n    }\n    return {\n        cancel: () => {\n            win && win.removeEventListener && win.removeEventListener('resize', fn);\n            element.removeChild(object);\n        }\n    };\n}\nfunction toggle_class(element, name, toggle) {\n    element.classList[toggle ? 'add' : 'remove'](name);\n}\nfunction custom_event(type, detail) {\n    const e = document.createEvent('CustomEvent');\n    e.initCustomEvent(type, false, false, detail);\n    return e;\n}\nclass HtmlTag {\n    constructor(html, anchor = null) {\n        this.e = element('div');\n        this.a = anchor;\n        this.u(html);\n    }\n    m(target, anchor = null) {\n        for (let i = 0; i < this.n.length; i += 1) {\n            insert(target, this.n[i], anchor);\n        }\n        this.t = target;\n    }\n    u(html) {\n        this.e.innerHTML = html;\n        this.n = Array.from(this.e.childNodes);\n    }\n    p(html) {\n        this.d();\n        this.u(html);\n        this.m(this.t, this.a);\n    }\n    d() {\n        this.n.forEach(detach);\n    }\n}\n\nlet stylesheet;\nlet active = 0;\nlet current_rules = {};\n// https://github.com/darkskyapp/string-hash/blob/master/index.js\nfunction hash(str) {\n    let hash = 5381;\n    let i = str.length;\n    while (i--)\n        hash = ((hash << 5) - hash) ^ str.charCodeAt(i);\n    return hash >>> 0;\n}\nfunction create_rule(node, a, b, duration, delay, ease, fn, uid = 0) {\n    const step = 16.666 / duration;\n    let keyframes = '{\\n';\n    for (let p = 0; p <= 1; p += step) {\n        const t = a + (b - a) * ease(p);\n        keyframes += p * 100 + `%{${fn(t, 1 - t)}}\\n`;\n    }\n    const rule = keyframes + `100% {${fn(b, 1 - b)}}\\n}`;\n    const name = `__svelte_${hash(rule)}_${uid}`;\n    if (!current_rules[name]) {\n        if (!stylesheet) {\n            const style = element('style');\n            document.head.appendChild(style);\n            stylesheet = style.sheet;\n        }\n        current_rules[name] = true;\n        stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length);\n    }\n    const animation = node.style.animation || '';\n    node.style.animation = `${animation ? `${animation}, ` : ``}${name} ${duration}ms linear ${delay}ms 1 both`;\n    active += 1;\n    return name;\n}\nfunction delete_rule(node, name) {\n    node.style.animation = (node.style.animation || '')\n        .split(', ')\n        .filter(name\n        ? anim => anim.indexOf(name) < 0 // remove specific animation\n        : anim => anim.indexOf('__svelte') === -1 // remove all Svelte animations\n    )\n        .join(', ');\n    if (name && !--active)\n        clear_rules();\n}\nfunction clear_rules() {\n    raf(() => {\n        if (active)\n            return;\n        let i = stylesheet.cssRules.length;\n        while (i--)\n            stylesheet.deleteRule(i);\n        current_rules = {};\n    });\n}\n\nfunction create_animation(node, from, fn, params) {\n    if (!from)\n        return noop;\n    const to = node.getBoundingClientRect();\n    if (from.left === to.left && from.right === to.right && from.top === to.top && from.bottom === to.bottom)\n        return noop;\n    const { delay = 0, duration = 300, easing = identity, \n    // @ts-ignore todo: should this be separated from destructuring? Or start/end added to public api and documentation?\n    start: start_time = now() + delay, \n    // @ts-ignore todo:\n    end = start_time + duration, tick = noop, css } = fn(node, { from, to }, params);\n    let running = true;\n    let started = false;\n    let name;\n    function start() {\n        if (css) {\n            name = create_rule(node, 0, 1, duration, delay, easing, css);\n        }\n        if (!delay) {\n            started = true;\n        }\n    }\n    function stop() {\n        if (css)\n            delete_rule(node, name);\n        running = false;\n    }\n    loop(now => {\n        if (!started && now >= start_time) {\n            started = true;\n        }\n        if (started && now >= end) {\n            tick(1, 0);\n            stop();\n        }\n        if (!running) {\n            return false;\n        }\n        if (started) {\n            const p = now - start_time;\n            const t = 0 + 1 * easing(p / duration);\n            tick(t, 1 - t);\n        }\n        return true;\n    });\n    start();\n    tick(0, 1);\n    return stop;\n}\nfunction fix_position(node) {\n    const style = getComputedStyle(node);\n    if (style.position !== 'absolute' && style.position !== 'fixed') {\n        const { width, height } = style;\n        const a = node.getBoundingClientRect();\n        node.style.position = 'absolute';\n        node.style.width = width;\n        node.style.height = height;\n        add_transform(node, a);\n    }\n}\nfunction add_transform(node, a) {\n    const b = node.getBoundingClientRect();\n    if (a.left !== b.left || a.top !== b.top) {\n        const style = getComputedStyle(node);\n        const transform = style.transform === 'none' ? '' : style.transform;\n        node.style.transform = `${transform} translate(${a.left - b.left}px, ${a.top - b.top}px)`;\n    }\n}\n\nlet current_component;\nfunction set_current_component(component) {\n    current_component = component;\n}\nfunction get_current_component() {\n    if (!current_component)\n        throw new Error(`Function called outside component initialization`);\n    return current_component;\n}\nfunction beforeUpdate(fn) {\n    get_current_component().$$.before_update.push(fn);\n}\nfunction onMount(fn) {\n    get_current_component().$$.on_mount.push(fn);\n}\nfunction afterUpdate(fn) {\n    get_current_component().$$.after_update.push(fn);\n}\nfunction onDestroy(fn) {\n    get_current_component().$$.on_destroy.push(fn);\n}\nfunction createEventDispatcher() {\n    const component = current_component;\n    return (type, detail) => {\n        const callbacks = component.$$.callbacks[type];\n        if (callbacks) {\n            // TODO are there situations where events could be dispatched\n            // in a server (non-DOM) environment?\n            const event = custom_event(type, detail);\n            callbacks.slice().forEach(fn => {\n                fn.call(component, event);\n            });\n        }\n    };\n}\nfunction setContext(key, context) {\n    get_current_component().$$.context.set(key, context);\n}\nfunction getContext(key) {\n    return get_current_component().$$.context.get(key);\n}\n// TODO figure out if we still want to support\n// shorthand events, or if we want to implement\n// a real bubbling mechanism\nfunction bubble(component, event) {\n    const callbacks = component.$$.callbacks[event.type];\n    if (callbacks) {\n        callbacks.slice().forEach(fn => fn(event));\n    }\n}\n\nconst dirty_components = [];\nconst intros = { enabled: false };\nconst binding_callbacks = [];\nconst render_callbacks = [];\nconst flush_callbacks = [];\nconst resolved_promise = Promise.resolve();\nlet update_scheduled = false;\nfunction schedule_update() {\n    if (!update_scheduled) {\n        update_scheduled = true;\n        resolved_promise.then(flush);\n    }\n}\nfunction tick() {\n    schedule_update();\n    return resolved_promise;\n}\nfunction add_render_callback(fn) {\n    render_callbacks.push(fn);\n}\nfunction add_flush_callback(fn) {\n    flush_callbacks.push(fn);\n}\nfunction flush() {\n    const seen_callbacks = new Set();\n    do {\n        // first, call beforeUpdate functions\n        // and update components\n        while (dirty_components.length) {\n            const component = dirty_components.shift();\n            set_current_component(component);\n            update(component.$$);\n        }\n        while (binding_callbacks.length)\n            binding_callbacks.pop()();\n        // then, once components are updated, call\n        // afterUpdate functions. This may cause\n        // subsequent updates...\n        for (let i = 0; i < render_callbacks.length; i += 1) {\n            const callback = render_callbacks[i];\n            if (!seen_callbacks.has(callback)) {\n                callback();\n                // ...so guard against infinite loops\n                seen_callbacks.add(callback);\n            }\n        }\n        render_callbacks.length = 0;\n    } while (dirty_components.length);\n    while (flush_callbacks.length) {\n        flush_callbacks.pop()();\n    }\n    update_scheduled = false;\n}\nfunction update($$) {\n    if ($$.fragment) {\n        $$.update($$.dirty);\n        run_all($$.before_update);\n        $$.fragment.p($$.dirty, $$.ctx);\n        $$.dirty = null;\n        $$.after_update.forEach(add_render_callback);\n    }\n}\n\nlet promise;\nfunction wait() {\n    if (!promise) {\n        promise = Promise.resolve();\n        promise.then(() => {\n            promise = null;\n        });\n    }\n    return promise;\n}\nfunction dispatch(node, direction, kind) {\n    node.dispatchEvent(custom_event(`${direction ? 'intro' : 'outro'}${kind}`));\n}\nconst outroing = new Set();\nlet outros;\nfunction group_outros() {\n    outros = {\n        r: 0,\n        c: [],\n        p: outros // parent group\n    };\n}\nfunction check_outros() {\n    if (!outros.r) {\n        run_all(outros.c);\n    }\n    outros = outros.p;\n}\nfunction transition_in(block, local) {\n    if (block && block.i) {\n        outroing.delete(block);\n        block.i(local);\n    }\n}\nfunction transition_out(block, local, detach, callback) {\n    if (block && block.o) {\n        if (outroing.has(block))\n            return;\n        outroing.add(block);\n        outros.c.push(() => {\n            outroing.delete(block);\n            if (callback) {\n                if (detach)\n                    block.d(1);\n                callback();\n            }\n        });\n        block.o(local);\n    }\n}\nconst null_transition = { duration: 0 };\nfunction create_in_transition(node, fn, params) {\n    let config = fn(node, params);\n    let running = false;\n    let animation_name;\n    let task;\n    let uid = 0;\n    function cleanup() {\n        if (animation_name)\n            delete_rule(node, animation_name);\n    }\n    function go() {\n        const { delay = 0, duration = 300, easing = identity, tick = noop, css } = config || null_transition;\n        if (css)\n            animation_name = create_rule(node, 0, 1, duration, delay, easing, css, uid++);\n        tick(0, 1);\n        const start_time = now() + delay;\n        const end_time = start_time + duration;\n        if (task)\n            task.abort();\n        running = true;\n        add_render_callback(() => dispatch(node, true, 'start'));\n        task = loop(now => {\n            if (running) {\n                if (now >= end_time) {\n                    tick(1, 0);\n                    dispatch(node, true, 'end');\n                    cleanup();\n                    return running = false;\n                }\n                if (now >= start_time) {\n                    const t = easing((now - start_time) / duration);\n                    tick(t, 1 - t);\n                }\n            }\n            return running;\n        });\n    }\n    let started = false;\n    return {\n        start() {\n            if (started)\n                return;\n            delete_rule(node);\n            if (is_function(config)) {\n                config = config();\n                wait().then(go);\n            }\n            else {\n                go();\n            }\n        },\n        invalidate() {\n            started = false;\n        },\n        end() {\n            if (running) {\n                cleanup();\n                running = false;\n            }\n        }\n    };\n}\nfunction create_out_transition(node, fn, params) {\n    let config = fn(node, params);\n    let running = true;\n    let animation_name;\n    const group = outros;\n    group.r += 1;\n    function go() {\n        const { delay = 0, duration = 300, easing = identity, tick = noop, css } = config || null_transition;\n        if (css)\n            animation_name = create_rule(node, 1, 0, duration, delay, easing, css);\n        const start_time = now() + delay;\n        const end_time = start_time + duration;\n        add_render_callback(() => dispatch(node, false, 'start'));\n        loop(now => {\n            if (running) {\n                if (now >= end_time) {\n                    tick(0, 1);\n                    dispatch(node, false, 'end');\n                    if (!--group.r) {\n                        // this will result in `end()` being called,\n                        // so we don't need to clean up here\n                        run_all(group.c);\n                    }\n                    return false;\n                }\n                if (now >= start_time) {\n                    const t = easing((now - start_time) / duration);\n                    tick(1 - t, t);\n                }\n            }\n            return running;\n        });\n    }\n    if (is_function(config)) {\n        wait().then(() => {\n            // @ts-ignore\n            config = config();\n            go();\n        });\n    }\n    else {\n        go();\n    }\n    return {\n        end(reset) {\n            if (reset && config.tick) {\n                config.tick(1, 0);\n            }\n            if (running) {\n                if (animation_name)\n                    delete_rule(node, animation_name);\n                running = false;\n            }\n        }\n    };\n}\nfunction create_bidirectional_transition(node, fn, params, intro) {\n    let config = fn(node, params);\n    let t = intro ? 0 : 1;\n    let running_program = null;\n    let pending_program = null;\n    let animation_name = null;\n    function clear_animation() {\n        if (animation_name)\n            delete_rule(node, animation_name);\n    }\n    function init(program, duration) {\n        const d = program.b - t;\n        duration *= Math.abs(d);\n        return {\n            a: t,\n            b: program.b,\n            d,\n            duration,\n            start: program.start,\n            end: program.start + duration,\n            group: program.group\n        };\n    }\n    function go(b) {\n        const { delay = 0, duration = 300, easing = identity, tick = noop, css } = config || null_transition;\n        const program = {\n            start: now() + delay,\n            b\n        };\n        if (!b) {\n            // @ts-ignore todo: improve typings\n            program.group = outros;\n            outros.r += 1;\n        }\n        if (running_program) {\n            pending_program = program;\n        }\n        else {\n            // if this is an intro, and there's a delay, we need to do\n            // an initial tick and/or apply CSS animation immediately\n            if (css) {\n                clear_animation();\n                animation_name = create_rule(node, t, b, duration, delay, easing, css);\n            }\n            if (b)\n                tick(0, 1);\n            running_program = init(program, duration);\n            add_render_callback(() => dispatch(node, b, 'start'));\n            loop(now => {\n                if (pending_program && now > pending_program.start) {\n                    running_program = init(pending_program, duration);\n                    pending_program = null;\n                    dispatch(node, running_program.b, 'start');\n                    if (css) {\n                        clear_animation();\n                        animation_name = create_rule(node, t, running_program.b, running_program.duration, 0, easing, config.css);\n                    }\n                }\n                if (running_program) {\n                    if (now >= running_program.end) {\n                        tick(t = running_program.b, 1 - t);\n                        dispatch(node, running_program.b, 'end');\n                        if (!pending_program) {\n                            // we're done\n                            if (running_program.b) {\n                                // intro — we can tidy up immediately\n                                clear_animation();\n                            }\n                            else {\n                                // outro — needs to be coordinated\n                                if (!--running_program.group.r)\n                                    run_all(running_program.group.c);\n                            }\n                        }\n                        running_program = null;\n                    }\n                    else if (now >= running_program.start) {\n                        const p = now - running_program.start;\n                        t = running_program.a + running_program.d * easing(p / running_program.duration);\n                        tick(t, 1 - t);\n                    }\n                }\n                return !!(running_program || pending_program);\n            });\n        }\n    }\n    return {\n        run(b) {\n            if (is_function(config)) {\n                wait().then(() => {\n                    // @ts-ignore\n                    config = config();\n                    go(b);\n                });\n            }\n            else {\n                go(b);\n            }\n        },\n        end() {\n            clear_animation();\n            running_program = pending_program = null;\n        }\n    };\n}\n\nfunction handle_promise(promise, info) {\n    const token = info.token = {};\n    function update(type, index, key, value) {\n        if (info.token !== token)\n            return;\n        info.resolved = key && { [key]: value };\n        const child_ctx = assign(assign({}, info.ctx), info.resolved);\n        const block = type && (info.current = type)(child_ctx);\n        if (info.block) {\n            if (info.blocks) {\n                info.blocks.forEach((block, i) => {\n                    if (i !== index && block) {\n                        group_outros();\n                        transition_out(block, 1, 1, () => {\n                            info.blocks[i] = null;\n                        });\n                        check_outros();\n                    }\n                });\n            }\n            else {\n                info.block.d(1);\n            }\n            block.c();\n            transition_in(block, 1);\n            block.m(info.mount(), info.anchor);\n            flush();\n        }\n        info.block = block;\n        if (info.blocks)\n            info.blocks[index] = block;\n    }\n    if (is_promise(promise)) {\n        const current_component = get_current_component();\n        promise.then(value => {\n            set_current_component(current_component);\n            update(info.then, 1, info.value, value);\n            set_current_component(null);\n        }, error => {\n            set_current_component(current_component);\n            update(info.catch, 2, info.error, error);\n            set_current_component(null);\n        });\n        // if we previously had a then/catch block, destroy it\n        if (info.current !== info.pending) {\n            update(info.pending, 0);\n            return true;\n        }\n    }\n    else {\n        if (info.current !== info.then) {\n            update(info.then, 1, info.value, promise);\n            return true;\n        }\n        info.resolved = { [info.value]: promise };\n    }\n}\n\nconst globals = (typeof window !== 'undefined' ? window : global);\n\nfunction destroy_block(block, lookup) {\n    block.d(1);\n    lookup.delete(block.key);\n}\nfunction outro_and_destroy_block(block, lookup) {\n    transition_out(block, 1, 1, () => {\n        lookup.delete(block.key);\n    });\n}\nfunction fix_and_destroy_block(block, lookup) {\n    block.f();\n    destroy_block(block, lookup);\n}\nfunction fix_and_outro_and_destroy_block(block, lookup) {\n    block.f();\n    outro_and_destroy_block(block, lookup);\n}\nfunction update_keyed_each(old_blocks, changed, get_key, dynamic, ctx, list, lookup, node, destroy, create_each_block, next, get_context) {\n    let o = old_blocks.length;\n    let n = list.length;\n    let i = o;\n    const old_indexes = {};\n    while (i--)\n        old_indexes[old_blocks[i].key] = i;\n    const new_blocks = [];\n    const new_lookup = new Map();\n    const deltas = new Map();\n    i = n;\n    while (i--) {\n        const child_ctx = get_context(ctx, list, i);\n        const key = get_key(child_ctx);\n        let block = lookup.get(key);\n        if (!block) {\n            block = create_each_block(key, child_ctx);\n            block.c();\n        }\n        else if (dynamic) {\n            block.p(changed, child_ctx);\n        }\n        new_lookup.set(key, new_blocks[i] = block);\n        if (key in old_indexes)\n            deltas.set(key, Math.abs(i - old_indexes[key]));\n    }\n    const will_move = new Set();\n    const did_move = new Set();\n    function insert(block) {\n        transition_in(block, 1);\n        block.m(node, next);\n        lookup.set(block.key, block);\n        next = block.first;\n        n--;\n    }\n    while (o && n) {\n        const new_block = new_blocks[n - 1];\n        const old_block = old_blocks[o - 1];\n        const new_key = new_block.key;\n        const old_key = old_block.key;\n        if (new_block === old_block) {\n            // do nothing\n            next = new_block.first;\n            o--;\n            n--;\n        }\n        else if (!new_lookup.has(old_key)) {\n            // remove old block\n            destroy(old_block, lookup);\n            o--;\n        }\n        else if (!lookup.has(new_key) || will_move.has(new_key)) {\n            insert(new_block);\n        }\n        else if (did_move.has(old_key)) {\n            o--;\n        }\n        else if (deltas.get(new_key) > deltas.get(old_key)) {\n            did_move.add(new_key);\n            insert(new_block);\n        }\n        else {\n            will_move.add(old_key);\n            o--;\n        }\n    }\n    while (o--) {\n        const old_block = old_blocks[o];\n        if (!new_lookup.has(old_block.key))\n            destroy(old_block, lookup);\n    }\n    while (n)\n        insert(new_blocks[n - 1]);\n    return new_blocks;\n}\nfunction measure(blocks) {\n    const rects = {};\n    let i = blocks.length;\n    while (i--)\n        rects[blocks[i].key] = blocks[i].node.getBoundingClientRect();\n    return rects;\n}\n\nfunction get_spread_update(levels, updates) {\n    const update = {};\n    const to_null_out = {};\n    const accounted_for = { $$scope: 1 };\n    let i = levels.length;\n    while (i--) {\n        const o = levels[i];\n        const n = updates[i];\n        if (n) {\n            for (const key in o) {\n                if (!(key in n))\n                    to_null_out[key] = 1;\n            }\n            for (const key in n) {\n                if (!accounted_for[key]) {\n                    update[key] = n[key];\n                    accounted_for[key] = 1;\n                }\n            }\n            levels[i] = n;\n        }\n        else {\n            for (const key in o) {\n                accounted_for[key] = 1;\n            }\n        }\n    }\n    for (const key in to_null_out) {\n        if (!(key in update))\n            update[key] = undefined;\n    }\n    return update;\n}\nfunction get_spread_object(spread_props) {\n    return typeof spread_props === 'object' && spread_props !== null ? spread_props : {};\n}\n\nconst invalid_attribute_name_character = /[\\s'\">/=\\u{FDD0}-\\u{FDEF}\\u{FFFE}\\u{FFFF}\\u{1FFFE}\\u{1FFFF}\\u{2FFFE}\\u{2FFFF}\\u{3FFFE}\\u{3FFFF}\\u{4FFFE}\\u{4FFFF}\\u{5FFFE}\\u{5FFFF}\\u{6FFFE}\\u{6FFFF}\\u{7FFFE}\\u{7FFFF}\\u{8FFFE}\\u{8FFFF}\\u{9FFFE}\\u{9FFFF}\\u{AFFFE}\\u{AFFFF}\\u{BFFFE}\\u{BFFFF}\\u{CFFFE}\\u{CFFFF}\\u{DFFFE}\\u{DFFFF}\\u{EFFFE}\\u{EFFFF}\\u{FFFFE}\\u{FFFFF}\\u{10FFFE}\\u{10FFFF}]/u;\n// https://html.spec.whatwg.org/multipage/syntax.html#attributes-2\n// https://infra.spec.whatwg.org/#noncharacter\nfunction spread(args) {\n    const attributes = Object.assign({}, ...args);\n    let str = '';\n    Object.keys(attributes).forEach(name => {\n        if (invalid_attribute_name_character.test(name))\n            return;\n        const value = attributes[name];\n        if (value === undefined)\n            return;\n        if (value === true)\n            str += \" \" + name;\n        const escaped = String(value)\n            .replace(/\"/g, '&#34;')\n            .replace(/'/g, '&#39;');\n        str += \" \" + name + \"=\" + JSON.stringify(escaped);\n    });\n    return str;\n}\nconst escaped = {\n    '\"': '&quot;',\n    \"'\": '&#39;',\n    '&': '&amp;',\n    '<': '&lt;',\n    '>': '&gt;'\n};\nfunction escape(html) {\n    return String(html).replace(/[\"'&<>]/g, match => escaped[match]);\n}\nfunction each(items, fn) {\n    let str = '';\n    for (let i = 0; i < items.length; i += 1) {\n        str += fn(items[i], i);\n    }\n    return str;\n}\nconst missing_component = {\n    $$render: () => ''\n};\nfunction validate_component(component, name) {\n    if (!component || !component.$$render) {\n        if (name === 'svelte:component')\n            name += ' this={...}';\n        throw new Error(`<${name}> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules`);\n    }\n    return component;\n}\nfunction debug(file, line, column, values) {\n    console.log(`{@debug} ${file ? file + ' ' : ''}(${line}:${column})`); // eslint-disable-line no-console\n    console.log(values); // eslint-disable-line no-console\n    return '';\n}\nlet on_destroy;\nfunction create_ssr_component(fn) {\n    function $$render(result, props, bindings, slots) {\n        const parent_component = current_component;\n        const $$ = {\n            on_destroy,\n            context: new Map(parent_component ? parent_component.$$.context : []),\n            // these will be immediately discarded\n            on_mount: [],\n            before_update: [],\n            after_update: [],\n            callbacks: blank_object()\n        };\n        set_current_component({ $$ });\n        const html = fn(result, props, bindings, slots);\n        set_current_component(parent_component);\n        return html;\n    }\n    return {\n        render: (props = {}, options = {}) => {\n            on_destroy = [];\n            const result = { head: '', css: new Set() };\n            const html = $$render(result, props, {}, options);\n            run_all(on_destroy);\n            return {\n                html,\n                css: {\n                    code: Array.from(result.css).map(css => css.code).join('\\n'),\n                    map: null // TODO\n                },\n                head: result.head\n            };\n        },\n        $$render\n    };\n}\nfunction add_attribute(name, value, boolean) {\n    if (value == null || (boolean && !value))\n        return '';\n    return ` ${name}${value === true ? '' : `=${typeof value === 'string' ? JSON.stringify(escape(value)) : `\"${value}\"`}`}`;\n}\nfunction add_classes(classes) {\n    return classes ? ` class=\"${classes}\"` : ``;\n}\n\nfunction bind(component, name, callback) {\n    if (component.$$.props.indexOf(name) === -1)\n        return;\n    component.$$.bound[name] = callback;\n    callback(component.$$.ctx[name]);\n}\nfunction mount_component(component, target, anchor) {\n    const { fragment, on_mount, on_destroy, after_update } = component.$$;\n    fragment.m(target, anchor);\n    // onMount happens before the initial afterUpdate\n    add_render_callback(() => {\n        const new_on_destroy = on_mount.map(run).filter(is_function);\n        if (on_destroy) {\n            on_destroy.push(...new_on_destroy);\n        }\n        else {\n            // Edge case - component was destroyed immediately,\n            // most likely as a result of a binding initialising\n            run_all(new_on_destroy);\n        }\n        component.$$.on_mount = [];\n    });\n    after_update.forEach(add_render_callback);\n}\nfunction destroy_component(component, detaching) {\n    if (component.$$.fragment) {\n        run_all(component.$$.on_destroy);\n        component.$$.fragment.d(detaching);\n        // TODO null out other refs, including component.$$ (but need to\n        // preserve final state?)\n        component.$$.on_destroy = component.$$.fragment = null;\n        component.$$.ctx = {};\n    }\n}\nfunction make_dirty(component, key) {\n    if (!component.$$.dirty) {\n        dirty_components.push(component);\n        schedule_update();\n        component.$$.dirty = blank_object();\n    }\n    component.$$.dirty[key] = true;\n}\nfunction init(component, options, instance, create_fragment, not_equal, prop_names) {\n    const parent_component = current_component;\n    set_current_component(component);\n    const props = options.props || {};\n    const $$ = component.$$ = {\n        fragment: null,\n        ctx: null,\n        // state\n        props: prop_names,\n        update: noop,\n        not_equal,\n        bound: blank_object(),\n        // lifecycle\n        on_mount: [],\n        on_destroy: [],\n        before_update: [],\n        after_update: [],\n        context: new Map(parent_component ? parent_component.$$.context : []),\n        // everything else\n        callbacks: blank_object(),\n        dirty: null\n    };\n    let ready = false;\n    $$.ctx = instance\n        ? instance(component, props, (key, ret, value = ret) => {\n            if ($$.ctx && not_equal($$.ctx[key], $$.ctx[key] = value)) {\n                if ($$.bound[key])\n                    $$.bound[key](value);\n                if (ready)\n                    make_dirty(component, key);\n            }\n            return ret;\n        })\n        : props;\n    $$.update();\n    ready = true;\n    run_all($$.before_update);\n    $$.fragment = create_fragment($$.ctx);\n    if (options.target) {\n        if (options.hydrate) {\n            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n            $$.fragment.l(children(options.target));\n        }\n        else {\n            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n            $$.fragment.c();\n        }\n        if (options.intro)\n            transition_in(component.$$.fragment);\n        mount_component(component, options.target, options.anchor);\n        flush();\n    }\n    set_current_component(parent_component);\n}\nlet SvelteElement;\nif (typeof HTMLElement !== 'undefined') {\n    SvelteElement = class extends HTMLElement {\n        constructor() {\n            super();\n            this.attachShadow({ mode: 'open' });\n        }\n        connectedCallback() {\n            // @ts-ignore todo: improve typings\n            for (const key in this.$$.slotted) {\n                // @ts-ignore todo: improve typings\n                this.appendChild(this.$$.slotted[key]);\n            }\n        }\n        attributeChangedCallback(attr, _oldValue, newValue) {\n            this[attr] = newValue;\n        }\n        $destroy() {\n            destroy_component(this, 1);\n            this.$destroy = noop;\n        }\n        $on(type, callback) {\n            // TODO should this delegate to addEventListener?\n            const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));\n            callbacks.push(callback);\n            return () => {\n                const index = callbacks.indexOf(callback);\n                if (index !== -1)\n                    callbacks.splice(index, 1);\n            };\n        }\n        $set() {\n            // overridden by instance, if it has props\n        }\n    };\n}\nclass SvelteComponent {\n    $destroy() {\n        destroy_component(this, 1);\n        this.$destroy = noop;\n    }\n    $on(type, callback) {\n        const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));\n        callbacks.push(callback);\n        return () => {\n            const index = callbacks.indexOf(callback);\n            if (index !== -1)\n                callbacks.splice(index, 1);\n        };\n    }\n    $set() {\n        // overridden by instance, if it has props\n    }\n}\n\nfunction dispatch_dev(type, detail) {\n    document.dispatchEvent(custom_event(type, detail));\n}\nfunction append_dev(target, node) {\n    dispatch_dev(\"SvelteDOMInsert\", { target, node });\n    append(target, node);\n}\nfunction insert_dev(target, node, anchor) {\n    dispatch_dev(\"SvelteDOMInsert\", { target, node, anchor });\n    insert(target, node, anchor);\n}\nfunction detach_dev(node) {\n    dispatch_dev(\"SvelteDOMRemove\", { node });\n    detach(node);\n}\nfunction detach_between_dev(before, after) {\n    while (before.nextSibling && before.nextSibling !== after) {\n        detach_dev(before.nextSibling);\n    }\n}\nfunction detach_before_dev(after) {\n    while (after.previousSibling) {\n        detach_dev(after.previousSibling);\n    }\n}\nfunction detach_after_dev(before) {\n    while (before.nextSibling) {\n        detach_dev(before.nextSibling);\n    }\n}\nfunction listen_dev(node, event, handler, options, has_prevent_default, has_stop_propagation) {\n    const modifiers = options === true ? [\"capture\"] : options ? Array.from(Object.keys(options)) : [];\n    if (has_prevent_default)\n        modifiers.push('preventDefault');\n    if (has_stop_propagation)\n        modifiers.push('stopPropagation');\n    dispatch_dev(\"SvelteDOMAddEventListener\", { node, event, handler, modifiers });\n    const dispose = listen(node, event, handler, options);\n    return () => {\n        dispatch_dev(\"SvelteDOMRemoveEventListener\", { node, event, handler, modifiers });\n        dispose();\n    };\n}\nfunction attr_dev(node, attribute, value) {\n    attr(node, attribute, value);\n    if (value == null)\n        dispatch_dev(\"SvelteDOMRemoveAttribute\", { node, attribute });\n    else\n        dispatch_dev(\"SvelteDOMSetAttribute\", { node, attribute, value });\n}\nfunction prop_dev(node, property, value) {\n    node[property] = value;\n    dispatch_dev(\"SvelteDOMSetProperty\", { node, property, value });\n}\nfunction dataset_dev(node, property, value) {\n    node.dataset[property] = value;\n    dispatch_dev(\"SvelteDOMSetDataset\", { node, property, value });\n}\nfunction set_data_dev(text, data) {\n    data = '' + data;\n    if (text.data === data)\n        return;\n    dispatch_dev(\"SvelteDOMSetData\", { node: text, data });\n    text.data = data;\n}\nclass SvelteComponentDev extends SvelteComponent {\n    constructor(options) {\n        if (!options || (!options.target && !options.$$inline)) {\n            throw new Error(`'target' is a required option`);\n        }\n        super();\n    }\n    $destroy() {\n        super.$destroy();\n        this.$destroy = () => {\n            console.warn(`Component was already destroyed`); // eslint-disable-line no-console\n        };\n    }\n}\n\nexport { HtmlTag, SvelteComponent, SvelteComponentDev, SvelteElement, add_attribute, add_classes, add_flush_callback, add_location, add_render_callback, add_resize_listener, add_transform, afterUpdate, append, append_dev, assign, attr, attr_dev, beforeUpdate, bind, binding_callbacks, blank_object, bubble, check_outros, children, claim_element, claim_space, claim_text, clear_loops, component_subscribe, createEventDispatcher, create_animation, create_bidirectional_transition, create_in_transition, create_out_transition, create_slot, create_ssr_component, current_component, custom_event, dataset_dev, debug, destroy_block, destroy_component, destroy_each, detach, detach_after_dev, detach_before_dev, detach_between_dev, detach_dev, dirty_components, dispatch_dev, each, element, element_is, empty, escape, escaped, exclude_internal_props, fix_and_destroy_block, fix_and_outro_and_destroy_block, fix_position, flush, getContext, get_binding_group_value, get_current_component, get_slot_changes, get_slot_context, get_spread_object, get_spread_update, get_store_value, globals, group_outros, handle_promise, identity, init, insert, insert_dev, intros, invalid_attribute_name_character, is_client, is_function, is_promise, listen, listen_dev, loop, measure, missing_component, mount_component, noop, not_equal, now, null_to_empty, object_without_properties, onDestroy, onMount, once, outro_and_destroy_block, prevent_default, prop_dev, raf, run, run_all, safe_not_equal, schedule_update, select_multiple_value, select_option, select_options, select_value, self, setContext, set_attributes, set_current_component, set_custom_element_data, set_data, set_data_dev, set_input_type, set_input_value, set_now, set_raf, set_store_value, set_style, set_svg_attributes, space, spread, stop_propagation, subscribe, svg_element, text, tick, time_ranges_to_array, to_number, toggle_class, transition_in, transition_out, update_keyed_each, validate_component, validate_store, xlink_attr };\n","<script>\nexport let className = \"default\";\nexport let disabled = false;\nexport let contentText;\nexport let contentComponent;\nexport let onClick = () => {\n\tcontentText = \"the default handler\";\n};\n\nexport let _app;\nlet contentComponentContainer;\n\n$:{\n\tif(_app && contentComponentContainer && contentComponent._component)\n\t\t_app.hydrateComponent(contentComponent, contentComponentContainer);\n}\n\n</script>\n\n\n<button class={className} {disabled} on:click={onClick}>\n    {#if contentComponent && contentComponent._component}\n\t<div bind:this={contentComponentContainer}>\n\t</div>\n    {:else if contentText}\n    {contentText}\n    {:else}\n    <slot />\n    {/if}\n</button>\n\n\n<style>\n\n.default {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n\tborder-radius: 2px;\n\tcolor: #333;\n\tbackground-color: #f4f4f4;\n\toutline: none;\n}\n\n.default:active {\n\tbackground-color: #ddd;\n}\n\n.default:focus {\n\tborder-color: #666;\n}\n\n</style>","<script>\n\nexport let value=\"\";\nexport let hideValue = false;\nexport let className = \"default\";\n\nexport let _app;\n\nlet actualValue = \"\";\n$: {\n\tif(_app && value._isstate) {\n\t\t_app.store.subscribe(s => {\n\t\t\tactualValue = _app.store.getValue(s, value);\n\t\t});\n\t}\n}\n\nconst onchange = (ev) => {\n\tif(_app && value._isstate) {\n\t\t_app.store.setValue(value, ev.target.value);\n\t} else if(!value._isstate) {\n\t\tactualValue = ev.target.value;\n\t}\n}\n\n</script>\n\n{#if hideValue}\n<input class={className} \n\t   type=\"password\" \n\t   value={actualValue} on:change/>\n{:else}\n<input class={className} type=\"text\" value={actualValue}/>\n{/if}\n\n<style>\n.default {\n    width: 100%;\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n    border-radius: 2px;\n    width: 100%;\n}\n\n.default:disabled {\n\tcolor: #ccc;\n}\n\n</style>","<script>\nexport let containerClass = \"\";\nexport let formControls = [];\n\nexport let _app;\n\nlet htmlElements = {};\nlet labels = {};\n\n$ : {\n    let cIndex = 0;\n    for(let c of formControls) {\n        labels[cIndex] = c.label;\n        cIndex++;\n    }\n\n    if(_app && htmlElements) {\n        for(let el in htmlElements) {\n            _app.hydrateComponent(\n                formControls[el].control,\n                htmlElements[el]\n            );\n        }\n    }\n}\n\n</script>\n\n<div class=\"form-root {containerClass}\">\n    {#each formControls as child, index}\n    <div class=\"label\">{labels[index]}</div>\n    <div class=\"control\"\n        bind:this={htmlElements[index]}>\n    </div>\n    {/each}\n</div>\n\n<style>\n.form-root {\n    display: grid;\n    grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/\n}\n\n.label {\n    grid-column-start: label;\n    padding: 5px 10px;\n    vertical-align: middle;\n}\n.control {\n    grid-column-start: control;\n    padding: 5px 10px;\n}\n.overflow {\n    grid-column-start: overflow;\n}\n.full-width {\n    width: 100%;\n}\n</style>","\r\nconst apiCall = (method) => (url, body) => \r\n    fetch(url, {\r\n        method: method,\r\n        headers: {\r\n            'Content-Type': 'application/json',\r\n        },\r\n        body: body && JSON.stringify(body), \r\n    });\r\n\r\nexport const post = apiCall(\"POST\");\r\nexport const get = apiCall(\"GET\");\r\nexport const patch = apiCall(\"PATCH\");\r\nexport const del = apiCall(\"DELETE\");\r\n\r\nexport const authenticate = (username, password) => post(\"./api/authenticate\", {\r\n    username, password\r\n});\r\n\r\nexport default {\r\npost, get, patch, delete:del\r\n};","<script>\n\nimport Textbox from \"./Textbox.svelte\";\nimport Form from \"./Form.svelte\";\nimport Button from \"./Button.svelte\";\nimport { authenticate } from \"./api\";\n\nexport let usernameLabel = \"Username\";\nexport let passwordLabel = \"Password\";\nexport let loginButtonLabel = \"Login\";\nexport let loginRedirect = \"\";\nexport let logo = \"\";\nexport let buttonClass = \"\";\n\nlet username = \"\";\nlet password = \"\";\nlet busy = false;\nlet incorrect = false;\n\nconst login = () => {\n    busy = true;\n    authenticate(username, password)\n    .then(r => {\n        busy = false;\n        if(r.status === 200) {\n            // reload page\n        } else {\n            incorrect = true;\n        }\n    })\n}\n\n</script>\n\n<div class=\"root\">\n\n    <div class=\"content\">\n\n        {#if logo}\n        <div class=\"logo-container\">\n            <img src={logo} alt=\"logo\"/>\n        </div>\n        {/if}\n\n        <div class=\"form-root\">\n            <div class=\"label\">\n                {usernameLabel}\n            </div>\n            <div class=\"control\">\n                <Textbox bind:value={username} />\n            </div>\n            <div class=\"label\">\n                {passwordLabel}\n            </div>\n            <div class=\"control\">\n                <Textbox bind:value={password} hideValue=true />\n            </div>\n        </div>\n\n        <div class=\"login-button-container\">\n            <Button disabled={busy} \n                    on:click={login}\n                    class={buttonClass}>\n                    {loginButtonLabel}\n            </Button>\n        </div>\n\n        {#if incorrect}\n        <div class=\"incorrect-details-panel\">\n            Incorrect username or password\n        </div>\n        {/if}\n\n    </div>\n\n</div>\n\n<style>\n\n.root {\n    height: 100%;\n    display:grid;\n    grid-template-columns: [left] 1fr [middle] auto [right] 1fr;\n    grid-template-rows: [top] 1fr [center] auto [bottom] 1fr;\n}\n\n.content {\n    grid-column-start: middle;\n    grid-row-start: center;\n    width: 400px;\n}\n\n.logo-container {\n    margin-bottom: 20px\n}\n\n.logo-container > img {\n    max-width: 100%;\n}\n\n.login-button-container {\n    text-align: right;\n    margin-top: 20px;\n}\n\n.incorrect-details-panel {\n    margin-top: 30px;\n    padding: 10px;\n    border-style: solid;\n    border-width: 1px;\n    border-color: maroon;\n    border-radius: 1px;\n    text-align: center;\n    color: maroon;\n    background-color: mistyrose;\n}\n\n.form-root {\n    display: grid;\n    grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/\n}\n\n.label {\n    grid-column-start: label;\n    padding: 5px 10px;\n    vertical-align: middle;\n}\n.control {\n    grid-column-start: control;\n    padding: 5px 10px;\n}\n\n</style>","export const buildStyle = (styles) => {\r\n    let str = \"\";\r\n    for(let s in styles) {\r\n        if(styles[s]) {\r\n            str += `${s}: ${styles[s]}; `\r\n        }\r\n    }\r\n    return str;\r\n}","<script>\r\nimport { onMount } from 'svelte'\r\nimport {buildStyle} from \"./buildStyle\";\r\n\r\nexport let gridTemplateRows =\"\";\r\nexport let gridTemplateColumns =\"\";\r\nexport let children = [];\r\nexport let width = \"auto\";\r\nexport let height = \"auto\";\r\nexport let containerClass=\"\";\r\nexport let itemContainerClass=\"\";\r\n\r\n/*\"gridColumnStart\":\"string\",\r\n\"gridColumnEnd\":\"string\",\r\n\"gridRowStart\":\"string\",\r\n\"gridRowEnd\":\"string\"*/\r\n\r\n\r\nexport let _app;\r\n\r\nlet style=\"\";\r\nlet htmlElements = {};\r\n\r\n$ : {\r\n    if(_app && htmlElements) {\r\n        for(let el in htmlElements) {\r\n            _app.hydrateComponent(\r\n                children[el].control,\r\n                htmlElements[el]\r\n            );\r\n        }\r\n    }\r\n}\r\n\r\nconst childStyle = child => \r\n    buildStyle({\r\n        \"grid-column-start\": child.gridColumnStart,\r\n        \"grid-column-end\": child.gridColumnEnd,\r\n        \"grid-column\": child.gridColumn,\r\n        \"grid-row-start\": child.gridRowStart,\r\n        \"grid-row-end\": child.gridRowStart,\r\n        \"grid-row\": child.gridRow,\r\n    });\r\n\r\n</script>\r\n\r\n<div class=\"root {containerClass}\"\r\n     style=\"width: {width}; height: {height}; grid-template-columns: {gridTemplateColumns}; grid-template-rows: {gridTemplateRows};\">\r\n    {#each children as child, index}\r\n    <div class=\"{itemContainerClass}\"\r\n        style={childStyle(child)}\r\n        bind:this={htmlElements[index]}>\r\n    </div>\r\n    {/each}\r\n</div>\r\n\r\n<style>\r\n\r\n.root {\r\n    display: grid;\r\n}\r\n\r\n</style>","<script>\nimport { onMount } from 'svelte'\n\nexport let direction = \"horizontal\";\nexport let children = [];\nexport let width = \"auto\";\nexport let height = \"auto\";\nexport let containerClass=\"\";\nexport let itemContainerClass=\"\";\n\n\nexport let _app;\n\nlet htmlElements = {};\n\nonMount(() => {\n    if(_app && htmlElements) {\n        for(let el in htmlElements) {\n            _app.hydrateComponent(\n                children[el].control,\n                htmlElements[el]\n            );\n        }\n    }\n});\n\n\n</script>\n\n<div class=\"root {containerClass}\"\n     style=\"width: {width}; height: {height}\">\n    {#each children as child, index}\n    <div class={direction}>\n        <div class=\"{itemContainerClass}\"\n            bind:this={htmlElements[index]}>\n        </div>\n    </div>\n    {/each}\n</div>\n\n<style>\n\n.horizontal {\n    display:inline-block;\n}\n\n.vertical {\n    display: block;\n}\n\n</style>"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/packages/materialdesign-components/package.json b/packages/materialdesign-components/package.json
index 299dd7bdda..eb9fa738df 100644
--- a/packages/materialdesign-components/package.json
+++ b/packages/materialdesign-components/package.json
@@ -12,8 +12,8 @@
     "publishdev": "yarn build && node ./scripts/publishDev.js"
   },
   "devDependencies": {
-    "@budibase/client": "^0.0.29",
-    "@budibase/standard-components": "^0.0.29",
+    "@budibase/client": "^0.0.31",
+    "@budibase/standard-components": "^0.0.31",
     "@material/button": "^4.0.0",
     "@material/checkbox": "^4.0.0",
     "@material/data-table": "4.0.0",
@@ -50,7 +50,7 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.0.29",
+  "version": "0.0.31",
   "license": "MIT",
   "gitHead": "72a77a035eb7c1443b079bf93c29b3e5fe02094e",
   "dependencies": {
diff --git a/packages/materialdesign-components/public/index.html b/packages/materialdesign-components/public/index.html
index 0571dbd6ee..186f9ba2b4 100644
--- a/packages/materialdesign-components/public/index.html
+++ b/packages/materialdesign-components/public/index.html
@@ -5,9 +5,6 @@
 	<meta name='viewport' content='width=device-width'>
 
 	<title>Budibase-Material Design</title>
-	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
-	<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      rel="stylesheet">
 	<link rel='icon' type='image/png' href='/favicon.png'>
 	<link rel='stylesheet' href='/build/bundle.css'>
 
diff --git a/packages/materialdesign-components/src/Button/Button.svelte b/packages/materialdesign-components/src/Button/Button.svelte
index 6142352280..3d806d2ac8 100644
--- a/packages/materialdesign-components/src/Button/Button.svelte
+++ b/packages/materialdesign-components/src/Button/Button.svelte
@@ -65,6 +65,9 @@
 {/if}
 
 <style>
+  .mdc-button:not(.fullwidth) {
+    width: fit-content;
+  }
   .fullwidth {
     width: 100%;
   }
diff --git a/packages/materialdesign-components/src/ClassBuilder.js b/packages/materialdesign-components/src/ClassBuilder.js
index a3aaef49a9..09c3ae9421 100644
--- a/packages/materialdesign-components/src/ClassBuilder.js
+++ b/packages/materialdesign-components/src/ClassBuilder.js
@@ -1,9 +1,10 @@
 export default class ClassBuilder {
   constructor(block, defaultIgnoreList) {
     this.block = `mdc-${block}`
-    this.defaultIgnoreList = defaultIgnoreList //will be ignored when building custom classes
+    this.defaultIgnoreList = defaultIgnoreList //will be ignored when building custom classes    
   }
 
+
   /* 
   handles both blocks and elementss (BEM MD Notation) 
   params = {elementName: string, props: {modifiers{}, customs:{}, extras: []}}
diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte
index 2012a81593..9081da28e0 100644
--- a/packages/materialdesign-components/src/Test/TestApp.svelte
+++ b/packages/materialdesign-components/src/Test/TestApp.svelte
@@ -34,6 +34,7 @@
         props: {
           _component: "testcomponents/rootComponent",
           _children: [
+            Button,
             Textfield,
             Checkboxgroup,
             Radiobutton,
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index b09f5e528b..14eacb6d83 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -35,7 +35,7 @@ export const props = {
   Button: {
     _component: "@budibase/materialdesign-components/Button",
     _children: [],
-    variant: "raised",
+    variant: "text",
     colour: "secondary",
     size: "large",
     href: "",
@@ -64,7 +64,8 @@ export const props = {
     _children: [],
     label: "First",
     colour: "secondary",
-    fullwidth: true,
+    icon: "alarm_on",
+    trailingIcon: true,
     maxLength: 500,
     helperText: "Add Surname",
     value: "store.surname",
diff --git a/packages/materialdesign-components/src/_material-fonts.scss b/packages/materialdesign-components/src/_material-fonts.scss
new file mode 100644
index 0000000000..8c5aae2ef0
--- /dev/null
+++ b/packages/materialdesign-components/src/_material-fonts.scss
@@ -0,0 +1,2 @@
+@import "https://fonts.googleapis.com/css?family=Roboto:300,400,500";
+@import "https://fonts.googleapis.com/icon?family=Material+Icons";
\ No newline at end of file
diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js
index 14a5c6f583..aa6632c48c 100644
--- a/packages/materialdesign-components/src/index.js
+++ b/packages/materialdesign-components/src/index.js
@@ -1,4 +1,5 @@
 import "@material/theme/mdc-theme.scss"
+import "./_material-fonts.scss"
 
 export { Button } from "./Button"
 export { default as Icon } from "./Common/Icon.svelte"
diff --git a/packages/server/package.json b/packages/server/package.json
index 4edfe6e1bc..7c72f92f27 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/server",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "description": "Budibase Web Server",
   "main": "index.js",
   "scripts": {
@@ -16,8 +16,8 @@
   "author": "Michael Shanks",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/client": "^0.0.29",
-    "@budibase/core": "^0.0.29",
+    "@budibase/client": "^0.0.31",
+    "@budibase/core": "^0.0.31",
     "@koa/router": "^8.0.0",
     "fs-extra": "^8.1.0",
     "koa": "^2.7.0",
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 6d76b20f01..66ffe81fed 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -12,7 +12,7 @@
     "publishdev": "yarn build && node ./scripts/publishDev.js"
   },
   "devDependencies": {
-    "@budibase/client": "^0.0.29",
+    "@budibase/client": "^0.0.31",
     "@nx-js/compiler-util": "^2.0.0",
     "bcryptjs": "2.4.3",
     "fs-extra": "^8.1.0",
@@ -32,7 +32,7 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.0.29",
+  "version": "0.0.31",
   "license": "MIT",
   "gitHead": "72a77a035eb7c1443b079bf93c29b3e5fe02094e"
 }
diff --git a/yarn.lock b/yarn.lock
index 7a11b53ea3..d826ac5bff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1363,7 +1363,7 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
-chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.2:
+chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -3394,6 +3394,11 @@ mem@^4.0.0:
     mimic-fn "^2.0.0"
     p-is-promise "^2.0.0"
 
+memorystream@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
+  integrity sha1-htcJCzDORV1j+64S3aUaR93K+bI=
+
 meow@^3.3.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
@@ -3773,6 +3778,21 @@ npm-registry-fetch@^4.0.0:
     npm-package-arg "^6.1.0"
     safe-buffer "^5.2.0"
 
+npm-run-all@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.5.tgz#04476202a15ee0e2e214080861bff12a51d98fba"
+  integrity sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    chalk "^2.4.1"
+    cross-spawn "^6.0.5"
+    memorystream "^0.3.1"
+    minimatch "^3.0.4"
+    pidtree "^0.3.0"
+    read-pkg "^3.0.0"
+    shell-quote "^1.6.1"
+    string.prototype.padend "^3.0.0"
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -4174,6 +4194,11 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
+pidtree@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.3.1.tgz#ef09ac2cc0533df1f3250ccf2c4d366b0d12114a"
+  integrity sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==
+
 pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -4688,6 +4713,11 @@ shebang-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
   integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
 
+shell-quote@^1.6.1:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
+  integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -4931,6 +4961,14 @@ string-width@^4.1.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
+string.prototype.padend@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.padend/-/string.prototype.padend-3.1.0.tgz#dc08f57a8010dc5c153550318f67e13adbb72ac3"
+  integrity sha512-3aIv8Ffdp8EZj8iLwREGpQaUZiPyrWrpzMBHvkiSW/bK/EGve9np07Vwy7IJ5waydpGXzQZu/F8Oze2/IWkBaA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
 string.prototype.trimleft@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz#9bdb8ac6abd6d602b17a4ed321870d2f8dcefc74"