@pajohns/flowbite-svelte 0.1.0

package/dist/progress/theme.js

@@ -0,0 +1,214 @@
+import { tv } from "tailwind-variants";
+export const progressbar = tv({
+    slots: {
+        base: "w-full bg-gray-200 rounded-full dark:bg-gray-700",
+        label: "text-primary-100 text-xs font-medium text-center leading-none rounded-full",
+        inside: "rounded-full",
+        outside: "mb-1 flex justify-between",
+        span: "text-base font-medium dark:text-white",
+        progressCls: "text-sm font-medium dark:text-white"
+    },
+    variants: {
+        color: {
+            primary: {
+                label: "bg-primary-600",
+                inside: "bg-primary-600"
+            },
+            secondary: {
+                label: "bg-secondary-600",
+                inside: "bg-secondary-600"
+            },
+            gray: {
+                label: "bg-gray-600 dark:bg-gray-300",
+                inside: "bg-gray-600 dark:bg-gray-300"
+            },
+            red: {
+                label: "bg-red-600 dark:bg-red-500",
+                inside: "bg-red-600 dark:bg-red-500"
+            },
+            orange: {
+                label: "bg-orange-600 dark:bg-orange-500",
+                inside: "bg-orange-600 dark:bg-orange-500"
+            },
+            amber: {
+                label: "bg-amber-600 dark:bg-amber-500",
+                inside: "bg-amber-600 dark:bg-amber-500"
+            },
+            yellow: {
+                label: "bg-yellow-400",
+                inside: "bg-yellow-400"
+            },
+            lime: {
+                label: "bg-lime-600 dark:bg-lime-500",
+                inside: "bg-lime-600 dark:bg-lime-500"
+            },
+            green: {
+                label: "bg-green-600 dark:bg-green-500",
+                inside: "bg-green-600 dark:bg-green-500"
+            },
+            emerald: {
+                label: "bg-emerald-600 dark:bg-emerald-500",
+                inside: "bg-emerald-600 dark:bg-emerald-500"
+            },
+            teal: {
+                label: "bg-teal-600 dark:bg-teal-500",
+                inside: "bg-teal-600 dark:bg-teal-500"
+            },
+            cyan: {
+                label: "bg-cyan-600 dark:bg-cyan-500",
+                inside: "bg-cyan-600 dark:bg-cyan-500"
+            },
+            sky: {
+                label: "bg-sky-600 dark:bg-sky-500",
+                inside: "bg-sky-600 dark:bg-sky-500"
+            },
+            blue: {
+                label: "bg-blue-600",
+                inside: "bg-blue-600"
+            },
+            indigo: {
+                label: "bg-indigo-600 dark:bg-indigo-500",
+                inside: "bg-indigo-600 dark:bg-indigo-500"
+            },
+            violet: {
+                label: "bg-violet-600 dark:bg-violet-500",
+                inside: "bg-violet-600 dark:bg-violet-500"
+            },
+            purple: {
+                label: "bg-purple-600 dark:bg-purple-500",
+                inside: "bg-purple-600 dark:bg-purple-500"
+            },
+            fuchsia: {
+                label: "bg-fuchsia-600 dark:bg-fuchsia-500",
+                inside: "bg-fuchsia-600 dark:bg-fuchsia-500"
+            },
+            pink: {
+                label: "bg-pink-600 dark:bg-pink-500",
+                inside: "bg-pink-600 dark:bg-pink-500"
+            },
+            rose: {
+                label: "bg-rose-600 dark:bg-rose-500",
+                inside: "bg-rose-600 dark:bg-rose-500"
+            }
+        },
+        labelInside: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            labelInside: true,
+            class: {
+                base: "text-primary-100 text-xs font-medium text-center leading-none rounded-full",
+                label: "p-0.5"
+            }
+        },
+        {
+            labelInside: false,
+            class: { base: "rounded-full" }
+        }
+    ],
+    defaultVariants: {
+        color: "primary",
+        labelInside: false
+    }
+});
+export const progressradial = tv({
+    slots: {
+        base: "relative inline-flex",
+        label: "absolute inset-0 flex items-center justify-center text-sm font-medium",
+        background: "opacity-25",
+        foreground: "transition-all",
+        outside: "flex flex-col items-center mb-2 text-center",
+        span: "text-base font-medium",
+        progressCls: "text-sm font-medium ml-1"
+    },
+    variants: {
+        color: {
+            primary: {
+                background: "stroke-primary-600",
+                foreground: "stroke-primary-600"
+            },
+            secondary: {
+                background: "stroke-secondary-600",
+                foreground: "stroke-secondary-600"
+            },
+            gray: {
+                background: "stroke-gray-600 dark:stroke-gray-300",
+                foreground: "stroke-gray-600 dark:stroke-gray-300"
+            },
+            red: {
+                background: "stroke-red-600 dark:stroke-red-500",
+                foreground: "stroke-red-600 dark:stroke-red-500"
+            },
+            orange: {
+                background: "stroke-orange-600 dark:stroke-orange-500",
+                foreground: "stroke-orange-600 dark:stroke-orange-500"
+            },
+            amber: {
+                background: "stroke-amber-600 dark:stroke-amber-500",
+                foreground: "stroke-amber-600 dark:stroke-amber-500"
+            },
+            yellow: {
+                background: "stroke-yellow-400",
+                foreground: "stroke-yellow-400"
+            },
+            lime: {
+                background: "stroke-lime-600 dark:stroke-lime-500",
+                foreground: "stroke-lime-600 dark:stroke-lime-500"
+            },
+            green: {
+                background: "stroke-green-600 dark:stroke-green-500",
+                foreground: "stroke-green-600 dark:stroke-green-500"
+            },
+            emerald: {
+                background: "stroke-emerald-600 dark:stroke-emerald-500",
+                foreground: "stroke-emerald-600 dark:stroke-emerald-500"
+            },
+            teal: {
+                background: "stroke-teal-600 dark:stroke-teal-500",
+                foreground: "stroke-teal-600 dark:stroke-teal-500"
+            },
+            cyan: {
+                background: "stroke-cyan-600 dark:stroke-cyan-500",
+                foreground: "stroke-cyan-600 dark:stroke-cyan-500"
+            },
+            sky: {
+                background: "stroke-sky-600 dark:stroke-sky-500",
+                foreground: "stroke-sky-600 dark:stroke-sky-500"
+            },
+            blue: {
+                background: "stroke-blue-600",
+                foreground: "stroke-blue-600"
+            },
+            indigo: {
+                background: "stroke-indigo-600 dark:stroke-indigo-500",
+                foreground: "stroke-indigo-600 dark:stroke-indigo-500"
+            },
+            violet: {
+                background: "stroke-violet-600 dark:stroke-violet-500",
+                foreground: "stroke-violet-600 dark:stroke-violet-500"
+            },
+            purple: {
+                background: "stroke-purple-600 dark:stroke-purple-500",
+                foreground: "stroke-purple-600 dark:stroke-purple-500"
+            },
+            fuchsia: {
+                background: "stroke-fuchsia-600 dark:stroke-fuchsia-500",
+                foreground: "stroke-fuchsia-600 dark:stroke-fuchsia-500"
+            },
+            pink: {
+                background: "stroke-pink-600 dark:stroke-pink-500",
+                foreground: "stroke-pink-600 dark:stroke-pink-500"
+            },
+            rose: {
+                background: "stroke-rose-600 dark:stroke-rose-500",
+                foreground: "stroke-rose-600 dark:stroke-rose-500"
+            }
+        },
+        labelInside: {
+            true: {}
+        }
+    }
+});

