@reshape-biotech/design-system 2.3.1 → 2.4.0

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

@@ -116,4 +116,12 @@
       author: 'Dwight',
     }}
   />
+  <Activity
+    activity={{
+      icon: 'add',
+      label: 'Project exploded',
+      timestamp: '2 Oct, 1999',
+      author: 'Dwight',
+    }}
+  />
 </Story>

package/dist/components/graphs/utils/tooltipFormatter.js

@@ -1,8 +1,5 @@
 import { textColor } from '../../../tokens';
-const toFixedLocaleString = (value, fractionDigits = 0, locale = undefined) => value?.toLocaleString(locale, {
-    minimumFractionDigits: fractionDigits,
-    maximumFractionDigits: fractionDigits,
-}) ?? '';
+import { toFixedLocaleString } from '../../../../../../utils';
 export const createTooltipFormatter = (config) => {
     const { maxSeriesToShow = 10 } = config;
     return (params) => {

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

@@ -2,18 +2,13 @@ import type { IconComponentProps } from 'phosphor-svelte';
 import type { Component } from 'svelte';
 import type { textColor, backgroundColor } from './../../tokens';
 export type PhosphorIconProps = Component<IconComponentProps, object, ''>;
-export type IconName = 'Aperture' | 'ArrowFatLineRight' | 'ArrowCounterClockwise' | 'ArrowRight' | 'ArrowUpRight' | 'ArrowUpLeft' | 'ArrowUUpLeft' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'BugBeetle' | 'Calendar' | 'CalendarBlank' | 'Camera' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'CursorClick' | 'Database' | 'Dna' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'LineSegments' | 'List' | 'Link' | 'ListMagnifyingGlass' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'MicrosoftExcelLogo' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Ruler' | 'Question' | 'SealCheck' | 'RadioButton' | 'SealQuestion' | 'SealWarning' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SignIn' | 'SignOut' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'Target' | 'TestTube' | 'Trash' | 'TrashSimple' | 'TreeStructure' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
+export type IconName = 'Aperture' | 'Archive' | 'ArrowFatLineRight' | 'ArrowCounterClockwise' | 'ArrowRight' | 'ArrowUpRight' | 'ArrowUpLeft' | 'ArrowUUpLeft' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'BugBeetle' | 'Calendar' | 'CalendarBlank' | 'Camera' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'CursorClick' | 'Database' | 'Dna' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'LineSegments' | 'List' | 'Link' | 'ListMagnifyingGlass' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'MicrosoftExcelLogo' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Ruler' | 'Question' | 'SealCheck' | 'RadioButton' | 'SealQuestion' | 'SealWarning' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SignIn' | 'SignOut' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'Target' | 'TestTube' | 'Trash' | 'TrashSimple' | 'TreeStructure' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
 export declare const iconMap: Record<IconName, PhosphorIconProps>;
 export declare function renderIcon(iconName: keyof typeof iconMap): PhosphorIconProps;
 export type BackgroundClass = `bg-${keyof typeof backgroundColor}`;
 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 interface IconComponentProps {
-    size?: number | string;
-    color?: string;
-    weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';
-}
 export { default as Icon } from './Icon.svelte';
 export type IconProps = {
     iconName: IconName;

package/dist/components/icons/index.js

@@ -1,4 +1,5 @@
 import Aperture from 'phosphor-svelte/lib/Aperture';
+import Archive from 'phosphor-svelte/lib/Archive';
 import ArrowFatLineRight from 'phosphor-svelte/lib/ArrowFatLineRight';
 import ArrowCounterClockwise from 'phosphor-svelte/lib/ArrowCounterClockwise';
 import ArrowRight from 'phosphor-svelte/lib/ArrowRight';
@@ -110,6 +111,7 @@ import TrashSimple from 'phosphor-svelte/lib/TrashSimple';
 import TreeStructure from 'phosphor-svelte/lib/TreeStructure';
 import UserCircle from 'phosphor-svelte/lib/UserCircle';
 import UserPlus from 'phosphor-svelte/lib/UserPlus';
+import User from 'phosphor-svelte/lib/User';
 import Video from 'phosphor-svelte/lib/Video';
 import Warning from 'phosphor-svelte/lib/Warning';
 import WarningCircle from 'phosphor-svelte/lib/WarningCircle';
@@ -117,6 +119,7 @@ import WifiSlash from 'phosphor-svelte/lib/WifiSlash';
 import X from 'phosphor-svelte/lib/X';
 export const iconMap = {
     Aperture,
+    Archive,
     ArrowFatLineRight,
     ArrowCounterClockwise,
     ArrowRight,

package/dist/components/manual-cfu-counter/ManualCFUCounter.svelte

@@ -534,7 +534,7 @@
     {@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.

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

@@ -9,11 +9,7 @@
 <Dialog.Overlay forceMount {...restProps}>
   {#snippet child({ props, open })}
     {#if open}
-      <div
-        {...props}
-        class="fixed inset-0 z-50 bg-overlay backdrop-blur-sm"
-        transition:fade={{ duration: 200 }}
-      >
+      <div {...props} class="fixed inset-0 z-50 bg-overlay" transition:fade={{ duration: 200 }}>
         {#if children}
           {@render children()}
         {/if}

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

@@ -623,7 +623,7 @@
     {@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.

package/dist/components/progress-circle/ProgressCircle.svelte

@@ -19,7 +19,7 @@
   const radius = size === 'md' ? 7 : 6;
 
   // Create the circle path
-  const path = `M ${center} ${center - radius} 
+  const path = `M ${center} ${center - radius}
               A ${radius} ${radius} 0 1 1 ${center - 0.01} ${center - radius}`;
 </script>
 

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

@@ -13,8 +13,8 @@
   let { class: className = '', children, ...restProps }: Props = $props();
 
   const baseClasses = `
-        relative flex w-full h-auto gap-2 cursor-default select-none items-center justify-between rounded-lg p-3 text-sm outline-none 
-        focus:bg-neutral focus:text-accent-foreground 
+        relative flex w-full h-auto gap-2 cursor-default select-none items-center justify-between rounded-lg p-3 text-sm outline-none
+        focus:bg-neutral focus:text-accent-foreground
         data-[disabled]:pointer-events-none data-[disabled]:opacity-50
         data-[highlighted]:bg-neutral data-[highlighted]:text-accent-foreground
     `;

package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte

@@ -86,7 +86,7 @@
 <Input
   bind:value={() => getStringValue(), (v) => setNumericValue(v)}
   placeholder={String(placeholder)}
-  type={'number'}
+  type={'text'}
   inputmode={'decimal'}
   pattern={config?.schema?.type === 'integer' ? '-?\\d*' : '-?\\d*\\.?\\d*'}
   {readonly}

package/dist/tailwind.preset.d.ts

@@ -479,6 +479,8 @@ declare const config: {
                 input: string;
                 container: string;
                 menu: string;
+                hover: string;
+                focus: string;
             };
             outlineColor: {
                 'dark-static': string;
@@ -498,6 +500,7 @@ declare const config: {
             };
             fontSize: {
                 xxs: string;
+                label: string;
             };
         };
     };

package/dist/tailwind.preset.js

@@ -18,6 +18,7 @@ const config = {
             },
             fontSize: {
                 xxs: '10px',
+                label: '13px',
             },
         },
     },

package/dist/tokens.d.ts

@@ -190,11 +190,13 @@ declare const chartColor: {
     accent: string;
     blue: string;
     orange: string;
+    'orange-light': string;
     sky: string;
     pink: string;
     plum: string;
     lilac: string;
     lime: string;
+    'lime-light': string;
     pear: string;
     green: string;
     yellow: string;
@@ -217,6 +219,8 @@ declare const boxShadow: {
     input: string;
     container: string;
     menu: string;
+    hover: string;
+    focus: string;
 };
 export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor, chartColor, annotationOutputFadedFillColors, annotationOutputFadedStrokeColors, };
 export declare const tokens: {
@@ -696,6 +700,8 @@ export declare const tokens: {
         input: string;
         container: string;
         menu: string;
+        hover: string;
+        focus: string;
     };
     outlineColor: {
         'dark-static': string;
@@ -713,11 +719,13 @@ export declare const tokens: {
         accent: string;
         blue: string;
         orange: string;
+        'orange-light': string;
         sky: string;
         pink: string;
         plum: string;
         lilac: string;
         lime: string;
+        'lime-light': string;
         pear: string;
         green: string;
         yellow: string;

package/dist/tokens.js

@@ -127,11 +127,13 @@ const lightChartColor = {
     accent: colors.periwinkle[5].default,
     blue: colors.blue[5].default,
     orange: colors.orange[5].default,
+    'orange-light': colors.orange[5][10],
     sky: colors.sky[5].default,
     pink: colors.pink[5].default,
     plum: colors.plum[5].default,
     lilac: colors.lilac[5].default,
     lime: colors.lime[5].default,
+    'lime-light': colors.lime[5][10],
     pear: colors.pear[5].default,
     green: colors.green[5].default,
     yellow: colors.yellow[5].default,
@@ -356,6 +358,8 @@ const boxShadow = {
     input: `0 1px 4px 0 ${colors.shadow[4]}`,
     container: `0 2px 16px 0 ${colors.shadow[2]}`,
     menu: `0 4px 20px 0 ${colors.shadow[6]}, 0 0 0 1px ${colors.shadow[8]}`,
+    hover: `0 0 0 1px ${colors.periwinkle[5][25]}`,
+    focus: `0 0 0 1px ${colors.periwinkle[5].default}`,
 };
 // Export individual token categories for tree-shaking
 export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor, chartColor, annotationOutputFadedFillColors, annotationOutputFadedStrokeColors, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -40,29 +40,65 @@
       "import": "./dist/components/*/index.js",
       "default": "./dist/components/*/index.js"
     },
+    "./components/drawer": {
+      "types": "./dist/components/drawer/index.d.ts",
+      "svelte": "./dist/components/drawer/index.js",
+      "import": "./dist/components/drawer/index.js",
+      "default": "./dist/components/drawer/index.js"
+    },
     "./components/textarea": {
       "types": "./dist/components/textarea/index.d.ts",
       "svelte": "./dist/components/textarea/index.js",
       "import": "./dist/components/textarea/index.js",
       "default": "./dist/components/textarea/index.js"
     },
-    "./components/collapsible": {
-      "types": "./dist/components/collapsible/index.d.ts",
-      "svelte": "./dist/components/collapsible/index.js",
-      "import": "./dist/components/collapsible/index.js",
-      "default": "./dist/components/collapsible/index.js"
+    "./components/spinner": {
+      "types": "./dist/components/spinner/index.d.ts",
+      "svelte": "./dist/components/spinner/index.js",
+      "import": "./dist/components/spinner/index.js",
+      "default": "./dist/components/spinner/index.js"
     },
-    "./components/toggle-icon-button": {
-      "types": "./dist/components/toggle-icon-button/index.d.ts",
-      "svelte": "./dist/components/toggle-icon-button/index.js",
-      "import": "./dist/components/toggle-icon-button/index.js",
-      "default": "./dist/components/toggle-icon-button/index.js"
+    "./components/activity": {
+      "types": "./dist/components/activity/index.d.ts",
+      "svelte": "./dist/components/activity/index.js",
+      "import": "./dist/components/activity/index.js",
+      "default": "./dist/components/activity/index.js"
     },
-    "./components/required-status-indicator": {
-      "types": "./dist/components/required-status-indicator/index.d.ts",
-      "svelte": "./dist/components/required-status-indicator/index.js",
-      "import": "./dist/components/required-status-indicator/index.js",
-      "default": "./dist/components/required-status-indicator/index.js"
+    "./components/slider": {
+      "types": "./dist/components/slider/index.d.ts",
+      "svelte": "./dist/components/slider/index.js",
+      "import": "./dist/components/slider/index.js",
+      "default": "./dist/components/slider/index.js"
+    },
+    "./components/datepicker": {
+      "types": "./dist/components/datepicker/index.d.ts",
+      "svelte": "./dist/components/datepicker/index.js",
+      "import": "./dist/components/datepicker/index.js",
+      "default": "./dist/components/datepicker/index.js"
+    },
+    "./components/list": {
+      "types": "./dist/components/list/index.d.ts",
+      "svelte": "./dist/components/list/index.js",
+      "import": "./dist/components/list/index.js",
+      "default": "./dist/components/list/index.js"
+    },
+    "./components/tabs": {
+      "types": "./dist/components/tabs/index.d.ts",
+      "svelte": "./dist/components/tabs/index.js",
+      "import": "./dist/components/tabs/index.js",
+      "default": "./dist/components/tabs/index.js"
+    },
+    "./components/skeleton-loader": {
+      "types": "./dist/components/skeleton-loader/index.d.ts",
+      "svelte": "./dist/components/skeleton-loader/index.js",
+      "import": "./dist/components/skeleton-loader/index.js",
+      "default": "./dist/components/skeleton-loader/index.js"
+    },
+    "./components/status-badge": {
+      "types": "./dist/components/status-badge/index.d.ts",
+      "svelte": "./dist/components/status-badge/index.js",
+      "import": "./dist/components/status-badge/index.js",
+      "default": "./dist/components/status-badge/index.js"
     },
     "./components/pill": {
       "types": "./dist/components/pill/index.d.ts",
@@ -70,47 +106,35 @@
       "import": "./dist/components/pill/index.js",
       "default": "./dist/components/pill/index.js"
     },
-    "./components/select": {
-      "types": "./dist/components/select/index.d.ts",
-      "svelte": "./dist/components/select/index.js",
-      "import": "./dist/components/select/index.js",
-      "default": "./dist/components/select/index.js"
-    },
-    "./components/table": {
-      "types": "./dist/components/table/index.d.ts",
-      "svelte": "./dist/components/table/index.js",
-      "import": "./dist/components/table/index.js",
-      "default": "./dist/components/table/index.js"
-    },
-    "./components/progress-circle": {
-      "types": "./dist/components/progress-circle/index.d.ts",
-      "svelte": "./dist/components/progress-circle/index.js",
-      "import": "./dist/components/progress-circle/index.js",
-      "default": "./dist/components/progress-circle/index.js"
+    "./components/markdown": {
+      "types": "./dist/components/markdown/index.d.ts",
+      "svelte": "./dist/components/markdown/index.js",
+      "import": "./dist/components/markdown/index.js",
+      "default": "./dist/components/markdown/index.js"
     },
-    "./components/tag": {
-      "types": "./dist/components/tag/index.d.ts",
-      "svelte": "./dist/components/tag/index.js",
-      "import": "./dist/components/tag/index.js",
-      "default": "./dist/components/tag/index.js"
+    "./components/icon-button": {
+      "types": "./dist/components/icon-button/index.d.ts",
+      "svelte": "./dist/components/icon-button/index.js",
+      "import": "./dist/components/icon-button/index.js",
+      "default": "./dist/components/icon-button/index.js"
     },
-    "./components/toast": {
-      "types": "./dist/components/toast/index.d.ts",
-      "svelte": "./dist/components/toast/index.js",
-      "import": "./dist/components/toast/index.js",
-      "default": "./dist/components/toast/index.js"
+    "./components/graphs": {
+      "types": "./dist/components/graphs/index.d.ts",
+      "svelte": "./dist/components/graphs/index.js",
+      "import": "./dist/components/graphs/index.js",
+      "default": "./dist/components/graphs/index.js"
     },
-    "./components/drawer": {
-      "types": "./dist/components/drawer/index.d.ts",
-      "svelte": "./dist/components/drawer/index.js",
-      "import": "./dist/components/drawer/index.js",
-      "default": "./dist/components/drawer/index.js"
+    "./components/divider": {
+      "types": "./dist/components/divider/index.d.ts",
+      "svelte": "./dist/components/divider/index.js",
+      "import": "./dist/components/divider/index.js",
+      "default": "./dist/components/divider/index.js"
     },
-    "./components/card": {
-      "types": "./dist/components/card/index.d.ts",
-      "svelte": "./dist/components/card/index.js",
-      "import": "./dist/components/card/index.js",
-      "default": "./dist/components/card/index.js"
+    "./components/stat-card": {
+      "types": "./dist/components/stat-card/index.d.ts",
+      "svelte": "./dist/components/stat-card/index.js",
+      "import": "./dist/components/stat-card/index.js",
+      "default": "./dist/components/stat-card/index.js"
     },
     "./components/combobox": {
       "types": "./dist/components/combobox/index.d.ts",
@@ -118,47 +142,29 @@
       "import": "./dist/components/combobox/index.js",
       "default": "./dist/components/combobox/index.js"
     },
-    "./components/dropdown": {
-      "types": "./dist/components/dropdown/index.d.ts",
-      "svelte": "./dist/components/dropdown/index.js",
-      "import": "./dist/components/dropdown/index.js",
-      "default": "./dist/components/dropdown/index.js"
-    },
     "./components/button": {
       "types": "./dist/components/button/index.d.ts",
       "svelte": "./dist/components/button/index.js",
       "import": "./dist/components/button/index.js",
       "default": "./dist/components/button/index.js"
     },
-    "./components/tooltip": {
-      "types": "./dist/components/tooltip/index.d.ts",
-      "svelte": "./dist/components/tooltip/index.js",
-      "import": "./dist/components/tooltip/index.js",
-      "default": "./dist/components/tooltip/index.js"
-    },
-    "./components/icon-button": {
-      "types": "./dist/components/icon-button/index.d.ts",
-      "svelte": "./dist/components/icon-button/index.js",
-      "import": "./dist/components/icon-button/index.js",
-      "default": "./dist/components/icon-button/index.js"
-    },
-    "./components/divider": {
-      "types": "./dist/components/divider/index.d.ts",
-      "svelte": "./dist/components/divider/index.js",
-      "import": "./dist/components/divider/index.js",
-      "default": "./dist/components/divider/index.js"
+    "./components/collapsible": {
+      "types": "./dist/components/collapsible/index.d.ts",
+      "svelte": "./dist/components/collapsible/index.js",
+      "import": "./dist/components/collapsible/index.js",
+      "default": "./dist/components/collapsible/index.js"
     },
-    "./components/label": {
-      "types": "./dist/components/label/index.d.ts",
-      "svelte": "./dist/components/label/index.js",
-      "import": "./dist/components/label/index.js",
-      "default": "./dist/components/label/index.js"
+    "./components/icons": {
+      "types": "./dist/components/icons/index.d.ts",
+      "svelte": "./dist/components/icons/index.js",
+      "import": "./dist/components/icons/index.js",
+      "default": "./dist/components/icons/index.js"
     },
-    "./components/datepicker": {
-      "types": "./dist/components/datepicker/index.d.ts",
-      "svelte": "./dist/components/datepicker/index.js",
-      "import": "./dist/components/datepicker/index.js",
-      "default": "./dist/components/datepicker/index.js"
+    "./components/toast": {
+      "types": "./dist/components/toast/index.d.ts",
+      "svelte": "./dist/components/toast/index.js",
+      "import": "./dist/components/toast/index.js",
+      "default": "./dist/components/toast/index.js"
     },
     "./components/multi-cfu-counter": {
       "types": "./dist/components/multi-cfu-counter/index.d.ts",
@@ -166,11 +172,17 @@
       "import": "./dist/components/multi-cfu-counter/index.js",
       "default": "./dist/components/multi-cfu-counter/index.js"
     },
-    "./components/graphs": {
-      "types": "./dist/components/graphs/index.d.ts",
-      "svelte": "./dist/components/graphs/index.js",
-      "import": "./dist/components/graphs/index.js",
-      "default": "./dist/components/graphs/index.js"
+    "./components/tag": {
+      "types": "./dist/components/tag/index.d.ts",
+      "svelte": "./dist/components/tag/index.js",
+      "import": "./dist/components/tag/index.js",
+      "default": "./dist/components/tag/index.js"
+    },
+    "./components/checkbox": {
+      "types": "./dist/components/checkbox/index.d.ts",
+      "svelte": "./dist/components/checkbox/index.js",
+      "import": "./dist/components/checkbox/index.js",
+      "default": "./dist/components/checkbox/index.js"
     },
     "./components/empty-content": {
       "types": "./dist/components/empty-content/index.d.ts",
@@ -178,23 +190,11 @@
       "import": "./dist/components/empty-content/index.js",
       "default": "./dist/components/empty-content/index.js"
     },
-    "./components/stepper": {
-      "types": "./dist/components/stepper/index.d.ts",
-      "svelte": "./dist/components/stepper/index.js",
-      "import": "./dist/components/stepper/index.js",
-      "default": "./dist/components/stepper/index.js"
-    },
-    "./components/skeleton-loader": {
-      "types": "./dist/components/skeleton-loader/index.d.ts",
-      "svelte": "./dist/components/skeleton-loader/index.js",
-      "import": "./dist/components/skeleton-loader/index.js",
-      "default": "./dist/components/skeleton-loader/index.js"
-    },
-    "./components/tabs": {
-      "types": "./dist/components/tabs/index.d.ts",
-      "svelte": "./dist/components/tabs/index.js",
-      "import": "./dist/components/tabs/index.js",
-      "default": "./dist/components/tabs/index.js"
+    "./components/table": {
+      "types": "./dist/components/table/index.d.ts",
+      "svelte": "./dist/components/table/index.js",
+      "import": "./dist/components/table/index.js",
+      "default": "./dist/components/table/index.js"
     },
     "./components/toggle": {
       "types": "./dist/components/toggle/index.d.ts",
@@ -202,35 +202,17 @@
       "import": "./dist/components/toggle/index.js",
       "default": "./dist/components/toggle/index.js"
     },
-    "./components/notifications": {
-      "types": "./dist/components/notifications/index.d.ts",
-      "svelte": "./dist/components/notifications/index.js",
-      "import": "./dist/components/notifications/index.js",
-      "default": "./dist/components/notifications/index.js"
-    },
-    "./components/slider": {
-      "types": "./dist/components/slider/index.d.ts",
-      "svelte": "./dist/components/slider/index.js",
-      "import": "./dist/components/slider/index.js",
-      "default": "./dist/components/slider/index.js"
-    },
-    "./components/manual-cfu-counter": {
-      "types": "./dist/components/manual-cfu-counter/index.d.ts",
-      "svelte": "./dist/components/manual-cfu-counter/index.js",
-      "import": "./dist/components/manual-cfu-counter/index.js",
-      "default": "./dist/components/manual-cfu-counter/index.js"
-    },
-    "./components/icons": {
-      "types": "./dist/components/icons/index.d.ts",
-      "svelte": "./dist/components/icons/index.js",
-      "import": "./dist/components/icons/index.js",
-      "default": "./dist/components/icons/index.js"
+    "./components/stepper": {
+      "types": "./dist/components/stepper/index.d.ts",
+      "svelte": "./dist/components/stepper/index.js",
+      "import": "./dist/components/stepper/index.js",
+      "default": "./dist/components/stepper/index.js"
     },
-    "./components/logo": {
-      "types": "./dist/components/logo/index.d.ts",
-      "svelte": "./dist/components/logo/index.js",
-      "import": "./dist/components/logo/index.js",
-      "default": "./dist/components/logo/index.js"
+    "./components/sjsf-wrappers": {
+      "types": "./dist/components/sjsf-wrappers/index.d.ts",
+      "svelte": "./dist/components/sjsf-wrappers/index.js",
+      "import": "./dist/components/sjsf-wrappers/index.js",
+      "default": "./dist/components/sjsf-wrappers/index.js"
     },
     "./components/image": {
       "types": "./dist/components/image/index.d.ts",
@@ -238,59 +220,47 @@
       "import": "./dist/components/image/index.js",
       "default": "./dist/components/image/index.js"
     },
+    "./components/banner": {
+      "types": "./dist/components/banner/index.d.ts",
+      "svelte": "./dist/components/banner/index.js",
+      "import": "./dist/components/banner/index.js",
+      "default": "./dist/components/banner/index.js"
+    },
     "./components/avatar": {
       "types": "./dist/components/avatar/index.d.ts",
       "svelte": "./dist/components/avatar/index.js",
       "import": "./dist/components/avatar/index.js",
       "default": "./dist/components/avatar/index.js"
     },
-    "./components/spinner": {
-      "types": "./dist/components/spinner/index.d.ts",
-      "svelte": "./dist/components/spinner/index.js",
-      "import": "./dist/components/spinner/index.js",
-      "default": "./dist/components/spinner/index.js"
-    },
-    "./components/status-badge": {
-      "types": "./dist/components/status-badge/index.d.ts",
-      "svelte": "./dist/components/status-badge/index.js",
-      "import": "./dist/components/status-badge/index.js",
-      "default": "./dist/components/status-badge/index.js"
-    },
-    "./components/checkbox": {
-      "types": "./dist/components/checkbox/index.d.ts",
-      "svelte": "./dist/components/checkbox/index.js",
-      "import": "./dist/components/checkbox/index.js",
-      "default": "./dist/components/checkbox/index.js"
-    },
     "./components/input": {
       "types": "./dist/components/input/index.d.ts",
       "svelte": "./dist/components/input/index.js",
       "import": "./dist/components/input/index.js",
       "default": "./dist/components/input/index.js"
     },
-    "./components/list": {
-      "types": "./dist/components/list/index.d.ts",
-      "svelte": "./dist/components/list/index.js",
-      "import": "./dist/components/list/index.js",
-      "default": "./dist/components/list/index.js"
+    "./components/toggle-icon-button": {
+      "types": "./dist/components/toggle-icon-button/index.d.ts",
+      "svelte": "./dist/components/toggle-icon-button/index.js",
+      "import": "./dist/components/toggle-icon-button/index.js",
+      "default": "./dist/components/toggle-icon-button/index.js"
     },
-    "./components/sjsf-wrappers": {
-      "types": "./dist/components/sjsf-wrappers/index.d.ts",
-      "svelte": "./dist/components/sjsf-wrappers/index.js",
-      "import": "./dist/components/sjsf-wrappers/index.js",
-      "default": "./dist/components/sjsf-wrappers/index.js"
+    "./components/notifications": {
+      "types": "./dist/components/notifications/index.d.ts",
+      "svelte": "./dist/components/notifications/index.js",
+      "import": "./dist/components/notifications/index.js",
+      "default": "./dist/components/notifications/index.js"
     },
-    "./components/notification-popup": {
-      "types": "./dist/components/notification-popup/index.d.ts",
-      "svelte": "./dist/components/notification-popup/index.js",
-      "import": "./dist/components/notification-popup/index.js",
-      "default": "./dist/components/notification-popup/index.js"
+    "./components/tooltip": {
+      "types": "./dist/components/tooltip/index.d.ts",
+      "svelte": "./dist/components/tooltip/index.js",
+      "import": "./dist/components/tooltip/index.js",
+      "default": "./dist/components/tooltip/index.js"
     },
-    "./components/markdown": {
-      "types": "./dist/components/markdown/index.d.ts",
-      "svelte": "./dist/components/markdown/index.js",
-      "import": "./dist/components/markdown/index.js",
-      "default": "./dist/components/markdown/index.js"
+    "./components/manual-cfu-counter": {
+      "types": "./dist/components/manual-cfu-counter/index.d.ts",
+      "svelte": "./dist/components/manual-cfu-counter/index.js",
+      "import": "./dist/components/manual-cfu-counter/index.js",
+      "default": "./dist/components/manual-cfu-counter/index.js"
     },
     "./components/segmented-control-buttons": {
       "types": "./dist/components/segmented-control-buttons/index.d.ts",
@@ -298,29 +268,59 @@
       "import": "./dist/components/segmented-control-buttons/index.js",
       "default": "./dist/components/segmented-control-buttons/index.js"
     },
+    "./components/required-status-indicator": {
+      "types": "./dist/components/required-status-indicator/index.d.ts",
+      "svelte": "./dist/components/required-status-indicator/index.js",
+      "import": "./dist/components/required-status-indicator/index.js",
+      "default": "./dist/components/required-status-indicator/index.js"
+    },
+    "./components/logo": {
+      "types": "./dist/components/logo/index.d.ts",
+      "svelte": "./dist/components/logo/index.js",
+      "import": "./dist/components/logo/index.js",
+      "default": "./dist/components/logo/index.js"
+    },
+    "./components/progress-circle": {
+      "types": "./dist/components/progress-circle/index.d.ts",
+      "svelte": "./dist/components/progress-circle/index.js",
+      "import": "./dist/components/progress-circle/index.js",
+      "default": "./dist/components/progress-circle/index.js"
+    },
     "./components/modal": {
       "types": "./dist/components/modal/index.d.ts",
       "svelte": "./dist/components/modal/index.js",
       "import": "./dist/components/modal/index.js",
       "default": "./dist/components/modal/index.js"
     },
-    "./components/activity": {
-      "types": "./dist/components/activity/index.d.ts",
-      "svelte": "./dist/components/activity/index.js",
-      "import": "./dist/components/activity/index.js",
-      "default": "./dist/components/activity/index.js"
+    "./components/notification-popup": {
+      "types": "./dist/components/notification-popup/index.d.ts",
+      "svelte": "./dist/components/notification-popup/index.js",
+      "import": "./dist/components/notification-popup/index.js",
+      "default": "./dist/components/notification-popup/index.js"
     },
-    "./components/banner": {
-      "types": "./dist/components/banner/index.d.ts",
-      "svelte": "./dist/components/banner/index.js",
-      "import": "./dist/components/banner/index.js",
-      "default": "./dist/components/banner/index.js"
+    "./components/card": {
+      "types": "./dist/components/card/index.d.ts",
+      "svelte": "./dist/components/card/index.js",
+      "import": "./dist/components/card/index.js",
+      "default": "./dist/components/card/index.js"
     },
-    "./components/stat-card": {
-      "types": "./dist/components/stat-card/index.d.ts",
-      "svelte": "./dist/components/stat-card/index.js",
-      "import": "./dist/components/stat-card/index.js",
-      "default": "./dist/components/stat-card/index.js"
+    "./components/select": {
+      "types": "./dist/components/select/index.d.ts",
+      "svelte": "./dist/components/select/index.js",
+      "import": "./dist/components/select/index.js",
+      "default": "./dist/components/select/index.js"
+    },
+    "./components/dropdown": {
+      "types": "./dist/components/dropdown/index.d.ts",
+      "svelte": "./dist/components/dropdown/index.js",
+      "import": "./dist/components/dropdown/index.js",
+      "default": "./dist/components/dropdown/index.js"
+    },
+    "./components/label": {
+      "types": "./dist/components/label/index.d.ts",
+      "svelte": "./dist/components/label/index.js",
+      "import": "./dist/components/label/index.js",
+      "default": "./dist/components/label/index.js"
     },
     "./tokens": {
       "types": "./dist/tokens.d.ts",