flowbite-svelte 0.44.11 → 0.44.12

package/src/lib/navbar/NavUl.svelte

@@ -1,68 +0,0 @@
-<script lang="ts" context="module">
-  export type NavbarLiType = {
-    activeClass: string;
-    nonActiveClass: string;
-  };
-</script>
-
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import { slide, type SlideParams } from 'svelte/transition';
-  import { quintOut } from 'svelte/easing';
-  import Frame from '../utils/Frame.svelte';
-  import { setContext } from 'svelte';
-  import { writable } from 'svelte/store';
-
-  const activeUrlStore = writable('');
-
-  export let activeUrl: string = '';
-  export let divClass: string = 'w-full md:block md:w-auto';
-  export let ulClass: string = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
-  export let hidden: boolean = true;
-  export let slideParams: SlideParams = { delay: 250, duration: 500, easing: quintOut };
-  export let activeClass: string = 'text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent';
-  export let nonActiveClass: string = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
-
-  setContext<NavbarLiType>('navbarContext', { activeClass, nonActiveClass });
-  $: {
-    activeUrlStore.set(activeUrl);
-  }
-  setContext('activeUrl', activeUrlStore);
-
-  let _divClass: string;
-  $: _divClass = twMerge(divClass, $$props.class);
-
-  let _ulClass: string;
-  $: _ulClass = twMerge(
-    ulClass,
-    // 'divide-y md:divide-y-0 divide-gray-100 dark:divide-gray-700',
-    $$props.classUl
-  );
-</script>
-
-{#if !hidden}
-  <div {...$$restProps} class={_divClass} transition:slide={slideParams} on:click role="button" tabindex="0">
-    <Frame tag="ul" border rounded color="navbarUl" class={_ulClass}>
-      <slot />
-    </Frame>
-  </div>
-{:else}
-  <div {...$$restProps} class={_divClass} {hidden}>
-    <ul class={_ulClass}>
-      <slot />
-    </ul>
-  </div>
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let activeUrl: string = '';
-@prop export let divClass: string = 'w-full md:block md:w-auto';
-@prop export let ulClass: string = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
-@prop export let hidden: boolean = true;
-@prop export let slideParams: SlideParams = { delay: 250, duration: 500, easing: quintOut };
-@prop export let activeClass: string = 'text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent';
-@prop export let nonActiveClass: string = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
--->

package/src/lib/navbar/Navbar.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-  import type { ComponentProps } from 'svelte';
-  import Frame from '../utils/Frame.svelte';
-  import { twMerge } from 'tailwind-merge';
-
-  // propagate props type from underlying Frame
-  interface $$Props extends ComponentProps<Frame> {
-    navClass?: string;
-    navDivClass?: string;
-    fluid?: boolean;
-    classNavDiv?: string;
-  }
-
-  export let navClass: string = 'px-2 sm:px-4 py-2.5 w-full';
-  export let navDivClass: string = 'mx-auto flex flex-wrap justify-between items-center ';
-  export let fluid: boolean = false;
-
-  $: {
-    // override default Frame value
-    $$restProps.color = $$restProps.color ?? 'navbar';
-  }
-
-  let hidden = true;
-  let toggle = () => {
-    hidden = !hidden;
-  };
-</script>
-
-<Frame tag="nav" {...$$restProps} class={twMerge(navClass, $$props.class)}>
-  <div class={twMerge(navDivClass, $$props.classNavDiv, (fluid && 'w-full') || 'container')}>
-    <slot {hidden} {toggle} />
-  </div>
-</Frame>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let navClass: string = 'px-2 sm:px-4 py-2.5 w-full';
-@prop export let navDivClass: string = 'mx-auto flex flex-wrap justify-between items-center ';
-@prop export let fluid: boolean = false;
--->

package/src/lib/navbar/SidebarMenu.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-  export let size = '20';
-  export let color = 'currentColor';
-  export let variation: 'solid' | 'outline' = 'outline';
-  let viewBox: string;
-  let svgpath: string;
-  let svgoutline = `<path stroke="${color}" clip-rule="evenodd" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"></path> `;
-  let svgsolid = `<path fill="${color}" clip-rule="evenodd" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"></path> `;
-  $: switch (variation) {
-    case 'outline':
-      svgpath = svgoutline;
-      viewBox = '0 0 20 20';
-      break;
-    case 'solid':
-      svgpath = svgsolid;
-      viewBox = '0 0 20 20';
-      break;
-    default:
-      svgpath = svgoutline;
-      viewBox = '0 0 20 20';
-  }
-  export let ariaLabel = 'bars 3';
-</script>
-
-<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} {...$$restProps} class={$$props.class} aria-label={ariaLabel} fill="none" {viewBox} stroke-width="2" on:click role="button" tabindex="-1">
-  {@html svgpath}
-</svg>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let size = '20';
-@prop export let color = 'currentColor';
-@prop export let variation: 'solid' | 'outline' = 'outline';
-@prop export let ariaLabel = 'bars 3';
--->

