flowbite-svelte 0.37.4 → 0.38.1

package/dist/ratings/AdvancedRating.svelte

@@ -1,9 +1,9 @@
 <script>export let ratings = [];
 export let divClass = 'flex items-center mt-4';
-export let labelClass = 'text-sm font-medium text-blue-600 dark:text-blue-500';
+export let labelClass = 'text-sm font-medium text-gray-600 dark:text-gray-500';
 export let ratingDivClass = 'mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700';
 export let ratingClass = 'h-5 bg-yellow-400 rounded';
-export let rightLabelClass = 'text-sm font-medium text-blue-600 dark:text-blue-500';
+export let rightLabelClass = 'text-sm font-medium text-gray-600 dark:text-gray-500';
 export let unit = '%';
 </script>
 
@@ -30,9 +30,9 @@ export let unit = '%';
   ## Props
   @prop ratings: { label: string; rating: number }[] = [];
   @prop divClass: string = 'flex items-center mt-4';
-  @prop labelClass: string = 'text-sm font-medium text-blue-600 dark:text-blue-500';
+  @prop labelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
   @prop ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700';
   @prop ratingClass: string = 'h-5 bg-yellow-400 rounded';
-  @prop rightLabelClass: string = 'text-sm font-medium text-blue-600 dark:text-blue-500';
+  @prop rightLabelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
   @prop unit: string = '%';
 -->

package/dist/ratings/AdvancedRating.svelte.d.ts

@@ -29,10 +29,10 @@ export type AdvancedRatingSlots = typeof __propDef.slots;
  * ## Props
  * @prop ratings: { label: string; rating: number }[] = [];
  * @prop divClass: string = 'flex items-center mt-4';
- * @prop labelClass: string = 'text-sm font-medium text-blue-600 dark:text-blue-500';
+ * @prop labelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
  * @prop ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700';
  * @prop ratingClass: string = 'h-5 bg-yellow-400 rounded';
