flowbite-svelte 1.10.5 → 1.10.7

package/dist/pagination/Pagination.svelte

@@ -3,7 +3,7 @@
   import { pagination, PaginationItem } from ".";
   import type { PaginationProps } from "../types";
   import { getTheme } from "../theme/themeUtils";
-  import { cn } from "..";
+  import clsx from "clsx";
 
   let { pages = [], previous, next, prevContent, nextContent, table, size, ariaLabel, ...restProps }: PaginationProps = $props();
 
@@ -13,7 +13,7 @@
   setContext("table", table);
   setContext("size", size);
 
-  const paginationCls = $derived(cn(pagination({ table, size }), theme));
+  const paginationCls = $derived(pagination({ table, size, class: clsx(theme) }));
 </script>
 
 <nav aria-label={ariaLabel}>
@@ -54,7 +54,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1191)
+[PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1177)
 ## Props
 @prop pages = []
 @prop previous

package/dist/pagination/Pagination.svelte.d.ts

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

package/dist/pagination/PaginationButton.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { cn } from "..";
   import clsx from "clsx";
   import { paginationButton } from ".";
   import type { PaginationButtonProps } from "../types";
@@ -14,16 +13,14 @@
   const table = getContext<boolean>("table");
 
   const paginationCls = $derived(
-    cn(
-      paginationButton({
-        size: getContext("size") ?? size,
-        active,
-        group,
-        table,
-        disabled
-      }),
-      theme
-    )
+    paginationButton({
+      size: getContext("size") ?? size,
+      active,
+      group,
+      table,
+      disabled,
+      class: clsx(theme, className)
+    })
   );
 
   function handleClick(e: MouseEvent) {
@@ -36,13 +33,13 @@
 </script>
 
 {#if href}
-  <a {href} {...restProps} class={cn(paginationCls, clsx(className), theme)} onclick={handleClick}>
+  <a {href} {...restProps} class={paginationCls} onclick={handleClick}>
     {#if children}
       {@render children()}
     {/if}
   </a>
 {:else}
-  <button {...restProps} {disabled} class={cn(paginationCls, clsx(className), theme)} onclick={handleClick}>
+  <button {...restProps} {disabled} class={paginationCls} onclick={handleClick}>
     {#if children}
       {@render children()}
     {/if}
@@ -53,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1162)
+[PaginationButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1148)
 ## Props
 @prop children
 @prop size

package/dist/pagination/PaginationButton.svelte.d.ts

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

package/dist/pagination/PaginationItem.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { cn } from "..";
   import clsx from "clsx";
   import { paginationItem, type PaginationItemTheme } from ".";
   import type { PaginationItemProps } from "../types";
@@ -12,7 +11,7 @@
 
   const group = getContext<boolean>("group");
   const table = getContext<boolean>("table");
-  const paginationCls = $derived(cn(paginationItem({ size: getContext("size") ?? size, active, group, table }), clsx(className), theme));
+  const paginationCls = $derived(paginationItem({ size: getContext("size") ?? size, active, group, table, class: clsx(theme, className) }));
 </script>
 
 {#if href}
@@ -33,7 +32,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1187)
+[PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1173)
 ## Props
 @prop children
 @prop size

package/dist/pagination/PaginationItem.svelte.d.ts

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

package/dist/pagination/PaginationNav.svelte

@@ -2,7 +2,7 @@
   import clsx from "clsx";
   import { setContext } from "svelte";
   import { paginationNav, type PaginationNavTheme } from "./theme";
-  import { type PaginationNavProps, PaginationButton, cn } from "..";
+  import { type PaginationNavProps, PaginationButton } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   function paginationRange(start: number, end: number): number[] {
@@ -58,17 +58,17 @@
 
 <nav aria-label={ariaLabel} {...restProps}>
   {#if layout === "table"}
-    <div class={cn(tableDiv(), clsx(tableDivClass), (theme as PaginationNavTheme)?.tableDiv)}>
-      Showing <span class={cn(tableSpan(), clsx(spanClass), (theme as PaginationNavTheme)?.tableSpan)}>{currentPage}</span>
+    <div class={tableDiv({ class: clsx((theme as PaginationNavTheme)?.tableDiv, tableDivClass) })}>
+      Showing <span class={tableSpan({ class: clsx((theme as PaginationNavTheme)?.tableSpan, spanClass) })}>{currentPage}</span>
       of
-      <span class={cn(tableSpan(), clsx(spanClass), (theme as PaginationNavTheme)?.tableSpan)}>{totalPages}</span>
+      <span class={tableSpan({ class: clsx((theme as PaginationNavTheme)?.tableSpan, spanClass) })}>{totalPages}</span>
       Entries
     </div>
   {/if}
 
-  <ul class={cn(base(), clsx(className), (theme as PaginationNavTheme)?.base)}>
+  <ul class={base({ class: clsx((theme as PaginationNavTheme)?.base, className) })}>
     <li {...restProps}>
-      <PaginationButton onclick={goToPreviousPage} disabled={currentPage === 1} class={cn(prevItem(), clsx(prevClass), (theme as PaginationNavTheme)?.prevItem)}>
+      <PaginationButton onclick={goToPreviousPage} disabled={currentPage === 1} class={prevItem({ class: clsx((theme as PaginationNavTheme)?.prevItem, prevClass) })}>
         {#if prevContent}
           {@render prevContent()}
         {:else}
@@ -86,7 +86,7 @@
       {/each}
     {/if}
     <li {...restProps}>
-      <PaginationButton onclick={goToNextPage} disabled={currentPage === totalPages} class={cn(nextItem(), clsx(nextClass), (theme as PaginationNavTheme)?.nextItem)}>
+      <PaginationButton onclick={goToNextPage} disabled={currentPage === totalPages} class={nextItem({ class: clsx((theme as PaginationNavTheme)?.nextItem, nextClass) })}>
         {#if nextContent}
           {@render nextContent()}
         {:else}
@@ -101,7 +101,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1168)
+[PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1154)
 ## Props
 @prop currentPage = 1
 @prop totalPages = 1

package/dist/pagination/PaginationNav.svelte.d.ts

@@ -2,7 +2,7 @@ import { type PaginationNavProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1168)
+ * [PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1154)
  * ## Props
  * @prop currentPage = 1
  * @prop totalPages = 1

package/dist/pagination/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type PaginationVariants = VariantProps<typeof pagination>;
 export declare const paginationNav: import("tailwind-variants").TVReturnType<{
     size: {
@@ -77,7 +78,7 @@ export declare const paginationNav: import("tailwind-variants").TVReturnType<{
     nextItem: string;
 }, undefined, unknown, unknown, undefined>>;
 export type PaginationNavSlots = keyof typeof paginationNav.slots;
-export type PaginationNavTheme = Partial<Record<PaginationNavSlots, string>>;
+export type PaginationNavTheme = Partial<Record<PaginationNavSlots, ClassValue>>;
 export type PaginationItemVariants = VariantProps<typeof paginationItem>;
 export declare const paginationButton: import("tailwind-variants").TVReturnType<{
     size: {
@@ -143,7 +144,7 @@ export declare const paginationButton: import("tailwind-variants").TVReturnType<
         false: string;
     };
 }, undefined, "flex items-center font-medium", unknown, unknown, undefined>>;
-export type PaginationButtonTheme = string;
+export type PaginationButtonTheme = ClassValue;
 export declare const paginationItem: import("tailwind-variants").TVReturnType<{
     size: {
         default: string;
@@ -196,7 +197,7 @@ export declare const paginationItem: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "flex items-center font-medium", unknown, unknown, undefined>>;
-export type PaginationItemTheme = string;
+export type PaginationItemTheme = ClassValue;
 export declare const pagination: import("tailwind-variants").TVReturnType<{
     table: {
         true: string;
@@ -225,4 +226,4 @@ export declare const pagination: import("tailwind-variants").TVReturnType<{
         large: string;
     };
 }, undefined, "inline-flex -space-x-px rtl:space-x-reverse items-center", unknown, unknown, undefined>>;
-export type PaginationTheme = string;
+export type PaginationTheme = ClassValue;

package/dist/popover/Popover.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { cn } from "..";
   import clsx from "clsx";
   import Popper from "../utils/Popper.svelte";
   import { popover, type PopoverTheme } from "./theme";
@@ -13,15 +12,15 @@
   let { base, title, h3, content } = $derived(popover({ color }));
 </script>
 
-<Popper {...restProps} bind:isOpen {placement} {trigger} {arrow} class={cn(base(), clsx(className), (theme as PopoverTheme)?.base)}>
+<Popper {...restProps} bind:isOpen {placement} {trigger} {arrow} class={base({ class: clsx((theme as PopoverTheme)?.base, className) })}>
   {#if typeof titleSlot === "string"}
-    <div class={cn(title(), (theme as PopoverTheme)?.title)}>
-      <h3 class={cn(h3(), (theme as PopoverTheme)?.h3)}>{titleSlot}</h3>
+    <div class={title({ class: clsx((theme as PopoverTheme)?.title) })}>
+      <h3 class={h3({ class: clsx((theme as PopoverTheme)?.h3) })}>{titleSlot}</h3>
     </div>
   {:else if titleSlot}
     {@render titleSlot()}
   {/if}
-  <div class={cn(content(), clsx(defaultClass), (theme as PopoverTheme)?.content)}>
+  <div class={content({ class: clsx((theme as PopoverTheme)?.content, defaultClass) })}>
     {@render children()}
   </div>
 </Popper>
@@ -30,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1201)
+[PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1187)
 ## Props
 @prop title: titleSlot
 @prop color = "default"

package/dist/popover/Popover.svelte.d.ts

@@ -2,7 +2,7 @@ import type { PopoverProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1201)
+ * [PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1187)
  * ## Props
  * @prop title: titleSlot
  * @prop color = "default"

package/dist/popover/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type PopoverVariants = VariantProps<typeof popover>;
 export declare const popover: import("tailwind-variants").TVReturnType<{
     color: {
@@ -278,4 +279,4 @@ export declare const popover: import("tailwind-variants").TVReturnType<{
     h3: string;
 }, undefined, unknown, unknown, undefined>>;
 export type PopoverSlots = keyof typeof popover.slots;
-export type PopoverTheme = Partial<Record<PopoverSlots, string>>;
+export type PopoverTheme = Partial<Record<PopoverSlots, ClassValue>>;

package/dist/progress/Progressbar.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { cn } from "..";
   import type { ProgressbarProps } from "../types";
   import clsx from "clsx";
   import { cubicOut } from "svelte/easing";
@@ -28,18 +27,18 @@
 </script>
 
 {#if labelOutside}
-  <div {...restProps} class={cn(outsideDiv({ class: clsx(classes?.outsideDiv) }), (theme as ProgressbarTheme)?.outsideDiv)}>
-    <span class={cn(oustsideSpan({ class: clsx(classes?.oustsideSpan) }), (theme as ProgressbarTheme)?.oustsideSpan)}>{labelOutside}</span>
-    <span class={cn(outsideProgress({ class: clsx(classes?.outsideProgress) }), (theme as ProgressbarTheme)?.outsideProgress)}>{progress}%</span>
+  <div {...restProps} class={outsideDiv({ class: clsx((theme as ProgressbarTheme)?.outsideDiv, classes?.outsideDiv) })}>
+    <span class={oustsideSpan({ class: clsx((theme as ProgressbarTheme)?.oustsideSpan, classes?.oustsideSpan) })}>{labelOutside}</span>
+    <span class={outsideProgress({ class: clsx((theme as ProgressbarTheme)?.outsideProgress, classes?.outsideProgress) })}>{progress}%</span>
   </div>
 {/if}
-<div {...restProps} class={cn(base({ class: clsx(size, classes?.base, className) }), (theme as ProgressbarTheme)?.base)}>
+<div {...restProps} class={base({ class: clsx(size, classes?.base, (theme as ProgressbarTheme)?.base, className) })}>
   {#if labelInside}
-    <div class={cn(labelInsideDiv({ class: clsx(classes?.labelInsideDiv, size) }), (theme as ProgressbarTheme)?.labelInsideDiv)} style="width: {_progress.current}%">
+    <div class={labelInsideDiv({ class: clsx(size, (theme as ProgressbarTheme)?.labelInsideDiv, classes?.labelInsideDiv) })} style="width: {_progress.current}%">
       {_progress.current.toFixed(precision)}%
     </div>
   {:else}
-    <div class={cn(insideDiv({ class: clsx(classes?.labelInsideDiv, size) }), (theme as ProgressbarTheme)?.insideDiv)} style="width: {_progress.current}%"></div>
+    <div class={insideDiv({ class: clsx(size, (theme as ProgressbarTheme)?.insideDiv, classes?.labelInsideDiv) })} style="width: {_progress.current}%"></div>
   {/if}
 </div>
 
@@ -47,7 +46,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1211)
+[ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1197)
 ## Props
 @prop progress = "45"
 @prop precision = 0

package/dist/progress/Progressbar.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ProgressbarProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1211)
+ * [ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1197)
  * ## Props
  * @prop progress = "45"
  * @prop precision = 0

package/dist/progress/Progressradial.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { cn } from "..";
   import { progressradial, type ProgressradialTheme } from ".";
   import type { ProgressradialProps } from "../types";
   import clsx from "clsx";
@@ -39,23 +38,23 @@
 
 <div class="flex flex-col items-center">
   {#if labelOutside}
-    <div class={cn(outsideDiv({ class: clsx(classes?.outsideDiv) }), (theme as ProgressradialTheme)?.outsideDiv)}>
-      <span class={cn(outsideSpan({ class: clsx(classes?.outsideSpan) }), (theme as ProgressradialTheme)?.outsideSpan)}>{labelOutside}</span>
-      <span class={cn(outsideProgress({ class: clsx(classes?.outsideProgress) }), (theme as ProgressradialTheme)?.outsideProgress)}>{formattedProgress}%</span>
+    <div class={outsideDiv({ class: clsx((theme as ProgressradialTheme)?.outsideDiv, classes?.outsideDiv) })}>
+      <span class={outsideSpan({ class: clsx((theme as ProgressradialTheme)?.outsideSpan, classes?.outsideSpan) })}>{labelOutside}</span>
+      <span class={outsideProgress({ class: clsx((theme as ProgressradialTheme)?.outsideProgress, classes?.outsideProgress) })}>{formattedProgress}%</span>
     </div>
   {/if}
 
-  <div {...restProps} class={cn(base({ class: clsx(size, classes?.base, className) }), (theme as ProgressradialTheme)?.base)}>
+  <div {...restProps} class={base({ class: clsx(size, (theme as ProgressradialTheme)?.base, classes?.base, className) })}>
     <svg viewBox="0 0 100 100" class="h-full w-full" style="transform: rotate({rotationAngle}deg)">
       <!-- Background circle -->
-      <circle cx="50" cy="50" r={radius} class={cn(circleBackground({ class: clsx(classes?.circleBackground) }), (theme as ProgressradialTheme)?.circleBackground)} fill="none" stroke-width={thickness} />
+      <circle cx="50" cy="50" r={radius} class={circleBackground({ class: clsx((theme as ProgressradialTheme)?.circleBackground, classes?.circleBackground) })} fill="none" stroke-width={thickness} />
 
       <!-- Foreground circle (progress indicator) -->
-      <circle cx="50" cy="50" r={radius} class={cn(circleForeground({ class: clsx(classes?.circleForeground) }), (theme as ProgressradialTheme)?.circleForeground)} fill="none" stroke-width={thickness} stroke-dasharray={circumference} stroke-dashoffset={strokeDashoffset} stroke-linecap="round" />
+      <circle cx="50" cy="50" r={radius} class={circleForeground({ class: clsx((theme as ProgressradialTheme)?.circleForeground, classes?.circleForeground) })} fill="none" stroke-width={thickness} stroke-dasharray={circumference} stroke-dashoffset={strokeDashoffset} stroke-linecap="round" />
     </svg>
 
     {#if labelInside}
-      <div class={cn(labelInsideDiv({ class: clsx(classes?.labelInsideDiv) }), (theme as ProgressradialTheme)?.labelInsideDiv)}>
+      <div class={labelInsideDiv({ class: clsx((theme as ProgressradialTheme)?.labelInsideDiv, classes?.labelInsideDiv) })}>
         {formattedProgress}%
       </div>
     {/if}
@@ -66,7 +65,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1222)
+[ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1208)
 ## Props
 @prop progress = 45
 @prop radius = 42

package/dist/progress/Progressradial.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ProgressradialProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1222)
+ * [ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1208)
  * ## Props
  * @prop progress = 45
  * @prop radius = 42

package/dist/progress/theme.d.ts

@@ -290,7 +290,7 @@ export declare const progressbar: import("tailwind-variants").TVReturnType<{
     outsideProgress: string;
 }, undefined, unknown, unknown, undefined>>;
 export type ProgressbarSlots = keyof typeof progressbar.slots;
-export type ProgressbarTheme = Partial<Record<ProgressbarSlots, string>>;
+export type ProgressbarTheme = Partial<Record<ProgressbarSlots, ClassValue>>;
 export type ProgressradialClasses = Partial<{
     [K in keyof (typeof progressradial)["slots"]]: ClassValue;
 }>;
@@ -581,4 +581,4 @@ export declare const progressradial: import("tailwind-variants").TVReturnType<{
     outsideProgress: string;
 }, undefined, unknown, unknown, undefined>>;
 export type ProgressradialSlots = keyof typeof progressradial.slots;
-export type ProgressradialTheme = Partial<Record<ProgressradialSlots, string>>;
+export type ProgressradialTheme = Partial<Record<ProgressradialSlots, ClassValue>>;

package/dist/rating/AdvancedRating.svelte

@@ -2,7 +2,6 @@
   import clsx from "clsx";
   import { advancedRating, type AdvancedRatingTheme } from ".";
   import type { AdvancedRatingProps } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { rating, globalText, ratings, divClass, spanClass, div2Class, div3Class, span2Class, unit }: AdvancedRatingProps = $props();
@@ -19,12 +18,12 @@
   {@render globalText()}
 {/if}
 {#each ratings as { label, rating }}
-  <div class={cn(base(), clsx(divClass), (theme as AdvancedRatingTheme)?.base)}>
-    <span class={cn(span(), clsx(spanClass), (theme as AdvancedRatingTheme)?.span)}>{label}</span>
-    <div class={cn(div2(), clsx(div2Class), (theme as AdvancedRatingTheme)?.div2)}>
-      <div class={cn(div3(), clsx(div3Class), (theme as AdvancedRatingTheme)?.div3)} style="width: {rating}%"></div>
+  <div class={base({ class: clsx((theme as AdvancedRatingTheme)?.base, divClass) })}>
+    <span class={span({ class: clsx((theme as AdvancedRatingTheme)?.span, spanClass) })}>{label}</span>
+    <div class={div2({ class: clsx((theme as AdvancedRatingTheme)?.div2, div2Class) })}>
+      <div class={div3({ class: clsx((theme as AdvancedRatingTheme)?.div3, div3Class) })} style="width: {rating}%"></div>
     </div>
-    <span class={cn(span2(), clsx(span2Class), (theme as AdvancedRatingTheme)?.span2)}>{rating}{unit}</span>
+    <span class={span2({ class: clsx((theme as AdvancedRatingTheme)?.span2, span2Class) })}>{rating}{unit}</span>
   </div>
 {/each}
 
@@ -32,7 +31,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1239)
+[AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1225)
 ## Props
 @prop rating
 @prop globalText

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

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

package/dist/rating/CustomIcon.svelte

@@ -29,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1325)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1311)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#00ff00"

package/dist/rating/CustomIcon.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RatingIconProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1325)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1311)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#00ff00"

package/dist/rating/Heart.svelte

@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1325)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1311)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#ff0000"

package/dist/rating/Heart.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RatingIconProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1325)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1311)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#ff0000"

package/dist/rating/Rating.svelte

@@ -3,7 +3,6 @@
   import Star from "./Star.svelte";
   import { rating as ratingVariants, type RatingTheme } from ".";
   import type { RatingProps } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, text, class: className, size = 24, total = 5, rating = 4, icon: Icon = Star, count = false, pClass, ...restProps }: RatingProps = $props();
@@ -18,10 +17,10 @@
   let grayStars: number = total - (fullStars + Math.ceil(rateDiffence));
 </script>
 
-<div {...restProps} class={cn(base({ class: clsx(className) }), (theme as RatingTheme)?.base)}>
+<div {...restProps} class={base({ class: clsx((theme as RatingTheme)?.base, className) })}>
   {#if count && children}
     <Icon fillPercent={100} {size} iconIndex={0} groupId={ratingGroupId} />
-    <p class={cn(p({ class: clsx(pClass) }), (theme as RatingTheme)?.p)}>{rating}</p>
+    <p class={p({ class: clsx((theme as RatingTheme)?.p, pClass) })}>{rating}</p>
     {@render children()}
   {:else}
     <!-- eslint-disable @typescript-eslint/no-unused-vars-->
@@ -45,7 +44,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1251)
+[RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1237)
 ## Props
 @prop children
 @prop text

package/dist/rating/Rating.svelte.d.ts

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

package/dist/rating/RatingComment.svelte

@@ -63,7 +63,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingCommentProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1262)
+[RatingCommentProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1248)
 ## Props
 @prop children
 @prop evaluation

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

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

package/dist/rating/Review.svelte

@@ -2,7 +2,6 @@
   import clsx from "clsx";
   import { review as reviewVariants, type ReviewTheme } from ".";
   import type { ReviewProps } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, address, item1, item2, item3, review, articleClass, divClass, div2Class, div3Class, imgClass, ulClass, liClass }: ReviewProps = $props();
@@ -13,15 +12,15 @@
 </script>
 
 {#if review}
-  <article class={cn(article(), clsx(articleClass), (theme as ReviewTheme)?.article)}>
+  <article class={article({ class: clsx((theme as ReviewTheme)?.article, articleClass) })}>
     <div>
-      <div class={cn(div(), clsx(divClass), (theme as ReviewTheme)?.div)}>
-        <img class={cn(img(), clsx(imgClass), (theme as ReviewTheme)?.img)} src={review.imgSrc} alt={review.imgAlt} />
-        <div class={cn(div2(), clsx(div2Class), (theme as ReviewTheme)?.div2)}>
+      <div class={div({ class: clsx((theme as ReviewTheme)?.div, divClass) })}>
+        <img class={img({ class: clsx((theme as ReviewTheme)?.img, imgClass) })} src={review.imgSrc} alt={review.imgAlt} />
+        <div class={div2({ class: clsx((theme as ReviewTheme)?.div2, div2Class) })}>
           <p>{review.name}</p>
           {#if review.address}
             {#if address}
-              <div class={cn(div3(), clsx(div3Class), (theme as ReviewTheme)?.div3)}>
+              <div class={div3({ class: clsx((theme as ReviewTheme)?.div3, div3Class) })}>
                 {@render address()}
               </div>
             {/if}
@@ -29,9 +28,9 @@
         </div>
       </div>
       {#if review.item1 || review.item2 || review.item3}
-        <ul class={cn(ul(), clsx(ulClass), (theme as ReviewTheme)?.ul)}>
+        <ul class={ul({ class: clsx((theme as ReviewTheme)?.ul, ulClass) })}>
           {#if review.item1}
-            <li class={cn(li(), clsx(liClass), (theme as ReviewTheme)?.li)}>
+            <li class={li({ class: clsx((theme as ReviewTheme)?.li, liClass) })}>
               {#if item1}
                 {@render item1()}
               {/if}
@@ -82,7 +81,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ReviewProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1298)
+[ReviewProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1284)
 ## Props
 @prop children
 @prop address

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

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