flowbite-svelte 2.0.0-next.0 → 2.0.0-next.2

package/dist/table/TableSearch.svelte

@@ -3,48 +3,24 @@
   import type { TableSearchProps, TableContextType } from "../types";
   import clsx from "clsx";
   import { tableSearch } from "./theme";
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
-  import { untrack } from "svelte";
+  import { getTheme } from "../theme/themeUtils";
 
   let {
     children,
     header,
     footer,
-    divClass,
     inputValue = $bindable(),
     striped = false,
     hoverable = false,
     customColor = "",
     color = "default",
-    innerDivClass,
-    inputClass,
-    searchClass,
-    svgDivClass,
-    svgClass,
-    tableClass,
     class: className,
     classes,
     placeholder = "Search",
     ...restProps
   }: TableSearchProps = $props();
 
-  warnThemeDeprecation(
-    "TableSearch",
-    untrack(() => ({ divClass, innerDivClass, inputClass, searchClass, svgDivClass, svgClass, tableClass })),
-    { divClass: "root", innerDivClass: "inner", inputClass: "input", searchClass: "search", svgDivClass: "svgDiv", svgClass: "svg", tableClass: "table" }
-  );
-
-  const styling = $derived(
-    classes ?? {
-      root: divClass,
-      inner: innerDivClass,
-      input: inputClass,
-      search: searchClass,
-      svgDiv: svgDivClass,
-      svg: svgClass,
-      table: tableClass
-    }
-  );
+  const styling = $derived(classes);
 
   const theme = $derived(getTheme("tableSearch"));
 
@@ -52,7 +28,7 @@
 
   const { root, inner, search, svgDiv, svg, input, table } = $derived(tableSearch({ color: themeColor, striped, hoverable }));
 
-  const tableCls = $derived(table({ class: clsx(tableClass, theme?.table, className) }));
+  const tableCls = $derived(table({ class: clsx(theme?.table, styling?.table) }));
 
   // Handle custom color
   const finalTableClass = $derived(color === "custom" && customColor ? clsx(tableCls, customColor) : tableCls);
@@ -68,16 +44,16 @@
   });
 </script>
 
-<div class={root({ class: clsx(theme?.root, styling.root) })}>
-  <div class={inner({ class: clsx(theme?.inner, styling.inner) })}>
+<div class={root({ class: clsx(theme?.root, className) })}>
+  <div class={inner({ class: clsx(theme?.inner, styling?.inner) })}>
     <label for="table-search" class="sr-only">Search</label>
-    <div class={search({ class: clsx(theme?.search, styling.search) })}>
-      <div class={svgDiv({ class: clsx(theme?.svgDiv, styling.svgDiv) })}>
-        <svg class={svg({ class: clsx(theme?.svg, styling.svg) })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <div class={search({ class: clsx(theme?.search, styling?.search) })}>
+      <div class={svgDiv({ class: clsx(theme?.svgDiv, styling?.svgDiv) })}>
+        <svg class={svg({ class: clsx(theme?.svg, styling?.svg) })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
           <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
         </svg>
       </div>
-      <input bind:value={inputValue} type="text" id="table-search" class={input({ class: clsx(theme?.input, styling.input) })} {placeholder} />
+      <input bind:value={inputValue} type="text" id="table-search" class={input({ class: clsx(theme?.input, styling?.input) })} {placeholder} />
     </div>
     {#if header}
       {@render header()}
@@ -97,23 +73,16 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableSearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1774)
+[TableSearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1680)
 ## Props
 @prop children
 @prop header
 @prop footer
-@prop divClass
 @prop inputValue = $bindable()
 @prop striped = false
 @prop hoverable = false
 @prop customColor = ""
 @prop color = "default"
-@prop innerDivClass
-@prop inputClass
-@prop searchClass
-@prop svgDivClass
-@prop svgClass
-@prop tableClass
 @prop class: className
 @prop classes
 @prop placeholder = "Search"

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

@@ -2,23 +2,16 @@ 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#L1774)
+ * [TableSearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1680)
  * ## Props
  * @prop children
  * @prop header
  * @prop footer
- * @prop divClass
  * @prop inputValue = $bindable()
  * @prop striped = false
  * @prop hoverable = false
  * @prop customColor = ""
  * @prop color = "default"
- * @prop innerDivClass
- * @prop inputClass
- * @prop searchClass
- * @prop svgDivClass
- * @prop svgClass
- * @prop tableClass
  * @prop class: className
  * @prop classes
  * @prop placeholder = "Search"

package/dist/tabs/TabItem.svelte

@@ -69,7 +69,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TabitemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1803)
+[TabitemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1700)
 ## Props
 @prop children
 @prop titleSlot

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

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

package/dist/tabs/Tabs.svelte

@@ -1,24 +1,19 @@
 <script lang="ts">
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { getTheme } from "../theme/themeUtils";
   import type { SelectedTab, TabCtxType, TabsProps } from "../types";
   import { createSingleSelectionContext, useSingleSelection } from "../utils/singleselection.svelte";
   import clsx from "clsx";
   import { tabs } from "./theme";
   import { setTabsContext } from "../context";
-  import { untrack } from "svelte";
 
-  let { children, selected = $bindable(), tabStyle = "none", ulClass, contentClass, divider = true, class: className, classes, ...restProps }: TabsProps = $props();
+  let { children, selected = $bindable(), tabStyle = "none", divider = true, class: className, classes, ...restProps }: TabsProps = $props();
 
   const activeClasses = $derived(typeof classes?.active === "string" ? classes.active : undefined);
 
-  warnThemeDeprecation(
-    "Tabs",
-    untrack(() => ({ ulClass, contentClass })),
-    { ulClass: "class", contentClass: "content" }
-  );
+  const styling = $derived(classes);
 
   const theme = $derived(getTheme("tabs"));
-  const styling = $derived(classes ?? { content: contentClass });
+
   const { base, content, divider: dividerClass } = $derived(tabs({ tabStyle, hasDivider: divider }));
 
   const uuid = $props.id();
@@ -80,14 +75,14 @@
   });
 </script>
 
