flowbite-svelte 0.19.12 → 0.21.0

package/CHANGELOG.md

@@ -2,6 +2,35 @@
 
 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.21.0](https://github.com/themesberg/flowbite-svelte/compare/v0.20.0...v0.21.0) (2022-07-01)
+
+
+### ⚠ BREAKING CHANGES
+
+* Footer component updated
+
+### Features
+
+* Footer component updated ([c144ba6](https://github.com/themesberg/flowbite-svelte/commit/c144ba67bc7bf883066c9de2afaca21f1dc82bf3))
+
+## [0.20.0](https://github.com/themesberg/flowbite-svelte/compare/v0.19.13...v0.20.0) (2022-07-01)
+
+
+### ⚠ BREAKING CHANGES
+
+* Button component API update
+
+### Features
+
+* Button component API update ([934ff9b](https://github.com/themesberg/flowbite-svelte/commit/934ff9b6fdb63fa8f10bb93a1ed1ef1afaf95421))
+
+### [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)

package/buttons/Button.svelte

@@ -5,11 +5,9 @@ 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;
+export let shadow = null;
 export let positionInGroup = null;
-export let outlineStyle = null;
 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 +19,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 +27,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 +37,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 +79,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/footer/Footer.svelte

@@ -0,0 +1,18 @@
+<script>import classNames from 'classnames';
+export let footerType = 'default';
+</script>
+
+<footer
+	class={classNames(
+		{
+			'bg-gray-800': footerType === 'sitemap',
+			'p-4 bg-white sm:p-6 dark:bg-gray-800': footerType === 'socialmedia',
+			'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800': footerType === 'logo',
+			'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800':
+				footerType === 'default'
+		},
+		$$props.class
+	)}
+>
+	<slot />
+</footer>

package/footer/Footer.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        footerType?: 'sitemap' | 'default' | 'logo' | 'socialmedia';
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type FooterProps = typeof __propDef.props;
+export declare type FooterEvents = typeof __propDef.events;
+export declare type FooterSlots = typeof __propDef.slots;
+export default class Footer extends SvelteComponentTyped<FooterProps, FooterEvents, FooterSlots> {
+}
+export {};

package/footer/FooterBrand.svelte

@@ -0,0 +1,19 @@
+<script>import classNames from 'classnames';
+export let aClass = 'flex items-center';
+export let spanClass = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
+export let imgClass = 'mr-3 h-8';
+export let href = '';
+export let src = '';
+export let alt = '';
+export let name = '';
+</script>
+
+{#if href}
+	<a {href} class={classNames(aClass, $$props.class)}>
+		<img {src} class={imgClass} {alt} />
+		<span class={spanClass}>{name}</span>
+		<slot />
+	</a>
+{:else}
+	<img {src} class={imgClass} {alt} />
+{/if}

package/footer/FooterBrand.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        aClass?: string;
+        spanClass?: string;
+        imgClass?: string;
+        href?: string;
+        src?: string;
+        alt?: string;
+        name?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type FooterBrandProps = typeof __propDef.props;
+export declare type FooterBrandEvents = typeof __propDef.events;
+export declare type FooterBrandSlots = typeof __propDef.slots;
+export default class FooterBrand extends SvelteComponentTyped<FooterBrandProps, FooterBrandEvents, FooterBrandSlots> {
+}
+export {};

package/footer/FooterCopyright.svelte

@@ -0,0 +1,19 @@
+<script>import classNames from 'classnames';
+export let spanClass = 'text-sm text-gray-500 sm:text-center dark:text-gray-400';
+export let aClass = 'hover:underline';
+export let year = new Date().getFullYear();
+export let href = '';
+export let by = '';
+</script>
+
+<span class={classNames(spanClass, $$props.class)}>
+	&copy; {year}
+	{#if href}
+		<a {href} class={aClass}>
+			{by}
+		</a>
+	{:else}
+		<span class="ml-1">{by}</span>
+	{/if}
+	. All Rights Reserved.
+</span>

package/footer/FooterCopyright.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        spanClass?: string;
+        aClass?: string;
+        year?: number;
+        href?: string;
+        by?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FooterCopyrightProps = typeof __propDef.props;
+export declare type FooterCopyrightEvents = typeof __propDef.events;
+export declare type FooterCopyrightSlots = typeof __propDef.slots;
+export default class FooterCopyright extends SvelteComponentTyped<FooterCopyrightProps, FooterCopyrightEvents, FooterCopyrightSlots> {
+}
+export {};

package/footer/FooterIcon.svelte

@@ -0,0 +1,16 @@
+<script>import classNames from 'classnames';
+export let href = '';
+export let ariaLabel = '';
+export let aClass = 'text-gray-500 hover:text-gray-900 dark:hover:text-white';
+export let icon = null;
+export let iconClass = 'h-5 w-5';
+export let size = '20';
+</script>
+
+{#if href}
+	<a {href} aria-label={ariaLabel} class={classNames(aClass, $$props.class)}>
+		<svelte:component this={icon} {size} class={iconClass} />
+	</a>
+{:else}
+	<svelte:component this={icon} {size} class={iconClass} />
+{/if}

package/footer/FooterIcon.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SvelteComponent } from 'svelte';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        href?: string;
+        ariaLabel?: string;
+        aClass?: string;
+        icon?: typeof SvelteComponent | null;
+        iconClass?: string;
+        size?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FooterIconProps = typeof __propDef.props;
+export declare type FooterIconEvents = typeof __propDef.events;
+export declare type FooterIconSlots = typeof __propDef.slots;
+export default class FooterIcon extends SvelteComponentTyped<FooterIconProps, FooterIconEvents, FooterIconSlots> {
+}
+export {};

package/footer/FooterLink.svelte

@@ -0,0 +1,11 @@
+<script>import classNames from 'classnames';
+export let liClass = 'mr-4 last:mr-0 md:mr-6';
+export let aClass = 'hover:underline';
+export let href = '';
+</script>
+
+<li class={classNames(liClass, $$props.class)}>
+	<a {href} class={aClass}>
+		<slot />
+	</a>
+</li>

package/footer/FooterLink.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        liClass?: string;
+        aClass?: string;
+        href?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type FooterLinkProps = typeof __propDef.props;
+export declare type FooterLinkEvents = typeof __propDef.events;
+export declare type FooterLinkSlots = typeof __propDef.slots;
+export default class FooterLink extends SvelteComponentTyped<FooterLinkProps, FooterLinkEvents, FooterLinkSlots> {
+}
+export {};

package/footer/FooterLinkGroup.svelte

@@ -0,0 +1,7 @@
+<script>import classNames from 'classnames';
+export let ulClass = 'text-gray-600 dark:text-gray-400';
+</script>
+
+<ul class={classNames(ulClass, $$props.class)}>
+	<slot />
+</ul>

package/footer/FooterLinkGroup.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        ulClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type FooterLinkGroupProps = typeof __propDef.props;
+export declare type FooterLinkGroupEvents = typeof __propDef.events;
+export declare type FooterLinkGroupSlots = typeof __propDef.slots;
+export default class FooterLinkGroup extends SvelteComponentTyped<FooterLinkGroupProps, FooterLinkGroupEvents, FooterLinkGroupSlots> {
+}
+export {};

package/footer/LogoFooter.svelte

@@ -1,6 +1,6 @@
-<script>export let site;
+<script>import classNames from 'classnames';
+export let site;
 export let links;
-export let footerClass = 'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800';
 export let divClass = 'sm:flex sm:items-center sm:justify-between';
 export let siteNameClass = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
 export let ulClass = 'flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400';
@@ -14,23 +14,21 @@ export let copyrightYear = '© 2022';
 export let allRightsReserved = 'All Rights Reserved.';
 </script>
 
-<footer class="{footerClass} {$$props.class ? $$props.class : ''}">
-	<div class={divClass}>
-		<a href={site.href} class={siteNameLinkClass}>
-			<img src={site.img} class={imgClass} alt={site.name} />
-			<span class={siteNameClass}>{site.name}</span>
-		</a>
-		<ul class={ulClass}>
-			{#each links as { name, href, rel }}
-				<li>
-					<a {href} {rel} class={aClass}>{name}</a>
-				</li>
-			{/each}
-		</ul>
-	</div>
-	<hr class={hrClass} />
-	<span class={copyRightSpanClass}
-		>{copyrightYear}
-		<a href={site.href} class={copyRightLinkClass}>{site.name}</a>. {allRightsReserved}
-	</span>
-</footer>
+<div class={divClass}>
+	<a href={site.href} class={siteNameLinkClass}>
+		<img src={site.img} class={imgClass} alt={site.name} />
+		<span class={siteNameClass}>{site.name}</span>
+	</a>
+	<ul class={ulClass}>
+		{#each links as { name, href, rel }}
+			<li>
+				<a {href} {rel} class={aClass}>{name}</a>
+			</li>
+		{/each}
+	</ul>
+</div>
+<hr class={hrClass} />
+<span class={copyRightSpanClass}
+	>{copyrightYear}
+	<a href={site.href} class={copyRightLinkClass}>{site.name}</a>. {allRightsReserved}
+</span>

package/footer/LogoFooter.svelte.d.ts

@@ -2,10 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 import type { LinkType, SiteType } from '../types';
 declare const __propDef: {
     props: {
-        [x: string]: any;
         site: SiteType;
         links: LinkType[];
-        footerClass?: string;
         divClass?: string;
         siteNameClass?: string;
         ulClass?: string;

package/footer/SimpleFooter.svelte

@@ -1,6 +1,6 @@
-<script>export let site;
+<script>import classNames from 'classnames';
+export let site;
 export let links;
-export let footerClass = 'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800';
 export let siteNameClass = 'text-sm text-gray-500 sm:text-center dark:text-gray-400';
 export let ulClass = 'flex flex-wrap items-center mt-3 sm:mt-0';
 export let aClass = 'mr-4 text-sm text-gray-500 hover:underline md:mr-6 dark:text-gray-400';
@@ -9,16 +9,14 @@ export let copyrightYear = '© 2022';
 export let allRightsReserved = 'All Rights Reserved.';
 </script>
 
-<footer class="{footerClass} {$$props.class ? $$props.class : ''}">
-	<span class={siteNameClass}
-		>{copyrightYear}
-		<a href={site.href} class={siteNameLinkClass} target="_blank">{site.name}</a>. {allRightsReserved}
-	</span>
-	<ul class={ulClass}>
-		{#each links as { name, href, rel }}
-			<li>
-				<a {href} {rel} class={aClass}>{name}</a>
-			</li>
-		{/each}
-	</ul>
-</footer>
+<span class={siteNameClass}
+	>{copyrightYear}
+	<a href={site.href} class={siteNameLinkClass} target="_blank">{site.name}</a>. {allRightsReserved}
+</span>
+<ul class={ulClass}>
+	{#each links as { name, href, rel }}
+		<li>
+			<a {href} {rel} class={aClass}>{name}</a>
+		</li>
+	{/each}
+</ul>

package/footer/SimpleFooter.svelte.d.ts

@@ -2,10 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 import type { LinkType, SiteType } from '../types';
 declare const __propDef: {
     props: {
-        [x: string]: any;
         site: SiteType;
         links: LinkType[];
-        footerClass?: string;
         siteNameClass?: string;
         ulClass?: string;
         aClass?: string;

package/footer/SitemapFooter.svelte

@@ -1,7 +1,6 @@
 <script>export let site;
 export let links;
 export let socialMedia;
-export let footerClass = 'bg-white dark:bg-gray-800';
 export let linksClass = 'grid grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4';
 export let parentClass = 'mb-6 text-sm font-semibold dark:text-gray-400 uppercase';
 export let ulClass = 'text-gray-900 dark:text-gray-300';
@@ -16,31 +15,31 @@ export let copyrightYear = '© 2022';
 export let allRightsReserved = 'All Rights Reserved.';
 </script>
 
-<footer class="{footerClass} {$$props.class ? $$props.class : ''}">
-	<div class={linksClass}>
-		{#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 class={copyrightDivClass}>
-		<span class={copyrightClass}>{copyrightYear} <a href={site.href}>{site.name}</a>. {allRightsReserved} </span>
-		<div class={socialMediaDivClass}>
-			{#each socialMedia as { href, icon }}
-				<a {href} class={socialMediaLinkClass}>
-					<svelte:component this={icon} className={iconClass} />
-				</a>
-			{/each}
+<div class={linksClass}>
+	{#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 class={copyrightDivClass}>
+	<span class={copyrightClass}
+		>{copyrightYear} <a href={site.href}>{site.name}</a>. {allRightsReserved}
+	</span>
+	<div class={socialMediaDivClass}>
+		{#each socialMedia as { href, icon }}
+			<a {href} class={socialMediaLinkClass}>
+				<svelte:component this={icon} className={iconClass} />
+			</a>
+		{/each}
 	</div>
-</footer>
+</div>

package/footer/SitemapFooter.svelte.d.ts

@@ -2,11 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 import type { SiteType, SocialMediaType, SocialMediaLinkType } from '../types';
 declare const __propDef: {
     props: {
-        [x: string]: any;
         site: SiteType;
         links: SocialMediaLinkType[];
         socialMedia: SocialMediaType[];
-        footerClass?: string;
         linksClass?: string;
         parentClass?: string;
         ulClass?: string;

package/footer/SocialMediaFooter.svelte

@@ -1,7 +1,7 @@
-<script>export let site;
+<script>import classNames from 'classnames';
+export let site;
 export let links;
 export let socialMedia;
-export let footerClass = 'p-4 bg-white sm:p-6 dark:bg-gray-800';
 export let divClass = 'md:flex md:justify-between';
 export let divClass2 = 'mb-6 md:mb-0';
 export let siteLinkClass = 'flex items-center';
@@ -22,43 +22,42 @@ export let copyrightYear = '© 2022';
 export let allRightsReserved = 'All Rights Reserved.';
 </script>
 
-<footer class="{footerClass} {$$props.class ? $$props.class : ''}">
-	<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>
-		</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 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>
-	<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>
+<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>
-</footer>
+</div>

package/footer/SocialMediaFooter.svelte.d.ts

@@ -2,11 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 import type { SocialMediaLinkType, SocialMediaType, SiteType } from '../types';
 declare const __propDef: {
     props: {
-        [x: string]: any;
         site: SiteType;
         links: SocialMediaLinkType[];
         socialMedia: SocialMediaType[];
-        footerClass?: string;
         divClass?: string;
         divClass2?: string;
         siteLinkClass?: string;
@@ -29,7 +27,9 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type SocialMediaFooterProps = typeof __propDef.props;
 export declare type SocialMediaFooterEvents = typeof __propDef.events;

package/index.d.ts

@@ -6,10 +6,6 @@ export { default as Badge } from './badges/Badge.svelte';
 export { default as Breadcrumb } from './breadcrumbs/Breadcrumb.svelte';
 export { default as BreadcrumbItem } from './breadcrumbs/BreadcrumbItem.svelte';
 export { default as Button } from './buttons/Button.svelte';
-export { default as ColorShadowButton } from './buttons/ColorShadowButton.svelte';
-export { default as GradientDuotoneButton } from './buttons/GradientDuotoneButton.svelte';
-export { default as GradientMonochromeButton } from './buttons/GradientMonochromeButton.svelte';
-export { default as GradientOutlineButton } from './buttons/GradientOutlineButton.svelte';
 export { default as ButtonGroup } from './buttongroups/ButtonGroup.svelte';
 export { default as ButtonGroupItem } from './buttongroups/ButtonGroupItem.svelte';
 export { default as Card } from './cards/Card.svelte';
@@ -26,10 +22,12 @@ export { default as Dropdown } from './dropdowns/Dropdown.svelte';
 export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';
 export { default as DropdownHeader } from './dropdowns/DropdownHeader.svelte';
 export { default as DropdownItem } from './dropdowns/DropdownItem.svelte';
-export { default as SimpleFooter } from './footer/SimpleFooter.svelte';
-export { default as LogoFooter } from './footer/LogoFooter.svelte';
-export { default as SocialMediaFooter } from './footer/SocialMediaFooter.svelte';
-export { default as SitemapFooter } from './footer/SitemapFooter.svelte';
+export { default as Footer } from './footer/Footer.svelte';
+export { default as FooterBrand } from './footer/FooterBrand.svelte';
+export { default as FooterCopyright } from './footer/FooterCopyright.svelte';
+export { default as FooterIcon } from './footer/FooterIcon.svelte';
+export { default as FooterLink } from './footer/FooterLink.svelte';
+export { default as FooterLinkGroup } from './footer/FooterLinkGroup.svelte';
 export { default as Checkbox } from './forms/Checkbox.svelte';
 export { default as Fileupload } from './forms/Fileupload.svelte';
 export { default as FloatingLabelInput } from './forms/FloatingLabelInput.svelte';

package/index.js

@@ -12,10 +12,6 @@ export { default as Breadcrumb } from './breadcrumbs/Breadcrumb.svelte';
 export { default as BreadcrumbItem } from './breadcrumbs/BreadcrumbItem.svelte';
 // Buttons
 export { default as Button } from './buttons/Button.svelte';
-export { default as ColorShadowButton } from './buttons/ColorShadowButton.svelte';
-export { default as GradientDuotoneButton } from './buttons/GradientDuotoneButton.svelte';
-export { default as GradientMonochromeButton } from './buttons/GradientMonochromeButton.svelte';
-export { default as GradientOutlineButton } from './buttons/GradientOutlineButton.svelte';
 // Buttongroups
 export { default as ButtonGroup } from './buttongroups/ButtonGroup.svelte';
 export { default as ButtonGroupItem } from './buttongroups/ButtonGroupItem.svelte';
@@ -38,10 +34,12 @@ export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';
 export { default as DropdownHeader } from './dropdowns/DropdownHeader.svelte';
 export { default as DropdownItem } from './dropdowns/DropdownItem.svelte';
 // Footers
-export { default as SimpleFooter } from './footer/SimpleFooter.svelte';
-export { default as LogoFooter } from './footer/LogoFooter.svelte';
-export { default as SocialMediaFooter } from './footer/SocialMediaFooter.svelte';
-export { default as SitemapFooter } from './footer/SitemapFooter.svelte';
+export { default as Footer } from './footer/Footer.svelte';
+export { default as FooterBrand } from './footer/FooterBrand.svelte';
+export { default as FooterCopyright } from './footer/FooterCopyright.svelte';
+export { default as FooterIcon } from './footer/FooterIcon.svelte';
+export { default as FooterLink } from './footer/FooterLink.svelte';
+export { default as FooterLinkGroup } from './footer/FooterLinkGroup.svelte';
 // Forms
 export { default as Checkbox } from './forms/Checkbox.svelte';
 export { default as Fileupload } from './forms/Fileupload.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.19.12",
+  "version": "0.21.0",
   "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",
@@ -125,6 +121,12 @@
     "./dropdowns/DropdownDivider.svelte": "./dropdowns/DropdownDivider.svelte",
     "./dropdowns/DropdownHeader.svelte": "./dropdowns/DropdownHeader.svelte",
     "./dropdowns/DropdownItem.svelte": "./dropdowns/DropdownItem.svelte",
+    "./footer/Footer.svelte": "./footer/Footer.svelte",
+    "./footer/FooterBrand.svelte": "./footer/FooterBrand.svelte",
+    "./footer/FooterCopyright.svelte": "./footer/FooterCopyright.svelte",
+    "./footer/FooterIcon.svelte": "./footer/FooterIcon.svelte",
+    "./footer/FooterLink.svelte": "./footer/FooterLink.svelte",
+    "./footer/FooterLinkGroup.svelte": "./footer/FooterLinkGroup.svelte",
     "./footer/LogoFooter.svelte": "./footer/LogoFooter.svelte",
     "./footer/SimpleFooter.svelte": "./footer/SimpleFooter.svelte",
     "./footer/SitemapFooter.svelte": "./footer/SitemapFooter.svelte",

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