@reshape-biotech/design-system 0.0.41 → 0.0.43

package/dist/components/list/List.stories.svelte.d.ts

@@ -1,19 +1,36 @@
 import List from './List.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;
+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 List: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+declare const List: $$__sveltets_2_IsomorphicComponent<
+	Record<string, never>,
+	{
+		[evt: string]: CustomEvent<any>;
+	},
+	{},
+	{},
+	string
+>;
 type List = InstanceType<typeof List>;
 export default List;

package/dist/components/list/List.svelte

@@ -21,55 +21,50 @@
 
 <style>
 	.listStyles {
+		display: flex;
 
-    display: flex;
+		height: 100%;
 
-    height: 100%;
+		flex-direction: column;
 
-    flex-direction: column;
+		align-items: flex-start;
 
-    align-items: flex-start;
+		align-self: stretch;
 
-    align-self: stretch;
+		border-radius: 0.25rem;
+	}
 
-    border-radius: 0.25rem
-}
+	.listStyles.default {
+		gap: 0.5rem;
+	}
 
-		.listStyles.default {
+	.listStyles.compact {
+		gap: 0px;
 
-    gap: 0.5rem
-}
+		--tw-bg-opacity: 1;
 
-		.listStyles.compact {
+		background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 
-    gap: 0px;
+		padding-bottom: 0.5rem;
 
-    --tw-bg-opacity: 1;
+		padding-left: 1.5rem;
 
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+		padding-right: 1.5rem;
 
-    padding-bottom: 0.5rem;
+		padding-top: 0.5rem;
+	}
 
-    padding-left: 1.5rem;
+	.listStyles.compact :global(> .item:not(:last-child)) {
+		border-bottom-width: 1px;
 
-    padding-right: 1.5rem;
+		border-style: solid;
 
-    padding-top: 0.5rem
-}
+		--tw-border-opacity: 1;
 
-		.listStyles.compact :global(> .item:not(:last-child)) {
+		border-color: var(--fallback-n, oklch(var(--n) / var(--tw-border-opacity, 1)));
+	}
 
-    border-bottom-width: 1px;
-
-    border-style: solid;
-
-    --tw-border-opacity: 1;
-
-    border-color: var(--fallback-n,oklch(var(--n)/var(--tw-border-opacity, 1)))
-}
-
-		.listStyles :global(.item) {
-
-    align-self: stretch
-}
+	.listStyles :global(.item) {
+		align-self: stretch;
+	}
 </style>

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

@@ -1,23 +1,32 @@
 import type { Overflow } from '../../tailwind';
 import type { Snippet } from 'svelte';
 declare class __sveltets_Render<T> {
-    props(): {
-        items: T[];
-        item: Snippet<[T]>;
-        overflow?: Overflow;
-        variant?: "compact" | "default";
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "";
-    exports(): {};
+	props(): {
+		items: T[];
+		item: Snippet<[T]>;
+		overflow?: Overflow;
+		variant?: 'compact' | 'default';
+	};
+	events(): {};
+	slots(): {};
+	bindings(): '';
+	exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+	new <T>(
+		options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>
+	): import('svelte').SvelteComponent<
+		ReturnType<__sveltets_Render<T>['props']>,
+		ReturnType<__sveltets_Render<T>['events']>,
+		ReturnType<__sveltets_Render<T>['slots']>
+	> & {
+		$$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+	} & ReturnType<__sveltets_Render<T>['exports']>;
+	<T>(
+		internal: unknown,
+		props: ReturnType<__sveltets_Render<T>['props']> & {}
+	): ReturnType<__sveltets_Render<T>['exports']>;
+	z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const List: $$IsomorphicComponent;
 type List<T> = InstanceType<typeof List<T>>;

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

@@ -1,27 +1,48 @@
 export default Logo;
-type Logo = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type Logo = SvelteComponent<
+	{
+		[x: string]: never;
+	},
+	{
+		[evt: string]: CustomEvent<any>;
+	},
+	{}
+> & {
+	$$bindings?: string | undefined;
 };
-declare const Logo: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+declare const Logo: $$__sveltets_2_IsomorphicComponent<
+	{
+		[x: string]: never;
+	},
+	{
+		[evt: string]: CustomEvent<any>;
+	},
+	{},
+	{},
+	string
+>;
 import Logo from './Logo.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;
+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;
 }

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

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

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

@@ -1,27 +1,48 @@
 export default Markdown;
-type Markdown = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type Markdown = SvelteComponent<
+	{
+		[x: string]: never;
+	},
+	{
+		[evt: string]: CustomEvent<any>;
+	},
+	{}
+> & {
+	$$bindings?: string | undefined;
 };
-declare const Markdown: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+declare const Markdown: $$__sveltets_2_IsomorphicComponent<
+	{
+		[x: string]: never;
+	},
+	{
+		[evt: string]: CustomEvent<any>;
+	},
+	{},
+	{},
+	string
+>;
 import Markdown from './Markdown.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;
+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;
 }

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

