flowbite-svelte 0.22.15 → 0.22.19

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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.19](https://github.com/themesberg/flowbite-svelte/compare/v0.22.17...v0.22.19) (2022-07-27)
+
+
+### Features
+
+* modal - re-written ([4dd27af](https://github.com/themesberg/flowbite-svelte/commit/4dd27afd996328fcdc6c19895e1a6a6beef2c772))
+* modal - re-written ([1c6a93d](https://github.com/themesberg/flowbite-svelte/commit/1c6a93dfe332a7f65058d25a4a68e542d15e9a21))
+
+### [0.22.18](https://github.com/themesberg/flowbite-svelte/compare/v0.22.17...v0.22.18) (2022-07-27)
+
+### [0.22.17](https://github.com/themesberg/flowbite-svelte/compare/v0.22.16...v0.22.17) (2022-07-26)
+
+### [0.22.16](https://github.com/themesberg/flowbite-svelte/compare/v0.22.15...v0.22.16) (2022-07-26)
+
+
+### Bug Fixes
+
+* cards/index.md, buttons ([9b2ca39](https://github.com/themesberg/flowbite-svelte/commit/9b2ca3914681439e667b5b6026f6c6e22b56b6fd))
+
 ### [0.22.15](https://github.com/themesberg/flowbite-svelte/compare/v0.22.14...v0.22.15) (2022-07-26)
 
 

package/buttons/Button.svelte

@@ -1,4 +1,6 @@
 <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;
@@ -59,32 +61,28 @@ const sizeClasses = {
     xl: 'px-6 py-3.5 text-base'
 };
 let buttonClass;
-$: buttonClass = classNames('group text-center font-medium focus:ring-4 focus:outline-none', outline && gradient ? 'p-0.5' : 'inline-flex items-center justify-center ' + sizeClasses[size], gradient ? gradientClasses[color] : outline ? outlineClasses[color] : colorClasses[color], pill ? 'rounded-full' : 'rounded-lg', shadow && coloredShadowClasses[shadow], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
+$: buttonClass = classNames('group text-center font-medium focus:ring-4 focus:outline-none', outline && gradient ? 'p-0.5' : 'inline-flex items-center justify-center ' + sizeClasses[size], gradient ? gradientClasses[color] : outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' &&
+    (background
+        ? 'dark:bg-transparent dark:border-gray-700 dark:hover:border-gray-600'
+        : 'dark:bg-transparent dark:border-gray-800 dark:hover:border-gray-700'), pill ? 'rounded-full' : 'rounded-lg', shadow && coloredShadowClasses[shadow], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
 let gradientOutlineClass;
 $: gradientOutlineClass = classNames('inline-flex items-center justify-center', sizeClasses[size], pill ? 'rounded-full' : 'rounded-md', 'bg-white text-gray-900 dark:bg-gray-900 dark:text-white', // this is limitation - no transparency
 'transition-all duration-75 ease-in group-hover:bg-opacity-0 group-hover:text-inherit');
 </script>
 
-{#if href}
-	<a {href} {...$$restProps} class={buttonClass}>
-		{#if outline && gradient}
-			<!-- Trick to prentend outline without using border
+<svelte:element
+	this={href ? 'a' : 'button'}
+	type={href ? undefined : 'button'}
+	{...$$restProps}
+	class={buttonClass}
+	on:click
+>
+	{#if outline && gradient}
+		<!-- Trick to prentend outline without using border
 		This has a limitation of no supporting transparency as
 		background is set to bg-white dark:bg-gray-900 -->
-			<span class={gradientOutlineClass}><slot /></span>
-		{:else}
-			<slot />
-		{/if}
-	</a>
-{:else}
-	<button type="button" {...$$restProps} class={buttonClass} on:click>
-		{#if outline && gradient}
-			<!-- Trick to prentend outline without using border
-		This has a limitation of no supporting transparency as
-		background is set to bg-white dark:bg-gray-900 -->
-			<span class={gradientOutlineClass}><slot /></span>
-		{:else}
-			<slot />
-		{/if}
-	</button>
-{/if}
+		<span class={gradientOutlineClass}><slot /></span>
+	{:else}
+		<slot />
+	{/if}
+</svelte:element>

package/index.d.ts

@@ -59,6 +59,7 @@ 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';
 export { default as NavBrand } from './navbar/NavBrand.svelte';

package/index.js

@@ -75,6 +75,7 @@ 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';
 // Navbar

package/modals/Modal.svelte

@@ -0,0 +1,147 @@
+<script>import { createEventDispatcher } from 'svelte';
+import { setContext } from 'svelte';
+import CloseButton from '../utils/CloseButton.svelte';
+export let open = false;
+export let title = undefined;
+export let size = 'md';
+export let placement = 'center';
+export let autoclose = true;
+export let backdropClasses = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40';
+const dispatch = createEventDispatcher();
+setContext('background', true);
+const allPlacementClasses = [
+    'justify-start',
+    'justify-center',
+    'justify-end',
+    'items-start',
+    'items-center',
+    'items-end'
+];
+let backdropEl;
+function init(node, _visible) {
+    getPlacementClasses().map((c) => node.classList.add(c));
+    if (_visible)
+        createBackdrop(node);
+    return {
+        update(_visible) {
+            allPlacementClasses.map((c) => node.classList.remove(c));
+            getPlacementClasses().map((c) => node.classList.add(c));
+            _visible ? createBackdrop(node) : destroyBackdrop(node);
+        },
+        destroy() {
+            destroyBackdrop(node);
+        }
+    };
+}
+function handleEscape(e) {
+    if (open && e.key === 'Escape')
+        open = false;
+}
+function createBackdrop(node) {
+    if (!backdropEl) {
+        backdropEl = document.createElement('div');
+        backdropEl.classList.add(...backdropClasses.split(' '));
+        const body = document.querySelector('body');
+        body.append(backdropEl);
+        body.style.overflow = 'hidden';
+        body.addEventListener('keydown', handleEscape, true);
+    }
+    dispatch('show', node);
+}
+function destroyBackdrop(node) {
+    const body = document.querySelector('body');
+    body.style.overflow = 'auto';
+    body.removeEventListener('keydown', handleEscape, true);
+    if (backdropEl)
+        backdropEl.remove();
+    backdropEl = undefined;
+    dispatch('hide', node);
+}
+function getPlacementClasses() {
+    switch (placement) {
+        // top
+        case 'top-left':
+            return ['justify-start', 'items-start'];
+        case 'top-center':
+            return ['justify-center', 'items-start'];
+        case 'top-right':
+            return ['justify-end', 'items-start'];
+        // center
+        case 'center-left':
+            return ['justify-start', 'items-center'];
+        case 'center':
+            return ['justify-center', 'items-center'];
+        case 'center-right':
+            return ['justify-end', 'items-center'];
+        // bottom
+        case 'bottom-left':
+            return ['justify-start', 'items-end'];
+        case 'bottom-center':
+            return ['justify-center', 'items-end'];
+        case 'bottom-right':
+            return ['justify-end', 'items-end'];
+        default:
+            return ['justify-center', 'items-center'];
+    }
+}
+const sizes = {
+    xs: 'max-w-md',
+    sm: 'max-w-lg',
+    md: 'max-w-2xl',
+    lg: 'max-w-4xl',
+    xl: 'max-w-7xl'
+};
+function onButtonsClick({ target }) {
+    if (autoclose && target.tagName === 'BUTTON')
+        open = !open;
+}
+function hide() {
+    open = false;
+}
+</script>
+
+<!-- Main modal -->
+<div
+	tabindex="-1"
+	class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full"
+	class:flex={open}
+	class:hidden={!open}
+	aria-hidden={open ? undefined : 'true'}
+	aria-modal={open ? 'true' : undefined}
+	role={open ? 'dialog' : undefined}
+	use:init={open}
+	on:click={onButtonsClick}
+>
+	<div class="relative p-4 w-full {sizes[size]} h-full md:h-auto">
+		<!-- Modal content -->
+		<div
+			class="relative bg-white rounded-lg shadow dark:bg-gray-700 text-gray-500 dark:text-gray-400"
+		>
+			<!-- Modal header -->
+			{#if $$slots.header || title}
+				<div class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
+					<slot name="header">
+						<h3 class="text-xl font-semibold text-gray-900 dark:text-white p-0">
+							{title}
+						</h3>
+					</slot>
+					<CloseButton name="Close modal" on:click={hide} />
+				</div>
+			{:else}
+				<CloseButton name="Close modal" class="absolute top-3 right-2.5" on:click={hide} />
+			{/if}
+			<!-- Modal body -->
+			<div class="p-6 space-y-6">
+				<slot />
+			</div>
+			<!-- Modal footer -->
+			{#if $$slots.footer}
+				<div
+					class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600"
+				>
+					<slot name="footer" />
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>

package/modals/Modal.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        open?: boolean;
+        title?: string;
+        size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+        placement?: string;
+        autoclose?: boolean;
+        backdropClasses?: string;
+    };
+    events: {
+        show: CustomEvent<any>;
+        hide: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        default: {};
+        footer: {};
+    };
+};
+export declare type ModalProps = typeof __propDef.props;
+export declare type ModalEvents = typeof __propDef.events;
+export declare type ModalSlots = typeof __propDef.slots;
+export default class Modal extends SvelteComponentTyped<ModalProps, ModalEvents, ModalSlots> {
+}
+export {};

package/modals/SmallModal.svelte

@@ -1,9 +1,11 @@
 <script>import { createEventDispatcher } from 'svelte';
 import { modalIdStore } from './modalStores';
 const dispatch = createEventDispatcher();
+import Button from '../buttons/Button.svelte';
+import CloseButton from '../utils/CloseButton.svelte';
 export let id = 'small-modal';
 export let btnColor = 'blue';
-export let textColor = 'gray';
+export let textColor = 'blue';
 export let title = 'Terms of Service';
 export let btn1;
 export let btn2;
@@ -31,110 +33,112 @@ 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';
+    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';
+    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';
+    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';
+    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';
+    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';
+    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';
+    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';
+    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';
+    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';
+    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';
+    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';
+    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';
+    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';
+    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';
+    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';
+    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';
+    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';
+    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';
+    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';
+    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';
+    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';
 }
 </script>
 
@@ -157,9 +161,7 @@ else {
 					<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>
+					<CloseButton color={textColor} on:click={closeModal} />
 				</div>
 				<!-- Modal body -->
 				<div class="p-6 space-y-6">
@@ -170,10 +172,10 @@ else {
 				<!-- Modal footer -->
 				<div class={footerClass}>
 					{#if btn1}
-						<button type="button" class={button1Class} on:click={handlebtn1}>{btn1}</button>
+						<Button color={btnColor} on:click={handlebtn1}>{btn1}</Button>
 					{/if}
 					{#if btn2}
-						<button type="button" class={btn2Class} on:click={handlebtn2}>{btn2}</button>
+						<Button color={textColor} on:click={handlebtn2}>{btn2}</Button>
 					{/if}
 				</div>
 			</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.22.15",
+  "version": "0.22.19",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -167,6 +167,7 @@
     "./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",

package/utils/CloseButton.svelte

@@ -1,5 +1,8 @@
-<script>import classNames from 'classnames';
+<script>import { getContext } from 'svelte';
+import classNames from 'classnames';
+const background = getContext('background');
 export let color = 'default';
+export let name = 'Close';
 const colors = {
     gray: 'focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-300',
     red: 'focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-300',
@@ -9,15 +12,18 @@ const colors = {
     purple: 'focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-300',
     pink: 'focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-300',
     blue: 'focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-300',
-    default: 'focus:ring-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+    default: 'focus:ring-gray-300 '
 };
 let buttonClass = '';
-$: buttonClass = classNames('ml-auto -mx-1 -my-1.5 rounded-lg focus:ring-2 p-1.5 focus:outline-none', colors[color], $$props.class);
+$: buttonClass = classNames('ml-auto -mx-1 -my-1.5 rounded-lg focus:ring-2 p-1.5 focus:outline-none', colors[color], color === 'default' &&
+    (background
+        ? 'hover:bg-gray-100 dark:hover:bg-gray-600'
+        : 'hover:bg-gray-100 dark:hover:bg-gray-700'), $$props.class);
 </script>
 
 <button on:click type="button" class={buttonClass} aria-label="Close">
 	<slot>
-		<span class="sr-only">Close</span>
+		<span class="sr-only">{name}</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"

package/utils/CloseButton.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         color?: string;
+        name?: string;
     };
     events: {
         click: MouseEvent;