flowbite-svelte 0.14.14 → 0.15.0

package/carousels/Carousel.svelte

@@ -1,4 +1,4 @@
-<script >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';
@@ -7,6 +7,8 @@ export let showCaptions = true;
 export let showThumbs = true;
 export let images;
 export let slideControls = true;
+export let loop = false;
+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';
@@ -37,6 +39,11 @@ const prevSlide = () => {
 };
 const goToSlide = (number) => (imageShowingIndex = number);
 let thumbWidth = 100 / images.length;
+if (loop) {
+    setInterval(() => {
+        nextSlide();
+    }, duration);
+}
 </script>
 
 <div id="default-carousel" class="relative">
@@ -47,64 +54,21 @@ let thumbWidth = 100 / images.length;
 		<!-- Slider indicators -->
 		<div class={indicatorDivClass}>
 			{#each images as { id, imgurl, name, attribution }}
-				<Indicator
-					{name}
-					selected={imageShowingIndex === id}
-					on:click={() => goToSlide(id)}
-					{indicatorClass}
-				/>
+				<Indicator {name} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} {indicatorClass} />
 			{/each}
 		</div>
 	{/if}
 	{#if slideControls}
 		<!-- Slider controls -->
-		<button
-			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
-		>
-			<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"
-			>
-				<svg
-					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
-				>
+		<button 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>
+			<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">
+				<svg 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>
 				<span class="hidden">Previous</span>
 			</span>
 		</button>
-		<button
-			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
-		>
-			<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"
-			>
-				<svg
-					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
-				>
+		<button 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>
+			<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">
+				<svg 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>
 				<span class="hidden">Next</span>
 			</span>
 		</button>
@@ -118,15 +82,7 @@ let thumbWidth = 100 / images.length;
 {#if showThumbs}
 	<div class="flex flex-row justify-center bg-gray-100">
 		{#each images as { id, imgurl, name, attribution }}
-			<Thumbnail
-				{thumbWidth}
-				thumbImg={imgurl}
-				altTag={name}
-				titleLink={attribution}
-				{id}
-				selected={imageShowingIndex === id}
-				on:click={() => goToSlide(id)}
-			/>
+			<Thumbnail {thumbWidth} thumbImg={imgurl} altTag={name} titleLink={attribution} {id} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} />
 		{/each}
 	</div>
 {/if}

package/carousels/Carousel.svelte.d.ts

@@ -6,6 +6,8 @@ declare const __propDef: {
         showThumbs?: boolean;
         images: any[];
         slideControls?: boolean;
+        loop?: boolean;
+        duration?: number;
         divClass?: string;
         indicatorDivClass?: string;
         captionClass?: string;

package/carousels/CarouselTransition.svelte

@@ -1,4 +1,4 @@
-<script >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';
@@ -10,6 +10,8 @@ export let images;
 export let slideControls = true;
 export let transitionType;
 export let transitionParams = {};
+export let loop = false;
+export let duration = 2000;
 // have a custom transition function that returns the desired transition
 function multiple(node, params) {
     switch (transitionType) {
@@ -53,6 +55,11 @@ const prevSlide = () => {
 };
 const goToSlide = (number) => (imageShowingIndex = number);
 let thumbWidth = 100 / images.length;
+if (loop) {
+    setInterval(() => {
+        nextSlide();
+    }, duration);
+}
 </script>
 
 <div id="default-carousel" class="relative">
@@ -70,64 +77,21 @@ let thumbWidth = 100 / images.length;
 		<!-- Slider indicators -->
 		<div class={indicatorDivClass}>
 			{#each images as { id, imgurl, name, attribution }}
-				<Indicator
-					{name}
-					selected={imageShowingIndex === id}
-					on:click={() => goToSlide(id)}
-					{indicatorClass}
-				/>
+				<Indicator {name} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} {indicatorClass} />
 			{/each}
 		</div>
 	{/if}
 	{#if slideControls}
 		<!-- Slider controls -->
-		<button
-			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
-		>
-			<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"
-			>
-				<svg
-					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
-				>
+		<button 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>
+			<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">
+				<svg 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>
 				<span class="hidden">Previous</span>
 			</span>
 		</button>
-		<button
-			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
-		>
-			<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"
-			>
-				<svg
-					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
-				>
+		<button 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>
+			<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">
+				<svg 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>
 				<span class="hidden">Next</span>
 			</span>
 		</button>
@@ -141,15 +105,7 @@ let thumbWidth = 100 / images.length;
 {#if showThumbs}
 	<div class="flex flex-row justify-center bg-gray-100">
 		{#each images as { id, imgurl, name, attribution }}
-			<Thumbnail
-				{thumbWidth}
-				thumbImg={imgurl}
-				altTag={name}
-				titleLink={attribution}
-				{id}
-				selected={imageShowingIndex === id}
-				on:click={() => goToSlide(id)}
-			/>
+			<Thumbnail {thumbWidth} thumbImg={imgurl} altTag={name} titleLink={attribution} {id} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} />
 		{/each}
 	</div>
 {/if}

package/carousels/CarouselTransition.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
         slideControls?: boolean;
         transitionType: TransitionTypes;
         transitionParams?: TransitionParamTypes;
+        loop?: boolean;
+        duration?: number;
         divClass?: string;
         indicatorDivClass?: string;
         captionClass?: string;

package/carousels/Indicator.svelte

@@ -1,4 +1,4 @@
-<script >export let name = '';
+<script>export let name = '';
 export let selected = false;
 export let indicatorClass = '';
 </script>

package/carousels/Slide.svelte

@@ -1,4 +1,4 @@
-<script >export let image = '';
+<script>export let image = '';
 export let altTag = '';
 export let attr = '';
 export let slideClass = '';

package/carousels/Thumbnail.svelte

@@ -1,4 +1,4 @@
-<script >export let thumbImg = '';
+<script>export let thumbImg = '';
 export let altTag = '';
 export let titleLink = '';
 export let id;

package/darkmode/DarkMode.svelte

@@ -1,4 +1,4 @@
-<script >import { onMount } from 'svelte';
+<script>import { onMount } from 'svelte';
 export let btnClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 fixed left-0 top-8 z-50';
 let mode;
 const toggleTheme = () => {

package/dropdowns/DropdownDefault.svelte

@@ -1,4 +1,4 @@
-<script >import { dropdownIdStore } from './dropdownStores';
+<script>import { dropdownIdStore } from './dropdownStores';
 import { get } from 'svelte/store';
 export let id = 'dropdown';
 export let label = 'Dropdown button';

package/dropdowns/ImgDropdown.svelte

@@ -1,4 +1,4 @@
-<script >let imgDropdownToggle = true;
+<script>let imgDropdownToggle = true;
 const handleToggle = () => {
     console.log('toggle clicked.');
     imgDropdownToggle = !imgDropdownToggle;

package/footer/LogoFooter.svelte

@@ -1,4 +1,4 @@
-<script >export let site;
+<script>export let site;
 export let links;
 export let footerClass = 'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800';
 export let divClass = 'sm:flex sm:items-center sm:justify-between';

package/footer/SimpleFooter.svelte

@@ -1,4 +1,4 @@
-<script >export let site;
+<script>export let site;
 export let links;
 export let footerClass = 'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800';
 export let siteNameClass = 'text-sm text-gray-500 sm:text-center dark:text-gray-400';

package/footer/SitemapFooter.svelte

@@ -1,4 +1,4 @@
-<script >export let site;
+<script>export let site;
 export let links;
 export let socialMedia;
 export let footerClass = 'bg-white dark:bg-gray-800';
@@ -34,9 +34,7 @@ export let allRightsReserved = 'All Rights Reserved.';
 		{/each}
 	</div>
 	<div class={copyrightDivClass}>
-		<span class={copyrightClass}
-			>{copyrightYear} <a href={site.href}>{site.name}</a>. {allRightsReserved}
-		</span>
+		<span class={copyrightClass}>{copyrightYear} <a href={site.href}>{site.name}</a>. {allRightsReserved} </span>
 		<div class={socialMediaDivClass}>
 			{#each socialMedia as { href, icon }}
 				<a {href} class={socialMediaLinkClass}>

package/footer/SocialMediaFooter.svelte

@@ -1,4 +1,4 @@
-<script >export let site;
+<script>export let site;
 export let links;
 export let socialMedia;
 export let footerClass = 'p-4 bg-white sm:p-6 dark:bg-gray-800';
@@ -56,7 +56,7 @@ export let allRightsReserved = 'All Rights Reserved.';
 		<div class={socialMediaDivClass}>
 			{#each socialMedia as { href, icon }}
 				<a {href} class={socialMediaLinkClass}>
-					<svelte:component this={icon} className={iconClass} />
+					<svelte:component this={icon} class={iconClass} />
 				</a>
 			{/each}
 		</div>

package/forms/Checkbox.svelte

@@ -1,4 +1,4 @@
-<script >export let legend = 'Checkbox variants';
+<script>export let legend = 'Checkbox variants';
 export let divClass = 'flex items-center mb-4';
 export let inputClass = 'w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
 export let labelClass = 'ml-3 text-sm font-medium text-gray-900 dark:text-gray-300';

package/forms/Fileupload.svelte

@@ -1,4 +1,4 @@
-<script >export let value = '';
+<script>export let value = '';
 export let id = 'user_avatar';
 export let label = 'Upload file';
 export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" for="user_avatar';

package/forms/FloatingLabelInput.svelte

@@ -1,4 +1,4 @@
-<script >import generateId from '../utils/generateId.js';
+<script>import generateId from '../utils/generateId.js';
 export let id = generateId();
 export let type;
 export let value = '';

package/forms/Iconinput.svelte

@@ -1,4 +1,4 @@
-<script >import generateId from '../utils/generateId.js';
+<script>import generateId from '../utils/generateId.js';
 export let label;
 export let id = generateId();
 export let type;
@@ -14,6 +14,7 @@ export let helperClass = 'mt-2 text-sm text-gray-500 dark:text-gray-400';
 export let noBorderInputClass = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
 export let noBorderDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none';
 export let iconClass = 'h-4 w-4 mr-2';
+export let iconSize = 18;
 function setType(node) {
     node.type = type;
 }
@@ -24,14 +25,14 @@ function setType(node) {
 	{#if noBorder}
 		<div class="relative">
 			<div class={noBorderDivClass}>
-				<svelte:component this={icon} className={iconClass} />
+				<svelte:component this={icon} size={iconSize} class={iconClass} />
 			</div>
 			<input bind:value use:setType {id} class={noBorderInputClass} {placeholder} />
 		</div>
 	{:else}
 		<div class="flex">
 			<span class={spanClass}>
-				<svelte:component this={icon} className={iconClass} />
+				<svelte:component this={icon} size={iconSize} class={iconClass} />
 			</span>
 			<input {type} {id} class={inputClass} {placeholder} />
 		</div>

package/forms/Iconinput.svelte.d.ts

@@ -19,6 +19,7 @@ declare const __propDef: {
         noBorderInputClass?: string;
         noBorderDivClass?: string;
         iconClass?: string;
+        iconSize?: number;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/forms/Input.svelte

@@ -1,4 +1,4 @@
-<script >import generateId from '../utils/generateId.js';
+<script>import generateId from '../utils/generateId.js';
 export let type = 'text';
 export let value = '';
 export let name = '';

package/forms/Radio.svelte

@@ -1,4 +1,4 @@
-<script >export let legend = '';
+<script>export let legend = '';
 export let divClass = 'flex items-center mb-4';
 export let inputClass = 'w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600';
 export let labelClass = 'block ml-2 text-sm font-medium text-gray-900 dark:text-gray-300';

package/forms/Select.svelte

@@ -1,4 +1,4 @@
-<script >import generateId from '../utils/generateId.js';
+<script>import generateId from '../utils/generateId.js';
 export let value;
 export let id = generateId();
 export let name = '';

package/forms/SingleCheckbox.svelte

@@ -1,4 +1,4 @@
-<script >import generateId from '../utils/generateId.js';
+<script>import generateId from '../utils/generateId.js';
 export let checked = false;
 export let id = generateId();
 export let required = false;

package/forms/Textarea.svelte

@@ -1,4 +1,4 @@
-<script >import generateId from '../utils/generateId.js';
+<script>import generateId from '../utils/generateId.js';
 export let value = '';
 export let id = generateId();
 export let name = 'message';

package/forms/Toggle.svelte

@@ -1,4 +1,4 @@
-<script >import generateId from '../utils/generateId.js';
+<script>import generateId from '../utils/generateId.js';
 export let name = 'toggle-example';
 export let id = generateId();
 export let label = 'Toggle me';

package/list-group/List.svelte

@@ -1,4 +1,4 @@
-<script >export let lists;
+<script>export let lists;
 const common = 'inline-flex relative items-center py-2 px-4 w-full text-sm font-medium hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white';
 const topClass = `${common} rounded-t-lg border-b border-gray-200`;
 const bottomClass = `${common} rounded-b-lg`;
@@ -6,11 +6,11 @@ const middleClass = `${common} border-b border-gray-200`;
 </script>
 
 <div class="w-48 text-gray-900 bg-white rounded-lg border border-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
-	{#each lists as { name, icon, href, rel }, i}
+	{#each lists as { name, icon, href, rel, iconClass, iconSize }, i}
 		{#if i === 0}
 			<button type="button" class={topClass}>
 				{#if icon}
-					<svelte:component this={icon} className="h-4 w-4 mr-2" />
+					<svelte:component this={icon} class="mr-2 {iconClass}" size={iconSize} />
 				{/if}
 				{#if href}
 					<a {href} {rel}>{name}</a>
@@ -21,7 +21,7 @@ const middleClass = `${common} border-b border-gray-200`;
 		{:else if i === lists.length - 1}
 			<button type="button" class={bottomClass}>
 				{#if icon}
-					<svelte:component this={icon} className="h-4 w-4 mr-2" />
+					<svelte:component this={icon} class="mr-2 {iconClass}" size={iconSize} />
 				{/if}
 				{#if href}
 					<a {href} {rel}>{name}</a>
@@ -32,7 +32,7 @@ const middleClass = `${common} border-b border-gray-200`;
 		{:else}
 			<button type="button" class={middleClass}>
 				{#if icon}
-					<svelte:component this={icon} className="h-4 w-4 mr-2" />
+					<svelte:component this={icon} class="mr-2 {iconClass}" size={iconSize} />
 				{/if}
 				{#if href}
 					<a {href} {rel}>{name}</a>

package/modals/ExtraLargeModal.svelte

@@ -1,4 +1,4 @@
-<script >import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 import { modalIdStore } from './modalStores';
 const dispatch = createEventDispatcher();
 export let id = 'extralarge-modal';

package/modals/LargeModal.svelte

@@ -1,4 +1,4 @@
-<script >import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 import { modalIdStore } from './modalStores';
 const dispatch = createEventDispatcher();
 export let id = 'large-modal';

package/modals/MediumModal.svelte

@@ -1,4 +1,4 @@
-<script >// import { toggleModal } from "./modalHelper";
+<script>// import { toggleModal } from "./modalHelper";
 import { modalIdStore } from './modalStores';
 import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();

package/modals/ModalButton.svelte

@@ -1,4 +1,4 @@
-<script >import { modalIdStore } from './modalStores';
+<script>import { modalIdStore } from './modalStores';
 import { get } from 'svelte/store';
 export let id = 'modal-id';
 export let btnName = 'Modal Name';

package/modals/SignInModal.svelte

@@ -1,4 +1,4 @@
-<script >import { modalIdStore } from './modalStores';
+<script>import { modalIdStore } from './modalStores';
 export let id = 'signin-modal';
 export let btnSignInColor = 'blue';
 export let titleSignIn = 'Sign in to our platform';

package/modals/SmallModal.svelte

@@ -1,4 +1,4 @@
-<script >import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 import { modalIdStore } from './modalStores';
 const dispatch = createEventDispatcher();
 export let id = 'small-modal';

package/navbar/DropdownNavbar.svelte

@@ -1,4 +1,4 @@
-<script >import { onMount } from 'svelte';
+<script>import { onMount } from 'svelte';
 import NavDropdown from './NavDropdown.svelte';
 export let user = '';
 let pathname = '';

package/navbar/NavDropdown.svelte

@@ -1,4 +1,4 @@
-<script >export let liButtonClass;
+<script>export let liButtonClass;
 export let name;
 let hidden = true;
 let block = false;

package/navbar/Navbar.svelte

@@ -1,4 +1,4 @@
-<script >import { onMount } from 'svelte';
+<script>import { onMount } from 'svelte';
 export let user = '';
 let pathname = '';
 onMount(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.14.14",
+  "version": "0.15.0",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -12,6 +12,7 @@
   "homepage": "https://flowbite-svelte.com/",
   "license": "MIT",
   "devDependencies": {
+    "@codewithshin/svelte-feathericons": "^0.1.9",
     "@codewithshin/svelte-sidebar": "^0.4.8",
     "@codewithshin/svelte-simpleicons": "^0.2.2",
     "@codewithshin/svelte-utterances": "^0.2.2",
@@ -31,7 +32,7 @@
     "prettier": "^2.5.1",
     "prettier-plugin-svelte": "^2.5.0",
     "prism-themes": "^1.9.0",
-    "svelte": "^3.44.0",
+    "svelte": "^3.47.0",
     "svelte-check": "^2.2.6",
     "svelte-preprocess": "^4.10.5",
     "svelte2tsx": "^0.5.9",
@@ -77,7 +78,7 @@
     "url": "https://github.com/themesberg/flowbite-svelte"
   },
   "dependencies": {
-    "@codewithshin/svelte-heroicons": "^1.1.3",
+    "@codewithshin/svelte-heroicons": "^1.2.0",
     "flowbite": "^1.4.2",
     "svelte-collapse": "^0.0.4"
   },

package/paginations/Next.svelte

@@ -1,4 +1,4 @@
-<script >import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 export let icon = false;
 const dispatch = createEventDispatcher();
 const next = () => {

package/paginations/Pagination.svelte

@@ -1,4 +1,4 @@
-<script >import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 export let icon = false;
 const dispatch = createEventDispatcher();
 const previous = () => {

package/paginations/Previous.svelte

@@ -1,4 +1,4 @@
-<script >import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 export let icon = false;
 const dispatch = createEventDispatcher();
 const previous = () => {

package/paginations/TableData.svelte

@@ -1,4 +1,4 @@
-<script >import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
 const previous = () => {
     dispatch('previous');

package/progressbars/Progressbar.svelte

@@ -1,4 +1,4 @@
-<script >export let progress = '45';
+<script>export let progress = '45';
 export let size = 'h-2.5';
 export let labelInside = false;
 export let labelOutside = '';

package/ratings/AdvancedRating.svelte

@@ -1,4 +1,4 @@
-<script >export let ratings = [];
+<script>export let ratings = [];
 export let divClass = 'flex items-center mt-4';
 export let labelClass = 'text-sm font-medium text-blue-600 dark:text-blue-500';
 export let ratingDivClass = 'mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700';