@reshape-biotech/design-system 0.0.48 → 0.0.49

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

@@ -1,7 +1,6 @@
 <script module>
 	import NotificationPopup from './NotificationPopup.svelte';
-	import { Sparkle } from 'phosphor-svelte';
-
+	import { Icon } from '../icons';
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
 	const { Story } = defineMeta({
@@ -20,7 +19,7 @@
 <Story name="Primary">
 	<NotificationPopup onClose={handleClick} title="See what's new" {visible}>
 		<a href="_blank" color="transparent" class="flex items-center gap-2">
-			<Sparkle weight="bold" />
+			<Icon iconName="Sparkle" />
 			<p>Product updates</p>
 		</a>
 	</NotificationPopup>

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { X } from 'phosphor-svelte';
 	import { IconButton } from '../icon-button/';
 	import { fade, fly } from 'svelte/transition';
 	import type { Snippet } from 'svelte';
+	import { Icon } from '../icons';
 
 	interface Props {
 		onClose: () => void;
@@ -26,8 +26,8 @@
 			<h6 class="flex h-6 items-center">{title}</h6>
 			{@render children?.()}
 		</div>
-		<IconButton size="xs" variant="transparent" rounded={false} onclick={onClose}
-			><X class="text-icon-tertiary" weight="bold" /></IconButton
-		>
+		<IconButton size="xs" variant="transparent" rounded={false} onclick={onClose}>
+			<Icon iconName="X" />
+		</IconButton>
 	</div>
 {/if}

package/dist/components/pill/Pill.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { X } from 'phosphor-svelte';
+	import { Icon } from '../icons';
 
 	interface Props {
 		class?: string;
@@ -14,7 +14,7 @@
 
 <button class="{className} " {onclick} {type} data-testid={testID}>
 	{text}
-	<X class="opacity-50" weight="bold" />
+	<Icon iconName="X" class="opacity-50" />
 </button>
 
 <style>

package/dist/components/segmented-control-buttons/SegmentedControlButtons.stories.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { Star } from 'phosphor-svelte';
+	import { Icon } from '../icons';
 	import SegmentedControlButtons from './SegmentedControlButtons.svelte';
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -13,18 +13,18 @@
 <Story name="Primary">
 	<SegmentedControlButtons class="w-[350px]">
 		{#snippet children({ ControlButton })}
-			<ControlButton active><Star /> Low</ControlButton>
-			<ControlButton><Star /> Medium</ControlButton>
-			<ControlButton disabled><Star /> High</ControlButton>
+			<ControlButton active><Icon iconName="Star" /> Low</ControlButton>
+			<ControlButton><Icon iconName="Star" /> Medium</ControlButton>
+			<ControlButton disabled><Icon iconName="Star" /> High</ControlButton>
 		{/snippet}
 	</SegmentedControlButtons>
 </Story>
 <Story name="Large">
 	<SegmentedControlButtons size="lg" class="w-[350px]">
 		{#snippet children({ ControlButton })}
-			<ControlButton active><Star /> Low</ControlButton>
-			<ControlButton><Star /> Medium</ControlButton>
-			<ControlButton disabled><Star /> High</ControlButton>
+			<ControlButton active><Icon iconName="Star" /> Low</ControlButton>
+			<ControlButton><Icon iconName="Star" /> Medium</ControlButton>
+			<ControlButton disabled><Icon iconName="Star" /> High</ControlButton>
 		{/snippet}
 	</SegmentedControlButtons>
 </Story>
@@ -32,13 +32,13 @@
 	<SegmentedControlButtons class="w-[350px]">
 		{#snippet children({ ControlButton })}
 			<ControlButton active color="secondary">
-				<Star /> Low
+				<Icon iconName="Star" /> Low
 			</ControlButton>
 			<ControlButton color="secondary">
-				<Star /> Medium
+				<Icon iconName="Star" /> Medium
 			</ControlButton>
 			<ControlButton color="secondary">
-				<Star /> High
+				<Icon iconName="Star" /> High
 			</ControlButton>
 		{/snippet}
 	</SegmentedControlButtons>

package/dist/components/select/Select.svelte

@@ -2,7 +2,7 @@
 <!-- @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, borderColor, textColor } from '../../tokens';
-	import { CaretDown, X } from 'phosphor-svelte';
+	import { Icon } from '../icons';
 	import { createEventDispatcher } from 'svelte';
 	let className = '';
 	export { className as class };
@@ -78,7 +78,7 @@
 	--font-size="text-sm"
 >
 	<div slot="chevron-icon" class="">
-		<CaretDown weight="bold" size="1rem" class="text-icon-secondary" />
+		<Icon iconName="CaretDown" color="icon-secondary" />
 	</div>
 
 	<div slot="selection" let:selection>
@@ -90,7 +90,7 @@
 	</div>
 
 	<div slot="clear-icon">
-		<X weight="bold" size="1rem" />
+		<Icon iconName="X" />
 	</div>
 
 	<div slot="item" let:item let:index class="flex">
@@ -104,8 +104,8 @@
 			{/if}
 		</div>
 		<slot />
-	</div></SvelteSelect
->
+	</div>
+</SvelteSelect>
 
 <style>
 	:global(.svelte-select.focused) {

package/dist/components/slider/Slider.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { CaretUpDown } from 'phosphor-svelte';
+	import { Icon } from '../icons';
+
 	let className = '';
 	export { className as class };
 	export let value = 0;
@@ -47,7 +48,7 @@
 		<div class="h-2.5">
 			{#each Array(visualMax + 1) as _, index}
 				<div
-					class="absolute h-1.5 w-1.5 translate-y-[2px] rounded-full bg-surface ring ring-1 ring-gray-950/10"
+					class="absolute h-1.5 w-1.5 translate-y-[2px] rounded-full bg-surface ring-1 ring-gray-950/10"
 					style="left: {calculatePosition(index)} + 0.25rem"
 				></div>
 			{/each}
@@ -63,7 +64,7 @@
 		on:mouseup={onMouseup}
 	/>
 	<div class="thumb-overlay" style="left: {calculatePosition(value)} + 0.5rem)">
-		<CaretUpDown class="rotate-90 text-primary" size="1rem" weight="bold" />
+		<Icon iconName="CaretUpDown" class="rotate-90" />
 	</div>
 </div>
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Info } from 'phosphor-svelte';
+	import { Icon } from '../icons';
 	import Spinner from '../spinner/Spinner.svelte';
 	import Tooltip from '../tooltip/Tooltip.svelte';
 
@@ -29,7 +29,7 @@
 		{#if titleTooltip && showTitleTooltip}
 			<Tooltip>
 				{#snippet trigger()}
-					<Info class="icon text-icon-tertiary" size="1rem" weight="bold" />
+					<Icon iconName="Info" color="icon-tertiary" />
 				{/snippet}
 				{#snippet content()}
 					<span>

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

@@ -3,15 +3,7 @@
 	import Tooltip from '../tooltip/Tooltip.svelte';
 	import ProgressCircle from '../progress-circle/ProgressCircle.svelte';
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-
-	import {
-		SpinnerGap,
-		CheckCircle,
-		Moon,
-		StopCircle,
-		WifiSlash,
-		WarningCircle
-	} from 'phosphor-svelte';
+	import { Icon } from '../icons';
 
 	const { Story } = defineMeta({
 		component: StatusBadge,
@@ -28,7 +20,7 @@
 		<div class="flex flex-row gap-1">
 			<StatusBadge type="neutral">
 				{#snippet icon()}
-					<SpinnerGap size="100%" weight="bold" />
+					<Icon iconName="SpinnerGap" />
 				{/snippet}
 				{#snippet content()}
 					<div>Pending</div>
@@ -36,14 +28,14 @@
 			</StatusBadge>
 			<StatusBadge type="neutral">
 				{#snippet icon()}
-					<SpinnerGap size="100%" weight="bold" />
+					<Icon iconName="SpinnerGap" />
 				{/snippet}
 			</StatusBadge>
 		</div>
 		<div class="flex flex-row gap-1">
 			<StatusBadge type="neutral">
 				{#snippet icon()}
-					<Moon size="100%" weight="bold" />
+					<Icon iconName="Moon" />
 				{/snippet}
 				{#snippet content()}
 					<div>Idle</div>
@@ -51,7 +43,7 @@
 			</StatusBadge>
 			<StatusBadge type="neutral">
 				{#snippet icon()}
-					<Moon size="100%" weight="bold" />
+					<Icon iconName="Moon" />
 				{/snippet}
 			</StatusBadge>
 		</div>
@@ -62,7 +54,7 @@
 		<div class="flex flex-row gap-1">
 			<StatusBadge type="neutral" size="sm">
 				{#snippet icon()}
-					<SpinnerGap size="100%" weight="bold" />
+					<Icon iconName="SpinnerGap" />
 				{/snippet}
 				{#snippet content()}
 					<div>Pending</div>
@@ -70,14 +62,14 @@
 			</StatusBadge>
 			<StatusBadge type="neutral" size="sm">
 				{#snippet icon()}
-					<SpinnerGap size="100%" weight="bold" />
+					<Icon iconName="SpinnerGap" />
 				{/snippet}
 			</StatusBadge>
 		</div>
 		<div class="flex flex-row gap-1">
 			<StatusBadge type="neutral" size="sm">
 				{#snippet icon()}
-					<Moon size="100%" weight="bold" />
+					<Icon iconName="Moon" />
 				{/snippet}
 				{#snippet content()}
 					<div>Idle</div>
@@ -85,7 +77,7 @@
 			</StatusBadge>
 			<StatusBadge type="neutral" size="sm">
 				{#snippet icon()}
-					<Moon size="100%" weight="bold" />
+					<Icon iconName="Moon" />
 				{/snippet}
 			</StatusBadge>
 		</div>
@@ -101,7 +93,7 @@
 					<div>
 						<StatusBadge type="success">
 							{#snippet icon()}
-								<CheckCircle size="100%" weight="fill" />
+								<Icon iconName="CheckCircle" />
 							{/snippet}
 							{#snippet content()}
 								<div>Completed</div>
@@ -118,7 +110,7 @@
 			</Tooltip>
 			<StatusBadge type="success">
 				{#snippet icon()}
-					<CheckCircle size="100%" weight="fill" />
+					<Icon iconName="CheckCircle" weight="fill" />
 				{/snippet}
 			</StatusBadge>
 		</div>
@@ -128,7 +120,7 @@
 					<div>
 						<StatusBadge type="success">
 							{#snippet icon()}
-								<StopCircle size="100%" weight="bold" />
+								<Icon iconName="StopCircle" />
 							{/snippet}
 							{#snippet content()}
 								<div>Stopped</div>
@@ -145,7 +137,7 @@
 			</Tooltip>
 			<StatusBadge type="success">
 				{#snippet icon()}
-					<StopCircle size="100%" weight="bold" />
+					<Icon iconName="StopCircle" />
 				{/snippet}
 			</StatusBadge>
 		</div>
@@ -158,7 +150,7 @@
 				{#snippet trigger()}
 					<StatusBadge type="success" size="sm">
 						{#snippet icon()}
-							<CheckCircle size="100%" weight="fill" />
+							<Icon iconName="CheckCircle" weight="fill" />
 						{/snippet}
 						{#snippet content()}
 							<div>Completed</div>
@@ -174,7 +166,7 @@
 			</Tooltip>
 			<StatusBadge type="success" size="sm">
 				{#snippet icon()}
-					<CheckCircle size="100%" weight="fill" />
+					<Icon iconName="CheckCircle" weight="fill" />
 				{/snippet}
 			</StatusBadge>
 		</div>
@@ -183,7 +175,7 @@
 				{#snippet trigger()}
 					<StatusBadge type="success" size="sm">
 						{#snippet icon()}
-							<StopCircle size="100%" weight="bold" />
+							<Icon iconName="StopCircle" />
 						{/snippet}
 						{#snippet content()}
 							<div>Stopped</div>
@@ -199,7 +191,7 @@
 			</Tooltip>
 			<StatusBadge type="success" size="sm">
 				{#snippet icon()}
-					<StopCircle size="100%" weight="bold" />
+					<Icon iconName="StopCircle" />
 				{/snippet}
 			</StatusBadge>
 		</div>
@@ -283,7 +275,7 @@
 			{#snippet trigger()}
 				<StatusBadge type="warning">
 					{#snippet icon()}
-						<WifiSlash size="100%" weight="bold" />
+						<Icon iconName="WifiSlash" />
 					{/snippet}
 					{#snippet content()}
 						<div>Offline</div>
@@ -300,7 +292,7 @@
 
 		<StatusBadge type="warning">
 			{#snippet icon()}
-				<WifiSlash size="100%" weight="bold" />
+				<Icon iconName="WifiSlash" />
 			{/snippet}
 		</StatusBadge>
 	</div>
@@ -311,7 +303,7 @@
 			{#snippet trigger()}
 				<StatusBadge type="warning" size="sm">
 					{#snippet icon()}
-						<WifiSlash size="100%" weight="bold" />
+						<Icon iconName="WifiSlash" />
 					{/snippet}
 					{#snippet content()}
 						<div>Offline</div>
@@ -328,7 +320,7 @@
 
 		<StatusBadge type="warning" size="sm">
 			{#snippet icon()}
-				<WifiSlash size="100%" weight="bold" />
+				<Icon iconName="WifiSlash" />
 			{/snippet}
 		</StatusBadge>
 	</div>
@@ -341,7 +333,7 @@
 			{#snippet trigger()}
 				<StatusBadge type="error">
 					{#snippet icon()}
-						<WarningCircle size="100%" weight="fill" />
+						<Icon iconName="WarningCircle" weight="fill" />
 					{/snippet}
 					{#snippet content()}
 						<div>Failed</div>
@@ -358,7 +350,7 @@
 
 		<StatusBadge type="error">
 			{#snippet icon()}
-				<WarningCircle size="100%" weight="fill" />
+				<Icon iconName="WarningCircle" weight="fill" />
 			{/snippet}
 		</StatusBadge>
 	</div>
@@ -369,7 +361,7 @@
 			{#snippet trigger()}
 				<StatusBadge type="error" size="sm">
 					{#snippet icon()}
-						<WarningCircle size="100%" weight="fill" />
+						<Icon iconName="WarningCircle" weight="fill" />
 					{/snippet}
 					{#snippet content()}
 						<div>Failed</div>
@@ -386,7 +378,7 @@
 
 		<StatusBadge type="error" size="sm">
 			{#snippet icon()}
-				<WarningCircle size="100%" weight="fill" />
+				<Icon iconName="WarningCircle" weight="fill" />
 			{/snippet}
 		</StatusBadge>
 	</div>
@@ -395,7 +387,7 @@
 <Story name="Icon only">
 	<StatusBadge type="neutral" iconOnly>
 		{#snippet icon()}
-			<SpinnerGap size="100%" weight="bold" />
+			<Icon iconName="SpinnerGap" />
 		{/snippet}
 	</StatusBadge>
 </Story>

package/dist/components/table/Table.stories.svelte

@@ -8,7 +8,7 @@
 		tags: ['autodocs']
 	});
 	import IconButton from '../icon-button/IconButton.svelte';
-	import { Phone } from 'phosphor-svelte';
+	import { Icon } from '../icons';
 
 	export const users = [
 		{
@@ -81,7 +81,11 @@
 						<Td>{user.name}</Td>
 						<Td>{user.age}</Td>
 						<Td>{user.role}</Td>
-						<Td><IconButton disabled={user.role === 'deactivated'}><Phone /></IconButton></Td>
+						<Td>
+							<IconButton disabled={user.role === 'deactivated'}>
+								<Icon iconName="Phone" />
+							</IconButton>
+						</Td>
 					</Tr>
 				{/each}
 			</TBody>

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

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { Folder } from 'phosphor-svelte';
+	import { Icon } from '../icons';
 	import Tag from './Tag.svelte';
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -28,7 +28,7 @@
 <Story name="Default icon onclick">
 	<div class="w-fit">
 		<Tag onclick={() => {}}>
-			<Folder />
+			<Icon iconName="Folder" />
 			Default
 		</Tag>
 	</div>

package/dist/components/tooltip/Tooltip.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Tooltip } from 'flowbite-svelte';
+	import Tooltip from 'flowbite-svelte/Tooltip.svelte';
 	import type { Snippet } from 'svelte';
 
 	interface Props {

package/dist/components/tooltip/Tooltip.svelte.d.ts

@@ -1,4 +1,4 @@
-import { Tooltip } from 'flowbite-svelte';
+import Tooltip from 'flowbite-svelte/Tooltip.svelte';
 import type { Snippet } from 'svelte';
 interface Props {
     class?: string;

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export * from './components/banner/';
 export * from './components/button/';
 export * as Collapsible from './components/collapsible/';
 export * as Combobox from './components/combobox/';
-export * from './components/graphs/';
+export * from './components/graphs';
 export * from './components/datepicker/';
 export * from './components/divider/';
 export * from './components/drawer/';

package/dist/index.js

@@ -5,7 +5,7 @@ export * from './components/banner/';
 export * from './components/button/';
 export * as Collapsible from './components/collapsible/';
 export * as Combobox from './components/combobox/';
-export * from './components/graphs/';
+export * from './components/graphs';
 export * from './components/datepicker/';
 export * from './components/divider/';
 export * from './components/drawer/';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reshape-biotech/design-system",
-	"version": "0.0.48",
+	"version": "0.0.49",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",