@reshape-biotech/design-system 2.7.36 → 2.7.37

package/dist/components/activity/Activity.svelte

@@ -3,6 +3,7 @@
   import ActivityIcon from './ActivityIcon.svelte';
   import type { ActivityIconType } from './ActivityIcon.svelte';
   import { DateTime } from 'luxon';
+  import { twMerge } from 'tailwind-merge';
 
   type Activity = {
     activity_type?: string;
@@ -54,13 +55,14 @@
   let { class: className = '', activity }: Props = $props();
 </script>
 
-<div class={`group flex items-stretch gap-3 ${className}`}>
+<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="text-secondary flex h-5 w-5 shrink-0 items-center justify-center rounded p-0.5 {ACTIVITY_BACKGROUND[
-        activity.icon
-      ]}"
+      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>

package/dist/components/button/Button.svelte

@@ -12,6 +12,7 @@
 </script>
 
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import Spinner from '../spinner/Spinner.svelte';
   import type { Snippet } from 'svelte';
 
@@ -66,7 +67,7 @@
   {id}
   {tabindex}
   class:cursor-wait={loading}
-  class="button {variantClass} {sizeClass} {className}"
+  class={twMerge('button', variantClass, sizeClass, className)}
   data-testid={dataTestId}
   class:rounded
   class:disabled

