flowbite-svelte 1.9.0 → 1.10.0

package/dist/typography/descriptionlist/index.d.ts

@@ -1,3 +1,2 @@
-import DescriptionList from "./DescriptionList.svelte";
-import { descriptionList } from "./theme";
-export { DescriptionList, descriptionList };
+export { default as DescriptionList } from "./DescriptionList.svelte";
+export { descriptionList, type DescriptionListTheme } from "./theme";

package/dist/typography/descriptionlist/index.js

@@ -1,3 +1,2 @@
-import DescriptionList from "./DescriptionList.svelte";
-import { descriptionList } from "./theme";
-export { DescriptionList, descriptionList };
+export { default as DescriptionList } from "./DescriptionList.svelte";
+export { descriptionList } from "./theme";

package/dist/typography/descriptionlist/theme.d.ts

@@ -16,3 +16,4 @@ export declare const descriptionList: import("tailwind-variants").TVReturnType<{
         dd: string;
     };
 }, undefined, undefined, unknown, unknown, undefined>>;
+export type DescriptionListTheme = string;

package/dist/typography/heading/Heading.svelte

@@ -2,13 +2,17 @@
   import clsx from "clsx";
   import { heading } from "./index";
   import type { HeadingProps } from "../../types";
+  import { cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { children, tag = "h1", class: className, ...restProps }: HeadingProps = $props();
 
-  let headingClass = $derived(heading({ tag, class: clsx(className) }));
+  const theme = getTheme("heading");
+
+  let headingCls = $derived(heading({ tag, class: clsx(className) }));
 </script>
 
-<svelte:element this={tag} {...restProps} class={headingClass}>
+<svelte:element this={tag} {...restProps} class={cn(headingCls, theme)}>
   {@render children()}
 </svelte:element>
 
@@ -16,7 +20,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1900)
+[HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1891)
 ## 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#L1900)
+ * [HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1891)
  * ## Props
  * @prop children
  * @prop tag = "h1"

package/dist/typography/heading/index.d.ts

@@ -1,3 +1,2 @@
-import Heading from "./Heading.svelte";
-import { heading } from "./theme";
-export { Heading, heading };
+export { default as Heading } from "./Heading.svelte";
+export { heading, type HeadingTheme } from "./theme";

package/dist/typography/heading/index.js

@@ -1,3 +1,2 @@
-import Heading from "./Heading.svelte";
-import { heading } from "./theme";
-export { Heading, heading };
+export { default as Heading } from "./Heading.svelte";
+export { heading } from "./theme";

package/dist/typography/heading/theme.d.ts

@@ -28,3 +28,4 @@ export declare const heading: import("tailwind-variants").TVReturnType<{
         h6: string;
     };
 }, undefined, "font-bold text-gray-900 dark:text-white", unknown, unknown, undefined>>;
+export type HeadingTheme = string;

package/dist/typography/hr/Hr.svelte

@@ -1,29 +1,33 @@
 <script lang="ts">
   import clsx from "clsx";
-  import { hr } from "./index";
+  import { hr, type HrTheme } from "./index";
   import type { HrProps } from "../../types";
