flowbite-svelte 1.30.0 → 1.31.0

package/dist/timeline/theme.js

@@ -28,7 +28,7 @@ export const groupItem = tv({
         img: "me-3 mb-3 w-12 h-12 rounded-full sm:mb-0",
         div: "text-gray-600 dark:text-gray-400",
         title: "text-base font-normal",
-        span: "inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400",
+        span: "inline-flex items-center bg-gray-100 border border-gray-200 text-xs font-medium px-1.5 py-0.5 rounded",
         svg: "me-1 h-3 w-3"
     }
 });
@@ -94,6 +94,7 @@ export const timelineItem = tv({
     slots: {
         base: "relative",
         div: "",
+        defaultDiv: "absolute w-2 h-2 bg-gray-200 rounded-full mt-1.5 -start-5 border border-buffer",
         time: "",
         h3: "",
         svg: "w-4 h-4",

package/dist/toast/Toast.svelte

@@ -6,6 +6,7 @@
   import clsx from "clsx";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
   import { createDismissableContext } from "../utils/dismissable";
+  import { untrack } from "svelte";
 
   let {
     children,
@@ -24,10 +25,9 @@
     ...restProps
   }: ToastProps = $props();
 
-  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "Toast",
-    { iconClass, contentClass },
+    untrack(() => ({ iconClass, contentClass })),
     {
       iconClass: "icon",
       contentClass: "content"
@@ -41,7 +41,7 @@
     }
   );
 
-  const theme = getTheme("toast");
+  const theme = $derived(getTheme("toast"));
 
   const { base, icon: iconVariants, content, close } = $derived(toast({ color, position, align }));
 
@@ -78,7 +78,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1978)
+[ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1979)
 ## Props
 @prop children
 @prop icon

package/dist/toast/Toast.svelte.d.ts

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

package/dist/toast/ToastContainer.svelte

@@ -6,7 +6,7 @@
 
   let { children, position = "top-right", class: className, ...restProps }: ToastContainerProps = $props();
 
-  const theme = getTheme("toastContainer");
+  const theme = $derived(getTheme("toastContainer"));
 
   const positionClasses = {
     "top-left": "top-4 left-4",
@@ -26,7 +26,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToastContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1993)
+[ToastContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1994)
 ## Props
 @prop children
 @prop position = "top-right"

package/dist/toast/ToastContainer.svelte.d.ts

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

package/dist/toolbar/Toolbar.svelte

@@ -7,7 +7,7 @@
 
   let { children, end, color, embedded, class: className, classes, ...restProps }: ToolbarProps = $props();
 
-  const theme = getTheme("toolbar");
+  const theme = $derived(getTheme("toolbar"));
 
   const context = $state({ separators: false });
 

package/dist/toolbar/ToolbarButton.svelte

@@ -6,7 +6,7 @@
 
   let { children, color, name, "aria-label": ariaLabel, size, class: className, ...restProps }: ToolbarButtonProps = $props();
 
-  const theme = getTheme("toolbarButton");
+  const theme = $derived(getTheme("toolbarButton"));
 
   const buttonCls = $derived(
     toolbarButton({

package/dist/toolbar/ToolbarGroup.svelte

@@ -7,7 +7,7 @@
 
   let { children, spacing, padding, position = "middle", class: className, ...restProps }: ToolbarGroupProps = $props();
 
-  const theme = getTheme("toolbarGroup");
+  const theme = $derived(getTheme("toolbarGroup"));
 
   const groupCls = $derived(toolbarGroup({ spacing, padding, position, class: clsx(theme, className) }));
 

package/dist/tooltip/Tooltip.svelte

@@ -36,7 +36,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TooltipProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2000)
+[TooltipProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2001)
 ## Props
 @prop type = "dark"
 @prop color = undefined

package/dist/tooltip/Tooltip.svelte.d.ts

@@ -2,7 +2,7 @@ import type { TooltipProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TooltipProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2000)
+ * [TooltipProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2001)
  * ## Props
  * @prop type = "dark"
  * @prop color = undefined

package/dist/tour/Tour.svelte

@@ -23,7 +23,7 @@
     ...restProps
   }: TourProps = $props();
 
-  const theme = getTheme("tour");
+  const theme = $derived(getTheme("tour"));
 
   let highlightStyle = $state<string>("");
   let tooltipStyle = $state<string>("");

package/dist/types.d.ts

@@ -1685,6 +1685,7 @@ export interface TimelineItemProps extends TimelineItemVariants, HTMLLiAttribute
     date: string;
     svgClass?: string;
     liClass?: string;
+    defaultDivClass?: string;
     divClass?: string;
     timeClass?: string;
     h3Class?: string;

package/dist/typography/a/A.svelte

@@ -6,7 +6,7 @@
 
   let { children, color = "primary", asButton = false, onclick, href = "#", class: className, ...restProps }: AnchorProps = $props();
 
-  const theme = getTheme("anchor");
+  const theme = $derived(getTheme("anchor"));
 
   let linkCls = $derived(anchor({ color, class: clsx(theme, className) }));
 
@@ -43,7 +43,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AnchorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2004)
+[AnchorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2005)
 ## Props
 @prop children
 @prop color = "primary"

package/dist/typography/a/A.svelte.d.ts

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

package/dist/typography/blockquote/Blockquote.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, border, italic = true, bg, alignment = "left", size = "lg", ...restProps }: BlockquoteProps = $props();
 
