@reshape-biotech/design-system 2.6.5 → 2.7.1

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

@@ -1,6 +1,13 @@
 <script lang="ts">
-  import { init } from 'echarts';
-  import type { EChartsOption, ECElementEvent, ECharts, SeriesOption } from 'echarts';
+  import {
+    init,
+    type EChartsOption,
+    type ECharts,
+    type SeriesOption,
+    type ECElementEvent,
+  } from '../../../echarts-config';
+  import type { EChartsType } from 'echarts/core';
+
   import { onMount, type Snippet } from 'svelte';
   import { colors, textColor } from '../../../tokens';
 
@@ -45,7 +52,7 @@
     onChartReady,
   }: ChartProps = $props();
 
-  let chart = $state<ECharts | null>(null);
+  let chart = $state<EChartsType | null>(null);
   let container: HTMLElement;
 
   const defaultOptions: EChartsOption = {
@@ -110,15 +117,17 @@
   function initChart() {
     if (container) {
       chart = init(container, theme, { renderer });
+      if (!chart) return;
+
       chart.setOption(defaultOptions);
       chart.setOption(options, { notMerge: false });
-      if (onitemclick) chart.on('click', onitemclick);
-      if (onmouseover) chart.on('mouseover', onmouseover);
-      if (onmouseout) chart.on('mouseout', onmouseout);
+      if (onitemclick) chart.on('click', (params) => onitemclick(params as ECElementEvent));
+      if (onmouseover) chart.on('mouseover', (params) => onmouseover(params as ECElementEvent));
+      if (onmouseout) chart.on('mouseout', () => onmouseout());
 
       if (loading) chart.showLoading();
 
-      onChartReady?.(chart);
+      onChartReady?.(chart as unknown as ECharts);
     }
   }
 

package/dist/components/graphs/chart/Chart.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { EChartsOption, ECElementEvent, ECharts } from 'echarts';
+import { type EChartsOption, type ECharts, type ECElementEvent } from '../../../echarts-config';
 import { type Snippet } from 'svelte';
 type ChartProps = {
     options: EChartsOption;

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import type { ECElementEvent } from 'echarts';
+  import type { ECElementEvent } from '../../../echarts-config';
   import { within, userEvent } from '@storybook/test';
   import LineChart from './LineChart.svelte';
 

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

@@ -1,8 +1,7 @@
 <script lang="ts">
   import { textColor, borderColor, chartColor, boxShadow } from '../../../tokens';
   import Chart from '../chart/Chart.svelte';
-  import type { EChartsOption } from 'echarts';
-  import * as echarts from 'echarts/core';
+  import echarts, { type EChartsOption } from '../../../echarts-config';
   import { createTooltipFormatter } from '../utils/tooltipFormatter';
   import { formattedDurationCompact } from '../utils/duration';
   import type { LineChartProps } from './types';

package/dist/components/graphs/line/types.d.ts

@@ -1,4 +1,4 @@
-import type { EChartsOption } from 'echarts';
+import type { EChartsOption } from '../../../echarts-config';
 import type { GenericChartProps } from '../chart/Chart.svelte';
 export interface LineChartProps extends GenericChartProps {
     data: (number | null)[];

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import type { ECElementEvent } from 'echarts';
+  import type { ECElementEvent } from '../../../echarts-config';
   import MultiLineChart from './MultiLineChart.svelte';
 
   const { Story } = defineMeta({

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

@@ -1,8 +1,11 @@
 <script lang="ts">
   import { textColor, borderColor, chartColor, boxShadow } from '../../../tokens';
   import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
-  import type { ECElementEvent, EChartsOption, LineSeriesOption } from 'echarts';
-  import * as echarts from 'echarts/core';
+  import echarts, {
+    type ECElementEvent,
+    type EChartsOption,
+    type LineSeriesOption,
+  } from '../../../echarts-config';
   import { createTooltipFormatter } from '../utils/tooltipFormatter';
   import { formattedDurationCompact } from '../utils/duration';
 
@@ -63,7 +66,7 @@
 
   function handleMouseOver(params: ECElementEvent) {
     focusedSeries = params.seriesName;
-    props.onmouseover?.(params);
+    props.onmouseover?.(params as any);
   }
 
   function handleMouseOut() {
@@ -257,7 +260,7 @@
     ...props,
     xAxisName,
     yAxisName,
-    onmouseover: handleMouseOver,
+    onmouseover: (params: any) => handleMouseOver(params),
     onmouseout: handleMouseOut,
   }}
 />

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

@@ -1,5 +1,5 @@
 import { type GenericChartProps } from '../chart/Chart.svelte';
-import type { EChartsOption } from 'echarts';
+import { type EChartsOption } from '../../../echarts-config';
 interface Groups {
     key: string;
     series: (number | null)[];

package/dist/components/graphs/multiline/types.d.ts

@@ -1,4 +1,4 @@
-import type { EChartsOption } from 'echarts';
+import type { EChartsOption } from '../../../echarts-config';
 import type { GenericChartProps } from '../chart/Chart.svelte';
 interface Groups {
     key: string;

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

@@ -1,6 +1,7 @@
 <script lang="ts">
+  import Info from 'phosphor-svelte/lib/Info';
+  import { Icon } from '../../icons';
   import { backgroundColor, textColor } from '../../../tokens';
-  import Icon from '../../icons/Icon.svelte';
   import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
   import type {
     EChartsOption,
@@ -8,6 +9,7 @@
     CustomSeriesRenderItemAPI,
     CustomSeriesRenderItemParams,
   } from 'echarts';
+  import type { ECElementEvent } from '../../../echarts-config';
   import Tooltip from '../../tooltip/Tooltip.svelte';
   import type { Snippet } from 'svelte';
 
@@ -19,7 +21,7 @@
     highlighted?: boolean | null;
   };
 
-  export type ScatterPlotEchartsEvent = echarts.ECElementEvent & {
+  export type ScatterPlotEchartsEvent = ECElementEvent & {
     data: DataPoint;
   };
 
@@ -34,10 +36,12 @@
     lineData?: [[number, number], [number, number]];
     showConfidenceBand?: boolean;
     showLegend?: boolean;
+    onitemclick?: (params: ScatterPlotEchartsEvent) => void;
+    onmouseover?: (params: ScatterPlotEchartsEvent) => void;
     legendItems?: LegendItem[];
     highlightIndex?: number | null;
     children?: Snippet;
-  } & Omit<GenericChartProps, 'timeIndex'>;
+  } & Omit<GenericChartProps, 'timeIndex' | 'onmouseover' | 'onitemclick'>;
 
   const {
     data,
@@ -347,7 +351,7 @@
             {#if item.label === 'Error margin'}
               <Tooltip placement="right">
                 {#snippet trigger()}
-                  <Icon iconName="Info" color="icon-tertiary" />
+                  <Icon color="icon-tertiary" icon={Info} />
                 {/snippet}
                 {#snippet content()}
                   {@render confBandTooltip()}

package/dist/components/graphs/scatterplot/Scatterplot.svelte.d.ts

@@ -1,4 +1,5 @@
 import { type GenericChartProps } from '../chart/Chart.svelte';
+import type { ECElementEvent } from '../../../echarts-config';
 import type { Snippet } from 'svelte';
 export type DataPoint = {
     value: [number, number];
@@ -7,7 +8,7 @@ export type DataPoint = {
     disagreement?: boolean | null;
     highlighted?: boolean | null;
 };
-export type ScatterPlotEchartsEvent = echarts.ECElementEvent & {
+export type ScatterPlotEchartsEvent = ECElementEvent & {
     data: DataPoint;
 };
 type LegendItem = {
@@ -20,10 +21,12 @@ type ScatterPlotProps = {
     lineData?: [[number, number], [number, number]];
     showConfidenceBand?: boolean;
     showLegend?: boolean;
+    onitemclick?: (params: ScatterPlotEchartsEvent) => void;
+    onmouseover?: (params: ScatterPlotEchartsEvent) => void;
     legendItems?: LegendItem[];
     highlightIndex?: number | null;
     children?: Snippet;
-} & Omit<GenericChartProps, 'timeIndex'>;
+} & Omit<GenericChartProps, 'timeIndex' | 'onmouseover' | 'onitemclick'>;
 declare const Scatterplot: import("svelte").Component<ScatterPlotProps, {}, "">;
 type Scatterplot = ReturnType<typeof Scatterplot>;
 export default Scatterplot;

package/dist/components/graphs/utils/tooltipFormatter.d.ts

@@ -1,4 +1,4 @@
-import type { CallbackDataParams } from 'echarts/types/dist/shared';
+import type { CallbackDataParams } from '../../../echarts-config';
 interface ExtendedCallbackDataParams extends CallbackDataParams {
     prefix?: string;
     textColor?: string;

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

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

package/dist/components/icons/AnalysisIcon.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-  import Icon from './Icon.svelte';
+  import RadioButton from 'phosphor-svelte/lib/RadioButton';
+  import BugBeetle from 'phosphor-svelte/lib/BugBeetle';
+  import Plant from 'phosphor-svelte/lib/Plant';
+  import LineSegments from 'phosphor-svelte/lib/LineSegments';
+  import { Icon } from './index';
   import { Well, Halo } from './custom';
   import type { IconColor, SupportedAnalysisModelIcons } from '.';
 
@@ -82,17 +86,17 @@
   {#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()} />
+    <Icon color={mapAnalysisToColor(model)} size={getIconSize()} icon={RadioButton} />
   {:else if model === 'pipeline_large_colonies' || model === 'pipeline_radial_growth'}
-    <Icon iconName="RadioButton" color={mapAnalysisToColor(model)} size={getIconSize()} />
+    <Icon color={mapAnalysisToColor(model)} size={getIconSize()} icon={RadioButton} />
   {: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()} />
+    <Icon color={mapAnalysisToColor(model)} size={getIconSize()} icon={BugBeetle} />
   {:else if model === 'pipeline_seed_germination'}
-    <Icon iconName="Plant" color={mapAnalysisToColor(model)} size={getIconSize()} />
+    <Icon color={mapAnalysisToColor(model)} size={getIconSize()} icon={Plant} />
   {:else}
-    <Icon iconName="LineSegments" color={mapAnalysisToColor(model)} size={getIconSize()} />
+    <Icon color={mapAnalysisToColor(model)} size={getIconSize()} icon={LineSegments} />
   {/if}
 </div>
 

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

@@ -1,6 +1,7 @@
 <script module lang="ts">
+  import Star from 'phosphor-svelte/lib/Star';
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { Icon, iconMap, type IconName } from './index';
+  import { Icon } from './index';
 
   const { Story } = defineMeta({
     component: Icon,
@@ -13,49 +14,30 @@
       },
     },
   });
-
-  // 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>
-</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} />
+        <Icon icon={Star} size={16} />
         <span class="mt-2 text-xs">16px</span>
       </div>
       <div class="flex flex-col items-center">
-        <Icon iconName="Star" size={20} />
+        <Icon icon={Star} size={20} />
         <span class="mt-2 text-xs">20px</span>
       </div>
       <div class="flex flex-col items-center">
-        <Icon iconName="Star" size={24} />
+        <Icon icon={Star} size={24} />
         <span class="mt-2 text-xs">24px</span>
       </div>
       <div class="flex flex-col items-center">
-        <Icon iconName="Star" size={32} />
+        <Icon icon={Star} size={32} />
         <span class="mt-2 text-xs">32px</span>
       </div>
       <div class="flex flex-col items-center">
-        <Icon iconName="Star" size={48} />
+        <Icon icon={Star} size={48} />
         <span class="mt-2 text-xs">48px</span>
       </div>
     </div>
@@ -67,27 +49,27 @@
     <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" />
+        <Icon icon={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" />
+        <Icon icon={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" />
+        <Icon icon={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" />
+        <Icon icon={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" />
+        <Icon icon={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" />
+        <Icon icon={Star} size={24} weight="duotone" />
         <span class="mt-2 text-xs">Duotone</span>
       </div>
     </div>
@@ -99,27 +81,27 @@
     <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" />
+        <Icon icon={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" />
+        <Icon icon={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" />
+        <Icon icon={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" />
+        <Icon icon={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" />
+        <Icon icon={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" />
+        <Icon icon={Star} size={24} color="danger" />
         <span class="mt-2 text-xs">Danger</span>
       </div>
     </div>

package/dist/components/icons/Icon.svelte

@@ -1,24 +1,57 @@
 <script lang="ts">
+  import type { Snippet, Component } from 'svelte';
+  import type { IconComponentProps } from 'phosphor-svelte';
   import { textColor } from '../../tokens';
-  import { renderIcon, type IconProps } from './index';
+
+  type BaseProps = {
+    color?: keyof typeof textColor | 'inherit';
+    weight?: 'fill' | 'light' | 'regular' | 'thin' | 'bold' | 'duotone';
+    width?: number;
+    height?: number;
+    size?: number | string;
+    class?: string;
+  };
+
+  type WithIcon = {
+    icon: Component<IconComponentProps>;
+    children?: undefined;
+  };
+
+  type WithChildren = {
+    icon?: undefined;
+    children: Snippet<[IconComponentProps]>;
+  };
+
+  type Props = BaseProps & (WithIcon | WithChildren);
+
+  const props: Props = $props();
 
   let {
-    iconName,
+    icon: IconComponent,
     color = 'inherit',
     weight = 'bold',
     width = 16,
     height = 16,
     size,
-    class: className,
-  }: IconProps = $props();
+    class: className = '',
+    children,
+  } = props;
+
+  const iconProps = $derived({
+    color: color === 'inherit' ? 'currentColor' : textColor[color],
+    weight,
+    width: size ? size : width,
+    height: size ? size : height,
+    class: 'shrink-0',
+  });
 </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}
-/>
+{#if IconComponent}
+  <span class={className}>
+    <IconComponent {...iconProps} />
+  </span>
+{:else if children}
+  <span class={className}>
+    {@render children(iconProps)}
+  </span>
+{/if}

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

@@ -1,4 +1,23 @@
-import { type IconProps } from './index';
-declare const Icon: import("svelte").Component<IconProps, {}, "">;
+import type { Snippet, Component } from 'svelte';
+import type { IconComponentProps } from 'phosphor-svelte';
+import { textColor } from '../../tokens';
+type BaseProps = {
+    color?: keyof typeof textColor | 'inherit';
+    weight?: 'fill' | 'light' | 'regular' | 'thin' | 'bold' | 'duotone';
+    width?: number;
+    height?: number;
+    size?: number | string;
+    class?: string;
+};
+type WithIcon = {
+    icon: Component<IconComponentProps>;
+    children?: undefined;
+};
+type WithChildren = {
+    icon?: undefined;
+    children: Snippet<[IconComponentProps]>;
+};
+type Props = BaseProps & (WithIcon | WithChildren);
+declare const Icon: Component<Props, {}, "">;
 type Icon = ReturnType<typeof Icon>;
 export default Icon;

package/dist/components/icons/PrincipalIcon.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
   import type { IconColor, SupportedPrincipalIcons } from '.';
-  import UsersThree from 'phosphor-svelte/lib/UsersThree';
+  import type { Component } from 'svelte';
+  import type { IconComponentProps } from 'phosphor-svelte';
+  import Icon from './Icon.svelte';
   import User from 'phosphor-svelte/lib/User';
+  import UsersThree from 'phosphor-svelte/lib/UsersThree';
   import Buildings from 'phosphor-svelte/lib/Buildings';
 
   type Props = {
@@ -13,7 +16,9 @@
 
   let { principal, withBackground, size = 'md', class: className }: Props = $props();
 
-  const mapPrincipalToIcon = (principal: SupportedPrincipalIcons) => {
+  const mapPrincipalToIcon = (
+    principal: SupportedPrincipalIcons
+  ): Component<IconComponentProps> => {
     switch (principal) {
       case 'user':
         return User;
@@ -51,14 +56,29 @@
         return 'bg-neutral';
     }
   };
+
+  const getIconSize = () => {
+    switch (size) {
+      case 'sm':
+        return 14;
+      case 'lg':
+        return 20;
+      default:
+        return 16;
+    }
+  };
 </script>
 
-<!-- svelte-ignore svelte_component_deprecated -->
 <div
-  class={`text-${mapPrincipalToColor(principal)} ${withBackground ? backgroundColor(principal) : ''} ${className} size-${size} border border-static`}
+  class={`${withBackground ? backgroundColor(principal) : ''} ${className} size-${size} border border-static`}
   class:withBackground
 >
-  <svelte:component this={mapPrincipalToIcon(principal)} weight="bold" />
+  <Icon
+    icon={mapPrincipalToIcon(principal)}
+    color={mapPrincipalToColor(principal)}
+    size={getIconSize()}
+    weight="bold"
+  />
 </div>
 
 <style>

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

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