@reshape-biotech/design-system 0.0.48 → 0.0.50

package/dist/components/icons/index.js

@@ -1,18 +1,184 @@
+import ArrowFatLineRight from 'phosphor-svelte/lib/ArrowFatLineRight';
+import ArrowRight from 'phosphor-svelte/lib/ArrowRight';
+import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
+import Barcode from 'phosphor-svelte/lib/Barcode';
+import BookOpen from 'phosphor-svelte/lib/BookOpen';
+import BookOpenText from 'phosphor-svelte/lib/BookOpenText';
 import BowlingBall from 'phosphor-svelte/lib/BowlingBall';
+import CalendarBlank from 'phosphor-svelte/lib/CalendarBlank';
+import CameraSlash from 'phosphor-svelte/lib/CameraSlash';
+import CaretDown from 'phosphor-svelte/lib/CaretDown';
+import CaretLeft from 'phosphor-svelte/lib/CaretLeft';
+import CaretRight from 'phosphor-svelte/lib/CaretRight';
+import CaretUp from 'phosphor-svelte/lib/CaretUp';
+import CaretUpDown from 'phosphor-svelte/lib/CaretUpDown';
+import ChatTeardropDots from 'phosphor-svelte/lib/ChatTeardropDots';
+import Check from 'phosphor-svelte/lib/Check';
 import CheckCircle from 'phosphor-svelte/lib/CheckCircle';
+import CheckFat from 'phosphor-svelte/lib/CheckFat';
 import Circle from 'phosphor-svelte/lib/Circle';
+import CircleDashed from 'phosphor-svelte/lib/CircleDashed';
+import CircleHalf from 'phosphor-svelte/lib/CircleHalf';
+import CirclesFour from 'phosphor-svelte/lib/CirclesFour';
+import CirclesThreePlus from 'phosphor-svelte/lib/CirclesThreePlus';
+import Clock from 'phosphor-svelte/lib/Clock';
+import ClockCountdown from 'phosphor-svelte/lib/ClockCountdown';
+import Copy from 'phosphor-svelte/lib/Copy';
+import Crop from 'phosphor-svelte/lib/Crop';
+import Cube from 'phosphor-svelte/lib/Cube';
+import Database from 'phosphor-svelte/lib/Database';
+import DotsThree from 'phosphor-svelte/lib/DotsThree';
+import DotsThreeOutlineVertical from 'phosphor-svelte/lib/DotsThreeOutlineVertical';
+import DownloadSimple from 'phosphor-svelte/lib/DownloadSimple';
+import Drop from 'phosphor-svelte/lib/Drop';
+import EnvelopeSimple from 'phosphor-svelte/lib/EnvelopeSimple';
+import Eye from 'phosphor-svelte/lib/Eye';
+import Eyedropper from 'phosphor-svelte/lib/Eyedropper';
+import FileCsv from 'phosphor-svelte/lib/FileCsv';
+import Flag from 'phosphor-svelte/lib/Flag';
+import Flask from 'phosphor-svelte/lib/Flask';
+import Folder from 'phosphor-svelte/lib/Folder';
+import FolderDashed from 'phosphor-svelte/lib/FolderDashed';
+import FolderSimplePlus from 'phosphor-svelte/lib/FolderSimplePlus';
+import FunnelSimple from 'phosphor-svelte/lib/FunnelSimple';
+import Gear from 'phosphor-svelte/lib/Gear';
+import GlobeSimple from 'phosphor-svelte/lib/GlobeSimple';
+import GlobeSimpleX from 'phosphor-svelte/lib/GlobeSimpleX';
+import GridFour from 'phosphor-svelte/lib/GridFour';
+import Hash from 'phosphor-svelte/lib/Hash';
+import House from 'phosphor-svelte/lib/House';
+import ImageSquare from 'phosphor-svelte/lib/ImageSquare';
+import ImagesSquare from 'phosphor-svelte/lib/ImagesSquare';
+import Info from 'phosphor-svelte/lib/Info';
+import Lock from 'phosphor-svelte/lib/Lock';
+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 Pause from 'phosphor-svelte/lib/Pause';
+import Pencil from 'phosphor-svelte/lib/Pencil';
+import PencilSimple from 'phosphor-svelte/lib/PencilSimple';
+import Percent from 'phosphor-svelte/lib/Percent';
+import Phone from 'phosphor-svelte/lib/Phone';
+import Plant from 'phosphor-svelte/lib/Plant';
+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 SealQuestion from 'phosphor-svelte/lib/SealQuestion';
-import X from 'phosphor-svelte/lib/X';
+import Share from 'phosphor-svelte/lib/Share';
+import SidebarSimple from 'phosphor-svelte/lib/SidebarSimple';
+import SkipBack from 'phosphor-svelte/lib/SkipBack';
+import SkipForward from 'phosphor-svelte/lib/SkipForward';
+import Sparkle from 'phosphor-svelte/lib/Sparkle';
+import SpinnerGap from 'phosphor-svelte/lib/SpinnerGap';
+import SquaresFour from 'phosphor-svelte/lib/SquaresFour';
+import Star from 'phosphor-svelte/lib/Star';
+import Stop from 'phosphor-svelte/lib/Stop';
+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 TestTube from 'phosphor-svelte/lib/TestTube';
+import Trash from 'phosphor-svelte/lib/Trash';
+import TrashSimple from 'phosphor-svelte/lib/TrashSimple';
+import UserPlus from 'phosphor-svelte/lib/UserPlus';
+import Video from 'phosphor-svelte/lib/Video';
 import Warning from 'phosphor-svelte/lib/Warning';
 import WarningCircle from 'phosphor-svelte/lib/WarningCircle';
