@reshape-biotech/design-system 0.0.52 → 1.1.1

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

@@ -10,29 +10,23 @@
 	});
 </script>
 
-<Story name="Base">
-	<AnalysisIcon model="large_colonies" />
-</Story>
+<Story name="Base" args={{ model: 'pipeline_large_colonies' }} />
 
-<Story name="Sizes">
-	<div class="flex flex-col gap-4">
-		<AnalysisIcon model="large_colonies" size="sm" withBackground />
-		<AnalysisIcon model="large_colonies" size="md" withBackground />
-		<AnalysisIcon model="large_colonies" size="lg" withBackground />
-		<AnalysisIcon model="large_colonies" size="sm" />
-		<AnalysisIcon model="large_colonies" size="md" />
-		<AnalysisIcon model="large_colonies" size="lg" />
-	</div>
+<Story name="Sizes" args={{ model: 'pipeline_large_colonies' }}>
+	{#snippet template(args)}
+		<div class="flex flex-col gap-4">
+			<AnalysisIcon model={args.model} size="sm" withBackground />
+			<AnalysisIcon model={args.model} size="md" withBackground />
+			<AnalysisIcon model={args.model} size="lg" withBackground />
+			<AnalysisIcon model={args.model} size="sm" />
+			<AnalysisIcon model={args.model} size="md" />
+			<AnalysisIcon model={args.model} size="lg" />
+		</div>
+	{/snippet}
 </Story>
 
-<Story name="Halo">
-	<AnalysisIcon model="halos" />
-</Story>
+<Story name="Halo" args={{ model: 'pipeline_halos' }} />
 
-<Story name="Small colonies">
-	<AnalysisIcon model="small_colonies" />
-</Story>
+<Story name="Small colonies" args={{ model: 'pipeline_small_colonies' }} />
 
-<Story name="With background">
-	<AnalysisIcon model="halos" withBackground />
-</Story>
+<Story name="With background" args={{ model: 'pipeline_halos', withBackground: true }} />

package/dist/components/icons/AnalysisIcon.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
-	import Halo from './custom/Halo.svelte';
+	import Icon from './Icon.svelte';
 	import Well from './custom/Well.svelte';
-	import RadioButton from 'phosphor-svelte/lib/RadioButton';
+	import Halo from './custom/Halo.svelte';
 	import type { IconColor, SupportedAnalysisModelIcons } from '.';
-	import BugBeetle from 'phosphor-svelte/lib/BugBeetle';
-	import Plant from 'phosphor-svelte/lib/Plant';
 
 	type Props = {
 		model: SupportedAnalysisModelIcons;
@@ -15,67 +13,79 @@
 
 	let { model, withBackground, size = 'md', class: className }: Props = $props();
 
-	const mapAnalysisToIcon = (analysis: SupportedAnalysisModelIcons) => {
-		switch (analysis) {
-			case 'halos':
-				return Halo;
-			case 'large_colonies':
-			case 'pipeline_radial_growth':
-				return RadioButton;
-			case 'small_colonies':
-			case 'sgs_enteros':
-				return Well;
-			case 'pipeline_insect_analysis':
-				return BugBeetle;
-			case 'pipeline_seed_germination':
-				return Plant;
-			case 'pipeline_colony_formation':
+	const getIconSize = () => {
+		switch (size) {
+			case 'sm':
+				return 14;
+			case 'lg':
+				return 20;
 			default:
-				return Well;
+				return 16;
 		}
 	};
 
-	const mapAnalysisToColor = (analysis: SupportedAnalysisModelIcons): IconColor => {
+	const backgroundColor = (analysis: SupportedAnalysisModelIcons) => {
 		switch (analysis) {
-			case 'halos':
-				return 'icon-warning';
-			case 'large_colonies':
-				return 'icon-accent';
-			case 'small_colonies':
+			case 'pipeline_halos':
+				return 'bg-warning';
+			case 'pipeline_large_colonies':
+			case 'pipeline_radial_growth':
+				return 'bg-accent';
 			case 'sgs_enteros':
-			case 'pipeline_insect_analysis':
-				return 'icon-orange';
+				return 'bg-orange';
+			case 'pipeline_small_colonies':
+			case 'pipeline_microbial_colonies':
+				return 'bg-sky';
+			case 'pipeline_insects':
+				return 'bg-orange';
 			case 'pipeline_seed_germination':
-				return 'icon-success';
+				return 'bg-success';
 			default:
-				return 'icon-primary';
+				return 'bg-neutral';
 		}
 	};
 
-	const backgroundColor = (analysis: SupportedAnalysisModelIcons) => {
+	const mapAnalysisToColor = (analysis: SupportedAnalysisModelIcons): IconColor => {
 		switch (analysis) {
-			case 'halos':
-				return 'bg-warning';
-			case 'large_colonies':
-				return 'bg-accent';
-			case 'small_colonies':
+			case 'pipeline_halos':
+				return 'warning';
+			case 'pipeline_large_colonies':
+			case 'pipeline_radial_growth':
+				return 'accent';
+			case 'pipeline_microbial_colonies':
+			case 'pipeline_small_colonies':
+				return 'blue';
 			case 'sgs_enteros':
-			case 'pipeline_insect_analysis':
-				return 'bg-orange';
+				return 'lilac';
+			case 'pipeline_insects':
+				return 'orange';
 			case 'pipeline_seed_germination':
-				return 'bg-success';
+				return 'success';
 			default:
-				return 'bg-neutral';
+				return 'secondary';
 		}
 	};
 </script>
 
-<!-- svelte-ignore svelte_component_deprecated -->
 <div
-	class={`text-${mapAnalysisToColor(model)} ${withBackground ? backgroundColor(model) : ''} ${className} size-${size}`}
+	class={`${withBackground ? backgroundColor(model) : ''} ${className} size-${size} shrink-0`}
 	class:withBackground
 >
-	<svelte:component this={mapAnalysisToIcon(model)} />
+	{#if model === 'pipeline_halos'}
+		<Halo size={getIconSize().toString()} color={mapAnalysisToColor(model)} />
+	{:else if ['sgs_enteros'].includes(model)}
+		<Icon iconName="RadioButton" color={mapAnalysisToColor(model)} size={getIconSize()} />
+	{:else if model === 'pipeline_large_colonies' || model === 'pipeline_radial_growth'}
+		<Icon iconName="RadioButton" color={mapAnalysisToColor(model)} size={getIconSize()} />
+	{:else if model === 'pipeline_small_colonies'}
+		<Well size={getIconSize().toString()} color={mapAnalysisToColor(model)} />
+	{:else if model === 'pipeline_insects'}
+		<Icon iconName="BugBeetle" color={mapAnalysisToColor(model)} size={getIconSize()} />
+	{:else if model === 'pipeline_seed_germination'}
+		<Icon iconName="Plant" color={mapAnalysisToColor(model)} size={getIconSize()} />
+	{:else}
+		<Icon iconName="LineSegments" color={mapAnalysisToColor(model)} size={getIconSize()} />
+	{/if}
 </div>
 
 <style>

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

@@ -18,7 +18,7 @@
 	const iconNames = Object.keys(iconMap);
 </script>
 
-<Story name="All Icons">
+<Story name="All Icons" asChild>
 	<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">
@@ -34,7 +34,7 @@
 	</div>
 </Story>
 
-<Story name="Icon Sizes">
+<Story name="Icon Sizes" asChild>
 	<div class="p-4">
 		<h2 class="mb-6 text-xl font-semibold">Icon Sizes</h2>
 		<div class="flex flex-wrap items-end gap-8">
@@ -62,7 +62,7 @@
 	</div>
 </Story>
 
-<Story name="Icon Weights">
+<Story name="Icon Weights" asChild>
 	<div class="p-4">
 		<h2 class="mb-6 text-xl font-semibold">Icon Weights</h2>
 		<div class="flex flex-wrap gap-8">
@@ -94,7 +94,7 @@
 	</div>
 </Story>
 
-<Story name="Icon Colors">
+<Story name="Icon Colors" asChild>
 	<div class="p-4">
 		<h2 class="mb-6 text-xl font-semibold">Icon Colors</h2>
 		<div class="flex flex-wrap gap-8">

package/dist/components/icons/Icon.svelte

@@ -17,7 +17,7 @@
 <svelte:component
 	this={renderIcon(iconName ?? 'SealQuestion')}
 	color={color === 'inherit' ? 'currentColor' : textColor[color]}
-	class={className}
+	class={`shrink-0 ${className}`}
 	{weight}
 	width={size ? size : width}
 	height={size ? size : height}

package/dist/components/icons/PrincipalIcon.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import type { IconColor, SupportedPrincipalIcons } from '.';
+	import UsersThree from 'phosphor-svelte/lib/UsersThree';
+	import User from 'phosphor-svelte/lib/User';
+	import Buildings from 'phosphor-svelte/lib/Buildings';
+
+	type Props = {
+		principal: SupportedPrincipalIcons;
+		withBackground?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+	};
+
+	let { principal, withBackground, size = 'md', class: className }: Props = $props();
+
+	const mapPrincipalToIcon = (principal: SupportedPrincipalIcons) => {
+		switch (principal) {
+			case 'user':
+				return User;
+			case 'group':
+				return UsersThree;
+			case 'organization':
+				return Buildings;
+			default:
+				return User;
+		}
+	};
+
+	const mapPrincipalToColor = (principal: SupportedPrincipalIcons): IconColor => {
+		switch (principal) {
+			case 'user':
+				return 'icon-accent';
+			case 'group':
+				return 'lime';
+			case 'organization':
+				return 'icon-primary';
+			default:
+				return 'icon-primary';
+		}
+	};
+
+	const backgroundColor = (principal: SupportedPrincipalIcons) => {
+		switch (principal) {
+			case 'user':
+				return 'bg-accent';
+			case 'group':
+				return 'bg-lime';
+			case 'organization':
+				return 'bg-neutral';
+			default:
+				return 'bg-neutral';
+		}
+	};
+</script>
+
+<!-- svelte-ignore svelte_component_deprecated -->
+<div
+	class={`text-${mapPrincipalToColor(principal)} ${withBackground ? backgroundColor(principal) : ''} ${className} size-${size} border border-static`}
+	class:withBackground
+>
+	<svelte:component this={mapPrincipalToIcon(principal)} weight="bold" />
+</div>
+
+<style>
+	.withBackground {
+
+    display: flex;
+
+    align-items: center;
+
+    justify-content: center;
+
+    border-radius: 0.375rem
+}
+
+		.withBackground.size-sm {
+
+    height: 1.5rem;
+
+    width: 1.5rem
+}
+
+		.withBackground.size-md {
+
+    height: 2rem;
+
+    width: 2rem
+}
+
+		.withBackground.size-lg {
+
+    height: 2.5rem;
+
+    width: 2.5rem
+}
+</style>

package/dist/components/icons/PrincipalIcon.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { SupportedPrincipalIcons } from '.';
+type Props = {
+    principal: SupportedPrincipalIcons;
+    withBackground?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+};
+declare const PrincipalIcon: import("svelte").Component<Props, {}, "">;
+type PrincipalIcon = ReturnType<typeof PrincipalIcon>;
+export default PrincipalIcon;

package/dist/components/icons/custom/Halo.svelte

@@ -1,32 +1,38 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<script lang="ts">
+	import type { IconColor } from '..';
+	import { textColor } from '../../../tokens';
+
+	let { size = '16', color = 'icon-primary' }: { size?: string; color?: IconColor } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 16 16"
+	fill={textColor[color]}
+	xmlns="http://www.w3.org/2000/svg"
+>
 	<path
 		d="M5.75676 2.08573C5.74306 2.18334 5.74874 2.28269 5.77346 2.37811C5.82345 2.5705 5.94776 2.73518 6.1191 2.83596C6.29043 2.93675 6.49477 2.96539 6.68721 2.91561C7.54813 2.69363 8.45129 2.69363 9.31221 2.91561C9.40845 2.94307 9.50922 2.951 9.60857 2.93892C9.70793 2.92684 9.80386 2.89499 9.89071 2.84526C9.97757 2.79553 10.0536 2.72892 10.1143 2.64935C10.175 2.56978 10.2192 2.47887 10.2442 2.38196C10.2692 2.28506 10.2746 2.18412 10.26 2.08511C10.2455 1.98609 10.2112 1.89099 10.1593 1.80542C10.1074 1.71985 10.0389 1.64553 9.95779 1.58685C9.87672 1.52817 9.78472 1.48631 9.68721 1.46373C8.58036 1.17794 7.41906 1.17794 6.31221 1.46373C6.21677 1.48834 6.12711 1.53153 6.04837 1.59081C5.96962 1.6501 5.90334 1.72432 5.8533 1.80925C5.80327 1.89417 5.77046 1.98812 5.75676 2.08573Z"
-		fill="#F1B123"
 	/>
 	<path
 		d="M1.49596 6.19373C1.80219 5.0925 2.3828 4.08697 3.18346 3.27123C3.25245 3.20093 3.3346 3.14491 3.42524 3.10636C3.51587 3.06781 3.61321 3.0475 3.7117 3.04657C3.81019 3.04564 3.9079 3.06412 3.99924 3.10095C4.09059 3.13778 4.17379 3.19225 4.24409 3.26123C4.31438 3.33022 4.37041 3.41237 4.40895 3.50301C4.4475 3.59364 4.46782 3.69098 4.46875 3.78947C4.46968 3.88796 4.4512 3.98567 4.41437 4.07701C4.37753 4.16836 4.32307 4.25156 4.25409 4.32186C3.63135 4.95586 3.17975 5.73756 2.94159 6.59373C2.89785 6.75179 2.80352 6.89116 2.67303 6.99049C2.54254 7.08983 2.38308 7.14366 2.21909 7.14373C2.15152 7.14367 2.08427 7.13463 2.01909 7.11686C1.9241 7.09062 1.83522 7.04593 1.75752 6.98533C1.67982 6.92474 1.61482 6.84942 1.56624 6.76369C1.51766 6.67796 1.48645 6.5835 1.47439 6.4857C1.46233 6.38791 1.46966 6.28869 1.49596 6.19373Z"
-		fill="#F1B123"
 	/>
 	<path
 		d="M2.58493 8.96394C2.75673 9.05872 2.88454 9.21706 2.94096 9.40498C3.17786 10.2612 3.62816 11.0433 4.24971 11.6781C4.37681 11.8218 4.444 12.0088 4.43747 12.2005C4.43095 12.3922 4.3512 12.5742 4.21463 12.7089C4.07806 12.8436 3.89505 12.9209 3.70324 12.9248C3.51144 12.9287 3.32543 12.859 3.18346 12.73C2.3824 11.9141 1.80175 10.908 1.49596 9.80623C1.44741 9.61612 1.47529 9.41456 1.57362 9.24476C1.67195 9.07497 1.83291 8.95048 2.02197 8.89798C2.21102 8.84548 2.41313 8.86916 2.58493 8.96394Z"
-		fill="#F1B123"
 	/>
 	<path
 		d="M6.68721 13.0844C7.54809 13.3066 8.45133 13.3066 9.31221 13.0844C9.40845 13.0569 9.50922 13.049 9.60857 13.061C9.70793 13.0731 9.80386 13.105 9.89071 13.1547C9.97757 13.2044 10.0536 13.271 10.1143 13.3506C10.175 13.4302 10.2192 13.5211 10.2442 13.618C10.2692 13.7149 10.2746 13.8158 10.26 13.9149C10.2455 14.0139 10.2112 14.109 10.1593 14.1945C10.1074 14.2801 10.0389 14.3544 9.95779 14.4131C9.87672 14.4718 9.78472 14.5137 9.68721 14.5362C8.58036 14.822 7.41906 14.822 6.31221 14.5362C6.21471 14.5137 6.1227 14.4718 6.04163 14.4131C5.96055 14.3544 5.89204 14.2801 5.84013 14.1945C5.78823 14.109 5.75397 14.0139 5.73939 13.9149C5.7248 13.8158 5.73018 13.7149 5.75521 13.618C5.78024 13.5211 5.82441 13.4302 5.88512 13.3506C5.94583 13.271 6.02186 13.2044 6.10871 13.1547C6.19557 13.105 6.2915 13.0731 6.39085 13.061C6.4902 13.049 6.59097 13.0569 6.68721 13.0844Z"
-		fill="#F1B123"
 	/>
 	<path
 		d="M13.4142 8.95472C13.5866 8.85668 13.7909 8.83093 13.9822 8.88311H13.9816C14.0768 8.90907 14.1659 8.95357 14.2439 9.01405C14.3219 9.07454 14.3872 9.14982 14.436 9.23557C14.4848 9.32133 14.5163 9.41588 14.5285 9.5138C14.5407 9.61173 14.5335 9.7111 14.5072 9.80623C14.2008 10.9076 13.6203 11.9133 12.8197 12.7294C12.6803 12.8712 12.4902 12.9519 12.2913 12.9537C12.0924 12.9555 11.901 12.8781 11.7591 12.7387C11.6172 12.5993 11.5365 12.4093 11.5347 12.2104C11.533 12.0115 11.6103 11.82 11.7497 11.6781C12.3724 11.0441 12.824 10.2624 13.0622 9.40623C13.1152 9.2151 13.2418 9.05276 13.4142 8.95472Z"
-		fill="#F1B123"
 	/>
 	<path
 		d="M13.4151 7.03602C13.2433 6.94124 13.1155 6.7829 13.0591 6.59498H13.0585C12.8216 5.73874 12.3713 4.95663 11.7497 4.32186C11.675 4.25309 11.615 4.16986 11.5733 4.07721C11.5317 3.98456 11.5094 3.88442 11.5076 3.78287C11.5059 3.68132 11.5247 3.58047 11.5631 3.48643C11.6015 3.3924 11.6586 3.30714 11.7309 3.23584C11.8033 3.16453 11.8893 3.10865 11.9839 3.0716C12.0785 3.03455 12.1796 3.01709 12.2811 3.02028C12.3826 3.02347 12.4824 3.04725 12.5745 3.09017C12.6665 3.1331 12.7489 3.19427 12.8166 3.26998C13.6176 4.0859 14.1983 5.09195 14.5041 6.19373C14.5526 6.38384 14.5248 6.5854 14.4264 6.7552C14.3281 6.92499 14.1671 7.04948 13.9781 7.10198C13.789 7.15448 13.5869 7.1308 13.4151 7.03602Z"
-		fill="#F1B123"
 	/>
 	<path
 		fill-rule="evenodd"
 		clip-rule="evenodd"
 		d="M7.99976 4.25C5.92869 4.25 4.24976 5.92893 4.24976 8C4.24976 10.0711 5.92869 11.75 7.99976 11.75C10.0708 11.75 11.7498 10.0711 11.7498 8C11.7498 5.92893 10.0708 4.25 7.99976 4.25ZM5.74976 8C5.74976 6.75736 6.75712 5.75 7.99976 5.75C9.2424 5.75 10.2498 6.75736 10.2498 8C10.2498 9.24264 9.2424 10.25 7.99976 10.25C6.75712 10.25 5.74976 9.24264 5.74976 8Z"
-		fill="#F1B123"
 	/>
 </svg>

package/dist/components/icons/custom/Halo.svelte.d.ts

@@ -1,26 +1,8 @@
-export default Halo;
-type Halo = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+import type { IconColor } from '..';
+type $$ComponentProps = {
+    size?: string;
+    color?: IconColor;
 };
-declare const Halo: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-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 Halo: import("svelte").Component<$$ComponentProps, {}, "">;
+type Halo = ReturnType<typeof Halo>;
+export default Halo;

package/dist/components/icons/custom/Well.svelte

@@ -1,26 +1,34 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<script lang="ts">
+	import type { IconColor } from '..';
+	import { textColor } from '../../../tokens';
+
+	let { size = '16', color = 'icon-primary' }: { size?: string; color?: IconColor } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 16 16"
+	fill={textColor[color]}
+	xmlns="http://www.w3.org/2000/svg"
+>
 	<path
 		d="M6.5 10.25C6.5 10.6642 6.16421 11 5.75 11C5.33579 11 5 10.6642 5 10.25C5 9.83579 5.33579 9.5 5.75 9.5C6.16421 9.5 6.5 9.83579 6.5 10.25Z"
-		fill="#FF7A00"
 	/>
 	<path
 		d="M10.5 8C11.0523 8 11.5 7.55228 11.5 7C11.5 6.44772 11.0523 6 10.5 6C9.94771 6 9.5 6.44772 9.5 7C9.5 7.55228 9.94771 8 10.5 8Z"
-		fill="#FF7A00"
 	/>
 	<path
 		d="M11 10.25C11 10.9404 10.4404 11.5 9.75 11.5C9.05964 11.5 8.5 10.9404 8.5 10.25C8.5 9.55964 9.05964 9 9.75 9C10.4404 9 11 9.55964 11 10.25Z"
-		fill="#FF7A00"
 	/>
 	<path
 		fill-rule="evenodd"
 		clip-rule="evenodd"
 		d="M6.25 4.25C5.14543 4.25 4.25 5.14543 4.25 6.25C4.25 7.35457 5.14543 8.25 6.25 8.25C7.35457 8.25 8.25 7.35457 8.25 6.25C8.25 5.14543 7.35457 4.25 6.25 4.25ZM5.75 6.25C5.75 5.97386 5.97386 5.75 6.25 5.75C6.52614 5.75 6.75 5.97386 6.75 6.25C6.75 6.52614 6.52614 6.75 6.25 6.75C5.97386 6.75 5.75 6.52614 5.75 6.25Z"
-		fill="#FF7A00"
 	/>
 	<path
 		fill-rule="evenodd"
 		clip-rule="evenodd"
 		d="M1.25 7.99766C1.25127 4.27081 4.27286 1.25 8 1.25C11.7271 1.25 14.7486 4.27069 14.75 7.99743L14.75 8L14.7499 8.04138C14.7277 11.7367 11.7362 14.728 8.04081 14.7499C8.01175 14.7501 7.98269 14.75 7.95362 14.7498C4.24846 14.7249 1.25229 11.7148 1.25 8.00426L1.25 7.99766ZM8 13.25C6.96165 13.25 5.94662 12.9421 5.08326 12.3652C4.2199 11.7883 3.547 10.9684 3.14964 10.0091C2.75228 9.04978 2.64831 7.99418 2.85088 6.97578C3.05345 5.95738 3.55347 5.02191 4.28769 4.28769C5.02192 3.55346 5.95738 3.05345 6.97578 2.85088C7.30274 2.78584 7.63354 2.7524 7.96375 2.75012L8 2.75L8.03076 2.75009C8.70653 2.75405 9.3786 2.88848 10.0091 3.14963C10.9684 3.54699 11.7883 4.2199 12.3652 5.08326C12.9348 5.93567 13.2422 6.93595 13.2499 7.96054L13.25 8C13.2485 9.39193 12.6949 10.7264 11.7107 11.7107C10.7264 12.6949 9.39193 13.2485 8 13.25Z"
-		fill="#FF7A00"
 	/>
 </svg>

package/dist/components/icons/custom/Well.svelte.d.ts

@@ -1,26 +1,8 @@
-export default Well;
-type Well = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+import type { IconColor } from '..';
+type $$ComponentProps = {
+    size?: string;
+    color?: IconColor;
 };
-declare const Well: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-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 Well: import("svelte").Component<$$ComponentProps, {}, "">;
+type Well = ReturnType<typeof Well>;
+export default Well;

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

@@ -2,11 +2,12 @@ import type { IconComponentProps } from 'phosphor-svelte';
 import type { Component } from 'svelte';
 import type { textColor } from './../../tokens';
 export type PhosphorIconProps = Component<IconComponentProps, object, ''>;
-export type IconName = 'ArrowFatLineRight' | 'ArrowRight' | 'ArrowUpRight' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'Calendar' | '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' | 'LineSegments' | 'List' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'Moon' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Question' | 'RadioButton' | 'SealQuestion' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'TestTube' | 'Trash' | 'TrashSimple' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
+export type IconName = 'Aperture' | 'ArrowFatLineRight' | 'ArrowCounterClockwise' | 'ArrowRight' | 'ArrowUpRight' | 'ArrowUpLeft' | 'ArrowUUpLeft' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'BugBeetle' | 'Calendar' | 'CalendarBlank' | 'Camera' | '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' | 'LineSegments' | 'List' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Question' | 'SealCheck' | 'RadioButton' | 'SealQuestion' | 'SealWarning' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SignIn' | 'SignOut' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'Target' | 'TestTube' | 'Trash' | 'TrashSimple' | 'UserCircle' | '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 type SupportedAnalysisModelIcons = 'pipeline_halos' | 'pipeline_large_colonies' | 'pipeline_microbial_colonies' | 'pipeline_small_colonies' | 'sgs_enteros' | 'general_germination_rate_with_tracking' | 'general_germination_rate_without_tracking' | 'pipeline_insects' | '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 type SupportedPrincipalIcons = 'user' | 'group' | 'organization';
 export { default as Icon } from './Icon.svelte';
 export type IconProps = {
     iconName: IconName;

package/dist/components/icons/index.js

@@ -1,13 +1,19 @@
+import Aperture from 'phosphor-svelte/lib/Aperture';
 import ArrowFatLineRight from 'phosphor-svelte/lib/ArrowFatLineRight';
+import ArrowCounterClockwise from 'phosphor-svelte/lib/ArrowCounterClockwise';
 import ArrowRight from 'phosphor-svelte/lib/ArrowRight';
 import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
+import ArrowUpLeft from 'phosphor-svelte/lib/ArrowUpLeft';
+import ArrowUUpLeft from 'phosphor-svelte/lib/ArrowUUpLeft';
 import Barcode from 'phosphor-svelte/lib/Barcode';
 import Bell from 'phosphor-svelte/lib/Bell';
 import BookOpen from 'phosphor-svelte/lib/BookOpen';
 import BookOpenText from 'phosphor-svelte/lib/BookOpenText';
 import BowlingBall from 'phosphor-svelte/lib/BowlingBall';
+import BugBeetle from 'phosphor-svelte/lib/BugBeetle';
 import Calendar from 'phosphor-svelte/lib/Calendar';
 import CalendarBlank from 'phosphor-svelte/lib/CalendarBlank';
+import Camera from 'phosphor-svelte/lib/CameraSlash';
 import CameraSlash from 'phosphor-svelte/lib/CameraSlash';
 import CaretDown from 'phosphor-svelte/lib/CaretDown';
 import CaretLeft from 'phosphor-svelte/lib/CaretLeft';
@@ -58,7 +64,9 @@ import List from 'phosphor-svelte/lib/List';
 import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
 import MegaphoneSimple from 'phosphor-svelte/lib/MegaphoneSimple';
 import Moon from 'phosphor-svelte/lib/Moon';
+import Minus from 'phosphor-svelte/lib/Minus';
 import Pause from 'phosphor-svelte/lib/Pause';
+import Palette from 'phosphor-svelte/lib/Palette';
 import Pencil from 'phosphor-svelte/lib/Pencil';
 import PencilSimple from 'phosphor-svelte/lib/PencilSimple';
 import Percent from 'phosphor-svelte/lib/Percent';
@@ -68,11 +76,15 @@ import Play from 'phosphor-svelte/lib/Play';
 import Plus from 'phosphor-svelte/lib/Plus';
 import PlusMinus from 'phosphor-svelte/lib/PlusMinus';
 import Question from 'phosphor-svelte/lib/Question';
+import SealCheck from 'phosphor-svelte/lib/SealCheck';
 import RadioButton from 'phosphor-svelte/lib/RadioButton';
 import SealQuestion from 'phosphor-svelte/lib/SealQuestion';
+import SealWarning from 'phosphor-svelte/lib/SealWarning';
 import SelectionAll from 'phosphor-svelte/lib/SelectionAll';
 import Share from 'phosphor-svelte/lib/Share';
 import SidebarSimple from 'phosphor-svelte/lib/SidebarSimple';
+import SignIn from 'phosphor-svelte/lib/SignIn';
+import SignOut from 'phosphor-svelte/lib/SignOut';
 import SkipBack from 'phosphor-svelte/lib/SkipBack';
 import SkipForward from 'phosphor-svelte/lib/SkipForward';
 import SortAscending from 'phosphor-svelte/lib/SortAscending';
@@ -85,6 +97,7 @@ import StopCircle from 'phosphor-svelte/lib/StopCircle';
 import Sun from 'phosphor-svelte/lib/Sun';
 import Table from 'phosphor-svelte/lib/Table';
 import Tag from 'phosphor-svelte/lib/Tag';
+import Target from 'phosphor-svelte/lib/Target';
 import TestTube from 'phosphor-svelte/lib/TestTube';
 import Trash from 'phosphor-svelte/lib/Trash';
 import TrashSimple from 'phosphor-svelte/lib/TrashSimple';
@@ -96,16 +109,22 @@ import WarningCircle from 'phosphor-svelte/lib/WarningCircle';
 import WifiSlash from 'phosphor-svelte/lib/WifiSlash';
 import X from 'phosphor-svelte/lib/X';
 export const iconMap = {
+    Aperture,
     ArrowFatLineRight,
+    ArrowCounterClockwise,
     ArrowRight,
     ArrowUpRight,
+    ArrowUpLeft,
+    ArrowUUpLeft,
     Barcode,
     Bell,
     BookOpen,
     BookOpenText,
     BowlingBall,
+    BugBeetle,
     Calendar,
     CalendarBlank,
+    Camera,
     CameraSlash,
     CaretDown,
     CaretLeft,
@@ -156,6 +175,8 @@ export const iconMap = {
     MagnifyingGlass,
     MegaphoneSimple,
     Moon,
+    Minus,
+    Palette,
     Pause,
     Pencil,
     PencilSimple,
@@ -167,10 +188,14 @@ export const iconMap = {
     PlusMinus,
     RadioButton,
     Question,
+    SealCheck,
     SealQuestion,
+    SealWarning,
     SelectionAll,
     Share,
     SidebarSimple,
+    SignIn,
+    SignOut,
     SkipBack,
     SkipForward,
     SortAscending,
@@ -183,6 +208,7 @@ export const iconMap = {
     Sun,
     Table,
     Tag,
+    Target,
     TestTube,
     Trash,
     TrashSimple,