@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/manual-cfu-counter/test/ManualCFUCounterTestWrapper.svelte

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

package/dist/components/markdown/Markdown.stories.svelte

@@ -1,18 +1,18 @@
 <script module>
-	import Markdown from './Markdown.svelte';
+  import Markdown from './Markdown.svelte';
 
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-	const { Story } = defineMeta({
-		component: Markdown,
-		title: 'Design System/Markdown',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: Markdown,
+    title: 'Design System/Markdown',
+    tags: ['autodocs'],
+  });
 </script>
 
 <Story name="Primary" asChild>
-	<Markdown
-		markdown={`# Welcome to My Markdown Story
+  <Markdown
+    markdown={`# Welcome to My Markdown Story
 
 ## Features
 
@@ -37,5 +37,5 @@ greet('Storybook');
 ---
 
 Happy storytelling with Markdown!`}
-	/>
+  />
 </Story>

package/dist/components/markdown/Markdown.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { marked } from 'marked';
-	interface Props {
-		markdown: string;
-	}
+  import { marked } from 'marked';
+  interface Props {
+    markdown: string;
+  }
 
-	let { markdown }: Props = $props();
+  let { markdown }: Props = $props();
 </script>
 
 <div class="prose text-sm text-secondary dark:prose-invert">
-	{@html marked.parse(markdown ?? '')}
+  {@html marked.parse(markdown ?? '')}
 </div>

package/dist/components/modal/Modal.stories.svelte

@@ -1,39 +1,39 @@
 <script module lang="ts">
-	import Button from '../button/Button.svelte';
-	import Modal from '../modal/Modal.svelte';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button from '../button/Button.svelte';
+  import Modal from '../modal/Modal.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-	const { Story } = defineMeta({
-		component: Modal,
-		title: 'Design System/Modal',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: Modal,
+    title: 'Design System/Modal',
+    tags: ['autodocs'],
+  });
 
-	let defaultOpen = $state(true);
+  let defaultOpen = $state(true);
 </script>
 
 <Story name="Default" asChild>
-	<Modal>
-		{#snippet Trigger({ openModal })}
-			<Button onClick={openModal}>Open Modal</Button>
-		{/snippet}
-		{#snippet Content()}
-			<div>
-				<p>Modal Content</p>
-			</div>
-		{/snippet}
-	</Modal>
+  <Modal>
+    {#snippet Trigger({ openModal })}
+      <Button onClick={openModal}>Open Modal</Button>
+    {/snippet}
+    {#snippet Content()}
+      <div>
+        <p>Modal Content</p>
+      </div>
+    {/snippet}
+  </Modal>
 </Story>
 
 <Story name="Default open" asChild>
-	<Modal {defaultOpen} onclose={() => (defaultOpen = false)}>
-		{#snippet Trigger({ openModal })}
-			<Button onClick={openModal}>Open Modal</Button>
-		{/snippet}
-		{#snippet Content()}
-			<div>
-				<p>Modal Content</p>
-			</div>
-		{/snippet}
-	</Modal>
+  <Modal {defaultOpen} onclose={() => (defaultOpen = false)}>
+    {#snippet Trigger({ openModal })}
+      <Button onClick={openModal}>Open Modal</Button>
+    {/snippet}
+    {#snippet Content()}
+      <div>
+        <p>Modal Content</p>
+      </div>
+    {/snippet}
+  </Modal>
 </Story>

package/dist/components/modal/Modal.svelte

@@ -1,81 +1,81 @@
 <script lang="ts">
-	import { type Snippet } from 'svelte';
-	import { v4 as uuidv4 } from 'uuid';
-	import IconButton from '../icon-button/IconButton.svelte';
-	import { Icon } from '../icons';
-	import Divider from '../divider/Divider.svelte';
+  import { type Snippet } from 'svelte';
+  import { v4 as uuidv4 } from 'uuid';
+  import IconButton from '../icon-button/IconButton.svelte';
+  import { Icon } from '../icons';
+  import Divider from '../divider/Divider.svelte';
 
-	type ModalProps = {
-		Trigger?: Snippet<[{ openModal: () => void; closeModal: () => void }]>;
-		Header?: Snippet;
-		Content: Snippet;
-		Footer?: Snippet;
-		onclose?: () => void;
-		defaultOpen?: boolean;
-		id?: string;
-		withClose?: boolean;
-		closeOnClickOutside?: boolean;
-		class?: string;
-		contentClass?: string;
-	};
-	let {
-		Trigger,
-		Header,
-		Content,
-		Footer,
-		onclose,
-		defaultOpen = false,
-		id = 'modal-' + uuidv4(),
-		withClose = true,
-		closeOnClickOutside = true,
-		class: modalClass,
-		contentClass = 'p-4'
-	}: ModalProps = $props();
+  type ModalProps = {
+    Trigger?: Snippet<[{ openModal: () => void; closeModal: () => void }]>;
+    Header?: Snippet;
+    Content: Snippet;
+    Footer?: Snippet;
+    onclose?: () => void;
+    defaultOpen?: boolean;
+    id?: string;
+    withClose?: boolean;
+    closeOnClickOutside?: boolean;
+    class?: string;
+    contentClass?: string;
+  };
+  let {
+    Trigger,
+    Header,
+    Content,
+    Footer,
+    onclose,
+    defaultOpen = false,
+    id = 'modal-' + uuidv4(),
+    withClose = true,
+    closeOnClickOutside = true,
+    class: modalClass,
+    contentClass = 'p-4',
+  }: ModalProps = $props();
 
-	const modalOpen = $state(defaultOpen);
-	const openModal = () => {
-		const dialog = document.getElementById(id) as HTMLDialogElement | null;
-		dialog?.showModal();
-	};
+  const modalOpen = $state(defaultOpen);
+  const openModal = () => {
+    const dialog = document.getElementById(id) as HTMLDialogElement | null;
+    dialog?.showModal();
+  };
 
-	const closeModal = () => {
-		const dialog = document.getElementById(id) as HTMLDialogElement | null;
-		dialog?.close();
-		onclose?.();
-	};
+  const closeModal = () => {
+    const dialog = document.getElementById(id) as HTMLDialogElement | null;
+    dialog?.close();
+    onclose?.();
+  };
 </script>
 
 {#if Trigger}
-	{@render Trigger({ openModal, closeModal })}
+  {@render Trigger({ openModal, closeModal })}
 {/if}
 <dialog {id} class="modal w-full max-w-full" class:modal-open={modalOpen}>
-	<div class="modal-box relative flex max-w-full flex-col rounded-xl bg-surface p-0 {modalClass}">
-		{#if Header}
-			<div class="flex h-12 items-center px-4">
-				{@render Header()}
-			</div>
-			<Divider />
-		{/if}
-		{#if withClose}
-			<div class="absolute right-0 top-0 z-10 p-2">
-				<IconButton onclick={closeModal} size="md" variant="transparent" rounded={false}>
-					<Icon iconName="X" />
-				</IconButton>
-			</div>
-		{/if}
-		<div class="flex-1 {contentClass}">
-			{@render Content()}
-		</div>
-		{#if Footer}
-			<Divider />
-			<div class="px-4 py-2">
-				{@render Footer()}
-			</div>
-		{/if}
-	</div>
-	{#if closeOnClickOutside}
-		<form method="dialog" class="modal-backdrop">
-			<button onclick={closeModal}>close</button>
-		</form>
-	{/if}
+  <div class="modal-box relative flex max-w-full flex-col rounded-xl bg-surface p-0 {modalClass}">
+    {#if Header}
+      <div class="flex h-12 items-center px-4">
+        {@render Header()}
+      </div>
+      <Divider />
+    {/if}
+    {#if withClose}
+      <div class="absolute right-0 top-0 z-10 p-2">
+        <IconButton onclick={closeModal} size="md" variant="transparent" rounded={false}>
+          <Icon iconName="X" />
+        </IconButton>
+      </div>
+    {/if}
+    <div class="flex-1 {contentClass}">
+      {@render Content()}
+    </div>
+    {#if Footer}
+      <Divider />
+      <div class="px-4 py-2">
+        {@render Footer()}
+      </div>
+    {/if}
+  </div>
+  {#if closeOnClickOutside}
+    <form method="dialog" class="modal-backdrop">
+      <button onclick={closeModal}>close</button>
+    </form>
+  {/if}
 </dialog>