+import WifiSlash from 'phosphor-svelte/lib/WifiSlash';
+import X from 'phosphor-svelte/lib/X';
 export const iconMap = {
+    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,
-    CheckCircle,
-    X,
+    Share,
+    SidebarSimple,
+    SkipBack,
+    SkipForward,
+    Sparkle,
+    SpinnerGap,
+    SquaresFour,
+    Star,
+    Stop,
+    StopCircle,
+    Sun,
+    Table,
+    Tag,
+    TestTube,
+    Trash,
+    TrashSimple,
+    UserPlus,
+    Video,
     Warning,
-    WarningCircle
+    WarningCircle,
+    WifiSlash,
+    X
 };
 export function renderIcon(iconName) {
     const Icon = iconMap[iconName];

package/dist/components/input/Input.stories.svelte

@@ -6,7 +6,13 @@
 	const { Story } = defineMeta({
 		component: Input,
 		title: 'Design System/Input',
-		tags: ['autodocs']
+		tags: ['autodocs'],
+		parameters: {
+			design: {
+				type: 'figma',
+				url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=9-3169&t=sCuBI8dX6K6NjNR6-0'
+			}
+		}
 	});
 
 	let value = '';

package/dist/components/list/List.stories.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
 	import List from './List.svelte';
 	import Tag from '../tag/Tag.svelte';
-	import { ArrowUpRight } from 'phosphor-svelte';
 	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Icon } from '../icons';
 
 	const { Story } = defineMeta({
 		component: List,
@@ -43,7 +43,7 @@
 							>
 								Repository
 							</a>
-							<ArrowUpRight />
+							<Icon iconName="ArrowUpRight" />
 						</div>
 					{/if}
 				</div>
@@ -77,7 +77,7 @@
 							>
 								Repository
 							</a>
-							<ArrowUpRight />
+							<Icon iconName="ArrowUpRight" />
 						</div>
 					{/if}
 				</div>

package/dist/components/modal/Modal.svelte

@@ -2,7 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import { v4 as uuidv4 } from 'uuid';
 	import IconButton from '../icon-button/IconButton.svelte';
-	import { X } from 'phosphor-svelte';
+	import { Icon } from '../icons';
 
 	type ModalProps = {
 		Trigger?: Snippet<[{ openModal: () => void; closeModal: () => void }]>;
@@ -46,7 +46,7 @@
 		{#if withClose}
 			<div class="close-button">
 				<IconButton onclick={closeModal} size="md" variant="secondary">
-					<X />
+					<Icon iconName="X" />
 				</IconButton>
 			</div>
 		{/if}

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>