flowbite-svelte 1.9.0 → 1.10.0

package/dist/progress/Progressbar.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
+  import { cn } from "..";
   import type { ProgressbarProps } from "../types";
   import clsx from "clsx";
   import { cubicOut } from "svelte/easing";
   import { Tween } from "svelte/motion";
-  import { progressbar } from ".";
+  import { progressbar, type ProgressbarTheme } from ".";
+  import { getTheme } from "../theme/themeUtils";
 
   let { progress = "45", precision = 0, tweenDuration = 400, animate = false, size = "h-2.5", labelInside = false, labelOutside = "", easing = cubicOut, color = "primary", class: className, classes, ...restProps }: ProgressbarProps = $props();
 
+  const theme = getTheme("progressbar");
+
   let _progress = new Tween(0, {
     duration: animate ? tweenDuration : 0,
     easing
@@ -24,18 +28,18 @@
 </script>
 
 {#if labelOutside}
-  <div {...restProps} class={outsideDiv({ class: clsx(classes?.outsideDiv) })}>
-    <span class={oustsideSpan({ class: clsx(classes?.oustsideSpan) })}>{labelOutside}</span>
-    <span class={outsideProgress({ class: clsx(classes?.outsideProgress) })}>{progress}%</span>
+  <div {...restProps} class={cn(outsideDiv({ class: clsx(classes?.outsideDiv) }), (theme as ProgressbarTheme)?.outsideDiv)}>
+    <span class={cn(oustsideSpan({ class: clsx(classes?.oustsideSpan) }), (theme as ProgressbarTheme)?.oustsideSpan)}>{labelOutside}</span>
+    <span class={cn(outsideProgress({ class: clsx(classes?.outsideProgress) }), (theme as ProgressbarTheme)?.outsideProgress)}>{progress}%</span>
   </div>
 {/if}
-<div {...restProps} class={base({ class: clsx(size, classes?.base, className) })}>
+<div {...restProps} class={cn(base({ class: clsx(size, classes?.base, className) }), (theme as ProgressbarTheme)?.base)}>
   {#if labelInside}
-    <div class={labelInsideDiv({ class: clsx(classes?.labelInsideDiv, size) })} style="width: {_progress.current}%">
+    <div class={cn(labelInsideDiv({ class: clsx(classes?.labelInsideDiv, size) }), (theme as ProgressbarTheme)?.labelInsideDiv)} style="width: {_progress.current}%">
       {_progress.current.toFixed(precision)}%
     </div>
   {:else}
-    <div class={insideDiv({ class: clsx(classes?.labelInsideDiv, size) })} style="width: {_progress.current}%"></div>
+    <div class={cn(insideDiv({ class: clsx(classes?.labelInsideDiv, size) }), (theme as ProgressbarTheme)?.insideDiv)} style="width: {_progress.current}%"></div>
   {/if}
 </div>
 
@@ -43,7 +47,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1218)
+[ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1211)
 ## Props
 @prop progress = "45"
 @prop precision = 0

package/dist/progress/Progressbar.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ProgressbarProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1218)
+ * [ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1211)
  * ## Props
  * @prop progress = "45"
  * @prop precision = 0

package/dist/progress/Progressradial.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
-  import { progressradial } from "./theme";
+  import { cn } from "..";
+  import { progressradial, type ProgressradialTheme } from ".";
   import type { ProgressradialProps } from "../types";
   import clsx from "clsx";
   import { cubicOut } from "svelte/easing";
   import { Tween } from "svelte/motion";
+  import { getTheme } from "../theme/themeUtils";
 
   let { progress = 45, radius = 42, startingPosition = "top", precision = 0, tweenDuration = 400, animate = false, size = "h-24 w-24", thickness = 4, labelInside = false, labelOutside = "", easing = cubicOut, color = "primary", class: className, classes, ...restProps }: ProgressradialProps = $props();
 
+  const theme = getTheme("progressradial");
+
   const _progress = new Tween(0, {
     duration: animate ? tweenDuration : 0,
     easing
@@ -35,23 +39,23 @@
 
 <div class="flex flex-col items-center">
   {#if labelOutside}
-    <div class={outsideDiv({ class: clsx(classes?.outsideDiv) })}>
-      <span class={outsideSpan({ class: clsx(classes?.outsideSpan) })}>{labelOutside}</span>
-      <span class={outsideProgress({ class: clsx(classes?.outsideProgress) })}>{formattedProgress}%</span>
+    <div class={cn(outsideDiv({ class: clsx(classes?.outsideDiv) }), (theme as ProgressradialTheme)?.outsideDiv)}>
+      <span class={cn(outsideSpan({ class: clsx(classes?.outsideSpan) }), (theme as ProgressradialTheme)?.outsideSpan)}>{labelOutside}</span>
+      <span class={cn(outsideProgress({ class: clsx(classes?.outsideProgress) }), (theme as ProgressradialTheme)?.outsideProgress)}>{formattedProgress}%</span>
     </div>
   {/if}
 
-  <div {...restProps} class={base({ class: clsx(size, classes?.base, className) })}>
+  <div {...restProps} class={cn(base({ class: clsx(size, classes?.base, className) }), (theme as ProgressradialTheme)?.base)}>
     <svg viewBox="0 0 100 100" class="h-full w-full" style="transform: rotate({rotationAngle}deg)">
       <!-- Background circle -->
-      <circle cx="50" cy="50" r={radius} class={circleBackground({ class: clsx(classes?.circleBackground) })} fill="none" stroke-width={thickness} />
+      <circle cx="50" cy="50" r={radius} class={cn(circleBackground({ class: clsx(classes?.circleBackground) }), (theme as ProgressradialTheme)?.circleBackground)} fill="none" stroke-width={thickness} />
 
       <!-- Foreground circle (progress indicator) -->
-      <circle cx="50" cy="50" r={radius} class={circleForeground({ class: clsx(classes?.circleForeground) })} fill="none" stroke-width={thickness} stroke-dasharray={circumference} stroke-dashoffset={strokeDashoffset} stroke-linecap="round" />
+      <circle cx="50" cy="50" r={radius} class={cn(circleForeground({ class: clsx(classes?.circleForeground) }), (theme as ProgressradialTheme)?.circleForeground)} fill="none" stroke-width={thickness} stroke-dasharray={circumference} stroke-dashoffset={strokeDashoffset} stroke-linecap="round" />
     </svg>
 
     {#if labelInside}
-      <div class={labelInsideDiv({ class: clsx(classes?.labelInsideDiv) })}>
+      <div class={cn(labelInsideDiv({ class: clsx(classes?.labelInsideDiv) }), (theme as ProgressradialTheme)?.labelInsideDiv)}>
         {formattedProgress}%
       </div>
     {/if}
@@ -62,7 +66,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1229)
+[ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1222)
 ## Props
 @prop progress = 45
 @prop radius = 42

package/dist/progress/Progressradial.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ProgressradialProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1229)
+ * [ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1222)
  * ## Props
  * @prop progress = 45
  * @prop radius = 42

package/dist/progress/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Progressbar } from "./Progressbar.svelte";
 export { default as Progressradial } from "./Progressradial.svelte";
-export { progressbar } from "./theme";
+export { progressbar, type ProgressbarTheme, progressradial, type ProgressradialTheme } from "./theme";

package/dist/progress/index.js

@@ -1,3 +1,3 @@
 export { default as Progressbar } from "./Progressbar.svelte";
 export { default as Progressradial } from "./Progressradial.svelte";
-export { progressbar } from "./theme";
+export { progressbar, progressradial } from "./theme";

package/dist/progress/theme.d.ts

@@ -289,6 +289,8 @@ export declare const progressbar: import("tailwind-variants").TVReturnType<{
     oustsideSpan: string;
     outsideProgress: string;
 }, undefined, unknown, unknown, undefined>>;
+export type ProgressbarSlots = keyof typeof progressbar.slots;
+export type ProgressbarTheme = Partial<Record<ProgressbarSlots, string>>;
 export type ProgressradialClasses = Partial<{
     [K in keyof (typeof progressradial)["slots"]]: ClassValue;
 }>;
@@ -578,3 +580,5 @@ export declare const progressradial: import("tailwind-variants").TVReturnType<{
     outsideSpan: string;
     outsideProgress: string;
 }, undefined, unknown, unknown, undefined>>;
+export type ProgressradialSlots = keyof typeof progressradial.slots;
+export type ProgressradialTheme = Partial<Record<ProgressradialSlots, string>>;

package/dist/rating/AdvancedRating.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
-  import { advancedrating } from ".";
+  import { advancedRating, type AdvancedRatingTheme } from ".";
   import type { AdvancedRatingProps } from "../types";
+  import { cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { rating, globalText, ratings, divClass, spanClass, div2Class, div3Class, span2Class, unit }: AdvancedRatingProps = $props();
 
-  const { base, span, div2, div3, span2 } = $derived(advancedrating());
+  const theme = getTheme("advancedRating");
+
+  const { base, span, div2, div3, span2 } = $derived(advancedRating());
 </script>
 
 {#if rating}
@@ -16,12 +19,12 @@
   {@render globalText()}
 {/if}
 {#each ratings as { label, rating }}
-  <div class={twMerge(base(), clsx(divClass))}>
-    <span class={twMerge(span(), clsx(spanClass))}>{label}</span>
-    <div class={twMerge(div2(), clsx(div2Class))}>
-      <div class={twMerge(div3(), clsx(div3Class))} style="width: {rating}%"></div>
+  <div class={cn(base(), clsx(divClass), (theme as AdvancedRatingTheme)?.base)}>
+    <span class={cn(span(), clsx(spanClass), (theme as AdvancedRatingTheme)?.span)}>{label}</span>
+    <div class={cn(div2(), clsx(div2Class), (theme as AdvancedRatingTheme)?.div2)}>
+      <div class={cn(div3(), clsx(div3Class), (theme as AdvancedRatingTheme)?.div3)} style="width: {rating}%"></div>
     </div>
-    <span class={twMerge(span2(), clsx(span2Class))}>{rating}{unit}</span>
+    <span class={cn(span2(), clsx(span2Class), (theme as AdvancedRatingTheme)?.span2)}>{rating}{unit}</span>
   </div>
 {/each}
 
@@ -29,7 +32,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1246)
+[AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1239)
 ## Props
 @prop rating
 @prop globalText

package/dist/rating/AdvancedRating.svelte.d.ts

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

package/dist/rating/CustomIcon.svelte

@@ -29,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1332)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1325)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#00ff00"

package/dist/rating/CustomIcon.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RatingIconProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1332)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1325)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#00ff00"

package/dist/rating/Heart.svelte

@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1332)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1325)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#ff0000"

