flowbite-svelte 0.14.15 → 0.15.1

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.15",
+  "version": "0.15.1",
   "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,9 +78,9 @@
     "url": "https://github.com/themesberg/flowbite-svelte"
   },
   "dependencies": {
-    "@codewithshin/svelte-heroicons": "^1.1.3",
     "flowbite": "^1.4.2",
-    "svelte-collapse": "^0.0.4"
+    "svelte-collapse": "^0.0.4",
+    "svelte-heros": "^2.0.0"
   },
   "exports": {
     "./package.json": "./package.json",

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';

package/ratings/Rating.svelte

@@ -1,4 +1,4 @@
-<script >import { StarIconSolid } from '@codewithshin/svelte-heroicons';
+<script>import { StarSolid } from 'svelte-heros';
 export let divClass = 'flex items-center';
 export let total = 5;
 export let rating = 4;
@@ -11,12 +11,12 @@ let grayStars = total - roundedRating;
 <div class={divClass}>
 	{#each Array(roundedRating) as _, star}
 		<slot name="ratingUp">
-			<StarIconSolid className="h-5 w-5 text-yellow-300 dark:text-yellow-200" />
+			<StarSolid class="text-yellow-300 dark:text-yellow-200" />
 		</slot>
 	{/each}
 	{#each Array(grayStars) as _, star}
 		<slot name="ratingDown">
-			<StarIconSolid className="h-5 w-5 text-gray-300 dark:text-gray-500" />
+			<StarSolid class="text-gray-300 dark:text-gray-500" />
 		</slot>
 	{/each}
 	{#if $$slots.text}

package/ratings/RatingComment.svelte

@@ -1,4 +1,4 @@
-<script >export let comment;
+<script>export let comment;
 </script>
 
 <article>

package/ratings/ScoreRating.svelte

@@ -1,4 +1,4 @@
-<script >export let ratings = [];
+<script>export let ratings = [];
 export let ratings2 = [];
 export let headerLabel;
 export let desc1Class = 'bg-blue-100 w-8 text-blue-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-blue-200 dark:text-blue-800';

package/sidebars/Sidebar.svelte

@@ -1,4 +1,4 @@
-<script >import SidebarDropdown from './SidebarDropdown.svelte';
+<script>import SidebarDropdown from './SidebarDropdown.svelte';
 export let site;
 export let links;
 export let cta;
@@ -9,9 +9,7 @@ export let cta;
 		{#if site}
 			<a href={site.href} class="flex items-center pl-2.5 mb-5">
 				<img src={site.img} class="h-6 mr-3 sm:h-7" alt={site.name} />
-				<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white"
-					>{site.name}</span
-				>
+				<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">{site.name}</span>
 			</a>
 		{/if}
 		<ul class="space-y-2">
@@ -20,13 +18,9 @@ export let cta;
 					<SidebarDropdown {link} />
 				{:else}
 					<li>
-						<a
-							href={link.href}
-							rel={link.rel}
-							class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
-						>
+						<a href={link.href} rel={link.rel} class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
 							{#if link.icon}
-								<svelte:component this={link.icon} className="h-4 w-4 mr-2" />
+								<svelte:component this={link.icon} size={link.iconSize} class="mr-2 {link.iconClass}" />
 							{/if}
 							<span class="ml-3">{link.name}</span>
 							{#if link.subtext}
@@ -40,10 +34,7 @@ export let cta;
 		{#if cta}
 			<div id="dropdown-cta" class="p-4 mt-6 bg-blue-50 rounded-lg dark:bg-blue-900" role="alert">
 				<div class="flex items-center mb-3">
-					<span
-						class="bg-orange-100 text-orange-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-orange-200 dark:text-orange-900"
-						>{cta.label}</span
-					>
+					<span class="bg-orange-100 text-orange-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-orange-200 dark:text-orange-900">{cta.label}</span>
 				</div>
 				<p class="mb-3 text-sm text-blue-900 dark:text-blue-400">
 					{cta.text}

package/sidebars/SidebarDropdown.svelte

@@ -1,4 +1,4 @@
-<script >import { slide } from 'svelte/transition';
+<script>import { slide } from 'svelte/transition';
 export let link;
 let isOpen = false;
 let activeDropdown = undefined;
@@ -9,40 +9,18 @@ const handleDropdown = (id) => {
 </script>
 
 <li>
-	<button
-		type="button"
-		on:click={() => handleDropdown(link.id)}
-		class="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"
-		aria-controls="dropdown"
-		data-collapse-toggle="dropdown"
-	>
+	<button type="button" on:click={() => handleDropdown(link.id)} class="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" aria-controls="dropdown" data-collapse-toggle="dropdown">
 		{#if link.icon}
-			<svelte:component this={link.icon} className="h-4 w-4 mr-2" />
+			<svelte:component this={link.icon} class="mr-4 {link.iconClass}" size={link.iconSize} />
 		{/if}
 		<span class="flex-1 ml-3 text-left whitespace-nowrap" sidebar-toggle-item="">{link.name}</span>
-		<svg
-			sidebar-toggle-item=""
-			class="w-6 h-6"
-			fill="currentColor"
-			viewBox="0 0 20 20"
-			xmlns="http://www.w3.org/2000/svg"
-			><path
-				fill-rule="evenodd"
-				d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-				clip-rule="evenodd"
-			/></svg
-		>
+		<svg sidebar-toggle-item="" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
 	</button>
 	{#if isOpen && link.id == activeDropdown}
 		<ul id="dropdown" class="py-2 space-y-2" transition:slide={{ duration: 500 }}>
 			{#each link.children as child}
 				<li>
-					<a
-						href={child.href}
-						rel={child.rel}
-						class="flex items-center p-2 pl-11 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"
-						>{child.name}</a
-					>
+					<a href={child.href} rel={child.rel} class="flex items-center p-2 pl-11 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">{child.name}</a>
 				</li>
 			{/each}
 		</ul>

package/spinners/Spinner.svelte

@@ -1,4 +1,4 @@
-<script >export let color = 'blue';
+<script>export let color = 'blue';
 export let bg = 'text-gray-200';
 export let size = 'w-8 h-8';
 export let align = 'text-center';

package/spinners/SpinnerButton.svelte

@@ -1,4 +1,4 @@
-<script >export let color;
+<script>export let color;
 let colorClass;
 let fillColor1;
 let fillColor2;

package/tables/Table.svelte

@@ -1,4 +1,4 @@
-<script >export let header;
+<script>export let header;
 export let divClass = 'relative overflow-x-auto shadow-md sm:rounded-lg';
 export let tableClass = 'w-full text-sm text-left text-gray-500 dark:text-gray-400';
 export let theadClass = 'text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400';

package/tables/TableCheckbox.svelte

@@ -1,4 +1,4 @@
-<script >export let header;
+<script>export let header;
 export let divClass = 'relative overflow-x-auto shadow-md sm:rounded-lg';
 export let tableClass = 'w-full text-sm text-left text-gray-500 dark:text-gray-400';
 export let theadClass = 'text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400';

package/tables/TableDefaultRow.svelte

@@ -1,4 +1,4 @@
-<script >export let items;
+<script>export let items;
 export let html = false;
 export let rowState = undefined;
 let trClass;

package/tables/TableSearch.svelte

@@ -1,4 +1,4 @@
-<script >import TableDefaultRow from './TableDefaultRow.svelte';
+<script>import TableDefaultRow from './TableDefaultRow.svelte';
 export let inputValue = '';
 export let menuItems;
 export let filteredItems = [];

package/tabs/DefaultTabs.svelte

@@ -1,4 +1,4 @@
-<script >export let tabs;
+<script>export let tabs;
 </script>
 
 <ul class="flex flex-wrap border-b border-gray-200 dark:border-gray-700">

package/tabs/FullWidthTabs.svelte

@@ -1,4 +1,4 @@
-<script >export let tabs;
+<script>export let tabs;
 export let tabLabel;
 </script>
 

package/tabs/IconTabs.svelte

@@ -1,13 +1,13 @@
-<script >export let tabs;
+<script>export let tabs;
 export let iconClass = 'mr-2 w-5 h-5 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300';
 </script>
 
 <div class="border-b border-gray-200 dark:border-gray-700">
 	<ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
-		{#each tabs as { name, active, href, rel, icon }}
+		{#each tabs as { name, active, href, rel, icon, iconSize }}
 			<li class="mr-2">
 				<a {href} {rel} class={active ? 'inline-flex p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500 group' : '  inline-flex p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group '}>
-					<svelte:component this={icon} className={iconClass} />
+					<svelte:component this={icon} size={iconSize} class={iconClass} />
 					{name}
 				</a>
 			</li>

package/tabs/InteractiveTabHead.svelte

@@ -1,4 +1,4 @@
-<script >import { tabStore } from './tabStores';
+<script>import { tabStore } from './tabStores';
 export let tabs;
 export let tabId = 'myTab';
 export let activeTabValue = 1;

package/tabs/InteractiveTabs.svelte

@@ -1,4 +1,4 @@
-<script >export let tabId = 'myTab';
+<script>export let tabId = 'myTab';
 export let activeTabValue = 1;
 const handleClick = (tabValue) => () => (activeTabValue = tabValue);
 export let tabs;

package/tabs/PillTabs.svelte

@@ -1,4 +1,4 @@
-<script >export let tabs;
+<script>export let tabs;
 </script>
 
 <ul class="flex flex-wrap">

package/tabs/TabContent.svelte

@@ -1,4 +1,4 @@
-<script >import { tabStore } from './tabStores';
+<script>import { tabStore } from './tabStores';
 export let divClass = 'p-4 rounded-lg dark:bg-gray-800';
 export let tab;
 let activeTabValue;

package/tabs/UnderlineTabs.svelte

@@ -1,4 +1,4 @@
-<script >export let divClass = 'text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700';
+<script>export let divClass = 'text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700';
 export let tabs;
 </script>
 

package/timelines/Activity.svelte

@@ -1,4 +1,4 @@
-<script >export let olClass = 'relative border-l border-gray-200 dark:border-gray-700';
+<script>export let olClass = 'relative border-l border-gray-200 dark:border-gray-700';
 </script>
 
 <ol class={olClass}>

package/timelines/ActivityItem.svelte

@@ -1,4 +1,4 @@
-<script >export let activities;
+<script>export let activities;
 </script>
 
 {#each activities as { title, date, src, alt, text }}