flowbite-svelte 0.19.10 → 0.19.13

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 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.19.13](https://github.com/themesberg/flowbite-svelte/compare/v0.19.12...v0.19.13) (2022-06-30)
+
+
+### Bug Fixes
+
+* removed gradient outline examples since Flowbite site does not have them ([56ac6b4](https://github.com/themesberg/flowbite-svelte/commit/56ac6b4a57512a0d0a086c26a0f179e114af7690))
+
+### [0.19.12](https://github.com/themesberg/flowbite-svelte/compare/v0.19.11...v0.19.12) (2022-06-30)
+
+### [0.19.11](https://github.com/themesberg/flowbite-svelte/compare/v0.19.10...v0.19.11) (2022-06-30)
+
+
+### Features
+
+* can add own search function to TableSearch component ([514c7f7](https://github.com/themesberg/flowbite-svelte/commit/514c7f71ba0ff48637ff37051c9e453a40a56f11))
+
 ### [0.19.10](https://github.com/themesberg/flowbite-svelte/compare/v0.19.9...v0.19.10) (2022-06-30)
 
 

package/breadcrumbs/BreadcrumbItem.svelte

@@ -1,6 +1,6 @@
 <script>import { ChevronRight } from 'svelte-heros';
 export let icon = null;
-export let variation;
+export let variation = null;
 export let iconSize = 20;
 export let iconClass = 'mr-2';
 </script>

package/breadcrumbs/BreadcrumbItem.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         icon?: typeof SvelteComponent | null;
-        variation: 'solid' | null;
+        variation?: 'solid' | null;
         iconSize?: number;
         iconClass?: string;
     };

package/buttons/Button.svelte

@@ -5,11 +5,12 @@ export let outline = false;
 export let color = 'blue';
 export let size = 'md';
 export let icon = undefined;
-export let gradientMonochrome = null;
-export let gradientDuoTone = null;
-export let coloredShadow = null;
+export let gradient = false;
+let gradientMonochrome;
+let gradientDuoTone;
+export let shadow = null;
 export let positionInGroup = null;
-export let outlineStyle = null;
+let outlineStyle;
 const colorClasses = {
     blue: 'text-white bg-blue-700 border border-transparent hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 disabled:hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 dark:disabled:hover:bg-blue-600',
     alternative: 'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 disabled:hover:bg-white focus:ring-blue-700 focus:text-blue-700 dark:bg-transparent dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 focus:ring-2 dark:disabled:hover:bg-gray-800',
@@ -21,7 +22,7 @@ const colorClasses = {
     purple: 'text-white bg-purple-700 border border-transparent hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 disabled:hover:bg-purple-700 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900 dark:disabled:hover:bg-purple-600',
     none: ''
 };
-const gradientMonochromeClasses = {
+const gradientClasses = {
     blue: 'text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 ',
     green: 'text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-green-300 dark:focus:ring-green-800',
     cyan: 'text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800',
@@ -29,9 +30,7 @@ const gradientMonochromeClasses = {
     lime: 'text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-800',
     red: 'text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800',
     pink: 'text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800',
-    purple: 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800'
-};
-const gradientDuoToneClasses = {
+    purple: 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800',
     purpleToBlue: 'text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800',
     cyanToBlue: 'text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800',
     greenToBlue: 'text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800',
@@ -41,14 +40,14 @@ const gradientDuoToneClasses = {
     redToYellow: 'text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:ring-red-100 dark:focus:ring-red-400'
 };
 const coloredShadowClasses = {
-    blue: 'text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80',
-    green: 'text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-green-300 dark:focus:ring-green-800 shadow-lg shadow-green-500/50 dark:shadow-lg dark:shadow-green-800/80',
-    cyan: 'text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 shadow-lg shadow-cyan-500/50 dark:shadow-lg dark:shadow-cyan-800/80',
-    teal: 'text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-teal-300 dark:focus:ring-teal-800 shadow-lg shadow-teal-500/50 dark:shadow-lg dark:shadow-teal-800/80 ',
-    lime: 'text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-lime-300 dark:focus:ring-lime-800 shadow-lg shadow-lime-500/50 dark:shadow-lg dark:shadow-lime-800/80',
-    red: 'text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80 ',
-    pink: 'text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-pink-300 dark:focus:ring-pink-800 shadow-lg shadow-pink-500/50 dark:shadow-lg dark:shadow-pink-800/80',
-    purple: 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 shadow-lg shadow-purple-500/50 dark:shadow-lg dark:shadow-purple-800/80'
+    blue: 'shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80',
+    green: 'shadow-lg shadow-green-500/50 dark:shadow-lg dark:shadow-green-800/80',
+    cyan: 'shadow-lg shadow-cyan-500/50 dark:shadow-lg dark:shadow-cyan-800/80',
+    teal: 'shadow-lg shadow-teal-500/50 dark:shadow-lg dark:shadow-teal-800/80 ',
+    lime: 'shadow-lg shadow-lime-500/50 dark:shadow-lg dark:shadow-lime-800/80',
+    red: 'shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80 ',
+    pink: 'shadow-lg shadow-pink-500/50 dark:shadow-lg dark:shadow-pink-800/80',
+    purple: 'shadow-lg shadow-purple-500/50 dark:shadow-lg dark:shadow-purple-800/80'
 };
 const outlineClasses = {
     default: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800',
@@ -83,15 +82,9 @@ const iconSizeClasses = {
 	class={classNames(
 		'group flex h-min w-fit items-center justify-center p-0.5 text-center font-medium focus:z-10',
 		pill ? 'rounded-full' : 'rounded-lg',
-		!gradientMonochrome &&
-			!gradientDuoTone &&
-			!coloredShadow &&
-			!outlineStyle &&
-			colorClasses[color],
-		!gradientDuoTone && gradientMonochrome && gradientMonochromeClasses[gradientMonochrome],
-		gradientDuoTone && gradientDuoToneClasses[gradientDuoTone],
-		coloredShadow && coloredShadowClasses[coloredShadow],
-		outlineStyle && outlineClasses[outlineStyle],
+		gradient && gradientClasses[color],
+		outline ? outlineClasses[color] : colorClasses[color],
+		shadow && coloredShadowClasses[shadow],
 		{
 			'border border-gray-900 dark:border-white': color === 'alternative' && outline,
 			'cursor-not-allowed opacity-50': $$props.disabled,

package/buttons/Button.svelte.d.ts

@@ -9,11 +9,9 @@ declare const __propDef: {
         color?: 'blue' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'none';
         size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
         icon?: typeof SvelteComponent | undefined;
-        gradientMonochrome?: 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple' | null;
-        gradientDuoTone?: 'purpleToBlue' | 'cyanToBlue' | 'greenToBlue' | 'purpleToPink' | 'pinkToOrange' | 'tealToLime' | 'redToYellow' | null;
-        coloredShadow?: 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple' | null;
+        gradient?: boolean;
+        shadow?: 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple' | null;
         positionInGroup?: 'start' | 'middle' | 'end' | null;
-        outlineStyle?: 'default' | 'dark' | 'green' | 'red' | 'yellow' | 'purple' | 'white' | null;
     };
     events: {
         click: MouseEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.19.10",
+  "version": "0.19.13",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -103,10 +103,6 @@
     "./buttongroups/ButtonGroup.svelte": "./buttongroups/ButtonGroup.svelte",
     "./buttongroups/ButtonGroupItem.svelte": "./buttongroups/ButtonGroupItem.svelte",
     "./buttons/Button.svelte": "./buttons/Button.svelte",
-    "./buttons/ColorShadowButton.svelte": "./buttons/ColorShadowButton.svelte",
-    "./buttons/GradientDuotoneButton.svelte": "./buttons/GradientDuotoneButton.svelte",
-    "./buttons/GradientMonochromeButton.svelte": "./buttons/GradientMonochromeButton.svelte",
-    "./buttons/GradientOutlineButton.svelte": "./buttons/GradientOutlineButton.svelte",
     "./cards/Card.svelte": "./cards/Card.svelte",
     "./cards/CtaCard.svelte": "./cards/CtaCard.svelte",
     "./cards/EcommerceCard.svelte": "./cards/EcommerceCard.svelte",
@@ -208,6 +204,7 @@
     "./toasts/Toast.svelte": "./toasts/Toast.svelte",
     "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte",
     "./types": "./types.js",
+    "./utils/CloseButton.svelte": "./utils/CloseButton.svelte",
     "./utils/clickOutside": "./utils/clickOutside.js",
     "./utils/generateId": "./utils/generateId.js"
   },

package/tables/TableSearch.svelte

@@ -4,15 +4,9 @@ export let divClass = 'relative overflow-x-auto shadow-md sm:rounded-lg';
 export let inputValue = '';
 export let striped = false;
 export let hoverable = false;
-export let menuItems;
-export let filteredItems = [];
 export let placeholder = 'Search';
 $: setContext('striped', striped);
 $: setContext('hoverable', hoverable);
-const handleInput = () => {
-    let result = (filteredItems = menuItems.filter((item) => item[0].toLowerCase().match(inputValue.toLowerCase())));
-    return result;
-};
 </script>
 
 <div class={divClass}>
@@ -34,7 +28,6 @@ const handleInput = () => {
 			</div>
 			<input
 				bind:value={inputValue}
-				on:input={handleInput}
 				type="text"
 				id="table-search"
 				class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"

package/tables/TableSearch.svelte.d.ts

@@ -6,8 +6,6 @@ declare const __propDef: {
         inputValue?: string;
         striped?: boolean;
         hoverable?: boolean;
-        menuItems: Array<Array<string>>;
-        filteredItems?: Array<Array<string>>;
         placeholder?: string;
     };
     events: {

package/toasts/Toast.svelte

@@ -1,65 +1,46 @@
-<script>import { fade, blur, fly, slide } from 'svelte/transition';
+<script>import classNames from 'classnames';
+import * as transitions from 'svelte/transition';
+import CloseButton from '../utils/CloseButton.svelte';
+export let color = 'blue';
+export let simple = false;
+// Export a prop through which you can set a desired transition
+export let transition = 'fade';
+// Pass in extra transition params
+export let params = {};
 let visible = true;
-const handleHide = () => {
-    visible = !visible;
+const colors = {
+    blue: 'text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200',
+    green: 'text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200',
+    red: 'text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200',
+    gray: 'text-gray-500 bg-gray-100 dark:bg-gray-800 dark:text-gray-200',
+    purple: 'text-purple-500 bg-purple-100 dark:bg-purple-800 dark:text-purple-200',
+    indigo: 'text-indigo-500 bg-indigo-100 dark:bg-indigo-800 dark:text-indigo-200',
+    yellow: 'text-yellow-500 bg-yellow-100 dark:bg-yellow-800 dark:text-yellow-200'
 };
-export let iconColor = 'blue';
-// Export a prop through which you can set a desired transition
-export let transitionType = 'fade';
-// Pass in params
-export let transitionParams = {};
-let iconDivClass;
-export let divClass = 'flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800';
-export let textClass = 'ml-3 text-sm font-normal';
-export let btnClass = 'ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700';
-if (iconColor === 'blue') {
-    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200';
-}
-else if (iconColor === 'green') {
-    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200';
-}
-else if (iconColor === 'red') {
-    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200';
-}
-else if (iconColor === 'gray') {
-    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-gray-500 bg-gray-100 rounded-lg dark:bg-gray-800 dark:text-gray-200';
-}
-else if (iconColor === 'purple') {
-    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-purple-500 bg-purple-100 rounded-lg dark:bg-purple-800 dark:text-purple-200';
-}
-else if (iconColor === 'indigo') {
-    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-indigo-500 bg-indigo-100 rounded-lg dark:bg-indigo-800 dark:text-indigo-200';
-}
-else if (iconColor === 'yellow') {
-    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-yellow-500 bg-yellow-100 rounded-lg dark:bg-yellow-800 dark:text-yellow-200';
-}
-else {
-    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200';
-}
 // have a custom transition function that returns the desired transition
-function multiple(node, params) {
-    switch (transitionType) {
-        case 'slide':
-            return slide(node, params);
-        case 'blur':
-            return blur(node, params);
-        case 'fly':
-            return fly(node, params);
-        case 'fade':
-            return fade(node, params);
-    }
-}
+let transitionFunc;
+$: transitionFunc = transitions[transition] ?? transitions.fade;
+let divClass;
+$: divClass = classNames('w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800', $$props.class);
+let iconClass;
+$: iconClass = classNames('inline-flex items-center justify-center flex-shrink-0 rounded-lg w-8 h-8 mr-3', colors[color]);
 </script>
 
 {#if visible}
-	<div transition:multiple={transitionParams} class={divClass} role="alert">
-		<div class={iconDivClass}>
-			<slot name="icon" />
+	<div transition:transitionFunc={params} class={divClass} role="alert">
+		<div class="flex items-center w-full">
+			{#if $$slots.icon}
+				<div class={iconClass}>
+					<slot name="icon" />
+				</div>
+			{/if}
+
+			<div class="text-sm font-normal"><slot /></div>
+
+			{#if !simple}
+				<CloseButton on:click={() => (visible = false)} />
+			{/if}
 		</div>
-		<div class={textClass}><slot name="text" /></div>
-		<button type="button" class={btnClass} on:click={handleHide} aria-label="Close">
-			<span class="sr-only">Close</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="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>
+		<slot name="extra" />
 	</div>
 {/if}

package/toasts/Toast.svelte.d.ts

@@ -2,19 +2,19 @@ import { SvelteComponentTyped } from "svelte";
 import type { Colors, TransitionTypes, TransitionParamTypes } from '../types';
 declare const __propDef: {
     props: {
-        iconColor?: Colors;
-        transitionType?: TransitionTypes;
-        transitionParams?: TransitionParamTypes;
-        divClass?: string;
-        textClass?: string;
-        btnClass?: string;
+        [x: string]: any;
+        color?: Colors;
+        simple?: boolean;
+        transition?: TransitionTypes;
+        params?: TransitionParamTypes;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         icon: {};
-        text: {};
+        default: {};
+        extra: {};
     };
 };
 export declare type ToastProps = typeof __propDef.props;

package/utils/CloseButton.svelte

@@ -0,0 +1,27 @@
+<script>import classNames from 'classnames';
+export let color = 'default';
+const colors = {
+    gray: 'bg-gray-100 text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300',
+    red: 'bg-red-100 text-red-500 focus:ring-red-400 hover:bg-red-200 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300',
+    yellow: 'bg-yellow-100 text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300',
+    green: 'bg-green-100 text-green-500 focus:ring-green-400 hover:bg-green-200 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300',
+    indigo: 'bg-indigo-100 text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:bg-indigo-200 dark:text-indigo-600 dark:hover:bg-indigo-300',
+    purple: 'bg-purple-100 text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:bg-purple-200 dark:text-purple-600 dark:hover:bg-purple-300',
+    pink: 'bg-pink-100 text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:bg-pink-200 dark:text-pink-600 dark:hover:bg-pink-300',
+    blue: 'bg-blue-100 text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300',
+    default: 'bg-white text-gray-400 hover:text-gray-900 focus:ring-gray-300 hover:bg-gray-100 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700'
+};
+let buttonClass = '';
+$: buttonClass = classNames('ml-auto -mx-1 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex h-8 w-8', colors[color] ?? colors.blue, $$props.class);
+</script>
+
+<button on:click type="button" class={buttonClass} aria-label="Close">
+	<span class="sr-only">Close</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="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>

package/utils/CloseButton.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CloseButtonProps = typeof __propDef.props;
+export declare type CloseButtonEvents = typeof __propDef.events;
+export declare type CloseButtonSlots = typeof __propDef.slots;
+export default class CloseButton extends SvelteComponentTyped<CloseButtonProps, CloseButtonEvents, CloseButtonSlots> {
+}
+export {};

package/buttons/ColorShadowButton.svelte

@@ -1,33 +0,0 @@
-<script>export let textSize = 'text-sm';
-export let color = 'blue';
-let btnClass = `hover:bg-gradient-to-br focus:ring-4 shadow-lg dark:shadow-lg font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2 `;
-export let type = 'button';
-if (color === 'green') {
-    btnClass += `text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 focus:ring-green-300 dark:focus:ring-green-800 shadow-green-500/50 dark:shadow-green-800/80`;
-}
-else if (color === 'cyan') {
-    btnClass += `text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 focus:ring-cyan-300 dark:focus:ring-cyan-800 shadow-cyan-500/50 dark:shadow-cyan-800/80`;
-}
-else if (color === 'teal') {
-    btnClass += `text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 focus:ring-teal-300 dark:focus:ring-teal-800 shadow-teal-500/50 dark:shadow-teal-800/80`;
-}
-else if (color === 'lime') {
-    btnClass += `text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 focus:ring-lime-300 dark:focus:ring-lime-800 shadow-lime-500/50 dark:shadow-lime-800/80`;
-}
-else if (color === 'red') {
-    btnClass += `text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 focus:ring-red-300 dark:focus:ring-red-800 shadow-red-500/50 dark:shadow-red-800/80`;
-}
-else if (color === 'pink') {
-    btnClass += `text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 focus:ring-pink-300 dark:focus:ring-pink-800 shadow-pink-500/50 dark:shadow-pink-800/80`;
-}
-else if (color === 'purple') {
-    btnClass += `text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 focus:ring-purple-300 dark:focus:ring-purple-800 shadow-purple-500/50 dark:shadow-purple-800/80`;
-}
-else {
-    btnClass += `text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 focus:ring-blue-300 dark:focus:ring-blue-800 shadow-blue-500/50 dark:shadow-blue-800/80`;
-}
-</script>
-
-<button {type} class={btnClass} {...$$restProps} on:click>
-	<slot>Read more</slot>
-</button>

package/buttons/ColorShadowButton.svelte.d.ts

@@ -1,24 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Buttonshadows, Textsize, ButtonType } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        textSize?: Textsize;
-        color?: Buttonshadows;
-        type?: ButtonType;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type ColorShadowButtonProps = typeof __propDef.props;
-export declare type ColorShadowButtonEvents = typeof __propDef.events;
-export declare type ColorShadowButtonSlots = typeof __propDef.slots;
-export default class ColorShadowButton extends SvelteComponentTyped<ColorShadowButtonProps, ColorShadowButtonEvents, ColorShadowButtonSlots> {
-}
-export {};

package/buttons/GradientDuotoneButton.svelte

@@ -1,30 +0,0 @@
-<script>export let textSize = 'text-sm';
-export let color = 'purple2blue';
-let btnClass = `focus:ring-4 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2 `;
-export let type = 'button';
-if (color === 'cyan2blue') {
-    btnClass += `text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-blfocus:ring-cyan-300 dark:focus:ring-cyan-800`;
-}
-else if (color === 'green2blue') {
-    btnClass += `text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-blfocus:ring-green-200 dark:focus:ring-green-800`;
-}
-else if (color === 'purple2pink') {
-    btnClass += `text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-lfocus:ring-purple-200 dark:focus:ring-purple-800`;
-}
-else if (color === 'pink2orange') {
-    btnClass += `text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-blfocus:ring-pink-200 dark:focus:ring-pink-800`;
-}
-else if (color === 'teal2lime') {
-    btnClass += `text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200focus:ring-lime-200 dark:focus:ring-teal-700`;
-}
-else if (color === 'red2yellow') {
-    btnClass += `text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-blfocus:ring-red-100 dark:focus:ring-red-400`;
-}
-else {
-    btnClass += `text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-blfocus:ring-blue-300 dark:focus:ring-blue-800`;
-}
-</script>
-
-<button {type} class={btnClass} {...$$restProps} on:click>
-	<slot>Read more</slot>
-</button>

package/buttons/GradientDuotoneButton.svelte.d.ts

@@ -1,24 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Gradientduotones, Textsize, ButtonType } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        textSize?: Textsize;
-        color?: Gradientduotones;
-        type?: ButtonType;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type GradientDuotoneButtonProps = typeof __propDef.props;
-export declare type GradientDuotoneButtonEvents = typeof __propDef.events;
-export declare type GradientDuotoneButtonSlots = typeof __propDef.slots;
-export default class GradientDuotoneButton extends SvelteComponentTyped<GradientDuotoneButtonProps, GradientDuotoneButtonEvents, GradientDuotoneButtonSlots> {
-}
-export {};

package/buttons/GradientMonochromeButton.svelte

@@ -1,33 +0,0 @@
-<script>export let textSize = 'text-sm';
-export let color = 'blue';
-let btnClass = `focus:ring-4 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2 `;
-export let type = 'button';
-if (color === 'green') {
-    btnClass += `text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-green-300 dark:focus:ring-green-800`;
-}
-else if (color === 'cyan') {
-    btnClass += `text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-cyan-300 dark:focus:ring-cyan-800`;
-}
-else if (color === 'teal') {
-    btnClass += `text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-teal-300 dark:focus:ring-teal-800`;
-}
-else if (color === 'lime') {
-    btnClass += `text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-lime-300 dark:focus:ring-lime-800`;
-}
-else if (color === 'red') {
-    btnClass += `text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-red-300 dark:focus:ring-red-800`;
-}
-else if (color === 'pink') {
-    btnClass += `text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-pink-300 dark:focus:ring-pink-800`;
-}
-else if (color === 'purple') {
-    btnClass += `text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-purple-300 dark:focus:ring-purple-800`;
-}
-else {
-    btnClass += `text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-blue-300 dark:focus:ring-blue-800`;
-}
-</script>
-
-<button {type} class={btnClass} {...$$restProps} on:click>
-	<slot>Read more</slot>
-</button>

package/buttons/GradientMonochromeButton.svelte.d.ts

@@ -1,24 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Buttonshadows, Textsize, ButtonType } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        textSize?: Textsize;
-        color?: Buttonshadows;
-        type?: ButtonType;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type GradientMonochromeButtonProps = typeof __propDef.props;
-export declare type GradientMonochromeButtonEvents = typeof __propDef.events;
-export declare type GradientMonochromeButtonSlots = typeof __propDef.slots;
-export default class GradientMonochromeButton extends SvelteComponentTyped<GradientMonochromeButtonProps, GradientMonochromeButtonEvents, GradientMonochromeButtonSlots> {
-}
-export {};

package/buttons/GradientOutlineButton.svelte

@@ -1,33 +0,0 @@
-<script>export let textSize = 'text-sm';
-export let color = 'purple2blue';
-export let name = 'Read more';
-export let type = 'button';
-let btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br focus:ring-4 `;
-let spanClass = 'relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0';
-if (color === 'cyan2blue') {
-    btnClass += `from-cyan-500 to-blue-500 group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white dark:text-white focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800`;
-}
-else if (color === 'green2blue') {
-    btnClass += `from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white dark:text-white focus:ring-green-200 dark:focus:ring-green-800`;
-}
-else if (color === 'purple2pink') {
-    btnClass += `from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-purple-200 dark:focus:ring-purple-800`;
-}
-else if (color === 'pink2orange') {
-    btnClass += `from-pink-500 to-orange-400 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:ring-pink-200 dark:focus:ring-pink-800`;
-}
-else if (color === 'teal2lime') {
-    btnClass += `from-teal-300 to-lime-300 group-hover:from-teal-300 group-hover:to-lime-300 dark:text-white dark:hover:text-gray-900 focus:ring-lime-200 dark:focus:ring-lime-800`;
-}
-else if (color === 'red2yellow') {
-    btnClass += `from-red-200 via-red-300 to-yellow-200 group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:text-white dark:hover:text-gray-900 focus:ring-red-100 dark:focus:ring-red-400`;
-}
-else {
-    btnClass += `from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-blue-300 dark:focus:ring-blue-800`;
-}
-</script>
-
-<button class={btnClass} {type} {...$$restProps} on:click>
-	<span class={spanClass}>{name}</span>
-	<slot />
-</button>

package/buttons/GradientOutlineButton.svelte.d.ts

@@ -1,25 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Gradientduotones, Textsize, ButtonType } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        textSize?: Textsize;
-        color?: Gradientduotones;
-        name?: string;
-        type?: ButtonType;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type GradientOutlineButtonProps = typeof __propDef.props;
-export declare type GradientOutlineButtonEvents = typeof __propDef.events;
-export declare type GradientOutlineButtonSlots = typeof __propDef.slots;
-export default class GradientOutlineButton extends SvelteComponentTyped<GradientOutlineButtonProps, GradientOutlineButtonEvents, GradientOutlineButtonSlots> {
-}
-export {};