package/dist/components/card/Card.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
 
   type Props = {
     Header?: Snippet;
@@ -19,19 +20,20 @@
 </script>
 
 <div
-  class="overflow-hidden rounded-[10px] border border-static bg-surface shadow-container {additionalClasses}"
+  class={twMerge(
+    'overflow-hidden rounded-[10px] border border-static bg-surface shadow-container',
+    additionalClasses
+  )}
 >
   {#if Header}
     <header
-      class="flex min-h-12 items-center px-4"
-      class:border-b={headerBorder}
-      class:border-static={headerBorder}
+      class={twMerge('flex min-h-12 items-center px-4', headerBorder && 'border-b border-static')}
     >
       {@render Header()}
     </header>
   {/if}
   {#if children}
-    <div class={`p-${padding}`}>
+    <div class={twMerge(`p-${padding}`)}>
       {@render children()}
     </div>
   {/if}

package/dist/components/card/CardWrapper.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import type { ClassValue } from 'svelte/elements';
+  import { twMerge } from 'tailwind-merge';
 
   type Props = {
     Header?: Snippet;
@@ -19,28 +20,24 @@
   }: Props = $props();
 </script>
 
-<div class={['wrapper', variant, additionalClasses]}>
+<div class={twMerge('wrapper', variant, additionalClasses)}>
   {#if Header}
     <header
-      class={[
+      class={twMerge(
         'flex w-full items-center justify-between',
-        {
-          'min-h-10 px-4': variant === 'default',
-          'min-h-8 px-3': variant === 'compact',
-        },
-      ]}
+        variant === 'default' && 'min-h-10 px-4',
+        variant === 'compact' && 'min-h-8 px-3'
+      )}
     >
       {@render Header()}
     </header>
   {/if}
   <div
-    class={[
+    class={twMerge(
       'flex w-full flex-col !overflow-hidden [&>*]:w-full',
-      {
-        'gap-1 [&>*]:rounded-xl': variant === 'default',
-        'gap-0.5 [&>*]:rounded-[10px]': variant === 'compact',
-      },
-    ]}
+      variant === 'default' && 'gap-1 [&>*]:rounded-xl',
+      variant === 'compact' && 'gap-0.5 [&>*]:rounded-[10px]'
+    )}
   >
     {@render children()}
   </div>

package/dist/components/checkbox/Checkbox.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import Check from 'phosphor-svelte/lib/Check';
   import Minus from 'phosphor-svelte/lib/Minus';
   import { Icon } from '../icons/index.js';
@@ -6,13 +7,13 @@
 
   export type CheckboxProps = CheckboxRootProps;
 
-  let { checked = $bindable(false), onCheckedChange, name, ...props }: CheckboxProps = $props();
+  let { checked = $bindable(false), onCheckedChange, name, class: className, ...props }: CheckboxProps = $props();
 </script>
 
 <Checkbox.Root bind:checked {onCheckedChange} {...props}>
   {#snippet children({ checked, indeterminate })}
     <div
-      class={`flex items-center justify-center rounded border border-static ${checked ? 'bg-dark-accent-inverse-hover' : ''}`}
+      class={twMerge('flex items-center justify-center rounded border border-static', checked && 'bg-dark-accent-inverse-hover', className)}
     >
       {#if checked}
         <Icon class="text-primary-inverse" icon={Check} />

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

@@ -5,6 +5,7 @@
   import { Combobox } from 'bits-ui';
   import type { ComboboxContentProps } from '../types';
   import { fade } from 'svelte/transition';
+  import { twMerge } from 'tailwind-merge';
 
   let {
     children,
@@ -30,7 +31,7 @@
             <Icon icon={CaretUp} color="tertiary" />
           </Combobox.ScrollUpButton>
           <Combobox.Viewport class="overflow-y-auto">
-            <div class="{paddedContent ? 'p-1' : ''} empty:p-0">
+            <div class={twMerge(paddedContent ? 'p-1' : '', 'empty:p-0')}>
               {@render children()}
             </div>
           </Combobox.Viewport>

package/dist/components/datepicker/DatePicker.svelte

@@ -3,6 +3,7 @@
   import CaretRight from 'phosphor-svelte/lib/CaretRight';
   import { Icon } from '../icons/index.js';
   import { run } from 'svelte/legacy';
+  import { twMerge } from 'tailwind-merge';
 
   import { DateTime, type MonthNumbers } from 'luxon';
 
@@ -125,11 +126,13 @@
                   {#if dayOfMonth > 0}
                     <div class="date-container">
                       <p
-                        class={dayOfMonth === selectedDay &&
-                        selectedMonth === shownMonth &&
-                        selectedYear === shownYear
-                          ? 'date selected-date'
-                          : 'date'}
+                        class={twMerge(
+                          'date',
+                          dayOfMonth === selectedDay &&
+                          selectedMonth === shownMonth &&
+                          selectedYear === shownYear &&
+                          'selected-date'
+                        )}
                       >
                         <button
                           onclick={() => {

package/dist/components/divider/Divider.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
   interface Props {
     class?: string;
     vertical?: boolean;
@@ -9,7 +11,9 @@
 </script>
 
 <div
-  class={`${
-    vertical ? 'h-full w-0 border-l' : 'h-0 w-full border-b'
-  } ${inverse ? 'border-static-inverse' : 'border-static'} ${className}`}
+  class={twMerge(
+    vertical ? 'h-full w-0 border-l' : 'h-0 w-full border-b',
+    inverse ? 'border-static-inverse' : 'border-static',
+    className
+  )}
 ></div>

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

@@ -3,6 +3,7 @@
   import { Icon } from '../../icons/index.js';
   import { Dialog } from 'bits-ui';
   import { fly } from 'svelte/transition';
+  import { twMerge } from 'tailwind-merge';
   import type { DrawerContentProps } from '../types';
   import Overlay from './drawer-overlay.svelte';
 
@@ -20,7 +21,7 @@
 
   const baseClasses = 'fixed top-0 h-screen z-50  w-[460px] flex flex-col bg-surface shadow-lg';
   const sideClasses = side === 'left' ? 'left-0' : 'right-0';
-  const finalClasses = `${baseClasses} ${sideClasses} ${className}`;
+  const finalClasses = twMerge(baseClasses, sideClasses, className);
 
   const getTransitionParams = (side: 'left' | 'right') => ({
     x: side === 'left' ? -300 : 300,

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

@@ -1,11 +1,12 @@
 <script lang="ts">
   import { Dialog } from 'bits-ui';
+  import { twMerge } from 'tailwind-merge';
   import type { DrawerTitleProps } from '../types';
 
   let { children, class: className = '', icon, ...restProps }: DrawerTitleProps = $props();
 
   const baseClasses = 'text-xl font-semibold tracking-tight text-primary';
-  const finalClasses = `${baseClasses} ${className}`;
+  const finalClasses = twMerge(baseClasses, className);
 </script>
 
 <div class="space-y-6">

package/dist/components/dropdown/components/dropdown-item.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { DropdownMenu } from 'bits-ui';
+  import { twMerge } from 'tailwind-merge';
   import type { DropdownItemProps } from '../types';
 
   let {
@@ -18,7 +19,7 @@
     {:else}
       <div
         {...props}
-        class="dropdown-item flex gap-2 cursor-pointer items-center rounded-md px-2.5 py-2 min-h-10 text-sm outline-none transition-colors hover:bg-neutral focus:bg-neutral data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_a]:no-underline {className}"
+        class={twMerge('dropdown-item flex gap-2 cursor-pointer items-center rounded-md px-2.5 py-2 min-h-10 text-sm outline-none transition-colors hover:bg-neutral focus:bg-neutral data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_a]:no-underline', className)}
       >
         {@render children?.()}
       </div>

package/dist/components/dropdown/components/dropdown-sub-trigger.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { DropdownMenu } from 'bits-ui';
+  import { twMerge } from 'tailwind-merge';
   import CaretRight from 'phosphor-svelte/lib/CaretRight';
   import CaretLeft from 'phosphor-svelte/lib/CaretLeft';
   import { Icon } from '../../icons/index.js';
@@ -17,7 +18,7 @@
     {:else}
       <div
         {...props}
-        class="dropdown-sub-trigger flex h-9 cursor-pointer items-center justify-between gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors hover:bg-neutral focus:bg-neutral data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_a]:no-underline {className}"
+        class={twMerge('dropdown-sub-trigger flex h-9 cursor-pointer items-center justify-between gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors hover:bg-neutral focus:bg-neutral data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_a]:no-underline', className)}
       >
         {#if !hideChevron && side === 'left'}
           <Icon color="tertiary" icon={chevronIcon} size={14} class="mr-2" />

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import type { Snippet } from 'svelte';
   import { Spinner } from '../spinner/';
   import type { HTMLButtonAttributes } from 'svelte/elements';
@@ -50,7 +51,7 @@
     }}
     {type}
     {disabled}
-    class="{sizeClass} {variantClass} disabled {className}"
+    class={twMerge(sizeClass, variantClass, 'disabled', className)}
     class:rounded
     {...rest}
   >
@@ -66,7 +67,7 @@
     {type}
     {disabled}
     {tabindex}
-    class="{sizeClass} {variantClass} {className}"
+    class={twMerge(sizeClass, variantClass, className)}
     class:rounded
     {...rest}
   >

package/dist/components/input/Input.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import X from 'phosphor-svelte/lib/X';
   import { Icon } from '../icons/index.js';
   import type { Snippet } from 'svelte';
@@ -91,7 +92,7 @@
 
   <div class="flex-1">
     <div
-      class="flex w-full items-center gap-1 size-{size} transition-colors"
+      class={twMerge('flex w-full items-center gap-1 transition-colors', `size-${size}`, className)}
       class:!border-error={!valid}
       class:primary={variant === 'primary'}
       class:secondary={variant === 'secondary'}

package/dist/components/label/Label.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
   interface Props {
     forId: string;
     text: string;
@@ -9,7 +11,7 @@
   const { forId, text, required = false, class: className }: Props = $props();
 </script>
 
-<label for={forId} class="block text-sm text-secondary {className ?? ''}">
+<label for={forId} class={twMerge('block text-sm text-secondary', className)}>
   {text}
   {#if required}
     <span class="ml-0.5 text-danger">*</span>

package/dist/components/list/List.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" generics="T">
   import type { Overflow } from '../../tailwind';
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
 
   type Props = {
     items: T[];
@@ -11,7 +12,9 @@
   let { items, item, overflow = 'overflow-y-auto', variant = 'default' }: Props = $props();
 </script>
 
-<div class="{`listStyles ${variant === 'compact' ? 'compact' : 'default'} ${overflow} `}}">
+<div
+  class={twMerge('listStyles', variant === 'compact' ? 'compact' : 'default', overflow)}
+>
   {#each items as currentItem, i}
     <div class="item">
       {@render item(currentItem)}

package/dist/components/markdown/Markdown.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { marked } from 'marked';
+  import { twMerge } from 'tailwind-merge';
   interface Props {
     markdown: string;
     variant?: 'light' | 'dark';
@@ -8,6 +9,6 @@
   let { markdown, variant = 'light' }: Props = $props();
 </script>
 
-<div class="prose prose-slate text-sm {variant === 'dark' ? 'dark:prose-invert' : ''}">
+<div class={twMerge('prose prose-slate text-sm', variant === 'dark' && 'dark:prose-invert')}>
   {@html marked.parse(markdown ?? '')}
 </div>

package/dist/components/segmented-control-buttons/ControlButton.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
 
   type Color = 'primary' | 'secondary';
 
@@ -32,7 +33,12 @@
 <div class="join-item flex h-full flex-1">
   <button
     {onclick}
-    class={`control-button flex flex-1 items-center justify-center gap-2 rounded-md text-sm leading-4 ${colors[color]} ${className} ${color}`}
+    class={twMerge(
+      'control-button flex flex-1 items-center justify-center gap-2 rounded-md text-sm leading-4',
+      colors[color],
+      color,
+      className
+    )}
     class:active
     type="button"
     {disabled}

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
   import ControlButton from './ControlButton.svelte';
 
   interface Props {
@@ -16,6 +17,6 @@
   };
 </script>
 
-<div class={`join flex gap-1 rounded-lg bg-neutral p-1 ${sizes[size]} ${size} ${className}`}>
+<div class={twMerge('join flex gap-1 rounded-lg bg-neutral p-1', sizes[size], size, className)}>
   {@render children?.({ ControlButton })}
 </div>

package/dist/components/select/components/MultiSelectTrigger.svelte

@@ -3,6 +3,7 @@
   import Icon from '../../icons/Icon.svelte';
   import * as Select from '../index';
   import IconButton from '../../icon-button/IconButton.svelte';
+  import { twMerge } from 'tailwind-merge';
 
   type ItemType = {
     value: string;
@@ -30,8 +31,10 @@
 </script>
 
 <Select.Trigger
-  class={'flex h-fit min-h-10 w-full items-center justify-between rounded-lg border border-input bg-surface py-1 text-sm placeholder:text-tertiary focus:outline-none disabled:cursor-not-allowed disabled:border-transparent disabled:bg-neutral disabled:opacity-75' +
-    (className || '')}
+  class={twMerge(
+    'flex h-fit min-h-10 w-full items-center justify-between rounded-lg border border-input bg-surface py-1 text-sm placeholder:text-tertiary focus:outline-none disabled:cursor-not-allowed disabled:border-transparent disabled:bg-neutral disabled:opacity-75',
+    className
+  )}
   {...restProps}
 >
   {#if selectedValues.length === 0}

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

@@ -2,6 +2,7 @@
   import Check from 'phosphor-svelte/lib/Check';
   import { Icon } from '../../icons/index.js';
   import { Select as SelectPrimitive } from 'bits-ui';
+  import { twMerge } from 'tailwind-merge';
   import type { ItemProps, ItemSlotProps } from '../types';
 
   import type { Snippet } from 'svelte';
@@ -21,7 +22,7 @@
     `;
 </script>
 
-<SelectPrimitive.Item {...restProps} class={baseClasses + ' ' + className}>
+<SelectPrimitive.Item {...restProps} class={twMerge(baseClasses, className)}>
   {#snippet children(params: ItemSlotProps)}
     {#if children}
       {@render children(params)}

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

@@ -2,6 +2,7 @@
   import CaretDown from 'phosphor-svelte/lib/CaretDown';
   import { Icon } from '../../icons/index.js';
   import { Select as SelectPrimitive } from 'bits-ui';
+  import { twMerge } from 'tailwind-merge';
   import type { TriggerProps, IconSnippet } from '../types';
 
   import type { Snippet } from 'svelte';
@@ -37,7 +38,7 @@
 
 <SelectPrimitive.Trigger
   {...restProps}
-  class={`${baseClasses} ${className}`}
+  class={twMerge(baseClasses, className)}
   aria-label={placeholder}
 >
   <div class="flex-1 truncate text-left">

package/dist/components/skeleton-loader/SkeletonLoader.svelte

@@ -2,6 +2,7 @@
   import type { Snippet } from 'svelte';
   import Skeleton from './components/Skeleton.svelte';
   import SkeletonImage from './components/SkeletonImage.svelte';
+  import { twMerge } from 'tailwind-merge';
 
   interface Props {
     class?: string;
@@ -12,6 +13,10 @@
   let { class: className = '', dataTestId = '', children }: Props = $props();
 </script>
 
-<div role="status" class={`h-full w-full animate-pulse ${className}`} data-testid={dataTestId}>
+<div
+  role="status"
+  class={twMerge('h-full w-full animate-pulse', className)}
+  data-testid={dataTestId}
+>
   {@render children?.({ Skeleton, SkeletonImage })}
 </div>

package/dist/components/slider/Slider.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import CaretUpDown from 'phosphor-svelte/lib/CaretUpDown';
   import { Icon } from '../icons/index.js';
+  import { twMerge } from 'tailwind-merge';
 
   let className = '';
   export { className as class };
@@ -31,10 +32,12 @@
   }
 </script>
 
-<div class={`relative flex h-10 items-center ${className} ${disabled ? 'opacity-40' : ''}`}>
+<div
+  class={twMerge('relative flex h-10 items-center', disabled && 'opacity-40', className)}
+>
   <div class="track-overlay"></div>
   <div
-    class="pointer-events-none absolute h-2.5 rounded-full {bufferColorClass}"
+    class={twMerge('pointer-events-none absolute h-2.5 rounded-full', bufferColorClass)}
     style="
       width: {calculatePosition(buffer - bufferMin)} + 1rem);
       left: {calculatePosition(bufferMin)}
@@ -42,7 +45,7 @@
   ></div>
   {#if showFilled}
     <div
-      class="absolute h-2.5 rounded-full {filledColorClass}"
+      class={twMerge('absolute h-2.5 rounded-full', filledColorClass)}
       style="width: {calculatePosition(value)} + 1rem);left: 0;"
     ></div>
   {/if}

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
 
   interface Props {
     // we can add dynamic classes because they are safelisted in tailwind-safelist.txt
@@ -9,6 +10,7 @@
     progress?: Snippet;
     icon?: Snippet;
     iconOnly?: boolean;
+    class?: string;
   }
 
   let {
@@ -18,14 +20,14 @@
     progress,
     icon,
     iconOnly: propIconOnly = false,
+    class: className,
   }: Props = $props();
 
   let iconOnly = $derived((content === undefined && progress === undefined) || propIconOnly);
 </script>
 
 <div
-  class={`badge badge-${type} badge-${size}`}
-  class:badge-icon-only={iconOnly}
+  class={twMerge(`badge badge-${type} badge-${size}`, iconOnly && 'badge-icon-only', className)}
   data-testid="status-badge"
 >
   {#if icon}

package/dist/components/status-badge/StatusBadge.svelte.d.ts

@@ -6,6 +6,7 @@ interface Props {
     progress?: Snippet;
     icon?: Snippet;
     iconOnly?: boolean;
+    class?: string;
 }
 declare const StatusBadge: import("svelte").Component<Props, {}, "">;
 type StatusBadge = ReturnType<typeof StatusBadge>;

package/dist/components/table/Table.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import type { Snippet } from 'svelte';
   import Td from './components/Td.svelte';
   import Th from './components/Th.svelte';
@@ -32,7 +33,7 @@
 </script>
 
 <div class="w-full rounded-xl border border-static bg-surface px-5 py-2 shadow-container">
-  <table class={`w-full table-fixed sm:table-auto xl:table-${tableLayout}`}>
+  <table class={twMerge('w-full table-fixed sm:table-auto', `xl:table-${tableLayout}`)}>
     {@render children?.({ THead: THead, TBody: TBody, Tr: Tr, Th: Th, Td: Td })}
   </table>
 </div>

package/dist/components/table/components/TBody.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import type { Snippet } from 'svelte';
 
   interface Props {
@@ -9,6 +10,6 @@
   let { class: className = '', children }: Props = $props();
 </script>
 
-<tbody class={`${className}`}>
+<tbody class={twMerge(className)}>
   {@render children?.()}
 </tbody>

package/dist/components/table/components/THead.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import type { Snippet } from 'svelte';
 
   interface Props {
@@ -9,6 +10,6 @@
   let { class: className = '', children }: Props = $props();
 </script>
 
-<thead class={`${className}`}>
+<thead class={twMerge(className)}>
   {@render children?.()}
 </thead>

package/dist/components/table/components/Td.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import type { Snippet } from 'svelte';
 
   interface Props {
@@ -10,6 +11,6 @@
   let { dataTestId = '', align = 'left', children }: Props = $props();
 </script>
 
-<td data-testid={dataTestId} class={`text-${align} text-sm font-normal`}>
+<td data-testid={dataTestId} class={twMerge(`text-${align}`, 'text-sm font-normal')}>
   {@render children?.()}
 </td>

package/dist/components/table/components/Th.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import type { Width } from '../../../tailwind';
   import type { Snippet } from 'svelte';
 
@@ -10,6 +11,6 @@
   let { class: className = '', children }: Props = $props();
 </script>
 
-<th class={`text-left text-xs font-medium text-tertiary ${className}`}>
+<th class={twMerge('text-left text-xs font-medium text-tertiary', className)}>
   {@render children?.()}
 </th>

package/dist/components/table/components/Tr.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import type { Snippet } from 'svelte';
 
   interface Props {
@@ -10,7 +11,7 @@
   let { disabled = false, children, class: className = '' }: Props = $props();
 </script>
 
-<tr class={`border-static py-2 [&.disabled]:text-tertiary ${className}`} class:disabled>
+<tr class={twMerge('border-static py-2 [&.disabled]:text-tertiary', className)} class:disabled>
   {@render children?.()}
 </tr>
 

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
   import Button from '../../button/Button.svelte';
 
   interface Props {
@@ -16,7 +17,7 @@
   {onclick}
   variant="transparent"
   size="sm"
-  class={`tab !h-full ${className} ${active ? 'active' : ''}`}
+  class={twMerge('tab !h-full', active && 'active', className)}
 >
   {@render children?.()}
 </Button>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
 
   type Size = 'sm' | 'md' | 'lg';
   type Variant = 'primary' | 'secondary' | 'transparent';
@@ -29,7 +30,7 @@
 
 <div
   role="tablist"
-  class={`flex  ${sizes[size]} ${variant} ${className} ${fullWidth ? 'w-full [&>*]:flex-1' : 'w-fit [&>*]:flex-none'}`}
+  class={twMerge('flex', sizes[size], variant, fullWidth ? 'w-full [&>*]:flex-1' : 'w-fit [&>*]:flex-none', className)}
 >
   {@render children?.({ variant })}
 </div>

package/dist/components/tag/Tag.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
   import { Tooltip } from '../tooltip/';
 
   interface Props {
@@ -82,14 +83,14 @@
 {#snippet renderTag()}
   {#if onclick}
     <button
-      class="outer {variantClassName} {sizeClassName} {buttonClassVariant} hover:cursor-pointer {className} "
+      class={twMerge('outer', variantClassName, sizeClassName, buttonClassVariant, 'hover:cursor-pointer', className)}
       title={tooltip}
       {onclick}
     >
       {@render children()}
     </button>
   {:else}
-    <div class="outer {variantClassName} {sizeClassName}  no-underline {className}" title={tooltip}>
+    <div class={twMerge('outer', variantClassName, sizeClassName, 'no-underline', className)} title={tooltip}>
       {@render children()}
     </div>
   {/if}

package/dist/components/tooltip/Tooltip.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Tooltip } from 'bits-ui';
+  import { twMerge } from 'tailwind-merge';
   import type { Snippet } from 'svelte';
   import { backgroundColor } from '../../tokens';
 
@@ -50,7 +51,7 @@
         {side}
         {align}
         sideOffset={8}
-        class={`${className} z-50 max-w-xs text-wrap rounded-md bg-base-inverse px-2 py-1 text-left text-sm font-normal text-primary-inverse shadow-menu`}
+        class={twMerge('z-50 max-w-xs text-wrap rounded-md bg-base-inverse px-2 py-1 text-left text-sm font-normal text-primary-inverse shadow-menu', className)}
       >
         {#if content}
           {@render content()}

package/package.json

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