flowbite-svelte 0.22.25 → 0.22.28

package/paginations/Pagination.svelte

@@ -1,12 +1,5 @@
 <script>import { createEventDispatcher } from 'svelte';
 export let icon = false;
-const dispatch = createEventDispatcher();
-const previous = () => {
-    dispatch('previous');
-};
-const next = () => {
-    dispatch('next');
-};
 export let pages;
 export let ulClass = 'inline-flex -space-x-px items-center';
 export let pageClass = 'py-2 px-3 leading-tight text-gray-500 bg-white 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';
@@ -14,6 +7,13 @@ export let previousClass = 'py-2 px-3 ml-0 leading-tight text-gray-500 bg-white
 export let nextClass = 'py-2 px-3 leading-tight text-gray-500 bg-white rounded-r-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';
 export let iconPreviousClass = 'block py-2 px-3 ml-0 leading-tight text-gray-500 bg-white rounded-l-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';
 export let iconNextClass = 'block py-2 px-3 leading-tight text-gray-500 bg-white rounded-r-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 previous = () => {
+    dispatch('previous');
+};
+const next = () => {
+    dispatch('next');
+};
 </script>
 
 <nav aria-label="Page navigation">
@@ -22,7 +22,17 @@ export let iconNextClass = 'block py-2 px-3 leading-tight text-gray-500 bg-white
 			{#if icon}
 				<a href="/" on:click|preventDefault={previous} class={iconPreviousClass}>
 					<span class="sr-only">Previous</span>
-					<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
+					<svg
+						class="w-5 h-5"
+						fill="currentColor"
+						viewBox="0 0 20 20"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							fill-rule="evenodd"
+							d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+							clip-rule="evenodd"
+						/></svg
+					>
 				</a>
 			{:else}
 				<a href="/" on:click|preventDefault={previous} class={previousClass}>Previous</a>
@@ -37,7 +47,17 @@ export let iconNextClass = 'block py-2 px-3 leading-tight text-gray-500 bg-white
 			{#if icon}
 				<a href="/" on:click|preventDefault={next} class={iconNextClass}>
 					<span class="sr-only">Next</span>
-					<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg>
+					<svg
+						class="w-5 h-5"
+						fill="currentColor"
+						viewBox="0 0 20 20"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							fill-rule="evenodd"
+							d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+							clip-rule="evenodd"
+						/></svg
+					>
 				</a>
 			{:else}
 				<a href="/" on:click|preventDefault={next} class={nextClass}>Next</a>

package/paginations/Previous.svelte

@@ -1,10 +1,10 @@
 <script>import { createEventDispatcher } from 'svelte';
 export let icon = false;
+export let previousClass = '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 previous = () => {
     dispatch('previous');
 };
-export let previousClass = '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) {
     previousClass += ' mr-3';
 }
