flowbite-svelte 0.22.27 → 0.22.30

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/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

@@ -8,6 +8,24 @@ export let style = 'dark';
 export let content = '';
 export let animation = 'duration-300';
 export let arrow = true;
+export let tipClass = 'absolute inline-block rounded-lg py-2 px-3 text-sm font-medium shadow-sm';
+export let tipColor = '';
+const tipStyleClasses = {
+    dark: 'bg-gray-900 text-white dark:bg-gray-700',
+    light: 'border border-gray-200 bg-white text-gray-900',
+    auto: 'border border-gray-200 bg-white text-gray-900 dark:border-none dark:bg-gray-700 dark:text-white',
+    custom: tipColor
+};
+const arrowStyleClasses = {
+    dark: 'bg-gray-900 dark:bg-gray-700',
+    light: 'bg-white',
+    auto: 'bg-white dark:bg-gray-700',
+    custom: tipColor
+};
+let toolTipClass;
+$: toolTipClass = classNames(tipClass, animation !== false && `transition-opacity ${animation}`, {
+    'invisible opacity-0': !open
+}, tipStyleClasses[style], $$props.class);
 let open = false;
 const floatingPlacement = ({ placement }) => {
     return placement === 'auto' ? undefined : placement;
@@ -93,18 +111,7 @@ onDestroy(() => {
 	<div
 		bind:this={tooltipRef}
 		data-testid="tooltip"
-		class={classNames(
-			'absolute inline-block rounded-lg py-2 px-3 text-sm font-medium shadow-sm',
-			animation !== false && `transition-opacity ${animation}`,
-			{
-				'invisible opacity-0': !open,
-				'bg-gray-900 text-white dark:bg-gray-700': style === 'dark',
-				'border border-gray-200 bg-white text-gray-900': style === 'light',
-				'border border-gray-200 bg-white text-gray-900 dark:border-none dark:bg-gray-700 dark:text-white':
-					style === 'auto'
-			},
-			$$props.class
-		)}
+		class={toolTipClass}
 		style={`left:${placementData?.x}px;top:${placementData?.y}px;position:${placementData?.strategy}`}
 	>
 		<div class="relative z-20">
@@ -114,11 +121,7 @@ onDestroy(() => {
 		</div>
 		{#if arrow}
 			<div
-				class={classNames('absolute z-10 h-2 w-2 rotate-45', {
-					'bg-gray-900 dark:bg-gray-700': style === 'dark',
-					'bg-white': style === 'light',
-					'bg-white dark:bg-gray-700': style === 'auto'
-				})}
+				class={classNames('absolute z-10 h-2 w-2 rotate-45', arrowStyleClasses[style])}
 				data-testid="tooltip-arrow"
 				style={`left:${placementData?.middlewareData.arrow?.x}px;top:${
 					placementData?.middlewareData.arrow?.y

package/tooltips/Tooltip.svelte.d.ts

@@ -5,10 +5,12 @@ declare const __propDef: {
         [x: string]: any;
         placement?: 'auto' | Placement;
         trigger?: 'hover' | 'click';
-        style?: 'dark' | 'light' | 'auto';
+        style?: 'dark' | 'light' | 'auto' | 'custom';
         content?: string;
         animation?: false | `duration-${number}`;
         arrow?: boolean;
+        tipClass?: string;
+        tipColor?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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 {};

package/cards/InteractiveCard.svelte

@@ -1,73 +0,0 @@
-<script>let isOpen = true;
-const toggleDropdown = () => {
-    isOpen = !isOpen;
-};
-export let dropdownLinks;
-export let img;
-export let header = 'Lorem ipsum';
-export let content = 'Proin efficitur purus felis.';
-export let buttonColor = 'blue';
-export let link1;
-export let link2;
-export let headerClass = 'mb-1 text-xl font-medium text-gray-900 dark:text-white';
-export let divClass = 'max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700';
-let linkClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white focus:ring-4 ';
-if (buttonColor === 'gray') {
-    linkClass += 'bg-gray-700 rounded-lg hover:bg-gray-800 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
-}
-else if (buttonColor === 'red') {
-    linkClass += 'bg-red-700 rounded-lg hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
-}
-else if (buttonColor === 'yellow') {
-    linkClass += 'bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
-}
-else if (buttonColor === 'green') {
-    linkClass += 'bg-green-700 rounded-lg hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
-}
-else if (buttonColor === 'indigo') {
-    linkClass += 'bg-indigo-700 rounded-lg hover:bg-indigo-800 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
-}
-else if (buttonColor === 'purple') {
-    linkClass += 'bg-purple-700 rounded-lg hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
-}
-else if (buttonColor === 'pink') {
-    linkClass += 'bg-pink-700 rounded-lg hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
-}
-else {
-    linkClass += 'bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
-}
-</script>
-
-<div class={divClass}>
-	<div class="flex justify-end px-4 pt-4 relative">
-		<button id="dropdownButton" on:click={toggleDropdown} class="hidden sm:inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5" type="button">
-			<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" /></svg>
-		</button>
-
-		<div id="dropdown" class:hidden={isOpen} class:block={!isOpen} class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 absolute top-16 -right-16">
-			<ul class="py-1" aria-labelledby="dropdownButton">
-				{#each dropdownLinks as { href, name, rel }}
-					<li>
-						<a {href} {rel} class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">{name}</a>
-					</li>
-				{/each}
-			</ul>
-		</div>
-	</div>
-
-	<div class="flex flex-col items-center pb-10">
-		<img class="mb-3 w-24 h-24 rounded-full shadow-lg" src={img.src} alt={img.alt} />
-		<h3 class={headerClass}>
-			{header}
-		</h3>
-		<span class="text-sm text-gray-500 dark:text-gray-400">{content}</span>
-		<div class="flex mt-4 space-x-3 lg:mt-6">
-			{#if link1.href}
-				<a href={link1.href} rel={link1.rel} class={linkClass}>{link1.name}</a>
-			{/if}
-			{#if link2.href}
-				<a href={link2.href} rel={link2.rel} class="inline-flex items-center py-2 px-4 text-sm font-medium text-center text-gray-900 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800">{link2.name}</a>
-			{/if}
-		</div>
-	</div>
-</div>

package/cards/InteractiveCard.svelte.d.ts

@@ -1,25 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { LinkType, ImgType, Colors } from '../types';
-declare const __propDef: {
-    props: {
-        dropdownLinks: LinkType[];
-        img: ImgType;
-        header?: string;
-        content?: string;
-        buttonColor?: Colors;
-        link1: LinkType;
-        link2: LinkType;
-        headerClass?: string;
-        divClass?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type InteractiveCardProps = typeof __propDef.props;
-export declare type InteractiveCardEvents = typeof __propDef.events;
-export declare type InteractiveCardSlots = typeof __propDef.slots;
-export default class InteractiveCard extends SvelteComponentTyped<InteractiveCardProps, InteractiveCardEvents, InteractiveCardSlots> {
-}
-export {};

package/cards/ListCard.svelte

@@ -1,40 +0,0 @@
-<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';
-</script>
-
-<div class={divClass}>
-	<div class="flex justify-between items-center mb-4">
-		<h3 class="text-xl font-bold leading-none text-gray-900 dark:text-white">
-			{title}
-		</h3>
-		<a href={action.href} rel={action.rel} class="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500">
-			{action.name}
-		</a>
-	</div>
-	<div class="flow-root">
-		<ul class="divide-y divide-gray-200 dark:divide-gray-700">
-			{#each lists as { img, field1, field2, field3 }}
-				<li class="py-3 sm:py-4">
-					<div class="flex items-center space-x-4">
-						<div class="flex-shrink-0">
-							<img class="w-8 h-8 rounded-full" src={img.src} alt={img.alt} />
-						</div>
-						<div class="flex-1 min-w-0">
-							<p class="text-sm font-medium text-gray-900 truncate dark:text-white">
-								{field1}
-							</p>
-							<p class="text-sm text-gray-500 truncate dark:text-gray-400">
-								{field2}
-							</p>
-						</div>
-						<div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
-							{field3}
-						</div>
-					</div>
-				</li>
-			{/each}
-		</ul>
-	</div>
-</div>

package/cards/ListCard.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { LinkType, ListCardType } from '../types';
-declare const __propDef: {
-    props: {
-        lists: ListCardType[];
-        title?: string;
-        action: LinkType;
-        divClass?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type ListCardProps = typeof __propDef.props;
-export declare type ListCardEvents = typeof __propDef.events;
-export declare type ListCardSlots = typeof __propDef.slots;
-export default class ListCard extends SvelteComponentTyped<ListCardProps, ListCardEvents, ListCardSlots> {
-}
-export {};

package/footer/LogoFooter.svelte

@@ -1,34 +0,0 @@
-<script>import classNames from 'classnames';
-export let site;
-export let links;
-export let divClass = 'sm:flex sm:items-center sm:justify-between';
-export let siteNameClass = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
-export let ulClass = 'flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400';
-export let aClass = 'mr-4 hover:underline md:mr-6';
-export let siteNameLinkClass = 'flex items-center mb-4 sm:mb-0';
-export let imgClass = 'mr-3 h-8';
-export let hrClass = 'my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8';
-export let copyRightSpanClass = 'block text-sm text-gray-500 sm:text-center dark:text-gray-400';
-export let copyRightLinkClass = 'hover:underline';
-export let copyrightYear = '© 2022';
-export let allRightsReserved = 'All Rights Reserved.';
-</script>
-
-<div class={divClass}>
-	<a href={site.href} class={siteNameLinkClass}>
-		<img src={site.img} class={imgClass} alt={site.name} />
-		<span class={siteNameClass}>{site.name}</span>
-	</a>
-	<ul class={ulClass}>
-		{#each links as { name, href, rel }}
-			<li>
-				<a {href} {rel} class={aClass}>{name}</a>
-			</li>
-		{/each}
-	</ul>
-</div>
-<hr class={hrClass} />
-<span class={copyRightSpanClass}
-	>{copyrightYear}
-	<a href={site.href} class={copyRightLinkClass}>{site.name}</a>. {allRightsReserved}
-</span>

package/footer/LogoFooter.svelte.d.ts

@@ -1,29 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { LinkType, SiteType } from '../types';
-declare const __propDef: {
-    props: {
-        site: SiteType;
-        links: LinkType[];
-        divClass?: string;
-        siteNameClass?: string;
-        ulClass?: string;
-        aClass?: string;
-        siteNameLinkClass?: string;
-        imgClass?: string;
-        hrClass?: string;
-        copyRightSpanClass?: string;
-        copyRightLinkClass?: string;
-        copyrightYear?: string;
-        allRightsReserved?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type LogoFooterProps = typeof __propDef.props;
-export declare type LogoFooterEvents = typeof __propDef.events;
-export declare type LogoFooterSlots = typeof __propDef.slots;
-export default class LogoFooter extends SvelteComponentTyped<LogoFooterProps, LogoFooterEvents, LogoFooterSlots> {
-}
-export {};

package/footer/SimpleFooter.svelte

@@ -1,22 +0,0 @@
-<script>import classNames from 'classnames';
-export let site;
-export let links;
-export let siteNameClass = 'text-sm text-gray-500 sm:text-center dark:text-gray-400';
-export let ulClass = 'flex flex-wrap items-center mt-3 sm:mt-0';
-export let aClass = 'mr-4 text-sm text-gray-500 hover:underline md:mr-6 dark:text-gray-400';
-export let siteNameLinkClass = 'hover:underline';
-export let copyrightYear = '© 2022';
-export let allRightsReserved = 'All Rights Reserved.';
-</script>
-
-<span class={siteNameClass}
-	>{copyrightYear}
-	<a href={site.href} class={siteNameLinkClass} target="_blank">{site.name}</a>. {allRightsReserved}
-</span>
-<ul class={ulClass}>
-	{#each links as { name, href, rel }}
-		<li>
-			<a {href} {rel} class={aClass}>{name}</a>
-		</li>
-	{/each}
-</ul>

package/footer/SimpleFooter.svelte.d.ts

@@ -1,24 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { LinkType, SiteType } from '../types';
-declare const __propDef: {
-    props: {
-        site: SiteType;
-        links: LinkType[];
-        siteNameClass?: string;
-        ulClass?: string;
-        aClass?: string;
-        siteNameLinkClass?: string;
-        copyrightYear?: string;
-        allRightsReserved?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type SimpleFooterProps = typeof __propDef.props;
-export declare type SimpleFooterEvents = typeof __propDef.events;
-export declare type SimpleFooterSlots = typeof __propDef.slots;
-export default class SimpleFooter extends SvelteComponentTyped<SimpleFooterProps, SimpleFooterEvents, SimpleFooterSlots> {
-}
-export {};