rework Divider to use new API

packages/bbui/src/Divider/Divider.svelte

@@ -1,23 +1,19 @@
 <script>
   import "@spectrum-css/divider/dist/index-vars.css"
-  export let l = false
+  export let size = "M"
-  export let m = false
-  export let s = false
 
   export let vertical = false
   export let noMargin = false
   export let noGrid = false
-
-  $: useDefault = ![l, m, s].includes(true)
 </script>
 
 <hr
   class:noMargin
   class:noGrid
-  class:spectrum-Divider--sizeL={l}
+  class="spectrum-Divider spectrum-Divider--{vertical
-  class:spectrum-Divider--sizeM={m || useDefault}
+    ? 'vertical'
-  class:spectrum-Divider--sizeS={s}
+    : 'horizontal'} spectrum-Dialog-divider spectrum-Divider--size{size}"
-  class="spectrum-Divider spectrum-Divider--{vertical ? 'vertical' : 'horizontal'} spectrum-Dialog-divider" />
+/>
 
 <style>
   hr.noMargin {

packages/bbui/src/Modal/ModalContent.svelte

@@ -42,7 +42,7 @@
       {title}
     </h1>
 
-    <Divider m />
+    <Divider size="M" />
     <!-- TODO: Remove content-grid class once Layout components are in bbui -->
     <section class="spectrum-Dialog-content content-grid">
       <slot />

packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte

@@ -149,7 +149,7 @@
         </li>
       {/each}
     </ul>
-    <Divider s />
+    <Divider size="S" />
     <div class="title">
       <Heading xs h3>Views</Heading>
     </div>
@@ -162,7 +162,7 @@
         </li>
       {/each}
     </ul>
-    <Divider s />
+    <Divider size="S" />
     <div class="title">
       <Heading xs h3>Relationships</Heading>
     </div>
@@ -175,7 +175,7 @@
         </li>
       {/each}
     </ul>
-    <Divider s />
+    <Divider size="S" />
     <div class="title">
       <Heading xs h3>Queries</Heading>
     </div>
@@ -190,7 +190,7 @@
     </ul>
 
     {#if otherSources?.length}
-      <Divider s />
+      <Divider size="S" />
       <div class="title">
         <Heading extraSmall>Other</Heading>
       </div>