package/dist/rating/Heart.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RatingIconProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1332)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1325)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#ff0000"

package/dist/rating/Rating.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
   import clsx from "clsx";
   import Star from "./Star.svelte";
-  import { rating as ratingVariants } from ".";
+  import { rating as ratingVariants, type RatingTheme } from ".";
   import type { RatingProps } from "../types";
+  import { cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, text, class: className, size = 24, total = 5, rating = 4, icon: Icon = Star, count = false, pClass, ...restProps }: RatingProps = $props();
 
+  const theme = getTheme("rating");
+
   const { base, p } = $derived(ratingVariants());
   const ratingGroupId = crypto.randomUUID();
   let fullStars: number = Math.floor(rating);
@@ -14,10 +18,10 @@
   let grayStars: number = total - (fullStars + Math.ceil(rateDiffence));
 </script>
 
-<div {...restProps} class={base({ class: clsx(className) })}>
+<div {...restProps} class={cn(base({ class: clsx(className) }), (theme as RatingTheme)?.base)}>
   {#if count && children}
     <Icon fillPercent={100} {size} iconIndex={0} groupId={ratingGroupId} />
-    <p class={p({ class: clsx(pClass) })}>{rating}</p>
+    <p class={cn(p({ class: clsx(pClass) }), (theme as RatingTheme)?.p)}>{rating}</p>
     {@render children()}
   {:else}
     <!-- eslint-disable @typescript-eslint/no-unused-vars-->
@@ -41,7 +45,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1258)
+[RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1251)
 ## Props
 @prop children
 @prop text

