flowbite-svelte 1.4.3 → 1.5.0

package/dist/sidebar/SidebarButton.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SidebarButtonProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SidebarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1352)
+ * [SidebarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1326)
  * ## Props
  * @prop breakpoint = "md"
  * @prop class: className

package/dist/sidebar/SidebarCta.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
   import { sidebarcta } from ".";
   import type { SidebarCtaProps } from "../types";
@@ -7,9 +8,9 @@
   const { base, div, span } = $derived(sidebarcta());
 </script>
 
-<div {...restProps} id="dropdown-cta" class={base({ class: clsx(className) })} role="alert">
-  <div class={div({ class: divClass })}>
-    <span class={span({ class: spanClass })}>{label}</span>
+<div {...restProps} id="dropdown-cta" class={twMerge(base(), clsx(className))} role="alert">
+  <div class={twMerge(div(), clsx(divClass))}>
+    <span class={twMerge(span(), clsx(spanClass))}>{label}</span>
     {#if icon}
       {@render icon()}
     {/if}
@@ -21,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarCtaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1356)
+[SidebarCtaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1330)
 ## Props
 @prop children
 @prop icon

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

@@ -2,7 +2,7 @@ import type { SidebarCtaProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SidebarCtaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1356)
+ * [SidebarCtaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1330)
  * ## Props
  * @prop children
  * @prop icon

package/dist/sidebar/SidebarDropdownWrapper.svelte

@@ -5,6 +5,7 @@
   import { uiHelpers } from "..";
   import { sidebardropdownwrapper } from ".";
   import type { SidebarDropdownWrapperProps, ParamsType } from "../types";
+  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
 
   type SidebarContext = {
@@ -14,7 +15,7 @@
 
   let { children, arrowup, arrowdown, icon, isOpen = false, btnClass, label, spanClass, ulClass, transition = slide, params, svgClass, class: className, onclick, ...restProps }: SidebarDropdownWrapperProps = $props();
 
-  const { base, btn, span, svg, ul } = $derived(sidebardropdownwrapper());
+  const { base, btn, span, svg, ul } = sidebardropdownwrapper();
 
   let sidebarDropdown = uiHelpers();
   sidebarDropdown.isOpen = isOpen;
@@ -48,30 +49,30 @@
   }
 </script>
 
-<li class={base({ class: clsx(className) })}>
-  <button {...restProps} onclick={handleDropdown} type="button" class={btn({ class: btnClass })} aria-controls="sidebar-dropdown">
+<li class={twMerge(base(), clsx(className))}>
+  <button {...restProps} onclick={handleDropdown} type="button" class={twMerge(btn(), clsx(btnClass))} aria-controls="sidebar-dropdown">
     {#if icon}
       {@render icon()}
     {/if}
-    <span class={span({ class: spanClass })}>{label}</span>
+    <span class={twMerge(span(), clsx(spanClass))}>{label}</span>
     {#if isOpen}
       {#if arrowup}
         {@render arrowup()}
       {:else}
-        <svg class={svg({ class: svgClass })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+        <svg class={twMerge(svg(), clsx(svgClass))} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
         </svg>
       {/if}
     {:else if arrowdown}
       {@render arrowdown()}
     {:else}
-      <svg class={svg({ class: svgClass })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+      <svg class={twMerge(svg(), clsx(svgClass))} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
       </svg>
     {/if}
   </button>
   {#if isOpen}
-    <ul class={ul({ class: ulClass })} transition:transition={params as ParamsType}>
+    <ul class={twMerge(ul(), clsx(ulClass))} transition:transition={params as ParamsType}>
       {@render children()}
     </ul>
   {/if}
@@ -81,7 +82,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarDropdownWrapperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1375)
+[SidebarDropdownWrapperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1349)
 ## Props
 @prop children
 @prop arrowup

package/dist/sidebar/SidebarDropdownWrapper.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SidebarDropdownWrapperProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SidebarDropdownWrapperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1375)
+ * [SidebarDropdownWrapperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1349)
  * ## Props
  * @prop children
  * @prop arrowup

package/dist/sidebar/SidebarGroup.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
+  import clsx from "clsx";
   import type { SidebarGroupProps } from "../types";
 
   let { children, class: className = "space-y-2", borderClass = "pt-4 mt-4 border-t border-gray-200 dark:border-gray-700", border = false, ...restProps }: SidebarGroupProps = $props();
 </script>
 
-<ul {...restProps} class={border ? borderClass : className}>
+<ul {...restProps} class={border ? clsx(borderClass) : clsx(className)}>
   {@render children()}
 </ul>
 
@@ -12,7 +13,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1392)
+[SidebarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1366)
 ## Props
 @prop children
 @prop class: className = "space-y-2"

package/dist/sidebar/SidebarGroup.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SidebarGroupProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SidebarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1392)
+ * [SidebarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1366)
  * ## Props
  * @prop children
  * @prop class: className = "space-y-2"

package/dist/sidebar/SidebarItem.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { getContext } from "svelte";
-  import { twMerge } from "tailwind-merge";
-  import type { SidebarCtxType, SidebarItemProps } from "../types";
+  import { type SidebarCtxType, type SidebarItemProps, cn } from "..";
 
   let { icon, subtext, href, label, spanClass = "ms-3", activeClass, nonActiveClass, aClass, active, class: className, ...restProps }: SidebarItemProps = $props();
 
@@ -15,24 +14,20 @@
   });
   let activeItem = $state();
 