-<ul role="tablist" {...restProps} class={base({ class: clsx(theme?.base, className ?? ulClass) })}>
+<ul role="tablist" {...restProps} class={base({ class: clsx(theme?.base, className) })}>
   {@render children()}
 </ul>
 {#if dividerBool}
-  <div class={dividerClass({ class: clsx(theme?.divider, classes?.divider) })}></div>
+  <div class={dividerClass({ class: clsx(theme?.divider, styling?.divider) })}></div>
 {/if}
 
-<div id={panelId} class={content({ class: clsx(theme?.content, styling.content) })} role="tabpanel" aria-labelledby={selectedTab.id}>
+<div id={panelId} class={content({ class: clsx(theme?.content, styling?.content) })} role="tabpanel" aria-labelledby={selectedTab.id}>
   {@render selectedTab.snippet?.()}
 </div>
 
@@ -95,13 +90,11 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TabsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1794)
+[TabsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1693)
 ## Props
 @prop children
 @prop selected = $bindable()
 @prop tabStyle = "none"
-@prop ulClass
-@prop contentClass
 @prop divider = true
 @prop class: className
 @prop classes

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

@@ -2,13 +2,11 @@ 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#L1794)
+ * [TabsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1693)
  * ## Props
  * @prop children
  * @prop selected = $bindable()
  * @prop tabStyle = "none"
- * @prop ulClass
- * @prop contentClass
  * @prop divider = true
  * @prop class: className
  * @prop classes

package/dist/theme/themeUtils.d.ts

@@ -40,14 +40,4 @@ export type Classes<T extends {
         [K in keyof Slots<T>]: ClassValue;
     }>;
 };
-/**
- * Warns about deprecated theme-related props and suggests modern alternatives.
- *
- * Shows the component name, deprecated props, migration hints, and usage location (in dev mode).
- *
- * @param component - Name of the component using deprecated props.
- * @param names - Record of deprecated prop names and their values.
- * @param replacements - Optional map of deprecated keys to their replacements (e.g., "divClass" → "div").
- */
-export declare function warnThemeDeprecation(component: string, names: Record<string, unknown>, replacements?: Record<string, unknown>): void;
 export {};

package/dist/theme/themeUtils.js

@@ -1,5 +1,4 @@
 import { getThemeContext } from "../context";
