flowbite-svelte 0.25.19 → 0.25.22

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.25.22](https://github.com/themesberg/flowbite-svelte/compare/v0.25.21...v0.25.22) (2022-08-28)
+
+
+### Bug Fixes
+
+* create icon slot for Alert so that users can add svg or svelte component ([45244ec](https://github.com/themesberg/flowbite-svelte/commit/45244ec05f99298d150751209980dce519873163))
+* remove heros from: ([57f6928](https://github.com/themesberg/flowbite-svelte/commit/57f69282190f5d33d7ac17c6adeab36b89184f47))
+* update Alert color type ([fd819fb](https://github.com/themesberg/flowbite-svelte/commit/fd819fb59d2d01f900ad76449afabfa22de6d5b1))
+* update Timeline components ([4b47d6b](https://github.com/themesberg/flowbite-svelte/commit/4b47d6b5d09abad3b2d8fc29c2b38287726c44d7))
+
+### [0.25.21](https://github.com/themesberg/flowbite-svelte/compare/v0.25.20...v0.25.21) (2022-08-27)
+
+
+### Bug Fixes
+
+* add relative class to Hr component ([d8c6fbf](https://github.com/themesberg/flowbite-svelte/commit/d8c6fbf367a43b7c13ea55a56ae9c9f0b94fa96e))
+
+### [0.25.20](https://github.com/themesberg/flowbite-svelte/compare/v0.25.19...v0.25.20) (2022-08-27)
+
+
+### Bug Fixes
+
+* index page space ([6ab9a19](https://github.com/themesberg/flowbite-svelte/commit/6ab9a19e004fc19ba3bd696acedbc5bbc0ced966))
+* remove heros from: ([7055f4c](https://github.com/themesberg/flowbite-svelte/commit/7055f4c5ddaa91e15cabaf7d1112a149cf81374d))
+* remove heros icon from Carousel ([2c7d4c9](https://github.com/themesberg/flowbite-svelte/commit/2c7d4c9a6edc1a4dd4005e5dcf46fec8b5dc0a52))
+
 ### [0.25.19](https://github.com/themesberg/flowbite-svelte/compare/v0.25.18...v0.25.19) (2022-08-27)
 
 

package/alerts/Alert.svelte

@@ -5,7 +5,6 @@ import CloseButton from '../utils/CloseButton.svelte';
 const dispatch = createEventDispatcher();
 setContext('background', true);
 export let color = 'blue';
-export let icon = null;
 export let dismissable = false;
 export let rounded = true;
 export let accent = false;
@@ -61,8 +60,8 @@ $: divClass = classNames('p-4 text-sm', bgClasses[color] ?? bgClasses.blue, acce
 
 <div id={$$props.id} class:hidden class={divClass} role="alert">
 	<div class="flex items-center whitespace-pre-wrap">
-		{#if icon}
-			<svelte:component this={icon} class="flex-shrink-0 w-5 h-5 mr-3" />
+		{#if $$slots.icon}
+			<slot name="icon" />
 		{/if}
 
 		<slot />
@@ -80,8 +79,7 @@ $: divClass = classNames('p-4 text-sm', bgClasses[color] ?? bgClasses.blue, acce
 				on:focus
 				on:blur
 				on:mouseenter
-				on:mouseleave
-			/>
+				on:mouseleave />
 		{/if}
 	</div>
 	<slot name="extra" />

package/alerts/Alert.svelte.d.ts

@@ -1,11 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { SvelteComponent } from 'svelte';
-import type { Colors } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        color?: Colors;
-        icon?: typeof SvelteComponent | null;
+        color?: 'gray' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink' | 'dark' | 'custom';
         dismissable?: boolean;
         rounded?: boolean;
         accent?: boolean;
@@ -27,6 +24,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        icon: {};
         default: {};
         extra: {};
     };

package/carousels/Carousel.svelte

@@ -1,5 +1,4 @@
-<script>import { ChevronRight, ChevronLeft } from 'svelte-heros';
-import Slide from './Slide.svelte';
+<script>import Slide from './Slide.svelte';
 import Thumbnail from './Thumbnail.svelte';
 import Caption from './Caption.svelte';
 import Indicator from './Indicator.svelte';
@@ -10,12 +9,6 @@ export let images;
 export let slideControls = true;
 export let loop = false;
 export let duration = 2000;
-export let icons = {
-    next: ChevronRight,
-    prev: ChevronLeft
-};
-export let iconSize = 24;
-export let iconClass = 'text-white sm:w-6 sm:h-6 dark:text-gray-300';
 // Carousel
 export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
 export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
@@ -64,8 +57,7 @@ if (loop) {
 					{name}
 					selected={imageShowingIndex === id}
 					on:click={() => goToSlide(id)}
-					{indicatorClass}
-				/>
+					{indicatorClass} />
 			{/each}
 		</div>
 	{/if}
@@ -75,12 +67,25 @@ if (loop) {
 			on:click={prevSlide}
 			type="button"
 			class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
-			data-carousel-prev
-		>
+			data-carousel-prev>
 			<span
-				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
-			>
-				<svelte:component this={icons.prev} size={iconSize} class=" {iconClass}" />
+				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
+				{#if $$slots.previous}
+					<slot name="previous" />
+				{:else}
+					<svg
+						aria-hidden="true"
+						class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 19l-7-7 7-7" /></svg>
+				{/if}
 				<span class="hidden">Previous</span>
 			</span>
 		</button>
@@ -88,12 +93,25 @@ if (loop) {
 			on:click={nextSlide}
 			type="button"
 			class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
-			data-carousel-next
-		>
+			data-carousel-next>
 			<span
-				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
-			>
-				<svelte:component this={icons.next} size={iconSize} class=" {iconClass}" />
+				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
+				{#if $$slots.next}
+					<slot name="next" />
+				{:else}
+					<svg
+						aria-hidden="true"
+						class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 5l7 7-7 7" /></svg>
+				{/if}
 				<span class="hidden">Next</span>
 			</span>
 		</button>
@@ -114,8 +132,7 @@ if (loop) {
 				titleLink={attribution}
 				{id}
 				selected={imageShowingIndex === id}
-				on:click={() => goToSlide(id)}
-			/>
+				on:click={() => goToSlide(id)} />
 		{/each}
 	</div>
 {/if}

package/carousels/Carousel.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import type { CarouselIconType } from '../types';
 declare const __propDef: {
     props: {
         showIndicators?: boolean;
@@ -9,9 +8,6 @@ declare const __propDef: {
         slideControls?: boolean;
         loop?: boolean;
         duration?: number;
-        icons?: CarouselIconType;
-        iconSize?: number;
-        iconClass?: string;
         divClass?: string;
         indicatorDivClass?: string;
         captionClass?: string;
@@ -21,7 +17,10 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        previous: {};
+        next: {};
+    };
 };
 export declare type CarouselProps = typeof __propDef.props;
 export declare type CarouselEvents = typeof __propDef.events;

package/carousels/CarouselTransition.svelte

@@ -1,5 +1,4 @@
-<script>import { ChevronRight, ChevronLeft } from 'svelte-heros';
-import { fade, blur, fly, slide } from 'svelte/transition';
+<script>import { fade, blur, fly, slide } from 'svelte/transition';
 import Slide from './Slide.svelte';
 import Thumbnail from './Thumbnail.svelte';
 import Caption from './Caption.svelte';
@@ -16,13 +15,6 @@ export let duration = 2000;
 // Carousel
 export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
 export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
-// Slide controllers
-export let icons = {
-    next: ChevronRight,
-    prev: ChevronLeft
-};
-export let iconSize = 24;
-export let iconClass = 'text-white sm:w-6 sm:h-6 dark:text-gray-300';
 // Caption
 export let captionClass = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
 // Indicator
@@ -88,8 +80,7 @@ if (loop) {
 					{name}
 					selected={imageShowingIndex === id}
 					on:click={() => goToSlide(id)}
-					{indicatorClass}
-				/>
+					{indicatorClass} />
 			{/each}
 		</div>
 	{/if}
@@ -99,12 +90,25 @@ if (loop) {
 			on:click={prevSlide}
 			type="button"
 			class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
-			data-carousel-prev
-		>
+			data-carousel-prev>
 			<span
-				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
-			>
-				<svelte:component this={icons.prev} size={iconSize} class=" {iconClass}" />
+				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
+				{#if $$slots.previous}
+					<slot name="previous" />
+				{:else}
+					<svg
+						aria-hidden="true"
+						class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 19l-7-7 7-7" /></svg>
+				{/if}
 				<span class="hidden">Previous</span>
 			</span>
 		</button>
@@ -112,12 +116,25 @@ if (loop) {
 			on:click={nextSlide}
 			type="button"
 			class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
-			data-carousel-next
-		>
+			data-carousel-next>
 			<span
-				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
-			>
-				<svelte:component this={icons.next} size={iconSize} class=" {iconClass}" />
+				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
+				{#if $$slots.next}
+					<slot name="next" />
+				{:else}
+					<svg
+						aria-hidden="true"
+						class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 5l7 7-7 7" /></svg>
+				{/if}
 				<span class="hidden">Next</span>
 			</span>
 		</button>
@@ -138,8 +155,7 @@ if (loop) {
 				titleLink={attribution}
 				{id}
 				selected={imageShowingIndex === id}
-				on:click={() => goToSlide(id)}
-			/>
+				on:click={() => goToSlide(id)} />
 		{/each}
 	</div>
 {/if}

package/carousels/CarouselTransition.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import type { CarouselIconType } from '../types';
 import type { TransitionTypes, TransitionParamTypes } from '../types';
 declare const __propDef: {
     props: {
@@ -14,16 +13,16 @@ declare const __propDef: {
         duration?: number;
         divClass?: string;
         indicatorDivClass?: string;
-        icons?: CarouselIconType;
-        iconSize?: number;
-        iconClass?: string;
         captionClass?: string;
         indicatorClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        previous: {};
+        next: {};
+    };
 };
 export declare type CarouselTransitionProps = typeof __propDef.props;
 export declare type CarouselTransitionEvents = typeof __propDef.events;

package/dropdowns/Dropdown.svelte

@@ -2,7 +2,10 @@
 import Button from '../buttons/Button.svelte';
 import Popper from '../utils/Popper.svelte';
 import classNames from 'classnames';
-import { ChevronUp, ChevronRight, ChevronDown, ChevronLeft } from 'svelte-heros';
+import ChevronUp from '../utils/ChevronUp.svelte';
+import ChevronRight from '../utils/ChevronRight.svelte';
+import ChevronDown from '../utils/ChevronDown.svelte';
+import ChevronLeft from '../utils/ChevronLeft.svelte';
 export let label = '';
 export let inline = false;
 export let arrowIcon = true;
@@ -30,8 +33,7 @@ $: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800'
 	class={popoverClass}
 	trigger="click"
 	on:show
-	bind:open
->
+	bind:open>
 	<slot name="trigger" slot="trigger">
 		{#if inline}
 			<button class={labelClass} class:flex-row-reverse={icon == ChevronLeft}>
@@ -39,8 +41,7 @@ $: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800'
 				{#if arrowIcon}
 					<svelte:component
 						this={icon ?? ChevronDown}
-						class={classNames('h-4 w-4', icon == ChevronLeft ? 'mr-2' : 'ml-2')}
-					/>
+						class={classNames('h-4 w-4', icon == ChevronLeft ? 'mr-2' : 'ml-2')} />
 				{/if}
 			</button>
 		{:else}
@@ -49,8 +50,7 @@ $: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800'
 				{#if arrowIcon}
 					<svelte:component
 						this={icon ?? ChevronDown}
-						class={classNames('h-4 w-4', icon == ChevronLeft ? 'mr-2' : 'ml-2')}
-					/>
+						class={classNames('h-4 w-4', icon == ChevronLeft ? 'mr-2' : 'ml-2')} />
 				{/if}
 			</Button>
 		{/if}

package/index.d.ts

@@ -124,3 +124,7 @@ export { default as Secondary } from './typography/Secondary.svelte';
 export { default as TextGradient } from './typography/TextGradient.svelte';
 export { default as Underline } from './typography/Underline.svelte';
 export { default as CloseButton } from './utils/CloseButton.svelte';
+export { default as ChevronDown } from './utils/ChevronDown.svelte';
+export { default as ChevronLeft } from './utils/ChevronLeft.svelte';
+export { default as ChevronRight } from './utils/ChevronRight.svelte';
+export { default as ChevronUp } from './utils/ChevronUp.svelte';

package/index.js

@@ -158,3 +158,7 @@ export { default as TextGradient } from './typography/TextGradient.svelte';
 export { default as Underline } from './typography/Underline.svelte';
 // utils
 export { default as CloseButton } from './utils/CloseButton.svelte';
+export { default as ChevronDown } from './utils/ChevronDown.svelte';
+export { default as ChevronLeft } from './utils/ChevronLeft.svelte';
+export { default as ChevronRight } from './utils/ChevronRight.svelte';
+export { default as ChevronUp } from './utils/ChevronUp.svelte';

package/navbar/Menu.svelte

@@ -0,0 +1,36 @@
+<script>export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M3.75 6.75H20.25M3.75 12H20.25M3.75 17.25H20.25" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 6.75C3 6.33579 3.33579 6 3.75 6H20.25C20.6642 6 21 6.33579 21 6.75C21 7.16421 20.6642 7.5 20.25 7.5H3.75C3.33579 7.5 3 7.16421 3 6.75ZM3 12C3 11.5858 3.33579 11.25 3.75 11.25H20.25C20.6642 11.25 21 11.5858 21 12C21 12.4142 20.6642 12.75 20.25 12.75H3.75C3.33579 12.75 3 12.4142 3 12ZM3 17.25C3 16.8358 3.33579 16.5 3.75 16.5H20.25C20.6642 16.5 21 16.8358 21 17.25C21 17.6642 20.6642 18 20.25 18H3.75C3.33579 18 3 17.6642 3 17.25Z" fill="${color}"/> `;
+$: switch (variation) {
+    case 'outline':
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+        break;
+    case 'solid':
+        svgpath = svgsolid;
+        viewBox = '0 0 24 24';
+        break;
+    default:
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+}
+export let ariaLabel = 'bars 3';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click>
+	{@html svgpath}
+</svg>

package/navbar/Menu.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string;
+        color?: string;
+        variation?: 'solid' | 'outline';
+        ariaLabel?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type MenuProps = typeof __propDef.props;
+export declare type MenuEvents = typeof __propDef.events;
+export declare type MenuSlots = typeof __propDef.slots;
+export default class Menu extends SvelteComponentTyped<MenuProps, MenuEvents, MenuSlots> {
+}
+export {};

package/navbar/NavHamburger.svelte

@@ -1,5 +1,5 @@
 <script>import classNames from 'classnames';
-import { Menu } from 'svelte-heros';
+import Menu from './Menu.svelte';
 export let btnClass = 'ml-3 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 md:hidden';
 </script>
 
@@ -7,8 +7,7 @@ export let btnClass = 'ml-3 inline-flex items-center rounded-lg p-2 text-sm text
 	{...$$restProps}
 	class={classNames(btnClass, $$props.class)}
 	data-testid="navbar-toggle"
-	on:click
->
+	on:click>
 	<span class="sr-only">Open main menu</span>
 	<Menu class="h-6 w-6 shrink-0" />
 </button>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.25.19",
+  "version": "0.25.22",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -157,6 +157,7 @@
     "./list-group/ListItem.svelte": "./list-group/ListItem.svelte",
     "./megamenu/MegaMenu.svelte": "./megamenu/MegaMenu.svelte",
     "./modals/Modal.svelte": "./modals/Modal.svelte",
+    "./navbar/Menu.svelte": "./navbar/Menu.svelte",
     "./navbar/NavBrand.svelte": "./navbar/NavBrand.svelte",
     "./navbar/NavDropdown.svelte": "./navbar/NavDropdown.svelte",
     "./navbar/NavHamburger.svelte": "./navbar/NavHamburger.svelte",
@@ -174,6 +175,7 @@
     "./ratings/RatingComment.svelte": "./ratings/RatingComment.svelte",
     "./ratings/Review.svelte": "./ratings/Review.svelte",
     "./ratings/ScoreRating.svelte": "./ratings/ScoreRating.svelte",
+    "./ratings/Star.svelte": "./ratings/Star.svelte",
     "./sidebars/Sidebar.svelte": "./sidebars/Sidebar.svelte",
     "./sidebars/SidebarBrand.svelte": "./sidebars/SidebarBrand.svelte",
     "./sidebars/SidebarCta.svelte": "./sidebars/SidebarCta.svelte",
@@ -234,6 +236,10 @@
     "./typography/Secondary.svelte": "./typography/Secondary.svelte",
     "./typography/TextGradient.svelte": "./typography/TextGradient.svelte",
     "./typography/Underline.svelte": "./typography/Underline.svelte",
+    "./utils/ChevronDown.svelte": "./utils/ChevronDown.svelte",
+    "./utils/ChevronLeft.svelte": "./utils/ChevronLeft.svelte",
+    "./utils/ChevronRight.svelte": "./utils/ChevronRight.svelte",
+    "./utils/ChevronUp.svelte": "./utils/ChevronUp.svelte",
     "./utils/CloseButton.svelte": "./utils/CloseButton.svelte",
     "./utils/Popper.svelte": "./utils/Popper.svelte",
     "./utils/Wrapper.svelte": "./utils/Wrapper.svelte",

package/ratings/Rating.svelte

@@ -1,4 +1,4 @@
-<script>import { Star } from 'svelte-heros';
+<script>import Star from './Star.svelte';
 export let divClass = 'flex items-center';
 export let size = '24';
 export let total = 5;

package/ratings/RatingComment.svelte

@@ -1,5 +1,5 @@
 <script>import Button from '../buttons/Button.svelte';
-import { Star } from 'svelte-heros';
+import Star from './Star.svelte';
 // default is floor
 export let ceil = false;
 export let helpfullink = '';
@@ -16,8 +16,7 @@ let grayStars = comment.total - roundedRating;
 			<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
-				>
+					>{comment.user.joined}</time>
 			</p>
 		</div>
 	</div>
@@ -29,7 +28,7 @@ let grayStars = comment.total - roundedRating;
 		{/each}
 		{#each Array(grayStars) as _, star}
 			<slot name="ratingDown">
-				<Star size="26" class="px-0.5 text-gray-300 dark:text-gray-500" />
+				<Star size="24" class="px-0.5 text-gray-300 dark:text-gray-500" />
 			</slot>
 		{/each}
 		{#if comment.heading}
@@ -57,8 +56,7 @@ let grayStars = comment.total - roundedRating;
 					<a
 						href={abuselink}
 						class="pl-4 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
-						>Report abuse</a
-					>
+						>Report abuse</a>
 				{/if}
 			</div>
 		{/if}

package/ratings/Star.svelte

@@ -0,0 +1,36 @@
+<script>export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M11.4806 3.49883C11.6728 3.03685 12.3272 3.03685 12.5193 3.49883L14.6453 8.61028C14.7263 8.80504 14.9095 8.93811 15.1197 8.95497L20.638 9.39736C21.1367 9.43735 21.339 10.0598 20.959 10.3853L16.7546 13.9867C16.5945 14.1239 16.5245 14.3392 16.5734 14.5444L17.8579 19.9293C17.974 20.416 17.4446 20.8007 17.0176 20.5398L12.2932 17.6542C12.1132 17.5443 11.8868 17.5443 11.7068 17.6542L6.98238 20.5398C6.55539 20.8007 6.02594 20.416 6.14203 19.9293L7.42652 14.5444C7.47546 14.3392 7.4055 14.1239 7.24531 13.9867L3.04099 10.3853C2.661 10.0598 2.86323 9.43735 3.36197 9.39736L8.88022 8.95497C9.09048 8.93811 9.27363 8.80504 9.35464 8.61028L11.4806 3.49883Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.2108C11.2364 2.13286 12.7635 2.13286 13.2118 3.2108L15.2938 8.21652L20.6979 8.64976C21.8616 8.74306 22.3335 10.1953 21.4469 10.9549L17.3295 14.4818L18.5874 19.7553C18.8583 20.8909 17.6229 21.7884 16.6266 21.1799L11.9999 18.354L7.37329 21.1799C6.37697 21.7884 5.14158 20.8909 5.41246 19.7553L6.67038 14.4818L2.55303 10.9549C1.66639 10.1953 2.13826 8.74306 3.302 8.64976L8.70609 8.21652L10.7881 3.2108Z" fill="${color}"/> `;
+$: switch (variation) {
+    case 'outline':
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+        break;
+    case 'solid':
+        svgpath = svgsolid;
+        viewBox = '0 0 24 24';
+        break;
+    default:
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+}
+export let ariaLabel = 'star';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click>
+	{@html svgpath}
+</svg>

package/ratings/Star.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string;
+        color?: string;
+        variation?: 'solid' | 'outline';
+        ariaLabel?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type StarProps = typeof __propDef.props;
+export declare type StarEvents = typeof __propDef.events;
+export declare type StarSlots = typeof __propDef.slots;
+export default class Star extends SvelteComponentTyped<StarProps, StarEvents, StarSlots> {
+}
+export {};

package/sidebars/SidebarDropdownWrapper.svelte

@@ -1,7 +1,7 @@
 <script>import classNames from 'classnames';
 import { slide } from 'svelte/transition';
 import { quintOut } from 'svelte/easing';
-import { ChevronDown } from 'svelte-heros';
+import ChevronDown from '../utils/ChevronDown.svelte';
 export let btnClass = 'flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
 export let label = '';
 export let spanClass = 'flex-1 ml-3 text-left whitespace-nowrap';
@@ -19,14 +19,12 @@ const handleDropdown = () => {
 		on:click={() => handleDropdown()}
 		type="button"
 		class={classNames(btnClass, $$props.class)}
-		aria-controls="sidebar-dropdown"
-	>
+		aria-controls="sidebar-dropdown">
 		<svelte:component
 			this={icon.name}
 			size={icon.size}
 			color={icon.color}
-			class="mr-2 {icon.class}"
-		/>
+			class="mr-2 {icon.class}" />
 		<span class={spanClass} sidebar-toggle-item>{label}</span>
 		<ChevronDown />
 	</button>
@@ -34,8 +32,7 @@ const handleDropdown = () => {
 		<ul
 			id="dropdown"
 			class={ulClass}
-			transition:slide={{ delay: 250, duration: 300, easing: quintOut }}
-		>
+			transition:slide={{ delay: 250, duration: 300, easing: quintOut }}>
 			<slot />
 		</ul>
 	{/if}