@reshape-biotech/design-system 1.1.1 → 1.2.0

package/dist/components/activity/Activity.svelte

@@ -12,7 +12,9 @@
 		| 'start'
 		| 'stop'
 		| 'warning'
-		| 'success';
+		| 'success'
+		| 'export-succeeded'
+		| 'export-failed';
 
 	type Activity = {
 		activity_type?: string;
@@ -40,7 +42,9 @@
 		start: 'Play',
 		stop: 'Stop',
 		warning: 'Warning',
-		success: 'Check'
+		success: 'Check',
+		'export-succeeded': 'DownloadSimple',
+		'export-failed': 'DownloadSimple'
 	};
 
 	const ACTIVITY_COLOR: Record<ActivityIcon, IconColor> = {
@@ -53,7 +57,9 @@
 		start: 'icon-secondary',
 		stop: 'icon-secondary',
 		warning: 'icon-warning',
-		success: 'icon-secondary'
+		success: 'icon-secondary',
+		'export-succeeded': 'icon-secondary',
+		'export-failed': 'icon-danger'
 	};
 
 	const ACTIVITY_BACKGROUND: Record<ActivityIcon, BackgroundClass> = {
@@ -66,7 +72,9 @@
 		start: 'bg-neutral',
 		stop: 'bg-neutral',
 		warning: 'bg-warning',
-		success: 'bg-neutral'
+		success: 'bg-neutral',
+		'export-succeeded': 'bg-neutral',
+		'export-failed': 'bg-danger'
 	};
 
 	function formatDateTime(timestamp: string): string {

package/dist/components/activity/Activity.svelte.d.ts

@@ -1,4 +1,4 @@
-type ActivityIcon = 'add' | 'capture' | 'delete' | 'edit' | 'failed' | 'pause' | 'start' | 'stop' | 'warning' | 'success';
+type ActivityIcon = 'add' | 'capture' | 'delete' | 'edit' | 'failed' | 'pause' | 'start' | 'stop' | 'warning' | 'success' | 'export-succeeded' | 'export-failed';
 type Activity = {
     activity_type?: string;
     icon: ActivityIcon;

package/dist/components/banner/Banner.svelte

@@ -29,7 +29,7 @@
 </script>
 
 {#if show}
-	<div class="rounded-lg bg-{color} flex h-11 w-full items-center justify-between p-3">
+	<div class="rounded-lg bg-{color} flex w-full items-center justify-between p-3">
 		<div class="inline-flex w-full items-center justify-start gap-3">
 			{#if icon}
 				<div class="flex size-5 items-center justify-center text-icon-{color} ">

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

@@ -4,7 +4,6 @@
 	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({
@@ -19,6 +18,8 @@
 		}
 	});
 
+	const staticDate = DateTime.local(2023, 10, 15);
+
 	let selectedDate = $state<DateTime | undefined>(undefined);
 	let loggedDate = $state<string | undefined>(undefined);
 
@@ -51,7 +52,7 @@
 
 <Story name="Default" args={{ selectedDate: undefined }} />
 
-<Story name="With Selected Date" args={{ selectedDate: DateTime.local(2023, 10, 15) }} />
+<Story name="With Selected Date" args={{ selectedDate: staticDate }} />
 
 <Story name="With Date Change Handler" asChild>
 	<div class="p-4">
@@ -68,7 +69,7 @@
 
 <Story name="Month Navigation" asChild>
 	<div class="p-4">
-		<DatePicker selectedDate={DateTime.local()} />
+		<DatePicker selectedDate={staticDate} />
 		<div class="mt-4 text-sm text-tertiary">
 			<p>Click the arrow buttons to navigate between months</p>
 		</div>
@@ -117,11 +118,11 @@
 	<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 })} />
+			<DatePicker selectedDate={staticDate.minus({ days: 7 })} />
 		</div>
 		<div>
 			<h3 class="mb-2 text-sm font-medium">End Date</h3>
-			<DatePicker selectedDate={DateTime.local()} />
+			<DatePicker selectedDate={staticDate} />
 		</div>
 	</div>
 </Story>