-import { DEV } from "esm-env";
 /**
  * Retrieves the theme configuration for a specific component.
  *
@@ -17,69 +16,3 @@ export function getTheme(componentKey) {
     const finalTheme = theme;
     return finalTheme?.[componentKey];
 }
-/**
- * Warns about deprecated theme-related props and suggests modern alternatives.
- *
- * Shows the component name, deprecated props, migration hints, and usage location (in dev mode).
- *
- * @param component - Name of the component using deprecated props.
- * @param names - Record of deprecated prop names and their values.
- * @param replacements - Optional map of deprecated keys to their replacements (e.g., "divClass" → "div").
- */
-export function warnThemeDeprecation(component, names, replacements) {
-    if (!DEV)
-        return;
-    const nonEmptyNames = Object.keys(names).filter((name) => names[name]);
-    if (nonEmptyNames.length === 0)
-        return;
-    let migrationHint = "";
-    const usesClass = nonEmptyNames.some((name) => replacements?.[name] === "class");
-    const propText = usesClass ? `"classes" or "class"` : `"classes"`;
-    if (replacements) {
-        const classProps = [];
-        const classesObjectEntries = [];
-        for (const name of nonEmptyNames) {
-            const newKey = replacements[name];
-            const value = names[name];
-            if (!newKey || !value)
-                continue;
-            if (newKey === "class") {
-                classProps.push(`class="${value}"`);
-            }
-            else {
-                classesObjectEntries.push(`${newKey}: "${value}"`);
-            }
-        }
-        const hintLines = [];
-        if (classProps.length > 0)
-            hintLines.push(...classProps);
-        if (classesObjectEntries.length > 0) {
-            hintLines.push(`classes={{ ${classesObjectEntries.join(", ")} }}`);
-        }
-        if (hintLines.length > 0) {
-            migrationHint = `\nMigration example: ${hintLines.join(" ")}`;
-        }
-    }
-    // Stack trace parsing to find external caller
-    const stack = new Error().stack;
-    const externalCaller = getExternalCaller(stack);
-    console.warn(`⚠️ The following "${component}" props are deprecated: ${nonEmptyNames.map((n) => `"${n}"`).join(", ")}.\n` +
-        `💡 Please use the ${propText} prop instead.${migrationHint}\n` +
-        (externalCaller ? `🔍 Used at: ${externalCaller}` : ""));
-}
-// Extracts the first file in the stack trace that is NOT the current component file
-function getExternalCaller(stack) {
-    if (!stack)
-        return null;
-    const lines = stack.split("\n").slice(2); // skip "Error" and self-call
-    const currentFileMatch = lines[0]?.match(/(?:\()?(.*?\.svelte):\d+:\d+\)?$/);
-    const currentFile = currentFileMatch?.[1];
-    for (const line of lines) {
-        const match = line.match(/(?:\()?(.*?\.svelte):\d+:\d+\)?$/);
-        const file = match?.[1];
-        if (file && file !== currentFile) {
-            return line.trim().replace(/^at /, ""); // Clean format
-        }
-    }
-    return null;
-}

package/dist/theme/themes.d.ts

@@ -27,7 +27,7 @@ export { pagination, paginationButton, paginationItem, paginationNav } from "../
 export { popover } from "../popover";
 export { progressbar, progressradial } from "../progress";
 export { advancedRating, rating, review, scoreRating } from "../rating";
-export { sidebar, sidebarBrand, sidebarButton, sidebarCta, sidebarDropdownWrapper } from "../sidebar";
+export { sidebar, sidebarBrand, sidebarButton, sidebarCta, sidebarItem, sidebarDropdownWrapper } from "../sidebar";
 export { cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder } from "../skeleton";
 export { speedDial, speedDialButton } from "../speed-dial";
 export { spinner } from "../spinner";

package/dist/theme/themes.js

@@ -28,7 +28,7 @@ export { pagination, paginationButton, paginationItem, paginationNav } from "../
 export { popover } from "../popover";
 export { progressbar, progressradial } from "../progress";
 export { advancedRating, rating, review, scoreRating } from "../rating";
-export { sidebar, sidebarBrand, sidebarButton, sidebarCta, sidebarDropdownWrapper } from "../sidebar";
+export { sidebar, sidebarBrand, sidebarButton, sidebarCta, sidebarItem, sidebarDropdownWrapper } from "../sidebar";
 export { cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder } from "../skeleton";
 export { speedDial, speedDialButton } from "../speed-dial";
 export { spinner } from "../spinner";

package/dist/timeline/Activity.svelte

@@ -17,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#L1848)
+[ActivityProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1745)
 ## 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#L1848)
+ * [ActivityProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1745)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/timeline/ActivityItem.svelte

@@ -2,37 +2,11 @@
   import { activityItem } from "./theme";
   import type { ActivityItemProps } from "../types";
   import clsx from "clsx";
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
-  import { untrack } from "svelte";
+  import { getTheme } from "../theme/themeUtils";
 
-  let { activities, liClass, spanClass, imgClass, outerDivClass, innerDivClass, timeClass, titleClass, textClass, class: className, classes, ...restProps }: ActivityItemProps = $props();
+  let { activities, class: className, classes, ...restProps }: ActivityItemProps = $props();
 
