flowbite-svelte 0.22.25 → 0.22.28

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.22.28](https://github.com/themesberg/flowbite-svelte/compare/v0.22.27...v0.22.28) (2022-08-02)
+
+
+### Features
+
+* drawer on progress ([027c6de](https://github.com/themesberg/flowbite-svelte/commit/027c6de72ff563df34a5d56fbe9d8ea571440ff8))
+* start working drawer ([55a0ebf](https://github.com/themesberg/flowbite-svelte/commit/55a0ebfcb29743ad1b5222cad41b6ccf8610582b))
+
+
+### Bug Fixes
+
+* update Tooltip component ([df80539](https://github.com/themesberg/flowbite-svelte/commit/df8053996f8ea67d96ee5e70976a61f13e7df2ec))
+
+### [0.22.27](https://github.com/themesberg/flowbite-svelte/compare/v0.22.26...v0.22.27) (2022-08-01)
+
+
+### Bug Fixes
+
+* update skeleton components ([6c49370](https://github.com/themesberg/flowbite-svelte/commit/6c49370ef244234373d4b87cb1a60e4aebdbf86f))
+* update Svelte-Heros icon for Rating component ([d1c03fa](https://github.com/themesberg/flowbite-svelte/commit/d1c03fa4a0cb4b2cd4ccfe956d7d36ebd4161ed4))
+
+### [0.22.26](https://github.com/themesberg/flowbite-svelte/compare/v0.22.25...v0.22.26) (2022-07-30)
+
+
+### Features
+
+* avatar w/tooltip / initials ([6b9a333](https://github.com/themesberg/flowbite-svelte/commit/6b9a333c96f3485b33a2fdeecc113138452acca0))
+
 ### [0.22.25](https://github.com/themesberg/flowbite-svelte/compare/v0.22.24...v0.22.25) (2022-07-29)
 
 

package/avatar/Avatar.svelte

@@ -9,7 +9,6 @@ export let stacked = false;
 export let dot = { top: false, color: 'bg-gray-300 dark:bg-gray-500' };
 export let alt = '';
 export let size = 'md';
-// export let ring: string = 'ring-gray-300 dark:ring-gray-500';
 const sizes = {
     xs: 'w-6 h-6',
     sm: 'w-8 h-8',
@@ -18,21 +17,23 @@ const sizes = {
     xl: 'w-36 h-36'
 };
 let avatarClass;
-$: avatarClass = classNames(rounded ? 'rounded' : 'rounded-full', border && 'p-1 ring-2 ring-gray-300 dark:ring-gray-500', sizes[size], stacked && 'border-2 -ml-4 border-white dark:border-gray-800', $$props.class);
+$: avatarClass = classNames(rounded ? 'rounded' : 'rounded-full', border && 'p-1 ring-2 ring-gray-300 dark:ring-gray-500', sizes[size], stacked && 'border-2 -ml-4 border-white dark:border-gray-800', 'bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300', $$props.class);
 </script>
 
 <Dot show={$$props.dot} {rounded} {...dot} {size}>
 	{#if src}
 		<img class={avatarClass} {alt} {src} />
 	{:else if $$slots.default}
-		<a
-			class="flex justify-center items-center {avatarClass} text-xs font-medium text-white bg-gray-700 hover:bg-gray-600"
+		<svelte:element
+			this={href ? 'a' : 'div'}
+			class="flex justify-center items-center text-xs font-medium {avatarClass}"
 			{href}
-			><slot />
-		</a>
+		>
+			<slot />
+		</svelte:element>
 	{:else}
-		<div class={avatarClass}>
+		<svelte:element this={href ? 'a' : 'div'} class={avatarClass}>
 			<AvatarPlaceholder {rounded} />
-		</div>
+		</svelte:element>
 	{/if}
 </Dot>

package/avatar/Placeholder.svelte

@@ -2,7 +2,7 @@
 </script>
 
 <svg
-	class="text-gray-400 bg-gray-200 dark:bg-gray-600 {rounded ? 'rounded' : 'rounded-full'}"
+	class="text-gray-400 bg-gray-100 dark:bg-gray-600 {rounded ? 'rounded' : 'rounded-full'}"
 	fill="currentColor"
 	viewBox="0 0 16 16"
 	xmlns="http://www.w3.org/2000/svg"

package/breadcrumbs/Breadcrumb.svelte

@@ -3,7 +3,7 @@ export let navClass = 'flex';
 export let olClass = 'inline-flex items-center space-x-1 md:space-x-3';
 </script>
 
-<nav aria-label="Breadcrumb" class={classNames(navClass, $$props.classNav)} {...$$restProps}>
+<nav aria-label="Breadcrumb" {...$$restProps} class={classNames(navClass, $$props.classNav)}>
 	<ol class={classNames(olClass, $$props.classOl)}>
 		<slot />
 	</ol>

package/buttongroups/ButtonGroupItem.svelte

@@ -1,5 +1,5 @@
-<script>export let type = 'button';
-import classNames from 'classnames';
+<script>import classNames from 'classnames';
+export let type = 'button';
 export let btnClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white first:rounded-l-lg border-t border-b last:rounded-r-md border-l last:border-r 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';
 export let outlineClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent first:rounded-l-lg border-t border-b  last:rounded-r-md border-l last:border-r 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';
 export let outline = false;

package/buttons/Button.svelte

@@ -1,6 +1,5 @@
 <script>import classNames from 'classnames';
 import { getContext } from 'svelte';
-const background = getContext('background');
 export let pill = false;
 export let outline = false;
 export let gradient = false;
@@ -8,6 +7,7 @@ export let size = 'md';
 export let href = undefined;
 export let color = 'blue';
 export let shadow = null;
+const background = getContext('background');
 const colorClasses = {
     blue: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800',
     dark: 'text-white bg-gray-800 hover:bg-gray-900 focus:ring-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700',

package/cards/EcommerceCard.svelte

@@ -37,7 +37,7 @@ const linkColors = {
 	</a>
 	{#if stars}
 		<Rating rating={stars} divClass={spanClass}>
-			<Badge slot="text" color={btnColor}>5</Badge>
+			<Badge slot="text" color={btnColor}>{stars}</Badge>
 		</Rating>
 	{/if}
 	<slot />

package/carousels/CarouselTransition.svelte

@@ -13,19 +13,6 @@ 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) {
-        case 'slide':
-            return slide(node, params);
-        case 'blur':
-            return blur(node, params);
-        case 'fly':
-            return fly(node, params);
-        case 'fade':
-            return fade(node, params);
-    }
-}
 // 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';
@@ -40,6 +27,19 @@ export let iconClass = 'text-white sm:w-6 sm:h-6 dark:text-gray-300';
 export let captionClass = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
 // Indicator
 export let indicatorClass = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
+// have a custom transition function that returns the desired transition
+function multiple(node, params) {
+    switch (transitionType) {
+        case 'slide':
+            return slide(node, params);
+        case 'blur':
+            return blur(node, params);
+        case 'fly':
+            return fly(node, params);
+        case 'fade':
+            return fade(node, params);
+    }
+}
 // Slide
 // export let slideClass: string = 'hidden';
 let imageShowingIndex = 1;

package/drawers/Drawer.svelte

@@ -0,0 +1,44 @@
+<script>import classNames from 'classnames';
+import { fly, slide, blur, fade } from 'svelte/transition';
+import { clickOutside } from '../utils/clickOutside';
+let drawerOpen = false;
+export let id = 'drawer-example';
+export let divClass = 'overflow-y-auto fixed z-40 p-4 w-80 h-screen bg-white dark:bg-gray-800';
+export let transitionParams = {};
+export let transitionType = 'fly';
+function multiple(node, params) {
+    switch (transitionType) {
+        case 'slide':
+            return slide(node, params);
+        case 'blur':
+            return blur(node, params);
+        case 'fly':
+            return fly(node, params);
+        case 'fade':
+            return fade(node, params);
+    }
+}
+let toggle = () => {
+    drawerOpen = !drawerOpen;
+};
+</script>
+
+<div
+	use:clickOutside={() => {
+		if (drawerOpen) {
+			drawerOpen = false;
+		}
+	}}
+>
+	{#if drawerOpen}
+		<div
+			{id}
+			{...$$restProps}
+			class={classNames(divClass, $$props.class)}
+			transition:multiple={transitionParams}
+			tabindex="-1"
+		>
+			<slot {drawerOpen} {toggle} />
+		</div>
+	{/if}
+</div>

package/drawers/Drawer.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import type { drawerTransitionParamTypes, drawerTransitionTypes } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id?: string;
+        divClass?: string;
+        transitionParams?: drawerTransitionParamTypes;
+        transitionType?: drawerTransitionTypes;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            drawerOpen: boolean;
+            toggle: () => void;
+        };
+    };
+};
+export declare type DrawerProps = typeof __propDef.props;
+export declare type DrawerEvents = typeof __propDef.events;
+export declare type DrawerSlots = typeof __propDef.slots;
+export default class Drawer extends SvelteComponentTyped<DrawerProps, DrawerEvents, DrawerSlots> {
+}
+export {};

package/forms/FloatingLabelInput.svelte

@@ -7,6 +7,7 @@ export let size = 'default';
 export let color = 'base';
 export let value = '';
 export let label = '';
+export let ref = null;
 const divClasses = {
     filled: 'relative',
     outlined: 'relative',
@@ -60,7 +61,6 @@ const labelColorClasses = {
     green: 'text-green-600 dark:text-green-500',
     red: 'text-red-600 dark:text-red-500'
 };
-export let ref = null;
 // you need to this to avoid 2-way binding
 function setType(node) {
     node.type = type;

package/forms/Input.svelte

@@ -5,12 +5,12 @@ export let value = '';
 export let size = 'md';
 export let inputClass = 'block w-full border disabled:cursor-not-allowed disabled:opacity-50 rounded-lg';
 export let color = 'base';
+export let ref = null;
 const colorClasses = {
     base: 'bg-gray-50 border-gray-300 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500',
     green: 'border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500',
     red: 'border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500'
 };
-export let ref = null;
 // tinted if put in component having its own background
 let background = getContext('background');
 // you need to this to avoid 2-way binding

package/forms/Select.svelte

@@ -4,9 +4,9 @@ export let value;
 export let placeholder = 'Choose option ...';
 export let underline = false;
 export let size = 'md';
-const common = 'block w-full';
 export let defaultClass = 'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 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 underlineClass = 'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer';
+const common = 'block w-full';
 const sizes = {
     sm: 'text-sm p-2',
     md: 'text-sm p-2.5',

package/forms/SimpleSearch.svelte

@@ -1,6 +1,4 @@
 <script>import { getContext } from 'svelte';
-// tainted if put in component having its own background
-let background = getContext('background');
 export let id = '';
 export let labelClass = 'sr-only';
 export let iconClass = 'w-5 h-5 text-gray-500 dark:text-gray-400';
@@ -8,6 +6,8 @@ export let iconDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3 poin
 export let inputClass = '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:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
 export let btnClass = 'p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
 export let placeholder = 'Search';
+// tainted if put in component having its own background
+let background = getContext('background');
 </script>
 
 <form class="flex items-center" on:submit>

package/forms/Toggle.svelte

@@ -26,7 +26,16 @@ let divClass;
 $: divClass = classNames(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[$$restProps.color ?? 'blue'], sizes[size], 'relative');
 </script>
 
-<Checkbox custom {...$$restProps} class={$$props.class}	{value}	bind:checked bind:group	on:click on:change>
+<Checkbox
+	custom
+	{...$$restProps}
+	class={$$props.class}
+	{value}
+	bind:checked
+	bind:group
+	on:click
+	on:change
+>
 	<div class={divClass} />
 	<slot />
 </Checkbox>

package/index.d.ts

@@ -9,15 +9,12 @@ export { default as Button } from './buttons/Button.svelte';
 export { default as ButtonGroup } from './buttongroups/ButtonGroup.svelte';
 export { default as ButtonGroupItem } from './buttongroups/ButtonGroupItem.svelte';
 export { default as Card } from './cards/Card.svelte';
-export { default as HorizontalCard } from './cards/HorizontalCard.svelte';
-export { default as InteractiveCard } from './cards/InteractiveCard.svelte';
-export { default as ListCard } from './cards/ListCard.svelte';
-export { default as CtaCard } from './cards/CtaCard.svelte';
 export { default as EcommerceCard } from './cards/EcommerceCard.svelte';
 export { default as SignInCard } from './cards/SignInCard.svelte';
 export { default as Carousel } from './carousels/Carousel.svelte';
 export { default as CarouselTransition } from './carousels/CarouselTransition.svelte';
 export { default as DarkMode } from './darkmode/DarkMode.svelte';
+export { default as Drawer } from './drawers/Drawer.svelte';
 export { default as Dropdown } from './dropdowns/Dropdown.svelte';
 export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';
 export { default as DropdownHeader } from './dropdowns/DropdownHeader.svelte';
@@ -40,11 +37,11 @@ export { default as RadioInline } from './forms/RadioInline.svelte';
 export { default as Radio } from './forms/Radio.svelte';
 export { default as Range } from './forms/Range.svelte';
 export { default as Search } from './forms/Search.svelte';
-export { default as SimpleSearch } from './forms/SimpleSearch.svelte';
-export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
 export { default as Select } from './forms/Select.svelte';
+export { default as SimpleSearch } from './forms/SimpleSearch.svelte';
 export { default as Textarea } from './forms/Textarea.svelte';
 export { default as Toggle } from './forms/Toggle.svelte';
+export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
 export { default as Kbd } from './kbd/Kbd.svelte';
 export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
 export { default as ArrowKeyLeft } from './kbd/ArrowKeyLeft.svelte';
@@ -52,13 +49,6 @@ export { default as ArrowKeyRight } from './kbd/ArrowKeyRight.svelte';
 export { default as ArrowKeyUp } from './kbd/ArrowKeyUp.svelte';
 export { default as List } from './list-group/List.svelte';
 export { default as ListItem } from './list-group/ListItem.svelte';
-export { modalIdStore } from './modals/modalStores.js';
-export { default as ExtraLargeModal } from './modals/ExtraLargeModal.svelte';
-export { default as LargeModal } from './modals/LargeModal.svelte';
-export { default as MediumModal } from './modals/MediumModal.svelte';
-export { default as ModalButton } from './modals/ModalButton.svelte';
-export { default as SignInModal } from './modals/SignInModal.svelte';
-export { default as SmallModal } from './modals/SmallModal.svelte';
 export { default as Modal } from './modals/Modal.svelte';
 export { default as MegaMenu } from './megamenu/MegaMenu.svelte';
 export { default as Navbar } from './navbar/Navbar.svelte';
@@ -67,7 +57,6 @@ export { default as NavDropdown } from './navbar/NavDropdown.svelte';
 export { default as NavHamburger } from './navbar/NavHamburger.svelte';
 export { default as NavLi } from './navbar/NavLi.svelte';
 export { default as NavUl } from './navbar/NavUl.svelte';
-export { default as DropdownNavbar } from './navbar/DropdownNavbar.svelte';
 export { default as Pagination } from './paginations/Pagination.svelte';
 export { default as Previous } from './paginations/Previous.svelte';
 export { default as Next } from './paginations/Next.svelte';

package/index.js

@@ -17,10 +17,6 @@ export { default as ButtonGroup } from './buttongroups/ButtonGroup.svelte';
 export { default as ButtonGroupItem } from './buttongroups/ButtonGroupItem.svelte';
 // Cards
 export { default as Card } from './cards/Card.svelte';
-export { default as HorizontalCard } from './cards/HorizontalCard.svelte';
-export { default as InteractiveCard } from './cards/InteractiveCard.svelte';
-export { default as ListCard } from './cards/ListCard.svelte';
-export { default as CtaCard } from './cards/CtaCard.svelte';
 export { default as EcommerceCard } from './cards/EcommerceCard.svelte';
 export { default as SignInCard } from './cards/SignInCard.svelte';
 // Carousels
@@ -28,6 +24,8 @@ export { default as Carousel } from './carousels/Carousel.svelte';
 export { default as CarouselTransition } from './carousels/CarouselTransition.svelte';
 // Dark mode
 export { default as DarkMode } from './darkmode/DarkMode.svelte';
+// Drawer
+export { default as Drawer } from './drawers/Drawer.svelte';
 // Dropdown
 export { default as Dropdown } from './dropdowns/Dropdown.svelte';
 export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';
@@ -53,11 +51,11 @@ export { default as RadioInline } from './forms/RadioInline.svelte';
 export { default as Radio } from './forms/Radio.svelte';
 export { default as Range } from './forms/Range.svelte';
 export { default as Search } from './forms/Search.svelte';
-export { default as SimpleSearch } from './forms/SimpleSearch.svelte';
-export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
 export { default as Select } from './forms/Select.svelte';
+export { default as SimpleSearch } from './forms/SimpleSearch.svelte';
 export { default as Textarea } from './forms/Textarea.svelte';
 export { default as Toggle } from './forms/Toggle.svelte';
+export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
 // Kbd
 export { default as Kbd } from './kbd/Kbd.svelte';
 export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
@@ -68,13 +66,6 @@ export { default as ArrowKeyUp } from './kbd/ArrowKeyUp.svelte';
 export { default as List } from './list-group/List.svelte';
 export { default as ListItem } from './list-group/ListItem.svelte';
 // Modals
-export { modalIdStore } from './modals/modalStores.js';
-export { default as ExtraLargeModal } from './modals/ExtraLargeModal.svelte';
-export { default as LargeModal } from './modals/LargeModal.svelte';
-export { default as MediumModal } from './modals/MediumModal.svelte';
-export { default as ModalButton } from './modals/ModalButton.svelte';
-export { default as SignInModal } from './modals/SignInModal.svelte';
-export { default as SmallModal } from './modals/SmallModal.svelte';
 export { default as Modal } from './modals/Modal.svelte';
 // MegaMenu
 export { default as MegaMenu } from './megamenu/MegaMenu.svelte';
@@ -85,7 +76,6 @@ export { default as NavDropdown } from './navbar/NavDropdown.svelte';
 export { default as NavHamburger } from './navbar/NavHamburger.svelte';
 export { default as NavLi } from './navbar/NavLi.svelte';
 export { default as NavUl } from './navbar/NavUl.svelte';
-export { default as DropdownNavbar } from './navbar/DropdownNavbar.svelte';
 // Pagination
 export { default as Pagination } from './paginations/Pagination.svelte';
 export { default as Previous } from './paginations/Previous.svelte';

package/modals/Modal.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
         open?: boolean;
         title?: string;
         size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-        placement?: string;
+        placement?: 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
         autoclose?: boolean;
         backdropClasses?: string;
     };

package/navbar/NavDropdown.svelte

@@ -2,15 +2,15 @@
 export let liButtonClass = 'flex items-center justify-between w-full';
 export let name;
 export let child = [];
+export let dropdownDiv = '';
+export let dropdownLinkClassWithChild = undefined;
+export let rel = undefined;
 let hidden = true;
 let block = false;
 const handleDropdown = () => {
     hidden = !hidden;
     block = !block;
 };
-export let dropdownDiv = '';
-export let dropdownLinkClassWithChild = undefined;
-export let rel = undefined;
 let liClass = 'flex justify-center py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700';
 </script>
 

package/navbar/NavUl.svelte

@@ -4,7 +4,6 @@ import { quintOut } from 'svelte/easing';
 export let divClass = 'w-full md:block md:w-auto';
 export let ulClass = 'flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
 export let hidden = true;
-// $: hidden;
 </script>
 
 {#if !hidden}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.22.25",
+  "version": "0.22.28",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -30,6 +30,7 @@
     "prism-themes": "^1.9.0",
     "svelte": "^3.47.0",
     "svelte-check": "^2.8.0",
+    "svelte-heros": "^2.3.3",
     "svelte-preprocess": "^4.10.7",
     "svelte-sidebar-menu": "^0.8.4",
     "svelte2tsx": "^0.5.11",
@@ -81,8 +82,7 @@
   "dependencies": {
     "@floating-ui/dom": "^0.5.3",
     "classnames": "^2.3.1",
-    "flowbite": "^1.4.2",
-    "svelte-heros": "^2.2.2"
+    "flowbite": "^1.4.2"
   },
   "engines": {
     "npm": ">=7.0.0",
@@ -110,11 +110,7 @@
     "./buttongroups/ButtonGroupItem.svelte": "./buttongroups/ButtonGroupItem.svelte",
     "./buttons/Button.svelte": "./buttons/Button.svelte",
     "./cards/Card.svelte": "./cards/Card.svelte",
-    "./cards/CtaCard.svelte": "./cards/CtaCard.svelte",
     "./cards/EcommerceCard.svelte": "./cards/EcommerceCard.svelte",
-    "./cards/HorizontalCard.svelte": "./cards/HorizontalCard.svelte",
-    "./cards/InteractiveCard.svelte": "./cards/InteractiveCard.svelte",
-    "./cards/ListCard.svelte": "./cards/ListCard.svelte",
     "./cards/SignInCard.svelte": "./cards/SignInCard.svelte",
     "./carousels/Caption.svelte": "./carousels/Caption.svelte",
     "./carousels/Carousel.svelte": "./carousels/Carousel.svelte",
@@ -123,6 +119,7 @@
     "./carousels/Slide.svelte": "./carousels/Slide.svelte",
     "./carousels/Thumbnail.svelte": "./carousels/Thumbnail.svelte",
     "./darkmode/DarkMode.svelte": "./darkmode/DarkMode.svelte",
+    "./drawers/Drawer.svelte": "./drawers/Drawer.svelte",
     "./dropdowns/Dropdown.svelte": "./dropdowns/Dropdown.svelte",
     "./dropdowns/DropdownDivider.svelte": "./dropdowns/DropdownDivider.svelte",
     "./dropdowns/DropdownHeader.svelte": "./dropdowns/DropdownHeader.svelte",
@@ -133,10 +130,6 @@
     "./footer/FooterIcon.svelte": "./footer/FooterIcon.svelte",
     "./footer/FooterLink.svelte": "./footer/FooterLink.svelte",
     "./footer/FooterLinkGroup.svelte": "./footer/FooterLinkGroup.svelte",
-    "./footer/LogoFooter.svelte": "./footer/LogoFooter.svelte",
-    "./footer/SimpleFooter.svelte": "./footer/SimpleFooter.svelte",
-    "./footer/SitemapFooter.svelte": "./footer/SitemapFooter.svelte",
-    "./footer/SocialMediaFooter.svelte": "./footer/SocialMediaFooter.svelte",
     "./forms/Checkbox.svelte": "./forms/Checkbox.svelte",
     "./forms/Dropzone.svelte": "./forms/Dropzone.svelte",
     "./forms/Fileupload.svelte": "./forms/Fileupload.svelte",
@@ -151,7 +144,6 @@
     "./forms/Search.svelte": "./forms/Search.svelte",
     "./forms/Select.svelte": "./forms/Select.svelte",
     "./forms/SimpleSearch.svelte": "./forms/SimpleSearch.svelte",
-    "./forms/SingleCheckbox.svelte": "./forms/SingleCheckbox.svelte",
     "./forms/Textarea.svelte": "./forms/Textarea.svelte",
     "./forms/Toggle.svelte": "./forms/Toggle.svelte",
     "./forms/VoiceSearch.svelte": "./forms/VoiceSearch.svelte",
@@ -164,15 +156,7 @@
     "./list-group/List.svelte": "./list-group/List.svelte",
     "./list-group/ListItem.svelte": "./list-group/ListItem.svelte",
     "./megamenu/MegaMenu.svelte": "./megamenu/MegaMenu.svelte",
-    "./modals/ExtraLargeModal.svelte": "./modals/ExtraLargeModal.svelte",
-    "./modals/LargeModal.svelte": "./modals/LargeModal.svelte",
-    "./modals/MediumModal.svelte": "./modals/MediumModal.svelte",
     "./modals/Modal.svelte": "./modals/Modal.svelte",
-    "./modals/ModalButton.svelte": "./modals/ModalButton.svelte",
-    "./modals/SignInModal.svelte": "./modals/SignInModal.svelte",
-    "./modals/SmallModal.svelte": "./modals/SmallModal.svelte",
-    "./modals/modalStores": "./modals/modalStores.js",
-    "./navbar/DropdownNavbar.svelte": "./navbar/DropdownNavbar.svelte",
     "./navbar/NavBrand.svelte": "./navbar/NavBrand.svelte",
     "./navbar/NavDropdown.svelte": "./navbar/NavDropdown.svelte",
     "./navbar/NavHamburger.svelte": "./navbar/NavHamburger.svelte",

package/paginations/Next.svelte

@@ -1,10 +1,10 @@
 <script>import { createEventDispatcher } from 'svelte';
 export let icon = false;
+export let nextClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
 const dispatch = createEventDispatcher();
 const next = () => {
     dispatch('next');
 };
-export let nextClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
 if (!icon) {
     nextClass += ' ml-3';
 }
@@ -13,6 +13,16 @@ if (!icon) {
 <a href="/" on:click|preventDefault={next} class={nextClass}>
 	Next
 	{#if icon}
-		<svg class="ml-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
+		<svg
+			class="ml-2 w-5 h-5"
+			fill="currentColor"
+			viewBox="0 0 20 20"
+			xmlns="http://www.w3.org/2000/svg"
+			><path
+				fill-rule="evenodd"
+				d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
+				clip-rule="evenodd"
+			/></svg
+		>
 	{/if}
 </a>