-  const theme = getTheme("blockquote");
+  const theme = $derived(getTheme("blockquote"));
 
   let blockquoteCls = $derived(
     blockquote({
@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BlockquoteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2033)
+[BlockquoteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2034)
 ## Props
 @prop children
 @prop class: className

package/dist/typography/blockquote/Blockquote.svelte.d.ts

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

package/dist/typography/descriptionlist/DescriptionList.svelte

@@ -6,7 +6,7 @@
 
   let { children, tag, class: className, ...restProps }: DescriptionListProps = $props();
 
-  const theme = getTheme("descriptionList");
+  const theme = $derived(getTheme("descriptionList"));
 
   let descCls = $derived(
     descriptionList({
@@ -24,7 +24,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DescriptionListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2043)
+[DescriptionListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2044)
 ## Props
 @prop children
 @prop tag

package/dist/typography/descriptionlist/DescriptionList.svelte.d.ts

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

package/dist/typography/heading/Heading.svelte

@@ -6,7 +6,7 @@
 
   let { children, tag = "h1", class: className, ...restProps }: HeadingProps = $props();
 
-  const theme = getTheme("heading");
+  const theme = $derived(getTheme("heading"));
 
   let headingCls = $derived(heading({ tag, class: clsx(theme, className) }));
 </script>
@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2049)
+[HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2050)
 ## Props
 @prop children
 @prop tag = "h1"

package/dist/typography/heading/Heading.svelte.d.ts

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

package/dist/typography/hr/Hr.svelte

@@ -3,13 +3,13 @@
   import { hr } from "./theme";
   import type { HrProps } from "../../types";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { children, divClass, innerDivClass, class: className, classes, divProps = {}, hrProps = {}, ...restProps }: HrProps = $props();
 
-  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "Hr",
-    { divClass, innerDivClass },
+    untrack(() => ({ divClass, innerDivClass })),
     {
       divClass: "div",
       innerDivClass: "content"
@@ -23,7 +23,7 @@
     }
   );
 
-  const theme = getTheme("hr");
+  const theme = $derived(getTheme("hr"));
   const bg = $derived(classes?.bg ?? "bg-gray-200 dark:bg-gray-700");
 
   // for backward compatibility and ...restPorps will be removed and use only ..divProps and ...hrProps in future

package/dist/typography/img/Img.svelte

@@ -3,13 +3,13 @@
   import { img } from "./theme";
   import type { ImgProps } from "../../types";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { children, size, effect: imgEffect, align, caption, class: className, classes, figClass, captionClass, href, ...restProps }: ImgProps = $props();
 
-  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "Img",
-    { figClass, captionClass },
+    untrack(() => ({ figClass, captionClass })),
     {
       figClass: "figure",
       captionClass: "caption"
@@ -21,7 +21,7 @@
     caption: captionClass || classes?.caption
   });
 
-  const theme = getTheme("img");
+  const theme = $derived(getTheme("img"));
 
   let { base, figure, caption: figureCaption } = $derived(img({ size, effect: imgEffect, align }));
 
@@ -62,7 +62,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2080)
+[ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2081)
 ## Props
 @prop children
 @prop size

package/dist/typography/img/Img.svelte.d.ts

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

package/dist/typography/layout/Layout.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, ...restProps }: LayoutProps = $props();
 
-  const theme = getTheme("layout");
+  const theme = $derived(getTheme("layout"));
 
   let divCls = $derived(layout({ class: clsx(theme, className) }));
 </script>
@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2104)
+[LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2105)
 ## Props
 @prop children
 @prop class: className

package/dist/typography/layout/Layout.svelte.d.ts

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

package/dist/typography/list/Li.svelte

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

package/dist/typography/list/Li.svelte.d.ts

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

package/dist/typography/list/List.svelte

@@ -7,7 +7,7 @@
 
   let { children, tag = "ul", isContenteditable = false, position = "inside", ctxClass, class: className, ...restProps }: ListProps = $props();
 