-  warnThemeDeprecation(
-    "ActivityItem",
-    untrack(() => ({ liClass, spanClass, imgClass, outerDivClass, innerDivClass, timeClass, titleClass, textClass })),
-    {
-      liClass: "class",
-      spanClass: "span",
-      imgClass: "img",
-      outerDivClass: "outer",
-      innerDivClass: "inner",
-      timeClass: "time",
-      titleClass: "title",
-      textClass: "text"
-    }
-  );
-
-  const styling = $derived(
-    classes ?? {
-      span: spanClass,
-      img: imgClass,
-      outer: outerDivClass,
-      inner: innerDivClass,
-      time: timeClass,
-      title: titleClass,
-      text: textClass
-    }
-  );
+  const styling = $derived(classes);
 
   const theme = $derived(getTheme("activityItem"));
 
@@ -40,19 +14,19 @@
 </script>
 
 {#each activities as { title: name, date, src, alt, text: activity, id }, index (id ?? src ?? index)}
-  <li {...restProps} class={li({ class: clsx(theme?.li, className ?? liClass) })}>
-    <span class={span({ class: clsx(theme?.span, styling.span) })}>
-      <img class={img({ class: clsx(theme?.img, styling.img) })} {src} {alt} />
+  <li {...restProps} class={li({ class: clsx(theme?.li, className) })}>
+    <span class={span({ class: clsx(theme?.span, styling?.span) })}>
+      <img class={img({ class: clsx(theme?.img, styling?.img) })} {src} {alt} />
     </span>
-    <div class={outer({ class: clsx(theme?.outer, styling.outer) })}>
-      <div class={inner({ class: clsx(theme?.inner, styling.inner) })}>
-        <time class={time({ class: clsx(theme?.time, styling.time) })}>{date}</time>
-        <div class={title({ class: clsx(theme?.title, styling.title) })}>
+    <div class={outer({ class: clsx(theme?.outer, styling?.outer) })}>
+      <div class={inner({ class: clsx(theme?.inner, styling?.inner) })}>
+        <time class={time({ class: clsx(theme?.time, styling?.time) })}>{date}</time>
+        <div class={title({ class: clsx(theme?.title, styling?.title) })}>
           {@html name}
         </div>
       </div>
       {#if activity}
-        <div class={text({ class: clsx(theme?.text, styling.text) })}>
+        <div class={text({ class: clsx(theme?.text, styling?.text) })}>
           {@html activity}
         </div>
       {/if}
@@ -64,17 +38,9 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ActivityItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1852)
+[ActivityItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1749)
 ## Props
 @prop activities
-@prop liClass
-@prop spanClass
-@prop imgClass
-@prop outerDivClass
-@prop innerDivClass
-@prop timeClass
-@prop titleClass
-@prop textClass
 @prop class: className
 @prop classes
 @prop ...restProps

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

@@ -2,17 +2,9 @@ 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#L1852)
+ * [ActivityItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1749)
  * ## Props
  * @prop activities
- * @prop liClass
- * @prop spanClass
- * @prop imgClass
- * @prop outerDivClass
- * @prop innerDivClass
- * @prop timeClass
- * @prop titleClass
- * @prop textClass
  * @prop class: className
  * @prop classes
  * @prop ...restProps

package/dist/timeline/Group.svelte

@@ -2,34 +2,20 @@
   import { group } from "./theme";
   import type { GroupProps } from "../types";
   import clsx from "clsx";
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
-  import { untrack } from "svelte";
+  import { getTheme } from "../theme/themeUtils";
 
-  let { children, divClass, timeClass, date, olClass, class: className, classes, ...restProps }: GroupProps = $props();
+  let { children, date, class: className, classes, ...restProps }: GroupProps = $props();
 
-  warnThemeDeprecation(
-    "Group",
-    untrack(() => ({ divClass, timeClass, olClass })),
-    {
-      divClass: "class",
-      timeClass: "time",
-      olClass: "ol"
-    }
-  );
-
-  const styling = $derived({
-    time: timeClass,
-    ol: olClass
-  });
+  const styling = $derived(classes);
 
   const theme = $derived(getTheme("group"));
 
   const { div, time, ol } = $derived(group());
 </script>
 
-<div class={div({ class: clsx(theme?.div, className ?? divClass) })}>
-  <time class={time({ class: clsx(theme?.time, styling.time) })}>{date}</time>
-  <ol {...restProps} class={ol({ class: clsx(theme?.ol, styling.ol) })}>
+<div class={div({ class: clsx(theme?.div, className) })}>
+  <time class={time({ class: clsx(theme?.time, styling?.time) })}>{date}</time>
+  <ol {...restProps} class={ol({ class: clsx(theme?.ol, styling?.ol) })}>
     {@render children()}
   </ol>
 </div>
@@ -38,13 +24,10 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1864)
+[GroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1753)
 ## Props
 @prop children
