@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/multi-cfu-counter/test/MultiCFUCounterTestWrapper.svelte

@@ -1,26 +1,26 @@
 <!-- src/lib/design-system/src/lib/components/manual-cfu-counter/ManualCFUCounterTestWrapper.svelte -->
 <script lang="ts">
-	import MultiCFUCounter from '../MultiCFUCounter.svelte';
+  import MultiCFUCounter from '../MultiCFUCounter.svelte';
 
-	interface Props {
-		initialTestMarks?: Array<{ x: number; y: number }>;
-		imageUrl?: string;
-		onclick?: (event: MouseEvent, marks: Array<{ x: number; y: number }>) => void;
-		activeMarkerName?: string;
-	}
+  interface Props {
+    initialTestMarks?: Array<{ x: number; y: number }>;
+    imageUrl?: string;
+    onclick?: (event: MouseEvent, marks: Array<{ x: number; y: number }>) => void;
+    activeMarkerName?: string;
+  }
 
-	let {
-		initialTestMarks = [],
-		imageUrl = 'test-image.jpg',
-		onclick,
-		activeMarkerName = 'Test Marker'
-	}: Props = $props();
+  let {
+    initialTestMarks = [],
+    imageUrl = 'test-image.jpg',
+    onclick,
+    activeMarkerName = 'Test Marker',
+  }: Props = $props();
 
-	let marks = $state([...initialTestMarks]);
+  let marks = $state([...initialTestMarks]);
 
-	export function getCurrentMarks() {
-		return marks;
-	}
+  export function getCurrentMarks() {
+    return marks;
+  }
 </script>
 
 <MultiCFUCounter bind:marks {imageUrl} {onclick} {activeMarkerName} />

package/dist/components/notification-popup/NotificationPopup.stories.svelte

@@ -1,26 +1,26 @@
 <script module>
-	import NotificationPopup from './NotificationPopup.svelte';
-	import { Icon } from '../icons';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import NotificationPopup from './NotificationPopup.svelte';
+  import { Icon } from '../icons';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-	const { Story } = defineMeta({
-		component: NotificationPopup,
-		title: 'Design System/NotificationPopup',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: NotificationPopup,
+    title: 'Design System/NotificationPopup',
+    tags: ['autodocs'],
+  });
 
-	let visible = true;
+  let visible = true;
 
-	function handleClick() {
-		visible = !visible;
-	}
+  function handleClick() {
+    visible = !visible;
+  }
 </script>
 
 <Story name="Primary" asChild>
-	<NotificationPopup onClose={handleClick} title="See what's new" {visible}>
-		<a href="_blank" color="transparent" class="flex items-center gap-2">
-			<Icon iconName="Sparkle" />
-			<p>Product updates</p>
-		</a>
-	</NotificationPopup>
+  <NotificationPopup onClose={handleClick} title="See what's new" {visible}>
+    <a href="_blank" color="transparent" class="flex items-center gap-2">
+      <Icon iconName="Sparkle" />
+      <p>Product updates</p>
+    </a>
+  </NotificationPopup>
 </Story>

package/dist/components/notification-popup/NotificationPopup.svelte

@@ -1,33 +1,33 @@
 <script lang="ts">
-	import { IconButton } from '../icon-button/';
-	import { fade, fly } from 'svelte/transition';
-	import type { Snippet } from 'svelte';
-	import { Icon } from '../icons';
+  import { IconButton } from '../icon-button/';
+  import { fade, fly } from 'svelte/transition';
+  import type { Snippet } from 'svelte';
+  import { Icon } from '../icons';
 
-	interface Props {
-		onClose: () => void;
-		title: string;
-		visible: boolean;
-		id?: string | undefined;
-		children?: Snippet;
-	}
+  interface Props {
+    onClose: () => void;
+    title: string;
+    visible: boolean;
+    id?: string | undefined;
+    children?: Snippet;
+  }
 