-  const theme = getTheme("list");
+  const theme = $derived(getTheme("list"));
 
   let contextClass = $derived(ctxClass || "");
 
@@ -36,7 +36,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2109)
+[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2110)
 ## Props
 @prop children
 @prop tag = "ul"

package/dist/typography/list/List.svelte.d.ts

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

package/dist/typography/mark/Mark.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, ...restProps }: MarkProps = $props();
 
-  const theme = getTheme("mark");
+  const theme = $derived(getTheme("mark"));
 </script>
 
 <mark {...restProps} class={mark({ class: clsx(theme, className) })}>
@@ -17,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2123)
+[MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2124)
 ## Props
 @prop children
 @prop class: className

package/dist/typography/mark/Mark.svelte.d.ts

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

package/dist/typography/paragraph/P.svelte

@@ -19,7 +19,7 @@
     ...restProps
   }: ParagraphProps = $props();
 
-  const theme = getTheme("paragraph");
+  const theme = $derived(getTheme("paragraph"));
 
   let classP = $derived(paragraph({ height, size, weight, space, align, justify, italic, firstUpper, whitespace, class: clsx(theme, className) }));
 </script>
@@ -32,7 +32,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2128)
+[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2129)
 ## Props
 @prop children
 @prop class: className = "text-gray-900 dark:text-white"

package/dist/typography/paragraph/P.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ParagraphProps } from "../../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2128)
+ * [ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2129)
  * ## Props
  * @prop children
  * @prop class: className = "text-gray-900 dark:text-white"

package/dist/typography/secondary/Secondary.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, ...restProps }: SecondaryProps = $props();
 
-  const theme = getTheme("secondary");
+  const theme = $derived(getTheme("secondary"));
 </script>
 
 <small {...restProps} class={secondary({ class: clsx(theme, className) })}>
@@ -17,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2136)
+[SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2137)
 ## Props
 @prop children
 @prop class: className

package/dist/typography/secondary/Secondary.svelte.d.ts

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

package/dist/typography/span/Span.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, italic, underline, linethrough, uppercase, gradient, highlight, decoration, decorationColor, decorationThickness, ...restProps }: SpanProps = $props();
 
-  const theme = getTheme("span");
+  const theme = $derived(getTheme("span"));
 
   let classSpan = $derived(
     span({
@@ -34,7 +34,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SpanProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2141)
+[SpanProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2142)
 ## Props
 @prop children
 @prop class: className

package/dist/typography/span/Span.svelte.d.ts

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

package/dist/utils/Arrow.svelte

@@ -49,7 +49,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2185)
+[ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2186)
 ## Props
 @prop placement = "top"
 @prop cords

package/dist/utils/Arrow.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ArrowProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2185)
+ * [ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2186)
  * ## Props
  * @prop placement = "top"
  * @prop cords

package/dist/utils/Popper.svelte

@@ -263,7 +263,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2163)
+[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2164)
 ## Props
 @prop triggeredBy
 @prop triggerDelay = DEFAULT_TRIGGER_DELAY

package/dist/utils/Popper.svelte.d.ts

@@ -2,7 +2,7 @@ import type { PopperProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2163)
+ * [PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2164)
  * ## Props
  * @prop triggeredBy
  * @prop triggerDelay = DEFAULT_TRIGGER_DELAY

package/dist/video/Video.svelte

@@ -5,7 +5,7 @@
 
   let { children, type = "video/mp4", trackSrc, src, srclang = "en", label = "english_captions", class: classname, ...restProps }: VideoProps = $props();
 
-  const theme = getTheme("span");
+  const theme = $derived(getTheme("span"));
 </script>
 
 <video {...restProps} class={clsx(theme, classname)}>
@@ -21,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2150)
+[VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2151)
 ## Props
 @prop children
 @prop type = "video/mp4"

package/dist/video/Video.svelte.d.ts

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

package/dist/virtual-masonry/VirtualMasonry.svelte

@@ -19,7 +19,7 @@
     contained = false
   }: VirtualMasonryProps<T> = $props();
 
-  const theme = getTheme("virtualMasonry");
+  const theme = $derived(getTheme("virtualMasonry"));
 
   let container: HTMLDivElement | undefined;
   let containerWidth = $state(0);

package/dist/virtuallist/VirtualList.svelte

@@ -18,7 +18,7 @@
     contained = false
   }: VirtualListProps<T> = $props();
 
-  const theme = getTheme("virtualList");
+  const theme = $derived(getTheme("virtualList"));
 
   let container: HTMLDivElement | undefined;
   let scrollTop = $state(0);