Break out notification component to standalone component

packages/bbui/src/Notification/Notification.svelte

@@ -0,0 +1,20 @@
+<script>
+  export let type = "info"
+  export let icon = "Info"
+  export let message = ""
+</script>
+
+<div class="spectrum-Toast spectrum-Toast--{type}">
+  {#if icon}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
+  <div class="spectrum-Toast-body">
+    <div class="spectrum-Toast-content">{message || ""}</div>
+  </div>
+</div>

packages/bbui/src/Notification/NotificationDisplay.svelte

@@ -2,30 +2,16 @@
   import "@spectrum-css/toast/dist/index-vars.css"
   import Portal from "svelte-portal"
   import { flip } from "svelte/animate"
-  import { fly } from "svelte/transition"
   import { notifications } from "../Stores/notifications"
+  import Notification from "./Notification.svelte"
+  import { fly } from "svelte/transition"
 </script>
 
 <Portal target=".modal-container">
   <div class="notifications">
     {#each $notifications as { type, icon, message, id } (id)}
-      <div
+      <div animate:flip transition:fly={{ y: -30 }}>
-        animate:flip
+        <Notification {type} {icon} {message} />
-        transition:fly={{ y: -30 }}
-        class="spectrum-Toast spectrum-Toast--{type} notification-offset"
-      >
-        {#if icon}
-          <svg
-            class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon"
-            focusable="false"
-            aria-hidden="true"
-          >
-            <use xlink:href="#spectrum-icon-18-{icon}" />
-          </svg>
-        {/if}
-        <div class="spectrum-Toast-body">
-          <div class="spectrum-Toast-content">{message}</div>
-        </div>
       </div>
     {/each}
   </div>
@@ -34,7 +20,7 @@
 <style>
   .notifications {
     position: fixed;
-    top: 10px;
+    top: 20px;
     left: 0;
     right: 0;
     margin: 0 auto;
@@ -45,8 +31,6 @@
     justify-content: flex-start;
     align-items: center;
     pointer-events: none;
-  }
+    gap: 10px;
-  .notification-offset {
-    margin-bottom: 10px;
   }
 </style>

packages/bbui/src/index.js

@@ -38,6 +38,7 @@ export { default as MenuItem } from "./Menu/Item.svelte"
 export { default as Modal } from "./Modal/Modal.svelte"
 export { default as ModalContent } from "./Modal/ModalContent.svelte"
 export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
+export { default as Notification } from "./Notification/Notification.svelte"
 export { default as SideNavigation } from "./SideNavigation/Navigation.svelte"
 export { default as SideNavigationItem } from "./SideNavigation/Item.svelte"
 export { default as DatePicker } from "./Form/DatePicker.svelte"