flowbite-svelte 0.37.5 → 0.38.1

package/dist/ratings/Review.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let review;
 export let articleClass = 'md:gap-8 md:grid md:grid-cols-3';
 export let divClass = 'flex items-center mb-6 space-x-4';
@@ -7,10 +7,10 @@ export let ulClass = 'space-y-4 text-sm text-gray-500 dark:text-gray-400';
 export let liClass = 'flex items-center';
 </script>
 
-<article class={classNames(articleClass, $$props.classArticle)}>
+<article class={twMerge(articleClass, $$props.classArticle)}>
   <div>
-    <div class={classNames(divClass, $$props.classDiv)}>
-      <img class={classNames(imgClass, $$props.classImg)} src={review.imgSrc} alt={review.imgAlt} />
+    <div class={twMerge(divClass, $$props.classDiv)}>
+      <img class={twMerge(imgClass, $$props.classImg)} src={review.imgSrc} alt={review.imgAlt} />
       <div class="space-y-1 font-medium dark:text-white">
         <p>{review.name}</p>
         {#if review.address}
@@ -21,19 +21,19 @@ export let liClass = 'flex items-center';
       </div>
     </div>
     {#if $$slots.item1 || $$slots.item2 || $$slots.item3}
-      <ul class={classNames(ulClass, $$props.classUl)}>
+      <ul class={twMerge(ulClass, $$props.classUl)}>
         {#if $$slots.item1}
-          <li class={classNames(liClass, $$props.classLi)}>
+          <li class={twMerge(liClass, $$props.classLi)}>
             <slot name="item1" />
           </li>
         {/if}
         {#if $$slots.item2}
-          <li class={classNames(liClass, $$props.classLi)}>
+          <li class={twMerge(liClass, $$props.classLi)}>
             <slot name="item2" />
           </li>
         {/if}
         {#if $$slots.item3}
-          <li class={classNames(liClass, $$props.classLi)}>
+          <li class={twMerge(liClass, $$props.classLi)}>
             <slot name="item3" />
           </li>
         {/if}

package/dist/sidebars/Sidebar.svelte

@@ -1,8 +1,8 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let asideClass = 'w-64';
 </script>
 
-<aside {...$$restProps} class={classNames(asideClass, $$props.class)} aria-label="Sidebar">
+<aside {...$$restProps} class={twMerge(asideClass, $$props.class)} aria-label="Sidebar">
   <slot />
 </aside>
 

package/dist/sidebars/SidebarBrand.svelte

@@ -1,11 +1,11 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let site;
 export let aClass = 'flex items-center pl-2.5 mb-5';
 export let imgClass = 'h-6 mr-3 sm:h-7';
 export let spanClass = 'self-center text-xl font-semibold whitespace-nowrap dark:text-white';
 </script>
 
-<a {...$$restProps} href={site.href} class={classNames(aClass, $$props.class)}>
+<a {...$$restProps} href={site.href} class={twMerge(aClass, $$props.class)}>
   <img src={site.img} class={imgClass} alt={site.name} />
   <span class={spanClass}>{site.name}</span>
 </a>

package/dist/sidebars/SidebarCta.svelte

@@ -1,11 +1,11 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let divWrapperClass = 'p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900';
 export let divClass = 'flex items-center mb-3';
 export let spanClass = 'bg-primary-100 text-primary-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
 export let label = '';
 </script>
 
-<div {...$$restProps} id="dropdown-cta" class={classNames(divWrapperClass, $$props.class)} role="alert">
+<div {...$$restProps} id="dropdown-cta" class={twMerge(divWrapperClass, $$props.class)} role="alert">
   <div class={divClass}>
     <span class={spanClass}>{label}</span>
     {#if $$slots.icon}

package/dist/sidebars/SidebarDropdownItem.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let aClass = 'flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
 export let href = '';
 export let label = '';
@@ -19,7 +19,7 @@ export let active = false;
     on:mouseenter
     on:mouseleave
     on:mouseover
-    class={classNames(active ? activeClass : aClass, $$props.class)}>{label}</a>
+    class={twMerge(active ? activeClass : aClass, $$props.class)}>{label}</a>
 </li>
 
 <!--

package/dist/sidebars/SidebarDropdownWrapper.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { fade, blur, fly, slide } from 'svelte/transition';
 // import { quintOut } from 'svelte/easing';
 import ChevronDown from '../utils/ChevronDown.svelte';
@@ -33,7 +33,7 @@ const handleDropdown = () => {
     {...$$restProps}
     on:click={() => handleDropdown()}
     type="button"
-    class={classNames(btnClass, $$props.class)}
+    class={twMerge(btnClass, $$props.class)}
     aria-controls="sidebar-dropdown">
     <slot name="icon" />
     <span class={spanClass}>{label}</span>

package/dist/sidebars/SidebarGroup.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let ulClass = 'space-y-2';
 export let borderClass = 'pt-4 mt-4 border-t border-gray-200 dark:border-gray-700';
 export let border = false;
@@ -7,7 +7,7 @@ if (border) {
 }
 </script>
 
-<ul {...$$restProps} class={classNames(ulClass, $$props.class)}>
+<ul {...$$restProps} class={twMerge(ulClass, $$props.class)}>
   <slot />
 </ul>
 

package/dist/sidebars/SidebarItem.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let aClass = 'flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
 export let href = '';
 export let label = '';
@@ -20,7 +20,7 @@ export let active = false;
     on:mouseenter
     on:mouseleave
     on:mouseover
-    class={classNames(active ? activeClass : aClass, $$props.class)}>
+    class={twMerge(active ? activeClass : aClass, $$props.class)}>
     <slot name="icon" />
     <span class={spanClass}>{label}</span>
     {#if $$slots.subtext}

package/dist/sidebars/SidebarWrapper.svelte

@@ -1,8 +1,8 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let divClass = 'overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800';
 </script>
 
-<div {...$$restProps} class={classNames(divClass, $$props.class)}>
+<div {...$$restProps} class={twMerge(divClass, $$props.class)}>
   <slot />
 </div>
 

package/dist/skeleton/CardPlaceholder.svelte

@@ -1,14 +1,14 @@
-<script>const sizes = {
+<script>import { twMerge } from 'tailwind-merge';
+const sizes = {
     sm: 'max-w-sm',
     md: 'max-w-md',
     lg: 'max-w-lg',
     xl: 'max-w-xl',
     xxl: 'max-w-2xl'
 };
-import classNames from 'classnames';
 export let divClass = 'p-4 rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700';
 export let size = 'sm';
-$: outDivclass = classNames(sizes[size], divClass, $$props.class);
+$: outDivclass = twMerge(sizes[size], divClass, $$props.class);
 </script>
 
 <div role="status" class={outDivclass}>

package/dist/skeleton/ImagePlaceholder.svelte

@@ -1,9 +1,9 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let divClass = 'space-y-8 animate-pulse md:space-y-0 md:space-x-8 md:flex md:items-center';
 export let imgHeight = '48';
 </script>
 
-<div role="status" class={classNames(divClass, $$props.class)}>
+<div role="status" class={twMerge(divClass, $$props.class)}>
   <div
     class="flex justify-center items-center w-full h-{imgHeight} bg-gray-300 rounded sm:w-96 dark:bg-gray-700">
     <svg

package/dist/skeleton/ListPlaceholder.svelte

@@ -1,8 +1,8 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let divClass = 'p-4 space-y-4 max-w-md rounded border border-gray-200 divide-y divide-gray-200 shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700';
 </script>
 
-<div role="status" class={classNames(divClass, $$props.class)}>
+<div role="status" class={twMerge(divClass, $$props.class)}>
   <div class="flex justify-between items-center">
     <div>
       <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5" />

package/dist/skeleton/Skeleton.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 const sizes = {
     sm: 'max-w-sm',
     md: 'max-w-md',
@@ -8,7 +8,7 @@ const sizes = {
 };
 export let divClass = 'animate-pulse';
 export let size = 'sm';
-$: outDivclass = classNames(sizes[size], divClass, $$props.class);
+$: outDivclass = twMerge(sizes[size], divClass, $$props.class);
 </script>
 
 <div role="status" class={outDivclass}>

package/dist/skeleton/TestimonialPlaceholder.svelte

@@ -1,8 +1,8 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let divClass = 'animate-pulse';
 </script>
 
-<div role="status" class={classNames(divClass, $$props.class)}>
+<div role="status" class={twMerge(divClass, $$props.class)}>
   <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 max-w-[640px] mb-2.5 mx-auto" />
   <div class="h-2.5 mx-auto bg-gray-300 rounded-full dark:bg-gray-700 max-w-[540px]" />
   <div class="flex justify-center items-center mt-4">

package/dist/skeleton/TextPlaceholder.svelte

@@ -1,14 +1,14 @@
-<script>const sizes = {
+<script>import { twMerge } from 'tailwind-merge';
+const sizes = {
     sm: 'max-w-sm',
     md: 'max-w-md',
     lg: 'max-w-lg',
     xl: 'max-w-xl',
     xxl: 'max-w-2xl'
 };
-import classNames from 'classnames';
 export let divClass = 'space-y-2.5 animate-pulse';
 export let size = 'sm';
-$: outDivclass = classNames(sizes[size], divClass, $$props.class);
+$: outDivclass = twMerge(sizes[size], divClass, $$props.class);
 </script>
 
 <div role="status" class={outDivclass}>

package/dist/skeleton/TextPlaceholder.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextPlaceholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/skeleton/TextPlaceholder.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA6DD,QAAA,MAAM,SAAS;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}
+{"version":3,"file":"TextPlaceholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/skeleton/TextPlaceholder.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4DD,QAAA,MAAM,SAAS;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}

package/dist/skeleton/VideoPlaceholder.svelte

@@ -1,14 +1,14 @@
-<script>const sizes = {
+<script>import { twMerge } from 'tailwind-merge';
+const sizes = {
     sm: 'max-w-sm',
     md: 'max-w-md',
     lg: 'max-w-lg',
     xl: 'max-w-xl',
     xxl: 'max-w-2xl'
 };
-import classNames from 'classnames';
 export let divClass = 'flex justify-center items-center h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700';
 export let size = 'sm';
-$: outDivclass = classNames(sizes[size], divClass, $$props.class);
+$: outDivclass = twMerge(sizes[size], divClass, $$props.class);
 </script>
 
 <div role="status" class={outDivclass}>

package/dist/skeleton/VideoPlaceholder.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPlaceholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/skeleton/VideoPlaceholder.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiCD,QAAA,MAAM,SAAS;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC3D,MAAM,MAAM,sBAAsB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC7D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,oBAAoB,CAAC,qBAAqB,EAAE,sBAAsB,EAAE,qBAAqB,CAAC;CACvI"}
+{"version":3,"file":"VideoPlaceholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/skeleton/VideoPlaceholder.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgCD,QAAA,MAAM,SAAS;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC3D,MAAM,MAAM,sBAAsB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC7D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,oBAAoB,CAAC,qBAAqB,EAAE,sBAAsB,EAAE,qBAAqB,CAAC;CACvI"}

package/dist/skeleton/WidgetPlaceholder.svelte

@@ -1,8 +1,8 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let divClass = 'p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700';
 </script>
 
-<div role="status" class={classNames(divClass, $$props.class)}>
+<div role="status" class={twMerge(divClass, $$props.class)}>
   <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2.5" />
   <div class="mb-10 w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
   <div class="flex items-baseline mt-4 space-x-6">

package/dist/speed-dial/SpeedDial.svelte

@@ -1,7 +1,7 @@
 <script context="module">export {};
 </script>
 
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import Button from '../buttons/Button.svelte';
 import Popper from '../utils/Popper.svelte';
 import { setContext } from 'svelte';
@@ -19,9 +19,9 @@ export let name = 'Open actions menu';
 export let gradient = false;
 setContext('speed-dial', { pill, tooltip, textOutside });
 let divClass;
-$: divClass = classNames(defaultClass, 'group', $$props.class);
+$: divClass = twMerge(defaultClass, 'group', $$props.class);
 let poperClass;
-$: poperClass = classNames(popperDefaultClass, ['top', 'bottom'].includes(placement) && 'flex-col');
+$: poperClass = twMerge(popperDefaultClass, ['top', 'bottom'].includes(placement) && 'flex-col');
 let open = false;
 </script>
 

package/dist/speed-dial/SpeedDialButton.svelte

@@ -1,6 +1,6 @@
 <script>import Button from '../buttons/Button.svelte';
 import Tooltip from '../tooltips/Tooltip.svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
 const context = getContext('speed-dial');
 export let btnDefaultClass = 'w-[52px] h-[52px] shadow-sm !p-2';
@@ -11,7 +11,7 @@ export let textOutside = context.textOutside;
 export let textOutsideClass = 'block absolute -left-14 top-1/2 mb-px text-sm font-medium -translate-y-1/2';
 export let textDefaultClass = 'block mb-px text-xs font-medium';
 let btnClass;
-$: btnClass = classNames(btnDefaultClass, tooltip === 'none' && 'flex-col', textOutside && 'relative', $$props.class);
+$: btnClass = twMerge(btnDefaultClass, tooltip === 'none' && 'flex-col', textOutside && 'relative', $$props.class);
 </script>
 
 <Button {pill} outline color="light" {...$$restProps} class={btnClass} on:click>

package/dist/spinners/Spinner.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let color = 'primary';
 export let bg = 'text-gray-300';
 export let customColor = '';
@@ -27,7 +27,7 @@ let fillColorClass = color === undefined ? '' : fillColorClasses[color] ?? fillC
 
 <svg
   role="status"
-  class={classNames(
+  class={twMerge(
     'inline -mt-px animate-spin dark:text-gray-600',
     iconsize,
     bg,

package/dist/steps/StepIndicator.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge, twJoin } from 'tailwind-merge';
 export let steps = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
 export let currentStep = 1;
 export let size = 'h-2.5';
@@ -35,27 +35,27 @@ const currentStepColors = {
 };
 </script>
 
-<div {...$$restProps} class={classNames('space-y-2 dark:text-white', $$props.class)}>
+<div {...$$restProps} class={twMerge('space-y-2 dark:text-white', $$props.class)}>
   {#if !hideLabel}
     <h3 class="text-base font-semibold">{steps[currentStep - 1]}</h3>
   {/if}
-  <div class={classNames('flex justify-between gap-2 w-full', size)}>
+  <div class={twJoin('flex justify-between gap-2 w-full', size)}>
     {#each steps as step, i}
       {#if i === currentStep - 1}
         <div class="relative w-full h-full">
-          <div class={classNames('relative w-full h-full rounded-sm', currentStepColors[color])} />
+          <div class={twJoin('relative w-full h-full rounded-sm', currentStepColors[color])} />
           {#if glow}
             <div
-              class={classNames(
+              class={twJoin(
                 'absolute -inset-1 rounded-sm blur opacity-30 dark:opacity-25',
                 currentStepColors[color]
               )} />
           {/if}
         </div>
       {:else if i < currentStep - 1}
-        <div class={classNames('w-full h-full rounded-sm', completedStepColors[color])} />
+        <div class={twJoin('w-full h-full rounded-sm', completedStepColors[color])} />
       {:else}
-        <div class={classNames('w-full h-full rounded-sm bg-gray-200 dark:bg-gray-700')} />
+        <div class='w-full h-full rounded-sm bg-gray-200 dark:bg-gray-700' />
       {/if}
     {/each}
   </div>

package/dist/tables/Table.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge, twJoin } from 'tailwind-merge';
 import { setContext } from 'svelte';
 export let divClass = 'relative overflow-x-auto';
 export let striped = false;
@@ -24,8 +24,8 @@ $: setContext('noborder', noborder);
 $: setContext('color', color);
 </script>
 
-<div class={classNames(divClass, shadow && 'shadow-md sm:rounded-lg')}>
-  <table {...$$restProps} class={classNames('w-full text-left text-sm', colors[color], $$props.class)}>
+<div class={twJoin(divClass, shadow && 'shadow-md sm:rounded-lg')}>
+  <table {...$$restProps} class={twMerge('w-full text-left text-sm', colors[color], $$props.class)}>
     <slot />
   </table>
 </div>

package/dist/tables/TableBodyCell.svelte

@@ -1,10 +1,10 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
 export let tdClass = 'px-6 py-4 whitespace-nowrap font-medium ';
 let color = 'default';
 color = getContext('color');
 let tdClassfinal;
-$: tdClassfinal = classNames(tdClass, color === 'default'
+$: tdClassfinal = twMerge(tdClass, color === 'default'
     ? 'text-gray-900 dark:text-white'
     : 'text-blue-50 whitespace-nowrap dark:text-blue-100', $$props.class);
 </script>

package/dist/tables/TableBodyRow.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
 export let color = getContext('color');
 const colors = {
@@ -29,7 +29,13 @@ const stripColors = {
     custom: ''
 };
 let trClass;
-$: trClass = classNames(!getContext('noborder') && 'border-b last:border-b-0', colors[color], getContext('hoverable') && hoverColors[color], getContext('striped') && stripColors[color], $$props.class);
+$: trClass = twMerge([
+    !getContext('noborder') && 'border-b last:border-b-0',
+    colors[color],
+    getContext('hoverable') && hoverColors[color],
+    getContext('striped') && stripColors[color],
+    $$props.class
+]);
 </script>
 
 <tr {...$$restProps} class={trClass} on:click on:contextmenu>

package/dist/tables/TableHead.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
 export let theadClass = 'text-xs uppercase';
 export let defaultRow = true;
@@ -28,7 +28,7 @@ let borderColors = striped
         : color === 'custom'
             ? ''
             : `border-${color}-400`;
-$: theadClassfinal = classNames(theadClass, textColor, striped && borderColors, bgColors[color], $$props.class);
+$: theadClassfinal = twMerge(theadClass, textColor, striped && borderColors, bgColors[color], $$props.class);
 </script>
 
 <thead {...$$restProps} class={theadClassfinal}>

package/dist/tables/TableHeadCell.svelte

@@ -1,10 +1,10 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let padding = 'px-6 py-3';
 </script>
 
 <th
   {...$$restProps}
-  class={classNames(padding, $$props.class)}
+  class={twMerge(padding, $$props.class)}
   on:click
   on:focus
   on:keydown

package/dist/tables/TableSearch.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { setContext } from 'svelte';
 export let divClass = 'relative overflow-x-auto shadow-md sm:rounded-lg';
 export let inputValue = '';
@@ -44,7 +44,7 @@ $: setContext('color', color);
         {placeholder} />
     </div>
   </div>
-  <table {...$$restProps} class={classNames('w-full text-left text-sm', colors[color], $$props.class)}>
+  <table {...$$restProps} class={twMerge('w-full text-left text-sm', colors[color], $$props.class)}>
     <slot />
   </table>
 </div>

package/dist/tabs/TabItem.svelte

@@ -1,6 +1,6 @@
 <script>import { getContext } from 'svelte';
 import { writable } from 'svelte/store';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 export let open = false;
 export let title = 'Tab title';
 export let activeClasses = undefined;
@@ -19,12 +19,12 @@ function init(node) {
     return { destroy };
 }
 let buttonClass;
-$: buttonClass = classNames(defaultClass, open ? activeClasses ?? ctx.activeClasses : inactiveClasses ?? ctx.inactiveClasses, open && 'active'
+$: buttonClass = twMerge(defaultClass, open ? activeClasses ?? ctx.activeClasses : inactiveClasses ?? ctx.inactiveClasses, open && 'active'
 // $$restProps.disabled && 'cursor-not-allowed pointer-events-none'
 );
 </script>
 
-<li class={classNames('group', $$props.class)} role="presentation">
+<li class={twMerge('group', $$props.class)} role="presentation">
   <button
     type="button"
     on:click={() => (open = true)}

package/dist/tabs/Tabs.svelte

@@ -1,7 +1,7 @@
 <script context="module">import { writable } from 'svelte/store';
 </script>
 
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { setContext } from 'svelte';
 export let style = 'none';
 export let defaultClass = 'flex flex-wrap space-x-2';
@@ -36,7 +36,7 @@ function init(node) {
     });
     return { destroy };
 }
-$: ulClass = classNames(defaultClass, style === 'underline' && '-mb-px', $$props.class);
+$: ulClass = twMerge(defaultClass, style === 'underline' && '-mb-px', $$props.class);
 </script>
 
 <ul class={ulClass}>

package/dist/timeline/TimelineItem.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twJoin } from 'tailwind-merge';
 import { getContext } from 'svelte';
 export let title = '';
 export let date = '';
@@ -32,7 +32,7 @@ const timeClasses = {
     group: 'text-lg font-semibold text-gray-900 dark:text-white',
     custom: customTimeClass
 };
-const h3Class = classNames(order === 'vertical'
+const h3Class = twJoin(order === 'vertical'
     ? 'flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white'
     : 'text-lg font-semibold text-gray-900 dark:text-white');
 </script>

package/dist/toasts/Toast.svelte

@@ -1,5 +1,5 @@
 <script>import Frame from '../utils/Frame.svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import CloseButton from '../utils/CloseButton.svelte';
 import { fade } from 'svelte/transition';
 export let simple = false;
@@ -18,7 +18,7 @@ const positions = {
     none: ''
 };
 let finalDivClass;
-$: finalDivClass = classNames('flex', align ? 'items-center' : 'items-start', divClass, positions[position], $$props.class);
+$: finalDivClass = twMerge('flex', align ? 'items-center' : 'items-start', divClass, positions[position], $$props.class);
 const colors = {
     primary: 'text-primary-500 bg-primary-100 dark:bg-primary-800 dark:text-primary-200',
     gray: 'text-gray-500 bg-gray-100 dark:bg-gray-700 dark:text-gray-200',
@@ -32,7 +32,7 @@ const colors = {
     none: ''
 };
 let iconClass;
-$: iconClass = classNames('inline-flex items-center justify-center shrink-0', colors[color], defaultIconClass);
+$: iconClass = twMerge('inline-flex items-center justify-center shrink-0', colors[color], defaultIconClass);
 const clsBtnExtraClass = '-mx-1.5 -my-1.5 text-gray-400 hover:text-gray-900 focus:!ring-gray-300 hover:bg-gray-100 dark:text-gray-500 dark:hover:text-white dark:hover:bg-gray-700';
 </script>
 

package/dist/toasts/Toast.svelte.d.ts

@@ -150,6 +150,44 @@ declare const __propDef: {
         'on:load'?: import("svelte/elements").EventHandler<Event, Element> | null | undefined;
         'on:error'?: import("svelte/elements").EventHandler<Event, Element> | null | undefined;
         'on:toggle'?: import("svelte/elements").EventHandler<Event, HTMLAnchorElement> | null | undefined;
+        /**
+         * ## Features
+         * [Go to Toast](https://flowbite-svelte.com/docs/components/toast)
+         * - Setup
+         * - Default toast
+         * - Simple toast
+         * - Colors
+         * - Icons
+         * - Autohide example
+         * - Transitions
+         * - Blur examples
+         * - Fly examples
+         * - Undo button
+         * - Advanced examples
+         * - Toast message
+         * - Push notification
+         * - Interactive toast
+         * - Positioning
+         * ## Props
+         * @prop simple: boolean = false;
+         * @prop position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none' = 'none';
+         * @prop open: boolean = true;
+         * @prop divClass: string = 'w-full max-w-xs p-4';
+         * @prop defaultIconClass: string = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 mr-3';
+         * ## Example
+         * ```
+         * <script>
+         *   import { Toast } from 'flowbite-svelte';
+         * </script>
+         * <Toast>
+         *   <svelte:fragment slot="icon">
+         *     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z" /><path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z" />
+         *     </svg>
+         *   </svelte:fragment>
+         *   Dismissable user notification.
+         * </Toast>
+         * ```
+         */
         'on:keydown'?: import("svelte/elements").KeyboardEventHandler<HTMLAnchorElement> | null | undefined;
         'on:keypress'?: import("svelte/elements").KeyboardEventHandler<HTMLAnchorElement> | null | undefined;
         'on:keyup'?: import("svelte/elements").KeyboardEventHandler<HTMLAnchorElement> | null | undefined;

package/dist/toasts/Toast.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/toasts/Toast.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAsHD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Toast.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/toasts/Toast.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAsHD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAKf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAqCG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA1CoD,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}