@@ -12,7 +12,17 @@ if (icon) {
 
 <a href="/" on:click|preventDefault={previous} class={previousClass}>
 	{#if icon}
-		<svg class="mr-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" /></svg>
+		<svg
+			class="mr-2 w-5 h-5"
+			fill="currentColor"
+			viewBox="0 0 20 20"
+			xmlns="http://www.w3.org/2000/svg"
+			><path
+				fill-rule="evenodd"
+				d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
+				clip-rule="evenodd"
+			/></svg
+		>
 	{/if}
 	Previous
 </a>

package/paginations/TableData.svelte

@@ -1,4 +1,7 @@
 <script>import { createEventDispatcher } from 'svelte';
+export let helper;
+export let btnPreClass = 'py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-l hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+export let btnNextClass = 'py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-r border-0 border-l border-gray-700 hover:bg-gray-900 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 previous = () => {
     dispatch('previous');
@@ -6,9 +9,6 @@ const previous = () => {
 const next = () => {
     dispatch('next');
 };
-export let helper;
-export let btnPreClass = 'py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-l hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
-export let btnNextClass = 'py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-r border-0 border-l border-gray-700 hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
 </script>
 
 <div class="flex flex-col items-center">

package/progressbars/Progressbar.svelte

@@ -1,33 +1,19 @@
-<script>export let progress = '45';
+<script>import classNames from 'classnames';
+export let progress = '45';
 export let size = 'h-2.5';
 export let labelInside = false;
 export let labelOutside = '';
 export let color = 'blue';
-let barColor;
-if (color === 'blue') {
-    barColor = 'bg-blue-600';
-}
-else if (color === 'gray') {
-    barColor = 'bg-gray-600 dark:bg-gray-300';
-}
-else if (color === 'red') {
-    barColor = 'bg-red-600 dark:bg-red-500';
-}
-else if (color === 'green') {
-    barColor = 'bg-green-600 dark:bg-green-500';
-}
-else if (color === 'yellow') {
-    barColor = 'bg-yellow-400 ';
-}
-else if (color === 'purple') {
-    barColor = 'bg-purple-600 dark:bg-purple-500';
-}
-else if (color === 'indigo') {
-    barColor = 'bg-indigo-600 dark:bg-indigo-500';
-}
-else {
-    barColor = 'bg-blue-600 dark:bg-blue-500';
-}
+// let barColor: string;
+const barColors = {
+    blue: 'bg-blue-600',
+    gray: 'bg-gray-600 dark:bg-gray-300',
+    red: 'bg-red-600 dark:bg-red-500',
+    green: 'bg-green-600 dark:bg-green-500',
+    yellow: 'bg-yellow-400',
+    purple: 'bg-purple-600 dark:bg-purple-500',
+    indigo: 'bg-indigo-600 dark:bg-indigo-500'
+};
 </script>
 
 {#if labelOutside}
@@ -38,10 +24,13 @@ else {
 {/if}
 <div class="w-full bg-gray-200 rounded-full {size} dark:bg-gray-700">
 	{#if labelInside}
-		<div class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full" style="width: {progress}%">
+		<div
+			class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
+			style="width: {progress}%"
+		>
 			{progress}%
 		</div>
 	{:else}
-		<div class="{barColor} {size} rounded-full" style="width: {progress}%" />
+		<div class={classNames(barColors[color], size, 'rounded-full')} style="width: {progress}%" />
 	{/if}
 </div>

package/ratings/Rating.svelte

@@ -11,12 +11,12 @@ let grayStars = total - roundedRating;
 <div class={divClass}>
 	{#each Array(roundedRating) as _, star}
 		<slot name="ratingUp">
-			<Star variation="solid" class="text-yellow-300 dark:text-yellow-200" />
+			<Star variation="solid" size="24" class="text-yellow-300 dark:text-yellow-200" />
 		</slot>
 	{/each}
 	{#each Array(grayStars) as _, star}
 		<slot name="ratingDown">
-			<Star class="text-gray-300 dark:text-gray-500" />
+			<Star size="26" class="px-0.5 text-gray-300 dark:text-gray-500" />
 		</slot>
 	{/each}
 	{#if $$slots.text}

package/skeleton/CardPlaceholder.svelte

@@ -1,10 +1,15 @@
+<script>export let size = '48';
+</script>
+
 <div
 	role="status"
 	class="p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700"
 >
 	<div class="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded dark:bg-gray-700">
 		<svg
-			class="w-12 h-12 text-gray-200 dark:text-gray-600"
+			width={size}
+			height={size}
+			class="text-gray-200 dark:text-gray-600"
 			xmlns="http://www.w3.org/2000/svg"
 			aria-hidden="true"
 			fill="currentColor"

package/skeleton/CardPlaceholder.svelte.d.ts

@@ -1,19 +1,16 @@
-/** @typedef {typeof __propDef.props}  CardPlaceholderProps */
-/** @typedef {typeof __propDef.events}  CardPlaceholderEvents */
-/** @typedef {typeof __propDef.slots}  CardPlaceholderSlots */
-export default class CardPlaceholder extends SvelteComponentTyped<{}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type CardPlaceholderProps = typeof __propDef.props;
-export type CardPlaceholderEvents = typeof __propDef.events;
-export type CardPlaceholderSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        size?: string;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type CardPlaceholderProps = typeof __propDef.props;
+export declare type CardPlaceholderEvents = typeof __propDef.events;
+export declare type CardPlaceholderSlots = typeof __propDef.slots;
+export default class CardPlaceholder extends SvelteComponentTyped<CardPlaceholderProps, CardPlaceholderEvents, CardPlaceholderSlots> {
+}
 export {};

package/skeleton/ImagePlaceholder.svelte

@@ -1,3 +1,6 @@
+<script>export let size = '48';
+</script>
+
 <div
 	role="status"
 	class="space-y-8 animate-pulse md:space-y-0 md:space-x-8 md:flex md:items-center"
@@ -6,7 +9,9 @@
 		class="flex justify-center items-center w-full h-48 bg-gray-300 rounded sm:w-96 dark:bg-gray-700"
 	>
 		<svg
-			class="w-12 h-12 text-gray-200"
+			width={size}
+			height={size}
+			class="text-gray-200"
 			xmlns="http://www.w3.org/2000/svg"
 			aria-hidden="true"
 			fill="currentColor"

package/skeleton/ImagePlaceholder.svelte.d.ts

@@ -1,19 +1,16 @@
-/** @typedef {typeof __propDef.props}  ImagePlaceholderProps */
-/** @typedef {typeof __propDef.events}  ImagePlaceholderEvents */
-/** @typedef {typeof __propDef.slots}  ImagePlaceholderSlots */
-export default class ImagePlaceholder extends SvelteComponentTyped<{}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ImagePlaceholderProps = typeof __propDef.props;
-export type ImagePlaceholderEvents = typeof __propDef.events;
-export type ImagePlaceholderSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        size?: string;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type ImagePlaceholderProps = typeof __propDef.props;
+export declare type ImagePlaceholderEvents = typeof __propDef.events;
+export declare type ImagePlaceholderSlots = typeof __propDef.slots;
+export default class ImagePlaceholder extends SvelteComponentTyped<ImagePlaceholderProps, ImagePlaceholderEvents, ImagePlaceholderSlots> {
+}
 export {};

package/skeleton/VideoPlaceholder.svelte

@@ -1,9 +1,14 @@
+<script>export let size = '48';
+</script>
+
 <div
 	role="status"
 	class="flex justify-center items-center max-w-sm h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700"
 >
 	<svg
-		class="w-12 h-12 text-gray-200 dark:text-gray-600"
+		width={size}
+		height={size}
+		class="text-gray-200 dark:text-gray-600"
 		xmlns="http://www.w3.org/2000/svg"
 		aria-hidden="true"
 		fill="currentColor"

package/skeleton/VideoPlaceholder.svelte.d.ts

@@ -1,19 +1,16 @@
-/** @typedef {typeof __propDef.props}  VideoPlaceholderProps */
-/** @typedef {typeof __propDef.events}  VideoPlaceholderEvents */
-/** @typedef {typeof __propDef.slots}  VideoPlaceholderSlots */
-export default class VideoPlaceholder extends SvelteComponentTyped<{}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type VideoPlaceholderProps = typeof __propDef.props;
-export type VideoPlaceholderEvents = typeof __propDef.events;
-export type VideoPlaceholderSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        size?: string;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type VideoPlaceholderProps = typeof __propDef.props;
+export declare type VideoPlaceholderEvents = typeof __propDef.events;
+export declare type VideoPlaceholderSlots = typeof __propDef.slots;
+export default class VideoPlaceholder extends SvelteComponentTyped<VideoPlaceholderProps, VideoPlaceholderEvents, VideoPlaceholderSlots> {
+}
 export {};

package/spinners/Spinner.svelte

@@ -2,10 +2,10 @@
 export let color = 'blue';
 export let bg = 'text-gray-300';
 export let size = '8';
-let iconsize = `w-${size} h-${size}`;
 // these two props add fine control over the spinner colors
 export let currentFill = 'currentFill';
 export let currentColor = 'currentColor';
+let iconsize = `w-${size} h-${size}`;
 if (currentFill !== 'currentFill') {
     color = undefined;
 }

package/tables/TableHeadCell.svelte

@@ -1,6 +1,6 @@
 <script>import classNames from 'classnames';
 </script>
 
-<th {...$$props} class={classNames('px-6 py-3', $$props.class)}>
+<th {...$$restProps} class={classNames('px-6 py-3', $$props.class)}>
 	<slot />
 </th>

package/tabs/InteractiveTabHead.svelte

@@ -26,10 +26,25 @@ Header part of Interactive tab component. Use with TabContent.
   ```
   -->
 <div class="mb-4 border-b border-gray-200">
-	<ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id={tabId} data-tabs-toggle="#myTabContent" role="tablist">
+	<ul
+		class="flex flex-wrap -mb-px text-sm font-medium text-center"
+		id={tabId}
+		data-tabs-toggle="#myTabContent"
+		role="tablist"
+	>
 		{#each tabs as { name, id }}
 			<li class="mr-2" role="presentation">
-				<button on:click={handleClick(id)} class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300" id="{name}-tab" data-tabs-target="#{name}" type="button" role="tab" class:active={activeTabValue === id} aria-controls={name} aria-selected="false">{name}</button>
+				<button
+					on:click={handleClick(id)}
+					class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
+					id="{name}-tab"
+					data-tabs-target="#{name}"
+					type="button"
+					role="tab"
+					class:active={activeTabValue === id}
+					aria-controls={name}
+					aria-selected="false">{name}</button
+				>
 			</li>
 		{/each}
 	</ul>

package/tabs/InteractiveTabs.svelte

@@ -1,14 +1,22 @@
 <script>export let tabId = 'myTab';
 export let activeTabValue = 1;
-const handleClick = (tabValue) => () => (activeTabValue = tabValue);
 export let tabs;
+const handleClick = (tabValue) => () => (activeTabValue = tabValue);
 </script>
 
 <div class="mb-4 border-b border-gray-200 dark:border-gray-700">
 	<ul class="flex flex-wrap -mb-px" id={tabId} role="tablist">
 		{#each tabs as { name, id }}
 			<li class="mr-2" role="presentation">
-				<button on:click={handleClick(id)} class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300" id="{name}-tab" type="button" role="tab" class:active={activeTabValue === id} aria-controls={name}>{name}</button>
+				<button
+					on:click={handleClick(id)}
+					class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
+					id="{name}-tab"
+					type="button"
+					role="tab"
+					class:active={activeTabValue === id}
+					aria-controls={name}>{name}</button
+				>
 			</li>
 		{/each}
 	</ul>
@@ -16,7 +24,12 @@ export let tabs;
 <div id="{tabId}Content">
 	{#each tabs as { name, content, id }}
 		{#if activeTabValue === id}
-			<div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800" id={name} role="tabpanel" aria-labelledby="{name}-tab">
+			<div
+				class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
+				id={name}
+				role="tabpanel"
+				aria-labelledby="{name}-tab"
+			>
 				{#if typeof content === 'string'}
 					<p class="text-sm text-gray-500 dark:text-gray-400">
 						{@html content}

package/tabs/UnderlineTabs.svelte

@@ -6,7 +6,14 @@ export let tabs;
 	<ul class="flex flex-wrap -mb-px">
 		{#each tabs as { name, active, href, rel }}
 			<li class="mr-2">
-				<a {href} {rel} class={active ? 'inline-block p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500' : '  inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 '}>{name}</a>
+				<a
+					{href}
+					{rel}
+					class={active
+						? 'inline-block p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500'
+						: '  inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 '}
+					>{name}</a
+				>
 			</li>
 		{/each}
 	</ul>

package/tooltips/Tooltip.svelte

@@ -1,7 +1,7 @@
-<script>import classNames from 'classnames';
+<script>import { onMount } from 'svelte';
+import classNames from 'classnames';
 import { clickOutside } from '../utils/clickOutside';
 import { computePosition, flip, shift, offset, autoPlacement, arrow as arrowFloat } from '@floating-ui/dom';
-import { onDestroy } from 'svelte';
 export let placement = 'top';
 export let trigger = 'hover';
 export let style = 'dark';
@@ -23,25 +23,26 @@ const floatingArrowPlacement = ({ placement }) => {
         left: 'right'
     }[placement.split('-')[0]];
 };
-const floatingMiddleware = ({ arrowRef, placement }) => {
-    const middleware = [];
-    middleware.push(offset(8));
-    middleware.push(placement === 'auto' ? autoPlacement() : flip());
-    middleware.push(shift({ padding: 8 }));
-    if (arrowRef) {
-        middleware.push(arrowFloat({ element: arrowRef }));
-    }
-    return middleware;
-};
 let placementData;
 let tooltipRef, triggerRef, arrowRef;
-const updatePosition = () => computePosition(triggerRef, tooltipRef, {
-    middleware: floatingMiddleware({ arrowRef, placement }),
-    placement: floatingPlacement({ placement })
-}).then((data) => (placementData = data));
 let attachedScroll = false;
-$: tooltipRef && open && updatePosition();
-$: {
+onMount(async () => {
+    // dynamic import, to access 'window', since ace use it directly,
+    const floatingMiddleware = ({ arrowRef, placement }) => {
+        const middleware = [];
+        middleware.push(offset(8));
+        middleware.push(placement === 'auto' ? autoPlacement() : flip());
+        middleware.push(shift({ padding: 8 }));
+        if (arrowRef) {
+            middleware.push(arrowFloat({ element: arrowRef }));
+        }
+        return middleware;
+    };
+    const updatePosition = () => computePosition(triggerRef, tooltipRef, {
+        middleware: floatingMiddleware({ arrowRef, placement }),
+        placement: floatingPlacement({ placement })
+    }).then((data) => (placementData = data));
+    tooltipRef && open && updatePosition();
     if (open && !attachedScroll) {
         attachedScroll = true;
         window.addEventListener('scroll', updatePosition, true);
@@ -50,17 +51,13 @@ $: {
         attachedScroll = false;
         window.removeEventListener('scroll', updatePosition, true);
     }
-}
-onDestroy(() => {
-    if (attachedScroll) {
-        attachedScroll = false;
-        window.removeEventListener('scroll', updatePosition, true);
-    }
+    // console.log('updatePosition', updatePosition());
+    // console.log('floatingMiddleware', floatingMiddleware({ arrowRef, placement }));
 });
+// console.log('placement', placement);
+// console.log('floatingPlacement', floatingPlacement({ placement }));
 </script>
 
-<svelte:window on:resize={() => open && updatePosition()} />
-
 <div
 	use:clickOutside={() => {
 		if (open) {

package/types.d.ts

@@ -66,6 +66,16 @@ export interface DotType {
     top?: boolean;
     color?: string;
 }
+export interface drawerTransitionParamTypes {
+    amount?: number;
+    delay?: number;
+    duration?: number;
+    easing?: (t: number) => number;
+    opacity?: number;
+    x?: number;
+    y?: number;
+}
+export declare type drawerTransitionTypes = 'fade' | 'fly' | 'slide' | 'blur' | 'in:fly' | 'out:fly' | 'in:slide' | 'out:slide' | 'in:fade' | 'out:fade' | 'in:blur' | 'out:blur' | undefined;
 export declare type DropdownColorType = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
 export interface DropdownType {
     name: string;

package/cards/CtaCard.svelte

@@ -1,49 +0,0 @@
-<script>import Button from '../buttons/Button.svelte';
-export let title = 'Work fast from anywhere';
-export let headColor = 'gray';
-export let btns;
-export let divClass = 'p-4 w-full text-center bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700';
-let headClass = 'mb-2 text-3xl font-bold dark:text-white ';
-if (headColor === 'blue') {
-    headClass += 'text-blue-900';
-}
-else if (headColor === 'gray') {
-    headClass += 'text-gray-900';
-}
-else if (headColor === 'red') {
-    headClass += 'text-red-900';
-}
-else if (headColor === 'yellow') {
-    headClass += 'text-yellow-900';
-}
-else if (headColor === 'green') {
-    headClass += 'text-green-900';
-}
-else if (headColor === 'indigo') {
-    headClass += 'text-indigo-900';
-}
-else if (headColor === 'purple') {
-    headClass += 'text-purple-900';
-}
-else if (headColor === 'pink') {
-    headClass += 'text-pink-900';
-}
-</script>
-
-<div class={divClass}>
-	<h3 class={headClass}>
-		{title}
-	</h3>
-	<p class="mb-5 text-base text-gray-500 sm:text-lg dark:text-gray-400">
-		<slot />
-	</p>
-	<div class="justify-center items-center space-y-4 sm:flex sm:space-y-0 sm:space-x-4">
-		{#if btns}
-			{#each btns as { name, textSize, type, href, rel, rounded }}
-				<a {href} {rel}>
-					<Button {rounded} {type} {textSize}>{name}</Button>
-				</a>
-			{/each}
-		{/if}
-	</div>
-</div>

package/cards/CtaCard.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { CardButtonType, Colors } from '../types';
-declare const __propDef: {
-    props: {
-        title?: string;
-        headColor?: Colors;
-        btns: CardButtonType[];
-        divClass?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type CtaCardProps = typeof __propDef.props;
-export declare type CtaCardEvents = typeof __propDef.events;
-export declare type CtaCardSlots = typeof __propDef.slots;
-export default class CtaCard extends SvelteComponentTyped<CtaCardProps, CtaCardEvents, CtaCardSlots> {
-}
-export {};

package/cards/HorizontalCard.svelte

@@ -1,23 +0,0 @@
-<script>export let link = '';
-export let rel = '';
-export let img = '/images/image-4.jpeg';
-export let alt = '';
-export let header = 'Lorem ipsum dolor sit ametit.';
-export let linkClass = 'flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700';
-export let imgClass = 'object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg';
-export let textClass = 'flex flex-col justify-between p-4 leading-normal';
-export let h3Class = 'mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white';
-export let pClass = 'mb-3 font-normal text-gray-700 dark:text-gray-400';
-</script>
-
-<a href={link} {rel} class={linkClass}>
-	<img class={imgClass} src={img} {alt} />
-	<div class={textClass}>
-		<h3 class={h3Class}>
-			{header}
-		</h3>
-		<p class={pClass}>
-			<slot />
-		</p>
-	</div>
-</a>

package/cards/HorizontalCard.svelte.d.ts

@@ -1,27 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        link?: string;
-        rel?: string;
-        img?: string;
-        alt?: string;
-        header?: string;
-        linkClass?: string;
-        imgClass?: string;
-        textClass?: string;
-        h3Class?: string;
-        pClass?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type HorizontalCardProps = typeof __propDef.props;
-export declare type HorizontalCardEvents = typeof __propDef.events;
-export declare type HorizontalCardSlots = typeof __propDef.slots;
-export default class HorizontalCard extends SvelteComponentTyped<HorizontalCardProps, HorizontalCardEvents, HorizontalCardSlots> {
-}
-export {};