adds Heading component

packages/bbui/src/Modal/Modal.svelte

@@ -1,5 +1,4 @@
 <script>
-  import "@spectrum-css/dialog/dist/index-vars.css"
   import "@spectrum-css/modal/dist/index-vars.css"
   import "@spectrum-css/underlay/dist/index-vars.css"
   import { createEventDispatcher, setContext, tick } from "svelte"

packages/bbui/src/Typography/Heading.svelte

@@ -0,0 +1,78 @@
+<script>
+    import "@spectrum-css/heading/dist/index-vars.css"
+
+    // Level
+    export let h1 = false;
+    export let h2 = false;
+    export let h3 = false;
+    export let h4 = false;
+
+    // Sizes
+    export let xxxl = false;
+    export let xxl = false;
+    export let xl = false;
+    export let l = false;
+    export let m = false;
+    export let s = false;
+    export let xs = false;
+    export let xxs = false;
+
+    export let serif = false;
+
+</script>
+
+{#if h1}
+    <h1 class="spectrum-Heading"
+        class:spectrum-Heading--serif={serif}
+        class:spectrum-Heading--sizeXXXL={xxxl}
+        class:spectrum-Heading--sizeXXL={xxl}
+        class:spectrum-Heading--sizeXL={xl}
+        class:spectrum-Heading--sizeL={l}
+        class:spectrum-Heading--sizeM={m}
+        class:spectrum-Heading--sizeS={s}
+        class:spectrum-Heading--sizeXS={xs}
+        class:spectrum-Heading--sizeXXS={xxs}>
+        <slot />
+    </h1>
+{:else if  h2}
+    <h2 class="spectrum-Heading" 
+        class:spectrum-Heading--serif={serif}
+        class:spectrum-Heading--sizeXXXL={xxxl}
+        class:spectrum-Heading--sizeXXL={xxl}
+        class:spectrum-Heading--sizeXL={xl}
+        class:spectrum-Heading--sizeL={l}
+        class:spectrum-Heading--sizeM={m}
+        class:spectrum-Heading--sizeS={s}
+        class:spectrum-Heading--sizeXS={xs}
+        class:spectrum-Heading--sizeXXS={xxs}>
+        <slot />
+    </h2>
+{:else if  h3}
+    <h3 class="spectrum-Heading" 
+        class:spectrum-Heading--serif={serif}
+        class:spectrum-Heading--sizeXXXL={xxxl}
+        class:spectrum-Heading--sizeXXL={xxl}
+        class:spectrum-Heading--sizeXL={xl}
+        class:spectrum-Heading--sizeL={l}
+        class:spectrum-Heading--sizeM={m}
+        class:spectrum-Heading--sizeS={s}
+        class:spectrum-Heading--sizeXS={xs}
+        class:spectrum-Heading--sizeXXS={xxs}>
+        <slot />
+    </h3>
+{:else if  h4}
+    <h4 class="spectrum-Heading" 
+        class:spectrum-Heading--serif={serif}
+        class:spectrum-Heading--sizeXXXL={xxxl}
+        class:spectrum-Heading--sizeXXL={xxl}
+        class:spectrum-Heading--sizeXL={xl}
+        class:spectrum-Heading--sizeL={l}
+        class:spectrum-Heading--sizeM={m}
+        class:spectrum-Heading--sizeS={s}
+        class:spectrum-Heading--sizeXS={xs}
+        class:spectrum-Heading--sizeXXS={xxs}>
+        <slot />
+    </h4>
+{:else}
+     SPECIFY HEADING SIZE!
+{/if}