-  // $effect(() => {
-  //   activeItem = sidebarUrl ? href === sidebarUrl : false;
-  // });
   $effect(() => {
     // Prioritize the explicit 'active' prop if provided
     activeItem = active !== undefined ? active : sidebarUrl ? href === sidebarUrl : false;
   });
 
-  // let aCls = $derived((activeItem ?? sidebarUrl === href) ? (activeClass ?? context.activeClass) : (nonActiveClass ?? context.nonActiveClass));
   let aCls = $derived((activeItem ?? sidebarUrl === href) ? (activeClass ?? context.activeClass) : (nonActiveClass ?? context.nonActiveClass));
 </script>
 
-<li class={className}>
-  <a onclick={context.closeSidebar} {...restProps} {href} aria-current={(activeItem ?? sidebarUrl === href) ? "page" : undefined} class={twMerge(aCls, aClass)}>
+<li class={cn(className)}>
+  <a onclick={context.closeSidebar} {...restProps} {href} aria-current={(activeItem ?? sidebarUrl === href) ? "page" : undefined} class={cn(aCls, aClass)}>
     {#if icon}
       {@render icon()}
     {/if}
-    <span class={spanClass}>{label}</span>
+    <span class={cn(spanClass)}>{label}</span>
     {#if subtext}
       {@render subtext()}
     {/if}
@@ -43,7 +38,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1398)
+[SidebarItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1372)
 ## Props
 @prop icon
 @prop subtext

package/dist/sidebar/SidebarItem.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { SidebarItemProps } from "../types";
+import { type SidebarItemProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SidebarItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1398)
+ * [SidebarItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1372)
  * ## Props
  * @prop icon
  * @prop subtext

package/dist/sidebar/theme.d.ts

@@ -177,16 +177,16 @@ export declare const sidebarcta: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            div?: import("tailwind-variants").ClassValue;
             span?: import("tailwind-variants").ClassValue;
+            div?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            div?: import("tailwind-variants").ClassValue;
             span?: import("tailwind-variants").ClassValue;
+            div?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -197,8 +197,8 @@ export declare const sidebarcta: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            div?: import("tailwind-variants").ClassValue;
             span?: import("tailwind-variants").ClassValue;
+            div?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -251,20 +251,20 @@ export declare const sidebardropdownwrapper: import("tailwind-variants").TVRetur
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            svg?: import("tailwind-variants").ClassValue;
             span?: import("tailwind-variants").ClassValue;
-            btn?: import("tailwind-variants").ClassValue;
+            svg?: import("tailwind-variants").ClassValue;
             ul?: import("tailwind-variants").ClassValue;
+            btn?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            svg?: import("tailwind-variants").ClassValue;
             span?: import("tailwind-variants").ClassValue;
-            btn?: import("tailwind-variants").ClassValue;
+            svg?: import("tailwind-variants").ClassValue;
             ul?: import("tailwind-variants").ClassValue;
+            btn?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -277,10 +277,10 @@ export declare const sidebardropdownwrapper: import("tailwind-variants").TVRetur
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            svg?: import("tailwind-variants").ClassValue;
             span?: import("tailwind-variants").ClassValue;
-            btn?: import("tailwind-variants").ClassValue;
+            svg?: import("tailwind-variants").ClassValue;
             ul?: import("tailwind-variants").ClassValue;
+            btn?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {

package/dist/skeleton/CardPlaceholder.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
   import { cardPlaceholder } from ".";
   import type { CardPlaceholderProps } from "../types";
@@ -8,7 +9,7 @@
   const { base, imageArea, imageIcon, line, footerArea } = $derived(cardPlaceholder({ size }));
 </script>
 
-<div role="status" {...restProps} class={base({ class: clsx(className) })}>
+<div role="status" {...restProps} class={twMerge(base(), clsx(className))}>
   <div class={imageArea()}>
     <svg width="48" height="48" class={imageIcon()} xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" viewBox="0 0 640 512">
       <path d="M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z"></path>
@@ -32,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CardPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1410)
+[CardPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1384)
 ## Props
 @prop size = "sm"
 @prop class: className

package/dist/skeleton/CardPlaceholder.svelte.d.ts

@@ -2,7 +2,7 @@ import type { CardPlaceholderProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [CardPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1410)
+ * [CardPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1384)
  * ## Props
  * @prop size = "sm"
  * @prop class: className

package/dist/skeleton/ImagePlaceholder.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
   import { imagePlaceholder } from ".";
   import type { ImagePlaceholderProps } from "../types";
@@ -13,7 +14,7 @@
   );
 </script>
 
-<div role="status" {...restProps} class={base({ class: clsx(className) })}>
+<div role="status" {...restProps} class={twMerge(base(), clsx(className))}>
   <div class={image()}>
     <svg width="48" height="48" class={svg()} xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" viewBox="0 0 640 512">
       <path d="M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z"></path>
@@ -37,7 +38,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ImagePlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1414)
+[ImagePlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1388)
 ## Props
 @prop size = "md"
 @prop rounded

