flowbite-svelte 1.10.20 → 1.10.22

package/dist/accordion/Accordion.svelte

@@ -30,7 +30,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AccordionProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L177)
+[AccordionProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L179)
 ## Props
 @prop children
 @prop flush

package/dist/accordion/Accordion.svelte.d.ts

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

package/dist/accordion/AccordionItem.svelte

@@ -5,7 +5,7 @@
   import { getContext } from "svelte";
   import { writable } from "svelte/store";
   import { slide } from "svelte/transition";
-  import { accordionItem, type AccordionItemTheme } from ".";
+  import { accordionItem } from ".";
 
   let { children, header, arrowup, arrowdown, open = $bindable(false), activeClass, inactiveClass, transitionType = slide, transitionParams, class: className, classes, headerClass, contentClass }: AccordionItemProps = $props();
 
@@ -32,7 +32,7 @@
   const useTransition = transitionType === "none" ? false : ctxTransitionType === "none" ? false : true;
 
   // Theme context
-  const theme = getTheme("accordionitem");
+  const theme = getTheme("accordionItem");
 
   const ctx: AccordionCtxType = getContext("ctx") ?? {};
 
@@ -51,8 +51,8 @@
   let buttonClass = $derived(clsx(open && !ctx.flush && (styling.active || ctx.activeClass || active()), !open && !ctx.flush && (styling.inactive || ctx.inactiveClass || inactive())));
 </script>
 
