npm - @reshape-biotech/design-system - Versions diffs - 2.7.47 → 2.7.49 - Mend

@reshape-biotech/design-system 2.7.47 → 2.7.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (75) hide show

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

@@ -8,7 +8,7 @@
   const { Story } = defineMeta({
     component: Activity,
-    title: 'Design System/Activity',
+    title: 'Components/Activity',
     tags: ['autodocs'],
     parameters: {
       design: {
@@ -56,6 +56,18 @@
       timestamp: '3 Aug 2025, 10:30',
       author: 'Jim Halpert',
     },
+    {
+      icon: 'door-opened' as const,
+      label: 'Door opened',
+      timestamp: '3 Aug 2025, 11:30',
+      tooltip:
+        'Opening the door of the device while it is running can cause temperature fluctuations or misalignment of the images and their analysis',
+    },
+    {
+      icon: 'door-closed' as const,
+      label: 'Door closed',
+      timestamp: '3 Aug 2025, 11:31',
+    },
     {
       icon: 'failed' as const,
       label: 'Job failed',

package/dist/components/activity/Activity.svelte CHANGED Viewed

@@ -2,6 +2,7 @@
   import { type BackgroundClass } from '../icons';
   import ActivityIcon from './ActivityIcon.svelte';
   import type { ActivityIconType } from './ActivityIcon.svelte';
+  import { Tooltip } from '../tooltip';
   import { DateTime } from 'luxon';
   import { twMerge } from 'tailwind-merge';
@@ -14,6 +15,7 @@
     field?: string | null;
     previous_value?: string | null;
     value?: string | null;
+    tooltip?: string | null;
   };
   type Props = {
@@ -32,6 +34,8 @@
     stop: 'bg-neutral',
     warning: 'bg-warning',
     success: 'bg-neutral',
+    'door-opened': 'bg-warning',
+    'door-closed': 'bg-neutral',
     'export-succeeded': 'bg-neutral',
     'export-failed': 'bg-danger',
   };
@@ -58,14 +62,30 @@
 <div class={twMerge('group flex items-stretch gap-3', className)}>
   <div class="flex min-h-12 flex-col items-center gap-1.5">
     <div class="bg-neutral w-0.5 grow group-first:invisible"></div>
-    <div
-      class={twMerge(
-        'text-secondary flex h-5 w-5 shrink-0 items-center justify-center rounded p-0.5',
-        ACTIVITY_BACKGROUND[activity.icon]
-      )}
-    >
-      <ActivityIcon icon={activity.icon} />
-    </div>
+    {#snippet activityIconBadge()}
+      <div
+        class={twMerge(
+          'text-secondary flex h-5 w-5 shrink-0 items-center justify-center rounded p-0.5',
+          ACTIVITY_BACKGROUND[activity.icon]
+        )}
+      >
+        <ActivityIcon icon={activity.icon} />
+      </div>
+    {/snippet}
+    {#if activity.tooltip}
+      <Tooltip>
+        {#snippet trigger()}
+          {@render activityIconBadge()}
+        {/snippet}
+        {#snippet content()}
+          <div class="max-w-72 p-1 text-xs">
+            {activity.tooltip}
+          </div>
+        {/snippet}
+      </Tooltip>
+    {:else}
+      {@render activityIconBadge()}
+    {/if}
     <div class="bg-neutral w-0.5 grow group-last:invisible"></div>
   </div>
   <div class="flex items-center py-4">

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

@@ -8,6 +8,7 @@ type Activity = {
     field?: string | null;
     previous_value?: string | null;
     value?: string | null;
+    tooltip?: string | null;
 };
 type Props = {
     activity: Activity;

package/dist/components/activity/ActivityIcon.svelte CHANGED Viewed

@@ -14,6 +14,8 @@
   import Warning from 'phosphor-svelte/lib/Warning';
   import Check from 'phosphor-svelte/lib/Check';
   import DownloadSimple from 'phosphor-svelte/lib/DownloadSimple';
+  import ArrowSquareUp from 'phosphor-svelte/lib/ArrowSquareUp';
+  import ArrowSquareDown from 'phosphor-svelte/lib/ArrowSquareDown';
   import type { IconColor } from '../icons';
   export type ActivityIconType =
@@ -27,6 +29,8 @@
     | 'stop'
     | 'warning'
     | 'success'
+    | 'door-opened'
+    | 'door-closed'
     | 'export-succeeded'
     | 'export-failed';
@@ -49,6 +53,8 @@
     stop: Stop,
     warning: Warning,
     success: Check,
+    'door-opened': ArrowSquareUp,
+    'door-closed': ArrowSquareDown,
     'export-succeeded': DownloadSimple,
     'export-failed': DownloadSimple,
   };
@@ -64,6 +70,8 @@
     stop: 'icon-secondary',
     warning: 'icon-warning',
     success: 'icon-secondary',
+    'door-opened': 'icon-warning',
+    'door-closed': 'icon-secondary',
     'export-succeeded': 'icon-secondary',
     'export-failed': 'icon-danger',
   };

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

@@ -1,5 +1,5 @@
 import type { Component } from 'svelte';
-export type ActivityIconType = 'add' | 'capture' | 'delete' | 'edit' | 'failed' | 'pause' | 'start' | 'stop' | 'warning' | 'success' | 'export-succeeded' | 'export-failed';
+export type ActivityIconType = 'add' | 'capture' | 'delete' | 'edit' | 'failed' | 'pause' | 'start' | 'stop' | 'warning' | 'success' | 'door-opened' | 'door-closed' | 'export-succeeded' | 'export-failed';
 interface Props {
     icon: ActivityIconType;
     size?: number | string;

package/dist/components/avatar/Avatar.stories.svelte CHANGED Viewed

@@ -4,7 +4,7 @@
   const { Story } = defineMeta({
     component: Avatar,
-    title: 'Design System/Avatar',
+    title: 'Components/Avatar',
     tags: ['autodocs'],
     parameters: {
       design: {

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

@@ -11,7 +11,7 @@
   const { Story } = defineMeta({
     component: Banner,
-    title: 'Design System/Banner',
+    title: 'Components/Banner',
     tags: ['autodocs'],
   });

package/dist/components/button/Button.stories.svelte CHANGED Viewed

@@ -4,7 +4,7 @@
   const { Story } = defineMeta({
     component: Button,
-    title: 'Design System/Button',
+    title: 'Components/Button',
     tags: ['autodocs'],
     parameters: {
       design: {

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

@@ -5,7 +5,7 @@
   import RequiredStatusIndicator from '../required-status-indicator/RequiredStatusIndicator.svelte';
   const { Story } = defineMeta({
-    title: 'Design System/Card',
+    title: 'Components/Card',
     component: Card,
     tags: ['autodocs'],
     argTypes: {

package/dist/components/checkbox/Checkbox.stories.svelte CHANGED Viewed

@@ -4,7 +4,7 @@
   const { Story } = defineMeta({
     component: Checkbox,
-    title: 'Design System/Checkbox',
+    title: 'Components/Checkbox',
     tags: ['autodocs'],
   });

package/dist/components/collapsible/Collapsible.stories.svelte CHANGED Viewed

@@ -6,7 +6,7 @@
   const { Story } = defineMeta({
     component: CollapsibleRootForMeta,
-    title: 'Design System/Collapsible',
+    title: 'Components/Collapsible',
     tags: ['autodocs'],
   });

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

@@ -16,7 +16,7 @@
   const { Story } = defineMeta({
     component: ComboboxRootForMeta,
-    title: 'Design System/Combobox',
+    title: 'Components/Combobox',
     tags: ['autodocs'],
     parameters: {
       design: {

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

@@ -10,7 +10,7 @@
   const { Story } = defineMeta({
     component: DatePicker,
-    title: 'Design System/DatePicker',
+    title: 'Components/DatePicker',
     tags: ['autodocs'],
     parameters: {
       design: {

package/dist/components/divider/Divider.stories.svelte CHANGED Viewed

@@ -4,7 +4,7 @@
   const { Story } = defineMeta({
     component: Divider,
-    title: 'Design System/Divider',
+    title: 'Components/Divider',
     tags: ['autodocs'],
   });
 </script>

package/dist/components/drawer/Drawer.stories.svelte CHANGED Viewed

@@ -5,11 +5,11 @@
   import { Root } from './';
   const { Story } = defineMeta({
-    title: 'Design System/Drawer',
+    title: 'Components/Drawer',
     component: Root,
     tags: ['autodocs'],
     parameters: {
-      layout: 'fullscreen',
+      layout: 'centered',
     },
     argTypes: {
       side: {
@@ -45,7 +45,7 @@
 </script>
 <Story name="Default" asChild>
-  <Drawer.Root open>
+  <Drawer.Root>
     <Drawer.Trigger>
       <Button variant="primary">Open Drawer</Button>
     </Drawer.Trigger>
@@ -76,7 +76,7 @@
 </Story>
 <Story name="Left Side">
-  <Drawer.Root open>
+  <Drawer.Root>
     <Drawer.Trigger>
       <Button variant="secondary">Open Left Drawer</Button>
     </Drawer.Trigger>
@@ -107,7 +107,7 @@
 </Story>
 <Story name="With Overlay">
-  <Drawer.Root open>
+  <Drawer.Root>
     <Drawer.Trigger>
       <Button variant="primary">Open with Overlay</Button>
     </Drawer.Trigger>
@@ -146,7 +146,7 @@
 </Story>
 <Story name="Custom Width">
-  <Drawer.Root open>
+  <Drawer.Root>
     <Drawer.Trigger>
       <Button variant="primary">Open Wide Drawer</Button>
     </Drawer.Trigger>
@@ -182,7 +182,7 @@
 </Story>
 <Story name="Without Close Button">
-  <Drawer.Root open>
+  <Drawer.Root>
     <Drawer.Trigger>
       <Button variant="primary">Open Drawer</Button>
     </Drawer.Trigger>

package/dist/components/dropdown/Dropdown.stories.svelte CHANGED Viewed

@@ -4,7 +4,7 @@
   import * as Dropdown from './index';
   const { Story } = defineMeta({
-    title: 'Design System/Dropdown',
+    title: 'Components/Dropdown',
     tags: ['autodocs'],
   });
 </script>

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

@@ -7,7 +7,7 @@
   const { Story } = defineMeta({
     component: EmptyContent,
-    title: 'Design System/EmptyContent',
+    title: 'Components/EmptyContent',
     tags: ['autodocs'],
   });
 </script>

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

@@ -4,7 +4,7 @@
   import BarChart from './BarChart.svelte';
   const { Story } = defineMeta({
-    title: 'Design System/Graphs/BarChart',
+    title: 'Components/Graphs/BarChart',
     component: BarChart,
     tags: ['autodocs'],
     argTypes: {

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

@@ -4,7 +4,7 @@
   import StackedBarChart from './StackedBarChart.svelte';
   const { Story } = defineMeta({
-    title: 'Design System/Graphs/StackedBarChart',
+    title: 'Components/Graphs/StackedBarChart',
     component: StackedBarChart,
     tags: ['autodocs'],
   });

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

@@ -5,7 +5,7 @@
   const { Story } = defineMeta({
     component: Chart,
-    title: 'Design System/Graphs/Chart',
+    title: 'Components/Graphs/Chart',
     tags: ['autodocs'],
   });
 </script>

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

@@ -6,7 +6,7 @@
   const { Story } = defineMeta({
     component: LineChart,
-    title: 'Design System/Graphs/LineChart',
+    title: 'Components/Graphs/LineChart',
     tags: ['autodocs'],
   });

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

@@ -5,7 +5,7 @@
   const { Story } = defineMeta({
     component: Matrix,
-    title: 'Design System/Graphs/Matrix',
+    title: 'Components/Graphs/Matrix',
     tags: ['autodocs'],
   });

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

@@ -5,7 +5,7 @@
   const { Story } = defineMeta({
     component: MultiLineChart,
-    title: 'Design System/Graphs/MultiLineChart',
+    title: 'Components/Graphs/MultiLineChart',
     tags: ['autodocs'],
   });
 </script>

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

@@ -5,7 +5,7 @@
   const { Story } = defineMeta({
     component: Scatterplot,
-    title: 'Design System/Graphs/Scatterplot',
+    title: 'Components/Graphs/Scatterplot',
     tags: ['autodocs'],
   });

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

@@ -5,7 +5,7 @@
   const { Story } = defineMeta({
     component: IconButton,
-    title: 'Design System/IconButton',
+    title: 'Components/IconButton',
     tags: ['autodocs'],
   });
 </script>

package/dist/components/icons/AnalysisIcon.stories.svelte CHANGED Viewed

@@ -4,7 +4,7 @@
   // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
   const { Story } = defineMeta({
-    title: 'Design System/Icons/AnalysisIcon',
+    title: 'Components/Icons/AnalysisIcon',
     component: AnalysisIcon,
     tags: ['autodocs'],
   });

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

@@ -5,7 +5,7 @@
   const { Story } = defineMeta({
     component: Icon,
-    title: 'Design System/Icons',
+    title: 'Components/Icons',
     tags: ['autodocs'],
     parameters: {
       design: {

package/dist/components/input/Input.stories.svelte CHANGED Viewed

@@ -5,7 +5,7 @@
   const { Story } = defineMeta({
     component: Input,
-    title: 'Design System/Input',
+    title: 'Components/Input',
     tags: ['autodocs'],
     parameters: {
       design: {

package/dist/components/label/Label.stories.svelte CHANGED Viewed

@@ -3,7 +3,7 @@
   import Label from './Label.svelte';
   const { Story } = defineMeta({
-    title: 'Design System/Label',
+    title: 'Components/Label',
     component: Label,
     tags: ['autodocs'],
     argTypes: {

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

@@ -9,7 +9,7 @@
   import Tag from '../tag/Tag.svelte';
   const { Story } = defineMeta({
-    title: 'Design System/Legend',
+    title: 'Components/Legend',
     tags: ['autodocs'],
   });
 </script>

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

@@ -7,7 +7,7 @@
   const { Story } = defineMeta({
     component: List,
-    title: 'Design System/List',
+    title: 'Components/List',
     tags: ['autodocs'],
   });

package/dist/components/logo/Logo.stories.svelte CHANGED Viewed

@@ -4,7 +4,7 @@
   // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
   const { Story } = defineMeta({
-    title: 'Design System/Logo',
+    title: 'Components/Logo',
     component: Logo,
     tags: ['autodocs'],
   });

package/dist/components/manual-cfu-counter/ManualCFUCounter.stories.svelte CHANGED Viewed

@@ -3,7 +3,7 @@
   import ManualCFUCounter from './ManualCFUCounter.svelte';
   const { Story } = defineMeta({
     component: ManualCFUCounter,
-    title: 'Design System/ManualCFUCounter',
+    title: 'Components/ManualCFUCounter',
     tags: ['autodocs'],
     args: {
       imageUrl: '/imgs/ris.jpg',

package/dist/components/markdown/Markdown.stories.svelte CHANGED Viewed

@@ -5,7 +5,7 @@
   const { Story } = defineMeta({
     component: Markdown,
-    title: 'Design System/Markdown',
+    title: 'Components/Markdown',
     tags: ['autodocs'],
   });

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

@@ -9,7 +9,7 @@
   const { Story } = defineMeta({
     component: ModalRootForMeta,
-    title: 'Design System/Modal',
+    title: 'Components/Modal',
     tags: ['autodocs'],
     parameters: {
       layout: 'centered',
@@ -56,7 +56,7 @@
 </Story>
 <Story name="With Description" asChild>
-  <Modal.Root open>
+  <Modal.Root>
     <Modal.Trigger>
       <Button variant="primary">Open Modal with Description</Button>
     </Modal.Trigger>
@@ -77,7 +77,7 @@
 </Story>
 <Story name="Alert Modal" asChild>
-  <Modal.Root open>
+  <Modal.Root>
     <Modal.Trigger>
       <Button variant="primary">Open Alert Modal</Button>
     </Modal.Trigger>
@@ -107,7 +107,7 @@
 </Story>
 <Story name="Sticky Header" asChild>
-  <Modal.Root open>
+  <Modal.Root>
     <Modal.Trigger>
       <Button variant="primary">Modal with Sticky Header</Button>
     </Modal.Trigger>
@@ -150,7 +150,7 @@
 </Story>
 <Story name="Custom Button Rendering" asChild>
-  <Modal.Root open>
+  <Modal.Root>
     <Modal.Trigger>
       <Button variant="primary">Open Custom Button Modal</Button>
     </Modal.Trigger>
@@ -175,7 +175,7 @@
 <Story name="Custom Styling" asChild>
-  <Modal.Root open>
+  <Modal.Root>
     <Modal.Trigger>
       <Button variant="primary">Open Custom Modal</Button>
     </Modal.Trigger>
@@ -198,7 +198,7 @@
 </Story>
 <Story name="API Documentation" asChild>
-  <Modal.Root open>
+  <Modal.Root>
     <Modal.Trigger>
       <Button variant="primary">API Example</Button>
     </Modal.Trigger>
@@ -244,7 +244,7 @@
 </Story>
 <Story name="No Portal" asChild>
-  <Modal.Root open>
+  <Modal.Root>
     <Modal.Trigger>
       <Button variant="primary">Open Modal</Button>
     </Modal.Trigger>

package/dist/components/multi-cfu-counter/MultiCFUCounter.stories.svelte CHANGED Viewed

@@ -3,7 +3,7 @@
   import MultiCFUCounter from './MultiCFUCounter.svelte';
   const { Story } = defineMeta({
     component: MultiCFUCounter,
-    title: 'Design System/MultiCFUCounter',
+    title: 'Components/MultiCFUCounter',
     tags: ['autodocs'],
     args: {
       imageUrl: '/imgs/ris.jpg',

package/dist/components/nav/Nav.stories.svelte CHANGED Viewed

@@ -10,7 +10,7 @@
   // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
   const { Story } = defineMeta({
-    title: 'Design System/Nav',
+    title: 'Components/Nav',
     parameters: {
       layout: 'fullscreen',
     },

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

@@ -6,7 +6,7 @@
   const { Story } = defineMeta({
     component: NotificationPopup,
-    title: 'Design System/NotificationPopup',
+    title: 'Components/NotificationPopup',
     tags: ['autodocs'],
   });

package/dist/components/notifications/Notifications.stories.svelte CHANGED Viewed

@@ -6,7 +6,7 @@
   const { Story } = defineMeta({
     component: Notifications,
-    title: 'Design System/Notifications',
+    title: 'Components/Notifications',
     tags: ['autodocs'],
   });
 </script>

package/dist/components/pill/Pill.stories.svelte CHANGED Viewed

@@ -4,7 +4,7 @@
   // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
   const { Story } = defineMeta({
-    title: 'Design System/Pill',
+    title: 'Components/Pill',
     component: Pill,
     tags: ['autodocs'],
   });

package/dist/components/progress-circle/ProgressCircle.stories.svelte CHANGED Viewed

@@ -4,7 +4,7 @@
   // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
   const { Story } = defineMeta({
-    title: 'Design System/ProgressCircle',
+    title: 'Components/ProgressCircle',
     component: ProgressCircle,
     tags: ['autodocs'],
   });

package/dist/components/required-status-indicator/RequiredStatusIndicator.stories.svelte CHANGED Viewed

@@ -3,7 +3,7 @@
   import RequiredStatusIndicator from './RequiredStatusIndicator.svelte';
   const { Story } = defineMeta({
-    title: 'Design System/RequiredStatusIndicator',
+    title: 'Components/RequiredStatusIndicator',
     component: RequiredStatusIndicator,
     tags: ['autodocs'],
     argTypes: {

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

@@ -6,7 +6,7 @@
   const { Story } = defineMeta({
     component: SegmentedControlButtons,
-    title: 'Design System/SegmentedControlButtons',
+    title: 'Components/SegmentedControlButtons',
     tags: ['autodocs'],
   });
 </script>

package/dist/components/select/Select.stories.svelte CHANGED Viewed

@@ -9,7 +9,7 @@
   import Database from 'phosphor-svelte/lib/Database';
   const { Story } = defineMeta({
-    title: 'Design System/Select(New)',
+    title: 'Components/Select(New)',
     tags: ['autodocs'],
     argTypes: {
       placeholder: { control: 'text', defaultValue: 'Select an option...' },