package/dist/skeleton/ImagePlaceholder.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ImagePlaceholderProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ImagePlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1414)
+ * [ImagePlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1388)
  * ## Props
  * @prop size = "md"
  * @prop rounded

package/dist/skeleton/ListPlaceholder.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
   import { listPlaceholder } from ".";
   import type { ListPlaceholderProps } from "../types";
@@ -10,7 +11,7 @@
   let items = $derived([...Array(itemNumber).keys()]);
 </script>
 
-<div role="status" {...restProps} class={base({ class: clsx(className) })}>
+<div role="status" {...restProps} class={twMerge(base(), clsx(className))}>
   <!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
   {#each items as _, i}
     <div class={item({ class: i > 0 ? "pt-4" : "" })}>
@@ -28,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1420)
+[ListPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1394)
 ## Props
 @prop itemNumber = 5
 @prop size = "md"

package/dist/skeleton/ListPlaceholder.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ListPlaceholderProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ListPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1420)
+ * [ListPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1394)
  * ## Props
  * @prop itemNumber = 5
  * @prop size = "md"

package/dist/skeleton/Skeleton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
   import { skeleton } from ".";
   import type { SkeletonProps } from "../types";
@@ -7,7 +8,7 @@
   const { wrapper, line } = $derived(skeleton({ size }));
 </script>
 
-<div role="status" {...restProps} class={wrapper({ class: clsx(className) })}>
+<div role="status" {...restProps} class={twMerge(wrapper(), clsx(className))}>
   <div class={line({ class: "mb-4 h-2.5 w-1/2" })}></div>
   <div class={line({ class: "mb-2.5 h-2 w-9/12" })}></div>
   <div class={line({ class: "mb-2.5 h-2" })}></div>
@@ -22,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SkeletonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1426)
+[SkeletonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1400)
 ## Props
 @prop size = "sm"
 @prop class: className

package/dist/skeleton/Skeleton.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SkeletonProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SkeletonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1426)
+ * [SkeletonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1400)
  * ## Props
  * @prop size = "sm"
  * @prop class: className