package/dist/rating/Rating.svelte.d.ts

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

package/dist/rating/RatingComment.svelte

@@ -63,7 +63,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingCommentProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1269)
+[RatingCommentProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1262)
 ## Props
 @prop children
 @prop evaluation

package/dist/rating/RatingComment.svelte.d.ts

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

package/dist/rating/Review.svelte

@@ -1,24 +1,27 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
-  import { review as reviewVariants } from ".";
+  import { review as reviewVariants, type ReviewTheme } from ".";
   import type { ReviewProps } from "../types";
+  import { cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, address, item1, item2, item3, review, articleClass, divClass, div2Class, div3Class, imgClass, ulClass, liClass }: ReviewProps = $props();
 
+  const theme = getTheme("review");
+
   const { article, div, div2, div3, img, ul, li } = $derived(reviewVariants());
 </script>
 
 {#if review}
-  <article class={twMerge(article(), clsx(articleClass))}>
+  <article class={cn(article(), clsx(articleClass), (theme as ReviewTheme)?.article)}>
     <div>
-      <div class={twMerge(div(), clsx(divClass))}>
-        <img class={twMerge(img(), clsx(imgClass))} src={review.imgSrc} alt={review.imgAlt} />
-        <div class={twMerge(div2(), clsx(div2Class))}>
+      <div class={cn(div(), clsx(divClass), (theme as ReviewTheme)?.div)}>
+        <img class={cn(img(), clsx(imgClass), (theme as ReviewTheme)?.img)} src={review.imgSrc} alt={review.imgAlt} />
+        <div class={cn(div2(), clsx(div2Class), (theme as ReviewTheme)?.div2)}>
           <p>{review.name}</p>
           {#if review.address}
             {#if address}
-              <div class={twMerge(div3(), clsx(div3Class))}>
+              <div class={cn(div3(), clsx(div3Class), (theme as ReviewTheme)?.div3)}>
                 {@render address()}
               </div>
             {/if}
@@ -26,9 +29,9 @@
         </div>
       </div>
       {#if review.item1 || review.item2 || review.item3}
-        <ul class={twMerge(ul(), clsx(ulClass))}>
+        <ul class={cn(ul(), clsx(ulClass), (theme as ReviewTheme)?.ul)}>
           {#if review.item1}
-            <li class={twMerge(twMerge(li(), clsx(liClass)))}>
+            <li class={cn(li(), clsx(liClass), (theme as ReviewTheme)?.li)}>
               {#if item1}
                 {@render item1()}
               {/if}
@@ -42,7 +45,7 @@
             </li>
           {/if}
           {#if review.item3}
-            <li class={twMerge(clsx(liClass))}>
+            <li class={clsx(liClass)}>
               {#if item3}
                 {@render item3()}
               {/if}
@@ -79,7 +82,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ReviewProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1305)
+[ReviewProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1298)
 ## Props
 @prop children
 @prop address

package/dist/rating/Review.svelte.d.ts

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

package/dist/rating/ScoreRating.svelte

@@ -1,26 +1,30 @@
 <script lang="ts">
-  import { scorerating } from ".";
+  import { scoreRating, type ScoreRatingTheme } from ".";
   import type { ScoreRatingProps } from "../types";
+  import { cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { ratings, ratings2, headerLabel }: ScoreRatingProps = $props();
 
-  const { desc1, desc2, desc3span, desc3p, link, bar } = $derived(scorerating());
+  const theme = getTheme("scoreRating");
+
+  const { desc1, desc2, desc3span, desc3p, link, bar } = $derived(scoreRating());
 </script>
 
 <div class="mb-5 flex items-center">
   {#if headerLabel}
     {#if headerLabel.desc1}
-      <p class={desc1()}>{headerLabel.desc1}</p>
+      <p class={cn(desc1(), (theme as ScoreRatingTheme)?.desc1)}>{headerLabel.desc1}</p>
     {/if}
     {#if headerLabel.desc2}
-      <p class={desc2()}>{headerLabel.desc2}</p>
+      <p class={cn(desc2(), (theme as ScoreRatingTheme)?.desc2)}>{headerLabel.desc2}</p>
     {/if}
     {#if headerLabel.desc3}
-      <span class={desc3span()}></span>
-      <p class={desc3p()}>{headerLabel.desc3}</p>
+      <span class={cn(desc3span(), (theme as ScoreRatingTheme)?.desc3span)}></span>
+      <p class={cn(desc3p(), (theme as ScoreRatingTheme)?.desc3p)}>{headerLabel.desc3}</p>
     {/if}
     {#if headerLabel.link}
-      <a href={headerLabel.link.url} class={link()}>{headerLabel.link.label}</a>
+      <a href={headerLabel.link.url} class={cn(link(), (theme as ScoreRatingTheme)?.link)}>{headerLabel.link.label}</a>
     {/if}
   {/if}
 </div>
@@ -34,7 +38,7 @@
           </dt>
           <dd class="mb-3 flex items-center">
             <div class="me-2 h-2.5 w-full rounded-sm bg-gray-200 dark:bg-gray-700">
-              <div class={bar()} style="width: {rating * 10}%"></div>
+              <div class={cn(bar(), (theme as ScoreRatingTheme)?.bar)} style="width: {rating * 10}%"></div>
             </div>
             <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
           </dd>
@@ -51,7 +55,7 @@
           </dt>
           <dd class="mb-3 flex items-center">
             <div class="me-2 h-2.5 w-full rounded-sm bg-gray-200 dark:bg-gray-700">
-              <div class={bar()} style="width: {rating * 10}%"></div>
+              <div class={cn(bar(), (theme as ScoreRatingTheme)?.bar)} style="width: {rating * 10}%"></div>
             </div>
             <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
           </dd>
@@ -65,7 +69,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ScoreRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1321)
+[ScoreRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1314)
 ## Props
 @prop ratings
 @prop ratings2

package/dist/rating/ScoreRating.svelte.d.ts

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

package/dist/rating/Star.svelte

@@ -35,7 +35,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1332)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1325)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#F5CA14"

package/dist/rating/Star.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RatingIconProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1332)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1325)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#F5CA14"

package/dist/rating/Thumbup.svelte

@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1332)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1325)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#00b500"

package/dist/rating/Thumbup.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RatingIconProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1332)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1325)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#00b500"

package/dist/rating/index.d.ts

@@ -1,11 +1,10 @@
-import AdvancedRating from "./AdvancedRating.svelte";
-import Heart from "./Heart.svelte";
-import Rating from "./Rating.svelte";
-import RatingComment from "./RatingComment.svelte";
-import Review from "./Review.svelte";
-import ScoreRating from "./ScoreRating.svelte";
-import Star from "./Star.svelte";
-import Thumbup from "./Thumbup.svelte";
-import CustomIcon from "./CustomIcon.svelte";
-import { advancedrating, rating, review, scorerating } from "./theme";
-export { AdvancedRating, advancedrating, Heart, Rating, rating, RatingComment, Review, review, ScoreRating, scorerating, Star, Thumbup, CustomIcon };
+export { default as AdvancedRating } from "./AdvancedRating.svelte";
+export { default as Heart } from "./Heart.svelte";
+export { default as Rating } from "./Rating.svelte";
+export { default as RatingComment } from "./RatingComment.svelte";
+export { default as Review } from "./Review.svelte";
+export { default as ScoreRating } from "./ScoreRating.svelte";
+export { default as Star } from "./Star.svelte";
+export { default as Thumbup } from "./Thumbup.svelte";
+export { default as CustomIcon } from "./CustomIcon.svelte";
+export { advancedRating, rating, review, scoreRating, type AdvancedRatingTheme, type RatingTheme, type ReviewTheme, type ScoreRatingTheme } from "./theme";

package/dist/rating/index.js

@@ -1,11 +1,10 @@
-import AdvancedRating from "./AdvancedRating.svelte";
-import Heart from "./Heart.svelte";
-import Rating from "./Rating.svelte";
-import RatingComment from "./RatingComment.svelte";
-import Review from "./Review.svelte";
-import ScoreRating from "./ScoreRating.svelte";
-import Star from "./Star.svelte";
-import Thumbup from "./Thumbup.svelte";
-import CustomIcon from "./CustomIcon.svelte";
-import { advancedrating, rating, review, scorerating } from "./theme";
-export { AdvancedRating, advancedrating, Heart, Rating, rating, RatingComment, Review, review, ScoreRating, scorerating, Star, Thumbup, CustomIcon };
+export { default as AdvancedRating } from "./AdvancedRating.svelte";
+export { default as Heart } from "./Heart.svelte";
+export { default as Rating } from "./Rating.svelte";
+export { default as RatingComment } from "./RatingComment.svelte";
+export { default as Review } from "./Review.svelte";
+export { default as ScoreRating } from "./ScoreRating.svelte";
+export { default as Star } from "./Star.svelte";
+export { default as Thumbup } from "./Thumbup.svelte";
+export { default as CustomIcon } from "./CustomIcon.svelte";
+export { advancedRating, rating, review, scoreRating } from "./theme";