@@ -1,6 +1,6 @@
 interface Props {
-    markdown: string;
+	markdown: string;
 }
-declare const Markdown: import("svelte").Component<Props, {}, "">;
+declare const Markdown: import('svelte').Component<Props, {}, ''>;
 type Markdown = ReturnType<typeof Markdown>;
 export default Markdown;

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

@@ -1,13 +1,15 @@
 <script module lang="ts">
 	import Button from '../button/Button.svelte';
 	import Modal from '../modal/Modal.svelte';
-	import ContactSupportModal from './ContactSupportModal.svelte';
 	import { defineMeta } from '@storybook/addon-svelte-csf';
+
 	const { Story } = defineMeta({
 		component: Modal,
 		title: 'Design System/Modal',
 		tags: ['autodocs']
 	});
+
+	let defaultOpen = $state(true);
 </script>
 
 <Story name="Default">
@@ -24,7 +26,7 @@
 </Story>
 
 <Story name="Default open">
-	<Modal defaultOpen>
+	<Modal {defaultOpen} onclose={() => (defaultOpen = false)}>
 		{#snippet Trigger({ openModal })}
 			<Button onClick={openModal}>Open Modal</Button>
 		{/snippet}
@@ -35,7 +37,3 @@
 		{/snippet}
 	</Modal>
 </Story>
-
-<Story name="Contact support">
-	<ContactSupportModal />
-</Story>

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

@@ -1,19 +1,36 @@
 import Modal from '../modal/Modal.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;
+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 Modal: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+declare const Modal: $$__sveltets_2_IsomorphicComponent<
+	Record<string, never>,
+	{
+		[evt: string]: CustomEvent<any>;
+	},
+	{},
+	{},
+	string
+>;
 type Modal = InstanceType<typeof Modal>;
 export default Modal;

package/dist/components/modal/Modal.svelte

@@ -7,6 +7,7 @@
 	type ModalProps = {
 		Trigger?: Snippet<[{ openModal: () => void; closeModal: () => void }]>;
 		Content: Snippet;
+		onclose?: () => void;
 		defaultOpen?: boolean;
 		id?: string;
 		withClose?: boolean;
@@ -16,6 +17,7 @@
 	let {
 		Trigger,
 		Content,
+		onclose,
 		defaultOpen = false,
 		id = 'modal-' + uuidv4(),
 		withClose = true,
@@ -23,6 +25,7 @@
 		class: modalClass
 	}: ModalProps = $props();
 
+	const modalOpen = $state(defaultOpen);
 	const openModal = () => {
 		const dialog = document.getElementById(id) as HTMLDialogElement | null;
 		dialog?.showModal();
@@ -31,16 +34,17 @@
 	const closeModal = () => {
 		const dialog = document.getElementById(id) as HTMLDialogElement | null;
 		dialog?.close();
+		onclose?.();
 	};
 </script>
 
 {#if Trigger}
 	{@render Trigger({ openModal, closeModal })}
 {/if}
-<dialog {id} class="modal {modalClass}" class:modal-open={defaultOpen}>
-	<div class="modal-box relative w-fit max-w-full rounded-xl bg-base p-6">
+<dialog {id} class="modal w-full max-w-full" class:modal-open={modalOpen}>
+	<div class="modal-box {modalClass}">
 		{#if withClose}
-			<div class="absolute right-0 top-0 p-6">
+			<div class="close-button">
 				<IconButton onclick={closeModal} size="md" color="secondary">
 					<X />
 				</IconButton>
@@ -50,7 +54,23 @@
 	</div>
 	{#if closeOnClickOutside}
 		<form method="dialog" class="modal-backdrop">
-			<button>close</button>
+			<button onclick={closeModal}>close</button>
 		</form>
 	{/if}
 </dialog>
+
+<style>
+	.modal-box {
+		position: relative;
+		max-width: 100%;
+		border-radius: 0.75rem;
+		--tw-bg-opacity: 1;
+		background-color: rgb(243 250 252 / var(--tw-bg-opacity, 1));
+	}
+	.close-button {
+		position: absolute;
+		right: 0px;
+		top: 0px;
+		padding: 1.5rem;
+	}
+</style>

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

@@ -1,16 +1,21 @@
 import type { Snippet } from 'svelte';
 type ModalProps = {
-    Trigger?: Snippet<[{
-        openModal: () => void;
-        closeModal: () => void;
-    }]>;
-    Content: Snippet;
-    defaultOpen?: boolean;
-    id?: string;
-    withClose?: boolean;
-    closeOnClickOutside?: boolean;
-    class?: string;
+	Trigger?: Snippet<
+		[
+			{
+				openModal: () => void;
+				closeModal: () => void;
+			}
+		]
+	>;
+	Content: Snippet;
+	onclose?: () => void;
+	defaultOpen?: boolean;
+	id?: string;
+	withClose?: boolean;
+	closeOnClickOutside?: boolean;
+	class?: string;
 };
-declare const Modal: import("svelte").Component<ModalProps, {}, "">;
+declare const Modal: import('svelte').Component<ModalProps, {}, ''>;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

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

@@ -1,27 +1,48 @@
 export default NotificationPopup;
-type NotificationPopup = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type NotificationPopup = SvelteComponent<
+	{
+		[x: string]: never;
+	},
+	{
+		[evt: string]: CustomEvent<any>;
+	},
+	{}
+> & {
+	$$bindings?: string | undefined;
 };
-declare const NotificationPopup: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+declare const NotificationPopup: $$__sveltets_2_IsomorphicComponent<
+	{
+		[x: string]: never;
+	},
+	{
+		[evt: string]: CustomEvent<any>;
+	},
+	{},
+	{},
+	string
+>;
 import NotificationPopup from './NotificationPopup.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;
+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;
 }

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

@@ -1,11 +1,11 @@
 import type { Snippet } from 'svelte';
 interface Props {
-    onClose: () => void;
-    title: string;
-    visible: boolean;
-    id?: string | undefined;
-    children?: Snippet;
+	onClose: () => void;
+	title: string;
+	visible: boolean;
+	id?: string | undefined;
+	children?: Snippet;
 }
-declare const NotificationPopup: import("svelte").Component<Props, {}, "">;
+declare const NotificationPopup: import('svelte').Component<Props, {}, ''>;
 type NotificationPopup = ReturnType<typeof NotificationPopup>;
 export default NotificationPopup;

package/dist/components/pill/Pill.svelte

@@ -21,7 +21,7 @@
 	button {
 		gap: 0.5rem;
 		border-radius: 9999px;
-		background-color: #5750ee1A;
+		background-color: #5750ee1a;
 		padding-left: 1rem;
 		padding-right: 1rem;
 		padding-top: 0px;
@@ -34,6 +34,6 @@
 		white-space: nowrap;
 		height: 32px;
 
-		align-items: center
-}
+		align-items: center;
+	}
 </style>

package/dist/components/pill/Pill.svelte.d.ts

@@ -1,10 +1,10 @@
 interface Props {
-    class?: string;
-    text: string;
-    type?: 'button' | 'submit';
-    testID?: string;
-    onclick?: () => void;
+	class?: string;
+	text: string;
+	type?: 'button' | 'submit';
+	testID?: string;
+	onclick?: () => void;
 }
-declare const Pill: import("svelte").Component<Props, {}, "">;
+declare const Pill: import('svelte').Component<Props, {}, ''>;
 type Pill = ReturnType<typeof Pill>;
 export default Pill;