@reshape-biotech/design-system 2.7.2 → 2.7.4

package/dist/components/button/Button.svelte

@@ -100,17 +100,27 @@
 
     border-radius: 0.5rem;
 
+    border-width: 1px;
+
+    border-color: transparent;
+
     font-size: 0.875rem;
 
+    line-height: 1.25rem;
+
     font-weight: 500;
 
-    line-height: 1.5rem;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 
     transition-duration: 150ms
 }
 
 .button:disabled {
 
+    border-style: none;
+
     background-color: #12192a0A;
 
     --tw-text-opacity: 1;
@@ -145,7 +155,9 @@
 
     border-radius: 0.375rem;
 
-    padding: 0.5rem
+    padding-left: 0.5rem;
+
+    padding-right: 0.5rem
 }
   .btn-size-sm {
 
@@ -153,11 +165,7 @@
 
     padding-left: 0.75rem;
 
-    padding-right: 0.75rem;
-
-    padding-top: 0.5rem;
-
-    padding-bottom: 0.5rem
+    padding-right: 0.75rem
 }
   .btn-size-md {
 
@@ -165,11 +173,7 @@
 
     padding-left: 1rem;
 
-    padding-right: 1rem;
-
-    padding-top: 0.75rem;
-
-    padding-bottom: 0.75rem
+    padding-right: 1rem
 }
   .btn-size-lg {
 
@@ -179,11 +183,7 @@
 
     padding-left: 1.25rem;
 
-    padding-right: 1.25rem;
-
-    padding-top: 1rem;
-
-    padding-bottom: 1rem
+    padding-right: 1.25rem
 }
   @media (min-width: 1280px) {
 
@@ -198,13 +198,21 @@
   /* Button variants */
   .btn-primary {
 
+    border-color: #12192A1A;
+
     --tw-bg-opacity: 1;
 
     background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
 
     --tw-text-opacity: 1;
 
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+
+    --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.02);
+
+    --tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
+
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
   .btn-primary:hover {
 
@@ -243,13 +251,21 @@
 }
   .btn-danger {
 
+    border-color: #12192A1A;
+
     --tw-bg-opacity: 1;
 
     background-color: rgb(235 70 71 / var(--tw-bg-opacity, 1));
 
     --tw-text-opacity: 1;
 
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+
+    --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.02);
+
+    --tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
+
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
   .btn-danger:hover {
 
@@ -259,8 +275,6 @@
 }
   .btn-outline {
 
-    border-width: 1px;
-
     border-color: #12192A1A;
 
     --tw-bg-opacity: 1;

package/dist/components/card/CardWrapper.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
 
   type Props = {
     Header?: Snippet;
     children: Snippet;
     Footer?: Snippet;
-    class?: string;
+    class?: ClassValue;
     variant?: 'default' | 'compact';
   };
 
@@ -13,30 +14,38 @@
     Header,
     children,
     Footer,
-    class: additionalClasses = '',
+    class: additionalClasses,
     variant = 'default',
   }: Props = $props();
 </script>
 
-<div class="wrapper {variant} {additionalClasses}">
+<div class={['wrapper', variant, additionalClasses]}>
   {#if Header}
     <header
-      class="flex w-full items-center justify-between {variant === 'default'
-        ? 'min-h-10 px-4'
-        : 'min-h-8 px-3'}"
+      class={[
+        'flex w-full items-center justify-between',
+        {
+          'min-h-10 px-4': variant === 'default',
+          'min-h-8 px-3': variant === 'compact',
+        },
+      ]}
     >
       {@render Header()}
     </header>
   {/if}
   <div
-    class="flex w-full !overflow-hidden [&>*]:w-full {variant === 'default'
-      ? '[&>*]:rounded-xl'
-      : '[&>*]:rounded-[10px]'}"
+    class={[
+      'flex w-full flex-col !overflow-hidden [&>*]:w-full',
+      {
+        'gap-1 [&>*]:rounded-xl': variant === 'default',
+        'gap-0.5 [&>*]:rounded-[10px]': variant === 'compact',
+      },
+    ]}
   >
     {@render children()}
   </div>
   {#if Footer}
-    <footer class="flex min-h-8 w-full items-center {variant === 'default' ? 'px-4' : 'px-3'}">
+    <footer class="flex min-h-8 w-full items-center px-3">
       {@render Footer()}
     </footer>
   {/if}

package/dist/components/card/CardWrapper.svelte.d.ts

@@ -1,9 +1,10 @@
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 type Props = {
     Header?: Snippet;
     children: Snippet;
     Footer?: Snippet;
-    class?: string;
+    class?: ClassValue;
     variant?: 'default' | 'compact';
 };
 declare const CardWrapper: import("svelte").Component<Props, {}, "">;

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

@@ -12,39 +12,39 @@
 
 <Story name="Base" asChild>
   <div class="flex flex-col gap-2">
-    <IconButton aria-label="Add" variant="primary" icon={Plus} />
-    <IconButton aria-label="Add" variant="secondary" icon={Plus} />
-    <IconButton aria-label="Add" variant="danger" icon={Plus} />
-    <IconButton aria-label="Add" variant="transparent" icon={Plus} />
+    <IconButton aria-label="Add" variant="primary" />
+    <IconButton aria-label="Add" variant="secondary" />
+    <IconButton aria-label="Add" variant="danger" />
+    <IconButton aria-label="Add" variant="transparent" />
   </div>
 </Story>
 
 <Story name="Sizes" asChild>
   <div class="flex flex-col gap-2">
-    <IconButton aria-label="Add" icon={Plus} variant="secondary" size="xs" />
-    <IconButton aria-label="Add" icon={Plus} variant="secondary" size="sm" />
-    <IconButton aria-label="Add" icon={Plus} variant="secondary" size="md" />
+    <IconButton aria-label="Add" variant="secondary" size="xs" />
+    <IconButton aria-label="Add" variant="secondary" size="sm" />
+    <IconButton aria-label="Add" variant="secondary" size="md" />
   </div>
 </Story>
 <Story name="Not rounded base" asChild>
   <div class="flex flex-col gap-2">
-    <IconButton aria-label="Add" icon={Plus} variant="primary" rounded={false} />
-    <IconButton aria-label="Add" icon={Plus} variant="secondary" rounded={false} />
-    <IconButton aria-label="Add" icon={Plus} variant="danger" rounded={false} />
-    <IconButton aria-label="Add" icon={Plus} variant="transparent" rounded={false} />
+    <IconButton aria-label="Add" variant="primary" rounded={false} />
+    <IconButton aria-label="Add" variant="secondary" rounded={false} />
+    <IconButton aria-label="Add" variant="danger" rounded={false} />
+    <IconButton aria-label="Add" variant="transparent" rounded={false} />
   </div>
 </Story>
 
 <Story name="Not rounded sizes" asChild>
   <div class="flex flex-col gap-2">
-    <IconButton aria-label="Add" icon={Plus} variant="secondary" size="xs" rounded={false} />
-    <IconButton aria-label="Add" icon={Plus} variant="secondary" size="sm" rounded={false} />
-    <IconButton aria-label="Add" icon={Plus} variant="secondary" size="md" rounded={false} />
+    <IconButton aria-label="Add" variant="secondary" size="xs" rounded={false} />
+    <IconButton aria-label="Add" variant="secondary" size="sm" rounded={false} />
+    <IconButton aria-label="Add" variant="secondary" size="md" rounded={false} />
   </div>
 </Story>
 <Story name="Disabled" asChild>
-  <IconButton aria-label="Add" disabled icon={Plus} />
+  <IconButton aria-label="Add" disabled />
 </Story>
 <Story name="Loading" asChild>
-  <IconButton aria-label="Add" icon={Plus} loading />
+  <IconButton aria-label="Add" loading />
 </Story>

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

@@ -1,7 +1,7 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import * as Select from './index';
-  import { Icon, type IconName } from '../icons';
+  import { Icon } from '../icons';
 
   const { Story } = defineMeta({
     title: 'Design System/Select(New)',
@@ -203,7 +203,7 @@
             <Select.Item value={item.value} label={item.label}>
               {#snippet children()}
                 <div class="flex items-center gap-2">
-                  <Icon iconName={item.iconName as IconName} class="h-4 w-4" />
+                  <Icon icon={item.iconName as any} class="h-4 w-4" />
                   <span>{item.label}</span>
                 </div>
               {/snippet}

package/dist/components/tabs/Tabs.stories.svelte

@@ -6,23 +6,155 @@
     component: Tabs,
     title: 'Design System/Tabs',
     tags: ['autodocs'],
+    argTypes: {
+      size: {
+        control: 'select',
+        options: ['sm', 'md', 'lg'],
+        description: 'Size of the tabs container',
+      },
+    },
   });
 
   let activeTab = 'tab-1';
+  let activeTabPrimary = 'tab-1';
+  let activeTabSecondary = 'tab-1';
+  let activeTabTransparent = 'tab-1';
+  let activeTabSizes = 'tab-1';
 </script>
 
-<Story name="Primary" asChild>
+<Story name="Primary Variant" asChild>
   <Tabs>
     {#snippet children({ Tabs, Tab, Content })}
-      <Tabs>
-        <Tab active={activeTab === 'tab-1'} onClick={() => (activeTab = 'tab-1')}>Tab 1</Tab>
-        <Tab active={activeTab === 'tab-2'} onClick={() => (activeTab = 'tab-2')}>Tab 2</Tab>
-        <Tab active={activeTab === 'tab-3'} onClick={() => (activeTab = 'tab-3')}>Tab 3</Tab>
+      <Tabs variant="primary">
+        <Tab active={activeTabPrimary === 'tab-1'} onclick={() => (activeTabPrimary = 'tab-1')}
+          >Tab 1</Tab
+        >
+        <Tab active={activeTabPrimary === 'tab-2'} onclick={() => (activeTabPrimary = 'tab-2')}
+          >Tab 2</Tab
+        >
+        <Tab active={activeTabPrimary === 'tab-3'} onclick={() => (activeTabPrimary = 'tab-3')}
+          >Tab 3</Tab
+        >
+      </Tabs>
+
+      <Content show={activeTabPrimary === 'tab-1'}>Showing primary tab 1 content</Content>
+      <Content show={activeTabPrimary === 'tab-2'}>Showing primary tab 2 content</Content>
+      <Content show={activeTabPrimary === 'tab-3'}>Showing primary tab 3 content</Content>
+    {/snippet}
+  </Tabs>
+</Story>
+
+<Story name="Secondary Variant" asChild>
+  <Tabs>
+    {#snippet children({ Tabs, Tab, Content })}
+      <Tabs variant="secondary">
+        <Tab active={activeTabSecondary === 'tab-1'} onclick={() => (activeTabSecondary = 'tab-1')}
+          >Tab 1</Tab
+        >
+        <Tab active={activeTabSecondary === 'tab-2'} onclick={() => (activeTabSecondary = 'tab-2')}
+          >Tab 2</Tab
+        >
+        <Tab active={activeTabSecondary === 'tab-3'} onclick={() => (activeTabSecondary = 'tab-3')}
+          >Tab 3</Tab
+        >
+      </Tabs>
+
+      <Content show={activeTabSecondary === 'tab-1'}>Showing secondary tab 1 content</Content>
+      <Content show={activeTabSecondary === 'tab-2'}>Showing secondary tab 2 content</Content>
+      <Content show={activeTabSecondary === 'tab-3'}>Showing secondary tab 3 content</Content>
+    {/snippet}
+  </Tabs>
+</Story>
+
+<Story name="Transparent Variant" asChild>
+  <Tabs>
+    {#snippet children({ Tabs, Tab, Content })}
+      <Tabs variant="transparent">
+        <Tab
+          active={activeTabTransparent === 'tab-1'}
+          onclick={() => (activeTabTransparent = 'tab-1')}>Tab 1</Tab
+        >
+        <Tab
+          active={activeTabTransparent === 'tab-2'}
+          onclick={() => (activeTabTransparent = 'tab-2')}>Tab 2</Tab
+        >
+        <Tab
+          active={activeTabTransparent === 'tab-3'}
+          onclick={() => (activeTabTransparent = 'tab-3')}>Tab 3</Tab
+        >
       </Tabs>
 
-      <Content show={activeTab === 'tab-1'}>Showing tab 1 content</Content>
-      <Content show={activeTab === 'tab-2'}>Showing tab 2 content</Content>
-      <Content show={activeTab === 'tab-3'}>Showing tab 3 content</Content>
+      <Content show={activeTabTransparent === 'tab-1'}>Showing transparent tab 1 content</Content>
+      <Content show={activeTabTransparent === 'tab-2'}>Showing transparent tab 2 content</Content>
+      <Content show={activeTabTransparent === 'tab-3'}>Showing transparent tab 3 content</Content>
     {/snippet}
   </Tabs>
 </Story>
+
+<Story name="Different Sizes" asChild>
+  <div class="flex flex-col gap-6">
+    <div>
+      <h4 class="mb-2 text-sm font-medium">Small (sm), full width</h4>
+      <Tabs>
+        {#snippet children({ Tabs, Tab, Content })}
+          <Tabs variant="primary" size="sm">
+            <Tab active={activeTabSizes === 'tab-1'} onclick={() => (activeTabSizes = 'tab-1')}
+              >Small Tab 1</Tab
+            >
+            <Tab active={activeTabSizes === 'tab-2'} onclick={() => (activeTabSizes = 'tab-2')}
+              >Small Tab 2</Tab
+            >
+          </Tabs>
+        {/snippet}
+      </Tabs>
+    </div>
+
+    <div>
+      <h4 class="mb-2 text-sm font-medium">Medium (md), full width</h4>
+      <Tabs>
+        {#snippet children({ Tabs, Tab, Content })}
+          <Tabs variant="primary" size="md">
+            <Tab active={activeTabSizes === 'tab-1'} onclick={() => (activeTabSizes = 'tab-1')}
+              >Medium Tab 1</Tab
+            >
+            <Tab active={activeTabSizes === 'tab-2'} onclick={() => (activeTabSizes = 'tab-2')}
+              >Medium Tab 2</Tab
+            >
+          </Tabs>
+        {/snippet}
+      </Tabs>
+    </div>
+
+    <div>
+      <h4 class="mb-2 text-sm font-medium">Large (lg), full width</h4>
+      <Tabs>
+        {#snippet children({ Tabs, Tab, Content })}
+          <Tabs variant="primary" size="lg">
+            <Tab active={activeTabSizes === 'tab-1'} onclick={() => (activeTabSizes = 'tab-1')}
+              >Large Tab 1</Tab
+            >
+            <Tab active={activeTabSizes === 'tab-2'} onclick={() => (activeTabSizes = 'tab-2')}
+              >Large Tab 2</Tab
+            >
+          </Tabs>
+        {/snippet}
+      </Tabs>
+    </div>
+
+    <div>
+      <h4 class="mb-2 text-sm font-medium">Large (lg), fit content</h4>
+      <Tabs>
+        {#snippet children({ Tabs, Tab, Content })}
+          <Tabs variant="primary" size="lg" fullWidth={false}>
+            <Tab active={activeTabSizes === 'tab-1'} onclick={() => (activeTabSizes = 'tab-1')}
+              >Included in score</Tab
+            >
+            <Tab active={activeTabSizes === 'tab-2'} onclick={() => (activeTabSizes = 'tab-2')}
+              >Excluded from score</Tab
+            >
+          </Tabs>
+        {/snippet}
+      </Tabs>
+    </div>
+  </div>
+</Story>

package/dist/components/tabs/components/Tab.svelte

@@ -1,21 +1,22 @@
 <script lang="ts">
-  import { Button } from '../../button/';
   import type { Snippet } from 'svelte';
+  import Button from '../../button/Button.svelte';
+
   interface Props {
-    active?: boolean;
-    onClick: () => void;
     class?: string;
+    active?: boolean;
+    onclick?: () => void;
     children?: Snippet;
   }
 
-  let { active = false, onClick, class: className = '', children }: Props = $props();
+  let { class: className = '', active = false, onclick, children }: Props = $props();
 </script>
 
 <Button
-  {onClick}
+  {onclick}
   variant="transparent"
-  size="md"
-  class={`tab flex !h-10 gap-2 !rounded-md !px-0 !py-0 ${active ? 'tab-active' : ''} ${className}`}
+  size="sm"
+  class={`tab !h-full ${className} ${active ? 'active' : ''}`}
 >
   {@render children?.()}
 </Button>

package/dist/components/tabs/components/Tab.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 interface Props {
-    active?: boolean;
-    onClick: () => void;
     class?: string;
+    active?: boolean;
+    onclick?: () => void;
     children?: Snippet;
 }
 declare const Tab: import("svelte").Component<Props, {}, "">;

package/dist/components/tabs/components/Tabs.svelte

@@ -1,14 +1,82 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
 
+  type Size = 'sm' | 'md' | 'lg';
+  type Variant = 'primary' | 'secondary' | 'transparent';
+
   interface Props {
     class?: string;
-    children?: Snippet;
+    size?: Size;
+    variant?: Variant;
+    fullWidth?: boolean;
+    children?: Snippet<[{ variant: Variant }]>;
   }
 
-  let { class: className = '', children }: Props = $props();
+  let {
+    class: className = '',
+    size = 'lg',
+    variant = 'primary',
+    fullWidth = true,
+    children,
+  }: Props = $props();
+
+  const sizes = {
+    sm: 'h-8 p-0.5 gap-0.5 rounded-lg [&>*]:!rounded-md',
+    md: 'h-10 p-1 gap-1 rounded-[10px] [&>*]:!rounded-md',
+    lg: 'h-12 p-1 gap-1 rounded-xl',
+  };
 </script>
 
-<div role="tablist" class={`tabs-boxed tabs h-[48px] gap-1 rounded-lg ${className}`}>
-  {@render children?.()}
+<div
+  role="tablist"
+  class={`flex  ${sizes[size]} ${variant} ${className} ${fullWidth ? 'w-full [&>*]:flex-1' : 'w-fit [&>*]:flex-none'}`}
+>
+  {@render children?.({ variant })}
 </div>
+
+<style>
+  .primary {
+
+    background-color: #12192a0A
+}
+
+    .primary :global(.tab.active) {
+
+    border-color: #12192A1A;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
+
+    --tw-text-opacity: 1;
+
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+
+  .secondary {
+
+    background-color: #12192a0A
+}
+
+  .secondary :global(.tab.active) {
+
+    border-color: #12192A1A;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+    --tw-text-opacity: 1;
+
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
+}
+
+  .transparent :global(.tab.active) {
+
+    background-color: #12192a0A;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
+}
+</style>

package/dist/components/tabs/components/Tabs.svelte.d.ts

@@ -1,7 +1,14 @@
 import type { Snippet } from 'svelte';
+type Size = 'sm' | 'md' | 'lg';
+type Variant = 'primary' | 'secondary' | 'transparent';
 interface Props {
     class?: string;
-    children?: Snippet;
+    size?: Size;
+    variant?: Variant;
+    fullWidth?: boolean;
+    children?: Snippet<[{
+        variant: Variant;
+    }]>;
 }
 declare const Tabs: import("svelte").Component<Props, {}, "">;
 type Tabs = ReturnType<typeof Tabs>;

package/dist/components/toast/Toast.stories.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-  import type { Notification } from '../../../notifications';
+  import type { Notification } from '../../../lib/notifications';
   import Toast from './Toast.svelte';
   import { defineMeta } from '@storybook/addon-svelte-csf';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.7.2",
+  "version": "2.7.4",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -40,23 +40,17 @@
       "import": "./dist/components/*/index.js",
       "default": "./dist/components/*/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/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/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/segmented-control-buttons": {
-      "types": "./dist/components/segmented-control-buttons/index.d.ts",
-      "svelte": "./dist/components/segmented-control-buttons/index.js",
-      "import": "./dist/components/segmented-control-buttons/index.js",
-      "default": "./dist/components/segmented-control-buttons/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/dropdown": {
       "types": "./dist/components/dropdown/index.d.ts",
@@ -64,29 +58,65 @@
       "import": "./dist/components/dropdown/index.js",
       "default": "./dist/components/dropdown/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/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/empty-content": {
-      "types": "./dist/components/empty-content/index.d.ts",
-      "svelte": "./dist/components/empty-content/index.js",
-      "import": "./dist/components/empty-content/index.js",
-      "default": "./dist/components/empty-content/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/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/pill": {
+      "types": "./dist/components/pill/index.d.ts",
+      "svelte": "./dist/components/pill/index.js",
+      "import": "./dist/components/pill/index.js",
+      "default": "./dist/components/pill/index.js"
     },
-    "./components/image": {
-      "types": "./dist/components/image/index.d.ts",
-      "svelte": "./dist/components/image/index.js",
-      "import": "./dist/components/image/index.js",
-      "default": "./dist/components/image/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/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/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/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/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/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/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/tag": {
       "types": "./dist/components/tag/index.d.ts",
@@ -94,23 +124,35 @@
       "import": "./dist/components/tag/index.js",
       "default": "./dist/components/tag/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/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/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/segmented-control-buttons": {
+      "types": "./dist/components/segmented-control-buttons/index.d.ts",
+      "svelte": "./dist/components/segmented-control-buttons/index.js",
+      "import": "./dist/components/segmented-control-buttons/index.js",
+      "default": "./dist/components/segmented-control-buttons/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/empty-content": {
+      "types": "./dist/components/empty-content/index.d.ts",
+      "svelte": "./dist/components/empty-content/index.js",
+      "import": "./dist/components/empty-content/index.js",
+      "default": "./dist/components/empty-content/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/spinner": {
       "types": "./dist/components/spinner/index.d.ts",
@@ -118,35 +160,53 @@
       "import": "./dist/components/spinner/index.js",
       "default": "./dist/components/spinner/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/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/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/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/combobox": {
-      "types": "./dist/components/combobox/index.d.ts",
-      "svelte": "./dist/components/combobox/index.js",
-      "import": "./dist/components/combobox/index.js",
-      "default": "./dist/components/combobox/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/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/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/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/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/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/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/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/card": {
       "types": "./dist/components/card/index.d.ts",
@@ -154,23 +214,17 @@
       "import": "./dist/components/card/index.js",
       "default": "./dist/components/card/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/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/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/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/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/collapsible": {
       "types": "./dist/components/collapsible/index.d.ts",
@@ -178,77 +232,41 @@
       "import": "./dist/components/collapsible/index.js",
       "default": "./dist/components/collapsible/index.js"
     },
-    "./components/multi-cfu-counter": {
-      "types": "./dist/components/multi-cfu-counter/index.d.ts",
-      "svelte": "./dist/components/multi-cfu-counter/index.js",
-      "import": "./dist/components/multi-cfu-counter/index.js",
-      "default": "./dist/components/multi-cfu-counter/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/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/toggle": {
       "types": "./dist/components/toggle/index.d.ts",
       "svelte": "./dist/components/toggle/index.js",
       "import": "./dist/components/toggle/index.js",
       "default": "./dist/components/toggle/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/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/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/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/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/combobox": {
+      "types": "./dist/components/combobox/index.d.ts",
+      "svelte": "./dist/components/combobox/index.js",
+      "import": "./dist/components/combobox/index.js",
+      "default": "./dist/components/combobox/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/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/pill": {
-      "types": "./dist/components/pill/index.d.ts",
-      "svelte": "./dist/components/pill/index.js",
-      "import": "./dist/components/pill/index.js",
-      "default": "./dist/components/pill/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/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/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/legend": {
       "types": "./dist/components/legend/index.d.ts",
@@ -256,23 +274,11 @@
       "import": "./dist/components/legend/index.js",
       "default": "./dist/components/legend/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/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/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/image": {
+      "types": "./dist/components/image/index.d.ts",
+      "svelte": "./dist/components/image/index.js",
+      "import": "./dist/components/image/index.js",
+      "default": "./dist/components/image/index.js"
     },
     "./components/table": {
       "types": "./dist/components/table/index.d.ts",
@@ -280,47 +286,41 @@
       "import": "./dist/components/table/index.js",
       "default": "./dist/components/table/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/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/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/multi-cfu-counter": {
+      "types": "./dist/components/multi-cfu-counter/index.d.ts",
+      "svelte": "./dist/components/multi-cfu-counter/index.js",
+      "import": "./dist/components/multi-cfu-counter/index.js",
+      "default": "./dist/components/multi-cfu-counter/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/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/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/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/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/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/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/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"
     },
     "./tokens": {
       "types": "./dist/tokens.d.ts",