-@prop divClass
-@prop timeClass
 @prop date
-@prop olClass
 @prop class: className
 @prop classes
 @prop ...restProps

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

@@ -2,13 +2,10 @@ 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#L1864)
+ * [GroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1753)
  * ## Props
  * @prop children
- * @prop divClass
- * @prop timeClass
  * @prop date
- * @prop olClass
  * @prop class: className
  * @prop classes
  * @prop ...restProps

package/dist/timeline/GroupItem.svelte

@@ -2,32 +2,12 @@
   import { groupItem } from "./theme";
   import type { GroupItemProps } from "../types";
   import clsx from "clsx";
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
-  import { untrack } from "svelte";
+  import { getTheme } from "../theme/themeUtils";
 
-  let { timelines, aClass, imgClass, divClass, titleClass, spanClass, class: className, classes, ...restProps }: GroupItemProps = $props();
+  let { timelines, class: className, classes, ...restProps }: GroupItemProps = $props();
 
-  warnThemeDeprecation(
-    "GroupItem",
-    untrack(() => ({ aClass, imgClass, divClass, titleClass, spanClass })),
-    {
-      aClass: "class",
-      imgClass: "img",
-      divClass: "div",
-      titleClass: "title",
-      spanClass: "span"
-    }
-  );
+  const styling = $derived(classes);
 
-  const styling = $derived(
-    classes ?? {
-      img: imgClass,
-      div: divClass,
-      title: titleClass,
-      span: spanClass,
-      a: aClass
-    }
-  );
   const theme = $derived(getTheme("groupItem"));
 
   const { base, a, img, div, title, span, svg } = $derived(groupItem());
@@ -35,19 +15,19 @@
 
 {#each timelines as { name, src, alt, isPrivate, href, comment, id }, index (id ?? href ?? name ?? index)}
   <li class={base({ class: clsx(theme?.base, className) })} {...restProps}>
-    <a {href} class={a({ class: clsx(theme?.a, styling.a) })}>
-      <img class={img({ class: clsx(theme?.img, styling.img) })} {src} {alt} />
-      <div class={div({ class: clsx(theme?.div, styling.div) })}>
-        <div class={title({ class: clsx(theme?.title, styling.title) })}>
+    <a {href} class={a({ class: clsx(theme?.a, styling?.a) })}>
+      <img class={img({ class: clsx(theme?.img, styling?.img) })} {src} {alt} />
+      <div class={div({ class: clsx(theme?.div, styling?.div) })}>
+        <div class={title({ class: clsx(theme?.title, styling?.title) })}>
           {@html name}
         </div>
         {#if comment}
           <div class="text-sm font-normal">{comment}</div>
         {/if}
 
-        <span class={span({ class: clsx(theme?.span, styling.span) })}>
+        <span class={span({ class: clsx(theme?.span, styling?.span) })}>
           {#if isPrivate}
-            <svg class={svg({ class: clsx(theme?.svg, classes?.svg) })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <svg class={svg({ class: clsx(theme?.svg, styling?.svg) })} 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"
@@ -57,7 +37,7 @@
             </svg>
             Private
           {:else}
-            <svg class={svg({ class: clsx(theme?.svg, classes?.svg) })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <svg class={svg({ class: clsx(theme?.svg, styling?.svg) })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
               <path
                 fill-rule="evenodd"
                 d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z"
@@ -76,14 +56,9 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1872)
+[GroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1758)
 ## Props
 @prop timelines
-@prop aClass
-@prop imgClass
-@prop divClass
-@prop titleClass
-@prop spanClass
 @prop class: className
 @prop classes
 @prop ...restProps

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

@@ -2,14 +2,9 @@ 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#L1872)
+ * [GroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1758)
  * ## Props
  * @prop timelines
- * @prop aClass
- * @prop imgClass
- * @prop divClass
- * @prop titleClass
- * @prop spanClass
  * @prop class: className
  * @prop classes
  * @prop ...restProps

package/dist/timeline/Timeline.svelte

@@ -21,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#L1893)
+[TimelineProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1774)
 ## Props
 @prop children
 @prop order = "default"