@reshape-biotech/design-system 2.2.2 → 2.2.3

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

@@ -150,7 +150,7 @@
     <Modal.Trigger>
       <Button variant="primary">Open Custom Modal</Button>
     </Modal.Trigger>
-    <Modal.Content class="min-w-full !bg-accent p-8">
+    <Modal.Content class="min-w-full bg-accent p-8">
       <Modal.Title class="text-xl text-primary-inverse">Custom Styled Modal</Modal.Title>
       <div class="space-y-4 pt-4">
         <p class="text-sm text-secondary-inverse">

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

@@ -1,10 +1,11 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import type { ModalBottomProps } from '../types';
 
   let { children, class: className = '', ...restProps }: ModalBottomProps = $props();
 
   const baseClasses = 'border-t border-static -mx-5';
-  const finalClasses = `${baseClasses} ${className}`;
+  const finalClasses = twMerge(baseClasses, className);
 </script>
 
 <div class={finalClasses} {...restProps}>

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { Dialog } from 'bits-ui';
   import { scale } from 'svelte/transition';
+  import { twMerge } from 'tailwind-merge';
   import { Icon } from '../../icons';
   import type { ModalContentProps } from '../types';
   import Overlay from './modal-overlay.svelte';
@@ -16,7 +17,7 @@
 
   const baseClasses =
     'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 bg-surface p-5 shadow-lg sm:rounded-lg';
-  const finalClasses = `${baseClasses} ${className}`;
+  const finalClasses = twMerge(baseClasses, className);
 </script>
 
 {#snippet withCloseButton()}

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

@@ -1,11 +1,12 @@
 <script lang="ts">
   import { Dialog } from 'bits-ui';
   import type { ModalTitleProps } from '../types';
+  import { twMerge } from 'tailwind-merge';
 
   let { children, class: className = '', icon, ...restProps }: ModalTitleProps = $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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -389,6 +389,7 @@
   },
   "dependencies": {
     "bits-ui": "^1.8.0",
-    "echarts": "^5.6.0"
+    "echarts": "^5.6.0",
+    "tailwind-merge": "^3.3.1"
   }
 }