package/dist/components/datepicker/DatePicker.svelte

@@ -140,6 +140,7 @@
 											{#if dayOfMonth === currentDay && shownMonth === currentMonth && shownYear === currentYear && dayOfMonth != selectedDay}
 												<svg
 													class="current-date-indicator text-accent"
+													data-chromatic="ignore"
 													xmlns="http://www.w3.org/2000/svg"
 													width="4"
 													height="4"

package/dist/components/graphs/bar-chart/BarChart.stories.svelte

@@ -79,3 +79,41 @@
 	name="Empty Data"
 	args={{ data: [], xAxisName: 'category', yAxisName: 'Value', height: '400px' }}
 />
+
+<Story
+	name="With Capture Interval"
+	args={{
+		data: [
+			{ category: '0', value: 10 },
+			{ category: '1', value: 20 },
+			{ category: '2', value: 15 },
+			{ category: '3', value: 25 },
+			{ category: '4', value: 30 },
+			{ category: '5', value: 18 },
+			{ category: '6', value: 22 }
+		],
+		xAxisName: 'category',
+		yAxisName: 'Value',
+		height: '400px',
+		captureInterval: 3600
+	}}
+/>
+
+<Story
+	name="With Capture Interval - Short Duration"
+	args={{
+		data: [
+			{ category: '0', value: 10 },
+			{ category: '1', value: 20 },
+			{ category: '2', value: 15 },
+			{ category: '3', value: 25 },
+			{ category: '4', value: 30 },
+			{ category: '5', value: 18 },
+			{ category: '6', value: 22 }
+		],
+		xAxisName: 'category',
+		yAxisName: 'Value',
+		height: '400px',
+		captureInterval: 600
+	}}
+/>

package/dist/components/graphs/bar-chart/BarChart.svelte

@@ -3,6 +3,7 @@
 	import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
 	import type { EChartsOption, BarSeriesOption } from 'echarts';
 	import { createTooltipFormatter } from '../utils/tooltipFormatter';
+	import { Duration } from 'luxon';
 
 	type DataItem = {
 		value: number;
@@ -14,6 +15,7 @@
 		colors?: Record<string, string>; // Optional: Color mapping per x-axis category
 		rotateXAxisLabels?: boolean;
 		grid?: EChartsOption['grid'];
+		captureInterval?: number;
 	}
 
 	let {
@@ -22,6 +24,7 @@
 		rotateXAxisLabels = false,
 		xAxisName,
 		yAxisName,
+		captureInterval,
 		...props
 	}: BarChartProps = $props();
 
@@ -38,6 +41,16 @@
 
 	const xAxisData = $derived(data.map((item) => item[xAxisName]));
 
+	const captureIntervals = captureInterval
+		? Array(data.length)
+				.fill(null)
+				.map((_, timeIndex) => {
+					const seconds = timeIndex * captureInterval;
+					const duration = Duration.fromObject({ seconds }).shiftTo('days', 'hours', 'minutes');
+					return duration.days >= 1 ? duration.toFormat('dd:hh:mm') : duration.toFormat('hh:mm');
+				})
+		: undefined;
+
 	const createBarDataItem = (value: number | null, color: string) => ({
 		value,
 		itemStyle: {
@@ -94,7 +107,7 @@
 			},
 			xAxis: {
 				type: 'category',
-				data: xAxisData,
+				data: captureIntervals || xAxisData,
 				axisTick: {
 					show: false,
 					alignWithLabel: true

package/dist/components/graphs/bar-chart/BarChart.svelte.d.ts

@@ -9,6 +9,7 @@ interface BarChartProps extends Omit<GenericChartProps, 'timeIndex'> {
     colors?: Record<string, string>;
     rotateXAxisLabels?: boolean;
     grid?: EChartsOption['grid'];
+    captureInterval?: number;
 }
 declare const BarChart: import("svelte").Component<BarChartProps, {}, "">;
 type BarChart = ReturnType<typeof BarChart>;

package/dist/components/graphs/bar-chart/StackedBarChart.stories.svelte

@@ -40,3 +40,35 @@
 		yAxisName: 'Count'
 	}}
 />
+
+<Story
+	name="With Capture Interval"
+	args={{
+		xAxisCategories: ['0', '1', '2', '3', '4', '5', '6'],
+		series: [
+			{ name: 'Halo', data: [120, 132, 101, 134, 90, 230, 210] },
+			{ name: 'Spot', data: [220, 182, 191, 234, 290, 330, 310] },
+			{ name: 'Microbial', data: [150, 232, 201, 154, 190, 330, 410] }
+		],
+		height: '400px',
+		xAxisName: 'Time',
+		yAxisName: 'Count',
+		captureInterval: 3600
+	}}
+/>
+
+<Story
+	name="With Capture Interval - Short Duration"
+	args={{
+		xAxisCategories: ['0', '1', '2', '3', '4', '5', '6'],
+		series: [
+			{ name: 'Halo', data: [120, 132, 101, 134, 90, 230, 210] },
+			{ name: 'Spot', data: [220, 182, 191, 234, 290, 330, 310] },
+			{ name: 'Microbial', data: [150, 232, 201, 154, 190, 330, 410] }
+		],
+		height: '400px',
+		xAxisName: 'Time',
+		yAxisName: 'Count',
+		captureInterval: 600
+	}}
+/>

package/dist/components/graphs/bar-chart/StackedBarChart.svelte

@@ -3,25 +3,28 @@
 	import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
 	import type { EChartsOption, BarSeriesOption } from 'echarts';
 	import type { CallbackDataParams } from 'echarts/types/dist/shared';
+	import { Duration } from 'luxon';
 
 	type StackedSeriesItem = {
 		name: string;
 		data: (number | null)[];
 	};
 
-	type StackedBarChartProps = {
+	interface StackedBarChartProps extends GenericChartProps {
 		xAxisCategories: (string | number)[];
 		series: StackedSeriesItem[];
 		colors?: Record<string, string>; // Optional: Color mapping per series name
 		rotateXAxisLabels?: boolean;
 		grid?: EChartsOption['grid'];
-	} & Omit<GenericChartProps, 'timeIndex'>;
+		captureInterval?: number;
+	}
 
 	let {
 		xAxisCategories,
 		series,
 		colors,
 		rotateXAxisLabels = false,
+		captureInterval,
 		...props
 	}: StackedBarChartProps = $props();
 
@@ -38,6 +41,16 @@
 
 	const xAxisData = $derived(xAxisCategories);
 
+	const captureIntervals = captureInterval
+		? Array(xAxisCategories.length)
+				.fill(null)
+				.map((_, timeIndex) => {
+					const seconds = timeIndex * captureInterval;
+					const duration = Duration.fromObject({ seconds }).shiftTo('days', 'hours', 'minutes');
+					return duration.days >= 1 ? duration.toFormat('dd:hh:mm') : duration.toFormat('hh:mm');
+				})
+		: undefined;
+
 	const createBarDataItem = (value: number | null, color: string) => ({
 		value,
 		itemStyle: {
@@ -135,7 +148,7 @@
 			},
 			xAxis: {
 				type: 'category',
-				data: xAxisData,
+				data: captureIntervals || xAxisData,
 				axisTick: {
 					show: false,
 					alignWithLabel: true

package/dist/components/graphs/bar-chart/StackedBarChart.svelte.d.ts

@@ -4,13 +4,14 @@ type StackedSeriesItem = {
     name: string;
     data: (number | null)[];
 };
-type StackedBarChartProps = {
+interface StackedBarChartProps extends GenericChartProps {
     xAxisCategories: (string | number)[];
     series: StackedSeriesItem[];
     colors?: Record<string, string>;
     rotateXAxisLabels?: boolean;
     grid?: EChartsOption['grid'];
-} & Omit<GenericChartProps, 'timeIndex'>;
+    captureInterval?: number;
+}
 declare const StackedBarChart: import("svelte").Component<StackedBarChartProps, {}, "">;
 type StackedBarChart = ReturnType<typeof StackedBarChart>;
 export default StackedBarChart;

package/dist/components/graphs/chart/Chart.stories.svelte

@@ -54,9 +54,6 @@
 <!-- Custom Size -->
 <Story name="Custom Size" args={{ options: baseOptions, ...defaultProps }} />
 
-<!-- Loading State -->
-<Story name="Loading State" args={{ options: baseOptions, ...defaultProps, loading: true }} />
-
 <!-- With Events -->
 <Story
 	name="With Click Events"

package/dist/components/graphs/line/LineChart.stories.svelte

@@ -51,19 +51,7 @@
 		/>
 	</div>
 </Story>
-<Story name="Loading" asChild>
-	<div class="h-[400px] w-full">
-		<LineChart
-			{xAxisName}
-			{yAxisName}
-			{data}
-			loading
-			onitemclick={handleItemClick}
-			onmouseover={handleMouseOver}
-			onmouseout={handleMouseOut}
-		/>
-	</div>
-</Story>
+
 <Story name="Large datasets with capture intervals" asChild>
 	<div class="h-[400px] w-full">
 		<LineChart
@@ -121,6 +109,26 @@
 		<LineChart {xAxisName} yAxisName="Value" data={[10, 8, 13, 7, 9, 6, 11]} timeIndex={3} />
 	</div>
 </Story>
+<Story name="With Capture Interval" asChild>
+	<div class="h-[400px] w-full">
+		<LineChart
+			{xAxisName}
+			yAxisName="Value"
+			data={[10, 8, 13, 7, 9, 6, 11, 15, 12, 8, 14, 16]}
+			captureInterval={3600}
+		/>
+	</div>
+</Story>
+<Story name="With Capture Interval - Short Duration" asChild>
+	<div class="h-[400px] w-full">
+		<LineChart
+			{xAxisName}
+			yAxisName="Value"
+			data={[10, 8, 13, 7, 9, 6, 11, 15, 12, 8, 14, 16]}
+			captureInterval={600}
+		/>
+	</div>
+</Story>
 <Story
 	name="Interactive Current Location"
 	asChild

package/dist/components/graphs/line/LineChart.svelte

@@ -5,12 +5,14 @@
 	import * as echarts from 'echarts/core';
 	import type { GenericChartProps } from '../chart/Chart.svelte';
 	import { createTooltipFormatter } from '../utils/tooltipFormatter';
+	import { Duration } from 'luxon';
 
 	interface LineChartProps extends GenericChartProps {
 		data: (number | null)[];
 		withArea?: boolean;
 		color?: string;
 		grid?: EChartsOption['grid'];
+		captureInterval?: number;
 	}
 
 	let {
@@ -19,6 +21,7 @@
 		yAxisName,
 		withArea = false,
 		color = textColor['icon-blue'],
+		captureInterval,
 		...props
 	}: LineChartProps = $props();
 
@@ -37,6 +40,16 @@
 			maximumFractionDigits: fractionDigits
 		}) ?? '';
 
+	const captureIntervals = captureInterval
+		? Array(data.length)
+				.fill(null)
+				.map((_, timeIndex) => {
+					const seconds = timeIndex * captureInterval;
+					const duration = Duration.fromObject({ seconds }).shiftTo('days', 'hours', 'minutes');
+					return duration.days >= 1 ? duration.toFormat('dd:hh:mm') : duration.toFormat('hh:mm');
+				})
+		: undefined;
+
 	let options: EChartsOption = $derived({
 		grid: {
 			top: 10,
@@ -55,26 +68,7 @@
 			axisLine: {
 				onZero: false
 			},
-			axisLabel: {
-				interval: (index: number, value: string) => {
-					const dataLength = data.length;
-					if (dataLength <= 1) return true; // Show label if only one point
-
-					const targetLabelCount = 10; // Aim for about 10 labels
-					// Calculate interval, ensuring it's at least 1
-					const calculatedInterval = Math.max(1, Math.ceil(dataLength / targetLabelCount));
-
-					// Show the first label (index 0)
-					if (index === 0) return true;
-					// Show the last label if data exists
-					if (dataLength > 0 && index === dataLength - 1) return true;
-					// Show labels at the calculated interval, but not the last one if it was already shown
-					if (index % calculatedInterval === 0 && index !== dataLength - 1) return true;
-					// Hide others
-					return false;
-				},
-				hideOverlap: true
-			},
+			data: captureIntervals,
 			...props.xAxisOptions
 		} as any as EChartsOption['xAxis'],
 		yAxis: {

package/dist/components/graphs/line/LineChart.svelte.d.ts

@@ -5,6 +5,7 @@ interface LineChartProps extends GenericChartProps {
     withArea?: boolean;
     color?: string;
     grid?: EChartsOption['grid'];
+    captureInterval?: number;
 }
 declare const LineChart: import("svelte").Component<LineChartProps, {}, "">;
 type LineChart = ReturnType<typeof LineChart>;

package/dist/components/graphs/matrix/Matrix.stories.svelte

@@ -81,20 +81,6 @@
 	</div>
 </Story>
 
-<Story name="Loading" asChild>
-	<div class="h-[500px] w-full">
-		<Matrix
-			data={confusionMatrix}
-			{rowLabels}
-			{colLabels}
-			loading={true}
-			invertYAxis={true}
-			xAxisName="Model count"
-			yAxisName="Manual count"
-		/>
-	</div>
-</Story>
-
 <Story name="Multiple Classes" asChild>
 	<div class="h-[500px] w-full">
 		<Matrix

package/dist/components/graphs/multiline/MultiLineChart.stories.svelte

@@ -1,8 +1,6 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	// Import the specific type to resolve mismatch
 	import type { ECElementEvent } from 'echarts';
-
 	import MultiLineChart from './MultiLineChart.svelte';
 
 	const { Story } = defineMeta({
@@ -16,40 +14,31 @@
 	const xAxisName = 'Time';
 	const yAxisName = 'Value';
 
-	const smooth = (data: number[]) =>
-		data.map((_, i, arr) => {
-			const windowSize = 2;
-			const start = Math.max(i - windowSize, 0);
-			const end = Math.min(i + windowSize, arr.length - 1);
-			const subset = arr.slice(start, end + 1);
-			return subset.reduce((sum, v) => sum + v, 0) / subset.length;
-		});
-
-	// Define static data arrays
-	const rawDataGroup1 = [
-		10, 12, 15, 13, 16, 18, 20, 22, 25, 23, 26, 28, 30, 32, 35, 33, 36, 38, 40, 42, 45, 43, 46, 48,
-		50
-	]; // length 25
-	const rawDataGroup2 = [
-		5, 7, 9, 8, 10, 12, 14, 13, 15, 17, 19, 18, 20, 22, 24, 23, 25, 27, 29, 28
-	]; // length 20
-	const rawDataGroup3 = [
-		20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62, 64, 66,
-		68, 70, 72, 74, 76, 78, 80, 82, 84, 86, 88
-	]; // length 35
+	const staticSmoothedData1 = [
+		12.333333333333334, 13.5, 14.8, 15.6, 17.4, 19.8, 22.2, 23.6, 25.2, 26.8, 29, 31.6, 33.8, 34.8,
+		36.4, 37.6, 40.2, 42.4, 44.4, 45.6, 46.4, 46.75, 48.25, 49, 49.333333333333336
+	];
+	const staticSmoothedData2 = [
+		7, 8, 8.8, 10.2, 11.8, 13.2, 14.8, 16.2, 17.6, 18.4, 19.2, 20.6, 22.4, 23.6, 24.8, 25.8, 27,
+		27.75, 28.5, 28.5
+	];
+	const staticSmoothedData3 = [
+		22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62, 64, 66, 68,
+		70, 72, 74, 76, 78, 80, 82, 84, 86, 87, 88
+	];
 
 	const data = [
 		{
 			key: 'Group 1',
-			series: smooth(rawDataGroup1)
+			series: staticSmoothedData1
 		},
 		{
 			key: 'Group 2',
-			series: smooth(rawDataGroup2)
+			series: staticSmoothedData2
 		},
 		{
 			key: 'Group 3',
-			series: smooth(rawDataGroup3)
+			series: staticSmoothedData3
 		}
 	];
 
@@ -77,20 +66,6 @@
 	</div>
 </Story>
 
-<Story name="Loading" asChild>
-	<div class="h-[400px] w-full">
-		<MultiLineChart
-			{xAxisName}
-			{yAxisName}
-			{data}
-			loading
-			onitemclick={handleItemClick}
-			onmouseover={handleMouseOver}
-			onmouseout={handleMouseOut}
-		/>
-	</div>
-</Story>
-
 <Story name="With Area Gradient" asChild>
 	<div class="h-[400px] w-full">
 		<MultiLineChart

package/dist/components/graphs/multiline/MultiLineChart.svelte

@@ -116,26 +116,6 @@
 				onZero: false
 			},
 			data: captureIntervals,
-			axisLabel: {
-				interval: (index: number, value: string) => {
-					const dataLength = longestSeries;
-					if (dataLength <= 1) return true; // Show label if only one point
-
-					const targetLabelCount = 10; // Aim for about 10 labels
-					// Calculate interval, ensuring it's at least 1
-					const calculatedInterval = Math.max(1, Math.ceil(dataLength / targetLabelCount));
-
-					// Show the first label (index 0)
-					if (index === 0) return true;
-					// Show the last label if data exists
-					if (dataLength > 0 && index === dataLength - 1) return true;
-					// Show labels at the calculated interval, but not the last one if it was already shown
-					if (index % calculatedInterval === 0 && index !== dataLength - 1) return true;
-					// Hide others
-					return false;
-				},
-				hideOverlap: true
-			},
 			...props.xAxisOptions
 		},
 		yAxis: {

package/dist/components/graphs/scatterplot/Scatterplot.stories.svelte

@@ -20,7 +20,7 @@
 
 	const errorBarsData: DataPoint[] = data.map((d) => ({
 		...d,
-		error_value: Math.random() * 3
+		error_value: 1.5
 	}));
 
 	const lineData: [[number, number], [number, number]] = [

package/dist/components/icons/AnalysisIcon.svelte

@@ -9,9 +9,10 @@
 		withBackground?: boolean;
 		size?: 'sm' | 'md' | 'lg';
 		class?: string;
+		disabled?: boolean;
 	};
 
-	let { model, withBackground, size = 'md', class: className }: Props = $props();
+	let { model, withBackground, size = 'md', class: className, disabled = false }: Props = $props();
 
 	const getIconSize = () => {
 		switch (size) {
@@ -25,6 +26,10 @@
 	};
 
 	const backgroundColor = (analysis: SupportedAnalysisModelIcons) => {
+		if (disabled) {
+			return 'bg-neutral';
+		}
+
 		switch (analysis) {
 			case 'pipeline_halos':
 				return 'bg-warning';
@@ -46,6 +51,10 @@
 	};
 
 	const mapAnalysisToColor = (analysis: SupportedAnalysisModelIcons): IconColor => {
+		if (disabled) {
+			return 'secondary';
+		}
+
 		switch (analysis) {
 			case 'pipeline_halos':
 				return 'warning';

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

@@ -4,6 +4,7 @@ type Props = {
     withBackground?: boolean;
     size?: 'sm' | 'md' | 'lg';
     class?: string;
+    disabled?: boolean;
 };
 declare const AnalysisIcon: import("svelte").Component<Props, {}, "">;
 type AnalysisIcon = ReturnType<typeof AnalysisIcon>;

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

@@ -2,7 +2,7 @@ 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 = '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 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' | 'Dna' | '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' | 'Link' | 'ListMagnifyingGlass' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'MicrosoftExcelLogo' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Ruler' | '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' | 'TreeStructure' | '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;