@reshape-biotech/design-system 0.0.48 → 0.0.50

package/dist/components/combobox/components/combobox-add.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Plus } from 'phosphor-svelte';
+	import { Icon } from '../../icons';
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
@@ -9,7 +9,7 @@
 </script>
 
 <button {...props}>
-	<Plus />
+	<Icon iconName="Plus" />
 	{@render children()}
 </button>
 

package/dist/components/combobox/components/combobox-content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Combobox } from 'bits-ui';
 	import type { ComboboxContentProps } from '../types';
-	import { CaretDown, CaretUp } from 'phosphor-svelte';
+	import { Icon } from '../../icons';
 
 	let {
 		children,
@@ -16,13 +16,13 @@
 	<Combobox.Content {...props} class={className}>
 		{#if showScroll}
 			<Combobox.ScrollUpButton class="flex justify-center">
-				<CaretUp />
+				<Icon iconName="CaretUp" />
 			</Combobox.ScrollUpButton>
 			<Combobox.Viewport class="p-1">
 				{@render children()}
 			</Combobox.Viewport>
 			<Combobox.ScrollDownButton class="flex justify-center">
-				<CaretDown />
+				<Icon iconName="CaretDown" />
 			</Combobox.ScrollDownButton>
 		{:else}
 			{@render children()}

package/dist/components/combobox/components/combobox-indicator.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Check } from 'phosphor-svelte';
+	import { Icon } from '../../icons';
 </script>
 
-<Check size={16} />
+<Icon iconName="Check" />

package/dist/components/datepicker/DatePicker.stories.svelte

@@ -0,0 +1,227 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { userEvent, within } from '@storybook/test';
+	import { DateTime } from 'luxon';
+	import DatePicker from './DatePicker.svelte';
+	import Dropdown from '../dropdown/Dropdown.svelte';
+	import Button from '../button/Button.svelte';
+	import { Icon } from '../icons';
+
+	const { Story } = defineMeta({
+		component: DatePicker,
+		title: 'Design System/DatePicker',
+		tags: ['autodocs'],
+		parameters: {
+			design: {
+				type: 'figma',
+				url: 'https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System%3A-V1?node-id=4381-32638&t=Epi2Ul7Cw7sCJpGy-0'
+			}
+		}
+	});
+
+	let selectedDate = $state<DateTime | undefined>(undefined);
+	let loggedDate = $state<string | undefined>(undefined);
+
+	function handleDateSelection(date: DateTime) {
+		loggedDate = date.toFormat('yyyy-MM-dd');
+	}
+
+	// States for the dropdown story
+	let dropdownDate = $state<DateTime | undefined>(undefined);
+	let displayText = $state('Select a date');
+	let isOpen = $state(false);
+
+	// States for the form test
+	let formDropdownDate = $state<DateTime | undefined>(undefined);
+	let formDisplayText = $state('Select a date');
+	let formIsOpen = $state(false);
+
+	function handleDropdownSelection(date: DateTime) {
+		dropdownDate = date;
+		displayText = date.toFormat('MMM dd, yyyy');
+		isOpen = false;
+	}
+
+	function handleFormDateSelection(date: DateTime) {
+		formDropdownDate = date;
+		formDisplayText = date.toFormat('MMM dd, yyyy');
+		formIsOpen = false;
+	}
+</script>
+
+<Story name="Default">
+	<div class="p-4">
+		<DatePicker bind:selectedDate />
+	</div>
+</Story>
+
+<Story name="With Selected Date">
+	<div class="p-4">
+		<DatePicker selectedDate={DateTime.local(2023, 10, 15)} />
+	</div>
+</Story>
+
+<Story name="With Date Change Handler">
+	<div class="p-4">
+		<div class="mb-4">
+			<DatePicker {selectedDate} onClick={handleDateSelection} />
+		</div>
+		{#if loggedDate}
+			<div class="mt-4 rounded bg-neutral p-2">
+				<p>Selected date: <strong>{loggedDate}</strong></p>
+			</div>
+		{/if}
+	</div>
+</Story>
+
+<Story name="Month Navigation">
+	<div class="p-4">
+		<DatePicker selectedDate={DateTime.local()} />
+		<div class="mt-4 text-sm text-tertiary">
+			<p>Click the arrow buttons to navigate between months</p>
+		</div>
+	</div>
+</Story>
+
+<Story
+	name="Interaction Test"
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		// Click next month button
+		const nextMonthButton = canvas.getAllByRole('button')[1]; // Second button is next month
+		await userEvent.click(nextMonthButton);
+
+		// Wait a moment
+		await new Promise((resolve) => setTimeout(resolve, 300));
+
+		// Click a date (the 15th of the month)
+		const dateButtons = canvas.getAllByRole('button').filter((button) => {
+			// Find buttons with just numbers as their text content
+			const text = button.textContent?.trim();
+			return text && !isNaN(Number(text));
+		});
+
+		// Find the button with text "15" if it exists
+		const date15Button = dateButtons.find((button) => button.textContent?.trim() === '15');
+
+		if (date15Button) {
+			await userEvent.click(date15Button);
+		}
+	}}
+>
+	<div class="p-4">
+		<DatePicker bind:selectedDate />
+		{#if selectedDate}
+			<div class="mt-4 rounded bg-neutral p-2">
+				<p>Selected date: <strong>{selectedDate.toFormat('yyyy-MM-dd')}</strong></p>
+			</div>
+		{/if}
+	</div>
+</Story>
+
+<Story name="Multiple DatePickers">
+	<div class="flex flex-col gap-4 p-4 md:flex-row">
+		<div>
+			<h3 class="mb-2 text-sm font-medium">Start Date</h3>
+			<DatePicker selectedDate={DateTime.local().minus({ days: 7 })} />
+		</div>
+		<div>
+			<h3 class="mb-2 text-sm font-medium">End Date</h3>
+			<DatePicker selectedDate={DateTime.local()} />
+		</div>
+	</div>
+</Story>
+
+<Story name="In Dropdown">
+	<div class="p-4">
+		<Dropdown bind:open={isOpen} side="dropdown-bottom" alignEnd={false}>
+			{#snippet trigger({ Trigger })}
+				<Trigger>
+					<Icon iconName="CalendarBlank" class="mr-2" size={16} />
+					{displayText}
+				</Trigger>
+			{/snippet}
+
+			{#snippet content()}
+				<DatePicker selectedDate={dropdownDate} onClick={handleDropdownSelection} />
+			{/snippet}
+		</Dropdown>
+
+		{#if dropdownDate}
+			<div class="mt-4 rounded bg-neutral p-2">
+				<p>You selected: <strong>{dropdownDate.toFormat('MMMM dd, yyyy')}</strong></p>
+			</div>
+		{/if}
+	</div>
+</Story>
+
+<Story
+	name="Form Submit Prevention Test"
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		// Setup spy on form submission
+		const form = canvas.getByTestId('test-form');
+		let submissionCount = 0;
+		form.addEventListener('submit', (e) => {
+			e.preventDefault();
+			submissionCount++;
+			console.log('Form was submitted!');
+		});
+
+		// First open the dropdown
+		const dropdownTrigger = canvas.getByTestId('form-date-trigger');
+		await userEvent.click(dropdownTrigger);
+
+		// Click prev/next month and verify no submission
+		const buttons = document.querySelectorAll('button');
+		const prevMonthButton = Array.from(buttons).find((btn) => btn.innerHTML.includes('CaretLeft'));
+		const nextMonthButton = Array.from(buttons).find((btn) => btn.innerHTML.includes('CaretRight'));
+
+		if (prevMonthButton) {
+			await userEvent.click(prevMonthButton);
+			console.log('Clicked prev month, submission count:', submissionCount);
+		}
+
+		if (nextMonthButton) {
+			await userEvent.click(nextMonthButton);
+			console.log('Clicked next month, submission count:', submissionCount);
+		}
+
+		// Success message if no form submission occurred
+		if (submissionCount === 0) {
+			console.log('TEST PASSED: Month navigation did not trigger form submission');
+		} else {
+			console.error('TEST FAILED: Month navigation triggered form submission');
+		}
+	}}
+>
+	<div class="p-4">
+		<form data-testid="test-form" onsubmit={(e) => e.preventDefault()}>
+			<div class="mb-4">
+				<label for="name" class="mb-1 block text-sm font-medium">Name</label>
+				<input id="name" type="text" class="input input-bordered w-full" />
+			</div>
+
+			<div class="mb-4">
+				<Dropdown bind:open={formIsOpen} side="dropdown-bottom" alignEnd={false}>
+					{#snippet trigger({ Trigger })}
+						<Trigger>
+							<div data-testid="form-date-trigger" class="flex items-center gap-2">
+								<Icon iconName="CalendarBlank" class="mr-2" size={16} />
+								{formDisplayText}
+							</div>
+						</Trigger>
+					{/snippet}
+
+					{#snippet content()}
+						<DatePicker selectedDate={formDropdownDate} onClick={handleFormDateSelection} />
+					{/snippet}
+				</Dropdown>
+			</div>
+
+			<button type="submit" class="btn btn-primary mt-4">Submit Form</button>
+		</form>
+	</div>
+</Story>

package/dist/components/datepicker/DatePicker.stories.svelte.d.ts

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

package/dist/components/datepicker/DatePicker.svelte

@@ -2,8 +2,9 @@
 	import { run } from 'svelte/legacy';
 
 	import { DateTime, type MonthNumbers } from 'luxon';
-	import { CaretLeft, CaretRight } from 'phosphor-svelte';
+
 	import IconButton from '../icon-button/IconButton.svelte';
+	import { Icon } from '../icons';
 
 	interface Props {
 		selectedDate: DateTime | undefined;
@@ -94,13 +95,13 @@
 	<div class="calendar">
 		<div class="calendar-header">
 			<div class="month-year">
-				<IconButton onclick={previousMonth}
-					><CaretLeft class="text-secondary" weight="bold" size="0.75rem" /></IconButton
-				>
+				<IconButton onclick={previousMonth} type="button">
+					<Icon iconName="CaretLeft" color="secondary" size="0.75rem" />
+				</IconButton>
 				<h5>{DateTime.local(shownYear, shownMonth).toFormat('MMM yyyy')}</h5>
-				<IconButton onclick={nextMonth}
-					><CaretRight class="text-secondary" weight="bold" size="0.75rem" /></IconButton
-				>
+				<IconButton onclick={nextMonth} type="button">
+					<Icon iconName="CaretRight" color="secondary" size="0.75rem" />
+				</IconButton>
 			</div>
 		</div>
 		<div class="calendar-body">

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

@@ -1,7 +1,7 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import IconButton from '../icon-button/IconButton.svelte';
-	import { Plus } from 'phosphor-svelte';
+	import { Icon } from '../icons';
 
 	const { Story } = defineMeta({
 		component: IconButton,
@@ -13,16 +13,16 @@
 <Story name="Base">
 	<div class="flex flex-col gap-2">
 		<IconButton variant="primary">
-			<Plus />
+			<Icon iconName="Plus" />
 		</IconButton>
 		<IconButton variant="secondary">
-			<Plus />
+			<Icon iconName="Plus" />
 		</IconButton>
 		<IconButton variant="danger">
-			<Plus />
+			<Icon iconName="Plus" />
 		</IconButton>
 		<IconButton variant="transparent">
-			<Plus />
+			<Icon iconName="Plus" />
 		</IconButton>
 	</div>
 </Story>
@@ -30,29 +30,29 @@
 <Story name="Sizes">
 	<div class="flex flex-col gap-2">
 		<IconButton variant="secondary" size="xs">
-			<Plus />
+			<Icon iconName="Plus" />
 		</IconButton>
 		<IconButton variant="secondary" size="sm">
-			<Plus />
+			<Icon iconName="Plus" />
 		</IconButton>
 		<IconButton variant="secondary" size="md">
-			<Plus />
+			<Icon iconName="Plus" />
 		</IconButton>
 	</div>
 </Story>
 <Story name="Not rounded base">
 	<div class="flex flex-col gap-2">
 		<IconButton variant="primary" rounded={false}>
-			<Plus />
+			<Icon iconName="Plus" />
 		</IconButton>
 		<IconButton variant="secondary" rounded={false}>
-			<Plus />
+			<Icon iconName="Plus" />
 		</IconButton>
 		<IconButton variant="danger" rounded={false}>
-			<Plus />
+			<Icon iconName="Plus" />
 		</IconButton>
 		<IconButton variant="transparent" rounded={false}>
-			<Plus />
+			<Icon iconName="Plus" />
 		</IconButton>
 	</div>
 </Story>
@@ -60,23 +60,23 @@
 <Story name="Not rounded sizes">
 	<div class="flex flex-col gap-2">
 		<IconButton variant="secondary" size="xs" rounded={false}>
-			<Plus />
+			<Icon iconName="Plus" />
 		</IconButton>
 		<IconButton variant="secondary" size="sm" rounded={false}>
-			<Plus />
+			<Icon iconName="Plus" />
 		</IconButton>
 		<IconButton variant="secondary" size="md" rounded={false}>
-			<Plus />
+			<Icon iconName="Plus" />
 		</IconButton>
 	</div>
 </Story>
 <Story name="Disabled">
 	<IconButton disabled>
-		<Plus />
+		<Icon iconName="Plus" />
 	</IconButton>
 </Story>
 <Story name="Loading">
 	<IconButton loading>
-		<Plus />
+		<Icon iconName="Plus" />
 	</IconButton>
 </Story>

package/dist/components/icons/AnalysisIcon.svelte

@@ -3,7 +3,8 @@
 	import Well from './custom/Well.svelte';
 	import RadioButton from 'phosphor-svelte/lib/RadioButton';
 	import type { IconColor, SupportedAnalysisModelIcons } from '.';
-	import { BugBeetle, Plant } from 'phosphor-svelte';
+	import BugBeetle from 'phosphor-svelte/lib/BugBeetle';
+	import Plant from 'phosphor-svelte/lib/Plant';
 
 	type Props = {
 		model: SupportedAnalysisModelIcons;
@@ -19,6 +20,7 @@
 			case 'halos':
 				return Halo;
 			case 'large_colonies':
+			case 'pipeline_radial_growth':
 				return RadioButton;
 			case 'small_colonies':
 			case 'sgs_enteros':
@@ -27,6 +29,7 @@
 				return BugBeetle;
 			case 'pipeline_seed_germination':
 				return Plant;
+			case 'pipeline_colony_formation':
 			default:
 				return Well;
 		}

package/dist/components/icons/Icon.stories.svelte

@@ -0,0 +1,127 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Icon, iconMap, type IconName } from './index';
+
+	const { Story } = defineMeta({
+		component: Icon,
+		title: 'Design System/Icons',
+		tags: ['autodocs'],
+		parameters: {
+			design: {
+				type: 'figma',
+				url: 'https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%5BWIP%5D--Reshape-Design-System%3A-V1.1?node-id=20-30983&t=qQZtfqCN4P2k2UYf-0'
+			}
+		}
+	});
+
+	// Get all icon names from the iconMap
+	const iconNames = Object.keys(iconMap);
+</script>
+
+<Story name="All Icons">
+	<div class="p-4">
+		<h2 class="mb-6 text-xl font-semibold">Icon Gallery</h2>
+		<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+			{#each iconNames as iconName}
+				<div class="flex flex-col items-center rounded-lg border border-neutral p-4 text-center">
+					<div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-neutral">
+						<Icon iconName={iconName as IconName} size={24} />
+					</div>
+					<span class="text-sm">{iconName}</span>
+				</div>
+			{/each}
+		</div>
+	</div>
+</Story>
+
+<Story name="Icon Sizes">
+	<div class="p-4">
+		<h2 class="mb-6 text-xl font-semibold">Icon Sizes</h2>
+		<div class="flex flex-wrap items-end gap-8">
+			<div class="flex flex-col items-center">
+				<Icon iconName="Star" size={16} />
+				<span class="mt-2 text-xs">16px</span>
+			</div>
+			<div class="flex flex-col items-center">
+				<Icon iconName="Star" size={20} />
+				<span class="mt-2 text-xs">20px</span>
+			</div>
+			<div class="flex flex-col items-center">
+				<Icon iconName="Star" size={24} />
+				<span class="mt-2 text-xs">24px</span>
+			</div>
+			<div class="flex flex-col items-center">
+				<Icon iconName="Star" size={32} />
+				<span class="mt-2 text-xs">32px</span>
+			</div>
+			<div class="flex flex-col items-center">
+				<Icon iconName="Star" size={48} />
+				<span class="mt-2 text-xs">48px</span>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Icon Weights">
+	<div class="p-4">
+		<h2 class="mb-6 text-xl font-semibold">Icon Weights</h2>
+		<div class="flex flex-wrap gap-8">
+			<div class="flex flex-col items-center">
+				<Icon iconName="Star" size={24} weight="thin" />
+				<span class="mt-2 text-xs">Thin</span>
+			</div>
+			<div class="flex flex-col items-center">
+				<Icon iconName="Star" size={24} weight="light" />
+				<span class="mt-2 text-xs">Light</span>
+			</div>
+			<div class="flex flex-col items-center">
+				<Icon iconName="Star" size={24} weight="regular" />
+				<span class="mt-2 text-xs">Regular</span>
+			</div>
+			<div class="flex flex-col items-center">
+				<Icon iconName="Star" size={24} weight="bold" />
+				<span class="mt-2 text-xs">Bold</span>
+			</div>
+			<div class="flex flex-col items-center">
+				<Icon iconName="Star" size={24} weight="fill" />
+				<span class="mt-2 text-xs">Fill</span>
+			</div>
+			<div class="flex flex-col items-center">
+				<Icon iconName="Star" size={24} weight="duotone" />
+				<span class="mt-2 text-xs">Duotone</span>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Icon Colors">
+	<div class="p-4">
+		<h2 class="mb-6 text-xl font-semibold">Icon Colors</h2>
+		<div class="flex flex-wrap gap-8">
+			<div class="flex flex-col items-center">
+				<Icon iconName="Star" size={24} color="primary" />
+				<span class="mt-2 text-xs">Primary</span>
+			</div>
+			<div class="flex flex-col items-center">
+				<Icon iconName="Star" size={24} color="secondary" />
+				<span class="mt-2 text-xs">Secondary</span>
+			</div>
+			<div class="flex flex-col items-center">
+				<Icon iconName="Star" size={24} color="tertiary" />
+				<span class="mt-2 text-xs">Tertiary</span>
+			</div>
+			<div class="flex flex-col items-center">
+				<Icon iconName="Star" size={24} color="success" />
+				<span class="mt-2 text-xs">Success</span>
+			</div>
+			<div class="flex flex-col items-center">
+				<Icon iconName="Star" size={24} color="warning" />
+				<span class="mt-2 text-xs">Warning</span>
+			</div>
+			<div class="flex flex-col items-center">
+				<Icon iconName="Star" size={24} color="danger" />
+				<span class="mt-2 text-xs">Danger</span>
+			</div>
+		</div>
+	</div>
+</Story>

package/dist/components/icons/Icon.stories.svelte.d.ts

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

package/dist/components/icons/Icon.svelte

@@ -4,10 +4,11 @@
 
 	let {
 		iconName,
-		color,
-		weight = 'regular',
+		color = 'inherit',
+		weight = 'bold',
 		width = 16,
 		height = 16,
+		size,
 		class: className
 	}: IconProps = $props();
 </script>
@@ -15,9 +16,9 @@
 <!-- svelte-ignore svelte_component_deprecated -->
 <svelte:component
 	this={renderIcon(iconName ?? 'SealQuestion')}
-	color={textColor[color ?? 'icon-primary']}
+	color={color === 'inherit' ? 'currentColor' : textColor[color]}
 	class={className}
 	{weight}
-	{width}
-	{height}
+	width={size ? size : width}
+	height={size ? size : height}
 />

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

@@ -1,16 +1,18 @@
-import type { Component } from 'svelte';
 import type { IconComponentProps } from 'phosphor-svelte';
+import type { Component } from 'svelte';
 import type { textColor } from './../../tokens';
 export type PhosphorIconProps = Component<IconComponentProps, object, ''>;
-export declare const iconMap: Record<string, PhosphorIconProps>;
+export type IconName = 'ArrowFatLineRight' | 'ArrowRight' | 'ArrowUpRight' | 'Barcode' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'CalendarBlank' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'Database' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'List' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'Moon' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Question' | 'SealQuestion' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'TestTube' | 'Trash' | 'TrashSimple' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
+export declare const iconMap: Record<IconName, PhosphorIconProps>;
 export declare function renderIcon(iconName: keyof typeof iconMap): PhosphorIconProps;
 export type IconColor = keyof typeof textColor;
 export type SupportedAnalysisModelIcons = 'halos' | 'large_colonies' | 'small_colonies' | 'sgs_enteros' | 'general_germination_rate_with_tracking' | 'general_germination_rate_without_tracking' | 'pipeline_insect_analysis' | 'pipeline_colony_formation' | 'pipeline_radial_growth' | 'syngenta_health_score_crw' | 'pipeline_seed_germination' | 'syngenta_health_score_faw' | 'syngenta_health_score_sbl' | 'unilever_cfu_count_lowres';
 export { default as Icon } from './Icon.svelte';
 export type IconProps = {
-    iconName: string;
-    color: IconColor;
-    weight?: 'fill' | 'light' | 'regular' | 'thin';
+    iconName: IconName;
+    color?: IconColor | 'inherit';
+    weight?: 'fill' | 'light' | 'regular' | 'thin' | 'bold' | 'duotone';
+    size?: number | string;
     width?: number;
     height?: number;
     class?: string;