-<h2 class={base({ class: clsx((theme as AccordionItemTheme)?.base, className) })}>
-  <button type="button" onclick={handleToggle} class={button({ class: clsx(buttonClass, (theme as AccordionItemTheme)?.button, styling.button) })} aria-expanded={open}>
+<h2 class={base({ class: clsx(theme?.base, className) })}>
+  <button type="button" onclick={handleToggle} class={button({ class: clsx(buttonClass, theme?.button, styling.button) })} aria-expanded={open}>
     {#if header}
       {@render header()}
       {#if open}
@@ -77,14 +77,14 @@
 {#if useTransition}
   {#if open && transitionType !== "none"}
     <div transition:transitionType={transitionParams as ParamsType}>
-      <div class={content({ class: clsx((theme as AccordionItemTheme)?.content, styling.content) })}>
+      <div class={content({ class: clsx(theme?.content, styling.content) })}>
         {@render children()}
       </div>
     </div>
   {/if}
 {:else}
   <div class={open ? "block" : "hidden"}>
-    <div class={content({ class: clsx((theme as AccordionItemTheme)?.content, styling.content) })}>
+    <div class={content({ class: clsx(theme?.content, styling.content) })}>
       {@render children()}
     </div>
   </div>
@@ -94,7 +94,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L185)
+[AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L187)
 ## Props
 @prop children
 @prop header

package/dist/accordion/AccordionItem.svelte.d.ts

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

package/dist/accordion/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Accordion } from "./Accordion.svelte";
 export { default as AccordionItem } from "./AccordionItem.svelte";
-export { accordion, accordionItem, type AccordionTheme, type AccordionItemTheme } from "./theme";
+export { accordion, accordionItem } from "./theme";

package/dist/accordion/theme.d.ts

@@ -1,11 +1,7 @@
 import type { Classes } from "../theme/themeUtils";
-import type { ClassValue } from "svelte/elements";
 import { type VariantProps } from "tailwind-variants";
 export type AccordionVariants = VariantProps<typeof accordion>;
 export type AccordionItemVariants = VariantProps<typeof accordionItem> & Classes<typeof accordionItem>;
-export type AccordionTheme = ClassValue;
-export type AccordionItemSlots = keyof typeof accordionItem.slots;
-export type AccordionItemTheme = Partial<Record<AccordionItemSlots, ClassValue>>;
 export declare const accordion: import("tailwind-variants").TVReturnType<{
     color: {
         primary: string;

package/dist/alert/Alert.svelte

@@ -52,7 +52,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L199)
+[AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L201)
 ## Props
 @prop children
 @prop icon

package/dist/alert/Alert.svelte.d.ts

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

package/dist/alert/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Alert } from "./Alert.svelte";
-export { alert, type AlertTheme } from "./theme";
+export { alert } from "./theme";

package/dist/alert/theme.d.ts

@@ -1,7 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-import type { ClassValue } from "svelte/elements";
 export type AlertVariants = VariantProps<typeof alert>;
-export type AlertTheme = ClassValue;
 export declare const alert: import("tailwind-variants").TVReturnType<{
     color: {
         primary: string;

package/dist/avatar/Avatar.svelte

@@ -48,7 +48,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AvatarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L210)
+[AvatarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L212)
 ## Props
 @prop children
 @prop indicator

package/dist/avatar/Avatar.svelte.d.ts

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

package/dist/avatar/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Avatar } from "./Avatar.svelte";
-export { avatar, type AvatarTheme } from "./theme";
+export { avatar } from "./theme";

package/dist/avatar/theme.d.ts

@@ -1,7 +1,5 @@
-import type { ClassValue } from "svelte/elements";
 import { type VariantProps } from "tailwind-variants";
 export type AvatarVariants = VariantProps<typeof avatar>;
-export type AvatarTheme = ClassValue;
 export declare const avatar: import("tailwind-variants").TVReturnType<{
     cornerStyle: {
         rounded: string;

package/dist/badge/Badge.svelte

@@ -3,7 +3,7 @@
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
   import clsx from "clsx";
   import { fade } from "svelte/transition";
-  import { badge, type BadgeTheme } from ".";
+  import { badge } from ".";
 
   let { children, icon, badgeStatus = $bindable(true), color = "primary", large = false, dismissable = false, class: className, classes, border, href, target, rounded, transition = fade, params, aClass, onclose, ...restProps }: BadgeProps = $props();
 
@@ -23,9 +23,9 @@
 </script>
 
 {#if badgeStatus}
-  <div {...restProps} transition:transition={params as ParamsType} class={base({ class: clsx((theme as BadgeTheme)?.base, className) })}>
+  <div {...restProps} transition:transition={params as ParamsType} class={base({ class: clsx(theme?.base, className) })}>
     {#if href}
-      <a {href} {target} class={linkClass({ class: clsx((theme as BadgeTheme)?.linkClass, styling.linkClass) })}>
+      <a {href} {target} class={linkClass({ class: clsx(theme?.linkClass, styling.linkClass) })}>
         {@render children()}
       </a>
     {:else}
@@ -49,7 +49,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BadgeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L222)
+[BadgeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L224)
 ## Props
 @prop children
 @prop icon

package/dist/badge/Badge.svelte.d.ts

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

package/dist/badge/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Badge } from "./Badge.svelte";
-export { badge, type BadgeTheme } from "./theme";
+export { badge } from "./theme";

package/dist/badge/theme.d.ts

@@ -1,9 +1,6 @@
 import type { Classes } from "../theme/themeUtils";
-import type { ClassValue } from "svelte/elements";
 import { type VariantProps } from "tailwind-variants";
 export type BadgeVariants = VariantProps<typeof badge> & Classes<typeof badge>;
-export type BadgeSlots = keyof typeof badge.slots;
-export type BadgeTheme = Partial<Record<BadgeSlots, ClassValue>>;
 export declare const badge: import("tailwind-variants").TVReturnType<{
     color: {
         primary: {

package/dist/banner/Banner.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { fade } from "svelte/transition";
-  import { banner, type BannerTheme } from ".";
+  import { banner } from ".";
   import clsx from "clsx";
   import { type ParamsType, type BannerProps, CloseButton } from "..";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
@@ -18,15 +18,15 @@
 </script>
 
 {#if open}
-  <div tabindex="-1" class={base({ class: clsx((theme as BannerTheme)?.base, className) })} {...restProps} transition:transition={params as ParamsType}>
-    <div class={insideDiv({ class: clsx((theme as BannerTheme)?.insideDiv, styling.insideDiv) })}>
+  <div tabindex="-1" class={base({ class: clsx(theme?.base, className) })} {...restProps} transition:transition={params as ParamsType}>
+    <div class={insideDiv({ class: clsx(theme?.insideDiv, styling.insideDiv) })}>
       {@render children?.()}
     </div>
 
     {#if dismissable}
       <div class="flex items-center justify-end">
         <CloseButton
-          class={dismissableClass({ class: clsx((theme as BannerTheme)?.dismissable, styling.dismissable) })}
+          class={dismissableClass({ class: clsx(theme?.dismissable, styling.dismissable) })}
           {color}
           ariaLabel="Remove banner"
           onclick={() => {
@@ -42,7 +42,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BannerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L237)
+[BannerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L239)
 ## Props
 @prop children
 @prop header

package/dist/banner/Banner.svelte.d.ts

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

package/dist/banner/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Banner } from "./Banner.svelte";
-export { banner, type BannerTheme } from "./theme";
+export { banner } from "./theme";

package/dist/banner/theme.d.ts

@@ -1,9 +1,6 @@
 import { type VariantProps } from "tailwind-variants";
-import type { ClassValue } from "svelte/elements";
 import type { Classes } from "../theme/themeUtils";
 export type BannerVariants = VariantProps<typeof banner> & Classes<typeof banner>;
-export type BannerSlots = keyof typeof banner.slots;
-export type BannerTheme = Partial<Record<BannerSlots, ClassValue>>;
 export declare const banner: import("tailwind-variants").TVReturnType<{
     type: {
         top: {

package/dist/bottom-navigation/BottomNav.svelte

@@ -3,7 +3,7 @@
   import { writable } from "svelte/store";
   import { bottomNav } from ".";
   import clsx from "clsx";
-  import { type BottomNavProps, type BottomNavContextType, cn, type BottomNavTheme } from "..";
+  import { type BottomNavProps, type BottomNavContextType, cn } from "..";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
 
   let { children, header, position = "fixed", navType = "default", class: className, classes, outerClass, innerClass, activeClass, activeUrl = "", ...restProps }: BottomNavProps = $props();
@@ -28,12 +28,12 @@
   });
 </script>
 
-<div {...restProps} class={base({ class: clsx((theme as BottomNavTheme)?.base, className ?? outerClass) })}>
+<div {...restProps} class={base({ class: clsx(theme?.base, className ?? outerClass) })}>
   {#if header}
     {@render header()}
   {/if}
 
-  <div class={inner({ class: clsx((theme as BottomNavTheme)?.inner, styling.inner) })}>
+  <div class={inner({ class: clsx(theme?.inner, styling.inner) })}>
     {@render children()}
   </div>
 </div>
@@ -42,7 +42,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L255)
+[BottomNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L257)
 ## Props
 @prop children
 @prop header

package/dist/bottom-navigation/BottomNav.svelte.d.ts

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

package/dist/bottom-navigation/BottomNavHeader.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { bottomNavHeader } from ".";
   import clsx from "clsx";
-  import { type BottomNavHeaderProps, type BottomNavHeaderTheme } from "..";
+  import { type BottomNavHeaderProps } from "..";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
 
   let { children, class: className, classes, outerClass, innerClass, ...restProps }: BottomNavHeaderProps = $props();
@@ -16,8 +16,8 @@
   const { innerDiv, base } = $derived(bottomNavHeader());
 </script>
 
-<div {...restProps} class={base({ class: clsx((theme as BottomNavHeaderTheme)?.base, className ?? outerClass) })}>
-  <div class={innerDiv({ class: clsx((theme as BottomNavHeaderTheme)?.innerDiv, styling.innerDiv) })} role="group">
+<div {...restProps} class={base({ class: clsx(theme?.base, className ?? outerClass) })}>
+  <div class={innerDiv({ class: clsx(theme?.innerDiv, styling.innerDiv) })} role="group">
     {@render children()}
   </div>
 </div>
@@ -26,7 +26,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L274)
+[BottomNavHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L276)
 ## Props
 @prop children
 @prop class: className

package/dist/bottom-navigation/BottomNavHeader.svelte.d.ts

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

package/dist/bottom-navigation/BottomNavHeaderItem.svelte

@@ -20,7 +20,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavHeaderItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L280)
+[BottomNavHeaderItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L282)
 ## Props
 @prop itemName
 @prop active

package/dist/bottom-navigation/BottomNavHeaderItem.svelte.d.ts

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

package/dist/bottom-navigation/BottomNavItem.svelte

@@ -4,7 +4,7 @@
   import clsx from "clsx";
   import { getContext } from "svelte";
   import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-  import { bottomNavItem, type BottomNavItemTheme } from ".";
+  import { bottomNavItem } from ".";
 
   let { children, btnName, appBtnPosition = "middle", activeClass, class: className, classes, btnClass, spanClass, active: manualActive, ...restProps }: BottomNavItemProps = $props();
 
@@ -27,11 +27,11 @@
   });
 
   function getCommonClass() {
-    return base({ class: clsx(isActive && (activeClass ?? context.activeClass), (theme as BottomNavItemTheme)?.base, className ?? btnClass) });
+    return base({ class: clsx(isActive && (activeClass ?? context.activeClass), theme?.base, className ?? btnClass) });
   }
 
   function getSpanClass() {
-    return span({ class: clsx(isActive && (activeClass ?? context.activeClass), (theme as BottomNavItemTheme)?.span, styling.span) });
+    return span({ class: clsx(isActive && (activeClass ?? context.activeClass), theme?.span, styling.span) });
   }
 
   /* eslint-disable  @typescript-eslint/no-explicit-any */
@@ -67,7 +67,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L264)
+[BottomNavItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L266)
 ## Props
 @prop children
 @prop btnName

package/dist/bottom-navigation/BottomNavItem.svelte.d.ts

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

package/dist/bottom-navigation/index.d.ts

@@ -2,4 +2,4 @@ export { default as BottomNav } from "./BottomNav.svelte";
 export { default as BottomNavItem } from "./BottomNavItem.svelte";
 export { default as BottomNavHeaderItem } from "./BottomNavHeaderItem.svelte";
 export { default as BottomNavHeader } from "./BottomNavHeader.svelte";
-export { bottomNav, bottomNavItem, bottomNavHeader, bottomNavHeaderItem, type BottomNavTheme, type BottomNavItemTheme, type BottomNavHeaderTheme, type BottomNavHeaderItemTheme } from "./theme";
+export { bottomNav, bottomNavItem, bottomNavHeader, bottomNavHeaderItem } from "./theme";

package/dist/bottom-navigation/theme.d.ts

@@ -1,18 +1,9 @@
 import { type VariantProps } from "tailwind-variants";
-import type { ClassValue } from "svelte/elements";
 import type { Classes } from "../theme/themeUtils";
 export type BottomNavVariants = VariantProps<typeof bottomNav> & Classes<typeof bottomNav>;
 export type BottomNavItemVariants = VariantProps<typeof bottomNavItem> & Classes<typeof bottomNavItem>;
 export type BottomNavHeaderVariants = VariantProps<typeof bottomNavHeader> & Classes<typeof bottomNavHeader>;
 export type BottomNavHeaderItemVariants = VariantProps<typeof bottomNavHeaderItem>;
-export type BottomNavSlots = keyof typeof bottomNav.slots;
-export type BottomNavTheme = Partial<Record<BottomNavSlots, ClassValue>>;
-export type BottomNavItemSlots = keyof typeof bottomNavItem.slots;
-export type BottomNavItemTheme = Partial<Record<BottomNavItemSlots, ClassValue>>;
-export type BottomnavheaderSlots = keyof typeof bottomNavHeader.slots;
-export type BottomNavHeaderTheme = Partial<Record<BottomnavheaderSlots, ClassValue>>;
-export type bottomNavHeaderItemSlots = keyof typeof bottomNavHeaderItem.slots;
-export type BottomNavHeaderItemTheme = Partial<Record<bottomNavHeaderItemSlots, ClassValue>>;
 export declare const bottomNav: import("tailwind-variants").TVReturnType<{
     position: {
         static: {

package/dist/breadcrumb/Breadcrumb.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { breadcrumb } from ".";
   import clsx from "clsx";
-  import { type BreadcrumbProps, type BreadcrumbTheme } from "..";
+  import { type BreadcrumbProps } from "..";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
 
   let { children, solid = false, class: className, classes, olClass, ariaLabel = "Breadcrumb", ...restProps }: BreadcrumbProps = $props();
@@ -12,8 +12,8 @@
   const theme = getTheme("breadcrumb");
 
   const { base, list } = breadcrumb({ solid });
-  let classNav = $derived(base({ class: clsx((theme as BreadcrumbTheme)?.base, className) }));
-  let classList = $derived(list({ class: clsx((theme as BreadcrumbTheme)?.list, styling.list) }));
+  let classNav = $derived(base({ class: clsx(theme?.base, className) }));
+  let classList = $derived(list({ class: clsx(theme?.list, styling.list) }));
 </script>
 
 <nav aria-label={ariaLabel} {...restProps} class={classNav}>
@@ -26,7 +26,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BreadcrumbProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L286)
+[BreadcrumbProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L288)
 ## Props
 @prop children
 @prop solid = false

package/dist/breadcrumb/Breadcrumb.svelte.d.ts

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

package/dist/breadcrumb/BreadcrumbItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type BreadcrumbItemProps, type BreadcrumbItemTheme } from "..";
+  import { type BreadcrumbItemProps } from "..";
   import { getTheme } from "../theme/themeUtils";
   import clsx from "clsx";
   import { breadcrumbItem } from "./index";
@@ -18,9 +18,9 @@
   );
 </script>
 
-<li {...restProps} class={base({ class: clsx((theme as BreadcrumbItemTheme)?.base, className) })}>
+<li {...restProps} class={base({ class: clsx(theme?.base, className) })}>
   {#if home}
-    <a class={base({ home: true, class: clsx((theme as BreadcrumbItemTheme)?.base, homeClass) })} {href}>
+    <a class={base({ home: true, class: clsx(theme?.base, homeClass) })} {href}>
       {#if icon}
         {@render icon()}
       {:else}
@@ -35,17 +35,17 @@
     {#if icon}
       {@render icon()}
     {:else}
-      <svg class={separator({ class: clsx((theme as BreadcrumbItemTheme)?.separator, styling.separator) })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <svg class={separator({ class: clsx(theme?.separator, styling.separator) })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
       </svg>
     {/if}
 
     {#if href}
-      <a class={base({ home: false, hasHref: true, class: clsx((theme as BreadcrumbItemTheme)?.base, linkClass) })} {href}>
+      <a class={base({ home: false, hasHref: true, class: clsx(theme?.base, linkClass) })} {href}>
         {@render children()}
       </a>
     {:else}
-      <span class={base({ home: false, hasHref: false, class: clsx((theme as BreadcrumbItemTheme)?.base, spanClass) })}>
+      <span class={base({ home: false, hasHref: false, class: clsx(theme?.base, spanClass) })}>
         {@render children()}
       </span>
     {/if}
@@ -56,7 +56,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BreadcrumbItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L293)
+[BreadcrumbItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L295)
 ## Props
 @prop children
 @prop icon

package/dist/breadcrumb/BreadcrumbItem.svelte.d.ts

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

package/dist/breadcrumb/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Breadcrumb } from "./Breadcrumb.svelte";
 export { default as BreadcrumbItem } from "./BreadcrumbItem.svelte";
-export { breadcrumb, breadcrumbItem, type BreadcrumbTheme, type BreadcrumbItemTheme } from "./theme";
+export { breadcrumb, breadcrumbItem } from "./theme";

package/dist/breadcrumb/theme.d.ts

@@ -1,12 +1,7 @@
 import { type VariantProps } from "tailwind-variants";
-import type { ClassValue } from "svelte/elements";
 import type { Classes } from "../theme/themeUtils";
 export type BreadcrumbVariants = VariantProps<typeof breadcrumb> & Classes<typeof breadcrumb>;
 export type BreadcrumbItemVariants = VariantProps<typeof breadcrumbItem> & Classes<typeof breadcrumbItem>;
-export type BreadcrumbSlots = keyof typeof breadcrumb.slots;
-export type BreadcrumbTheme = Partial<Record<BreadcrumbSlots, ClassValue>>;
-export type BreadcrumbItemSlots = keyof typeof breadcrumbItem.slots;
-export type BreadcrumbItemTheme = Partial<Record<BreadcrumbItemSlots, ClassValue>>;
 export declare const breadcrumb: import("tailwind-variants").TVReturnType<{
     solid: {
         true: {

package/dist/button-group/ButtonGroup.svelte

@@ -22,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ButtonGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L304)
+[ButtonGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L306)
 ## Props
 @prop children
 @prop size = "md"

package/dist/button-group/ButtonGroup.svelte.d.ts

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

package/dist/button-group/index.d.ts

@@ -1,2 +1,2 @@
 export { default as ButtonGroup } from "./ButtonGroup.svelte";
-export { buttonGroup, type ButtonGroupTheme } from "./theme";
+export { buttonGroup } from "./theme";

package/dist/button-group/theme.d.ts

@@ -1,7 +1,5 @@
-import type { ClassValue } from "svelte/elements";
 import { type VariantProps } from "tailwind-variants";
 export type ButtonGroupVariants = VariantProps<typeof buttonGroup>;
-export type ButtonGroupTheme = ClassValue;
 export declare const buttonGroup: import("tailwind-variants").TVReturnType<{
     size: {
         sm: string;