@reshape-biotech/design-system 2.7.51 → 2.7.53

package/dist/components/icon-button/IconButton.svelte.d.ts

@@ -1,11 +1,17 @@
-import type { Snippet } from 'svelte';
+export type IconButtonVariant = 'primary' | 'secondary' | 'transparent' | 'outline' | 'danger' | 'secondary-inverse' | 'transparent-inverse';
+export type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 import type { HTMLButtonAttributes } from 'svelte/elements';
-type Variant = 'primary' | 'secondary' | 'transparent' | 'outline' | 'accent' | 'danger' | 'secondary-inverse' | 'transparent-inverse';
+import type { Snippet } from 'svelte';
 interface Props extends HTMLButtonAttributes {
-    variant?: Variant;
+    class?: string;
+    onClick?: (event?: MouseEvent) => void;
     type?: 'button' | 'submit' | 'reset' | null | undefined;
     loading?: boolean;
-    size?: 'xs' | 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    accessibilityLabel?: string | undefined;
+    size?: IconButtonSize;
+    tabindex?: number | undefined;
+    variant?: IconButtonVariant;
     children?: Snippet;
     rounded?: boolean;
 }

package/dist/components/icons/Icon.stories.svelte

@@ -7,12 +7,6 @@
     component: Icon,
     title: 'Components/Icons',
     tags: ['autodocs'],
-    parameters: {
-      design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%5BWIP%5D--Reshape-Design-System%3A-V1.1?node-id=20-30983&t=qQZtfqCN4P2k2UYf-0',
-      },
-    },
   });
 </script>
 

package/dist/components/input/Input.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/input/Input.figma.js

@@ -0,0 +1,23 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=9-3173
+// source=src/lib/components/input/Input.svelte
+// component=Input
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const variant = instance.getEnum('variant', {
+    'primary': 'primary',
+    'secondary': 'secondary',
+    'transparent': 'transparent',
+    'borderless': 'borderless',
+});
+const size = instance.getEnum('size', {
+    'xs': 'xs',
+    'sm': 'sm',
+    'md': 'md',
+    'lg': 'lg',
+});
+const placeholder = instance.getString('placeholder');
+export default {
+    example: figma.code `<Input variant="${variant}" size="${size}" placeholder="${placeholder || 'Enter text...'}" />`,
+    imports: ["import Input from './Input.svelte'"],
+    id: 'input',
+};

package/dist/components/input/Input.stories.svelte

@@ -1,5 +1,10 @@
 <script module lang="ts">
-  import Input, { type InputVariant, type InputSize } from './Input.svelte';
+  import Input, { type InputVariant } from './Input.svelte';
+  import Check from 'phosphor-svelte/lib/Check';
+  import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
+  import XCircle from 'phosphor-svelte/lib/XCircle';
+  import AnalysisIcon from '../icons/AnalysisIcon.svelte';
+  import { Icon } from '../icons/index.js';
 
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -7,12 +12,6 @@
     component: Input,
     title: 'Components/Input',
     tags: ['autodocs'],
-    parameters: {
-      design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=9-3169&t=sCuBI8dX6K6NjNR6-0',
-      },
-    },
   });
 
   let value = '';
@@ -23,7 +22,16 @@
 
   const variants = ['primary', 'secondary', 'transparent', 'borderless'];
 
-  const sizes = ['xs', 'sm', 'md', 'lg', 'dynamic'];
+  const sizes = ['xs', 'sm', 'md', 'lg'] as const;
+</script>
+
+<script lang="ts">
+  let sizeStoryValues = $state({
+    xs: 'Sample text',
+    sm: 'Sample text',
+    md: 'Sample text',
+    lg: 'Sample text',
+  });
 </script>
 
 <Story name="Base" args={{ autofocus: true, value: 'Hello' }} />
@@ -42,8 +50,18 @@
 
 <Story name="Sizes" asChild>
   <div class="flex flex-col gap-4">
