flowbite-svelte 1.10.5 → 1.10.7

package/dist/table/TableBodyRow.svelte

@@ -3,7 +3,6 @@
   import { tableBodyRow } from ".";
   import type { TableBodyRowProps, TableCtxType } from "../types";
   import clsx from "clsx";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, class: className, color, striped, hoverable, border, ...restProps }: TableBodyRowProps = $props();
@@ -17,10 +16,10 @@
   let compoStriped = $derived(striped || tableCtx.striped || false);
   let compoBorder = $derived(border || tableCtx.border || false);
 
-  const base = $derived(tableBodyRow({ color: compoColor, hoverable: compoHoverable, striped: compoStriped, border: compoBorder }));
+  const base = $derived(tableBodyRow({ color: compoColor, hoverable: compoHoverable, striped: compoStriped, border: compoBorder, class: clsx(theme, className) }));
 </script>
 
-<tr {...restProps} class={cn(base, clsx(className), theme)}>
+<tr {...restProps} class={base}>
   {#if children}
     {@render children()}
   {/if}
@@ -30,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableBodyRowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1657)
+[TableBodyRowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1643)
 ## Props
 @prop children
 @prop class: className

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

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

package/dist/table/TableHead.svelte

@@ -3,7 +3,6 @@
   import { TableHeadCell, tableHead } from ".";
   import type { TableHeadProps, TableCtxType, HeadItemType } from "../types";
   import clsx from "clsx";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, headerSlot, color, striped, border, class: className, headItems, defaultRow = true, ...restProps }: TableHeadProps = $props();
@@ -16,7 +15,7 @@
   let compoStriped = $derived(striped ? striped : tableCtx.striped || false);
   let compoBorder = $derived(border ? border : tableCtx.border || false);
 
