flowbite-svelte 0.22.27 → 0.22.28

package/footer/SocialMediaFooter.svelte

@@ -1,63 +0,0 @@
-<script>import classNames from 'classnames';
-export let site;
-export let links;
-export let socialMedia;
-export let divClass = 'md:flex md:justify-between';
-export let divClass2 = 'mb-6 md:mb-0';
-export let siteLinkClass = 'flex items-center';
-export let siteNameSpanClass = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
-export let imgClass = 'mr-3 h-8';
-export let linksDivClass = 'grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3';
-export let parentClass = 'mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white';
-export let ulClass = 'text-gray-600 dark:text-gray-400';
-export let liClass = 'mb-4';
-export let linkClass = 'hover:underline';
-export let hrClass = 'my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8';
-export let copyrightDivClass = 'sm:flex sm:items-center sm:justify-between';
-export let copyrightClass = 'text-sm text-gray-500 sm:text-center dark:text-gray-400';
-export let socialMediaDivClass = 'flex mt-4 space-x-6 sm:justify-center sm:mt-0';
-export let socialMediaLinkClass = 'text-gray-500 hover:text-gray-900 dark:hover:text-white';
-export let iconClass = 'h-5 w-5 mr-2';
-export let copyrightYear = '© 2022';
-export let allRightsReserved = 'All Rights Reserved.';
-</script>
-
-<div class={divClass}>
-	<div class={divClass2}>
-		<a href={site.href} class={siteLinkClass}>
-			<img src={site.img} class={imgClass} alt={site.name} />
-			<span class={siteNameSpanClass}>{site.name}</span>
-		</a>
-		<slot />
-	</div>
-	<div class={linksDivClass}>
-		{#each links as { parent, children }}
-			<div>
-				<h2 class={parentClass}>
-					{parent}
-				</h2>
-				<ul class={ulClass}>
-					{#each children as { name, href }}
-						<li class={liClass}>
-							<a {href} class={linkClass}>{name}</a>
-						</li>
-					{/each}
-				</ul>
-			</div>
-		{/each}
-	</div>
-</div>
-<hr class={hrClass} />
-<div class={copyrightDivClass}>
-	<span class={copyrightClass}
-		>{copyrightYear}
-		<a href={site.href} class="hover:underline">{site.name}</a>. {allRightsReserved}
-	</span>
-	<div class={socialMediaDivClass}>
-		{#each socialMedia as { href, icon }}
-			<a {href} class={socialMediaLinkClass}>
-				<svelte:component this={icon} class={iconClass} />
-			</a>
-		{/each}
-	</div>
-</div>

package/footer/SocialMediaFooter.svelte.d.ts

@@ -1,39 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { SocialMediaLinkType, SocialMediaType, SiteType } from '../types';
-declare const __propDef: {
-    props: {
-        site: SiteType;
-        links: SocialMediaLinkType[];
-        socialMedia: SocialMediaType[];
-        divClass?: string;
-        divClass2?: string;
-        siteLinkClass?: string;
-        siteNameSpanClass?: string;
-        imgClass?: string;
-        linksDivClass?: string;
-        parentClass?: string;
-        ulClass?: string;
-        liClass?: string;
-        linkClass?: string;
-        hrClass?: string;
-        copyrightDivClass?: string;
-        copyrightClass?: string;
-        socialMediaDivClass?: string;
-        socialMediaLinkClass?: string;
-        iconClass?: string;
-        copyrightYear?: string;
-        allRightsReserved?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type SocialMediaFooterProps = typeof __propDef.props;
-export declare type SocialMediaFooterEvents = typeof __propDef.events;
-export declare type SocialMediaFooterSlots = typeof __propDef.slots;
-export default class SocialMediaFooter extends SvelteComponentTyped<SocialMediaFooterProps, SocialMediaFooterEvents, SocialMediaFooterSlots> {
-}
-export {};

package/forms/SingleCheckbox.svelte

@@ -1,18 +0,0 @@
-<script>import generateId from '../utils/generateId.js';
-export let checked = false;
-export let id = generateId();
-export let required = false;
-export let label;
-export let name;
-export let inputClass = 'w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800';
-export let labelClass = 'font-medium text-gray-900 dark:text-gray-300';
-</script>
-
-<div class="flex items-start">
-	<div class="flex items-center h-5">
-		<input bind:checked {id} aria-describedby={id} {name} type="checkbox" class={inputClass} {required} />
-	</div>
-	<div class="ml-3 text-sm">
-		<label for={id} class={labelClass}>{label}</label>
-	</div>
-</div>

package/forms/SingleCheckbox.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        checked?: boolean;
-        id?: string;
-        required?: boolean;
-        label: string;
-        name: string;
-        inputClass?: string;
-        labelClass?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type SingleCheckboxProps = typeof __propDef.props;
-export declare type SingleCheckboxEvents = typeof __propDef.events;
-export declare type SingleCheckboxSlots = typeof __propDef.slots;
-export default class SingleCheckbox extends SvelteComponentTyped<SingleCheckboxProps, SingleCheckboxEvents, SingleCheckboxSlots> {
-}
-export {};

package/modals/ExtraLargeModal.svelte

@@ -1,182 +0,0 @@
-<script>import { createEventDispatcher } from 'svelte';
-import { modalIdStore } from './modalStores';
-const dispatch = createEventDispatcher();
-export let id = 'extralarge-modal';
-export let btnColor = 'blue';
-export let textColor = 'gray';
-export let title = 'Terms of Service';
-export let btn1;
-export let btn2;
-export const closeModal = () => {
-    modalIdStore.update((value) => (value = null));
-};
-let showModalId;
-modalIdStore.subscribe((value) => {
-    showModalId = value;
-});
-const handlebtn1 = () => {
-    dispatch('handlebtn1');
-};
-const handlebtn2 = () => {
-    dispatch('handlebtn2');
-};
-let divClass;
-let headDivClass;
-let h3Class;
-let buttonClass;
-let pClass;
-let footerClass;
-let btn2Class;
-if (textColor === 'blue') {
-    divClass = 'relative bg-white rounded-lg shadow dark:bg-blue-700';
-    headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-blue-600';
-    h3Class = 'text-xl font-medium text-blue-900 dark:text-white';
-    buttonClass = 'text-blue-400 bg-transparent hover:bg-blue-200 hover:text-blue-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-blue-600 dark:hover:text-white';
-    pClass = 'text-base leading-relaxed text-blue-500 dark:text-blue-400';
-    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-blue-200 dark:border-blue-600';
-    btn2Class = 'text-blue-500 bg-white hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 rounded-lg border border-blue-200 text-sm font-medium px-5 py-2.5 hover:text-blue-900 focus:z-10 dark:bg-blue-700 dark:text-blue-300 dark:border-blue-500 dark:hover:text-white dark:hover:bg-blue-600';
-}
-else if (textColor === 'gray') {
-    divClass = 'relative bg-white rounded-lg shadow dark:bg-gray-700';
-    headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-gray-600';
-    h3Class = 'text-xl font-medium text-gray-900 dark:text-white';
-    buttonClass = 'text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white';
-    pClass = 'text-base leading-relaxed text-gray-500 dark:text-gray-400';
-    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600';
-    btn2Class = 'text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600';
-}
-else if (textColor === 'red') {
-    divClass = 'relative bg-white rounded-lg shadow dark:bg-red-700';
-    headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-red-600';
-    h3Class = 'text-xl font-medium text-red-900 dark:text-white';
-    buttonClass = 'text-red-400 bg-transparent hover:bg-red-200 hover:text-red-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-red-600 dark:hover:text-white';
-    pClass = 'text-base leading-relaxed text-red-500 dark:text-red-400';
-    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-red-200 dark:border-red-600';
-    btn2Class = 'text-red-500 bg-white hover:bg-red-100 focus:ring-4 focus:ring-red-300 rounded-lg border border-red-200 text-sm font-medium px-5 py-2.5 hover:text-red-900 focus:z-10 dark:bg-red-700 dark:text-red-300 dark:border-red-500 dark:hover:text-white dark:hover:bg-red-600';
-}
-else if (textColor === 'yellow') {
-    divClass = 'relative bg-white rounded-lg shadow dark:bg-yellow-700';
-    headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-yellow-600';
-    h3Class = 'text-xl font-medium text-yellow-900 dark:text-white';
-    buttonClass = 'text-yellow-400 bg-transparent hover:bg-yellow-200 hover:text-yellow-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-yellow-600 dark:hover:text-white';
-    pClass = 'text-base leading-relaxed text-yellow-500 dark:text-yellow-400';
-    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-yellow-200 dark:border-yellow-600';
-    btn2Class = 'text-yellow-500 bg-white hover:bg-yellow-100 focus:ring-4 focus:ring-yellow-300 rounded-lg border border-yellow-200 text-sm font-medium px-5 py-2.5 hover:text-yellow-900 focus:z-10 dark:bg-yellow-700 dark:text-yellow-300 dark:border-yellow-500 dark:hover:text-white dark:hover:bg-yellow-600';
-}
-else if (textColor === 'green') {
-    divClass = 'relative bg-white rounded-lg shadow dark:bg-green-700';
-    headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-green-600';
-    h3Class = 'text-xl font-medium text-green-900 dark:text-white';
-    buttonClass = 'text-green-400 bg-transparent hover:bg-green-200 hover:text-green-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-green-600 dark:hover:text-white';
-    pClass = 'text-base leading-relaxed text-green-500 dark:text-green-400';
-    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-green-200 dark:border-green-600';
-    btn2Class = 'text-green-500 bg-white hover:bg-green-100 focus:ring-4 focus:ring-green-300 rounded-lg border border-green-200 text-sm font-medium px-5 py-2.5 hover:text-green-900 focus:z-10 dark:bg-green-700 dark:text-green-300 dark:border-green-500 dark:hover:text-white dark:hover:bg-green-600';
-}
-else if (textColor === 'indigo') {
-    divClass = 'relative bg-white rounded-lg shadow dark:bg-indigo-700';
-    headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-indigo-600';
-    h3Class = 'text-xl font-medium text-indigo-900 dark:text-white';
-    buttonClass = 'text-indigo-400 bg-transparent hover:bg-indigo-200 hover:text-indigo-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-indigo-600 dark:hover:text-white';
-    pClass = 'text-base leading-relaxed text-indigo-500 dark:text-indigo-400';
-    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-indigo-200 dark:border-indigo-600';
-    btn2Class = 'text-indigo-500 bg-white hover:bg-indigo-100 focus:ring-4 focus:ring-indigo-300 rounded-lg border border-indigo-200 text-sm font-medium px-5 py-2.5 hover:text-indigo-900 focus:z-10 dark:bg-indigo-700 dark:text-indigo-300 dark:border-indigo-500 dark:hover:text-white dark:hover:bg-indigo-600';
-}
-else if (textColor === 'purple') {
-    divClass = 'relative bg-white rounded-lg shadow dark:bg-purple-700';
-    headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-purple-600';
-    h3Class = 'text-xl font-medium text-purple-900 dark:text-white';
-    buttonClass = 'text-purple-400 bg-transparent hover:bg-purple-200 hover:text-purple-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-purple-600 dark:hover:text-white';
-    pClass = 'text-base leading-relaxed text-purple-500 dark:text-purple-400';
-    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-purple-200 dark:border-purple-600';
-    btn2Class = 'text-purple-500 bg-white hover:bg-purple-100 focus:ring-4 focus:ring-purple-300 rounded-lg border border-purple-200 text-sm font-medium px-5 py-2.5 hover:text-purple-900 focus:z-10 dark:bg-purple-700 dark:text-purple-300 dark:border-purple-500 dark:hover:text-white dark:hover:bg-purple-600';
-}
-else if (textColor === 'pink') {
-    divClass = 'relative bg-white rounded-lg shadow dark:bg-pink-700';
-    headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-pink-600';
-    h3Class = 'text-xl font-medium text-pink-900 dark:text-white';
-    buttonClass = 'text-pink-400 bg-transparent hover:bg-pink-200 hover:text-pink-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-pink-600 dark:hover:text-white';
-    pClass = 'text-base leading-relaxed text-pink-500 dark:text-pink-400';
-    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-pink-200 dark:border-pink-600';
-    btn2Class = 'text-pink-500 bg-white hover:bg-pink-100 focus:ring-4 focus:ring-pink-300 rounded-lg border border-pink-200 text-sm font-medium px-5 py-2.5 hover:text-pink-900 focus:z-10 dark:bg-pink-700 dark:text-pink-300 dark:border-pink-500 dark:hover:text-white dark:hover:bg-pink-600';
-}
-else {
-    divClass = 'relative bg-white rounded-lg shadow dark:bg-blue-700';
-    headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-blue-600';
-    h3Class = 'text-xl font-medium text-blue-900 dark:text-white';
-    buttonClass = 'text-blue-400 bg-transparent hover:bg-blue-200 hover:text-blue-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-blue-600 dark:hover:text-white';
-    pClass = 'text-base leading-relaxed text-blue-500 dark:text-blue-400';
-    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-blue-200 dark:border-blue-600';
-    btn2Class = 'text-blue-500 bg-white hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 rounded-lg border border-blue-200 text-sm font-medium px-5 py-2.5 hover:text-blue-900 focus:z-10 dark:bg-blue-700 dark:text-blue-300 dark:border-blue-500 dark:hover:text-white dark:hover:bg-blue-600';
-}
-let button1Class;
-if (btnColor === 'blue') {
-    button1Class = 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
-}
-else if (btnColor === 'gray') {
-    button1Class = 'text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
-}
-else if (btnColor === 'red') {
-    button1Class = 'text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
-}
-else if (btnColor === 'yellow') {
-    button1Class = 'text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
-}
-else if (btnColor === 'green') {
-    button1Class = 'text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
-}
-else if (btnColor === 'indigo') {
-    button1Class = 'text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
-}
-else if (btnColor === 'purple') {
-    button1Class = 'text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
-}
-else if (btnColor === 'pink') {
-    button1Class = 'text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
-}
-else {
-    button1Class = 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
-}
-</script>
-
-{#if showModalId === id}
-	<div
-		on:click={closeModal}
-		class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40 w-full h-full overflow-auto"
-	>
-		<!-- Main modal -->
-		<div
-			on:click|stopPropagation={() => {}}
-			role="dialog"
-			aria-modal="true"
-			class="mx-auto my-20 px-4 w-full max-w-7xl h-full md:h-auto"
-		>
-			<!-- Modal content -->
-			<div class={divClass}>
-				<!-- Modal header -->
-				<div class={headDivClass}>
-					<h3 class={h3Class}>
-						{title}
-					</h3>
-					<button type="button" class={buttonClass} on:click={closeModal}>
-						<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="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
-					</button>
-				</div>
-				<!-- Modal body -->
-				<div class="p-6 space-y-6">
-					<p class={pClass}>
-						<slot />
-					</p>
-				</div>
-				<!-- Modal footer -->
-				<div class={footerClass}>
-					{#if btn1}
-						<button type="button" class={button1Class} on:click={handlebtn1}>{btn1}</button>
-					{/if}
-					{#if btn2}
-						<button type="button" class={btn2Class} on:click={handlebtn2}>{btn2}</button>
-					{/if}
-				</div>
-			</div>
-		</div>
-	</div>
-{/if}

package/modals/ExtraLargeModal.svelte.d.ts

@@ -1,29 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Colors } from '../types';
-declare const __propDef: {
-    props: {
-        id?: string;
-        btnColor?: Colors;
-        textColor?: Colors;
-        title?: string;
-        btn1: string;
-        btn2: string;
-        closeModal?: () => void;
-    };
-    events: {
-        handlebtn1: CustomEvent<any>;
-        handlebtn2: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type ExtraLargeModalProps = typeof __propDef.props;
-export declare type ExtraLargeModalEvents = typeof __propDef.events;
-export declare type ExtraLargeModalSlots = typeof __propDef.slots;
-export default class ExtraLargeModal extends SvelteComponentTyped<ExtraLargeModalProps, ExtraLargeModalEvents, ExtraLargeModalSlots> {
-    get closeModal(): () => void;
-}
-export {};

package/modals/LargeModal.svelte

@@ -1,182 +0,0 @@
-<script>import { createEventDispatcher } from 'svelte';
-import { modalIdStore } from './modalStores';
-const dispatch = createEventDispatcher();
-export let id = 'large-modal';
-export let btnColor = 'blue';
-export let textColor = 'gray';
-export let title = 'Terms of Service';
-export let btn1;
-export let btn2;
-export const closeModal = () => {
-    modalIdStore.update((value) => (value = null));
-};
-let showModalId;
-modalIdStore.subscribe((value) => {
-    showModalId = value;
-});
-const handlebtn1 = () => {
-    dispatch('handlebtn1');
-};
-const handlebtn2 = () => {
-    dispatch('handlebtn2');
-};
-let divClass;
-let headDivClass;
-let h3Class;
-let buttonClass;
-let pClass;
-let footerClass;
-let btn2Class;
-if (textColor === 'blue') {
-    divClass = 'relative bg-white rounded-lg shadow dark:bg-blue-700';
-    headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-blue-600';
-    h3Class = 'text-xl font-medium text-blue-900 dark:text-white';
-    buttonClass = 'text-blue-400 bg-transparent hover:bg-blue-200 hover:text-blue-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-blue-600 dark:hover:text-white';
-    pClass = 'text-base leading-relaxed text-blue-500 dark:text-blue-400';
-    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-blue-200 dark:border-blue-600';
-    btn2Class = 'text-blue-500 bg-white hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 rounded-lg border border-blue-200 text-sm font-medium px-5 py-2.5 hover:text-blue-900 focus:z-10 dark:bg-blue-700 dark:text-blue-300 dark:border-blue-500 dark:hover:text-white dark:hover:bg-blue-600';
-}
-else if (textColor === 'gray') {
-    divClass = 'relative bg-white rounded-lg shadow dark:bg-gray-700';
-    headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-gray-600';
-    h3Class = 'text-xl font-medium text-gray-900 dark:text-white';
-    buttonClass = 'text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white';
-    pClass = 'text-base leading-relaxed text-gray-500 dark:text-gray-400';
-    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600';
-    btn2Class = 'text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600';
-}
-else if (textColor === 'red') {
-    divClass = 'relative bg-white rounded-lg shadow dark:bg-red-700';
-    headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-red-600';
-    h3Class = 'text-xl font-medium text-red-900 dark:text-white';
-    buttonClass = 'text-red-400 bg-transparent hover:bg-red-200 hover:text-red-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-red-600 dark:hover:text-white';
-    pClass = 'text-base leading-relaxed text-red-500 dark:text-red-400';
-    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-red-200 dark:border-red-600';
-    btn2Class = 'text-red-500 bg-white hover:bg-red-100 focus:ring-4 focus:ring-red-300 rounded-lg border border-red-200 text-sm font-medium px-5 py-2.5 hover:text-red-900 focus:z-10 dark:bg-red-700 dark:text-red-300 dark:border-red-500 dark:hover:text-white dark:hover:bg-red-600';
-}
-else if (textColor === 'yellow') {
-    divClass = 'relative bg-white rounded-lg shadow dark:bg-yellow-700';
-    headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-yellow-600';
-    h3Class = 'text-xl font-medium text-yellow-900 dark:text-white';
-    buttonClass = 'text-yellow-400 bg-transparent hover:bg-yellow-200 hover:text-yellow-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-yellow-600 dark:hover:text-white';
-    pClass = 'text-base leading-relaxed text-yellow-500 dark:text-yellow-400';
-    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-yellow-200 dark:border-yellow-600';
-    btn2Class = 'text-yellow-500 bg-white hover:bg-yellow-100 focus:ring-4 focus:ring-yellow-300 rounded-lg border border-yellow-200 text-sm font-medium px-5 py-2.5 hover:text-yellow-900 focus:z-10 dark:bg-yellow-700 dark:text-yellow-300 dark:border-yellow-500 dark:hover:text-white dark:hover:bg-yellow-600';
-}
-else if (textColor === 'green') {
-    divClass = 'relative bg-white rounded-lg shadow dark:bg-green-700';
-    headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-green-600';
-    h3Class = 'text-xl font-medium text-green-900 dark:text-white';
-    buttonClass = 'text-green-400 bg-transparent hover:bg-green-200 hover:text-green-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-green-600 dark:hover:text-white';
-    pClass = 'text-base leading-relaxed text-green-500 dark:text-green-400';
-    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-green-200 dark:border-green-600';
-    btn2Class = 'text-green-500 bg-white hover:bg-green-100 focus:ring-4 focus:ring-green-300 rounded-lg border border-green-200 text-sm font-medium px-5 py-2.5 hover:text-green-900 focus:z-10 dark:bg-green-700 dark:text-green-300 dark:border-green-500 dark:hover:text-white dark:hover:bg-green-600';
-}
-else if (textColor === 'indigo') {
-    divClass = 'relative bg-white rounded-lg shadow dark:bg-indigo-700';
-    headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-indigo-600';
-    h3Class = 'text-xl font-medium text-indigo-900 dark:text-white';
-    buttonClass = 'text-indigo-400 bg-transparent hover:bg-indigo-200 hover:text-indigo-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-indigo-600 dark:hover:text-white';
-    pClass = 'text-base leading-relaxed text-indigo-500 dark:text-indigo-400';
-    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-indigo-200 dark:border-indigo-600';
-    btn2Class = 'text-indigo-500 bg-white hover:bg-indigo-100 focus:ring-4 focus:ring-indigo-300 rounded-lg border border-indigo-200 text-sm font-medium px-5 py-2.5 hover:text-indigo-900 focus:z-10 dark:bg-indigo-700 dark:text-indigo-300 dark:border-indigo-500 dark:hover:text-white dark:hover:bg-indigo-600';
-}
-else if (textColor === 'purple') {
-    divClass = 'relative bg-white rounded-lg shadow dark:bg-purple-700';
-    headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-purple-600';
-    h3Class = 'text-xl font-medium text-purple-900 dark:text-white';
-    buttonClass = 'text-purple-400 bg-transparent hover:bg-purple-200 hover:text-purple-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-purple-600 dark:hover:text-white';
-    pClass = 'text-base leading-relaxed text-purple-500 dark:text-purple-400';
-    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-purple-200 dark:border-purple-600';
-    btn2Class = 'text-purple-500 bg-white hover:bg-purple-100 focus:ring-4 focus:ring-purple-300 rounded-lg border border-purple-200 text-sm font-medium px-5 py-2.5 hover:text-purple-900 focus:z-10 dark:bg-purple-700 dark:text-purple-300 dark:border-purple-500 dark:hover:text-white dark:hover:bg-purple-600';
-}
-else if (textColor === 'pink') {
-    divClass = 'relative bg-white rounded-lg shadow dark:bg-pink-700';
-    headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-pink-600';
-    h3Class = 'text-xl font-medium text-pink-900 dark:text-white';
-    buttonClass = 'text-pink-400 bg-transparent hover:bg-pink-200 hover:text-pink-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-pink-600 dark:hover:text-white';
-    pClass = 'text-base leading-relaxed text-pink-500 dark:text-pink-400';
-    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-pink-200 dark:border-pink-600';
-    btn2Class = 'text-pink-500 bg-white hover:bg-pink-100 focus:ring-4 focus:ring-pink-300 rounded-lg border border-pink-200 text-sm font-medium px-5 py-2.5 hover:text-pink-900 focus:z-10 dark:bg-pink-700 dark:text-pink-300 dark:border-pink-500 dark:hover:text-white dark:hover:bg-pink-600';
-}
-else {
-    divClass = 'relative bg-white rounded-lg shadow dark:bg-blue-700';
-    headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-blue-600';
-    h3Class = 'text-xl font-medium text-blue-900 dark:text-white';
-    buttonClass = 'text-blue-400 bg-transparent hover:bg-blue-200 hover:text-blue-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-blue-600 dark:hover:text-white';
-    pClass = 'text-base leading-relaxed text-blue-500 dark:text-blue-400';
-    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-blue-200 dark:border-blue-600';
-    btn2Class = 'text-blue-500 bg-white hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 rounded-lg border border-blue-200 text-sm font-medium px-5 py-2.5 hover:text-blue-900 focus:z-10 dark:bg-blue-700 dark:text-blue-300 dark:border-blue-500 dark:hover:text-white dark:hover:bg-blue-600';
-}
-let button1Class;
-if (btnColor === 'blue') {
-    button1Class = 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
-}
-else if (btnColor === 'gray') {
-    button1Class = 'text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
-}
-else if (btnColor === 'red') {
-    button1Class = 'text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
-}
-else if (btnColor === 'yellow') {
-    button1Class = 'text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
-}
-else if (btnColor === 'green') {
-    button1Class = 'text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
-}
-else if (btnColor === 'indigo') {
-    button1Class = 'text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
-}
-else if (btnColor === 'purple') {
-    button1Class = 'text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
-}
-else if (btnColor === 'pink') {
-    button1Class = 'text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
-}
-else {
-    button1Class = 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
-}
-</script>
-
-{#if showModalId === id}
-	<!-- Large Modal -->
-	<div
-		on:click={closeModal}
-		class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40 w-full h-full overflow-auto"
-	>
-		<div
-			on:click|stopPropagation={() => {}}
-			role="dialog"
-			aria-modal="true"
-			class="mx-auto my-20 px-4 w-full max-w-4xl h-full md:h-auto"
-		>
-			<!-- Modal content -->
-			<div class={divClass}>
-				<!-- Modal header -->
-				<div class={headDivClass}>
-					<h3 class={h3Class}>
-						{title}
-					</h3>
-					<button type="button" class={buttonClass} on:click={closeModal}>
-						<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="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
-					</button>
-				</div>
-				<!-- Modal body -->
-				<div class="p-6 space-y-6">
-					<p class={pClass}>
-						<slot />
-					</p>
-				</div>
-				<!-- Modal footer -->
-				<div class={footerClass}>
-					{#if btn1}
-						<button type="button" class={button1Class} on:click={handlebtn1}>{btn1}</button>
-					{/if}
-					{#if btn2}
-						<button type="button" class={btn2Class} on:click={handlebtn2}>{btn2}</button>
-					{/if}
-				</div>
-			</div>
-		</div>
-	</div>
-{/if}

package/modals/LargeModal.svelte.d.ts

@@ -1,29 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Colors } from '../types';
-declare const __propDef: {
-    props: {
-        id?: string;
-        btnColor?: Colors;
-        textColor?: Colors;
-        title?: string;
-        btn1: string;
-        btn2: string;
-        closeModal?: () => void;
-    };
-    events: {
-        handlebtn1: CustomEvent<any>;
-        handlebtn2: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type LargeModalProps = typeof __propDef.props;
-export declare type LargeModalEvents = typeof __propDef.events;
-export declare type LargeModalSlots = typeof __propDef.slots;
-export default class LargeModal extends SvelteComponentTyped<LargeModalProps, LargeModalEvents, LargeModalSlots> {
-    get closeModal(): () => void;
-}
-export {};