flowbite-svelte 1.10.5 → 1.10.7

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

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

package/dist/speed-dial/SpeedDialTrigger.svelte

@@ -44,7 +44,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SpeedDialTriggerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1485)
+[SpeedDialTriggerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1471)
 ## Props
 @prop children
 @prop name = "Open actions menu"

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

@@ -2,7 +2,7 @@ import type { SpeedDialTriggerProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SpeedDialTriggerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1485)
+ * [SpeedDialTriggerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1471)
  * ## Props
  * @prop children
  * @prop name = "Open actions menu"

package/dist/speed-dial/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type SpeedDialVariants = VariantProps<typeof speedDial>;
 export declare const speedDial: import("tailwind-variants").TVReturnType<{
     vertical: {
@@ -29,7 +30,7 @@ export declare const speedDial: import("tailwind-variants").TVReturnType<{
     popper: string;
 }, undefined, unknown, unknown, undefined>>;
 export type SpeedDialSlots = keyof typeof speedDial.slots;
-export type SpeedDialTheme = Partial<Record<SpeedDialSlots, string>>;
+export type SpeedDialTheme = Partial<Record<SpeedDialSlots, ClassValue>>;
 export type SpeedDialButtonVariants = VariantProps<typeof speedDialButton>;
 export declare const speedDialButton: import("tailwind-variants").TVReturnType<{
     textOutside: {
@@ -78,4 +79,4 @@ export declare const speedDialButton: import("tailwind-variants").TVReturnType<{
     span: string;
 }, undefined, unknown, unknown, undefined>>;
 export type SpeedDialButtonSlots = keyof typeof speedDialButton.slots;
-export type SpeedDialButtonTheme = Partial<Record<SpeedDialButtonSlots, string>>;
+export type SpeedDialButtonTheme = Partial<Record<SpeedDialButtonSlots, ClassValue>>;

package/dist/spinner/Spinner.svelte

@@ -2,17 +2,16 @@
   import clsx from "clsx";
   import { spinner } from ".";
   import type { SpinnerProps } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { color = "primary", size = "8", class: className, currentFill = "currentFill", currentColor = "currentColor", ...restProps }: SpinnerProps = $props();
 
   const theme = getTheme("spinner");
 
-  let spinnerClass = $derived(spinner({ color, size }));
+  let spinnerClass = $derived(spinner({ color, size, class: clsx(theme, className) }));
 </script>
 
-<svg {...restProps} role="status" class={cn(spinnerClass, clsx(className), theme)} viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg {...restProps} role="status" class={spinnerClass} viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill={currentColor} />
   <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill={currentFill} />
 </svg>
@@ -21,7 +20,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SpinnerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1510)
+[SpinnerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1496)
 ## Props
 @prop color = "primary"
 @prop size = "8"

package/dist/spinner/Spinner.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SpinnerProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SpinnerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1510)
+ * [SpinnerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1496)
  * ## Props
  * @prop color = "primary"
  * @prop size = "8"

package/dist/spinner/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type SpinnerVaraiants = VariantProps<typeof spinner>;
 export declare const spinner: import("tailwind-variants").TVReturnType<{
     color: {
@@ -97,4 +98,4 @@ export declare const spinner: import("tailwind-variants").TVReturnType<{
         "16": string;
     };
 }, undefined, "inline-block animate-spin text-gray-300", unknown, unknown, undefined>>;
-export type SpinnerTheme = string;
+export type SpinnerTheme = ClassValue;

package/dist/stepindicator/StepIndicator.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { type StepIndicatorProps, cn } from "..";
+  import clsx from "clsx";
+  import { type StepIndicatorProps } from "..";
   import { stepIndicator, getStepStateClasses, type StepIndicatorTheme } from ".";
   import { getTheme } from "../theme/themeUtils";
 
@@ -26,24 +27,24 @@
   };
 </script>
 
-<div {...restProps} class={cn(style.base(), className, (theme as StepIndicatorTheme)?.base)}>
+<div {...restProps} class={style.base({ class: clsx((theme as StepIndicatorTheme)?.base, className) })}>
   {#if !hideLabel}
-    <h3 class={cn(style.label(), (theme as StepIndicatorTheme)?.label)}>{currentStepLabel}</h3>
+    <h3 class={style.label({ class: clsx((theme as StepIndicatorTheme)?.label) })}>{currentStepLabel}</h3>
   {/if}
 
-  <div class={cn(style.container(), (theme as StepIndicatorTheme)?.container)}>
+  <div class={style.container({ class: clsx((theme as StepIndicatorTheme)?.container) })}>
     {#each steps as step, i}
       {#if i === currentStep - 1}
-        <div class={cn(style.stepWrapper(), (theme as StepIndicatorTheme)?.stepWrapper)}>
-          <div class={cn(style.step(), getStepStateClasses(i, currentStep), getCustomStepClass(i), (theme as StepIndicatorTheme)?.step)} data-state="current"></div>
+        <div class={style.stepWrapper({ class: clsx((theme as StepIndicatorTheme)?.stepWrapper) })}>
+          <div class={style.step({ class: clsx(getStepStateClasses(i, currentStep), getCustomStepClass(i), (theme as StepIndicatorTheme)?.step) })} data-state="current"></div>
           {#if glow}
-            <div class={cn(style.stepGlow(), getCustomStepClass(i), (theme as StepIndicatorTheme)?.stepGlow)}></div>
+            <div class={style.stepGlow({ class: clsx(getCustomStepClass(i), (theme as StepIndicatorTheme)?.stepGlow) })}></div>
           {/if}
         </div>
       {:else if i < currentStep - 1}
-        <div class={cn(style.step(), getStepStateClasses(i, currentStep), getCustomStepClass(i), (theme as StepIndicatorTheme)?.step)} data-state="completed"></div>
+        <div class={style.step({ class: clsx(getStepStateClasses(i, currentStep), getCustomStepClass(i), (theme as StepIndicatorTheme)?.step) })} data-state="completed"></div>
       {:else}
-        <div class={cn(style.incompleteStep(), (theme as StepIndicatorTheme)?.incompleteStep)} data-state="incomplete"></div>
+        <div class={style.incompleteStep({ class: clsx((theme as StepIndicatorTheme)?.incompleteStep) })} data-state="incomplete"></div>
       {/if}
     {/each}
   </div>
@@ -53,7 +54,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[StepIndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1518)
+[StepIndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1504)
 ## Props
 @prop steps = ["Step 1", "Step 2", "Step 3", "Step 4", "Step 5"]
 @prop currentStep = 1

package/dist/stepindicator/StepIndicator.svelte.d.ts

@@ -2,7 +2,7 @@ import { type StepIndicatorProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [StepIndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1518)
+ * [StepIndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1504)
  * ## Props
  * @prop steps = ["Step 1", "Step 2", "Step 3", "Step 4", "Step 5"]
  * @prop currentStep = 1

package/dist/stepindicator/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type StepIndicatorVariants = VariantProps<typeof stepIndicator>;
 export declare const stepIndicator: import("tailwind-variants").TVReturnType<{
     size: {
@@ -242,5 +243,5 @@ export declare const stepIndicator: import("tailwind-variants").TVReturnType<{
     incompleteStep: string;
 }, undefined, unknown, unknown, undefined>>;
 export type StepIndicatorSlots = keyof typeof stepIndicator.slots;
-export type StepIndicatorTheme = Partial<Record<StepIndicatorSlots, string>>;
+export type StepIndicatorTheme = Partial<Record<StepIndicatorSlots, ClassValue>>;
 export declare const getStepStateClasses: (stepIndex: number, currentStep: number) => "data-[state=current]" | "data-[state=completed]" | "data-[state=incomplete]";

package/dist/stepper/BreadcrumbStepper.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import { breadcrumbStepper, type BreadcrumbStepperTheme } from ".";
-  import { type BreadcrumbStepperProps, cn } from "..";
+  import clsx from "clsx";
+  import { type BreadcrumbStepperProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, steps = [], classes, ...restProps }: BreadcrumbStepperProps = $props();
@@ -10,7 +11,7 @@
 
   setContext("stepperType", "breadcrumb");
 
-  const base = cn(breadcrumbStepper.stepper(), (theme as BreadcrumbStepperTheme)?.stepper);
+  const base = breadcrumbStepper.stepper({ class: clsx((theme as BreadcrumbStepperTheme)?.stepper) });
 </script>
 
 <ol class={base} {...restProps}>
@@ -19,15 +20,13 @@
   {:else if steps}
     {#each steps as step, index}
       <li
-        class={cn(
-          breadcrumbStepper.item({
-            status: step.status,
-            hasChevron: index < steps.length - 1
-          }),
-          (theme as BreadcrumbStepperTheme)?.item
-        )}
+        class={breadcrumbStepper.item({
+          status: step.status,
+          hasChevron: index < steps.length - 1,
+          class: clsx((theme as BreadcrumbStepperTheme)?.item)
+        })}
       >
-        <span class={cn(breadcrumbStepper.indicator({ status: step.status }), (theme as BreadcrumbStepperTheme)?.indicator)}>
+        <span class={breadcrumbStepper.indicator({ status: step.status, class: clsx((theme as BreadcrumbStepperTheme)?.indicator) })}>
           {#if step.status === "completed" && step.icon}
             <step.icon class={step.iconClass || "h-3 w-3"} />
           {:else}
@@ -55,7 +54,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BreadcrumbStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1598)
+[BreadcrumbStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1584)
 ## Props
 @prop children
 @prop steps = []

package/dist/stepper/BreadcrumbStepper.svelte.d.ts

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

package/dist/stepper/DetailedStepper.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import { detailedStepper, type DetailedStepperTheme } from ".";
-  import { type DetailedStepperProps, cn } from "..";
+  import { type DetailedStepperProps } from "..";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
@@ -12,13 +12,13 @@
   setContext("stepperType", "detailed");
 </script>
 
-<ol class={cn(detailedStepper.stepper(), clsx(classes?.detailedstepper), (theme as DetailedStepperTheme)?.stepper)} {...restrorps}>
+<ol class={detailedStepper.stepper({ class: clsx((theme as DetailedStepperTheme)?.stepper, classes?.detailedstepper) })} {...restrorps}>
   {#if children}
     {@render children()}
   {:else if steps}
     {#each steps as step, index}
-      <li class={cn(detailedStepper.item({ status: step.status }), clsx(classes?.detailedstepperitem), (theme as DetailedStepperTheme)?.item)}>
-        <span class={cn(detailedStepper.indicator({ status: step.status }), clsx(classes?.detailedstepperindicator), (theme as DetailedStepperTheme)?.indicator)}>
+      <li class={detailedStepper.item({ status: step.status, class: clsx((theme as DetailedStepperTheme)?.item, classes?.detailedstepperitem) })}>
+        <span class={detailedStepper.indicator({ status: step.status, class: clsx((theme as DetailedStepperTheme)?.indicator, classes?.detailedstepperindicator) })}>
           {#if step.status === "completed" && step.icon}
             <step.icon class={clsx(step.iconClass)} />
           {:else}
@@ -40,7 +40,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DetailedStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1567)
+[DetailedStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1553)
 ## Props
 @prop children
 @prop steps = []

package/dist/stepper/DetailedStepper.svelte.d.ts

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

package/dist/stepper/ProgressStepper.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import { progressStepper } from ".";
-  import { type ProgressStepperProps, cn } from "..";
+  import { type ProgressStepperProps } from "..";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
   import type { ProgressStepperTheme } from ".";
@@ -13,22 +13,19 @@
   setContext("stepperType", "progress");
 </script>
 
-<ol class={cn(progressStepper.stepper(), clsx(classes?.progressstepper), (theme as ProgressStepperTheme)?.stepper)} {...restrorps}>
+<ol class={progressStepper.stepper({ class: clsx((theme as ProgressStepperTheme)?.stepper, classes?.progressstepper) })} {...restrorps}>
   {#if children}
     {@render children()}
   {:else if steps}
     {#each steps as step, index}
       <li
-        class={cn(
-          progressStepper.item({
-            status: step.status,
-            isLast: index === steps.length - 1
-          }),
-          clsx(classes?.progressstepperitem),
-          (theme as ProgressStepperTheme)?.item
-        )}
+        class={progressStepper.item({
+          status: step.status,
+          isLast: index === steps.length - 1,
+          class: clsx((theme as ProgressStepperTheme)?.item, classes?.progressstepperitem)
+        })}
       >
-        <span class={cn(progressStepper.circle({ status: step.status }), clsx(classes?.progresssteppercircle), (theme as ProgressStepperTheme)?.circle)}>
+        <span class={progressStepper.circle({ status: step.status, class: clsx((theme as ProgressStepperTheme)?.circle, classes?.progresssteppercircle) })}>
           {#if step.status === "completed"}
             {#if step.icon}
               <step.icon class={clsx(step.iconClass) || "h-5 w-5 lg:h-6 lg:w-6"} />
@@ -54,7 +51,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ProgressStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1552)
+[ProgressStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1538)
 ## Props
 @prop children
 @prop steps = []

package/dist/stepper/ProgressStepper.svelte.d.ts

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

package/dist/stepper/Stepper.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import { stepper, type StepperTheme } from ".";
-  import { type StepperProps, cn } from "..";
+  import { type StepperProps } from "..";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
@@ -12,30 +12,24 @@
   setContext("stepperType", "stepper");
 </script>
 
-<ol {...restProps} class={cn(stepper.base(), clsx(classes?.stepper), (theme as StepperTheme)?.base)}>
+<ol {...restProps} class={stepper.base({ class: clsx((theme as StepperTheme)?.base, classes?.stepper) })}>
   {#if children}
     {@render children()}
   {:else if steps}
     {#each steps as step, index}
       <li
-        class={cn(
-          stepper.item({
-            status: step.status,
-            isLast: index === steps.length - 1
-          }),
-          clsx(classes?.stepperitem),
-          (theme as StepperTheme)?.item
-        )}
+        class={stepper.item({
+          status: step.status,
+          isLast: index === steps.length - 1,
+          class: clsx((theme as StepperTheme)?.item, classes?.stepperitem)
+        })}
       >
         <span
-          class={cn(
-            stepper.content({
-              status: step.status,
-              isLast: index === steps.length - 1
-            }),
-            clsx(classes?.steppercontent),
-            (theme as StepperTheme)?.content
-          )}
+          class={stepper.content({
+            status: step.status,
+            isLast: index === steps.length - 1,
+            class: clsx((theme as StepperTheme)?.content, classes?.steppercontent)
+          })}
         >
           {#if step.status === "completed"}
             {#if step.icon}
@@ -62,7 +56,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[StepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1540)
+[StepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1526)
 ## Props
 @prop children
 @prop steps = []

package/dist/stepper/Stepper.svelte.d.ts

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

package/dist/stepper/TimelineStepper.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import { timelineStepper, type TimelineStepperTheme } from ".";
-  import { type TimelineStepperProps, cn } from "..";
+  import { type TimelineStepperProps } from "..";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
@@ -12,13 +12,13 @@
   setContext("stepperType", "timeline");
 </script>
 
-<ol class={cn(timelineStepper.base(), clsx(classes?.timelinestepper), (theme as TimelineStepperTheme)?.base)} {...restProps}>
+<ol class={timelineStepper.base({ class: clsx((theme as TimelineStepperTheme)?.base, classes?.timelinestepper) })} {...restProps}>
   {#if children}
     {@render children()}
   {:else if steps}
     {#each steps as step, index}
-      <li class={cn(timelineStepper.item({ isLast: index === steps.length - 1 }), clsx(classes?.timelinestepperitem), (theme as TimelineStepperTheme)?.item)}>
-        <span class={cn(timelineStepper.circle({ status: step.status }), clsx(classes?.timelinesteppercircle), (theme as TimelineStepperTheme)?.circle)}>
+      <li class={timelineStepper.item({ isLast: index === steps.length - 1, class: clsx((theme as TimelineStepperTheme)?.item, classes?.timelinestepperitem) })}>
+        <span class={timelineStepper.circle({ status: step.status, class: clsx((theme as TimelineStepperTheme)?.circle, classes?.timelinesteppercircle) })}>
           {#if step.status === "completed"}
             {#if step.icon}
               <step.icon class={clsx(step.iconClass) || "h-3.5 w-3.5"} />
@@ -50,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimelineStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1612)
+[TimelineStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1598)
 ## Props
 @prop children
 @prop steps = []

package/dist/stepper/TimelineStepper.svelte.d.ts

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

package/dist/stepper/VerticalStepper.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import { verticalStepper, type VerticalStepperTheme } from ".";
-  import { type VerticalStepperProps, cn } from "..";
+  import { type VerticalStepperProps } from "..";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
@@ -12,14 +12,14 @@
   setContext("stepperType", "vertical");
 </script>
 
-<ol class={cn(verticalStepper.stepper(), (theme as VerticalStepperTheme)?.stepper)} {...restProps}>
+<ol class={verticalStepper.stepper({ class: (theme as VerticalStepperTheme)?.stepper })} {...restProps}>
   {#if children}
     {@render children()}
   {:else if steps}
     {#each steps as step, index}
       <li class={clsx(liClass)}>
-        <div class={cn(verticalStepper.card({ status: step.status }), clsx(classes?.verticalsteppercard), (theme as VerticalStepperTheme)?.card)} role="alert">
-          <div class={cn(verticalStepper.content(), clsx(classes?.verticalsteppercontent), (theme as VerticalStepperTheme)?.content)}>
+        <div class={verticalStepper.card({ status: step.status, class: clsx((theme as VerticalStepperTheme)?.card, classes?.verticalsteppercard) })} role="alert">
+          <div class={verticalStepper.content({ class: clsx((theme as VerticalStepperTheme)?.content, classes?.verticalsteppercontent) })}>
             <span class="sr-only">{step.label}</span>
             <h3 class="font-medium">{step.id}. {step.label}</h3>
             {#if step.status === "completed"}
@@ -50,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[VerticalStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1582)
+[VerticalStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1568)
 ## Props
 @prop children
 @prop steps = []

package/dist/stepper/VerticalStepper.svelte.d.ts

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

package/dist/table/Table.svelte

@@ -2,7 +2,7 @@
   import { setContext } from "svelte";
   import { table as tableCls, TableHead, TableBody, type TableTheme } from ".";
   import clsx from "clsx";
-  import { type TableProps, type TableCtxType, cn } from "..";
+  import { type TableProps, type TableCtxType } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, footerSlot, captionSlot, items, divClass = "relative overflow-x-auto", striped, hoverable, border = true, shadow, color = "default", class: className, ...restProps }: TableProps = $props();
@@ -32,8 +32,8 @@
   let bodyItems = $derived(items && items.length > 0 ? items.map((item) => Object.values(item)) : []);
 </script>
 
-<div class={cn(base(), clsx(divClass), (theme as TableTheme)?.base)}>
-  <table {...restProps} class={cn(table(), clsx(className), (theme as TableTheme)?.table)}>
+<div class={base({ class: clsx((theme as TableTheme)?.base, divClass) })}>
+  <table {...restProps} class={table({ class: clsx((theme as TableTheme)?.table, className) })}>
     {#if captionSlot}
       {@render captionSlot()}
     {/if}
@@ -53,7 +53,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1644)
+[TableProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1630)
 ## Props
 @prop children
 @prop footerSlot

package/dist/table/Table.svelte.d.ts

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

package/dist/table/TableBody.svelte

@@ -2,7 +2,6 @@
   import clsx from "clsx";
   import { TableBodyRow, TableBodyCell } from ".";
   import type { TableBodyProps, CellValue, BodyRow } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, bodyItems, class: className, ...restProps }: TableBodyProps = $props();
@@ -18,7 +17,7 @@
   }
 </script>
 
-<tbody {...restProps} class={cn(clsx(className), theme)}>
+<tbody {...restProps} class={clsx(theme, className)}>
   {#if bodyItems}
     {#each bodyItems as row}
       <TableBodyRow>
@@ -36,7 +35,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableBodyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1676)
+[TableBodyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1662)
 ## Props
 @prop children
 @prop bodyItems

package/dist/table/TableBody.svelte.d.ts

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

package/dist/table/TableBodyCell.svelte

@@ -2,7 +2,6 @@
   import clsx from "clsx";
   import { tableBodyCell } from ".";
   import type { TableBodyCellProps } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, class: className, colspan, onclick, ...restProps }: TableBodyCellProps = $props();
@@ -10,7 +9,7 @@
   const theme = getTheme("tableBodyCell");
 </script>
 
-<td {...restProps} class={cn(tableBodyCell(), clsx(className), theme)} colspan={colspan ?? 1}>
+<td {...restProps} class={tableBodyCell({ class: clsx(theme, className) })} colspan={colspan ?? 1}>
   {#if onclick}
     <button {onclick}>
       {#if children}
@@ -26,7 +25,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableBodyCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1665)
+[TableBodyCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1651)
 ## Props
 @prop children
 @prop class: className

package/dist/table/TableBodyCell.svelte.d.ts

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