-	let { onClose, title, visible, id = undefined, children }: Props = $props();
+  let { onClose, title, visible, id = undefined, children }: Props = $props();
 </script>
 
 {#if visible}
-	<div
-		{id}
-		class="flex w-[200px] justify-between rounded-lg bg-surface p-3 shadow-menu"
-		in:fly={{ y: 100, duration: 1000 }}
-		out:fade
-	>
-		<div class="flex flex-col gap-2">
-			<h6 class="flex h-6 items-center">{title}</h6>
-			{@render children?.()}
-		</div>
-		<IconButton size="xs" variant="transparent" rounded={false} onclick={onClose}>
-			<Icon iconName="X" />
-		</IconButton>
-	</div>
+  <div
+    {id}
+    class="flex w-[200px] justify-between rounded-lg bg-surface p-3 shadow-menu"
+    in:fly={{ y: 100, duration: 1000 }}
+    out:fade
+  >
+    <div class="flex flex-col gap-2">
+      <h6 class="flex h-6 items-center">{title}</h6>
+      {@render children?.()}
+    </div>
+    <IconButton size="xs" variant="transparent" rounded={false} onclick={onClose}>
+      <Icon iconName="X" />
+    </IconButton>
+  </div>
 {/if}

package/dist/components/notifications/Notifications.stories.svelte

@@ -1,107 +1,107 @@
 <script module lang="ts">
-	import { notifications } from '../../notifications';
-	import Button from '../button/Button.svelte';
-	import Notifications from '../notifications/Notifications.svelte';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { notifications } from '../../notifications';
+  import Button from '../button/Button.svelte';
+  import Notifications from '../notifications/Notifications.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-	const { Story } = defineMeta({
-		component: Notifications,
-		title: 'Design System/Notifications',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: Notifications,
+    title: 'Design System/Notifications',
+    tags: ['autodocs'],
+  });
 </script>
 
 <Story name="Notifications" asChild>
-	<Notifications></Notifications>
-	<div class="h-24 rounded-md border"></div>
-	<div class="pt-4">
-		<div class="flex flex-row justify-between gap-2">
-			<div class="flex flex-col gap-2">
-				<h5>Default</h5>
-				<Button
-					onClick={() => {
-						notifications.default('This is a default notification');
-					}}>Show default</Button
-				>
-				<Button
-					onClick={() => {
-						notifications.danger('This is a danger notification');
-					}}>Show danger</Button
-				>
-				<Button
-					onClick={() => {
-						notifications.warning('This is a warning notification');
-					}}>Show warning</Button
-				>
-				<Button
-					onClick={() => {
-						notifications.info('This is an info notification');
-					}}>Show info</Button
-				>
-				<Button
-					onClick={() => {
-						notifications.success('This is a success notification');
-					}}>Show success</Button
-				>
-			</div>
-			<div class="grow"></div>
-			<div class="flex flex-col gap-2">
-				<h5>Icons</h5>
-				<Button
-					onClick={() => {
-						notifications.default('This is a default icon notification', 'Bell');
-					}}>Show default</Button
-				>
-				<Button
-					onClick={() => {
-						notifications.danger('This is a danger icon notification', 'SealWarning');
-					}}>Show danger</Button
-				>
-				<Button
-					onClick={() => {
-						notifications.warning('This is a warning icon notification', 'Warning');
-					}}>Show warning</Button
-				>
-				<Button
-					onClick={() => {
-						notifications.info('This is an info icon notification', 'Info');
-					}}>Show info</Button
-				>
-				<Button
-					onClick={() => {
-						notifications.success('This is a success icon notification', 'Check');
-					}}>Show success</Button
-				>
-			</div>
-			<div class="grow"></div>
-			<div class="flex flex-col gap-2">
-				<h5>Dismissable</h5>
-				<Button
-					onClick={() => {
-						notifications.default('This is a default icon notification', 'Bell', true);
-					}}>Show default</Button
-				>
-				<Button
-					onClick={() => {
-						notifications.danger('This is a danger icon notification', 'SealWarning', true);
-					}}>Show danger</Button
-				>
-				<Button
-					onClick={() => {
-						notifications.warning('This is a warning icon notification', 'Warning', true);
-					}}>Show warning</Button
-				>
-				<Button
-					onClick={() => {
-						notifications.info('This is an info icon notification', 'Info', true);
-					}}>Show info</Button
-				>
-				<Button
-					onClick={() => {
-						notifications.success('This is a success icon notification', 'Check', true);
-					}}>Show success</Button
-				>
-			</div>
-		</div>
-	</div>
+  <Notifications></Notifications>
+  <div class="h-24 rounded-md border"></div>
+  <div class="pt-4">
+    <div class="flex flex-row justify-between gap-2">
+      <div class="flex flex-col gap-2">
+        <h5>Default</h5>
+        <Button
+          onClick={() => {
+            notifications.default('This is a default notification');
+          }}>Show default</Button
+        >
+        <Button
+          onClick={() => {
+            notifications.danger('This is a danger notification');
+          }}>Show danger</Button
+        >
+        <Button
+          onClick={() => {
+            notifications.warning('This is a warning notification');
+          }}>Show warning</Button
+        >
+        <Button
+          onClick={() => {
+            notifications.info('This is an info notification');
+          }}>Show info</Button
+        >
+        <Button
+          onClick={() => {
+            notifications.success('This is a success notification');
+          }}>Show success</Button
+        >
+      </div>
+      <div class="grow"></div>
+      <div class="flex flex-col gap-2">
+        <h5>Icons</h5>
+        <Button
+          onClick={() => {
+            notifications.default('This is a default icon notification', 'Bell');
+          }}>Show default</Button
+        >
+        <Button
+          onClick={() => {
+            notifications.danger('This is a danger icon notification', 'SealWarning');
+          }}>Show danger</Button
+        >
+        <Button
+          onClick={() => {
+            notifications.warning('This is a warning icon notification', 'Warning');
+          }}>Show warning</Button
+        >
+        <Button
+          onClick={() => {
+            notifications.info('This is an info icon notification', 'Info');
+          }}>Show info</Button
+        >
+        <Button
+          onClick={() => {
+            notifications.success('This is a success icon notification', 'Check');
+          }}>Show success</Button
+        >
+      </div>
+      <div class="grow"></div>
+      <div class="flex flex-col gap-2">
+        <h5>Dismissable</h5>
+        <Button
+          onClick={() => {
+            notifications.default('This is a default icon notification', 'Bell', true);
+          }}>Show default</Button
+        >
+        <Button
+          onClick={() => {
+            notifications.danger('This is a danger icon notification', 'SealWarning', true);
+          }}>Show danger</Button
+        >
+        <Button
+          onClick={() => {
+            notifications.warning('This is a warning icon notification', 'Warning', true);
+          }}>Show warning</Button
+        >
+        <Button
+          onClick={() => {
+            notifications.info('This is an info icon notification', 'Info', true);
+          }}>Show info</Button
+        >
+        <Button
+          onClick={() => {
+            notifications.success('This is a success icon notification', 'Check', true);
+          }}>Show success</Button
+        >
+      </div>
+    </div>
+  </div>
 </Story>

