flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/rating/Review.svelte

@@ -1,85 +1,93 @@
-<script>import { twMerge } from "tailwind-merge";
-export let review;
-export let articleClass = "md:gap-8 md:grid md:grid-cols-3";
-export let divClass = "flex items-center mb-6 space-x-4 rtl:space-x-reverse";
-export let imgClass = "w-10 h-10 rounded-full";
-export let ulClass = "space-y-4 text-sm text-gray-500 dark:text-gray-400";
-export let liClass = "flex items-center";
-export let classArticle = "";
-export let classDiv = "";
-export let classImg = "";
-export let classUl = "";
-export let classLi = "";
+<script lang="ts">
+  import { twMerge } from "tailwind-merge";
+  import { type ReviewProps as Props, review as reviewVariants } from ".";
+
+  let { children, address, item1, item2, item3, review, articleClass, divClass, div2Class, div3Class, imgClass, ulClass, liClass }: Props = $props();
+
+  const { article, div, div2, div3, img, ul, li } = $derived(reviewVariants());
 </script>
 
-<article class={twMerge(articleClass, classArticle)}>
-  <div>
-    <div class={twMerge(divClass, classDiv)}>
-      <img class={twMerge(imgClass, classImg)} src={review.imgSrc} alt={review.imgAlt} />
-      <div class="space-y-1 font-medium dark:text-white">
-        <p>{review.name}</p>
-        {#if review.address}
-          <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
-            <slot name="address" />
-          </div>
-        {/if}
+{#if review}
+  <article class={article({ class: articleClass })}>
+    <div>
+      <div class={div({ class: divClass })}>
+        <img class={img({ class: imgClass })} src={review.imgSrc} alt={review.imgAlt} />
+        <div class={div2({ class: div2Class })}>
+          <p>{review.name}</p>
+          {#if review.address}
+            {#if address}
+              <div class={div3({ class: div3Class })}>
+                {@render address()}
+              </div>
+            {/if}
+          {/if}
+        </div>
       </div>
+      {#if review.item1 || review.item2 || review.item3}
+        <ul class={ul({ class: ulClass })}>
+          {#if review.item1}
+            <li class={twMerge(li({ class: liClass }))}>
+              {#if item1}
+                {@render item1()}
+              {/if}
+            </li>
+          {/if}
+          {#if review.item2}
+            <li class={liClass}>
+              {#if item2}
+                {@render item2()}
+              {/if}
+            </li>
+          {/if}
+          {#if review.item3}
+            <li class={twMerge(liClass)}>
+              {#if item3}
+                {@render item3()}
+              {/if}
+            </li>
+          {/if}
+        </ul>
+      {/if}
     </div>
-    {#if $$slots.item1 || $$slots.item2 || $$slots.item3}
-      <ul class={twMerge(ulClass, classUl)}>
-        {#if $$slots.item1}
-          <li class={twMerge(liClass, classLi)}>
-            <slot name="item1" />
-          </li>
-        {/if}
-        {#if $$slots.item2}
-          <li class={twMerge(liClass, classLi)}>
-            <slot name="item2" />
-          </li>
-        {/if}
-        {#if $$slots.item3}
-          <li class={twMerge(liClass, classLi)}>
-            <slot name="item3" />
-          </li>
-        {/if}
-      </ul>
-    {/if}
-  </div>
-  <div class="col-span-2 mt-6 md:mt-0">
-    <div class="flex items-start mb-5">
-      <div class="pe-4">
-        {#if review.reviewDate}
-          <footer>
-            <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
-              Reviewed: {review.reviewDate}
-            </p>
-          </footer>
-        {/if}
-        <h4 class="text-xl font-bold text-gray-900 dark:text-white">
-          {review.title}
-        </h4>
+
+    <div class="col-span-2 mt-6 md:mt-0">
+      <div class="mb-5 flex items-start">
+        <div class="pe-4">
+          {#if review.reviewDate}
+            <footer>
+              <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
+                Reviewed: {review.reviewDate}
+              </p>
+            </footer>
+          {/if}
+          <h4 class="text-xl font-bold text-gray-900 dark:text-white">
+            {review.title}
+          </h4>
+        </div>
+        <p class="inline-flex items-center rounded bg-primary-700 p-1.5 text-sm font-semibold text-white">
+          {review.rating}
+        </p>
       </div>
-      <p class="bg-primary-700 text-white text-sm font-semibold inline-flex items-center p-1.5 rounded">
-        {review.rating}
-      </p>
+      {@render children()}
     </div>
-    <slot />
-  </div>
-</article>
+  </article>
+{/if}
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let review: $$Props['review'];
-@prop export let articleClass: $$Props['articleClass'] = 'md:gap-8 md:grid md:grid-cols-3';
-@prop export let divClass: $$Props['divClass'] = 'flex items-center mb-6 space-x-4 rtl:space-x-reverse';
-@prop export let imgClass: $$Props['imgClass'] = 'w-10 h-10 rounded-full';
-@prop export let ulClass: $$Props['ulClass'] = 'space-y-4 text-sm text-gray-500 dark:text-gray-400';
-@prop export let liClass: $$Props['liClass'] = 'flex items-center';
-@prop export let classArticle: $$Props['classArticle'] = '';
-@prop export let classDiv: $$Props['classDiv'] = '';
-@prop export let classImg: $$Props['classImg'] = '';
-@prop export let classUl: $$Props['classUl'] = '';
-@prop export let classLi: $$Props['classLi'] = '';
+@props: children: any;
+@props:address: any;
+@props:item1: any;
+@props:item2: any;
+@props:item3: any;
+@props:review: any;
+@props:articleClass: any;
+@props:divClass: any;
+@props:div2Class: any;
+@props:div3Class: any;
+@props:imgClass: any;
+@props:ulClass: any;
+@props:liClass: any;
 -->

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

@@ -1,48 +1,21 @@
-import { SvelteComponentTyped } from "svelte";
-import type { ReviewType } from '../types';
-declare const __propDef: {
-    props: {
-        review: ReviewType;
-        articleClass?: string;
-        divClass?: string;
-        imgClass?: string;
-        ulClass?: string;
-        liClass?: string;
-        classArticle?: string;
-        classDiv?: string;
-        classImg?: string;
-        classUl?: string;
-        classLi?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        address: {};
-        item1: {};
-        item2: {};
-        item3: {};
-        default: {};
-    };
-};
-export type ReviewProps = typeof __propDef.props;
-export type ReviewEvents = typeof __propDef.events;
-export type ReviewSlots = typeof __propDef.slots;
+import { type ReviewProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let review: $$Props['review'];
- * @prop export let articleClass: $$Props['articleClass'] = 'md:gap-8 md:grid md:grid-cols-3';
- * @prop export let divClass: $$Props['divClass'] = 'flex items-center mb-6 space-x-4 rtl:space-x-reverse';
- * @prop export let imgClass: $$Props['imgClass'] = 'w-10 h-10 rounded-full';
- * @prop export let ulClass: $$Props['ulClass'] = 'space-y-4 text-sm text-gray-500 dark:text-gray-400';
- * @prop export let liClass: $$Props['liClass'] = 'flex items-center';
- * @prop export let classArticle: $$Props['classArticle'] = '';
- * @prop export let classDiv: $$Props['classDiv'] = '';
- * @prop export let classImg: $$Props['classImg'] = '';
- * @prop export let classUl: $$Props['classUl'] = '';
- * @prop export let classLi: $$Props['classLi'] = '';
+ * @props: children: any;
+ * @props:address: any;
+ * @props:item1: any;
+ * @props:item2: any;
+ * @props:item3: any;
+ * @props:review: any;
+ * @props:articleClass: any;
+ * @props:divClass: any;
+ * @props:div2Class: any;
+ * @props:div3Class: any;
+ * @props:imgClass: any;
+ * @props:ulClass: any;
+ * @props:liClass: any;
  */
-export default class Review extends SvelteComponentTyped<ReviewProps, ReviewEvents, ReviewSlots> {
-}
-export {};
+declare const Review: import("svelte").Component<Props, {}, "">;
+type Review = ReturnType<typeof Review>;
+export default Review;

package/dist/rating/ScoreRating.svelte

@@ -1,69 +1,70 @@
-<script>export let ratings = [];
-export let ratings2 = [];
-export let headerLabel;
-export let desc1Class = "bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800";
-export let desc2Class = "ms-2 w-24 font-medium text-gray-900 dark:text-white";
-export let desc3spanClass = "mx-2 w-1 h-1 bg-gray-900 rounded-full dark:bg-gray-500";
-export let desc3pClass = "text-sm  w-24 font-medium text-gray-500 dark:text-gray-400";
-export let linkClass = "ms-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500";
-export let barColor = "bg-primary-600 h-2.5 rounded dark:bg-primary-500";
+<script lang="ts">
+  import { type ScoreRatingProps as Props, scorerating } from ".";
+
+  let { ratings, ratings2, headerLabel }: Props = $props();
+
+  const { desc1, desc2, desc3span, desc3p, link, bar } = $derived(scorerating());
 </script>
 
-<div class="flex items-center mb-5">
-  {#if headerLabel.desc1}
-    <p class={desc1Class}>{headerLabel.desc1}</p>
-  {/if}
-  {#if headerLabel.desc2}
-    <p class={desc2Class}>{headerLabel.desc2}</p>
-  {/if}
-  {#if headerLabel.desc3}
-    <span class={desc3spanClass}></span>
-    <p class={desc3pClass}>{headerLabel.desc3}</p>
-  {/if}
-  {#if headerLabel.link}
-    <a href={headerLabel.link.url} class={linkClass}>{headerLabel.link.label}</a>
+<div class="mb-5 flex items-center">
+  {#if headerLabel}
+    {#if headerLabel.desc1}
+      <p class={desc1()}>{headerLabel.desc1}</p>
+    {/if}
+    {#if headerLabel.desc2}
+      <p class={desc2()}>{headerLabel.desc2}</p>
+    {/if}
+    {#if headerLabel.desc3}
+      <span class={desc3span()}></span>
+      <p class={desc3p()}>{headerLabel.desc3}</p>
+    {/if}
+    {#if headerLabel.link}
+      <a href={headerLabel.link.url} class={link()}>{headerLabel.link.label}</a>
+    {/if}
   {/if}
 </div>
 <div class="gap-8 sm:grid sm:grid-cols-2">
   <div>
-    {#each ratings as { label, rating }}
-      <dl>
-        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{label}</dt>
-        <dd class="flex items-center mb-3">
-          <div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 me-2">
-            <div class={barColor} style="width: {rating * 10}%"></div>
-          </div>
-          <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
-        </dd>
-      </dl>
-    {/each}
+    {#if ratings}
+      {#each ratings as { label, rating }}
+        <dl>
+          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
+            {label}
+          </dt>
+          <dd class="mb-3 flex items-center">
+            <div class="me-2 h-2.5 w-full rounded bg-gray-200 dark:bg-gray-700">
+              <div class={bar()} style="width: {rating * 10}%"></div>
+            </div>
+            <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
+          </dd>
+        </dl>
+      {/each}
+    {/if}
   </div>
   <div>
-    {#each ratings2 as { label, rating }}
-      <dl>
-        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{label}</dt>
-        <dd class="flex items-center mb-3">
-          <div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 me-2">
-            <div class={barColor} style="width: {rating * 10}%"></div>
-          </div>
-          <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
-        </dd>
-      </dl>
-    {/each}
+    {#if ratings2}
+      {#each ratings2 as { label, rating }}
+        <dl>
+          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
+            {label}
+          </dt>
+          <dd class="mb-3 flex items-center">
+            <div class="me-2 h-2.5 w-full rounded bg-gray-200 dark:bg-gray-700">
+              <div class={bar()} style="width: {rating * 10}%"></div>
+            </div>
+            <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
+          </dd>
+        </dl>
+      {/each}
+    {/if}
   </div>
 </div>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let ratings: $$Props['ratings'] = [];
-@prop export let ratings2: $$Props['ratings2'] = [];
-@prop export let headerLabel: $$Props['headerLabel'];
-@prop export let desc1Class: $$Props['desc1Class'] = 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800';
-@prop export let desc2Class: $$Props['desc2Class'] = 'ms-2 w-24 font-medium text-gray-900 dark:text-white';
-@prop export let desc3spanClass: $$Props['desc3spanClass'] = 'mx-2 w-1 h-1 bg-gray-900 rounded-full dark:bg-gray-500';
-@prop export let desc3pClass: $$Props['desc3pClass'] = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray-400';
-@prop export let linkClass: $$Props['linkClass'] = 'ms-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
-@prop export let barColor: $$Props['barColor'] = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
+@props: ratings: any;
+@props:ratings2: any;
+@props:headerLabel: any;
 -->

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

@@ -1,51 +1,11 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        ratings: {
-            label: string;
-            rating: number;
-        }[];
-        ratings2: {
-            label: string;
-            rating: number;
-        }[];
-        headerLabel: {
-            desc1?: string;
-            desc2?: string;
-            desc3?: string;
-            link?: {
-                label: string;
-                url: string;
-            };
-        };
-        desc1Class?: string;
-        desc2Class?: string;
-        desc3spanClass?: string;
-        desc3pClass?: string;
-        linkClass?: string;
-        barColor?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ScoreRatingProps = typeof __propDef.props;
-export type ScoreRatingEvents = typeof __propDef.events;
-export type ScoreRatingSlots = typeof __propDef.slots;
+import { type ScoreRatingProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let ratings: $$Props['ratings'] = [];
- * @prop export let ratings2: $$Props['ratings2'] = [];
- * @prop export let headerLabel: $$Props['headerLabel'];
- * @prop export let desc1Class: $$Props['desc1Class'] = 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800';
- * @prop export let desc2Class: $$Props['desc2Class'] = 'ms-2 w-24 font-medium text-gray-900 dark:text-white';
- * @prop export let desc3spanClass: $$Props['desc3spanClass'] = 'mx-2 w-1 h-1 bg-gray-900 rounded-full dark:bg-gray-500';
- * @prop export let desc3pClass: $$Props['desc3pClass'] = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray-400';
- * @prop export let linkClass: $$Props['linkClass'] = 'ms-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
- * @prop export let barColor: $$Props['barColor'] = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
+ * @props: ratings: any;
+ * @props:ratings2: any;
+ * @props:headerLabel: any;
  */
-export default class ScoreRating extends SvelteComponentTyped<ScoreRatingProps, ScoreRatingEvents, ScoreRatingSlots> {
-}
-export {};
+declare const ScoreRating: import("svelte").Component<Props, {}, "">;
+type ScoreRating = ReturnType<typeof ScoreRating>;
+export default ScoreRating;

package/dist/rating/Star.svelte

@@ -1,16 +1,14 @@
-<script>import generateId from "../utils/generateId";
-export let fillPercent = 100;
-export let fillColor = "#F5CA14";
-export let strokeColor = "#F5CA14";
-export let size = 24;
-export let ariaLabel = "star";
-export let id = generateId();
-export let role = "img";
+<script lang="ts">
+  import { type RatingIconProps as Props } from ".";
+
+  let { fillPercent = 100, fillColor = "#F5CA14", strokeColor = "#F5CA14", size = 24, ariaLabel = "star", iconIndex = 0, groupId = "star", role = "img", svgClass, ...restProps }: Props = $props();
+
+  const uniqueId = `${groupId}-${iconIndex}`;
 </script>
 
-<svg width={size} height={size} {...$$restProps} class={$$props.class} aria-label={ariaLabel} viewBox="100 100 120 120" {role} on:click>
+<svg width={size} height={size} {...restProps} class={svgClass} aria-label={ariaLabel} viewBox="100 100 120 120" {role}>
   <defs>
-    <linearGradient {id}>
+    <linearGradient id={uniqueId}>
       {#if fillPercent !== 100}
         <stop offset="0%" stop-color={fillColor} />
         <stop offset="{fillPercent}%" stop-color={fillColor} />
@@ -22,24 +20,27 @@ export let role = "img";
       {/if}
     </linearGradient>
   </defs>
-  <g fill="url(#{id})" stroke={strokeColor} stroke-width="2">
+  <g fill="url(#{uniqueId})" stroke={strokeColor} stroke-width="2">
     <polygon
       points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180, 
-    203.042, 152.639, 176.756, 148.820, 165.000, 125.000, 
-    153.244, 148.820, 126.958, 152.639, 145.979, 171.180,
-    141.489, 197.361, 165.000, 185.000" />
+      203.042, 152.639, 176.756, 148.820, 165.000, 125.000, 
+      153.244, 148.820, 126.958, 152.639, 145.979, 171.180,
+      141.489, 197.361, 165.000, 185.000"
+    />
   </g>
 </svg>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let fillPercent: $$Props['fillPercent'] = 100;
-@prop export let fillColor: $$Props['fillColor'] = '#F5CA14';
-@prop export let strokeColor: $$Props['strokeColor'] = '#F5CA14';
-@prop export let size: $$Props['size'] = 24;
-@prop export let ariaLabel: $$Props['ariaLabel'] = 'star';
-@prop export let id: $$Props['id'] = generateId();
-@prop export let role: $$Props['role'] = 'img';
+@props: fillPercent: any = 100;
+@props:fillColor: any = "#F5CA14";
+@props:strokeColor: any = "#F5CA14";
+@props:size: any = 24;
+@props:ariaLabel: any = "star";
+@props:iconIndex: any = 0;
+@props:groupId: any = "star";
+@props:role: any = "img";
+@props:svgClass: any;
 -->

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

@@ -1,36 +1,17 @@
-import { SvelteComponentTyped } from "svelte";
-import type { SVGAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: SVGAttributes<SVGSVGElement> & {
-        fillPercent?: number;
-        fillColor?: string;
-        strokeColor?: string;
-        size?: number;
-        ariaLabel?: string;
-        id?: string;
-        role?: string;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type StarProps = typeof __propDef.props;
-export type StarEvents = typeof __propDef.events;
-export type StarSlots = typeof __propDef.slots;
+import { type RatingIconProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let fillPercent: $$Props['fillPercent'] = 100;
- * @prop export let fillColor: $$Props['fillColor'] = '#F5CA14';
- * @prop export let strokeColor: $$Props['strokeColor'] = '#F5CA14';
- * @prop export let size: $$Props['size'] = 24;
- * @prop export let ariaLabel: $$Props['ariaLabel'] = 'star';
- * @prop export let id: $$Props['id'] = generateId();
- * @prop export let role: $$Props['role'] = 'img';
+ * @props: fillPercent: any = 100;
+ * @props:fillColor: any = "#F5CA14";
+ * @props:strokeColor: any = "#F5CA14";
+ * @props:size: any = 24;
+ * @props:ariaLabel: any = "star";
+ * @props:iconIndex: any = 0;
+ * @props:groupId: any = "star";
+ * @props:role: any = "img";
+ * @props:svgClass: any;
  */
-export default class Star extends SvelteComponentTyped<StarProps, StarEvents, StarSlots> {
-}
-export {};
+declare const Star: import("svelte").Component<Props, {}, "">;
+type Star = ReturnType<typeof Star>;
+export default Star;

package/dist/rating/Thumbup.svelte

@@ -1,15 +1,14 @@
-<script>export let fillPercent = 100;
-export let fillColor = "#00b500";
-export let strokeColor = "#00b500";
-export let size = 24;
-export let ariaLabel = "thumbup";
-export let id = "thumbup";
-export let role = "img";
+<script lang="ts">
+  import { type RatingIconProps as Props } from ".";
+
+  let { fillPercent = 100, fillColor = "#00b500", strokeColor = "#00b500", size = 24, ariaLabel = "thumbup", iconIndex = 0, groupId = "star", role = "img", svgClass, ...restProps }: Props = $props();
+
+  const uniqueId = `${groupId}-${iconIndex}`;
 </script>
 
-<svg width={size} height={size} {...$$restProps} class={$$props.class} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none" on:click>
+<svg width={size} height={size} {...restProps} class={svgClass} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none">
   <defs>
-    <linearGradient {id}>
+    <linearGradient id={uniqueId}>
       {#if fillPercent !== 100}
         <stop offset="0%" stop-color={fillColor} />
         <stop offset="{fillPercent}%" stop-color={fillColor} />
@@ -21,18 +20,20 @@ export let role = "img";
       {/if}
     </linearGradient>
   </defs>
-  <path fill="url(#{id})" stroke={strokeColor} stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z" />
+  <path fill="url(#{uniqueId})" stroke={strokeColor} stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z" />
 </svg>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let fillPercent: $$Props['fillPercent'] = 100;
-@prop export let fillColor: $$Props['fillColor'] = '#00b500';
-@prop export let strokeColor: $$Props['strokeColor'] = '#00b500';
-@prop export let size: $$Props['size'] = 24;
-@prop export let ariaLabel: $$Props['ariaLabel'] = 'thumbup';
-@prop export let id: $$Props['id'] = 'thumbup';
-@prop export let role: $$Props['role'] = 'img';
+@props: fillPercent: any = 100;
+@props:fillColor: any = "#00b500";
+@props:strokeColor: any = "#00b500";
+@props:size: any = 24;
+@props:ariaLabel: any = "thumbup";
+@props:iconIndex: any = 0;
+@props:groupId: any = "star";
+@props:role: any = "img";
+@props:svgClass: any;
 -->