@reshape-biotech/design-system 2.6.4 → 2.7.0

package/dist/components/activity/Activity.stories.svelte

@@ -1,8 +1,9 @@
 <script module lang="ts">
+  import Eye from 'phosphor-svelte/lib/Eye';
+  import { Icon } from 'design-system';
   import Button from '../button/Button.svelte';
   import Activity from './Activity.svelte';
   import * as Collapsible from '../collapsible/index';
-  import { Icon } from '../icons';
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
   const { Story } = defineMeta({
@@ -87,7 +88,11 @@
         size="sm"
         class="icon-secondary w-36 rounded-full"
       >
-        <Icon iconName="Eye" />
+        <Icon>
+          {#snippet children(props)}
+            <Eye {...props} />
+          {/snippet}
+        </Icon>
         <p>Show more</p>
       </Button>
     </Collapsible.Content>

package/dist/components/activity/Activity.svelte

@@ -1,24 +1,12 @@
 <script lang="ts">
-  import { Icon, type IconName, type IconColor, type BackgroundClass } from '../icons';
+  import { type BackgroundClass } from '../icons';
+  import ActivityIcon from './ActivityIcon.svelte';
+  import type { ActivityIconType } from './ActivityIcon.svelte';
   import { DateTime } from 'luxon';
 
-  type ActivityIcon =
-    | 'add'
-    | 'capture'
-    | 'delete'
-    | 'edit'
-    | 'failed'
-    | 'pause'
-    | 'start'
-    | 'stop'
-    | 'warning'
-    | 'success'
-    | 'export-succeeded'
-    | 'export-failed';
-
   type Activity = {
     activity_type?: string;
-    icon: ActivityIcon;
+    icon: ActivityIconType;
     label: string;
     timestamp: string;
     author?: string | null;
@@ -32,37 +20,7 @@
     class?: string;
   };
 
-  const ACTIVITY_ICONS: Record<ActivityIcon, IconName> = {
-    add: 'Plus',
-    capture: 'Aperture',
-    delete: 'Trash',
-    edit: 'PencilSimple',
-    failed: 'WarningCircle',
-    pause: 'Pause',
-    start: 'Play',
-    stop: 'Stop',
-    warning: 'Warning',
-    success: 'Check',
-    'export-succeeded': 'DownloadSimple',
-    'export-failed': 'DownloadSimple',
-  };
-
-  const ACTIVITY_COLOR: Record<ActivityIcon, IconColor> = {
-    add: 'icon-secondary',
-    capture: 'icon-secondary',
-    delete: 'icon-danger',
-    edit: 'icon-secondary',
-    failed: 'icon-danger',
-    pause: 'icon-secondary',
-    start: 'icon-secondary',
-    stop: 'icon-secondary',
-    warning: 'icon-warning',
-    success: 'icon-secondary',
-    'export-succeeded': 'icon-secondary',
-    'export-failed': 'icon-danger',
-  };
-
-  const ACTIVITY_BACKGROUND: Record<ActivityIcon, BackgroundClass> = {
+  const ACTIVITY_BACKGROUND: Record<ActivityIconType, BackgroundClass> = {
     add: 'bg-neutral',
     capture: 'bg-neutral',
     delete: 'bg-neutral',
@@ -104,7 +62,7 @@
         activity.icon
       ]}"
     >
-      <Icon iconName={ACTIVITY_ICONS[activity.icon]} color={ACTIVITY_COLOR[activity.icon]} />
+      <ActivityIcon icon={activity.icon} />
     </div>
     <div class="w-0.5 grow bg-neutral group-last:invisible"></div>
   </div>

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

@@ -1,7 +1,7 @@
-type ActivityIcon = 'add' | 'capture' | 'delete' | 'edit' | 'failed' | 'pause' | 'start' | 'stop' | 'warning' | 'success' | 'export-succeeded' | 'export-failed';
+import type { ActivityIconType } from './ActivityIcon.svelte';
 type Activity = {
     activity_type?: string;
-    icon: ActivityIcon;
+    icon: ActivityIconType;
     label: string;
     timestamp: string;
     author?: string | null;

package/dist/components/activity/ActivityIcon.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { Icon } from '../icons';
+  import type { Component } from 'svelte';
+
+  // Import all required Phosphor icons for activities
+  import Plus from 'phosphor-svelte/lib/Plus';
+  import Aperture from 'phosphor-svelte/lib/Aperture';
+  import Trash from 'phosphor-svelte/lib/Trash';
+  import PencilSimple from 'phosphor-svelte/lib/PencilSimple';
+  import WarningCircle from 'phosphor-svelte/lib/WarningCircle';
+  import Pause from 'phosphor-svelte/lib/Pause';
+  import Play from 'phosphor-svelte/lib/Play';
+  import Stop from 'phosphor-svelte/lib/Stop';
+  import Warning from 'phosphor-svelte/lib/Warning';
+  import Check from 'phosphor-svelte/lib/Check';
+  import DownloadSimple from 'phosphor-svelte/lib/DownloadSimple';
+  import type { IconColor } from '../icons';
+
+  export type ActivityIconType =
+    | 'add'
+    | 'capture'
+    | 'delete'
+    | 'edit'
+    | 'failed'
+    | 'pause'
+    | 'start'
+    | 'stop'
+    | 'warning'
+    | 'success'
+    | 'export-succeeded'
+    | 'export-failed';
+
+  interface Props {
+    icon: ActivityIconType;
+    size?: number | string;
+    class?: string;
+  }
+
+  let { icon, size = 16, class: className = '' }: Props = $props();
+
+  const ACTIVITY_ICONS: Record<ActivityIconType, Component> = {
+    add: Plus,
+    capture: Aperture,
+    delete: Trash,
+    edit: PencilSimple,
+    failed: WarningCircle,
+    pause: Pause,
+    start: Play,
+    stop: Stop,
+    warning: Warning,
+    success: Check,
+    'export-succeeded': DownloadSimple,
+    'export-failed': DownloadSimple,
+  };
+
+  const ACTIVITY_COLOR: Record<ActivityIconType, IconColor> = {
+    add: 'icon-secondary',
+    capture: 'icon-secondary',
+    delete: 'icon-danger',
+    edit: 'icon-secondary',
+    failed: 'icon-danger',
+    pause: 'icon-secondary',
+    start: 'icon-secondary',
+    stop: 'icon-secondary',
+    warning: 'icon-warning',
+    success: 'icon-secondary',
+    'export-succeeded': 'icon-secondary',
+    'export-failed': 'icon-danger',
+  };
+
+  const IconComponent = $derived(ACTIVITY_ICONS[icon]);
+  const color = $derived(ACTIVITY_COLOR[icon]);
+</script>
+
+<Icon {color} {size} class={className} icon={IconComponent} />

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

@@ -0,0 +1,10 @@
+import type { Component } from 'svelte';
+export type ActivityIconType = 'add' | 'capture' | 'delete' | 'edit' | 'failed' | 'pause' | 'start' | 'stop' | 'warning' | 'success' | 'export-succeeded' | 'export-failed';
+interface Props {
+    icon: ActivityIconType;
+    size?: number | string;
+    class?: string;
+}
+declare const ActivityIcon: Component<Props, {}, "">;
+type ActivityIcon = ReturnType<typeof ActivityIcon>;
+export default ActivityIcon;

package/dist/components/banner/Banner.stories.svelte

@@ -1,5 +1,10 @@
 <script module lang="ts">
-  import { Icon } from '../icons';
+  import Warning from 'phosphor-svelte/lib/Warning';
+  import Info from 'phosphor-svelte/lib/Info';
+  import CheckCircle from 'phosphor-svelte/lib/CheckCircle';
+  import Circle from 'phosphor-svelte/lib/Circle';
+  import WarningCircle from 'phosphor-svelte/lib/WarningCircle';
+  import { Icon } from 'design-system';
   import Banner from './Banner.svelte';
   import Button from '../button/Button.svelte';
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -16,7 +21,11 @@
 <Story name="Well finding warning" asChild>
   <Banner type="warning" closable={false}>
     {#snippet icon()}
-      <Icon size={20} iconName="Warning" color="warning" weight="bold" />
+      <Icon size={20} color="warning" weight="bold">
+        {#snippet children(props)}
+          <Warning {...props} />
+        {/snippet}
+      </Icon>
     {/snippet}
     {#snippet content()}
       Our system couldn't find the wells in some plates. Analysis can't be done. For more help, <a
@@ -39,7 +48,11 @@
 <Story name="No toggle" asChild>
   <Banner type="progress" closable={false}>
     {#snippet icon()}
-      <Icon size={20} iconName="Info" color="icon-blue" weight="bold" />
+      <Icon size={20} color="icon-blue" weight="bold">
+        {#snippet children(props)}
+          <Info {...props} />
+        {/snippet}
+      </Icon>
     {/snippet}
     {#snippet content()}
       This banner has no toggle.
@@ -55,7 +68,11 @@
 
     <Banner type="error" bind:show={showBanner}>
       {#snippet icon()}
-        <Icon size={20} iconName="Info" color="danger" weight="bold" />
+        <Icon size={20} color="danger" weight="bold">
+          {#snippet children(props)}
+            <Info {...props} />
+          {/snippet}
+        </Icon>
       {/snippet}
       {#snippet content()}
         This banner can be toggled off with the "x" to the right and back on with the button above.
@@ -70,7 +87,11 @@
       <h4>Neutral</h4>
       <Banner type="neutral">
         {#snippet icon()}
-          <Icon size={20} iconName="Info" weight="bold" />
+          <Icon size={20} weight="bold">
+            {#snippet children(props)}
+              <Info {...props} />
+            {/snippet}
+          </Icon>
         {/snippet}
         {#snippet content()}
           This is a "neutral" banner.
@@ -82,7 +103,11 @@
       <h4>Success</h4>
       <Banner type="success">
         {#snippet icon()}
-          <Icon size={20} iconName="CheckCircle" color="icon-success" weight="bold" />
+          <Icon size={20} color="icon-success" weight="bold">
+            {#snippet children(props)}
+              <CheckCircle {...props} />
+            {/snippet}
+          </Icon>
         {/snippet}
         {#snippet content()}
           This is a "success" banner.
@@ -94,7 +119,11 @@
       <h4>Progress</h4>
       <Banner type="progress">
         {#snippet icon()}
-          <Icon size={20} iconName="Circle" color="icon-blue" weight="bold" />
+          <Icon size={20} color="icon-blue" weight="bold">
+            {#snippet children(props)}
+              <Circle {...props} />
+            {/snippet}
+          </Icon>
         {/snippet}
         {#snippet content()}
           This is a "progress" banner.
@@ -106,7 +135,11 @@
       <h4>Warning</h4>
       <Banner type="warning">
         {#snippet icon()}
-          <Icon size={20} iconName="Warning" color="icon-warning" weight="bold" />
+          <Icon size={20} color="icon-warning" weight="bold">
+            {#snippet children(props)}
+              <Warning {...props} />
+            {/snippet}
+          </Icon>
         {/snippet}
         {#snippet content()}
           This is a "warning" banner.
@@ -118,7 +151,11 @@
       <h4>Error</h4>
       <Banner type="error">
         {#snippet icon()}
-          <Icon size={20} iconName="WarningCircle" color="icon-danger" weight="bold" />
+          <Icon size={20} color="icon-danger" weight="bold">
+            {#snippet children(props)}
+              <WarningCircle {...props} />
+            {/snippet}
+          </Icon>
         {/snippet}
         {#snippet content()}
           This is an "error" banner.

package/dist/components/banner/Banner.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+  import X from 'phosphor-svelte/lib/X';
   import type { Snippet } from 'svelte';
   import { IconButton } from '../icon-button/';
-  import Icon from '../icons/Icon.svelte';
+  import { Icon } from '../icons/';
 
   interface Props {
     type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
@@ -42,7 +43,7 @@
     </div>
     {#if closable}
       <IconButton size="sm" onclick={() => (show = false)}>
-        <Icon iconName="X" color="icon-secondary" weight="bold" />
+        <Icon color="icon-secondary" weight="bold" icon={X} />
       </IconButton>
     {/if}
   </div>

package/dist/components/checkbox/Checkbox.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+  import Check from 'phosphor-svelte/lib/Check';
+  import Minus from 'phosphor-svelte/lib/Minus';
+  import { Icon } from 'design-system';
   import { Checkbox, type CheckboxRootProps } from 'bits-ui';
-  import { Icon } from '../icons';
 
   export type CheckboxProps = CheckboxRootProps;
 
@@ -13,9 +15,9 @@
       class={`flex items-center justify-center rounded border border-static ${checked ? 'bg-dark-accent-inverse-hover' : ''}`}
     >
       {#if checked}
-        <Icon iconName="Check" class="text-primary-inverse" />
+        <Icon class="text-primary-inverse" icon={Check} />
       {:else if indeterminate}
-        <Icon iconName="Minus" />
+        <Icon icon={Minus} />
       {:else}
         <div class="h-4 w-4"></div>
       {/if}

package/dist/components/collapsible/components/collapsible-trigger.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+  import CaretDown from 'phosphor-svelte/lib/CaretDown';
+  import { Icon } from 'design-system';
   import { Collapsible } from 'bits-ui';
-  import { Icon } from '../../icons';
   import type { CollapsibleTriggerProps } from '../types';
 
   let { children, withIcon = true, ...props }: CollapsibleTriggerProps = $props();
@@ -10,7 +11,7 @@
   <div class="container h-6">
     {@render children()}
     {#if withIcon}
-      <Icon iconName="CaretDown" color="secondary" class="icon m-1" />
+      <Icon color="secondary" class="icon m-1" icon={CaretDown} />
     {/if}
   </div>
 </Collapsible.Trigger>

package/dist/components/combobox/Combobox.stories.svelte

@@ -1,9 +1,11 @@
 <script module lang="ts">
+  import Plus from 'phosphor-svelte/lib/Plus';
+  import List from 'phosphor-svelte/lib/List';
+  import { Icon } from 'design-system';
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import { userEvent, within } from '@storybook/test';
   import { Root as ComboboxRootForMeta } from './index';
   import * as Combobox from './index';
-  import { Icon } from '../icons';
   import IconButton from '../icon-button/IconButton.svelte';
   import Divider from '../divider/Divider.svelte';
   import Tag from '../tag/Tag.svelte';
@@ -131,7 +133,11 @@
     <Combobox.Trigger>
       <div bind:this={customAnchor}>
         <IconButton rounded={false}>
-          <Icon iconName="Plus" />
+          <Icon>
+            {#snippet children(props)}
+              <Plus {...props} />
+            {/snippet}
+          </Icon>
         </IconButton>
       </div>
     </Combobox.Trigger>
@@ -241,7 +247,11 @@
     <Combobox.Trigger>
       <div bind:this={customAnchorGrouped}>
         <Button variant="primary" size="sm">
-          <Icon iconName="List" />
+          <Icon>
+            {#snippet children(props)}
+              <List {...props} />
+            {/snippet}
+          </Icon>
           Select fruits by category
         </Button>
       </div>
@@ -379,7 +389,11 @@
       <Combobox.Trigger data-testid="combobox-trigger">
         <div bind:this={customAnchor}>
           <IconButton rounded={false}>
-            <Icon iconName="Plus" />
+            <Icon>
+              {#snippet children(props)}
+                <Plus {...props} />
+              {/snippet}
+            </Icon>
           </IconButton>
         </div>
       </Combobox.Trigger>

package/dist/components/combobox/components/combobox-add.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { Icon } from '../../icons';
+  import Plus from 'phosphor-svelte/lib/Plus';
+  import { Icon } from 'design-system';
   import type { Snippet } from 'svelte';
   import type { HTMLButtonAttributes } from 'svelte/elements';
 
@@ -9,7 +10,7 @@
 </script>
 
 <button {...props}>
-  <Icon iconName="Plus" class="text-icon-secondary" />
+  <Icon class="text-icon-secondary" icon={Plus} />
   {@render children()}
 </button>
 

package/dist/components/combobox/components/combobox-content.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+  import CaretUp from 'phosphor-svelte/lib/CaretUp';
+  import CaretDown from 'phosphor-svelte/lib/CaretDown';
+  import { Icon } from 'design-system';
   import { Combobox } from 'bits-ui';
   import type { ComboboxContentProps } from '../types';
-  import { Icon } from '../../icons';
   import { fade } from 'svelte/transition';
 
   let {
@@ -24,13 +26,13 @@
         {@render header?.()}
         {#if showScroll}
           <Combobox.ScrollUpButton class="flex justify-center">
-            <Icon iconName="CaretUp" />
+            <Icon icon={CaretUp} />
           </Combobox.ScrollUpButton>
           <Combobox.Viewport class={paddedContent ? 'p-1' : ''}>
             {@render children()}
           </Combobox.Viewport>
           <Combobox.ScrollDownButton class="flex justify-center">
-            <Icon iconName="CaretDown" />
+            <Icon icon={CaretDown} />
           </Combobox.ScrollDownButton>
         {:else}
           {@render children()}

package/dist/components/combobox/components/combobox-indicator.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { Icon } from '../../icons';
+  import Check from 'phosphor-svelte/lib/Check';
+  import { Icon } from 'design-system';
 </script>
 
-<Icon iconName="Check" />
+<Icon icon={Check} />

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

@@ -1,10 +1,11 @@
 <script module lang="ts">
+  import CalendarBlank from 'phosphor-svelte/lib/CalendarBlank';
+  import { Icon } from 'design-system';
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import { userEvent, within } from '@storybook/test';
   import { DateTime } from 'luxon';
   import DatePicker from './DatePicker.svelte';
   import Dropdown from '../dropdown/Dropdown.svelte';
-  import { Icon } from '../icons';
 
   const { Story } = defineMeta({
     component: DatePicker,
@@ -132,7 +133,11 @@
     <Dropdown bind:open={isOpen} side="dropdown-bottom" alignEnd={false}>
       {#snippet trigger({ Trigger })}
         <Trigger>
-          <Icon iconName="CalendarBlank" class="mr-2" size={16} />
+          <Icon class="mr-2" size={16}>
+            {#snippet children(props)}
+              <CalendarBlank {...props} />
+            {/snippet}
+          </Icon>
           {displayText}
         </Trigger>
       {/snippet}
@@ -204,7 +209,11 @@
           {#snippet trigger({ Trigger })}
             <Trigger>
               <div data-testid="form-date-trigger" class="flex items-center gap-2">
-                <Icon iconName="CalendarBlank" class="mr-2" size={16} />
+                <Icon class="mr-2" size={16}>
+                  {#snippet children(props)}
+                    <CalendarBlank {...props} />
+                  {/snippet}
+                </Icon>
                 {formDisplayText}
               </div>
             </Trigger>

package/dist/components/datepicker/DatePicker.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
+  import CaretLeft from 'phosphor-svelte/lib/CaretLeft';
+  import CaretRight from 'phosphor-svelte/lib/CaretRight';
+  import { Icon } from 'design-system';
   import { run } from 'svelte/legacy';
 
   import { DateTime, type MonthNumbers } from 'luxon';
 
   import IconButton from '../icon-button/IconButton.svelte';
-  import { Icon } from '../icons';
 
   interface Props {
     selectedDate: DateTime | undefined;
@@ -96,11 +98,11 @@
     <div class="calendar-header">
       <div class="month-year">
         <IconButton onclick={previousMonth} type="button">
-          <Icon iconName="CaretLeft" color="secondary" size="0.75rem" />
+          <Icon color="secondary" size="0.75rem" icon={CaretLeft} />
         </IconButton>
         <h5>{DateTime.local(shownYear, shownMonth).toFormat('MMM yyyy')}</h5>
         <IconButton onclick={nextMonth} type="button">
-          <Icon iconName="CaretRight" color="secondary" size="0.75rem" />
+          <Icon color="secondary" size="0.75rem" icon={CaretRight} />
         </IconButton>
       </div>
     </div>

package/dist/components/drawer/components/drawer-content.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+  import X from 'phosphor-svelte/lib/X';
+  import { Icon } from 'design-system';
   import { Dialog } from 'bits-ui';
   import { fly } from 'svelte/transition';
-  import { Icon } from '../../icons';
   import type { DrawerContentProps } from '../types';
   import Overlay from './drawer-overlay.svelte';
 
@@ -32,7 +33,7 @@
     <Dialog.Close
       class="ring-offset-background focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
     >
-      <Icon iconName="X" />
+      <Icon icon={X} />
     </Dialog.Close>
   {/if}
 {/snippet}

package/dist/components/empty-content/EmptyContent.stories.svelte

@@ -1,7 +1,9 @@
 <script module>
+  import ClockCountdown from 'phosphor-svelte/lib/ClockCountdown';
+  import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
+  import { Icon } from 'design-system';
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import EmptyContent from './EmptyContent.svelte';
-  import { Icon } from '../../components/icons';
 
   const { Story } = defineMeta({
     component: EmptyContent,
@@ -14,13 +16,11 @@
   <div class="w-full bg-surface p-12">
     <EmptyContent>
       {#snippet icon()}
-        <Icon
-          iconName="ClockCountdown"
-          color="icon-tertiary"
-          width={48}
-          height={48}
-          weight="light"
-        />
+        <Icon color="icon-tertiary" width={48} height={48} weight="light">
+          {#snippet children(props)}
+            <ClockCountdown {...props} />
+          {/snippet}
+        </Icon>
       {/snippet}
       <h6>No activity</h6>
       <p class="text-center text-sm">Nothing has been logged for this job.</p>
@@ -32,13 +32,11 @@
   <div class="w-full bg-surface p-12">
     <EmptyContent>
       {#snippet icon()}
-        <Icon
-          iconName="MagnifyingGlass"
-          color="icon-tertiary"
-          width={48}
-          height={48}
-          weight="light"
-        />
+        <Icon color="icon-tertiary" width={48} height={48} weight="light">
+          {#snippet children(props)}
+            <MagnifyingGlass {...props} />
+          {/snippet}
+        </Icon>
       {/snippet}
       <h6>No results found</h6>
       <p class="text-center text-sm">Try adjusting your search or filters.</p>

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

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

package/dist/components/graphs/bar-chart/BarChart.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';
 type DataItem = {
     value: number;
     [key: string]: string | number;

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

@@ -1,8 +1,7 @@
 <script lang="ts">
   import { textColor, borderColor, backgroundColor, chartColor, boxShadow } from '../../../tokens';
   import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
-  import type { EChartsOption, BarSeriesOption } from 'echarts';
-  import type { CallbackDataParams } from 'echarts/types/dist/shared';
+  import type { EChartsOption, BarSeriesOption, CallbackDataParams } from '../../../echarts-config';
   import { formattedDurationCompact } from '../utils/duration';
 
   type StackedSeriesItem = {

package/dist/components/graphs/bar-chart/StackedBarChart.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';
 type StackedSeriesItem = {
     name: string;
     data: (number | null)[];