package/src/lib/paginations/Pagination.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-  import { twMerge, twJoin } from 'tailwind-merge';
-  import { createEventDispatcher, setContext } from 'svelte';
-  import type { LinkType } from '../types';
-  import PaginationItem from './PaginationItem.svelte';
-
-  export let pages: LinkType[] = [];
-  export let activeClass: string = 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white';
-  export let normalClass: string = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
-  export let ulClass: string = 'inline-flex -space-x-px items-center';
-  export let table: boolean = false;
-  export let large: boolean = false;
-
-  const dispatch = createEventDispatcher();
-
-  setContext<boolean>('group', true);
-  setContext<boolean>('table', table);
-
-  const previous = () => {
-    dispatch('previous');
-  };
-  const next = () => {
-    dispatch('next');
-  };
-</script>
-
-<nav aria-label="Page navigation">
-  <ul class={twMerge(ulClass, table && 'divide-x dark divide-gray-700 dark:divide-gray-700', $$props.class)}>
-    <li>
-      <PaginationItem {large} on:click={previous} {normalClass} class={table ? 'rounded-l' : 'rounded-l-lg'}>
-        <slot name="prev">Previous</slot>
-      </PaginationItem>
-    </li>
-    {#each pages as { name, href, active }}
-      <li>
-        <PaginationItem {large} {active} {activeClass} {normalClass} {href} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover>
-          {name}
-        </PaginationItem>
-      </li>
-    {/each}
-    <li>
-      <PaginationItem {large} on:click={next} {normalClass} class={table ? 'rounded-r' : 'rounded-r-lg'}>
-        <slot name="next">Next</slot>
-      </PaginationItem>
-    </li>
-  </ul>
-</nav>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let pages: LinkType[] = [];
-@prop export let activeClass: string = 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white';
-@prop export let normalClass: string = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
-@prop export let ulClass: string = 'inline-flex -space-x-px items-center';
-@prop export let table: boolean = false;
-@prop export let large: boolean = false;
--->

package/src/lib/paginations/PaginationItem.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import { getContext } from 'svelte';
-
-  export let href: string | undefined = undefined;
-  export let active: boolean = false;
-  export let activeClass: string = 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white';
-  export let normalClass: string = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
-  export let large: boolean = false;
-
-  const group = getContext<boolean>('group');
-  const table = getContext<boolean>('table');
-
-  let defaultClass: string;
-  $: defaultClass = twMerge(
-    'flex items-center font-medium',
-    large ? 'h-10 px-4 text-base' : 'h-8 px-3 text-sm',
-    group ? '' : table ? 'rounded' : 'rounded-lg',
-    // table || 'border border-gray-300 dark:border-gray-700 dark:bg-gray-800',
-    table ? '' : 'border',
-    active ? activeClass : normalClass,
-    $$props.class
-  );
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<svelte:element this={href ? 'a' : 'button'} {href} class={defaultClass} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover role={href ? 'button' : undefined}>
-  <slot />
-</svelte:element>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let href: string | undefined = undefined;
-@prop export let active: boolean = false;
-@prop export let activeClass: string = 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white';
-@prop export let normalClass: string = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
-@prop export let large: boolean = false;
--->

package/src/lib/popover/Popover.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-  import type { ComponentProps } from 'svelte';
-  import Popper from '../utils/Popper.svelte';
-
-  // propagate props type from underlying Frame
-  interface $$Props extends ComponentProps<Popper> {
-    title?: string;
-    defaultClass?: string;
-  }
-
-  export let title: string = '';
-  export let defaultClass: string = 'py-2 px-3';
-</script>
-
-<Popper activeContent border shadow rounded {...$$restProps} class="dark:!border-gray-600 {$$props.class}" on:show>
-  {#if $$slots.title || title}
-    <div class="py-2 px-3 bg-gray-100 rounded-t-md border-b border-gray-200 dark:border-gray-600 dark:bg-gray-700">
-      <slot name="title">
-        <h3 class="font-semibold text-gray-900 dark:text-white">{title}</h3>
-      </slot>
-    </div>
-  {/if}
-  <div class={defaultClass}>
-    <slot />
-  </div>
-</Popper>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let title: string = '';
-@prop export let defaultClass: string = 'py-2 px-3';
--->

package/src/lib/progressbars/Progressbar.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-  import { twMerge, twJoin } from 'tailwind-merge';
-
-  export let progress: string = '45';
-  export let size: string = 'h-2.5';
-  export let labelInside: boolean = false;
-  export let labelOutside: string = '';
-  export let color: 'primary' | 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo' = 'primary';
-  export let labelInsideClass: string = 'text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
-  export let divClass: string = 'w-full bg-gray-200 rounded-full dark:bg-gray-700';
-
-  // let barColor: string;
-  const barColors = {
-    primary: 'bg-primary-600',
-    blue: 'bg-blue-600',
-    gray: 'bg-gray-600 dark:bg-gray-300',
-    red: 'bg-red-600 dark:bg-red-500',
-    green: 'bg-green-600 dark:bg-green-500',
-    yellow: 'bg-yellow-400',
-    purple: 'bg-purple-600 dark:bg-purple-500',
-    indigo: 'bg-indigo-600 dark:bg-indigo-500'
-  };
-</script>
-
-{#if labelOutside}
-  <div {...$$restProps} class={twMerge('flex justify-between mb-1', $$props.classLabelOutside)}>
-    <span class="text-base font-medium text-blue-700 dark:text-white">{labelOutside}</span>
-    <span class="text-sm font-medium text-blue-700 dark:text-white">{progress}%</span>
-  </div>
-{/if}
-<div class={twMerge(divClass, size, $$props.class)}>
-  {#if labelInside}
-    <div class={twJoin(labelInsideClass, barColors[color])} style="width: {progress}%">
-      {progress}%
-    </div>
-  {:else}
-    <div class={twJoin(barColors[color], size, 'rounded-full')} style="width: {progress}%" />
-  {/if}
-</div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let progress: string = '45';
-@prop export let size: string = 'h-2.5';
-@prop export let labelInside: boolean = false;
-@prop export let labelOutside: string = '';
-@prop export let color: 'primary' | 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo' = 'primary';
-@prop export let labelInsideClass: string = 'text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
-@prop export let divClass: string = 'w-full bg-gray-200 rounded-full dark:bg-gray-700';
--->

package/src/lib/ratings/AdvancedRating.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  export let ratings: { label: string; rating: number }[] = [];
-  export let divClass: string = 'flex items-center mt-4';
-  export let labelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
-  export let ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700';
-  export let ratingClass: string = 'h-5 bg-yellow-400 rounded';
-  export let rightLabelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
-  export let unit: string = '%';
-
-  let divCls: string = twMerge(divClass, $$props.classDiv);
-  let labelCls: string = twMerge(labelClass, $$props.classLabel);
-  let ratingDivCls: string = twMerge(ratingDivClass, $$props.classRatingDiv);
-  let ratingCls: string = twMerge(ratingClass, $$props.classRating);
-  let rightLabelCls: string = twMerge(rightLabelClass, $$props.classRightLabel);
-</script>
-
-{#if $$slots.rating}
-  <slot name="rating" />
-{/if}
-{#if $$slots.globalText}
-  <slot name="globalText" />
-{/if}
-{#each ratings as { label, rating }}
-  <div class={divCls}>
-    <span class={labelCls}>{label}</span>
-    <div class={ratingDivCls}>
-      <div class={ratingCls} style="width: {rating}%" />
-    </div>
-    <span class={rightLabelCls}>{rating}{unit}</span>
-  </div>
-{/each}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let ratings: { label: string;
-@prop export let divClass: string = 'flex items-center mt-4';
-@prop export let labelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
-@prop export let ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700';
-@prop export let ratingClass: string = 'h-5 bg-yellow-400 rounded';
-@prop export let rightLabelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
-@prop export let unit: string = '%';
--->

package/src/lib/ratings/Heart.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-  export let fillPercent: number = 100;
-  export let fillColor: string = '#ff0000';
-  export let strokeColor: string = '#ff0000';
-  export let size: number = 24;
-  export let ariaLabel: string = 'heart';
-  export let id: string = 'heart';
-  export let role = 'img';
-</script>
-
-<svg width={size} height={size} class={$$props.class} {...$$restProps} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none" on:click>
-  <defs>
-    <linearGradient {id}>
-      {#if fillPercent !== 100}
-        <stop offset="0%" stop-color={fillColor} />
-        <stop offset="{fillPercent}%" stop-color={fillColor} />
-        <stop offset="{fillPercent}%" stop-color="transparent" />
-        <stop offset="100%" stop-color="transparent" />
-      {:else}
-        <stop offset="0%" stop-color={fillColor} />
-        <stop offset="100%" stop-color={fillColor} />
-      {/if}
-    </linearGradient>
-  </defs>
-  <path fill="url(#{id})" stroke={strokeColor} stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
-</svg>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let fillPercent: number = 100;
-@prop export let fillColor: string = '#ff0000';
-@prop export let strokeColor: string = '#ff0000';
-@prop export let size: number = 24;
-@prop export let ariaLabel: string = 'heart';
-@prop export let id: string = 'heart';
-@prop export let role = 'img';
--->

package/src/lib/ratings/Rating.svelte

@@ -1,57 +0,0 @@
-<script lang="ts">
-  import Star from './Star.svelte';
-  import { twMerge } from 'tailwind-merge';
-  import generateId from '../utils/generateId.js';
-  import type { ComponentType } from 'svelte';
-
-  export let divClass: string = 'flex items-center';
-  export let size: number = 24;
-  export let total: number = 5;
-  export let rating: number = 4;
-  export let partialId: string = 'partialStar' + generateId();
-  export let icon: ComponentType = Star;
-  export let count: boolean = false;
-
-  // generate unique id for full star and gray star
-  const fullStarId: string = generateId();
-  const grayStarId: string = generateId();
-  let fullStars: number = Math.floor(rating);
-  let rateDiffence = rating - fullStars;
-  let percentRating = Math.round(rateDiffence * 100);
-  let grayStars: number = total - (fullStars + Math.ceil(rateDiffence));
-  // console.log(fullStars, grayStars, rateDiffence, percentRating)
-</script>
-
-<div class={twMerge(divClass, $$props.class)}>
-  {#if count}
-    <svelte:component this={icon} fillPercent={100} {size} />
-    <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">{rating}</p>
-    <slot />
-  {:else}
-    {#each Array(fullStars) as star}
-      <svelte:component this={icon} {size} fillPercent={100} id={fullStarId} />
-    {/each}
-    {#if percentRating}
-      <svelte:component this={icon} {size} fillPercent={percentRating} id={partialId} />
-    {/if}
-    {#each Array(grayStars) as star}
-      <svelte:component this={icon} {size} fillPercent={0} id={grayStarId} />
-    {/each}
-    {#if $$slots.text}
-      <slot name="text" />
-    {/if}
-  {/if}
-</div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let divClass: string = 'flex items-center';
-@prop export let size: number = 24;
-@prop export let total: number = 5;
-@prop export let rating: number = 4;
-@prop export let partialId: string = 'partialStar' + generateId();
-@prop export let icon: ComponentType = Star;
-@prop export let count: boolean = false;
--->

package/src/lib/ratings/RatingComment.svelte

@@ -1,85 +0,0 @@
-<script lang="ts">
-  import Button from '../buttons/Button.svelte';
-  import Rating from './Rating.svelte';
-  // default is floor
-  export let ceil: boolean = false;
-  export let helpfullink: string = '';
-  export let abuselink: string = '';
-  export let comment: {
-    id: string;
-    user: {
-      name: string;
-      img: {
-        src: string;
-        alt: string;
-      };
-      joined: string;
-    };
-    total: number;
-    rating: number;
-    heading: string;
-    address: string;
-    datetime: string;
-  };
-
-  let roundedRating: number = ceil ? Math.ceil(comment.rating) : Math.floor(comment.rating);
-  let grayStars: number = comment.total - roundedRating;
-</script>
-
-<article>
-  <div class="flex items-center mb-4 space-x-4">
-    <img class="w-10 h-10 rounded-full" src={comment.user.img.src} alt={comment.user.img.alt} />
-    <div class="space-y-1 font-medium dark:text-white">
-      <p>
-        {comment.user.name}
-        <time datetime="2014-08-16 19:00" class="block text-sm text-gray-500 dark:text-gray-400">
-          {comment.user.joined}
-        </time>
-      </p>
-    </div>
-  </div>
-  <div class="flex items-center mb-1">
-    <Rating total={comment.total} rating={comment.rating}>
-      <p slot="text" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
-        {comment.rating} out of {comment.total}
-      </p>
-    </Rating>
-    {#if comment.heading}
-      <h3 class="ml-2 text-sm font-semibold text-gray-900 dark:text-white">
-        {comment.heading}
-      </h3>
-    {/if}
-  </div>
-  {#if comment.address || comment.datetime}
-    <footer class="mb-5 text-sm text-gray-500 dark:text-gray-400">
-      <p>Reviewed in {comment.address} on {comment.datetime}</p>
-    </footer>
-  {/if}
-  <slot />
-  <aside>
-    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-      <slot name="evaluation" />
-    </p>
-    {#if helpfullink || abuselink}
-      <div class="flex items-center mt-3 space-x-3 divide-x divide-gray-200 dark:divide-gray-600">
-        {#if helpfullink}
-          <Button size="xs" href="/" color="dark">Helpful</Button>
-        {/if}
-        {#if abuselink}
-          <a href={abuselink} class="pl-4 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500"> Report abuse </a>
-        {/if}
-      </div>
-    {/if}
-  </aside>
-</article>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let ceil: boolean = false;
-@prop export let helpfullink: string = '';
-@prop export let abuselink: string = '';
-@prop export let comment: {
-    id: string;
--->

package/src/lib/ratings/Review.svelte

@@ -1,78 +0,0 @@
-<script lang="ts">
-  import type { ReviewType } from '../types';
-  import { twMerge } from 'tailwind-merge';
-
-  export let review: ReviewType;
-  export let articleClass: string = 'md:gap-8 md:grid md:grid-cols-3';
-  export let divClass: string = 'flex items-center mb-6 space-x-4';
-  export let imgClass: string = 'w-10 h-10 rounded-full';
-  export let ulClass: string = 'space-y-4 text-sm text-gray-500 dark:text-gray-400';
-  export let liClass: string = 'flex items-center';
-</script>
-
-<article class={twMerge(articleClass, $$props.classArticle)}>
-  <div>
-    <div class={twMerge(divClass, $$props.classDiv)}>
-      <img class={twMerge(imgClass, $$props.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}
-      </div>
-    </div>
-    {#if $$slots.item1 || $$slots.item2 || $$slots.item3}
-      <ul class={twMerge(ulClass, $$props.classUl)}>
-        {#if $$slots.item1}
-          <li class={twMerge(liClass, $$props.classLi)}>
-            <slot name="item1" />
-          </li>
-        {/if}
-        {#if $$slots.item2}
-          <li class={twMerge(liClass, $$props.classLi)}>
-            <slot name="item2" />
-          </li>
-        {/if}
-        {#if $$slots.item3}
-          <li class={twMerge(liClass, $$props.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="pr-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="bg-primary-700 text-white text-sm font-semibold inline-flex items-center p-1.5 rounded">
-        {review.rating}
-      </p>
-    </div>
-    <slot />
-  </div>
-</article>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let review: ReviewType;
-@prop export let articleClass: string = 'md:gap-8 md:grid md:grid-cols-3';
-@prop export let divClass: string = 'flex items-center mb-6 space-x-4';
-@prop export let imgClass: string = 'w-10 h-10 rounded-full';
-@prop export let ulClass: string = 'space-y-4 text-sm text-gray-500 dark:text-gray-400';
-@prop export let liClass: string = 'flex items-center';
--->