-    {#each sizes as size}
-      <Input label={size} size={size as InputSize} placeholder="Placeholder" />
+    {#each sizes as size (size)}
+      <Input
+        label={size}
+        {size}
+        placeholder="Placeholder"
+        clearable
+        bind:value={sizeStoryValues[size]}
+      >
+        {#snippet prefix()}
+          <Icon icon={MagnifyingGlass} color="secondary" size={16} />
+        {/snippet}
+      </Input>
     {/each}
   </div>
 </Story>
@@ -63,7 +81,15 @@
 <Story name="Prefix" asChild>
   <Input value="Bob">
     {#snippet prefix()}
-      <div>Mr.</div>
+      Mr.
+    {/snippet}
+  </Input>
+</Story>
+
+<Story name="Analysis icon" asChild>
+  <Input label="Analysis" placeholder="Enter analysis name…" value="">
+    {#snippet prefix()}
+      <AnalysisIcon model="pipeline_small_colonies" size="sm" withBackground />
     {/snippet}
   </Input>
 </Story>
@@ -71,7 +97,7 @@
 <Story name="Suffix" asChild>
   <Input value="30">
     {#snippet suffix()}
-      <div>± 1°C</div>
+      ± 1°C
     {/snippet}
   </Input>
 </Story>
@@ -79,10 +105,10 @@
 <Story name="Prefix & Suffix" asChild>
   <Input value="9001">
     {#snippet prefix()}
-      <div>$</div>
+      $
     {/snippet}
     {#snippet suffix()}
-      <div>🔥</div>
+     🔥
     {/snippet}
   </Input>
 </Story>
@@ -92,9 +118,9 @@
     {#snippet prefix({ valid })}
       <div>
         {#if valid}
-          😊
+          <Icon icon={Check} color="success" />
         {:else}
-          😔
+          <Icon icon={XCircle} color="danger" />
         {/if}
       </div>
     {/snippet}

package/dist/components/input/Input.stories.svelte.d.ts

@@ -1,19 +1,4 @@
 import Input from './Input.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Input: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Input = InstanceType<typeof Input>;
+declare const Input: import("svelte").Component<Record<string, never>, {}, "">;
+type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/components/input/Input.svelte

@@ -16,7 +16,7 @@
     suffix?: Snippet;
     error?: Snippet;
     input?: HTMLInputElement;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
+    size?: 'xs' | 'sm' | 'md' | 'lg' ;
     clearable?: boolean;
     onclear?: () => void;
     class?: string;
@@ -68,7 +68,7 @@
 
   export type InputVariant = 'primary' | 'secondary' | 'transparent' | 'borderless';
 
-  export type InputSize = 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
+  export type InputSize = 'xs' | 'sm' | 'md' | 'lg';
 </script>
 
 <div
@@ -92,16 +92,18 @@
 
   <div class="flex-1">
     <div
-      class={twMerge('flex w-full items-center gap-1 transition-colors', `size-${size}`, className)}
+      class={twMerge('flex w-full items-center transition-colors', `size-${size}`, className)}
       class:border-error!={!valid}
       class:primary={variant === 'primary'}
       class:secondary={variant === 'secondary'}
       class:transparent={variant === 'transparent'}
       class:borderless={variant === 'borderless'}
     >
-      <div class="whitespace-nowrap text-secondary">
-        {@render prefix?.({ valid })}
-      </div>
+      {#if prefix}
+        <div class="whitespace-nowrap text-secondary pl-1">
+          {@render prefix?.({ valid })}
+        </div>
+      {/if}
       <input
         {id}
         class="inline leading-none"
@@ -115,9 +117,11 @@
         bind:value
         {...rest}
       />
-      <div class="whitespace-nowrap text-secondary">
-        {@render suffix?.()}
-      </div>
+      {#if suffix}
+        <div class="whitespace-nowrap text-secondary pr-1">
+          {@render suffix?.()}
+        </div>
+      {/if}
 
       {#if clearable && value}
         <IconButton
@@ -142,7 +146,7 @@
 <style>
   @reference "../../app.css";
   input {
-    @apply w-full resize-none bg-transparent p-1 outline-none placeholder:text-tertiary;
+    @apply w-full px-2 resize-none bg-transparent outline-none rounded-none placeholder:text-tertiary;
   }
 
   div:not(:focus-within):hover {
@@ -174,22 +178,18 @@
   }
 
   .size-xs {
-    @apply h-6 rounded-md p-1 text-xs;
+    @apply h-7 rounded-md p-1 text-label;
   }
 
   .size-sm {
-    @apply h-8 rounded-md p-1;
+    @apply h-8 rounded-lg p-1;
   }
 
   .size-md {
-    @apply h-10 rounded-lg p-1;
+    @apply h-9 rounded-lg p-1;
   }
 
   .size-lg {
-    @apply h-12 rounded-lg px-2 py-3 text-base;
-  }
-
-  .size-dynamic {
-    @apply h-auto rounded-lg px-3 py-2;
+    @apply h-10 rounded-lg p-1;
   }
 </style>

package/dist/components/input/Input.svelte.d.ts

@@ -10,7 +10,7 @@ interface InputProps extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suff
     suffix?: Snippet;
     error?: Snippet;
     input?: HTMLInputElement;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     clearable?: boolean;
     onclear?: () => void;
     class?: string;
@@ -18,7 +18,7 @@ interface InputProps extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suff
     onblur?: (event: FocusEvent) => void;
 }
 export type InputVariant = 'primary' | 'secondary' | 'transparent' | 'borderless';
-export type InputSize = 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
+export type InputSize = 'xs' | 'sm' | 'md' | 'lg';
 declare const Input: import("svelte").Component<InputProps, {
     focus: () => void;
 }, "value" | "input">;

package/dist/components/label/Label.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/label/Label.figma.js

@@ -0,0 +1,12 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=6531-8038
+// source=src/lib/components/label/Label.svelte
+// component=Label
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const required = instance.getBoolean('required');
+const labelText = instance.findText('Label');
+export default {
+    example: figma.code `<Label forId="field-id" text="${labelText ? labelText.textContent : 'Label'}" ${required ? 'required' : ''} />`,
+    imports: ["import Label from './Label.svelte'"],
+    id: 'label',
+};

package/dist/components/legend/Legend.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/legend/Legend.figma.js

@@ -0,0 +1,14 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=5754-37765
+// source=src/lib/components/legend/index.ts
+// component=Legend
+import figma from 'figma';
+export default {
+    example: figma.code `
+    <Legend.Root>
+      <Legend.Item color="#4F46E5" name="Series A" />
+      <Legend.Item color="#10B981" name="Series B" />
+    </Legend.Root>
+  `,
+    imports: ["import * as Legend from './'"],
+    id: 'legend',
+};

package/dist/components/list/List.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/list/List.figma.js

@@ -0,0 +1,23 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=6533-8047
+// source=src/lib/components/list/List.svelte
+// component=List
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const variant = instance.getEnum('variant', {
+    'default': 'default',
+    'compact': 'compact',
+});
+export default {
+    example: figma.code `
+    <List
+      items={['Item 1', 'Item 2', 'Item 3']}
+      variant="${variant}"
+    >
+      {#snippet item(value)}
+        {value}
+      {/snippet}
+    </List>
+  `,
+    imports: ["import List from './List.svelte'"],
+    id: 'list',
+};

package/dist/components/logo/Logo.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/logo/Logo.figma.js

@@ -0,0 +1,21 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=433-11089
+// source=src/lib/components/logo/Logo.svelte
+// component=Logo
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const variant = instance.getEnum('variant', {
+    'horizontal': 'horizontal',
+    'logomark': 'logomark',
+});
+const size = instance.getEnum('size', {
+    'xs': 'xs',
+    'sm': 'sm',
+    'md': 'md',
+    'lg': 'lg',
+    'xl': 'xl',
+});
+export default {
+    example: figma.code `<Logo variant="${variant}" size="${size}" />`,
+    imports: ["import Logo from './Logo.svelte'"],
+    id: 'logo',
+};

package/dist/components/logo/Logo.stories.svelte

@@ -19,3 +19,20 @@
     <Logo size="xl" />
   </div>
 </Story>
+
+<Story name="Horizontal" asChild>
+  <div class="flex flex-col gap-4">
+    <Logo variant="horizontal" size="xs" />
+    <Logo variant="horizontal" size="sm" />
+    <Logo variant="horizontal" size="md" />
+    <Logo variant="horizontal" size="lg" />
+    <Logo variant="horizontal" size="xl" />
+  </div>
+</Story>
+
+<Story name="White" asChild>
+  <div class="flex flex-col gap-4 bg-gray-900 p-4">
+    <Logo color="white" />
+    <Logo variant="horizontal" color="white" />
+  </div>
+</Story>

package/dist/components/logo/Logo.svelte

@@ -2,9 +2,10 @@
   type Props = {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     color?: 'default' | 'white';
+    variant?: 'logomark' | 'horizontal';
   };
 
-  let { size = 'md', color = 'default' }: Props = $props();
+  let { size = 'md', color = 'default', variant = 'logomark' }: Props = $props();
 
   const colorMap = {
     default: '#ff7a00',
@@ -18,22 +19,47 @@
     lg: 32,
     xl: 40,
   };
+
+  const textSizeMap = {
+    xs: 11,
+    sm: 14,
+    md: 17,
+    lg: 22,
+    xl: 28,
+  };
 </script>
 
-<svg
-  width={sizeMap[size]}
-  height={sizeMap[size]}
-  viewBox={`0 0 24 24`}
-  fill={colorMap[color]}
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M5.25 10.5C2.3511 10.5 0 8.1489 0 5.25C0 2.3511 2.3511 0 5.25 0C8.1489 0 10.5 2.3511 10.5 5.25C10.5034 8.1489 8.1523 10.5 5.25 10.5Z"
-  />
-  <path
-    d="M18.75 10.5C15.8511 10.5 13.5 8.1489 13.5 5.25C13.5 2.3511 15.8511 0 18.75 0C21.6489 0 24 2.3511 24 5.25C24.0034 8.1489 21.6523 10.5 18.75 10.5Z"
-  />
-  <path
-    d="M0 18.75C0 15.8511 2.3511 13.5 5.25 13.5C8.1489 13.5 10.5 15.8511 10.5 18.75C10.5 21.6489 8.1489 24 5.25 24C2.3511 24 0 21.6489 0 18.75Z"
-  />
-</svg>
+{#snippet logomark()}
+  <svg
+    width={sizeMap[size]}
+    height={sizeMap[size]}
+    viewBox="0 0 24 24"
+    fill={colorMap[color]}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5.25 10.5C2.3511 10.5 0 8.1489 0 5.25C0 2.3511 2.3511 0 5.25 0C8.1489 0 10.5 2.3511 10.5 5.25C10.5034 8.1489 8.1523 10.5 5.25 10.5Z"
+    />
+    <path
+      d="M18.75 10.5C15.8511 10.5 13.5 8.1489 13.5 5.25C13.5 2.3511 15.8511 0 18.75 0C21.6489 0 24 2.3511 24 5.25C24.0034 8.1489 21.6523 10.5 18.75 10.5Z"
+    />
+    <path
+      d="M0 18.75C0 15.8511 2.3511 13.5 5.25 13.5C8.1489 13.5 10.5 15.8511 10.5 18.75C10.5 21.6489 8.1489 24 5.25 24C2.3511 24 0 21.6489 0 18.75Z"
+    />
+  </svg>
+{/snippet}
+
+{#if variant === 'horizontal'}
+  <div class="flex items-center gap-2">
+    {@render logomark()}
+    <span
+      style:color={colorMap[color]}
+      style:font-size="{textSizeMap[size]}px"
+      style:font-weight="600"
+      style:letter-spacing="-0.02em"
+      style:line-height="1"
+    >reshape</span>
+  </div>
+{:else}
+  {@render logomark()}
+{/if}

package/dist/components/logo/Logo.svelte.d.ts

@@ -1,6 +1,7 @@
 type Props = {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     color?: 'default' | 'white';
+    variant?: 'logomark' | 'horizontal';
 };
 declare const Logo: import("svelte").Component<Props, {}, "">;
 type Logo = ReturnType<typeof Logo>;

package/dist/components/markdown/Markdown.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/markdown/Markdown.figma.js

@@ -0,0 +1,14 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=6533-8072
+// source=src/lib/components/markdown/Markdown.svelte
+// component=Markdown
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const variant = instance.getEnum('variant', {
+    'light': 'light',
+    'dark': 'dark',
+});
+export default {
+    example: figma.code `<Markdown markdown="# Hello\n\nThis is **markdown** content." variant="${variant}" />`,
+    imports: ["import Markdown from './Markdown.svelte'"],
+    id: 'markdown',
+};

package/dist/components/modal/Modal.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/modal/Modal.figma.js

@@ -0,0 +1,31 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=4320-13114
+// source=src/lib/components/modal/index.ts
+// component=Modal
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const variant = instance.getEnum('variant', {
+    'default': 'default',
+    'alert': 'alert',
+});
+export default {
+    example: figma.code `
+    <Modal.Root>
+      <Modal.Trigger>Open Modal</Modal.Trigger>
+      <Modal.Portal>
+        <Modal.Overlay />
+        <Modal.Content>
+          <Modal.Title>Modal title</Modal.Title>
+          <Modal.Description>Modal description</Modal.Description>
+          <Modal.ScrollContent>
+            Modal content goes here
+          </Modal.ScrollContent>
+          <Modal.Bottom>
+            <Modal.Close>Close</Modal.Close>
+          </Modal.Bottom>
+        </Modal.Content>
+      </Modal.Portal>
+    </Modal.Root>
+  `,
+    imports: ["import * as Modal from './'"],
+    id: 'modal',
+};

package/dist/components/nav/Nav.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/nav/Nav.figma.js

@@ -0,0 +1,21 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=2248-7404
+// source=src/lib/components/nav/Nav.svelte
+// component=Nav
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const collapsed = instance.getEnum('collapsed', {
+    'true': true,
+    'false': false,
+});
+export default {
+    example: figma.code `
+    <Nav company="Acme" defaultCollapsed={${collapsed}}>
+      {#snippet main({ NavItem, NavItemGroup, collapsed })}
+        <NavItem href="/home">Home</NavItem>
+        <NavItem href="/settings">Settings</NavItem>
+      {/snippet}
+    </Nav>
+  `,
+    imports: ["import Nav from './Nav.svelte'"],
+    id: 'nav',
+};

package/dist/components/notification-popup/NotificationPopup.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/notification-popup/NotificationPopup.figma.js

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=6534-8057
+// source=src/lib/components/notification-popup/NotificationPopup.svelte
+// component=NotificationPopup
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const title = instance.findText('Notification title');
+export default {
+    example: figma.code `
+    <NotificationPopup
+      title="${title ? title.textContent : 'Notification'}"
+      visible={true}
+      onClose={() => {}}
+    >
+      Notification message content
+    </NotificationPopup>
+  `,
+    imports: ["import NotificationPopup from './NotificationPopup.svelte'"],
+    id: 'notification-popup',
+};