+  import { cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { children, divClass, class: className, innerDivClass, ...restProps }: HrProps = $props();
 
+  const theme = getTheme("hr");
+
   let { base, container, content } = $derived(hr({ withChildren: !!children }));
 </script>
 
 {#if children}
-  <div {...restProps} class={container({ class: divClass })}>
-    <hr class={base({ class: clsx(className) })} />
-    <div class={content({ class: innerDivClass })}>
+  <div {...restProps} class={cn(container({ class: divClass }), (theme as HrTheme)?.container)}>
+    <hr class={cn(base({ class: clsx(className) }), (theme as HrTheme)?.base)} />
+    <div class={cn(content({ class: innerDivClass }), (theme as HrTheme)?.content)}>
       {@render children()}
     </div>
   </div>
 {:else}
-  <hr class={base({ class: clsx(className) })} {...restProps} />
+  <hr class={cn(base({ class: clsx(className) }), (theme as HrTheme)?.base)} {...restProps} />
 {/if}
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[HrProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1906)
+[HrProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1897)
 ## Props
 @prop children
 @prop divClass

package/dist/typography/hr/Hr.svelte.d.ts

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

package/dist/typography/hr/index.d.ts

@@ -1,3 +1,2 @@
-import Hr from "./Hr.svelte";
-import { hr } from "./theme";
-export { Hr, hr };
+export { default as Hr } from "./Hr.svelte";
+export { hr, type HrTheme } from "./theme";

package/dist/typography/hr/index.js

@@ -1,3 +1,2 @@
-import Hr from "./Hr.svelte";
-import { hr } from "./theme";
-export { Hr, hr };
+export { default as Hr } from "./Hr.svelte";
+export { hr } from "./theme";

package/dist/typography/hr/theme.d.ts

@@ -32,3 +32,5 @@ export declare const hr: import("tailwind-variants").TVReturnType<{
     container: string;
     content: string;
 }, undefined, unknown, unknown, undefined>>;
+export type HrSlots = keyof typeof hr.slots;
+export type HrTheme = Partial<Record<HrSlots, string>>;

package/dist/typography/img/EnhancedImg.svelte

@@ -1,23 +1,27 @@
 <script lang="ts">
   import clsx from "clsx";
-  import { img } from ".";
+  import { img, type ImgTheme } from ".";
   import type { EnhandedImgProps } from "../../types";
+  import { cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { src, href, caption, size, figClass, class: imgClass, captionClass, ...restProps }: EnhandedImgProps = $props();
 
+  const theme = getTheme("enhancedImg");
+
   let { base, figure, figureCaption } = $derived(img({ size }));
 </script>
 
 {#snippet imageSlot()}
   {#if caption}
-    <figure class={figure({ class: figClass })}>
-      <enhanced:img {src} {...restProps} class={base({ class: clsx(imgClass) })} />
-      <figcaption class={figureCaption({ class: captionClass })}>
+    <figure class={cn(figure({ class: figClass }), (theme as ImgTheme)?.figure)}>
+      <enhanced:img {src} {...restProps} class={cn(base({ class: clsx(imgClass) }), (theme as ImgTheme)?.base)} />
+      <figcaption class={cn(figureCaption({ class: captionClass }), (theme as ImgTheme)?.figureCaption)}>
         {@html caption}
       </figcaption>
     </figure>
   {:else}
-    <enhanced:img {src} {...restProps} class={base({ class: clsx(imgClass) })} />
+    <enhanced:img {src} {...restProps} class={cn(base({ class: clsx(imgClass) }), (theme as ImgTheme)?.base)} />
   {/if}
 {/snippet}
 
@@ -33,7 +37,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1926)
+[EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1929)
 ## Props
 @prop src
 @prop href

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

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

package/dist/typography/img/Img.svelte

@@ -1,23 +1,27 @@
 <script lang="ts">
   import clsx from "clsx";
-  import { img } from "./index";
+  import { img, type ImgTheme } from ".";
   import type { ImgProps } from "../../types";
+  import { cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { size = "none", effect = "none", caption, class: imgClass, figClass, captionClass, href, ...restProps }: ImgProps = $props();
 
+  const theme = getTheme("img");
+
   let { base, figure, figureCaption } = $derived(img({ size, effect }));
 </script>
 
 {#snippet imageSlot()}
   {#if caption}
-    <figure class={figure({ class: figClass })}>
-      <img {...restProps} class={base({ class: clsx(imgClass) })} />
-      <figcaption class={figureCaption({ class: captionClass })}>
+    <figure class={cn(figure({ class: figClass }), (theme as ImgTheme)?.figure)}>
+      <img {...restProps} class={cn(base({ class: clsx(imgClass) }), (theme as ImgTheme)?.base)} />
+      <figcaption class={cn(figureCaption({ class: captionClass }), (theme as ImgTheme)?.figureCaption)}>
         {@html caption}
       </figcaption>
     </figure>
   {:else}
-    <img {...restProps} class={base({ class: clsx(imgClass) })} />
+    <img {...restProps} class={cn(base({ class: clsx(imgClass) }), (theme as ImgTheme)?.base)} />
   {/if}
 {/snippet}
 
@@ -33,7 +37,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1917)
+[ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1920)
 ## Props
 @prop size = "none"
 @prop effect = "none"

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#L1917)
+ * [ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1920)
  * ## Props
  * @prop size = "none"
  * @prop effect = "none"

package/dist/typography/img/index.d.ts

@@ -1,4 +1,3 @@
-import Img from "./Img.svelte";
-import EnhancedImg from "./EnhancedImg.svelte";
-import { img } from "./theme";
-export { Img, img, EnhancedImg };
+export { default as Img } from "./Img.svelte";
+export { default as EnhancedImg } from "./EnhancedImg.svelte";
+export { img, type ImgTheme } from "./theme";

package/dist/typography/img/index.js

@@ -1,4 +1,3 @@
-import Img from "./Img.svelte";
-import EnhancedImg from "./EnhancedImg.svelte";
-import { img } from "./theme";
-export { Img, img, EnhancedImg };
+export { default as Img } from "./Img.svelte";
+export { default as EnhancedImg } from "./EnhancedImg.svelte";
+export { img } from "./theme";

package/dist/typography/img/theme.d.ts

@@ -187,3 +187,5 @@ export declare const img: import("tailwind-variants").TVReturnType<{
     figure: string;
     figureCaption: string;
 }, undefined, unknown, unknown, undefined>>;
+export type ImgSlots = keyof typeof img.slots;
+export type ImgTheme = Partial<Record<ImgSlots, string>>;

package/dist/typography/layout/Layout.svelte

@@ -2,13 +2,17 @@
   import clsx from "clsx";
   import { layout } from "./index";
   import type { LayoutProps } from "../../types";
+  import { cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { children, class: className, ...restProps }: LayoutProps = $props();
 
+  const theme = getTheme("layout");
+
   let classDiv = $derived(layout({ class: clsx(className) }));
 </script>
 
-<div {...restProps} class={classDiv}>
+<div {...restProps} class={cn(classDiv, theme)}>
   {@render children()}
 </div>
 
@@ -16,7 +20,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1938)
+[LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1942)
 ## 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#L1938)
+ * [LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1942)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/typography/layout/index.d.ts

@@ -1,3 +1,2 @@
-import Layout from "./Layout.svelte";
-import { layout } from "./theme";
-export { Layout, layout };
+export { default as Layout } from "./Layout.svelte";
+export { layout, type LayoutTheme } from "./theme";

package/dist/typography/layout/index.js

@@ -1,3 +1,2 @@
-import Layout from "./Layout.svelte";
-import { layout } from "./theme";
-export { Layout, layout };
+export { default as Layout } from "./Layout.svelte";
+export { layout } from "./theme";

package/dist/typography/layout/theme.d.ts

@@ -1 +1,2 @@
 export declare const layout: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "grid grid-cols-1 sm:grid-cols-2", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "grid grid-cols-1 sm:grid-cols-2", unknown, unknown, undefined>>;
+export type LayoutTheme = string;

package/dist/typography/list/Li.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
   import { getContext } from "svelte";
   import type { LiProps } from "../../types";
   import clsx from "clsx";
+  import { cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { children, icon, class: className, ...restProps }: LiProps = $props();
 
+  const theme = getTheme("li");
+
   const getCtxClass = getContext<() => string>("ctxClass");
 
-  let liCls = $derived(twMerge(getCtxClass(), icon && "flex items-center", clsx(className)));
+  let liCls = $derived(cn(getCtxClass(), icon && "flex items-center", clsx(className), theme));
 </script>
 
 <li {...restProps} class={liCls}>
@@ -19,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1951)
+[LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1955)
 ## 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#L1951)
+ * [LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1955)
  * ## Props
  * @prop children
  * @prop icon

package/dist/typography/list/List.svelte

@@ -3,9 +3,13 @@
   import { list } from "./index";
   import type { ListProps } from "../../types";
   import clsx from "clsx";
+  import { cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { children, tag = "ul", isContenteditable = false, position = "inside", ctxClass, class: className, ...restProps }: ListProps = $props();
 
+  const theme = getTheme("list");
+
   let contextClass = $state(ctxClass || "");
 
   setContext("ctxClass", () => contextClass);
@@ -17,7 +21,7 @@
   let classList = $derived(list({ position, tag, class: clsx(className) }));
 </script>
 
-<svelte:element this={tag} {...restProps} class={classList} contenteditable={isContenteditable}>
+<svelte:element this={tag} {...restProps} class={cn(classList, theme)} contenteditable={isContenteditable}>
   {@render children()}
 </svelte:element>
 
@@ -25,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1943)
+[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1947)
 ## 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#L1943)
+ * [ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1947)
  * ## Props
  * @prop children
  * @prop tag = "ul"

package/dist/typography/list/index.d.ts

@@ -1,4 +1,3 @@
-import List from "./List.svelte";
-import Li from "./Li.svelte";
-import { list } from "./theme";
-export { List, Li, list };
+export { default as List } from "./List.svelte";
+export { default as Li } from "./Li.svelte";
+export { list, type ListTheme } from "./theme";

package/dist/typography/list/index.js

@@ -1,4 +1,3 @@
-import List from "./List.svelte";
-import Li from "./Li.svelte";
-import { list } from "./theme";
-export { List, Li, list };
+export { default as List } from "./List.svelte";
+export { default as Li } from "./Li.svelte";
+export { list } from "./theme";

package/dist/typography/list/theme.d.ts

@@ -31,3 +31,4 @@ export declare const list: import("tailwind-variants").TVReturnType<{
         outside: string;
     };
 }, undefined, "", unknown, unknown, undefined>>;
+export type ListTheme = string;

package/dist/typography/mark/Mark.svelte

@@ -2,11 +2,15 @@
   import clsx from "clsx";
   import { mark } from "./index";
   import type { MarkProps } from "../../types";
+  import { cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { children, class: className, ...restProps }: MarkProps = $props();
+
+  const theme = getTheme("mark");
 </script>
 
-<mark {...restProps} class={mark({ class: clsx(className) })}>
+<mark {...restProps} class={cn(mark({ class: clsx(className) }), theme)}>
   {@render children()}
 </mark>
 
@@ -14,7 +18,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1957)
+[MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1961)
 ## 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#L1957)
+ * [MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1961)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/typography/mark/index.d.ts

@@ -1,3 +1,2 @@
-import Mark from "./Mark.svelte";
-import { mark } from "./theme";
-export { Mark, mark };
+export { default as Mark } from "./Mark.svelte";
+export { mark, type MarkTheme } from "./theme";

package/dist/typography/mark/index.js

@@ -1,3 +1,2 @@
-import Mark from "./Mark.svelte";
-import { mark } from "./theme";
-export { Mark, mark };
+export { default as Mark } from "./Mark.svelte";
+export { mark } from "./theme";

package/dist/typography/mark/theme.d.ts

@@ -1 +1,2 @@
 export declare const mark: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-white dark:bg-blue-500 bg-blue-600 px-2 rounded-sm", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-white dark:bg-blue-500 bg-blue-600 px-2 rounded-sm", unknown, unknown, undefined>>;
+export type MarkTheme = string;

package/dist/typography/paragraph/P.svelte

@@ -2,13 +2,17 @@
   import clsx from "clsx";
   import { paragraph } from "./index";
   import type { ParagraphProps } from "../../types";
+  import { cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { children, class: className = "text-gray-900 dark:text-white", height = "normal", align = "left", justify = false, italic, firstUpper = false, whitespace = "normal", size = "base", space = "normal", weight = "normal", ...restProps }: ParagraphProps = $props();
 
+  const theme = getTheme("p");
+
   let classP = $derived(paragraph({ height, size, weight, space, align, justify, italic, firstUpper, whitespace, class: clsx(className) }));
 </script>
 
-<p {...restProps} class={classP}>
+<p {...restProps} class={cn(classP, theme)}>
   {@render children()}
 </p>
 
@@ -16,7 +20,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1962)
+[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1966)
 ## 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#L1962)
+ * [ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1966)
  * ## Props
  * @prop children
  * @prop class: className = "text-gray-900 dark:text-white"

package/dist/typography/paragraph/index.d.ts

@@ -1,3 +1,2 @@
-import P from "./P.svelte";
-import { paragraph } from "./theme";
-export { P, paragraph };
+export { default as P } from "./P.svelte";
+export { paragraph, type ParagraphTheme } from "./theme";

package/dist/typography/paragraph/index.js

@@ -1,3 +1,2 @@
-import P from "./P.svelte";
-import { paragraph } from "./theme";
-export { P, paragraph };
+export { default as P } from "./P.svelte";
+export { paragraph } from "./theme";

package/dist/typography/paragraph/theme.d.ts

@@ -223,3 +223,4 @@ export declare const paragraph: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "text-gray-900 dark:text-white", unknown, unknown, undefined>>;
+export type ParagraphTheme = string;

package/dist/typography/secondary/Secondary.svelte

@@ -2,11 +2,15 @@
   import clsx from "clsx";
   import { secondary } from "./index";
   import type { SecondaryProps } from "../../types";
+  import { cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { children, class: className, ...restProps }: SecondaryProps = $props();
+
+  const theme = getTheme("secondary");
 </script>
 
-<small {...restProps} class={secondary({ class: clsx(className) })}>
+<small {...restProps} class={cn(secondary({ class: clsx(className) }), theme)}>
   {@render children()}
 </small>
 
@@ -14,7 +18,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1970)
+[SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1974)
 ## 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#L1970)
+ * [SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1974)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/typography/secondary/index.d.ts

@@ -1,3 +1,2 @@
-import Secondary from "./Secondary.svelte";
-import { secondary } from "./theme";
-export { Secondary, secondary };
+export { default as Secondary } from "./Secondary.svelte";
+export { secondary, type SecondaryTheme } from "./theme";

package/dist/typography/secondary/index.js

@@ -1,3 +1,2 @@
-import Secondary from "./Secondary.svelte";
-import { secondary } from "./theme";
-export { Secondary, secondary };
+export { default as Secondary } from "./Secondary.svelte";
+export { secondary } from "./theme";

package/dist/typography/secondary/theme.d.ts

@@ -1 +1,2 @@
 export declare const secondary: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-gray-500 dark:text-gray-400 font-semibold", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-gray-500 dark:text-gray-400 font-semibold", unknown, unknown, undefined>>;
+export type SecondaryTheme = string;