flowbite-svelte 0.14.14 → 0.15.0

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 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.15.0](https://github.com/themesberg/flowbite-svelte/compare/v0.14.17...v0.15.0) (2022-04-25)
+
+
+### Bug Fixes
+
+* update props dir files ([e52cfcb](https://github.com/themesberg/flowbite-svelte/commit/e52cfcbba6ce7fae124803f670ba280e95c96e85))
+
+### [0.14.17](https://github.com/themesberg/flowbite-svelte/compare/v0.14.16...v0.14.17) (2022-04-25)
+
+
+### Features
+
+* update heroicons ([9a96fca](https://github.com/themesberg/flowbite-svelte/commit/9a96fca12b1e3adc61088a56ae2c3d3ad65ceb67))
+
+### [0.14.16](https://github.com/themesberg/flowbite-svelte/compare/v0.14.15...v0.14.16) (2022-04-24)
+
+
+### Features
+
+* update svelte to 3.47.0 ([2c51f1c](https://github.com/themesberg/flowbite-svelte/commit/2c51f1c21907f7a977249e3dfe7c2fe46dd85553))
+
+### [0.14.15](https://github.com/themesberg/flowbite-svelte/compare/v0.14.14...v0.14.15) (2022-04-23)
+
+
+### Features
+
+* add loop to carousel components ([0ae0d66](https://github.com/themesberg/flowbite-svelte/commit/0ae0d66aaf74c7b588978ce88ab7c5117ee4a4e2))
+
 ### [0.14.14](https://github.com/themesberg/flowbite-svelte/compare/v0.14.13...v0.14.14) (2022-04-21)
 
 

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022 Shinichi Okada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -1,162 +1,170 @@
 # FLOWBITE-SVELTE
 
-[Flowbite-Svelte](https://flowbite-svelte.vercel.app/) is an official Flowbite component library for Svelte. All interactivities are handled by Svelte.
+[![npm version](https://badgen.net/npm/v/flowbite-svelte)](https://www.npmjs.com/package/flowbite-svelte)
+[![npm downloads](https://badgen.net/npm/dw/flowbite-svelte)](https://www.npmjs.com/package/flowbite-svelte)
+[![release](https://badgen.net/github/release/themesberg/flowbite-svelte)](https://github.com/themesberg/flowbite-svelte/releases)
+[![license](https://badgen.net/npm/license/flowbite-svelte)](https://github.com/themesberg/flowbite-svelte/blob/main/LICENSE)
+
+
+
+[Flowbite-Svelte](https://flowbite-svelte.com/) is an official Flowbite component library for Svelte. All interactivities are handled by Svelte.
 
 ## Installation
 
-- [Getting started](https://flowbite-svelte.vercel.app/getting-started)
-- [About](https://flowbite-svelte.vercel.app/about)
-- [Type list](https://flowbite-svelte.vercel.app/type-list)
-- [CLI](https://flowbite-svelte.vercel.app/cli)
+- [Getting started](https://flowbite-svelte.com/getting-started)
+- [About](https://flowbite-svelte.com/about)
+- [Type list](https://flowbite-svelte.com/type-list)
+- [CLI](https://flowbite-svelte.com/cli)
 
 ## Accordion components
 
-- [Default accordion](https://flowbite-svelte.vercel.app/accordions/default)
-- [Icon accordion](https://flowbite-svelte.vercel.app/accordions/icon-accordion)
+- [Default accordion](https://flowbite-svelte.com/accordions/default)
+- [Icon accordion](https://flowbite-svelte.com/accordions/icon-accordion)
 
 ## Alert components
 
-- [Default alert](https://flowbite-svelte.vercel.app/alerts/default-alert)
-- [Border alert](https://flowbite-svelte.vercel.app/alerts/border-alert)
-- [Information alert](https://flowbite-svelte.vercel.app/alerts/information-alert)
-- [Animation alert](https://flowbite-svelte.vercel.app/alerts/animation)
+- [Default alert](https://flowbite-svelte.com/alerts/default-alert)
+- [Border alert](https://flowbite-svelte.com/alerts/border-alert)
+- [Information alert](https://flowbite-svelte.com/alerts/information-alert)
+- [Animation alert](https://flowbite-svelte.com/alerts/animation)
 
 ## Avatar components
 
-- [Avatar](https://flowbite-svelte.vercel.app/avatar)
+- [Avatar](https://flowbite-svelte.com/avatar)
 
 ## Badges components
 
-- [Default badge](https://flowbite-svelte.vercel.app/badges/default)
-- [Icon badge](https://flowbite-svelte.vercel.app/badges/badge-icon)
-- [Link badge](https://flowbite-svelte.vercel.app/badges/badge-link)
+- [Default badge](https://flowbite-svelte.com/badges/default)
+- [Icon badge](https://flowbite-svelte.com/badges/badge-icon)
+- [Link badge](https://flowbite-svelte.com/badges/badge-link)
 
 ## Breadcrumb components
 
-- [Breadcrumb](https://flowbite-svelte.vercel.app/breadcrumbs)
+- [Breadcrumb](https://flowbite-svelte.com/breadcrumbs)
 
 ## Button group compnents
 
-- [Default button group](https://flowbite-svelte.vercel.app/button-groups/default)
-- [Outline button group](https://flowbite-svelte.vercel.app/button-groups/outline)
+- [Default button group](https://flowbite-svelte.com/button-groups/default)
+- [Outline button group](https://flowbite-svelte.com/button-groups/outline)
 
 ## Button components
 
-- [Setup](https://flowbite-svelte.vercel.app/buttons/setup)
-- [Default Button](https://flowbite-svelte.vercel.app/buttons/default)
-- [Colored Shadow Button](https://flowbite-svelte.vercel.app/buttons/colored-shadow)
-- [Gradient Duotone Button](https://flowbite-svelte.vercel.app/buttons/gradient-duotone)
-- [Gradient Monochrome Button](https://flowbite-svelte.vercel.app/buttons/gradient-monochrome)
-- [Gradietn Outline Button](https://flowbite-svelte.vercel.app/buttons/gradient-outline)
-- [Outlined Button](https://flowbite-svelte.vercel.app/buttons/outlined)
-- [Rounded Button](https://flowbite-svelte.vercel.app/buttons/rounded)
+- [Setup](https://flowbite-svelte.com/buttons/setup)
+- [Default Button](https://flowbite-svelte.com/buttons/default)
+- [Colored Shadow Button](https://flowbite-svelte.com/buttons/colored-shadow)
+- [Gradient Duotone Button](https://flowbite-svelte.com/buttons/gradient-duotone)
+- [Gradient Monochrome Button](https://flowbite-svelte.com/buttons/gradient-monochrome)
+- [Gradietn Outline Button](https://flowbite-svelte.com/buttons/gradient-outline)
+- [Outlined Button](https://flowbite-svelte.com/buttons/outlined)
+- [Rounded Button](https://flowbite-svelte.com/buttons/rounded)
 
 ## Card components
 
-- [Default Card](https://flowbite-svelte.vercel.app/cards/card)
-- [CTA Card](https://flowbite-svelte.vercel.app/cards/cta)
-- [Ecommerce Card](https://flowbite-svelte.vercel.app/cards/ecommerce)
-- [Horizontal Card](https://flowbite-svelte.vercel.app/cards/horizontal)
-- [Interactive Card](https://flowbite-svelte.vercel.app/cards/interactive)
-- [List Card](https://flowbite-svelte.vercel.app/cards/list)
-- [Signin Card](https://flowbite-svelte.vercel.app/cards/signin)
+- [Default Card](https://flowbite-svelte.com/cards/card)
+- [CTA Card](https://flowbite-svelte.com/cards/cta)
+- [Ecommerce Card](https://flowbite-svelte.com/cards/ecommerce)
+- [Horizontal Card](https://flowbite-svelte.com/cards/horizontal)
+- [Interactive Card](https://flowbite-svelte.com/cards/interactive)
+- [List Card](https://flowbite-svelte.com/cards/list)
+- [Signin Card](https://flowbite-svelte.com/cards/signin)
 
 ## Carousel components
 
-- [Carousel](https://flowbite-svelte.vercel.app/carousels/default)
-- [Carousel with transition](https://flowbite-svelte.vercel.app/carousels/transition)
+- [Carousel](https://flowbite-svelte.com/carousels/default)
+- [Carousel with transition](https://flowbite-svelte.com/carousels/transition)
 
 ## Dark mode components
 
-- [Dark mode](https://flowbite-svelte.vercel.app/darkmode)
+- [Dark mode](https://flowbite-svelte.com/darkmode)
 
 ## Dropdown components
 
-- [Dropdown](https://flowbite-svelte.vercel.app/dropdowns/default)
-- [Dropdown with Image](https://flowbite-svelte.vercel.app/dropdowns/image)
+- [Dropdown](https://flowbite-svelte.com/dropdowns/default)
+- [Dropdown with Image](https://flowbite-svelte.com/dropdowns/image)
 
 ## Form components
 
-- [Forms](https://flowbite-svelte.vercel.app/forms)
+- [Forms](https://flowbite-svelte.com/forms)
 
 ## Footer components
 
-- [Default Footer](https://flowbite-svelte.vercel.app/footer/default)
-- [Footer with Logo](https://flowbite-svelte.vercel.app/footer/logo)
-- [Footer with Sitemap](https://flowbite-svelte.vercel.app/footer/sitemap)
-- [Footer with Socialmedia](https://flowbite-svelte.vercel.app/footer/socialmedia)
+- [Default Footer](https://flowbite-svelte.com/footer/default)
+- [Footer with Logo](https://flowbite-svelte.com/footer/logo)
+- [Footer with Sitemap](https://flowbite-svelte.com/footer/sitemap)
+- [Footer with Socialmedia](https://flowbite-svelte.com/footer/socialmedia)
 
 ## Icons components
 
-- [Heroicons](https://flowbite-svelte.vercel.app/icons/heroicons)
-- [Simpleicons](https://flowbite-svelte.vercel.app/icons/simple-icons)
+- [Heroicons](https://flowbite-svelte.com/icons/heroicons)
+- [Simpleicons](https://flowbite-svelte.com/icons/simple-icons)
+- [Feathericons](https://flowbite-svelte.com/icons/feathericons)
 
 ## List group components
 
-- [List group](https://flowbite-svelte.vercel.app/list-group)
+- [List group](https://flowbite-svelte.com/list-group)
 
 ## Modal components
 
-- [Small Modal](https://flowbite-svelte.vercel.app/modals/small)
-- [Medium Modal](https://flowbite-svelte.vercel.app/modals/medium)
-- [Large Modal](https://flowbite-svelte.vercel.app/modals/large)
-- [Extra Large Modal](https://flowbite-svelte.vercel.app/modals/extra-large)
-- [Signin Modal](https://flowbite-svelte.vercel.app/modals/signin)
-- [All Modals](https://flowbite-svelte.vercel.app/modals/all-modals)
+- [Small Modal](https://flowbite-svelte.com/modals/small)
+- [Medium Modal](https://flowbite-svelte.com/modals/medium)
+- [Large Modal](https://flowbite-svelte.com/modals/large)
+- [Extra Large Modal](https://flowbite-svelte.com/modals/extra-large)
+- [Signin Modal](https://flowbite-svelte.com/modals/signin)
+- [All Modals](https://flowbite-svelte.com/modals/all-modals)
 
 ## Navbar components
 
-- [Default Navbar](https://flowbite-svelte.vercel.app/navbars/default)
-- [Dropdown Navbar](https://flowbite-svelte.vercel.app/navbars/dropdown)
+- [Default Navbar](https://flowbite-svelte.com/navbars/default)
+- [Dropdown Navbar](https://flowbite-svelte.com/navbars/dropdown)
 
 ## Pagination components
 
-- [Pagination](https://flowbite-svelte.vercel.app/paginations)
+- [Pagination](https://flowbite-svelte.com/paginations)
 
 ## Progress bar
 
-- [Probress bar](https://flowbite-svelte.vercel.app/progressbars)
+- [Probress bar](https://flowbite-svelte.com/progressbars)
 
 ## Sidebar components
 
-- [Sidebar](https://flowbite-svelte.vercel.app/sidebars)
+- [Sidebar](https://flowbite-svelte.com/sidebars)
 
 ## Spinner components
 
-- [Default Spinner](https://flowbite-svelte.vercel.app/spinners/default)
-- [Button Spinner](https://flowbite-svelte.vercel.app/spinners/button-spinner)
+- [Default Spinner](https://flowbite-svelte.com/spinners/default)
+- [Button Spinner](https://flowbite-svelte.com/spinners/button-spinner)
 
 ## Tab components
 
-- [Default Tabs](https://flowbite-svelte.vercel.app/tabs/default-tabs)
-- [Underline Tabs](https://flowbite-svelte.vercel.app/tabs/underline-tabs)
-- [Icon Tabs](https://flowbite-svelte.vercel.app/tabs/icon-tabs)
-- [Full width Tabs](https://flowbite-svelte.vercel.app/tabs/full-width-tabs)
-- [Interactive Tabs](https://flowbite-svelte.vercel.app/tabs/interactive-tabs)
-- [Interactive Tabs 2](https://flowbite-svelte.vercel.app/tabs/interactive-tabs-2)
-- [Multiple Interactive Tabs](https://flowbite-svelte.vercel.app/tabs/multiple-interactive-tabs)
-- [Pill Tabs](https://flowbite-svelte.vercel.app/tabs/pilltabs)
+- [Default Tabs](https://flowbite-svelte.com/tabs/default-tabs)
+- [Underline Tabs](https://flowbite-svelte.com/tabs/underline-tabs)
+- [Icon Tabs](https://flowbite-svelte.com/tabs/icon-tabs)
+- [Full width Tabs](https://flowbite-svelte.com/tabs/full-width-tabs)
+- [Interactive Tabs](https://flowbite-svelte.com/tabs/interactive-tabs)
+- [Interactive Tabs 2](https://flowbite-svelte.com/tabs/interactive-tabs-2)
+- [Multiple Interactive Tabs](https://flowbite-svelte.com/tabs/multiple-interactive-tabs)
+- [Pill Tabs](https://flowbite-svelte.com/tabs/pilltabs)
 
 ## Table components
 
-- [Tables](https://flowbite-svelte.vercel.app/tables)
+- [Tables](https://flowbite-svelte.com/tables)
 
 ## Timeline components
 
-- [Default timeline](https://flowbite-svelte.vercel.app/timelines/default)
-- [Vetical timeline](https://flowbite-svelte.vercel.app/timelines/vertical)
-- [Horizontal timeline](https://flowbite-svelte.vercel.app/timelines/horizontal)
-- [Activity log](https://flowbite-svelte.vercel.app/timelines/activity)
-- [Grouped timeline](https://flowbite-svelte.vercel.app/timelines/group)
+- [Default timeline](https://flowbite-svelte.com/timelines/default)
+- [Vetical timeline](https://flowbite-svelte.com/timelines/vertical)
+- [Horizontal timeline](https://flowbite-svelte.com/timelines/horizontal)
+- [Activity log](https://flowbite-svelte.com/timelines/activity)
+- [Grouped timeline](https://flowbite-svelte.com/timelines/group)
 
 ## Toast components
 
-- [Toast](https://flowbite-svelte.vercel.app/toasts)
+- [Toast](https://flowbite-svelte.com/toasts)
 
 ## Tooltip components
 
-- [Default Tooltip](https://flowbite-svelte.vercel.app/tooltips/default)
-- [Light Tooltip](https://flowbite-svelte.vercel.app/tooltips/light)
+- [Default Tooltip](https://flowbite-svelte.com/tooltips/default)
+- [Light Tooltip](https://flowbite-svelte.com/tooltips/light)
 
 ## Tests
 

package/accordions/AccordionDefault.svelte

@@ -1,4 +1,4 @@
-<script >import { onDestroy } from 'svelte';
+<script>import { onDestroy } from 'svelte';
 import { setContext } from 'svelte';
 import { createEventDispatcher } from 'svelte';
 import { writable } from 'svelte/store';

package/accordions/AccordionItem.svelte

@@ -1,4 +1,4 @@
-<script >import { getContext } from 'svelte';
+<script>import { getContext } from 'svelte';
 import collapse from 'svelte-collapse';
 import { ChevronDownIconSolid, ChevronUpIconSolid } from '@codewithshin/svelte-heroicons';
 export let id = '';

package/alerts/Alert.svelte

@@ -1,4 +1,4 @@
-<script >import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
 export let color = 'blue';
 export let alertId = 'alert-1';

package/alerts/BorderAlert.svelte

@@ -1,4 +1,4 @@
-<script >export let color = 'blue';
+<script>export let color = 'blue';
 export let alertId = 'alert-border-1';
 export let closeBtn = false;
 let hidden = false;

package/alerts/InfoAlert.svelte

@@ -1,4 +1,4 @@
-<script >export let color = 'blue';
+<script>export let color = 'blue';
 export let alertId = 'alert-additional-content-1';
 export let infoLink = undefined;
 export let closeBtn = false;

package/auth/Confirm.svelte

@@ -1,4 +1,4 @@
-<script >import { Button, Alert, Spinner } from '../index';
+<script>import { Button, Alert, Spinner } from '../index';
 export let loginLink;
 export let success;
 export let error;

package/auth/ForgotPassword.svelte

@@ -1,4 +1,4 @@
-<script >import { Alert } from '../index';
+<script>import { Alert } from '../index';
 export let forgot = undefined;
 export let email = '';
 export let error = '';

package/auth/Login.svelte

@@ -1,4 +1,4 @@
-<script >import { Alert } from '../index';
+<script>import { Alert } from '../index';
 export let login = undefined;
 export let title = 'Sign in';
 export let btnSignInColor = 'blue';

package/auth/Register.svelte

@@ -1,4 +1,4 @@
-<script >import { Alert } from '../index';
+<script>import { Alert } from '../index';
 import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
 export let register = undefined;

package/auth/Reset.svelte

@@ -1,4 +1,4 @@
-<script >import { Alert } from '../index';
+<script>import { Alert } from '../index';
 export let resetpw = undefined;
 export let password = '';
 export let email = '';

package/avatar/Avatar.svelte

@@ -1,4 +1,4 @@
-<script >export let avatar = {};
+<script>export let avatar = {};
 let isCircle = avatar.round ? 'rounded-full' : 'rounded';
 let isBorder = avatar.border ? 'p-1 ring-2 ring-gray-300 dark:ring-gray-500' : '';
 export let avatarClass = `w-${avatar.size} h-${avatar.size} ${isCircle} ${isBorder}`;

package/badges/Badge.svelte

@@ -1,4 +1,4 @@
-<script >export let textSize = 'text-xs';
+<script>export let textSize = 'text-xs';
 export let name = 'Read more';
 export let color = 'blue';
 let badgeClass;

package/badges/BadgeIcon.svelte

@@ -1,4 +1,4 @@
-<script >export let textSize = 'text-xs';
+<script>export let textSize = 'text-xs';
 export let name = '';
 export let color = 'blue';
 let badgeClass;

package/badges/BadgeLink.svelte

@@ -1,4 +1,4 @@
-<script >export let textSize = 'text-xs';
+<script>export let textSize = 'text-xs';
 export let name = 'Read more';
 export let color = 'blue';
 export let href = '/';

package/breadcrumbs/Breadcrumb.svelte

@@ -1,4 +1,4 @@
-<script >export let crumbs = [];
+<script>export let crumbs = [];
 export let homeClass = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
 export let crumbClass = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
 export let solid = false;

package/buttongroups/ButtonGroup.svelte

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

package/buttongroups/ButtonGroupOutline.svelte

@@ -1,4 +1,4 @@
-<script >export let buttons;
+<script>export let buttons;
 let btnLength = buttons.length;
 let classFirst = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent rounded-l-lg border border-gray-900 hover:bg-gray-900 hover:text-white focus:z-10 focus:ring-2 focus:ring-gray-500 focus:bg-gray-900 focus:text-white dark:border-white dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:bg-gray-700';
 let classMiddle = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent border-t border-b border-gray-900 hover:bg-gray-900 hover:text-white focus:z-10 focus:ring-2 focus:ring-gray-500 focus:bg-gray-900 focus:text-white dark:border-white dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:bg-gray-700';
@@ -6,11 +6,11 @@ let classLast = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gra
 </script>
 
 <div class="inline-flex rounded-md shadow-sm">
-	{#each buttons as { href, name, rel, icon }, i}
+	{#each buttons as { href, name, rel, icon, iconClass, iconSize }, i}
 		{#if i === 0}
 			<button type="button" class={classFirst}>
 				{#if icon}
-					<svelte:component this={icon} className="h-4 w-4 mr-2" />
+					<svelte:component this={icon} size={iconSize} class="mr-2 {iconClass}" />
 				{/if}
 				{#if href}
 					<a {href} {rel}>{name}</a>
@@ -21,7 +21,7 @@ let classLast = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gra
 		{:else if i === btnLength - 1}
 			<button type="button" class={classLast}>
 				{#if icon}
-					<svelte:component this={icon} className="h-4 w-4 mr-2" />
+					<svelte:component this={icon} size={iconSize} class="mr-2 {iconClass}" />
 				{/if}
 				{#if href}
 					<a {href} {rel}>{name}</a>
@@ -32,7 +32,7 @@ let classLast = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gra
 		{:else}
 			<button type="button" class={classMiddle}>
 				{#if icon}
-					<svelte:component this={icon} className="h-4 w-4 mr-2" />
+					<svelte:component this={icon} size={iconSize} class="mr-2 {iconClass}" />
 				{/if}
 				{#if href}
 					<a {href} {rel}>{name}</a>

package/buttons/Button.svelte

@@ -1,4 +1,4 @@
-<script >export let rounded = false;
+<script>export let rounded = false;
 export let textSize = 'text-sm';
 export let name = 'Read more';
 export let btnColor = 'blue';

package/buttons/ColorShadowButton.svelte

@@ -1,4 +1,4 @@
-<script >export let textSize = 'text-sm';
+<script>export let textSize = 'text-sm';
 export let color = 'blue';
 export let name = 'Read more';
 let btnClass;

package/buttons/GradientDuotoneButton.svelte

@@ -1,4 +1,4 @@
-<script >export let textSize = 'text-sm';
+<script>export let textSize = 'text-sm';
 export let color = 'purple2blue';
 export let name = 'Read more';
 let btnClass;

package/buttons/GradientMonochromeButton.svelte

@@ -1,4 +1,4 @@
-<script >export let textSize = 'text-sm';
+<script>export let textSize = 'text-sm';
 export let color = 'blue';
 export let name = 'Read more';
 let btnClass;

package/buttons/GradientOutlineButton.svelte

@@ -1,4 +1,4 @@
-<script >export let textSize = 'text-sm';
+<script>export let textSize = 'text-sm';
 export let color = 'purple2blue';
 export let name = 'Read more';
 export let type = 'button';

package/cards/Card.svelte

@@ -1,4 +1,4 @@
-<script >export let link = '';
+<script>export let link = '';
 export let rel = '';
 export let alt = '';
 export let img = '';

package/cards/CtaCard.svelte

@@ -1,4 +1,4 @@
-<script >import Button from '../buttons/Button.svelte';
+<script>import Button from '../buttons/Button.svelte';
 export let title = 'Work fast from anywhere';
 export let headColor = 'gray';
 export let btns;

package/cards/EcommerceCard.svelte

@@ -1,4 +1,4 @@
-<script >export let img;
+<script>export let img;
 export let href = '/';
 export let btnColor = 'blue';
 export let rel = '';

package/cards/HorizontalCard.svelte

@@ -1,4 +1,4 @@
-<script >export let link = '';
+<script>export let link = '';
 export let rel = '';
 export let img = '/images/image-4.jpeg';
 export let alt = '';

package/cards/InteractiveCard.svelte

@@ -1,4 +1,4 @@
-<script >let isOpen = true;
+<script>let isOpen = true;
 const toggleDropdown = () => {
     isOpen = !isOpen;
 };

package/cards/ListCard.svelte

@@ -1,4 +1,4 @@
-<script >export let lists;
+<script>export let lists;
 export let title = 'Latest Customers';
 export let action;
 export let divClass = 'p-4 max-w-md bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700';

package/cards/SignInCard.svelte

@@ -1,4 +1,4 @@
-<script >import Alert from '../alerts/Alert.svelte';
+<script>import Alert from '../alerts/Alert.svelte';
 export let login;
 export let title = 'Sign in';
 export let btnSignInColor = 'blue';

package/carousels/Caption.svelte

@@ -1,4 +1,4 @@
-<script >export let caption = '';
+<script>export let caption = '';
 export let captionClass = '';
 </script>