package/dist/components/notifications/Notifications.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { flip } from 'svelte/animate';
-	import { fly } from 'svelte/transition';
-	import { notifications } from '../../notifications';
-	import Toast from '../toast/Toast.svelte';
+  import { flip } from 'svelte/animate';
+  import { fly } from 'svelte/transition';
+  import { notifications } from '../../notifications';
+  import Toast from '../toast/Toast.svelte';
 </script>
 
 <div class="fixed left-0 right-0 top-2 z-50 mx-auto flex w-fit flex-col items-center justify-start">
-	{#each $notifications as notification (notification.id)}
-		<div animate:flip transition:fly={{ y: -10 }}>
-			<Toast {notification} />
-		</div>
-	{/each}
+  {#each $notifications as notification (notification.id)}
+    <div animate:flip transition:fly={{ y: -10 }}>
+      <Toast {notification} />
+    </div>
+  {/each}
 </div>

package/dist/components/pill/Pill.stories.svelte

@@ -1,13 +1,13 @@
 <script lang="ts" module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Pill from './Pill.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Pill from './Pill.svelte';
 
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Design System/Pill',
-		component: Pill,
-		tags: ['autodocs']
-	});
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Design System/Pill',
+    component: Pill,
+    tags: ['autodocs'],
+  });
 </script>
 
 <Story name="Base" args={{ text: 'Example Pill' }} />

package/dist/components/pill/Pill.svelte

@@ -1,39 +1,39 @@
 <script lang="ts">
-	import { Icon } from '../icons';
+  import { Icon } from '../icons';
 
-	interface Props {
-		class?: string;
-		text: string;
-		type?: 'button' | 'submit';
-		testID?: string;
-		onclick?: () => void;
-	}
+  interface Props {
+    class?: string;
+    text: string;
+    type?: 'button' | 'submit';
+    testID?: string;
+    onclick?: () => void;
+  }
 
-	let { class: className = '', text, type = 'button', testID = '', onclick }: Props = $props();
+  let { class: className = '', text, type = 'button', testID = '', onclick }: Props = $props();
 </script>
 
 <button class="{className} " {onclick} {type} data-testid={testID}>
-	{text}
-	<Icon iconName="X" class="opacity-50" />
+  {text}
+  <Icon iconName="X" class="opacity-50" />
 </button>
 
 <style>
