@reshape-biotech/design-system 2.7.46 → 2.7.48

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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/safelist.css

@@ -0,0 +1,2 @@
+/* Auto-generated safelist — do not edit manually */
+@source inline("-rotate-90 [&>*>.control-button]:flex-col [&>*]:flex-1 [&>*]:flex-none [&>*]:rounded-md! [&>*]:rounded-xl [&>svg]:h-4 [&>svg]:h-5 [&>svg]:w-4 [&>svg]:w-5 badge-error badge-md badge-neutral badge-progress badge-sm badge-success badge-warning bg-accent bg-accent-hover bg-accent-inverse bg-accent-inverse-hover bg-base bg-base-inverse bg-blue bg-blue-hover bg-blue-inverse bg-blue-inverse-hover bg-danger bg-danger-hover bg-danger-inverse bg-danger-inverse-hover bg-dark-accent bg-dark-accent-hover bg-dark-accent-inverse bg-dark-accent-inverse-hover bg-dark-base bg-dark-base-inverse bg-dark-blue bg-dark-blue-hover bg-dark-danger bg-dark-danger-hover bg-dark-danger-inverse bg-dark-danger-inverse-hover bg-dark-lilac bg-dark-lilac-hover bg-dark-lime bg-dark-lime-hover bg-dark-neutral bg-dark-neutral-darker bg-dark-neutral-darker-hover bg-dark-neutral-hover bg-dark-orange bg-dark-orange-hover bg-dark-overlay bg-dark-pear bg-dark-pear-hover bg-dark-pink bg-dark-pink-hover bg-dark-plum bg-dark-plum-hover bg-dark-primary bg-dark-secondary bg-dark-sky bg-dark-sky-hover bg-dark-success bg-dark-success-hover bg-dark-success-inverse bg-dark-success-inverse-hover bg-dark-warning bg-dark-warning-hover bg-dark-warning-inverse bg-dark-warning-inverse-hover bg-lilac bg-lilac-hover bg-lilac-inverse bg-lilac-inverse-hover bg-lime bg-lime-hover bg-lime-inverse bg-lime-inverse-hover bg-neutral bg-neutral-darker bg-neutral-darker-hover bg-neutral-hover bg-neutral-inverse bg-neutral-inverse-hover bg-orange bg-orange-hover bg-orange-inverse bg-orange-inverse-hover bg-overlay bg-pear bg-pear-hover bg-pear-inverse bg-pear-inverse-hover bg-pink bg-pink-hover bg-pink-inverse bg-pink-inverse-hover bg-plum bg-plum-hover bg-plum-inverse bg-plum-inverse-hover bg-sky bg-sky-hover bg-sky-inverse bg-sky-inverse-hover bg-success bg-success-hover bg-success-inverse bg-success-inverse-hover bg-surface bg-surface-secondary bg-warning bg-warning-hover bg-warning-inverse bg-warning-inverse-hover border-axis border-blue-inverse border-danger border-dark-danger border-dark-focus border-dark-hover border-dark-input border-dark-interactive border-dark-static border-focus border-hover border-input border-interactive border-interactive-inverse border-lime-inverse border-orange-inverse border-pink-inverse border-static border-static-inverse border-white data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-neutral data-[highlighted]:text-accent-foreground group-first:invisible group-last:invisible h-[calc(100%-26px)] hover:bg-accent-hover hover:bg-accent-inverse-hover hover:bg-blue-hover hover:bg-blue-inverse-hover hover:bg-danger-hover hover:bg-danger-inverse-hover hover:bg-dark-accent-hover hover:bg-dark-accent-inverse-hover hover:bg-dark-blue-hover hover:bg-dark-danger-hover hover:bg-dark-danger-inverse-hover hover:bg-dark-lilac-hover hover:bg-dark-lime-hover hover:bg-dark-neutral-darker-hover hover:bg-dark-neutral-hover hover:bg-dark-orange-hover hover:bg-dark-pear-hover hover:bg-dark-pink-hover hover:bg-dark-plum-hover hover:bg-dark-sky-hover hover:bg-dark-success-hover hover:bg-dark-success-inverse-hover hover:bg-dark-warning-hover hover:bg-dark-warning-inverse-hover hover:bg-lilac-hover hover:bg-lilac-inverse-hover hover:bg-lime-hover hover:bg-lime-inverse-hover hover:bg-neutral-darker-hover hover:bg-neutral-hover hover:bg-neutral-inverse-hover hover:bg-orange-hover hover:bg-orange-inverse-hover hover:bg-pear-hover hover:bg-pear-inverse-hover hover:bg-pink-hover hover:bg-pink-inverse-hover hover:bg-plum-hover hover:bg-plum-inverse-hover hover:bg-sky-hover hover:bg-sky-inverse-hover hover:bg-success-hover hover:bg-success-inverse-hover hover:bg-warning-hover hover:bg-warning-inverse-hover leading-4 leading-5 leading-6 leading-7 lg:block md:flex outline-dark-focus outline-dark-hover outline-dark-input outline-dark-interactive outline-dark-static outline-focus outline-hover outline-input outline-interactive outline-static ring-1 ring-[#12192a1a] ring-axis ring-blue-inverse ring-danger ring-dark-danger ring-dark-focus ring-dark-hover ring-dark-input ring-dark-interactive ring-dark-static ring-focus ring-hover ring-input ring-interactive ring-interactive-inverse ring-lime-inverse ring-orange-inverse ring-pink-inverse ring-static ring-static-inverse ring-white shadow-container shadow-focus shadow-hover shadow-input shadow-menu sm:gap-2 sm:w-[460px] table-auto table-fixed text-accent text-blue text-danger text-dark-accent text-dark-blue text-dark-danger text-dark-lilac text-dark-lime text-dark-orange text-dark-pear text-dark-pink text-dark-plum text-dark-primary text-dark-primary-inverse text-dark-secondary text-dark-secondary-inverse text-dark-sky text-dark-success text-dark-tertiary text-dark-tertiary-inverse text-dark-warning text-icon-accent text-icon-blue text-icon-danger text-icon-lilac text-icon-lime text-icon-orange text-icon-pear text-icon-pink text-icon-plum text-icon-primary text-icon-primary-inverse text-icon-secondary text-icon-secondary-inverse text-icon-sky text-icon-success text-icon-tertiary text-icon-warning text-icon-white text-lilac text-lime text-orange text-pear text-pink text-plum text-primary text-primary-inverse text-secondary text-secondary-inverse text-sky text-success text-tertiary text-tertiary-inverse text-warning tooltip-bottom tooltip-left tooltip-right tooltip-top transform translate-y-[2px] w-[calc(100%-72px-72px)]");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.7.46",
+  "version": "2.7.48",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -19,11 +19,13 @@
     "dist",
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*",
+    "safelist.css",
     "base.css"
   ],
   "sideEffects": [
     "**/*.css",
     "./dist/app.css",
+    "./dist/safelist.css",
     "./dist/base.css"
   ],
   "svelte": "./dist/index.js",
@@ -372,6 +374,11 @@
     "./safelist-source": {
       "import": "./dist/safelist-source.js",
       "default": "./dist/safelist-source.js"
+    },
+    "./safelist.css": {
+      "style": "./dist/safelist.css",
+      "import": "./dist/safelist.css",
+      "default": "./dist/safelist.css"
     }
   },
   "peerDependencies": {

package/safelist.css

@@ -0,0 +1 @@
+@import './dist/safelist.css';