@reshape-biotech/design-system 2.7.5 → 2.7.9

package/README.md

@@ -22,19 +22,16 @@ This package contains the core design system for Reshape Biotech frontend projec
 ### Contents
 
 1. **Component Library**
-
    - A collection of shared, reusable Svelte components
    - Standardized UI elements following Reshape Biotech's design guidelines
    - Fully typed components with TypeScript support
 
 2. **Tailwind Configuration**
-
    - Pre-configured Tailwind CSS setup
    - Custom theme extensions
    - Shared utility classes
 
 3. **DaisyUI**
-
    - Pre-configured DaisyUI setup
    - Custom theme extensions
    - Shared utility classes

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import Eye from 'phosphor-svelte/lib/Eye';
-  import { Icon } from 'design-system';
+  import { Icon } from '../icons/index.js';
   import Button from '../button/Button.svelte';
   import Activity from './Activity.svelte';
   import * as Collapsible from '../collapsible/index';

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

@@ -4,7 +4,7 @@
   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 { Icon } from '../icons/index.js';
   import Banner from './Banner.svelte';
   import Button from '../button/Button.svelte';
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -46,7 +46,7 @@
 </Story>
 
 <Story name="No toggle" asChild>
-  <Banner type="progress" closable={false}>
+  <Banner type="info" closable={false}>
     {#snippet icon()}
       <Icon size={20} color="icon-blue" weight="bold">
         {#snippet children(props)}
@@ -117,7 +117,7 @@
 
     <div class="space-y-2">
       <h4>Progress</h4>
-      <Banner type="progress">
+      <Banner type="info">
         {#snippet icon()}
           <Icon size={20} color="icon-blue" weight="bold">
             {#snippet children(props)}
@@ -126,7 +126,7 @@
           </Icon>
         {/snippet}
         {#snippet content()}
-          This is a "progress" banner.
+          This is a "info" banner.
         {/snippet}
       </Banner>
     </div>

package/dist/components/banner/Banner.svelte

@@ -5,11 +5,12 @@
   import { Icon } from '../icons/';
 
   interface Props {
-    type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
+    type?: 'neutral' | 'success' | 'info' | 'warning' | 'error';
     show?: boolean;
     closable?: boolean;
     icon?: Snippet;
     content: Snippet;
+    compact?: boolean;
   }
 
   let {
@@ -18,22 +19,27 @@
     closable = true,
     icon,
     content,
+    compact = true,
   }: Props = $props();
 
   const color = {
     neutral: 'neutral',
     success: 'success',
-    progress: 'blue',
+    info: 'blue',
     warning: 'warning',
     error: 'danger',
   }[type];
 </script>
 
 {#if show}
-  <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">
+  <div
+    class="bg-{color} flex min-h-12 w-full items-center justify-between p-2 {compact
+      ? 'rounded-xl'
+      : 'rounded-2xl'}"
+  >
+    <div class="inline-flex w-full items-center justify-start gap-2">
       {#if icon}
-        <div class="flex size-5 items-center justify-center text-icon-{color} ">
+        <div class="flex items-center justify-center px-1 text-icon-{color}">
           {@render icon?.()}
         </div>
       {/if}
@@ -42,7 +48,7 @@
       </div>
     </div>
     {#if closable}
-      <IconButton size="sm" onclick={() => (show = false)}>
+      <IconButton size="sm" onclick={() => (show = false)} variant="transparent" rounded={false}>
         <Icon color="icon-secondary" weight="bold" icon={X} />
       </IconButton>
     {/if}

package/dist/components/banner/Banner.svelte.d.ts

@@ -1,10 +1,11 @@
 import type { Snippet } from 'svelte';
 interface Props {
-    type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
+    type?: 'neutral' | 'success' | 'info' | 'warning' | 'error';
     show?: boolean;
     closable?: boolean;
     icon?: Snippet;
     content: Snippet;
+    compact?: boolean;
 }
 declare const Banner: import("svelte").Component<Props, {}, "show">;
 type Banner = ReturnType<typeof Banner>;

package/dist/components/button/Button.svelte

@@ -119,7 +119,7 @@
 
 .button:disabled {
 
-    border-style: none;
+    border-color: transparent;
 
     background-color: #12192a0A;
 
@@ -331,7 +331,7 @@
 }
   .btn-transparent-inverse:hover {
 
-    background-color: #FFFFFF26
+    background-color: #FFFFFF0D
 }
   .btn-transparent-inverse:active {
 

package/dist/components/card/Card.stories.svelte

@@ -108,7 +108,7 @@
 <Story name="Card nested in CardWrapper" args={{ class: 'w-96' }} asChild>
   <CardWrapper class="w-96" variant="compact">
     {#snippet Header()}
-      <h5>Overview</h5>
+      <h6>Overview</h6>
       <span class="text-sm text-success">Active</span>
     {/snippet}
     {#snippet children()}
@@ -124,7 +124,7 @@
       </Card>
     {/snippet}
     {#snippet Footer()}
-      <p class="py-2 text-xs text-secondary">Last updated 2 hours ago</p>
+      <p class="px-3 py-2 text-xs text-secondary">Last updated 2 hours ago</p>
     {/snippet}
   </CardWrapper>
 </Story>

package/dist/components/card/Card.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <div
-  class="overflow-hidden rounded-lg border border-static bg-surface shadow-container {additionalClasses}"
+  class="overflow-hidden rounded-[10px] border border-static bg-surface shadow-container {additionalClasses}"
 >
   {#if Header}
     <header

package/dist/components/card/CardWrapper.svelte

@@ -45,7 +45,7 @@
     {@render children()}
   </div>
   {#if Footer}
-    <footer class="flex min-h-8 w-full items-center px-3">
+    <footer class="flex min-h-8 w-full items-center">
       {@render Footer()}
     </footer>
   {/if}
@@ -60,7 +60,7 @@
 
     --tw-bg-opacity: 1;
 
-    background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1))
+    background-color: rgb(249 249 250 / var(--tw-bg-opacity, 1))
 }
 
   .wrapper.default {
@@ -80,19 +80,4 @@
 
     padding: 0.125rem
 }
-
-  .wrapper-footer {
-
-    display: flex;
-
-    min-height: 2rem;
-
-    width: 100%;
-
-    align-items: center;
-
-    padding-left: 1rem;
-
-    padding-right: 1rem
-}
 </style>

package/dist/components/checkbox/Checkbox.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Check from 'phosphor-svelte/lib/Check';
   import Minus from 'phosphor-svelte/lib/Minus';
-  import { Icon } from 'design-system';
+  import { Icon } from '../icons/index.js';
   import { Checkbox, type CheckboxRootProps } from 'bits-ui';
 
   export type CheckboxProps = CheckboxRootProps;

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import CaretDown from 'phosphor-svelte/lib/CaretDown';
-  import { Icon } from 'design-system';
+  import { Icon } from '../../icons/index.js';
   import { Collapsible } from 'bits-ui';
   import type { CollapsibleTriggerProps } from '../types';
 

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

@@ -1,7 +1,7 @@
 <script module lang="ts">
   import Plus from 'phosphor-svelte/lib/Plus';
   import List from 'phosphor-svelte/lib/List';
-  import { Icon } from 'design-system';
+  import { Icon } from '../icons/index.js';
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import { userEvent, within } from '@storybook/test';
   import { Root as ComboboxRootForMeta } from './index';

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Plus from 'phosphor-svelte/lib/Plus';
-  import { Icon } from 'design-system';
+  import { Icon } from '../../icons/index.js';
   import type { Snippet } from 'svelte';
   import type { HTMLButtonAttributes } from 'svelte/elements';
 

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import CaretUp from 'phosphor-svelte/lib/CaretUp';
   import CaretDown from 'phosphor-svelte/lib/CaretDown';
-  import { Icon } from 'design-system';
+  import { Icon } from '../../icons/index.js';
   import { Combobox } from 'bits-ui';
   import type { ComboboxContentProps } from '../types';
   import { fade } from 'svelte/transition';

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

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

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import CalendarBlank from 'phosphor-svelte/lib/CalendarBlank';
-  import { Icon } from 'design-system';
+  import { Icon } from '../icons/index.js';
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import { userEvent, within } from '@storybook/test';
   import { DateTime } from 'luxon';

package/dist/components/datepicker/DatePicker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import CaretLeft from 'phosphor-svelte/lib/CaretLeft';
   import CaretRight from 'phosphor-svelte/lib/CaretRight';
-  import { Icon } from 'design-system';
+  import { Icon } from '../icons/index.js';
   import { run } from 'svelte/legacy';
 
   import { DateTime, type MonthNumbers } from 'luxon';

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import X from 'phosphor-svelte/lib/X';
-  import { Icon } from 'design-system';
+  import { Icon } from '../../icons/index.js';
   import { Dialog } from 'bits-ui';
   import { fly } from 'svelte/transition';
   import type { DrawerContentProps } from '../types';

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

@@ -1,7 +1,7 @@
 <script module>
   import ClockCountdown from 'phosphor-svelte/lib/ClockCountdown';
   import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
-  import { Icon } from 'design-system';
+  import { Icon } from '../icons/index.js';
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import EmptyContent from './EmptyContent.svelte';
 

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

@@ -5,3 +5,7 @@ export { default as MultiLineChart } from './multiline/MultiLineChart.svelte';
 export { default as Matrix } from './matrix/Matrix.svelte';
 export { default as BarChart } from './bar-chart/BarChart.svelte';
 export { default as StackedBarChart } from './bar-chart/StackedBarChart.svelte';
+export { createTooltipFormatter } from './utils/tooltipFormatter.js';
+export type { DataPoint, ScatterPlotEchartsEvent } from './scatterplot/Scatterplot.svelte';
+export type { Cell } from './matrix/Matrix.svelte';
+export type { GenericChartProps } from './chart/Chart.svelte';

package/dist/components/graphs/index.js

@@ -5,3 +5,4 @@ export { default as MultiLineChart } from './multiline/MultiLineChart.svelte';
 export { default as Matrix } from './matrix/Matrix.svelte';
 export { default as BarChart } from './bar-chart/BarChart.svelte';
 export { default as StackedBarChart } from './bar-chart/StackedBarChart.svelte';
+export { createTooltipFormatter } from './utils/tooltipFormatter.js';

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

@@ -5,6 +5,8 @@ export type IconColor = keyof typeof textColor;
 export type SupportedAnalysisModelIcons = 'pipeline_halos' | 'pipeline_large_colonies' | 'pipeline_microbial_colonies' | 'pipeline_small_colonies' | 'sgs_enteros' | 'general_germination_rate_with_tracking' | 'general_germination_rate_without_tracking' | 'pipeline_insects' | 'pipeline_colony_formation' | 'pipeline_radial_growth' | 'syngenta_health_score_crw' | 'pipeline_seed_germination' | 'syngenta_health_score_faw' | 'syngenta_health_score_sbl' | 'unilever_cfu_count_lowres';
 export type SupportedPrincipalIcons = 'user' | 'group' | 'organization';
 export { default as Icon } from './Icon.svelte';
+export { default as AnalysisIcon } from './AnalysisIcon.svelte';
+export { default as PrincipalIcon } from './PrincipalIcon.svelte';
 export type IconProps = {
     color?: IconColor | 'inherit';
     weight?: 'fill' | 'light' | 'regular' | 'thin' | 'bold' | 'duotone';

package/dist/components/icons/index.js

@@ -1,5 +1,7 @@
 import {} from 'phosphor-svelte';
 import { backgroundColor, textColor } from '../../tokens';
 export { default as Icon } from './Icon.svelte';
+export { default as AnalysisIcon } from './AnalysisIcon.svelte';
+export { default as PrincipalIcon } from './PrincipalIcon.svelte';
 // Custom Icons
 export * from './custom';

package/dist/components/input/Input.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import X from 'phosphor-svelte/lib/X';
-  import { Icon } from 'design-system';
+  import { Icon } from '../icons/index.js';
   import type { Snippet } from 'svelte';
   import { IconButton } from '../icon-button';
   import type { HTMLInputAttributes } from 'svelte/elements';
@@ -205,7 +205,7 @@ input::placeholder {
 
     --tw-bg-opacity: 1;
 
-    background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1))
+    background-color: rgb(249 249 250 / var(--tw-bg-opacity, 1))
 }
 
   .transparent {

package/dist/components/legend/Legend.stories.svelte

@@ -5,7 +5,7 @@
   import { Tooltip } from '../tooltip';
   import Hash from 'phosphor-svelte/lib/Hash';
   import CraneTower from 'phosphor-svelte/lib/CraneTower';
-  import { Icon } from 'design-system';
+  import { Icon } from '../icons/index.js';
   import Tag from '../tag/Tag.svelte';
 
   const { Story } = defineMeta({

package/dist/components/legend/components/legend-root.svelte

@@ -9,9 +9,9 @@
   let { children, items }: Props = $props();
 </script>
 
-<div class="inline-flex w-full flex-col items-center rounded-[10px] bg-base">
+<div class="inline-flex w-full flex-col items-center rounded-xl bg-base">
   <div
-    class="flex w-full px-0.5 pt-0.5 [&>*]:rounded-lg [&>*]:border [&>*]:border-static [&>*]:p-1"
+    class="flex w-full px-0.5 pt-0.5 [&>*]:rounded-[10px] [&>*]:border [&>*]:border-static [&>*]:p-1"
   >
     {@render children()}
   </div>

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
-  import { Icon } from 'design-system';
+  import { Icon } from '../icons/index.js';
   import List from './List.svelte';
   import Tag from '../tag/Tag.svelte';
   import { defineMeta } from '@storybook/addon-svelte-csf';

package/dist/components/modal/Modal.stories.svelte

@@ -200,7 +200,7 @@
         <div class="space-y-2">
           <h4 class="font-medium">Simple Usage:</h4>
           <pre class="overflow-x-auto rounded bg-surface p-2 text-xs">
-{`import { Modal } from 'design-system';
+{`import { Modal } from '../icons/index.js';
 
 <Modal.Root>
   <Modal.Trigger>Open</Modal.Trigger>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import X from 'phosphor-svelte/lib/X';
-  import { Icon } from 'design-system';
+  import { Icon } from '../../icons/index.js';
   import { Dialog } from 'bits-ui';
   import { scale } from 'svelte/transition';
   import { twMerge } from 'tailwind-merge';

package/dist/components/multi-cfu-counter/MultiCFUCounter.svelte

@@ -545,41 +545,41 @@
 </script>
 
 {#snippet UndoResetControls()}
-  <div class="flex items-center gap-1">
-    <IconButton
-      variant="transparent-inverse"
-      rounded={false}
-      onclick={undo}
-      disabled={marks.length === 0 || disabled}
-      aria-label="Undo last mark"
-    >
-      <Icon icon={ArrowUUpLeft} />
-    </IconButton>
-    <Divider vertical inverse class="!h-5" />
-    <Button
-      variant="transparent-inverse"
-      size="sm"
-      onClick={reset}
-      disabled={marks.length === 0 || disabled}
-      accessibilityLabel="Reset all marks"
-      class="!text-primary-inverse"
-    >
-      Clear all
-    </Button>
-  </div>
+  {#if marks.length > 0}
+    <div class="flex items-center gap-2">
+      <IconButton
+        variant="transparent-inverse"
+        rounded={false}
+        onclick={undo}
+        disabled={marks.length === 0 || disabled}
+        aria-label="Undo last mark"
+      >
+        <Icon icon={ArrowUUpLeft} />
+      </IconButton>
+      <Divider vertical inverse class="!h-4" />
+      <Button
+        variant="transparent-inverse"
+        size="sm"
+        onClick={reset}
+        disabled={marks.length === 0 || disabled}
+        accessibilityLabel="Reset all marks"
+        class="!text-primary-inverse"
+      >
+        Clear all
+      </Button>
+    </div>
+  {/if}
 {/snippet}
 
 {#snippet TopLeftActions()}
   {#if activeMarkerName && !hideMarkers && !disabled}
-    <div
-      class="absolute left-2 top-2 z-20 flex w-full max-w-[calc(100%-1rem)] items-center justify-between rounded-lg border border-interactive-inverse bg-base-inverse px-3 py-2"
-    >
-      <div class="flex items-center gap-2">
+    <div class="flex h-10 items-center justify-between rounded-lg px-2 py-2">
+      <div class="flex items-center gap-3">
         <div
           class="flex !h-6 !w-6 shrink-0 items-center justify-center rounded-md"
           style="background-color: {resolvedActiveMarkerColor()}"
         >
-          <Icon size={16} color="primary-inverse" icon={CursorClick} />
+          <Icon color="primary-inverse" icon={CursorClick} />
         </div>
 
         <span class="text-sm text-primary-inverse">
@@ -594,7 +594,7 @@
 
 {#snippet ZoomControls()}
   <div
-    class="absolute bottom-2 right-2 z-20 flex flex-col items-center gap-1 rounded-md border border-interactive-inverse bg-base-inverse p-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+    class="absolute bottom-2 right-2 z-20 flex flex-col items-center gap-1 rounded-xl border border-static-inverse bg-base-inverse p-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
   >
     <IconButton
       variant="transparent-inverse"
@@ -617,57 +617,59 @@
   </div>
 {/snippet}
 
-<div
-  bind:this={container}
-  class="group relative h-full w-full overflow-hidden rounded-lg border"
-  data-testid="manual-cfu-counter"
->
+<div class="flex h-full w-full flex-col gap-1 p-1" data-testid="manual-cfu-counter">
   {#if !hideMarkers && !disabled}
     {@render TopLeftActions()}
-    {@render ZoomControls()}
   {/if}
 
-  <!--
-		We need to use SVG for this interactive component.
-		The SVG element is treated as a canvas for clicking, panning, and zooming.
-		We add accessibility attributes to make it more accessible despite the interactive nature.
-	-->
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-  <svg
-    bind:this={svgElement}
-    onclick={handleClick}
-    onmousedown={handleMouseDown}
-    onmousemove={handleMouseMove}
-    onmouseup={handleMouseUp}
-    onmouseleave={handleMouseLeave}
-    oncontextmenu={handleContextMenu}
-    onwheel={handleWheel}
-    class:cursor-grabbing={panningState === 'active'}
-    class:cursor-grab={!disabled && (panningState === 'ready' || (isShiftPressed && !panningState))}
-    class:cursor-not-allowed={disabled}
-    class:cursor-crosshair={!disabled && !panningState && !isShiftPressed}
-    class="h-full w-full"
-    role="application"
-    aria-label={disabled
-      ? 'CFU Counter (disabled)'
-      : 'CFU Counter - Click to add markers, right click or shift+click to pan'}
-    tabindex="0"
-  >
-    <g bind:this={viewport} id="viewport" class="h-full w-full">
-      <image href={imageUrl} x="0" y="0" width="100%" />
-      <g
-        bind:this={dotsGroup}
-        id="dots"
-        class="pointer-events-none"
-        aria-hidden={hideMarkers}
-        class:hidden={hideMarkers}
-      />
-    </g>
-  </svg>
-
-  <!-- Debug info for marks count - useful for testing -->
-  <span class="sr-only" data-testid="marks-count">{marks.length}</span>
+  <div bind:this={container} class="group relative flex-1 overflow-hidden rounded-xl bg-black">
+    {#if !hideMarkers && !disabled}
+      {@render ZoomControls()}
+    {/if}
+
+    <!--
+      We need to use SVG for this interactive component.
+      The SVG element is treated as a canvas for clicking, panning, and zooming.
+      We add accessibility attributes to make it more accessible despite the interactive nature.
+    -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <svg
+      bind:this={svgElement}
+      onclick={handleClick}
+      onmousedown={handleMouseDown}
+      onmousemove={handleMouseMove}
+      onmouseup={handleMouseUp}
+      onmouseleave={handleMouseLeave}
+      oncontextmenu={handleContextMenu}
+      onwheel={handleWheel}
+      class:cursor-grabbing={panningState === 'active'}
+      class:cursor-grab={!disabled &&
+        (panningState === 'ready' || (isShiftPressed && !panningState))}
+      class:cursor-not-allowed={disabled}
+      class:cursor-crosshair={!disabled && !panningState && !isShiftPressed}
+      class="h-full w-full focus:outline-none"
+      role="application"
+      aria-label={disabled
+        ? 'CFU Counter (disabled)'
+        : 'CFU Counter - Click to add markers, right click or shift+click to pan'}
+      tabindex="0"
+    >
+      <g bind:this={viewport} id="viewport" class="h-full w-full">
+        <image href={imageUrl} x="0" y="0" width="100%" />
+        <g
+          bind:this={dotsGroup}
+          id="dots"
+          class="pointer-events-none"
+          aria-hidden={hideMarkers}
+          class:hidden={hideMarkers}
+        />
+      </g>
+    </svg>
+
+    <!-- Debug info for marks count - useful for testing -->
+    <span class="sr-only" data-testid="marks-count">{marks.length}</span>
+  </div>
 </div>

package/dist/components/notification-popup/NotificationPopup.stories.svelte

@@ -1,6 +1,6 @@
 <script module>
   import Sparkle from 'phosphor-svelte/lib/Sparkle';
-  import { Icon } from 'design-system';
+  import { Icon } from '../icons/index.js';
   import NotificationPopup from './NotificationPopup.svelte';
   import { defineMeta } from '@storybook/addon-svelte-csf';
 

package/dist/components/notification-popup/NotificationPopup.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import X from 'phosphor-svelte/lib/X';
-  import { Icon } from 'design-system';
+  import { Icon } from '../icons/index.js';
   import { IconButton } from '../icon-button/';
   import { fade, fly } from 'svelte/transition';
   import type { Snippet } from 'svelte';

package/dist/components/pill/Pill.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import X from 'phosphor-svelte/lib/X';
-  import { Icon } from 'design-system';
+  import { Icon } from '../icons/index.js';
 
   interface Props {
     class?: string;

package/dist/components/required-status-indicator/RequiredStatusIndicator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import CheckCircle from 'phosphor-svelte/lib/CheckCircle';
-  import { Icon } from 'design-system';
+  import { Icon } from '../icons/index.js';
 
   type Props = {
     currentCount: number;

package/dist/components/segmented-control-buttons/SegmentedControlButtons.stories.svelte

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import Star from 'phosphor-svelte/lib/Star';
-  import { Icon } from 'design-system';
+  import { Icon } from '../icons/index.js';
   import SegmentedControlButtons from './SegmentedControlButtons.svelte';
   import { defineMeta } from '@storybook/addon-svelte-csf';
 

package/dist/components/select/components/SelectContent.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import CaretUp from 'phosphor-svelte/lib/CaretUp';
   import CaretDown from 'phosphor-svelte/lib/CaretDown';
-  import { Icon } from 'design-system';
+  import { Icon } from '../../icons/index.js';
   import { Select as SelectPrimitive } from 'bits-ui';
   import type { ContentProps } from '../types';
 

package/dist/components/select/components/SelectItem.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Check from 'phosphor-svelte/lib/Check';
-  import { Icon } from 'design-system';
+  import { Icon } from '../../icons/index.js';
   import { Select as SelectPrimitive } from 'bits-ui';
   import type { ItemProps, ItemSlotProps } from '../types';
 

package/dist/components/select/components/SelectTrigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import CaretDown from 'phosphor-svelte/lib/CaretDown';
-  import { Icon } from 'design-system';
+  import { Icon } from '../../icons/index.js';
   import { Select as SelectPrimitive } from 'bits-ui';
   import type { TriggerProps, IconSnippet } from '../types';
 

package/dist/components/slider/Slider.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import CaretUpDown from 'phosphor-svelte/lib/CaretUpDown';
-  import { Icon } from 'design-system';
+  import { Icon } from '../icons/index.js';
 
   let className = '';
   export { className as class };

package/dist/components/stat-card/StatCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Info from 'phosphor-svelte/lib/Info';
   import PencilSimple from 'phosphor-svelte/lib/PencilSimple';
-  import { Icon } from 'design-system';
+  import { Icon } from '../icons/index.js';
   import IconButton from '../icon-button/IconButton.svelte';
   import Spinner from '../spinner/Spinner.svelte';
   import Tooltip from '../tooltip/Tooltip.svelte';

package/dist/components/status-badge/StatusBadge.stories.svelte

@@ -5,7 +5,7 @@
   import StopCircle from 'phosphor-svelte/lib/StopCircle';
   import WifiSlash from 'phosphor-svelte/lib/WifiSlash';
   import WarningCircle from 'phosphor-svelte/lib/WarningCircle';
-  import { Icon } from 'design-system';
+  import { Icon } from '../icons/index.js';
   import StatusBadge from '../status-badge/StatusBadge.svelte';
   import Tooltip from '../tooltip/Tooltip.svelte';
   import ProgressCircle from '../progress-circle/ProgressCircle.svelte';

package/dist/components/stepper/components/stepper-step.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Check from 'phosphor-svelte/lib/Check';
-  import { Icon } from 'design-system';
+  import { Icon } from '../../icons/index.js';
   import type { Snippet } from 'svelte';
   import { getContext } from 'svelte';
   import type { StepState } from '../';

package/dist/components/table/Table.stories.svelte

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import Phone from 'phosphor-svelte/lib/Phone';
-  import { Icon } from 'design-system';
+  import { Icon } from '../icons/index.js';
   import Table from './Table.svelte';
 
   import { defineMeta } from '@storybook/addon-svelte-csf';

package/dist/components/table/Table.svelte

@@ -31,7 +31,7 @@
   };
 </script>
 
-<div class="w-full rounded-lg border border-static bg-surface px-5 py-2 shadow-container">
+<div class="w-full rounded-xl border border-static bg-surface px-5 py-2 shadow-container">
   <table class={`w-full table-fixed sm:table-auto xl:table-${tableLayout}`}>
     {@render children?.({ THead: THead, TBody: TBody, Tr: Tr, Th: Th, Td: Td })}
   </table>

package/dist/components/tag/Tag.stories.svelte

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import Folder from 'phosphor-svelte/lib/Folder';
-  import { Icon } from 'design-system';
+  import { Icon } from '../icons/index.js';
   import Tag from './Tag.svelte';
   import { defineMeta } from '@storybook/addon-svelte-csf';
 

package/dist/components/tag/Tag.svelte

@@ -35,9 +35,9 @@
   }: Props = $props();
 
   const sizes = {
-    xs: 'h-5 text-xs p-1',
-    sm: 'h-6 text-xs p-1.5',
-    md: 'h-7 text-sm p-2',
+    xs: 'h-5 text-xs p-1 rounded',
+    sm: 'h-6 text-xs p-1.5 rounded',
+    md: 'h-7 text-sm p-2 rounded-md',
   };
   let sizeClassName = $derived(sizes[size]);
 
@@ -115,7 +115,6 @@
     gap: 0.5rem;
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
-    border-radius: 0.25rem
+    white-space: nowrap
 }
 </style>

package/dist/components/toggle-icon-button/ToggleIconButton.stories.svelte

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import DownloadSimple from 'phosphor-svelte/lib/DownloadSimple';
-  import { Icon } from 'design-system';
+  import { Icon } from '../icons/index.js';
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import ToggleIconButton from './ToggleIconButton.svelte';
 

package/dist/components/tooltip/Tooltip.svelte

@@ -50,7 +50,7 @@
         {side}
         {align}
         sideOffset={8}
-        class={`${className} z-50 max-w-xs text-wrap rounded bg-base-inverse px-2 py-1 text-left text-sm font-normal text-primary-inverse shadow-menu`}
+        class={`${className} z-50 max-w-xs text-wrap rounded-md bg-base-inverse px-2 py-1 text-left text-sm font-normal text-primary-inverse shadow-menu`}
       >
         {#if content}
           {@render content()}

package/dist/index.d.ts

@@ -1,54 +1,54 @@
-export * from './components/activity/';
-export * from './components/avatar/';
-export * from './components/card/';
-export * from './components/banner/';
-export * from './components/button/';
-export * as Collapsible from './components/collapsible/';
-export * as Combobox from './components/combobox/';
-export * from './components/graphs';
-export * from './components/datepicker/';
-export * from './components/divider/';
-export * as Drawer from './components/drawer/';
-export * from './components/dropdown/';
-export * from './components/empty-content/';
-export * from './components/icons/';
-export * from './components/icons/custom/';
-export * from './components/icon-button/';
-export * from './components/image';
-export * from './components/input/';
-export * from './components/list/';
-export * as Legend from './components/legend/';
-export * from './components/logo/';
-export * from './components/markdown/';
-export * as Modal from './components/modal/';
-export * from './components/manual-cfu-counter/';
-export * from './components/multi-cfu-counter/';
-export * from './components/notification-popup/';
-export * from './components/notifications/';
-export * from './components/pill/';
-export * from './components/progress-circle/';
-export * from './components/required-status-indicator/';
-export * from './components/segmented-control-buttons/';
-export * as Select from './components/select/';
-export * from './components/skeleton-loader/';
-export * from './components/slider/';
-export * from './components/spinner/';
-export * from './components/stat-card/';
-export * from './components/status-badge/';
-export * from './components/stepper/';
-export * from './components/table/';
-export * from './components/tabs/';
-export * from './components/tag/';
-export * from './components/toast/';
-export * from './components/toggle-icon-button/';
-export * from './components/textarea/index';
-export * from './components/tooltip/';
-export * from './components/toggle/';
-export * from './components/checkbox/';
-export { tokens } from './tokens';
-export { notifications } from './notifications';
-export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor } from './tokens';
-export * as TokensColors from './tokens/colors';
-export * as TokensTypography from './tokens/typography';
-export { default as echarts, init } from './echarts-config';
+export * from './components/activity/index.js';
+export * from './components/avatar/index.js';
+export * from './components/card/index.js';
+export * from './components/banner/index.js';
+export * from './components/button/index.js';
+export * as Collapsible from './components/collapsible/index.js';
+export * as Combobox from './components/combobox/index.js';
+export * from './components/graphs/index.js';
+export * from './components/datepicker/index.js';
+export * from './components/divider/index.js';
+export * as Drawer from './components/drawer/index.js';
+export * from './components/dropdown/index.js';
+export * from './components/empty-content/index.js';
+export * from './components/icons/index.js';
+export * from './components/icons/custom/index.js';
+export * from './components/icon-button/index.js';
+export * from './components/image/index.js';
+export * from './components/input/index.js';
+export * from './components/list/index.js';
+export * as Legend from './components/legend/index.js';
+export * from './components/logo/index.js';
+export * from './components/markdown/index.js';
+export * as Modal from './components/modal/index.js';
+export * from './components/manual-cfu-counter/index.js';
+export * from './components/multi-cfu-counter/index.js';
+export * from './components/notification-popup/index.js';
+export * from './components/notifications/index.js';
+export * from './components/pill/index.js';
+export * from './components/progress-circle/index.js';
+export * from './components/required-status-indicator/index.js';
+export * from './components/segmented-control-buttons/index.js';
+export * as Select from './components/select/index.js';
+export * from './components/skeleton-loader/index.js';
+export * from './components/slider/index.js';
+export * from './components/spinner/index.js';
+export * from './components/stat-card/index.js';
+export * from './components/status-badge/index.js';
+export * from './components/stepper/index.js';
+export * from './components/table/index.js';
+export * from './components/tabs/index.js';
+export * from './components/tag/index.js';
+export * from './components/toast/index.js';
+export * from './components/toggle-icon-button/index.js';
+export * from './components/textarea/index.js';
+export * from './components/tooltip/index.js';
+export * from './components/toggle/index.js';
+export * from './components/checkbox/index.js';
+export { tokens } from './tokens.js';
+export { notifications } from './notifications.js';
+export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor, } from './tokens.js';
+export * as TokensColors from './tokens/colors.js';
+export * as TokensTypography from './tokens/typography.js';
+export { default as echarts, init } from './echarts-config.js';
 export type { ECharts, EChartsOption, SeriesOption, LineSeriesOption, BarSeriesOption, ECElementEvent, CallbackDataParams, YAXisOption, } from './echarts-config';

package/dist/index.js

@@ -1,57 +1,57 @@
 // Components
-export * from './components/activity/';
-export * from './components/avatar/';
-export * from './components/card/';
-export * from './components/banner/';
-export * from './components/button/';
-export * as Collapsible from './components/collapsible/';
-export * as Combobox from './components/combobox/';
-export * from './components/graphs';
-export * from './components/datepicker/';
-export * from './components/divider/';
-export * as Drawer from './components/drawer/';
-export * from './components/dropdown/';
-export * from './components/empty-content/';
-export * from './components/icons/';
-export * from './components/icons/custom/';
-export * from './components/icon-button/';
-export * from './components/image';
-export * from './components/input/';
-export * from './components/list/';
-export * as Legend from './components/legend/';
-export * from './components/logo/';
-export * from './components/markdown/';
-export * as Modal from './components/modal/';
-export * from './components/manual-cfu-counter/';
-export * from './components/multi-cfu-counter/';
-export * from './components/notification-popup/';
-export * from './components/notifications/';
-export * from './components/pill/';
-export * from './components/progress-circle/';
-export * from './components/required-status-indicator/';
-export * from './components/segmented-control-buttons/';
-export * as Select from './components/select/';
-export * from './components/skeleton-loader/';
-export * from './components/slider/';
-export * from './components/spinner/';
-export * from './components/stat-card/';
-export * from './components/status-badge/';
-export * from './components/stepper/';
-export * from './components/table/';
-export * from './components/tabs/';
-export * from './components/tag/';
-export * from './components/toast/';
-export * from './components/toggle-icon-button/';
-export * from './components/textarea/index';
-export * from './components/tooltip/';
-export * from './components/toggle/';
-export * from './components/checkbox/';
+export * from './components/activity/index.js';
+export * from './components/avatar/index.js';
+export * from './components/card/index.js';
+export * from './components/banner/index.js';
+export * from './components/button/index.js';
+export * as Collapsible from './components/collapsible/index.js';
+export * as Combobox from './components/combobox/index.js';
+export * from './components/graphs/index.js';
+export * from './components/datepicker/index.js';
+export * from './components/divider/index.js';
+export * as Drawer from './components/drawer/index.js';
+export * from './components/dropdown/index.js';
+export * from './components/empty-content/index.js';
+export * from './components/icons/index.js';
+export * from './components/icons/custom/index.js';
+export * from './components/icon-button/index.js';
+export * from './components/image/index.js';
+export * from './components/input/index.js';
+export * from './components/list/index.js';
+export * as Legend from './components/legend/index.js';
+export * from './components/logo/index.js';
+export * from './components/markdown/index.js';
+export * as Modal from './components/modal/index.js';
+export * from './components/manual-cfu-counter/index.js';
+export * from './components/multi-cfu-counter/index.js';
+export * from './components/notification-popup/index.js';
+export * from './components/notifications/index.js';
+export * from './components/pill/index.js';
+export * from './components/progress-circle/index.js';
+export * from './components/required-status-indicator/index.js';
+export * from './components/segmented-control-buttons/index.js';
+export * as Select from './components/select/index.js';
+export * from './components/skeleton-loader/index.js';
+export * from './components/slider/index.js';
+export * from './components/spinner/index.js';
+export * from './components/stat-card/index.js';
+export * from './components/status-badge/index.js';
+export * from './components/stepper/index.js';
+export * from './components/table/index.js';
+export * from './components/tabs/index.js';
+export * from './components/tag/index.js';
+export * from './components/toast/index.js';
+export * from './components/toggle-icon-button/index.js';
+export * from './components/textarea/index.js';
+export * from './components/tooltip/index.js';
+export * from './components/toggle/index.js';
+export * from './components/checkbox/index.js';
 // Styles and Tokens
-export { tokens } from './tokens';
-export { notifications } from './notifications';
-export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor } from './tokens';
+export { tokens } from './tokens.js';
+export { notifications } from './notifications.js';
+export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor, } from './tokens.js';
 // Export tokens modules for granular imports
-export * as TokensColors from './tokens/colors';
-export * as TokensTypography from './tokens/typography';
+export * as TokensColors from './tokens/colors.js';
+export * as TokensTypography from './tokens/typography.js';
 // Export echarts configuration
-export { default as echarts, init } from './echarts-config';
+export { default as echarts, init } from './echarts-config.js';

package/dist/tokens/colors.js

@@ -1,6 +1,6 @@
 export const colors = {
     base: {
-        mist: '#fafafa',
+        mist: '#f9f9fa',
         snow: '#f6f7f7',
         white: {
             default: '#FFFFFF',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.7.5",
+  "version": "2.7.9",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",