- * @prop rightLabelClass: string = 'text-sm font-medium text-blue-600 dark:text-blue-500';
+ * @prop rightLabelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
  * @prop unit: string = '%';
  */
 export default class AdvancedRating extends SvelteComponentTyped<AdvancedRatingProps, AdvancedRatingEvents, AdvancedRatingSlots> {

package/dist/ratings/Rating.svelte

@@ -1,5 +1,5 @@
 <script>import Star from './Star.svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import generateId from '../utils/generateId.js';
 export let divClass = 'flex items-center';
 export let size = 24;
@@ -18,7 +18,7 @@ let grayStars = total - (fullStars + Math.ceil(rateDiffence));
 // console.log(fullStars, grayStars, rateDiffence, percentRating)
 </script>
 
-<div class={classNames(divClass, $$props.class)}>
+<div class={twMerge(divClass, $$props.class)}>
   {#if count}
     <svelte:component this={icon} fillPercent={100} {size} />
     <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">{rating}</p>

package/dist/ratings/RatingComment.svelte

@@ -1,5 +1,4 @@
 <script>import Button from '../buttons/Button.svelte';
-import Star from './Star.svelte';
 import Rating from './Rating.svelte';
 // default is floor
 export let ceil = false;
@@ -51,7 +50,7 @@ let grayStars = comment.total - roundedRating;
         {#if abuselink}
           <a
             href={abuselink}
-            class="pl-4 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+            class="pl-4 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500"
             >Report abuse</a>
         {/if}
       </div>
@@ -98,7 +97,7 @@ let grayStars = comment.total - roundedRating;
     </p>
     <a
       href="/"
-      class="block mb-5 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+      class="block mb-5 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500"
       >Read more</a
     >
     <svelte:fragment slot="evaluation">19 people found this helpful</svelte:fragment>

package/dist/ratings/RatingComment.svelte.d.ts

@@ -70,7 +70,7 @@ export type RatingCommentSlots = typeof __propDef.slots;
  *   </p>
  *   <a
  *     href="/"
- *     class="block mb-5 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+ *     class="block mb-5 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500"
  *     >Read more</a
  *   >
  *   <svelte:fragment slot="evaluation">19 people found this helpful</svelte:fragment>

package/dist/ratings/RatingComment.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RatingComment.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/RatingComment.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAkGD,QAAA,MAAM,SAAS;;;;;iBAhB0J;YACrK,EAAE,EAAE,MAAM,CAAC;YACX,IAAI,EAAE;gBACJ,MAAM,MAAM,CAAC;gBACb,GAAG,EAAE;oBACH,GAAG,EAAE,MAAM,CAAC;oBACZ,GAAG,EAAE,MAAM,CAAC;iBACb,CAAC;gBACF,MAAM,EAAE,MAAM,CAAC;aAChB,CAAC;YACF,KAAK,EAAE,MAAM,CAAC;YACd,MAAM,EAAE,MAAM,CAAC;YACf,OAAO,EAAE,MAAM,CAAC;YAChB,OAAO,EAAE,MAAM,CAAC;YAChB,QAAQ,EAAE,MAAM,CAAC;SAClB;;;;;;;;;CACoD,CAAC;AACxD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"RatingComment.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/RatingComment.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgGD,QAAA,MAAM,SAAS;;;;;iBAhB0J;YACrK,EAAE,EAAE,MAAM,CAAC;YACX,IAAI,EAAE;gBACJ,MAAM,MAAM,CAAC;gBACb,GAAG,EAAE;oBACH,GAAG,EAAE,MAAM,CAAC;oBACZ,GAAG,EAAE,MAAM,CAAC;iBACb,CAAC;gBACF,MAAM,EAAE,MAAM,CAAC;aAChB,CAAC;YACF,KAAK,EAAE,MAAM,CAAC;YACd,MAAM,EAAE,MAAM,CAAC;YACf,OAAO,EAAE,MAAM,CAAC;YAChB,OAAO,EAAE,MAAM,CAAC;YAChB,QAAQ,EAAE,MAAM,CAAC;SAClB;;;;;;;;;CACoD,CAAC;AACxD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

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}
@@ -54,7 +54,7 @@ export let liClass = 'flex items-center';
           {review.title}
         </h4>
       </div>
-      <p class="bg-blue-700 text-white text-sm font-semibold inline-flex items-center p-1.5 rounded">
+      <p class="bg-primary-700 text-white text-sm font-semibold inline-flex items-center p-1.5 rounded">
         {review.rating}
       </p>
     </div>
@@ -101,14 +101,14 @@ export let liClass = 'flex items-center';
     <aside class="flex items-center mt-3 space-x-5">
       <a
         href="/"
-        class="inline-flex items-center text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+        class="inline-flex items-center text-sm font-medium text-primary-600 hover:underline dark:text-primary-500"
       >
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 mr-1"><path d="M7.493 18.75c-.425 0-.82-.236-.975-.632A7.48 7.48 0 016 15.375c0-1.75.599-3.358 1.602-4.634.151-.192.373-.309.6-.397.473-.183.89-.514 1.212-.924a9.042 9.042 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75 2.25 2.25 0 012.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H14.23c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23h-.777zM2.331 10.977a11.969 11.969 0 00-.831 4.398 12 12 0 00.52 3.507c.26.85 1.084 1.368 1.973 1.368H4.9c.445 0 .72-.498.523-.898a8.963 8.963 0 01-.924-3.977c0-1.708.476-3.305 1.302-4.666.245-.403-.028-.959-.5-.959H4.25c-.832 0-1.612.453-1.918 1.227z" /></svg>
         Helpful
       </a>
       <a
         href="/"
-        class="inline-flex items-center text-sm font-medium text-blue-600 hover:underline dark:text-blue-500 group"
+        class="inline-flex items-center text-sm font-medium text-primary-600 hover:underline dark:text-primary-500 group"
       >
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 mr-1"><path d="M15.73 5.25h1.035A7.465 7.465 0 0118 9.375a7.465 7.465 0 01-1.235 4.125h-.148c-.806 0-1.534.446-2.031 1.08a9.04 9.04 0 01-2.861 2.4c-.723.384-1.35.956-1.653 1.715a4.498 4.498 0 00-.322 1.672V21a.75.75 0 01-.75.75 2.25 2.25 0 01-2.25-2.25c0-1.152.26-2.243.723-3.218C7.74 15.724 7.366 15 6.748 15H3.622c-1.026 0-1.945-.694-2.054-1.715A12.134 12.134 0 011.5 12c0-2.848.992-5.464 2.649-7.521.388-.482.987-.729 1.605-.729H9.77a4.5 4.5 0 011.423.23l3.114 1.04a4.5 4.5 0 001.423.23zM21.669 13.773c.536-1.362.831-2.845.831-4.398 0-1.22-.182-2.398-.52-3.507-.26-.85-1.084-1.368-1.973-1.368H19.1c-.445 0-.72.498-.523.898.591 1.2.924 2.55.924 3.977a8.959 8.959 0 01-1.302 4.666c-.245.403.028.959.5.959h1.053c.832 0 1.612-.453 1.918-1.227z" /></svg>
         Not helpful

package/dist/ratings/Review.svelte.d.ts

@@ -62,14 +62,14 @@ export type ReviewSlots = typeof __propDef.slots;
  *   <aside class="flex items-center mt-3 space-x-5">
  *     <a
  *       href="/"
- *       class="inline-flex items-center text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+ *       class="inline-flex items-center text-sm font-medium text-primary-600 hover:underline dark:text-primary-500"
  *     >
  *       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 mr-1"><path d="M7.493 18.75c-.425 0-.82-.236-.975-.632A7.48 7.48 0 016 15.375c0-1.75.599-3.358 1.602-4.634.151-.192.373-.309.6-.397.473-.183.89-.514 1.212-.924a9.042 9.042 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75 2.25 2.25 0 012.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H14.23c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23h-.777zM2.331 10.977a11.969 11.969 0 00-.831 4.398 12 12 0 00.52 3.507c.26.85 1.084 1.368 1.973 1.368H4.9c.445 0 .72-.498.523-.898a8.963 8.963 0 01-.924-3.977c0-1.708.476-3.305 1.302-4.666.245-.403-.028-.959-.5-.959H4.25c-.832 0-1.612.453-1.918 1.227z" /></svg>
  *       Helpful
  *     </a>
  *     <a
  *       href="/"
- *       class="inline-flex items-center text-sm font-medium text-blue-600 hover:underline dark:text-blue-500 group"
+ *       class="inline-flex items-center text-sm font-medium text-primary-600 hover:underline dark:text-primary-500 group"
  *     >
  *       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 mr-1"><path d="M15.73 5.25h1.035A7.465 7.465 0 0118 9.375a7.465 7.465 0 01-1.235 4.125h-.148c-.806 0-1.534.446-2.031 1.08a9.04 9.04 0 01-2.861 2.4c-.723.384-1.35.956-1.653 1.715a4.498 4.498 0 00-.322 1.672V21a.75.75 0 01-.75.75 2.25 2.25 0 01-2.25-2.25c0-1.152.26-2.243.723-3.218C7.74 15.724 7.366 15 6.748 15H3.622c-1.026 0-1.945-.694-2.054-1.715A12.134 12.134 0 011.5 12c0-2.848.992-5.464 2.649-7.521.388-.482.987-.729 1.605-.729H9.77a4.5 4.5 0 011.423.23l3.114 1.04a4.5 4.5 0 001.423.23zM21.669 13.773c.536-1.362.831-2.845.831-4.398 0-1.22-.182-2.398-.52-3.507-.26-.85-1.084-1.368-1.973-1.368H19.1c-.445 0-.72.498-.523.898.591 1.2.924 2.55.924 3.977a8.959 8.959 0 01-1.302 4.666c-.245.403.028.959.5.959h1.053c.832 0 1.612-.453 1.918-1.227z" /></svg>
  *       Not helpful

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>
 
@@ -46,7 +46,7 @@ export let asideClass = 'w-64';
           </svelte:fragment>
           <svelte:fragment slot="subtext">
             <span
-              class="inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200"
+              class="inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-primary-600 bg-primary-200 rounded-full dark:bg-primary-900 dark:text-primary-200"
               >3</span
             >
           </svelte:fragment>

package/dist/sidebars/Sidebar.svelte.d.ts

@@ -53,7 +53,7 @@ export type SidebarSlots = typeof __propDef.slots;
  *         </svelte:fragment>
  *         <svelte:fragment slot="subtext">
  *           <span
- *             class="inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200"
+ *             class="inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-primary-600 bg-primary-200 rounded-full dark:bg-primary-900 dark:text-primary-200"
  *             >3</span
  *           >
  *         </svelte:fragment>

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';
-export let divWrapperClass = 'p-4 mt-6 bg-blue-50 rounded-lg dark:bg-blue-900';
+<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-orange-100 text-orange-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-orange-200 dark:text-orange-900';
+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}
@@ -31,7 +31,7 @@ export let label = '';
     <svelte:fragment slot="icon">
       <button
         type="button"
-        class="ml-auto -mx-1.5 -my-1.5 bg-blue-50 text-blue-900 rounded-lg focus:ring-2 focus:ring-blue-400 p-1 hover:bg-blue-200 inline-flex h-6 w-6 dark:bg-blue-900 dark:text-blue-400 dark:hover:bg-blue-800"
+        class="ml-auto -mx-1.5 -my-1.5 bg-primary-50 text-primary-900 rounded-lg focus:ring-2 focus:ring-primary-400 p-1 hover:bg-primary-200 inline-flex h-6 w-6 dark:bg-primary-900 dark:text-primary-400 dark:hover:bg-primary-800"
         data-collapse-toggle="dropdown-cta"
         aria-label="Close"
       >
@@ -39,12 +39,12 @@ export let label = '';
         <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="M6 18L18 6M6 6l12 12" /></svg>
       </button>
     </svelte:fragment>
-    <p class="mb-3 text-sm text-blue-900 dark:text-blue-400">
+    <p class="mb-3 text-sm text-primary-900 dark:text-primary-400">
       Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a
       limited time in your profile.
     </p>
     <a
-      class="text-sm text-blue-900 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+      class="text-sm text-primary-900 underline hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-300"
       href="/">Turn new navigation off</a
     >
   </SidebarCta>

package/dist/sidebars/SidebarCta.svelte.d.ts

@@ -33,7 +33,7 @@ export type SidebarCtaSlots = typeof __propDef.slots;
  *   <svelte:fragment slot="icon">
  *     <button
  *       type="button"
- *       class="ml-auto -mx-1.5 -my-1.5 bg-blue-50 text-blue-900 rounded-lg focus:ring-2 focus:ring-blue-400 p-1 hover:bg-blue-200 inline-flex h-6 w-6 dark:bg-blue-900 dark:text-blue-400 dark:hover:bg-blue-800"
+ *       class="ml-auto -mx-1.5 -my-1.5 bg-primary-50 text-primary-900 rounded-lg focus:ring-2 focus:ring-primary-400 p-1 hover:bg-primary-200 inline-flex h-6 w-6 dark:bg-primary-900 dark:text-primary-400 dark:hover:bg-primary-800"
  *       data-collapse-toggle="dropdown-cta"
  *       aria-label="Close"
  *     >
@@ -41,12 +41,12 @@ export type SidebarCtaSlots = typeof __propDef.slots;
  *       <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="M6 18L18 6M6 6l12 12" /></svg>
  *     </button>
  *   </svelte:fragment>
- *   <p class="mb-3 text-sm text-blue-900 dark:text-blue-400">
+ *   <p class="mb-3 text-sm text-primary-900 dark:text-primary-400">
  *     Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a
  *     limited time in your profile.
  *   </p>
  *   <a
- *     class="text-sm text-blue-900 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+ *     class="text-sm text-primary-900 underline hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-300"
  *     href="/">Turn new navigation off</a
  *   >
  * </SidebarCta>

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>