-	button {
-		gap: 0.5rem;
-		border-radius: 9999px;
-		background-color: #5750ee1A;
-		padding-left: 1rem;
-		padding-right: 1rem;
-		padding-top: 0px;
-		padding-bottom: 0px;
-		font-size: 0.875rem;
-		line-height: 1.25rem;
-		--tw-text-opacity: 1;
-		color: rgb(71 65 193 / var(--tw-text-opacity, 1));
-		display: flex;
-		white-space: nowrap;
-		height: 32px;
+  button {
+    gap: 0.5rem;
+    border-radius: 9999px;
+    background-color: #5750ee1A;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    --tw-text-opacity: 1;
+    color: rgb(71 65 193 / var(--tw-text-opacity, 1));
+    display: flex;
+    white-space: nowrap;
+    height: 32px;
 
-		align-items: center
+    align-items: center
 }
 </style>

package/dist/components/progress-circle/ProgressCircle.stories.svelte

@@ -1,13 +1,13 @@
 <script lang="ts" module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import ProgressCircle from './ProgressCircle.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ProgressCircle from './ProgressCircle.svelte';
 
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Design System/ProgressCircle',
-		component: ProgressCircle,
-		tags: ['autodocs']
-	});
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Design System/ProgressCircle',
+    component: ProgressCircle,
+    tags: ['autodocs'],
+  });
 </script>
 
 <Story name="Base" args={{ progress: 20 }} />

package/dist/components/progress-circle/ProgressCircle.svelte

@@ -1,79 +1,79 @@
 <script lang="ts">
-	// Make sure progress is between 0 and 100 and round down to the nearest 10 if over 90
-	$effect(() => {
-		progress =
-			progress > 90
-				? Math.floor(Math.min(100, progress) / 10) * 10
-				: Math.min(100, Math.max(0, progress));
-	});
-
-	type Props = {
-		progress: number;
-		size?: 'md' | 'sm';
-	};
-
-	let { progress = $bindable(), size = 'md' }: Props = $props();
-
-	const viewBox = size === 'md' ? '0 0 20 20' : '0 0 16 16';
-	const center = size === 'md' ? 10 : 8;
-	const radius = size === 'md' ? 7 : 6;
-
-	// Create the circle path
-	const path = `M ${center} ${center - radius} 
+  // Make sure progress is between 0 and 100 and round down to the nearest 10 if over 90
+  $effect(() => {
+    progress =
+      progress > 90
+        ? Math.floor(Math.min(100, progress) / 10) * 10
+        : Math.min(100, Math.max(0, progress));
+  });
+
+  type Props = {
+    progress: number;
+    size?: 'md' | 'sm';
+  };
+
+  let { progress = $bindable(), size = 'md' }: Props = $props();
+
+  const viewBox = size === 'md' ? '0 0 20 20' : '0 0 16 16';
+  const center = size === 'md' ? 10 : 8;
+  const radius = size === 'md' ? 7 : 6;
+
+  // Create the circle path
+  const path = `M ${center} ${center - radius} 
               A ${radius} ${radius} 0 1 1 ${center - 0.01} ${center - radius}`;
 </script>
 
 <div class="progress-wrapper" class:sm={size === 'sm'} class:md={size === 'md'}>
-	<svg xmlns="http://www.w3.org/2000/svg" {viewBox} fill="none">
-		<!-- Background track -->
-		<path d={path} stroke="currentColor" stroke-opacity="0.25" stroke-width="2" fill="none" />
-		<!-- Progress indicator -->
-		<path
-			d={path}
-			stroke="currentColor"
-			stroke-width="2"
-			stroke-linecap="round"
-			fill="none"
-			style="stroke-dasharray: var(--pathLength);
+  <svg xmlns="http://www.w3.org/2000/svg" {viewBox} fill="none">
+    <!-- Background track -->
+    <path d={path} stroke="currentColor" stroke-opacity="0.25" stroke-width="2" fill="none" />
+    <!-- Progress indicator -->
+    <path
+      d={path}
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      fill="none"
+      style="stroke-dasharray: var(--pathLength);
              stroke-dashoffset: calc(var(--pathLength) * (1 - {progress / 100}));"
-			pathLength="1"
-		/>
-	</svg>
+      pathLength="1"
+    />
+  </svg>
 </div>
 
 <style>
-	.progress-wrapper {
+  .progress-wrapper {
 
-		position: relative;
+    position: relative;
 
-		display: inline-block;
+    display: inline-block;
 
-		aspect-ratio: 1;
+    aspect-ratio: 1;
 }
-		.progress-wrapper.md {
+    .progress-wrapper.md {
 
-		width: 1.25rem;
+    width: 1.25rem;
 
-		height: 1.25rem;
+    height: 1.25rem;
 }
-		.progress-wrapper.sm {
+    .progress-wrapper.sm {
 
-		width: 1rem;
+    width: 1rem;
 
-		height: 1rem;
+    height: 1rem;
 }
 
-	svg {
+  svg {
 
-		position: absolute;
+    position: absolute;
 
-		inset: 0px;
-		width: 100%;
-		height: 100%;
-		display: block;
+    inset: 0px;
+    width: 100%;
+    height: 100%;
+    display: block;
 }
 
-	path {
-		--pathLength: 1;
-	}
+  path {
+    --pathLength: 1;
+  }
 </style>