package/dist/skeleton/TestimonialPlaceholder.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
-  import type { HTMLAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
   import { testimonialPlaceholder } from ".";
   import clsx from "clsx";
+  import { type TestimonialPlaceholderProps } from "..";
 
-  let { class: className, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+  let { class: className, ...restProps }: TestimonialPlaceholderProps = $props();
   const { wrapper, line1, line2, svg, subContent } = testimonialPlaceholder();
 </script>
 
-<div role="status" {...restProps} class={wrapper({ class: clsx(className) })}>
+<div role="status" {...restProps} class={twMerge(wrapper(), clsx(className))}>
   <div class={line2({ class: "mx-auto mb-2.5 h-2.5 max-w-[640px]" })}></div>
   <div class={line2({ class: "mx-auto h-2.5 max-w-[540px]" })}></div>
   <div class={subContent()}>
@@ -23,6 +24,9 @@
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
+## Type
+[TestimonialPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1405)
 ## Props
-@props: 
+@prop class: className
+@prop ...restProps
 -->

package/dist/skeleton/TestimonialPlaceholder.svelte.d.ts

@@ -1,9 +1,12 @@
-import type { HTMLAttributes } from "svelte/elements";
+import { type TestimonialPlaceholderProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [TestimonialPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1405)
  * ## Props
- * @props:
+ * @prop class: className
+ * @prop ...restProps
  */
-declare const TestimonialPlaceholder: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+declare const TestimonialPlaceholder: import("svelte").Component<TestimonialPlaceholderProps, {}, "">;
 type TestimonialPlaceholder = ReturnType<typeof TestimonialPlaceholder>;
 export default TestimonialPlaceholder;

package/dist/skeleton/TextPlaceholder.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
   import { textPlaceholder } from ".";
   import type { TextPlaceholderProps } from "../types";
@@ -11,7 +12,7 @@
   );
 </script>
 
-<div role="status" {...restProps} class={baseWrapper({ class: clsx(className) })}>
+<div role="status" {...restProps} class={twMerge(baseWrapper(), clsx(className))}>
   <div class={divWrapper({ class: "w-full" })}>
     <div class={lineA({ class: "h-2.5 w-32" })}></div>
     <div class={lineB({ class: "h-2.5 w-24" })}></div>
@@ -49,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TextPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1430)
+[TextPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1408)
 ## Props
 @prop size = "sm"
 @prop class: className

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

@@ -2,7 +2,7 @@ import type { TextPlaceholderProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TextPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1430)
+ * [TextPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1408)
  * ## Props
  * @prop size = "sm"
  * @prop class: className

package/dist/skeleton/VideoPlaceholder.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
+  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
   import { videoPlaceholder } from ".";
   import type { VideoPlaceholderProps } from "../types";
 
   let { size = "sm", class: className }: VideoPlaceholderProps = $props();
-  const base = $derived(videoPlaceholder({ size, class: clsx(className) }));
+  const base = $derived(videoPlaceholder({ size }));
 </script>
 
-<div role="status" class={base}>
+<div role="status" class={twMerge(base, clsx(className))}>
   <svg width="48" height="48" class="text-gray-200 dark:text-gray-600" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" viewBox="0 0 384 512">
     <path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z"></path>
   </svg>
@@ -18,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[VideoPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1434)
+[VideoPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1412)
 ## Props
 @prop size = "sm"
 @prop class: className

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

@@ -2,7 +2,7 @@ import type { VideoPlaceholderProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [VideoPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1434)
+ * [VideoPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1412)
  * ## Props
  * @prop size = "sm"
  * @prop class: className

package/dist/skeleton/WidgetPlaceholder.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
-  import type { HTMLAttributes } from "svelte/elements";
   import { widgetPlaceholder } from "./index";
+  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
+  import { type WidgetPlaceholderProps } from "..";
 
-  let { class: className }: HTMLAttributes<HTMLDivElement> = $props();
+  let { class: className }: WidgetPlaceholderProps = $props();
   const { base, wrapper, vLine, hLine } = widgetPlaceholder({});
 </script>
 
-<div role="status" class={base({ class: clsx(className) })}>
+<div role="status" class={twMerge(base(), clsx(className))}>
   <div class={hLine({ class: "mb-2.5 h-2.5 w-32" })}></div>
   <div class={hLine({ class: "mb-10 h-2 w-48" })}></div>
   <div class={wrapper()}>
@@ -25,6 +26,8 @@
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
+## Type
+[WidgetPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1416)
 ## Props
-@props: 
+@prop class: className
 -->

package/dist/skeleton/WidgetPlaceholder.svelte.d.ts

@@ -1,9 +1,11 @@
-import type { HTMLAttributes } from "svelte/elements";
+import { type WidgetPlaceholderProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [WidgetPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1416)
  * ## Props
- * @props:
+ * @prop class: className
  */
-declare const WidgetPlaceholder: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+declare const WidgetPlaceholder: import("svelte").Component<WidgetPlaceholderProps, {}, "">;
 type WidgetPlaceholder = ReturnType<typeof WidgetPlaceholder>;
 export default WidgetPlaceholder;

package/dist/speed-dial/SpeedDial.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+  import { twMerge } from "tailwind-merge";
+  import clsx from "clsx";
   import Popper from "../utils/Popper.svelte";
   import { getSideAxis } from "@floating-ui/utils";
-  import clsx from "clsx";
   import { setContext } from "svelte";
   import { speed_dial } from "./theme";
   import type { SpeedDialProps, SpeedCtxType } from "../types";
@@ -17,8 +18,8 @@
 
 <!-- class="bg-transparent" -->
 
-<Popper {...restProps} bind:isOpen {trigger} arrow={false} {placement} class={base({ class: clsx(className) })}>
-  <div class={popper({ class: popperClass })}>
+<Popper {...restProps} bind:isOpen {trigger} arrow={false} {placement} class={twMerge(base(), clsx(className))}>
+  <div class={twMerge(popper(), clsx(popperClass))}>
     {@render children()}
   </div>
 </Popper>
@@ -27,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SpeedDialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1468)
+[SpeedDialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1449)
 ## Props
 @prop children
 @prop popperClass

package/dist/speed-dial/SpeedDial.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SpeedDialProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SpeedDialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1468)
+ * [SpeedDialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1449)
  * ## Props
  * @prop children
  * @prop popperClass