@reshape-biotech/design-system 2.6.4 → 2.7.0

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 { backgroundColor } from '../../../tokens';
-  import Icon from '../../icons/Icon.svelte';
+  import Info from 'phosphor-svelte/lib/Info';
+  import { Icon } from '../../icons';
+  import { backgroundColor, textColor } from '../../../tokens';
   import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
   import type {
     EChartsOption,
@@ -8,12 +9,19 @@
     CustomSeriesRenderItemAPI,
     CustomSeriesRenderItemParams,
   } from 'echarts';
+  import type { ECElementEvent } from '../../../echarts-config';
   import Tooltip from '../../tooltip/Tooltip.svelte';
   import type { Snippet } from 'svelte';
 
-  export type DataPoint = { value: [number, number]; metadata: any; error_value?: number };
+  export type DataPoint = {
+    value: [number, number];
+    metadata: any;
+    error_value?: number;
+    disagreement?: boolean | null;
+    highlighted?: boolean | null;
+  };
 
-  export type ScatterPlotEchartsEvent = echarts.ECElementEvent & {
+  export type ScatterPlotEchartsEvent = ECElementEvent & {
     data: DataPoint;
   };
 
@@ -28,9 +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,
@@ -46,6 +57,7 @@
       { label: 'Count', color: backgroundColor['blue-inverse'], type: 'point' },
       { label: 'Perfect agreement', color: backgroundColor['lilac-inverse'], type: 'line' },
     ],
+    highlightIndex = null,
     children,
     ...props
   }: ScatterPlotProps = $props();
@@ -85,6 +97,7 @@
     const xValue = api.value(0) as number;
     const yValue = api.value(1) as number;
     const error = api.value(2) as number;
+    const disagreement = api.value(3) as number;
 
     const highPoint = api.coord([xValue, yValue + error]);
     const lowPoint = api.coord([xValue, yValue - error]);
@@ -98,8 +111,7 @@
     const baseWidth = Array.isArray(sizeValue) ? sizeValue[0] : 10;
     const halfWidth = Math.min((baseWidth ?? 10) * 1.5, 3);
     const style = {
-      stroke: api.visual('color') as string,
-      fill: undefined,
+      stroke: disagreement ? textColor['icon-tertiary'] : backgroundColor['blue-inverse'],
     };
 
     return {
@@ -148,7 +160,7 @@
     const series: SeriesOption[] = [];
     const errorBarData = data
       .filter((d) => d.error_value != 0)
-      .map((d) => [...d.value, d.error_value]);
+      .map((d) => [...d.value, d.error_value, d.disagreement ? 1 : 0]);
 
     if (props.lineData && props.lineData.length > 0) {
       const extendedLineData = [
@@ -170,7 +182,6 @@
           disabled: true,
         },
         silent: true,
-        zlevel: 0,
       });
 
       if (showConfidenceBand && props.lineData && props.lineData.length > 0) {
@@ -205,7 +216,6 @@
             disabled: true,
           },
           silent: true,
-          zlevel: 0,
         });
       }
     }
@@ -215,17 +225,43 @@
       data,
       type: 'scatter',
       itemStyle: {
-        color: backgroundColor['blue-inverse'],
-        opacity: 0.8,
+        color: (params: any) =>
+          params?.data?.disagreement ? textColor['icon-tertiary'] : backgroundColor['blue-inverse'],
+        opacity: 1,
       },
       emphasis: {
         itemStyle: {
-          color: backgroundColor['blue-inverse'],
+          color: (params: any) => {
+            const point = params?.data as DataPoint;
+            return point?.disagreement
+              ? textColor['icon-tertiary']
+              : backgroundColor['blue-inverse'];
+          },
           opacity: 1,
         },
       },
       animation: false,
-      zlevel: 1,
+    });
+
+    const p =
+      highlightIndex !== null && highlightIndex >= 0 && highlightIndex < data.length
+        ? data[highlightIndex]
+        : null;
+    series.push({
+      id: 'highlight-overlay',
+      type: 'scatter',
+      data: [p],
+      symbolSize: 16,
+      itemStyle: {
+        color: (params: any) => {
+          const point = params?.data as DataPoint;
+          return point?.disagreement
+            ? backgroundColor['neutral-hover']
+            : backgroundColor['blue-hover'];
+        },
+      },
+      z: -1,
+      silent: true,
     });
 
     if (errorBarData.length > 0) {
@@ -233,16 +269,11 @@
         type: 'custom',
         name: 'error',
         silent: true,
-        itemStyle: {
-          borderWidth: 1.5,
-          color: backgroundColor['blue-inverse'],
-        },
+        itemStyle: { borderWidth: 1.5 },
         renderItem: renderErrorBarItem,
         data: errorBarData,
-        zlevel: 0,
       });
     }
-
     return {
       xAxis: {
         type: 'value',
@@ -320,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,11 +1,14 @@
 import { type GenericChartProps } from '../chart/Chart.svelte';
+import type { ECElementEvent } from '../../../echarts-config';
 import type { Snippet } from 'svelte';
 export type DataPoint = {
     value: [number, number];
     metadata: any;
     error_value?: number;
+    disagreement?: boolean | null;
+    highlighted?: boolean | null;
 };
-export type ScatterPlotEchartsEvent = echarts.ECElementEvent & {
+export type ScatterPlotEchartsEvent = ECElementEvent & {
     data: DataPoint;
 };
 type LegendItem = {
@@ -18,9 +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/icon-button/IconButton.svelte

@@ -8,6 +8,7 @@
     | 'secondary'
     | 'transparent'
     | 'outline'
+    | 'accent'
     | 'danger'
     | 'secondary-inverse'
     | 'transparent-inverse';
@@ -164,6 +165,14 @@
 }
   .color-secondary:hover {
     background-color: #12192A1A
+}
+  .color-accent {
+    background-color: #5750ee1A;
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+  .color-accent:hover {
+    background-color: #5750ee40
 }
   .color-transparent {
     background-color: transparent;

package/dist/components/icon-button/IconButton.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
-type Variant = 'primary' | 'secondary' | 'transparent' | 'outline' | 'danger' | 'secondary-inverse' | 'transparent-inverse';
+type Variant = 'primary' | 'secondary' | 'transparent' | 'outline' | 'accent' | 'danger' | 'secondary-inverse' | 'transparent-inverse';
 interface Props extends HTMLButtonAttributes {
     variant?: Variant;
     type?: 'button' | 'submit' | 'reset' | null | undefined;

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>