@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/icons/AnalysisIcon.svelte

@@ -1,104 +1,104 @@
 <script lang="ts">
-	import Icon from './Icon.svelte';
-	import Well from './custom/Well.svelte';
-	import Halo from './custom/Halo.svelte';
-	import type { IconColor, SupportedAnalysisModelIcons } from '.';
-
-	type Props = {
-		model: SupportedAnalysisModelIcons;
-		withBackground?: boolean;
-		size?: 'sm' | 'md' | 'lg';
-		class?: string;
-		disabled?: boolean;
-	};
-
-	let { model, withBackground, size = 'md', class: className, disabled = false }: Props = $props();
-
-	const getIconSize = () => {
-		switch (size) {
-			case 'sm':
-				return 14;
-			case 'lg':
-				return 20;
-			default:
-				return 16;
-		}
-	};
-
-	const backgroundColor = (analysis: SupportedAnalysisModelIcons) => {
-		if (disabled) {
-			return 'bg-neutral';
-		}
-
-		switch (analysis) {
-			case 'pipeline_halos':
-				return 'bg-warning';
-			case 'pipeline_large_colonies':
-			case 'pipeline_radial_growth':
-				return 'bg-accent';
-			case 'sgs_enteros':
-				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 'bg-success';
-			default:
-				return 'bg-neutral';
-		}
-	};
-
-	const mapAnalysisToColor = (analysis: SupportedAnalysisModelIcons): IconColor => {
-		if (disabled) {
-			return 'secondary';
-		}
-
-		switch (analysis) {
-			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':
-				return 'lilac';
-			case 'pipeline_insects':
-				return 'orange';
-			case 'pipeline_seed_germination':
-				return 'success';
-			default:
-				return 'secondary';
-		}
-	};
+  import Icon from './Icon.svelte';
+  import Well from './custom/Well.svelte';
+  import Halo from './custom/Halo.svelte';
+  import type { IconColor, SupportedAnalysisModelIcons } from '.';
+
+  type Props = {
+    model: SupportedAnalysisModelIcons;
+    withBackground?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    disabled?: boolean;
+  };
+
+  let { model, withBackground, size = 'md', class: className, disabled = false }: Props = $props();
+
+  const getIconSize = () => {
+    switch (size) {
+      case 'sm':
+        return 14;
+      case 'lg':
+        return 20;
+      default:
+        return 16;
+    }
+  };
+
+  const backgroundColor = (analysis: SupportedAnalysisModelIcons) => {
+    if (disabled) {
+      return 'bg-neutral';
+    }
+
+    switch (analysis) {
+      case 'pipeline_halos':
+        return 'bg-warning';
+      case 'pipeline_large_colonies':
+      case 'pipeline_radial_growth':
+        return 'bg-accent';
+      case 'sgs_enteros':
+        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 'bg-success';
+      default:
+        return 'bg-neutral';
+    }
+  };
+
+  const mapAnalysisToColor = (analysis: SupportedAnalysisModelIcons): IconColor => {
+    if (disabled) {
+      return 'secondary';
+    }
+
+    switch (analysis) {
+      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':
+        return 'lilac';
+      case 'pipeline_insects':
+        return 'orange';
+      case 'pipeline_seed_germination':
+        return 'success';
+      default:
+        return 'secondary';
+    }
+  };
 </script>
 
 <div
-	class={`${withBackground ? backgroundColor(model) : ''} ${className} size-${size} shrink-0`}
-	class:withBackground
+  class={`${withBackground ? backgroundColor(model) : ''} ${className} size-${size} shrink-0`}
+  class:withBackground
 >
-	{#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}
+  {#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>
-	.withBackground {
+  .withBackground {
 
     display: flex;
 
@@ -109,21 +109,21 @@
     border-radius: 0.375rem
 }
 
-		.withBackground.size-sm {
+    .withBackground.size-sm {
 
     height: 1.5rem;
 
     width: 1.5rem
 }
 
-		.withBackground.size-md {
+    .withBackground.size-md {
 
     height: 2rem;
 
     width: 2rem
 }
 
-		.withBackground.size-lg {
+    .withBackground.size-lg {
 
     height: 2.5rem;
 

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

@@ -1,127 +1,127 @@
 <script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Icon, iconMap, type IconName } from './index';
+  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'
-			}
-		}
-	});
+  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);
+  // Get all icon names from the iconMap
+  const iconNames = Object.keys(iconMap);
 </script>
 
 <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">
-			{#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>
+  <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" 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">
-			<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>
+  <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" asChild>
-	<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>
+  <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" asChild>
-	<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>
+  <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.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">
-	import { textColor } from '../../tokens';
-	import { renderIcon, type IconProps } from './index';
+  import { textColor } from '../../tokens';
+  import { renderIcon, type IconProps } from './index';
 
-	let {
-		iconName,
-		color = 'inherit',
-		weight = 'bold',
-		width = 16,
-		height = 16,
-		size,
-		class: className
-	}: IconProps = $props();
+  let {
+    iconName,
+    color = 'inherit',
+    weight = 'bold',
+    width = 16,
+    height = 16,
+    size,
+    class: className,
+  }: IconProps = $props();
 </script>
 
 <!-- svelte-ignore svelte_component_deprecated -->
 <svelte:component
-	this={renderIcon(iconName ?? 'SealQuestion')}
-	color={color === 'inherit' ? 'currentColor' : textColor[color]}
-	class={`shrink-0 ${className}`}
-	{weight}
-	width={size ? size : width}
-	height={size ? size : height}
+  this={renderIcon(iconName ?? 'SealQuestion')}
+  color={color === 'inherit' ? 'currentColor' : textColor[color]}
+  class={`shrink-0 ${className}`}
+  {weight}
+  width={size ? size : width}
+  height={size ? size : height}
 />

package/dist/components/icons/PrincipalIcon.svelte

@@ -1,68 +1,68 @@
 <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';
-		}
-	};
+  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
+  class={`text-${mapPrincipalToColor(principal)} ${withBackground ? backgroundColor(principal) : ''} ${className} size-${size} border border-static`}
+  class:withBackground
 >
-	<svelte:component this={mapPrincipalToIcon(principal)} weight="bold" />
+  <svelte:component this={mapPrincipalToIcon(principal)} weight="bold" />
 </div>
 
 <style>
-	.withBackground {
+  .withBackground {
 
     display: flex;
 
@@ -73,21 +73,21 @@
     border-radius: 0.375rem
 }
 
-		.withBackground.size-sm {
+    .withBackground.size-sm {
 
     height: 1.5rem;
 
     width: 1.5rem
 }
 
-		.withBackground.size-md {
+    .withBackground.size-md {
 
     height: 2rem;
 
     width: 2rem
 }
 
-		.withBackground.size-lg {
+    .withBackground.size-lg {
 
     height: 2.5rem;