-  const base = $derived(tableHead({ color: compoColor, border: compoBorder, striped: compoStriped }));
+  const base = $derived(tableHead({ color: compoColor, border: compoBorder, striped: compoStriped, class: clsx(theme, className) }));
 
   function getItemText(item: HeadItemType): string {
     if (typeof item === "object" && "text" in item) {
@@ -26,7 +25,7 @@
   }
 </script>
 
-<thead {...restProps} class={cn(base, clsx(className), theme)}>
+<thead {...restProps} class={base}>
   {#if headItems}
     {#if headerSlot}
       {@render headerSlot()}
@@ -53,7 +52,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableHeadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1632)
+[TableHeadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1618)
 ## Props
 @prop children
 @prop headerSlot

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

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

package/dist/table/TableHeadCell.svelte

@@ -2,7 +2,6 @@
   import clsx from "clsx";
   import { tableHeadCell } from ".";
   import type { TableHeadCellProps } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, class: className, ...restProps }: TableHeadCellProps = $props();
@@ -10,7 +9,7 @@
   const theme = getTheme("tableHeadCell");
 </script>
 
-<th {...restProps} class={cn(tableHeadCell(), clsx(className), theme)}>
+<th {...restProps} class={tableHeadCell({ class: clsx(theme, className) })}>
   {#if children}
     {@render children()}
   {/if}
@@ -20,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableHeadCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1681)
+[TableHeadCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1667)
 ## Props
 @prop children
 @prop class: className

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

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

package/dist/table/TableSearch.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import type { TableSearchProps, TableSearchType } from "../types";
-  import { cn } from "..";
+  import clsx from "clsx";
   import { tableSearch, type TableSearchTheme } from ".";
   import { getTheme } from "../theme/themeUtils";
 
@@ -15,16 +15,16 @@
   const styles = tableSearch({ color: themeColor, striped, hoverable });
 
   // Apply custom classes or use theme defaults
-  const rootClass = cn(styles.root(), divClass, (theme as TableSearchTheme)?.root);
-  const innerDivCls = cn(styles.innerDiv(), innerDivClass, (theme as TableSearchTheme)?.innerDiv);
-  const searchContainerCls = cn(styles.searchContainer(), searchClass, (theme as TableSearchTheme)?.searchContainer);
-  const svgContainerCls = cn(styles.svgContainer(), svgDivClass, (theme as TableSearchTheme)?.svgContainer);
-  const svgCls = cn(styles.svg(), svgClass, (theme as TableSearchTheme)?.svg);
-  const inputCls = cn(styles.input(), inputClass, (theme as TableSearchTheme)?.input);
-  const tableCls = cn(styles.table(), tableClass, className, (theme as TableSearchTheme)?.table);
+  const rootClass = styles.root({ class: clsx((theme as TableSearchTheme)?.root, divClass) });
+  const innerDivCls = styles.innerDiv({ class: clsx((theme as TableSearchTheme)?.innerDiv, innerDivClass) });
+  const searchContainerCls = styles.searchContainer({ class: clsx((theme as TableSearchTheme)?.searchContainer, searchClass) });
+  const svgContainerCls = styles.svgContainer({ class: clsx((theme as TableSearchTheme)?.svgContainer, svgDivClass) });
+  const svgCls = styles.svg({ class: clsx((theme as TableSearchTheme)?.svg, svgClass) });
+  const inputCls = styles.input({ class: clsx((theme as TableSearchTheme)?.input, inputClass) });
+  const tableCls = styles.table({ class: clsx(tableClass, (theme as TableSearchTheme)?.table, className) });
 
   // Handle custom color
-  const finalTableClass = color === "custom" && customColor ? cn(tableCls, customColor) : tableCls;
+  const finalTableClass = color === "custom" && customColor ? clsx(tableCls, customColor) : tableCls;
 
   const tableSearchCtx: TableSearchType = {
     striped,
@@ -64,7 +64,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableSearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1696)
+[TableSearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1682)
 ## Props
 @prop children
 @prop header

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

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

package/dist/table/theme.d.ts

@@ -225,7 +225,7 @@ export declare const table: import("tailwind-variants").TVReturnType<{
     table: string;
 }, undefined, unknown, unknown, undefined>>;
 export type TableSlots = keyof typeof table.slots;
-export type TableTheme = Partial<Record<TableSlots, string>>;
+export type TableTheme = Partial<Record<TableSlots, ClassValue>>;
 export declare const tableBodyRow: import("tailwind-variants").TVReturnType<{
     color: {
         default: string;
@@ -326,7 +326,7 @@ export declare const tableBodyRow: import("tailwind-variants").TVReturnType<{
         true: string;
     };
 }, undefined, "", unknown, unknown, undefined>>;
-export type TableBodyRowTheme = string;
+export type TableBodyRowTheme = ClassValue;
 export declare const tableHead: import("tailwind-variants").TVReturnType<{
     color: {
         default: string;
@@ -424,11 +424,11 @@ export declare const tableHead: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "text-xs uppercase", unknown, unknown, undefined>>;
-export type TableHeadTheme = string;
+export type TableHeadTheme = ClassValue;
 export declare const tableBodyCell: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-6 py-4 whitespace-nowrap font-medium", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-6 py-4 whitespace-nowrap font-medium", unknown, unknown, undefined>>;
-export type TableBodyCellTheme = string;
+export type TableBodyCellTheme = ClassValue;
 export declare const tableHeadCell: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-6 py-3", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-6 py-3", unknown, unknown, undefined>>;
-export type TableHeadCellTheme = string;
+export type TableHeadCellTheme = ClassValue;
 export type TableSearchClasses = Partial<{
     root: ClassValue;
     innerDiv: ClassValue;
@@ -609,4 +609,4 @@ export declare const tableSearch: import("tailwind-variants").TVReturnType<{
 }, undefined, unknown, unknown, undefined>>;
 export type TableSearchColor = "default" | "blue" | "green" | "red" | "yellow" | "purple" | "indigo" | "pink" | "custom";
 export type TableSearchSlots = keyof typeof tableSearch.slots;
-export type TableSearchTheme = Partial<Record<TableSearchSlots, string>>;
+export type TableSearchTheme = Partial<Record<TableSearchSlots, ClassValue>>;

package/dist/tabs/TabItem.svelte

@@ -2,7 +2,8 @@
   import { getContext } from "svelte";
   import { writable } from "svelte/store";
   import { tabItem, tabs, type TabItemTheme } from ".";
-  import { type TabitemProps, type TabCtxType, cn } from "..";
+  import clsx from "clsx";
+  import { type TabitemProps, type TabCtxType } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, titleSlot, open = false, title = "Tab title", activeClass, inactiveClass, class: className, disabled, tabStyle, ...restProps }: TabitemProps = $props();
@@ -32,8 +33,8 @@
   const { base, button, content } = $derived(tabItem({ open, disabled }));
 </script>
 
-<li {...restProps} class={cn(base(), className, (theme as TabItemTheme)?.base)} role="presentation">
-  <button type="button" onclick={() => (open = true)} role="tab" id={tabId} aria-controls={ctx.panelId} aria-selected={open} {disabled} class={cn(button(), open ? (activeClass ?? active()) : (inactiveClass ?? inactive()), (theme as TabItemTheme)?.button)}>
+<li {...restProps} class={base({ class: clsx((theme as TabItemTheme)?.base, className) })} role="presentation">
+  <button type="button" onclick={() => (open = true)} role="tab" id={tabId} aria-controls={ctx.panelId} aria-selected={open} {disabled} class={button({ class: clsx(open ? (activeClass ?? active()) : (inactiveClass ?? inactive()), (theme as TabItemTheme)?.button) })}>
     {#if titleSlot}
       {@render titleSlot()}
     {:else}
@@ -42,7 +43,7 @@
   </button>
 
   {#if open && children}
-    <div class={cn(content(), (theme as TabItemTheme)?.content)}>
+    <div class={content({ class: clsx((theme as TabItemTheme)?.content) })}>
       <div use:init>
         {@render children()}
       </div>
@@ -54,7 +55,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TabitemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1724)
+[TabitemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1710)
 ## Props
 @prop children
 @prop titleSlot

package/dist/tabs/TabItem.svelte.d.ts

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

package/dist/tabs/Tabs.svelte

@@ -4,7 +4,6 @@
   import { setContext } from "svelte";
   import { tabs, type TabsTheme } from ".";
   import type { TabsProps, TabCtxType } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, tabStyle = "none", ulClass, contentClass, divider = true, ...restProps }: TabsProps = $props();
@@ -36,19 +35,19 @@
   }
 </script>
 
-<ul role="tablist" {...restProps} class={cn(base(), clsx(ulClass), (theme as TabsTheme)?.base)}>
+<ul role="tablist" {...restProps} class={base({ class: clsx((theme as TabsTheme)?.base, ulClass) })}>
   {@render children()}
 </ul>
 {#if dividerBool}
-  <div class={cn(dividerClass(), (theme as TabsTheme)?.divider)}></div>
+  <div class={dividerClass({ class: clsx((theme as TabsTheme)?.divider) })}></div>
 {/if}
-<div id={panelId} class={cn(content(), clsx(contentClass), (theme as TabsTheme)?.content)} role="tabpanel" aria-labelledby={panelId} use:init></div>
+<div id={panelId} class={content({ class: clsx((theme as TabsTheme)?.content, contentClass) })} role="tabpanel" aria-labelledby={panelId} use:init></div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TabsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1716)
+[TabsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1702)
 ## Props
 @prop children
 @prop tabStyle = "none"

package/dist/tabs/Tabs.svelte.d.ts

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

package/dist/tabs/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type TabsVaraints = VariantProps<typeof tabs>;
 export declare const tabs: import("tailwind-variants").TVReturnType<{
     tabStyle: {
@@ -89,7 +90,7 @@ export declare const tabs: import("tailwind-variants").TVReturnType<{
     inactive: string;
 }, undefined, unknown, unknown, undefined>>;
 export type TabsSlots = keyof typeof tabs.slots;
-export type TabsTheme = Partial<Record<TabsSlots, string>>;
+export type TabsTheme = Partial<Record<TabsSlots, ClassValue>>;
 export declare const tabItem: import("tailwind-variants").TVReturnType<{
     open: {
         true: {
@@ -137,4 +138,4 @@ export declare const tabItem: import("tailwind-variants").TVReturnType<{
     content: string;
 }, undefined, unknown, unknown, undefined>>;
 export type TabItemSlots = keyof typeof tabItem.slots;
-export type TabItemTheme = Partial<Record<TabItemSlots, string>>;
+export type TabItemTheme = Partial<Record<TabItemSlots, ClassValue>>;

package/dist/theme/themeUtils.d.ts

@@ -1,2 +1,15 @@
 import { type ThemeConfig } from "..";
+import type { ClassValue } from "clsx";
 export declare function getTheme<K extends keyof ThemeConfig>(componentKey: K): ThemeConfig[K];
+type Slots<T extends {
+    slots: Record<string, unknown>;
+}> = Omit<T["slots"], "base">;
+export type Classes<T extends {
+    slots: Record<string, unknown>;
+}> = {
+    classes?: Partial<{
+        [K in keyof Slots<T>]: ClassValue;
+    }>;
+};
+export declare function themeDeprecated(component: string, names: Record<string, unknown>): void;
+export {};

package/dist/theme/themeUtils.js

@@ -1,6 +1,14 @@
-import { getContext } from "svelte";
 import {} from "..";
+import { getContext } from "svelte";
 export function getTheme(componentKey) {
     const theme = getContext("theme");
     return theme?.[componentKey];
 }
+export function themeDeprecated(component, names) {
+    const nonEmptyNames = Object.keys(names)
+        .filter((name) => names[name])
+        .map((name) => `"${name}"`);
+    if (nonEmptyNames.length === 0)
+        return;
+    console.warn(`The following "${component}" props are deprecated: ${nonEmptyNames.join(", ")}.\nPlease update your code to use the new "classes" property.`);
+}

package/dist/timeline/Activity.svelte

@@ -2,7 +2,6 @@
   import clsx from "clsx";
   import { activity } from ".";
   import type { ActivityProps } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, class: className, ...restProps }: ActivityProps = $props();
@@ -10,7 +9,7 @@
   const theme = getTheme("activity");
 </script>
 
-<ol {...restProps} class={cn(activity({ class: clsx(className) }), theme)}>
+<ol {...restProps} class={activity({ class: clsx(theme, className) })}>
   {@render children()}
 </ol>
 
@@ -18,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ActivityProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1768)
+[ActivityProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1754)
 ## Props
 @prop children
 @prop class: className

package/dist/timeline/Activity.svelte.d.ts

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

package/dist/timeline/ActivityItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { activityItem, type ActivityItemTheme } from "./index";
   import type { ActivityItemProps } from "../types";
-  import { cn } from "..";
+  import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
   let { activities, liClass, spanClass, imgClass, outerDivClass, innerDivClass, timeClass, titleClass, textClass, ...restProps }: ActivityItemProps = $props();
@@ -12,19 +12,19 @@
 </script>
 
 {#each activities as { title: name, date, src, alt, text: activity }}
-  <li {...restProps} class={cn(li({ class: liClass }), (theme as ActivityItemTheme)?.li)}>
-    <span class={cn(span({ class: spanClass }), (theme as ActivityItemTheme)?.span)}>
-      <img class={cn(img({ class: imgClass }), (theme as ActivityItemTheme)?.img)} {src} {alt} />
+  <li {...restProps} class={li({ class: clsx((theme as ActivityItemTheme)?.li, liClass) })}>
+    <span class={span({ class: clsx((theme as ActivityItemTheme)?.span, spanClass) })}>
+      <img class={img({ class: clsx((theme as ActivityItemTheme)?.img, imgClass) })} {src} {alt} />
     </span>
-    <div class={cn(outerDiv({ class: outerDivClass }), (theme as ActivityItemTheme)?.outerDiv)}>
-      <div class={cn(innerDiv({ class: innerDivClass }), (theme as ActivityItemTheme)?.innerDiv)}>
-        <time class={cn(time({ class: timeClass }), (theme as ActivityItemTheme)?.time)}>{date}</time>
-        <div class={cn(title({ class: titleClass }), (theme as ActivityItemTheme)?.title)}>
+    <div class={outerDiv({ class: clsx((theme as ActivityItemTheme)?.outerDiv, outerDivClass) })}>
+      <div class={innerDiv({ class: clsx((theme as ActivityItemTheme)?.innerDiv, innerDivClass) })}>
+        <time class={time({ class: clsx((theme as ActivityItemTheme)?.time, timeClass) })}>{date}</time>
+        <div class={title({ class: clsx((theme as ActivityItemTheme)?.title, titleClass) })}>
           {@html name}
         </div>
       </div>
       {#if activity}
-        <div class={cn(text({ class: textClass }), (theme as ActivityItemTheme)?.text)}>
+        <div class={text({ class: clsx((theme as ActivityItemTheme)?.text, textClass) })}>
           {@html activity}
         </div>
       {/if}
@@ -36,7 +36,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ActivityItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1772)
+[ActivityItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1758)
 ## Props
 @prop activities
 @prop liClass

package/dist/timeline/ActivityItem.svelte.d.ts

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

package/dist/timeline/Group.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { group, type GroupTheme } from ".";
   import type { GroupProps } from "../types";
-  import { cn } from "..";
+  import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, divClass, timeClass, date, olClass, ...restProps }: GroupProps = $props();
@@ -11,9 +11,9 @@
   const { div, time, ol } = $derived(group());
 </script>
 
-<div class={cn(div({ class: divClass }), (theme as GroupTheme)?.div)}>
-  <time class={cn(time({ class: timeClass }), (theme as GroupTheme)?.time)}>{date}</time>
-  <ol {...restProps} class={cn(ol({ class: olClass }), (theme as GroupTheme)?.ol)}>
+<div class={div({ class: clsx((theme as GroupTheme)?.div, divClass) })}>
+  <time class={time({ class: clsx((theme as GroupTheme)?.time, timeClass) })}>{date}</time>
+  <ol {...restProps} class={ol({ class: clsx((theme as GroupTheme)?.ol, olClass) })}>
     {@render children()}
   </ol>
 </div>
@@ -22,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1784)
+[GroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1770)
 ## Props
 @prop children
 @prop divClass

package/dist/timeline/Group.svelte.d.ts

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

package/dist/timeline/GroupItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { groupItem, type GroupItemTheme } from ".";
   import type { GroupItemProps } from "../types";
-  import { cn } from "..";
+  import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
   let { timelines, aClass, imgClass, divClass, titleClass, spanClass, ...restProps }: GroupItemProps = $props();
@@ -13,17 +13,17 @@
 
 {#each timelines as { name, src, alt, isPrivate, href, comment }}
   <li {...restProps}>
-    <a {href} class={cn(a({ class: aClass }), (theme as GroupItemTheme)?.a)}>
-      <img class={cn(img({ class: imgClass }), (theme as GroupItemTheme)?.img)} {src} {alt} />
-      <div class={cn(div({ class: divClass }), (theme as GroupItemTheme)?.div)}>
-        <div class={cn(title({ class: titleClass }), (theme as GroupItemTheme)?.title)}>
+    <a {href} class={a({ class: clsx((theme as GroupItemTheme)?.a, aClass) })}>
+      <img class={img({ class: clsx((theme as GroupItemTheme)?.img, imgClass) })} {src} {alt} />
+      <div class={div({ class: clsx((theme as GroupItemTheme)?.div, divClass) })}>
+        <div class={title({ class: clsx((theme as GroupItemTheme)?.title, titleClass) })}>
           {@html name}
         </div>
         {#if comment}
           <div class="text-sm font-normal">{comment}</div>
         {/if}
 
-        <span class={cn(span({ class: spanClass }), (theme as GroupItemTheme)?.span)}>
+        <span class={span({ class: clsx((theme as GroupItemTheme)?.span, spanClass) })}>
           {#if isPrivate}
             <svg class="me-1 h-3 w-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd" />
@@ -46,7 +46,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1792)
+[GroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1778)
 ## Props
 @prop timelines
 @prop aClass

package/dist/timeline/GroupItem.svelte.d.ts

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

package/dist/timeline/Timeline.svelte

@@ -3,7 +3,6 @@
   import { timeline } from ".";
   import clsx from "clsx";
   import type { TimelineProps, TimelineVariants } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, order = "default", class: className, ...restProps }: TimelineProps = $props();
@@ -11,10 +10,10 @@
   const theme = getTheme("timeline");
 
   setContext<TimelineVariants["order"]>("order", order);
-  const olCls = $derived(timeline({ order, class: clsx(className) }));
+  const olCls = $derived(timeline({ order, class: clsx(theme, className) }));
 </script>
 
-<ol {...restProps} class={cn(olCls, theme)}>
+<ol {...restProps} class={olCls}>
   {@render children()}
 </ol>
 
@@ -22,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimelineProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1803)
+[TimelineProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1789)
 ## Props
 @prop children
 @prop order = "default"

package/dist/timeline/Timeline.svelte.d.ts

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