package/dist/rating/AdvancedRating.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { advancedRating } from "./theme";
+  import type { AdvancedRatingProps } from "../types";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
+
+  let { rating, globalText, ratings, divClass, spanClass, div2Class, div3Class, span2Class, class: className, classes, unit }: AdvancedRatingProps = $props();
+
+  warnThemeDeprecation(
+    "AdvancedRating",
+    untrack(() => ({ divClass, spanClass, div2Class, div3Class, span2Class })),
+    { divClass: "class", spanClass: "span", div2Class: "div2", div3Class: "div3", span2Class: "span2" }
+  );
+
+  const styling = $derived(
+    classes ?? {
+      span: spanClass,
+      div2: div2Class,
+      div3: div3Class,
+      span2: span2Class
+    }
+  );
+
+  const theme = $derived(getTheme("advancedRating"));
+
+  const { base, span, div2, div3, span2 } = $derived(advancedRating());
+</script>
+
+{#if rating}
+  {@render rating()}
+{/if}
+{#if globalText}
+  {@render globalText()}
+{/if}
+{#each ratings as { label, rating }, i (label ?? i)}
+  <div class={base({ class: clsx(theme?.base, className) })}>
+    <span class={span({ class: clsx(theme?.span, styling.span) })}>{label}</span>
+    <div class={div2({ class: clsx(theme?.div2, styling.div2) })}>
+      <div class={div3({ class: clsx(theme?.div3, styling.div3) })} style="width: {rating}%"></div>
+    </div>
+    <span class={span2({ class: clsx(theme?.span2, styling.span2) })}>{rating}{unit}</span>
+  </div>
+{/each}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1344)
+## Props
+@prop rating
+@prop globalText
+@prop ratings
+@prop divClass
+@prop spanClass
+@prop div2Class
+@prop div3Class
+@prop span2Class
+@prop class: className
+@prop classes
+@prop unit
+-->

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

@@ -0,0 +1,21 @@
+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#L1344)
+ * ## Props
+ * @prop rating
+ * @prop globalText
+ * @prop ratings
+ * @prop divClass
+ * @prop spanClass
+ * @prop div2Class
+ * @prop div3Class
+ * @prop span2Class
+ * @prop class: className
+ * @prop classes
+ * @prop unit
+ */
+declare const AdvancedRating: import("svelte").Component<AdvancedRatingProps, {}, "">;
+type AdvancedRating = ReturnType<typeof AdvancedRating>;
+export default AdvancedRating;

package/dist/rating/CustomIcon.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import type { RatingIconProps } from "../types";
+
+  let {
+    fillPercent = 100,
+    fillColor = "#00ff00",
+    strokeColor = "#00ff00",
+    size = 24,
+    ariaLabel = "custom icon",
+    iconIndex = 0,
+    groupId = "custom",
+    role = "img",
+    svgClass,
+    pathd = "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",
+    ...restProps
+  }: RatingIconProps = $props();
+
+  const uniqueId = $derived(`${groupId}-${iconIndex}`);
+</script>
+
+<svg width={size} height={size} class={clsx(svgClass)} {...restProps} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5">
+  <defs>
+    <linearGradient id={uniqueId} x1="0%" y1="0%" x2="100%" y2="0%">
+      {#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 d={pathd} fill="url(#{uniqueId})" stroke={strokeColor} stroke-linecap="round" stroke-linejoin="round" />
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1430)
+## Props
+@prop fillPercent = 100
+@prop fillColor = "#00ff00"
+@prop strokeColor = "#00ff00"
+@prop size = 24
+@prop ariaLabel = "custom icon"
+@prop iconIndex = 0
+@prop groupId = "custom"
+@prop role = "img"
+@prop svgClass
+@prop pathd = "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"
+@prop ...restProps
+-->

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

@@ -0,0 +1,21 @@
+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#L1430)
+ * ## Props
+ * @prop fillPercent = 100
+ * @prop fillColor = "#00ff00"
+ * @prop strokeColor = "#00ff00"
+ * @prop size = 24
+ * @prop ariaLabel = "custom icon"
+ * @prop iconIndex = 0
+ * @prop groupId = "custom"
+ * @prop role = "img"
+ * @prop svgClass
+ * @prop pathd = "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"
+ * @prop ...restProps
+ */
+declare const CustomIcon: import("svelte").Component<RatingIconProps, {}, "">;
+type CustomIcon = ReturnType<typeof CustomIcon>;
+export default CustomIcon;

package/dist/rating/Heart.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import type { RatingIconProps } from "../types";
+
+  let {
+    fillPercent = 100,
+    fillColor = "#ff0000",
+    strokeColor = "#ff0000",
+    size = 24,
+    ariaLabel = "star",
+    iconIndex = 0,
+    groupId = "star",
+    role = "img",
+    svgClass,
+    ...restProps
+  }: RatingIconProps = $props();
+
+  const uniqueId = $derived(`${groupId}-${iconIndex}`);
+</script>
+
+<svg width={size} height={size} class={clsx(svgClass)} {...restProps} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none">
+  <defs>
+    <linearGradient id={uniqueId}>
+      {#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(#{uniqueId})"
+    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/)
+## Type
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1430)
+## Props
+@prop fillPercent = 100
+@prop fillColor = "#ff0000"
+@prop strokeColor = "#ff0000"
+@prop size = 24
+@prop ariaLabel = "star"
+@prop iconIndex = 0
+@prop groupId = "star"
+@prop role = "img"
+@prop svgClass
+@prop ...restProps
+-->

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

@@ -0,0 +1,20 @@
+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#L1430)
+ * ## Props
+ * @prop fillPercent = 100
+ * @prop fillColor = "#ff0000"
+ * @prop strokeColor = "#ff0000"
+ * @prop size = 24
+ * @prop ariaLabel = "star"
+ * @prop iconIndex = 0
+ * @prop groupId = "star"
+ * @prop role = "img"
+ * @prop svgClass
+ * @prop ...restProps
+ */
+declare const Heart: import("svelte").Component<RatingIconProps, {}, "">;
+type Heart = ReturnType<typeof Heart>;
+export default Heart;

package/dist/rating/Rating.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import Star from "./Star.svelte";
+  import { rating as ratingVariants } from "./theme";
+  import type { RatingProps } from "../types";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
+
+  let { children, text, class: className, classes, size = 24, total = 5, rating = 4, icon: Icon = Star, count = false, pClass, ...restProps }: RatingProps = $props();
+
+  warnThemeDeprecation(
+    "Rating",
+    untrack(() => ({ pClass })),
+    { pClass: "p" }
+  );
+
+  const styling = $derived(classes ?? { p: pClass });
+
+  const theme = $derived(getTheme("rating"));
+
+  const { base, p } = $derived(ratingVariants());
+  const ratingGroupId = crypto.randomUUID();
+  let clampedRating = $derived(Math.max(0, Math.min(rating, total)));
+  let fullStars = $derived(Math.floor(clampedRating));
+  let rateDifference = $derived(clampedRating - fullStars);
+  let percentRating = $derived(Math.round(rateDifference * 100));
+  let grayStars = $derived(total - (fullStars + Math.ceil(rateDifference)));
+</script>
+
+<div {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  {#if count && children}
+    <Icon fillPercent={100} {size} iconIndex={0} groupId={ratingGroupId} />
+    <p class={p({ class: clsx(theme?.p, styling.p) })}>{rating}</p>
+    {@render children()}
+  {:else}
+    <!-- eslint-disable @typescript-eslint/no-unused-vars-->
+    {#each Array(fullStars) as _, i (i)}
+      <Icon {size} fillPercent={100} iconIndex={i} groupId={`rating-${ratingGroupId}-full`} />
+    {/each}
+    {#if percentRating}
+      <Icon {size} fillPercent={percentRating} iconIndex={fullStars} groupId={`rating-${ratingGroupId}-partial`} />
+    {/if}
+    <!-- eslint-disable @typescript-eslint/no-unused-vars-->
+    {#each Array(grayStars) as _, i (i)}
+      <Icon {size} fillPercent={0} iconIndex={i} groupId={`rating-${ratingGroupId}-empty`} />
+    {/each}
+    {#if text}
+      {@render text()}
+    {/if}
+  {/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1356)
+## Props
+@prop children
+@prop text
+@prop class: className
+@prop classes
+@prop size = 24
+@prop total = 5
+@prop rating = 4
+@prop icon: Icon = Star
+@prop count = false
+@prop pClass
+@prop ...restProps
+-->

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

@@ -0,0 +1,21 @@
+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#L1356)
+ * ## Props
+ * @prop children
+ * @prop text
+ * @prop class: className
+ * @prop classes
+ * @prop size = 24
+ * @prop total = 5
+ * @prop rating = 4
+ * @prop icon: Icon = Star
+ * @prop count = false
+ * @prop pClass
+ * @prop ...restProps
+ */
+declare const Rating: import("svelte").Component<RatingProps, {}, "">;
+type Rating = ReturnType<typeof Rating>;
+export default Rating;

package/dist/rating/RatingComment.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import Button from "../buttons/Button.svelte";
+  import Rating from "./Rating.svelte";
+  import type { RatingCommentProps } from "../types";
+
+  let { children, evaluation, helpfullink, abuselink, comment }: RatingCommentProps = $props();
+</script>
+
+<article>
+  <div class="mb-4 flex items-center space-x-4 rtl:space-x-reverse">
+    <img class="h-10 w-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="mb-1 flex items-center">
+    <Rating total={comment.total} rating={comment.rating}>
+      {#snippet text()}
+        <p class="ms-2 pt-1 text-sm font-medium text-gray-500 dark:text-gray-400">
+          {comment.rating} out of {comment.total}
+        </p>
+      {/snippet}
+    </Rating>
+    {#if comment.heading}
+      <h3 class="ms-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}
+
+  {@render children()}
+
+  <aside>
+    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+      {#if evaluation}
+        {@render evaluation()}
+      {/if}
+    </p>
+    {#if helpfullink || abuselink}
+      <div class="mt-3 flex items-center space-x-3 divide-x divide-gray-200 rtl:space-x-reverse rtl:divide-x-reverse dark:divide-gray-600">
+        {#if helpfullink}
+          <Button size="xs" href="/" color="dark">Helpful</Button>
+        {/if}
+        {#if abuselink}
+          <a href={abuselink} class="text-primary-600 dark:text-primary-500 ps-4 text-sm font-medium hover:underline">Report abuse</a>
+        {/if}
+      </div>
+    {/if}
+  </aside>
+</article>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[RatingCommentProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1367)
+## Props
+@prop children
+@prop evaluation
+@prop helpfullink
+@prop abuselink
+@prop comment
+-->

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

@@ -0,0 +1,15 @@
+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#L1367)
+ * ## Props
+ * @prop children
+ * @prop evaluation
+ * @prop helpfullink
+ * @prop abuselink
+ * @prop comment
+ */
+declare const RatingComment: import("svelte").Component<RatingCommentProps, {}, "">;
+type RatingComment = ReturnType<typeof RatingComment>;
+export default RatingComment;