Update some more parts of the builder to use new form components

packages/builder/src/components/common/DrawerBindableInput.svelte

@@ -32,9 +32,8 @@
 
 <div class="control">
   <Input
-    {thin}
     value={readableValue}
-    on:change={event => onChange(event.target.value)}
+    on:change={event => onChange(event.detail)}
     {placeholder} />
   <div class="icon" on:click={bindingDrawer.show}>
     <Icon name="lightning" />

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte

@@ -53,15 +53,9 @@
     <Label small>{fieldLabel}</Label>
     {#if schemaFields}
       <Select
-        thin
-        secondary
         value={field[0]}
-        on:change={event => updateFieldName(idx, event.target.value)}>
-        <option value="" />
-        {#each schemaFields as schemaField}
-          <option value={schemaField.name}>{schemaField.name}</option>
-        {/each}
-      </Select>
+        on:change={event => updateFieldName(idx, event.detail)}
+        options={schemaFields.map(field => field.name)} />
     {:else}
       <Input
         thin
@@ -76,7 +70,11 @@
       bindings={bindableProperties}
       on:change={event => updateFieldValue(idx, event.detail)} />
     <div class="remove-field-container">
-      <Button icon="Close" size="S" quiet on:click={() => removeField(field[0])} />
+      <Button
+        icon="Close"
+        size="S"
+        quiet
+        on:click={() => removeField(field[0])} />
     </div>
   {/each}
   <div>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte

@@ -15,7 +15,7 @@
     $store.selectedComponentId
   )
   $: schemaFields = getSchemaFields(parameters?.tableId)
-  $: tableOptions = $tables || []
+  $: tableOptions = $tables.list || []
 
   const getSchemaFields = tableId => {
     const { schema } = getSchemaForDatasource({ type: "table", tableId })
@@ -35,20 +35,19 @@
   </Body>
   <div class="fields">
     <Label small>Data Source</Label>
-    <Select thin secondary bind:value={parameters.providerId}>
-      <option value="">None</option>
-      {#each dataProviderComponents as provider}
-        <option value={provider._id}>{provider._instanceName}</option>
-      {/each}
-    </Select>
+    <Select
+      bind:value={parameters.providerId}
+      options={dataProviderComponents}
+      placeholder="None"
+      getOptionLabel={option => option._instanceName}
+      getOptionValue={option => option._id} />
 
     <Label small>Table</Label>
-    <Select thin secondary bind:value={parameters.tableId}>
-      <option value="" />
-      {#each tableOptions as table}
-        <option value={table._id}>{table.name}</option>
-      {/each}
-    </Select>
+    <Select
+      bind:value={parameters.tableId}
+      options={tableOptions}
+      getOptionLabel={option => option.name}
+      getOptionValue={option => option._id} />
 
     {#if parameters.tableId}
       <SaveFields
@@ -74,7 +73,7 @@
     column-gap: var(--spacing-l);
     row-gap: var(--spacing-s);
     grid-template-columns: auto 1fr auto 1fr auto;
-    align-items: baseline;
+    align-items: center;
   }
 
   .fields :global(> div:nth-child(2)),