@reshape-biotech/design-system 0.0.24 → 0.0.26

package/dist/app.css

@@ -7,17 +7,17 @@
 		font-family: 'MD System Mono';
 		font-style: normal;
 		font-weight: 400;
-		src: url('/fonts/MDSystemMono-Regular.woff2') format('woff2');
+		src: url('./fonts/MDSystemMono-Regular.woff2') format('woff2');
 	}
 	@font-face {
 		font-family: 'MD System';
 		font-style: normal;
 		font-weight: 400;
-		src: url('/fonts/MDSystem-Regular.woff2') format('woff2');
+		src: url('./fonts/MDSystem-Regular.woff2') format('woff2');
 	}
 	@font-face {
 		font-family: 'MD System';
-		src: url('/fonts/MDSystem-Medium.woff2') format('woff2');
+		src: url('./fonts/MDSystem-Medium.woff2') format('woff2');
 		font-weight: 500;
 		font-style: normal;
 	}
@@ -25,7 +25,7 @@
 		font-family: 'MD System';
 		font-style: normal;
 		font-weight: 600;
-		src: url('/fonts/MDSystem-Semibold.woff2') format('woff2');
+		src: url('./fonts/MDSystem-Semibold.woff2') format('woff2');
 	}
 	body {
 		background-color: theme('backgroundColor.base');

package/dist/components/avatar/index.d.ts

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar.svelte';

package/dist/components/avatar/index.js

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar.svelte';

package/dist/components/banner/Banner.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { X } from 'phosphor-svelte';
 	import type { Snippet } from 'svelte';
-	import IconButton from 'design-system/components/icon-button/IconButton.svelte';
+	import { IconButton } from '../icon-button/';
 
 	interface Props {
 		type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';

package/dist/components/banner/index.d.ts

@@ -0,0 +1 @@
+export { default as Banner } from './Banner.svelte';

package/dist/components/banner/index.js

@@ -0,0 +1 @@
+export { default as Banner } from './Banner.svelte';

package/dist/components/button/Button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Spinner from 'design-system/components/spinner/Spinner.svelte';
+	import Spinner from '../spinner/Spinner.svelte';
 	import type { Snippet } from 'svelte';
 
 	interface Props {

package/dist/components/button/index.d.ts

@@ -0,0 +1 @@
+export { default as Button } from './Button.svelte';

package/dist/components/button/index.js

@@ -0,0 +1 @@
+export { default as Button } from './Button.svelte';

package/dist/components/datepicker/index.d.ts

@@ -0,0 +1 @@
+export { default as DatePicker } from './DatePicker.svelte';

package/dist/components/datepicker/index.js

@@ -0,0 +1 @@
+export { default as DatePicker } from './DatePicker.svelte';

package/dist/components/divider/index.d.ts

@@ -0,0 +1 @@
+export { default as Divider } from './Divider.svelte';

package/dist/components/divider/index.js

@@ -0,0 +1 @@
+export { default as Divider } from './Divider.svelte';

package/dist/components/drawer/index.d.ts

@@ -0,0 +1 @@
+export { default as Drawer } from './Drawer.svelte';

package/dist/components/drawer/index.js

@@ -0,0 +1 @@
+export { default as Drawer } from './Drawer.svelte';

package/dist/components/dropdown/index.d.ts

@@ -0,0 +1 @@
+export { default as Dropdown } from './Dropdown.svelte';

package/dist/components/dropdown/index.js

@@ -0,0 +1 @@
+export { default as Dropdown } from './Dropdown.svelte';

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

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import Spinner from 'design-system/components/spinner/Spinner.svelte';
 	import type { Snippet } from 'svelte';
+	import { Spinner } from '../spinner/';
+
 	type Color = 'primary' | 'secondary' | 'transparent' | 'danger';
 	interface Props {
 		color?: 'primary' | 'transparent' | 'secondary' | 'danger';

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1 @@
+export { default as IconButton } from './IconButton.svelte';

package/dist/components/icon-button/index.js

@@ -0,0 +1 @@
+export { default as IconButton } from './IconButton.svelte';

package/dist/components/image/Image.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import SkeletonLoader from 'design-system/components/skeleton-loader/index';
+	import { SkeletonLoader } from '../skeleton-loader/';
 
 	interface Props {
 		src: string;

package/dist/components/image/index.d.ts

@@ -0,0 +1 @@
+export { default as Image } from './Image.svelte';

package/dist/components/image/index.js

@@ -0,0 +1 @@
+export { default as Image } from './Image.svelte';

package/dist/components/input/index.d.ts

@@ -0,0 +1 @@
+export { default as Input } from './Input.svelte';

package/dist/components/input/index.js

@@ -0,0 +1 @@
+export { default as Input } from './Input.svelte';

package/dist/components/list/index.d.ts

@@ -0,0 +1 @@
+export { default as List } from './List.svelte';

package/dist/components/list/index.js

@@ -0,0 +1 @@
+export { default as List } from './List.svelte';

package/dist/components/markdown/index.d.ts

@@ -0,0 +1 @@
+export { default as Markdown } from './Markdown.svelte';

package/dist/components/markdown/index.js

@@ -0,0 +1 @@
+export { default as Markdown } from './Markdown.svelte';

package/dist/components/modal/Modal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { v4 as uuidv4 } from 'uuid';
-	import IconButton from 'design-system/components/icon-button/IconButton.svelte';
+	import IconButton from '../icon-button/IconButton.svelte';
 	import { X } from 'phosphor-svelte';
 
 	type ModalProps = {

package/dist/components/modal/index.d.ts

@@ -0,0 +1 @@
+export { default as Modal } from './Modal.svelte';

package/dist/components/modal/index.js

@@ -0,0 +1 @@
+export { default as Modal } from './Modal.svelte';

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { X } from 'phosphor-svelte';
-	import IconButton from 'design-system/components/icon-button/IconButton.svelte';
+	import { IconButton } from '../icon-button/';
 	import { fade, fly } from 'svelte/transition';
 	import type { Snippet } from 'svelte';
 

package/dist/components/notification-popup/index.d.ts

@@ -0,0 +1 @@
+export { default as NotificationPopup } from './NotificationPopup.svelte';

package/dist/components/notification-popup/index.js

@@ -0,0 +1 @@
+export { default as NotificationPopup } from './NotificationPopup.svelte';

package/dist/components/pill/index.d.ts

@@ -0,0 +1 @@
+export { default as Pill } from './Pill.svelte';

package/dist/components/pill/index.js

@@ -0,0 +1 @@
+export { default as Pill } from './Pill.svelte';

package/dist/components/progress-circle/index.d.ts

@@ -0,0 +1 @@
+export { default as ProgressCircle } from './ProgressCircle.svelte';

package/dist/components/progress-circle/index.js

@@ -0,0 +1 @@
+export { default as ProgressCircle } from './ProgressCircle.svelte';

package/dist/components/segmented-control-buttons/index.d.ts

@@ -0,0 +1 @@
+export { default as SegmentedControlButtons } from './SegmentedControlButtons.svelte';

package/dist/components/segmented-control-buttons/index.js

@@ -0,0 +1 @@
+export { default as SegmentedControlButtons } from './SegmentedControlButtons.svelte';

package/dist/components/select/Select.svelte

@@ -1,21 +1,21 @@
 <!-- @migration-task Error while migrating Svelte code: Cannot overwrite a zero-length range – use appendLeft or prependRight instead -->
 <!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
 <script lang="ts">
-	import { backgroundColor, textColor } from 'design-system/tokens';
+	import { backgroundColor, textColor } from '../../tokens';
 	import { CaretDown, X } from 'phosphor-svelte';
 	import { createEventDispatcher } from 'svelte';
 	let className = '';
 	export { className as class };
 	import SvelteSelect from 'svelte-select';
-	import type { ItemProps } from '.';
+	import type { SelectItemProps } from '.';
 
 	// Docs: https://github.com/rob-balfre/svelte-select
 
 	const dispatch = createEventDispatcher();
 
-	export let items: ItemProps[] = [];
+	export let items: SelectItemProps[] = [];
 	export let id: string | undefined = undefined;
-	export let value: ItemProps | ItemProps[] | null = null;
+	export let value: SelectItemProps | SelectItemProps[] | null = null;
 	export let searchable = false;
 	export let listOpen = false;
 	export let placeholder: string | undefined = undefined;
@@ -25,9 +25,9 @@
 	export let multiple = false;
 	export let clearable = true;
 	export let required = false;
-	export let onChange: (value: ItemProps | ItemProps[]) => void = () => {};
+	export let onChange: (value: SelectItemProps | SelectItemProps[]) => void = () => {};
 
-	const groupBy = withGroup ? (item: ItemProps) => item.group : undefined;
+	const groupBy = withGroup ? (item: SelectItemProps) => item.group : undefined;
 </script>
 
 <SvelteSelect

package/dist/components/select/Select.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ItemProps } from '.';
+import type { SelectItemProps } from '.';
 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;
@@ -19,9 +19,9 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 } : {});
 declare const Select: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     class?: string;
-    items?: ItemProps[];
+    items?: SelectItemProps[];
     id?: string | undefined;
-    value?: ItemProps | ItemProps[] | null;
+    value?: SelectItemProps | SelectItemProps[] | null;
     searchable?: boolean;
     listOpen?: boolean;
     placeholder?: string | undefined;
@@ -31,7 +31,7 @@ declare const Select: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
     multiple?: boolean;
     clearable?: boolean;
     required?: boolean;
-    onChange?: (value: ItemProps | ItemProps[]) => void;
+    onChange?: (value: SelectItemProps | SelectItemProps[]) => void;
 }, {
     'custom-selection': {
         selection: any;

package/dist/components/select/index.d.ts

@@ -1,6 +1,7 @@
-export type ItemProps = {
+export type SelectItemProps = {
     value: string;
     label: string;
     description?: string;
     group?: string;
 };
+export { default as Select } from './Select.svelte';

package/dist/components/select/index.js

@@ -1 +1 @@
-export {};
+export { default as Select } from './Select.svelte';

package/dist/components/skeleton-loader/SkeletonLoader.stories.svelte

@@ -1,6 +1,7 @@
 <script module>
-	import SkeletonLoader from './index';
-	import { HorizontalCardSkeleton, StatcardSkeleton, ProjectCardSkeleton } from './index';
+	import SkeletonLoader from './SkeletonLoader.svelte';
+	import StatcardSkeleton from './StatcardSkeleton.svelte';
+
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
 	const { Story } = defineMeta({
@@ -35,22 +36,6 @@
 	</SkeletonLoader>
 </Story>
 
-<Story name="HorizontalCardWithIcon">
-	<div class="flex w-[900px] flex-col gap-4">
-		<HorizontalCardSkeleton />
-		<HorizontalCardSkeleton />
-		<HorizontalCardSkeleton />
-		<HorizontalCardSkeleton />
-	</div>
-</Story>
-<Story name="HorizontalCardWithoutIcon">
-	<div class="flex w-[900px] flex-col gap-4">
-		<HorizontalCardSkeleton withImage={false} />
-		<HorizontalCardSkeleton withImage={false} />
-		<HorizontalCardSkeleton withImage={false} />
-		<HorizontalCardSkeleton withImage={false} />
-	</div>
-</Story>
 <Story name="StatCard">
 	<div class="flex w-[900px] gap-4">
 		<StatcardSkeleton />
@@ -58,14 +43,3 @@
 		<StatcardSkeleton />
 	</div>
 </Story>
-
-<Story name="ProjectCard">
-	<div class="grid grid-cols-2 justify-start gap-2">
-		<ProjectCardSkeleton />
-		<ProjectCardSkeleton />
-		<ProjectCardSkeleton />
-		<ProjectCardSkeleton />
-		<ProjectCardSkeleton />
-		<ProjectCardSkeleton />
-	</div>
-</Story>

package/dist/components/skeleton-loader/index.d.ts

@@ -1,5 +1,3 @@
-export { default } from './SkeletonLoader.svelte';
-export { default as HorizontalCardSkeleton } from './HorizontalCardSkeleton.svelte';
+export { default as SkeletonLoader } from './SkeletonLoader.svelte';
 export { default as StatcardSkeleton } from './StatcardSkeleton.svelte';
-export { default as ProjectCardSkeleton } from './ProjectCardSkeleton.svelte';
 export { default as SkeletonImage } from './components/SkeletonImage.svelte';

package/dist/components/skeleton-loader/index.js

@@ -1,5 +1,3 @@
-export { default } from './SkeletonLoader.svelte';
-export { default as HorizontalCardSkeleton } from './HorizontalCardSkeleton.svelte';
+export { default as SkeletonLoader } from './SkeletonLoader.svelte';
 export { default as StatcardSkeleton } from './StatcardSkeleton.svelte';
-export { default as ProjectCardSkeleton } from './ProjectCardSkeleton.svelte';
 export { default as SkeletonImage } from './components/SkeletonImage.svelte';

package/dist/components/slider/index.d.ts

@@ -0,0 +1 @@
+export { default as Slider } from './Slider.svelte';

package/dist/components/slider/index.js

@@ -0,0 +1 @@
+export { default as Slider } from './Slider.svelte';

package/dist/components/spinner/index.d.ts

@@ -0,0 +1 @@
+export { default as Spinner } from './Spinner.svelte';

package/dist/components/spinner/index.js

@@ -0,0 +1 @@
+export { default as Spinner } from './Spinner.svelte';

package/dist/components/stat-card/StatCard.stories.svelte

@@ -19,6 +19,7 @@
 		value="2"
 		unit="%"
 		titleTooltip="Something that explains what this is..."
+		showTitleTooltip={true}
 	/>
 </Story>
 

package/dist/components/stat-card/StatCard.svelte

@@ -1,17 +1,23 @@
 <script lang="ts">
 	import { Info } from 'phosphor-svelte';
-	import Spinner from 'design-system/components/spinner/Spinner.svelte';
-	import Tooltip from 'design-system/components/tooltip/Tooltip.svelte';
-	import { featureFlags } from '../../stores';
+	import Spinner from '../spinner/Spinner.svelte';
+	import Tooltip from '../tooltip/Tooltip.svelte';
 
 	interface Props {
 		title: string;
 		value?: string | number | null;
 		unit?: string | null;
 		titleTooltip?: string;
+		showTitleTooltip?: boolean;
 	}
 
-	let { title, value = null, unit = '', titleTooltip = '' }: Props = $props();
+	let {
+		title,
+		value = null,
+		unit = '',
+		titleTooltip = '',
+		showTitleTooltip = false
+	}: Props = $props();
 	const formattedValue = $derived(typeof value === 'number' ? value.toLocaleString() : value);
 </script>
 
@@ -20,7 +26,7 @@
 >
 	<h5 class="flex items-center justify-start gap-1 text-secondary">
 		{title}
-		{#if titleTooltip && $featureFlags.analTooltip}
+		{#if titleTooltip && showTitleTooltip}
 			<Tooltip>
 				{#snippet trigger()}
 					<Info class="icon" size="1rem" weight="bold" />

package/dist/components/stat-card/StatCard.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     value?: string | number | null;
     unit?: string | null;
     titleTooltip?: string;
+    showTitleTooltip?: boolean;
 }
 declare const StatCard: import("svelte").Component<Props, {}, "">;
 type StatCard = ReturnType<typeof StatCard>;

package/dist/components/stat-card/index.d.ts

@@ -0,0 +1 @@
+export { default as StatCard } from './StatCard.svelte';

package/dist/components/stat-card/index.js

@@ -0,0 +1 @@
+export { default as StatCard } from './StatCard.svelte';

package/dist/components/status-badge/StatusBadge.stories.svelte

@@ -1,7 +1,8 @@
 <script module lang="ts">
-	import StatusBadge from 'design-system/components/status-badge/StatusBadge.svelte';
-	import Tooltip from 'design-system/components/tooltip/Tooltip.svelte';
-	import ProgressCircle from 'design-system/components/progress-circle/ProgressCircle.svelte';
+	import StatusBadge from '../status-badge/StatusBadge.svelte';
+	import Tooltip from '../tooltip/Tooltip.svelte';
+	import ProgressCircle from '../progress-circle/ProgressCircle.svelte';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
 
 	import {
 		SpinnerGap,
@@ -12,7 +13,6 @@
 		WarningCircle
 	} from 'phosphor-svelte';
 
-	import { defineMeta } from '@storybook/addon-svelte-csf';
 	const { Story } = defineMeta({
 		component: StatusBadge,
 		title: 'Design System/StatusBadge',

package/dist/components/status-badge/index.d.ts

@@ -0,0 +1 @@
+export { default as StatusBadge } from './StatusBadge.svelte';

package/dist/components/status-badge/index.js

@@ -0,0 +1 @@
+export { default as StatusBadge } from './StatusBadge.svelte';

package/dist/components/table/index.d.ts

@@ -0,0 +1 @@
+export { default as Table } from './Table.svelte';

package/dist/components/table/index.js

@@ -0,0 +1 @@
+export { default as Table } from './Table.svelte';

package/dist/components/tabs/components/Tab.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Button from 'design-system/components/button/Button.svelte';
+	import { Button } from '../../button/';
 	import type { Snippet } from 'svelte';
 	interface Props {
 		active?: boolean;

package/dist/components/tabs/index.d.ts

@@ -0,0 +1 @@
+export { default as Tabs } from './Tabs.svelte';

package/dist/components/tabs/index.js

@@ -0,0 +1 @@
+export { default as Tabs } from './Tabs.svelte';

package/dist/components/tag/Tag.stories.svelte

@@ -2,6 +2,7 @@
 	import { Folder } from 'phosphor-svelte';
 	import Tag from './Tag.svelte';
 	import { defineMeta } from '@storybook/addon-svelte-csf';
+
 	const { Story } = defineMeta({
 		component: Tag,
 		title: 'Design System/Tag',

package/dist/components/tag/Tag.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import Tooltip from 'design-system/components/tooltip/Tooltip.svelte';
+	import { Tooltip } from '../tooltip/';
 
 	interface Props {
 		children: Snippet;

package/dist/components/tag/index.d.ts

@@ -0,0 +1 @@
+export { default as Tag } from './Tag.svelte';

package/dist/components/tag/index.js

@@ -0,0 +1 @@
+export { default as Tag } from './Tag.svelte';

package/dist/components/toast/index.d.ts

@@ -0,0 +1 @@
+export { default as Toast } from './Toast.svelte';

package/dist/components/toast/index.js

@@ -0,0 +1 @@
+export { default as Toast } from './Toast.svelte';

package/dist/components/tooltip/Tooltip.stories.svelte

@@ -2,6 +2,7 @@
 	import Tooltip from './Tooltip.svelte';
 
 	import { defineMeta } from '@storybook/addon-svelte-csf';
+
 	const { Story } = defineMeta({
 		component: Tooltip,
 		title: 'Design System/Tooltip',

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1 @@
+export { default as Tooltip } from './Tooltip.svelte';

package/dist/components/tooltip/index.js

@@ -0,0 +1 @@
+export { default as Tooltip } from './Tooltip.svelte';

package/dist/fonts/index.d.ts

@@ -0,0 +1,6 @@
+export declare const fonts: {
+    MDSystemMonoRegular: string;
+    MDSystemRegular: string;
+    MDSystemMedium: string;
+    MDSystemSemibold: string;
+};

package/dist/fonts/index.js

@@ -0,0 +1,10 @@
+import MDSystemMonoRegular from './MDSystemMono-Regular.woff2';
+import MDSystemRegular from './MDSystem-Regular.woff2';
+import MDSystemMedium from './MDSystem-Medium.woff2';
+import MDSystemSemibold from './MDSystem-Semibold.woff2';
+export const fonts = {
+    MDSystemMonoRegular,
+    MDSystemRegular,
+    MDSystemMedium,
+    MDSystemSemibold
+};

package/dist/index.d.ts

@@ -1,4 +1,30 @@
-export { default as Avatar } from './components/avatar/Avatar.svelte';
-export { default as Tooltip } from './components/tooltip/Tooltip.svelte';
+export * from './components/avatar/';
+export * from './components/banner/';
+export * from './components/button/';
+export * from './components/datepicker/';
+export * from './components/divider/';
+export * from './components/drawer/';
+export * from './components/drawer/';
+export * from './components/dropdown/';
+export * from './components/icon-button/';
+export * from './components/image';
+export * from './components/input/';
+export * from './components/list/';
+export * from './components/markdown/';
+export * from './components/modal/';
+export * from './components/notification-popup/';
+export * from './components/pill/';
+export * from './components/progress-circle/';
+export * from './components/segmented-control-buttons/';
+export * from './components/select/';
+export * from './components/skeleton-loader/';
+export * from './components/slider/';
+export * from './components/spinner/';
+export * from './components/stat-card/';
+export * from './components/status-badge/';
+export * from './components/table/';
+export * from './components/tabs/';
+export * from './components/tag/';
+export * from './components/tooltip/';
 export { tokens } from './tokens';
 import './app.css';