flowbite-svelte 0.19.13 → 0.21.1

package/CHANGELOG.md

@@ -2,6 +2,44 @@
 
 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.1](https://github.com/themesberg/flowbite-svelte/compare/v0.21.0...v0.21.1) (2022-07-12)
+
+
+### Features
+
+* add positioning to Toasts ([a88f641](https://github.com/themesberg/flowbite-svelte/commit/a88f641731efc52d55c6474a8f9696598fd339cc))
+* merging jjagielka-buttons ([94ffdcb](https://github.com/themesberg/flowbite-svelte/commit/94ffdcba071488d0d56492c3a1fdb148afdb9450))
+
+
+### Bug Fixes
+
+* buttons - transparency for outline ([6ae3d0f](https://github.com/themesberg/flowbite-svelte/commit/6ae3d0ff767e307ae5a4968f7b3c9a52dbb324f4))
+* documentation typos ([942c3b2](https://github.com/themesberg/flowbite-svelte/commit/942c3b2a2624aec3ba4d34cfab2c1098d41cd362))
+* removed bg and text from CloseButton to keep transparency ([b5d36ee](https://github.com/themesberg/flowbite-svelte/commit/b5d36eec584f89a46d59346995b79b9b0d0fd906))
+* reverting Alert ([ccda53a](https://github.com/themesberg/flowbite-svelte/commit/ccda53ad474e0c6a39ffa6297555485f08ea9b5d))
+
+## [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)
 
 

package/alerts/Alert.svelte

@@ -1,11 +1,12 @@
 <script>import classNames from 'classnames';
 import { createEventDispatcher } from 'svelte';
+import CloseButton from '../utils/CloseButton.svelte';
 const dispatch = createEventDispatcher();
 export let color = 'blue';
 export let icon = null;
-export let closeBtn = false;
+export let dismissable = false;
 export let rounded = true;
-export let borderAccent = false;
+export let accent = false;
 let hidden = false;
 const handleAlert = () => {
     dispatch('handleAlert');
@@ -13,14 +14,6 @@ const handleAlert = () => {
 const handleHide = () => {
     hidden = !hidden;
 };
-let divClass = 'flex flex-col p-4 mb-4 gap-2 ';
-let contentClass;
-let buttonClass = 'ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex h-8 w-8 ';
-// TODO: update on change
-if (rounded)
-    divClass += 'rounded-lg ';
-if (borderAccent)
-    divClass += 'border-t-4 ';
 const bgClasses = {
     gray: 'bg-gray-100 dark:bg-gray-200 ',
     red: 'bg-red-100 dark:bg-red-200',
@@ -29,7 +22,8 @@ const bgClasses = {
     indigo: 'bg-indigo-100 dark:bg-indigo-200 ',
     purple: 'bg-purple-100 dark:bg-purple-200 ',
     pink: 'bg-pink-100 dark:bg-pink-200 ',
-    blue: 'bg-blue-100 dark:bg-blue-200 '
+    blue: 'bg-blue-100 dark:bg-blue-200 ',
+    dark: 'bg-gray-100 dark:bg-gray-700'
 };
 const borderAccentClasses = {
     gray: 'border-gray-500 dark:bg-gray-200 ',
@@ -39,9 +33,10 @@ const borderAccentClasses = {
     indigo: 'border-indigo-500 dark:bg-indigo-200 ',
     purple: 'border-purple-500 dark:bg-purple-200 ',
     pink: 'border-pink-500 dark:bg-pink-200 ',
-    blue: 'border-blue-500 dark:bg-blue-200 '
+    blue: 'border-blue-500 dark:bg-blue-200 ',
+    dark: 'border-gray-500'
 };
-const contentClasses = {
+const textColors = {
     gray: 'text-gray-700 dark:text-gray-800',
     red: 'text-red-700 dark:text-red-800',
     yellow: 'text-yellow-700 dark:text-yellow-800',
@@ -49,56 +44,27 @@ const contentClasses = {
     indigo: 'text-indigo-700 dark:text-indigo-800',
     purple: 'text-purple-700 dark:text-purple-800',
     pink: 'text-pink-700 dark:text-pink-800',
-    blue: 'text-blue-700 dark:text-blue-800'
+    blue: 'text-blue-700 dark:text-blue-800',
+    dark: 'text-gray-700  dark:text-gray-300'
 };
-const buttonClasses = {
-    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'
-};
-divClass += bgClasses[color] ?? bgClasses.blue;
-if (borderAccent)
-    divClass += borderAccentClasses[color] ?? borderAccentClasses.blue;
-contentClass = contentClasses[color] ?? contentClasses.blue;
-buttonClass += buttonClasses[color] ?? buttonClasses.blue;
+let divClass;
+$: divClass = classNames('flex flex-col p-4 mb-4 gap-2 ', bgClasses[color] ?? bgClasses.blue, accent && (borderAccentClasses[color] ?? borderAccentClasses.blue), rounded && 'rounded-lg ', accent && 'border-t-4 ', $$props.class);
+let textColor;
+$: textColor = textColors[color] ?? textColors.blue;
 </script>
 
-<div id={$$props.id} class:hidden class={classNames(divClass, $$props.class)} role="alert">
-	<div class="flex">
+<div id={$$props.id} class:hidden class={divClass} role="alert">
+	<div class="flex items-center">
 		{#if icon}
-			<svelte:component this={icon} class="flex-shrink-0 w-5 h-5 {contentClass} mr-3" />
+			<svelte:component this={icon} class="flex-shrink-0 w-5 h-5 {textColor} mr-3" />
 		{/if}
 
-		<div class="text-sm font-medium {contentClass}">
-			<slot name="content" />
+		<div class="text-sm {textColor}">
+			<slot />
 		</div>
 
-		{#if closeBtn}
-			<button
-				on:click={handleHide}
-				on:click={handleAlert}
-				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>
+		{#if dismissable}
+			<CloseButton {color} on:click={handleHide} on:click={handleAlert} />
 		{/if}
 	</div>
 	<slot name="extra" />

package/alerts/Alert.svelte.d.ts

@@ -6,9 +6,9 @@ declare const __propDef: {
         [x: string]: any;
         color?: Colors;
         icon?: typeof SvelteComponent | null;
-        closeBtn?: boolean;
+        dismissable?: boolean;
         rounded?: boolean;
-        borderAccent?: boolean;
+        accent?: boolean;
     };
     events: {
         handleAlert: CustomEvent<any>;
@@ -16,7 +16,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        content: {};
+        default: {};
         extra: {};
     };
 };

package/badges/Badge.svelte

@@ -2,6 +2,7 @@
 export let color = 'blue';
 export let large = false;
 export let href;
+export let rounded = false;
 let badgeClass;
 const colors = {
     blue: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800',
@@ -23,9 +24,9 @@ const hovers = {
     purple: 'hover:bg-purple-200 dark:hover:bg-purple-300',
     pink: 'hover:bg-pink-200 dark:hover:bg-pink-300'
 };
-$: badgeClass = classNames('inline-flex items-center mr-2 px-2.5 py-0.5 rounded', large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color] ?? colors.blue, href && (hovers[color] ?? hovers.blue), $$props.class);
+$: badgeClass = classNames('inline-flex items-center justify-center mr-2', large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color] ?? colors.blue, href && (hovers[color] ?? hovers.blue), rounded ? 'rounded-full p-1' : 'rounded px-2.5 py-0.5', $$props.class);
 </script>
 
-<svelte:element this={href ? 'a' : 'span'} {href} class={badgeClass} {...$$restProps}>
+<svelte:element this={href ? 'a' : 'span'} {href} {...$$restProps} class={badgeClass}>
 	<slot />
 </svelte:element>

package/badges/Badge.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         color?: Colors;
         large?: boolean;
         href: string;
+        rounded?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/buttons/Button.svelte

@@ -1,43 +1,36 @@
 <script>import classNames from 'classnames';
-export let label = '';
 export let pill = false;
 export let outline = false;
-export let color = 'blue';
-export let size = 'md';
-export let icon = undefined;
 export let gradient = false;
-let gradientMonochrome;
-let gradientDuoTone;
+export let size = 'md';
+export let color = 'blue';
 export let shadow = null;
-export let positionInGroup = 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',
-    dark: 'text-white bg-gray-800 border border-transparent hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 disabled:hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700 dark:disabled:hover:bg-gray-800',
-    light: 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 disabled:hover:bg-white dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700',
-    green: 'text-white bg-green-700 border border-transparent hover:bg-green-800 focus:ring-4 focus:ring-green-300 disabled:hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800 dark:disabled:hover:bg-green-600',
-    red: 'text-white bg-red-700 border border-transparent hover:bg-red-800 focus:ring-4 focus:ring-red-300 disabled:hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900 dark:disabled:hover:bg-red-600',
-    yellow: 'text-white bg-yellow-400 border border-transparent hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 disabled:hover:bg-yellow-400 dark:focus:ring-yellow-900 dark:disabled:hover:bg-yellow-400',
-    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: ''
+    blue: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800',
+    dark: 'text-white bg-gray-800 hover:bg-gray-900 focus:ring-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700',
+    alternative: 'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 hover:text-blue-700 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700',
+    light: 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700',
+    green: 'text-white bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800',
+    red: 'text-white bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900',
+    yellow: 'text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300 dark:focus:ring-yellow-900',
+    purple: 'text-white bg-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900'
 };
 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',
-    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:ring-teal-300 dark:focus:ring-teal-800',
-    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',
-    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',
-    purpleToPink: 'text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:ring-purple-200 dark:focus:ring-purple-800',
-    pinkToOrange: 'text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800',
-    tealToLime: '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-200 hover:!text-gray-900 focus:ring-4 focus:ring-lime-200 dark:focus:ring-teal-700',
-    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'
+    blue: '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 ',
+    green: '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',
+    cyan: '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',
+    teal: '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',
+    lime: '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',
+    red: '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',
+    pink: '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',
+    purple: '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',
+    purpleToBlue: 'text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl 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-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-green-200 dark:focus:ring-green-800',
+    purpleToPink: 'text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-purple-200 dark:focus:ring-purple-800',
+    pinkToOrange: 'text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-pink-200 dark:focus:ring-pink-800',
+    tealToLime: 'text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l focus:ring-lime-200 dark:focus:ring-teal-700',
+    redToYellow: 'text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-red-100 dark:focus:ring-red-400'
 };
 const coloredShadowClasses = {
     blue: 'shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80',
@@ -50,13 +43,12 @@ const coloredShadowClasses = {
     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',
-    dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800',
-    green: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800',
-    red: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300  dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900',
-    yellow: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:outline-none focus:ring-yellow-300 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900',
-    purple: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-purple-300 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900',
-    white: 'text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700'
+    blue: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800',
+    dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-gray-300 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800',
+    green: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800',
+    red: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900',
+    yellow: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900',
+    purple: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900'
 };
 const sizeClasses = {
     xs: 'text-xs px-2 py-1',
@@ -65,64 +57,20 @@ const sizeClasses = {
     lg: 'text-base px-5 py-2.5',
     xl: 'text-base px-6 py-3'
 };
-const iconSizeClasses = {
-    xs: '!px-1',
-    sm: '!px-1.5',
-    md: '!px-2',
-    lg: '!p-2.5',
-    xl: '!p-3'
-};
+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);
+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>
 
-<button
-	on:click
-	data-testid="button-element"
-	type="button"
-	{...$$props}
-	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',
-		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,
-			'focus:!ring-2': !!positionInGroup,
-			'rounded-r-none': positionInGroup === 'start',
-			'!rounded-none border-l-0 pl-0': positionInGroup === 'middle',
-			'rounded-l-none border-l-0 pl-0': positionInGroup === 'end'
-		},
-		$$props.class
-	)}
->
-	<span
-		class={classNames(
-			'flex items-center',
-			sizeClasses[size],
-			outline && pill ? 'rounded-full' : 'rounded-md',
-			{
-				'bg-white text-gray-900 transition-all duration-75 ease-in group-hover:bg-opacity-0 group-hover:text-inherit dark:bg-gray-900 dark:text-white':
-					outline,
-				'rounded-r-none': positionInGroup === 'start',
-				'!rounded-none': positionInGroup === 'middle',
-				'rounded-l-none': positionInGroup === 'end',
-
-				[iconSizeClasses[size]]: !!icon
-			}
-		)}
-	>
-		{#if icon}
-			<svelte:component this={icon} class="h-5 w-5" />
-		{:else}
-			<slot />
-			{#if label}
-				<span
-					class="ml-2 inline-flex h-4 w-4 items-center justify-center rounded-full bg-blue-200 text-xs font-semibold text-blue-800"
-				>
-					{label}
-				</span>
-			{/if}
-		{/if}
-	</span>
+<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>

package/buttons/Button.svelte.d.ts

@@ -1,17 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
-import type { SvelteComponent } from 'svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        label?: string;
         pill?: boolean;
         outline?: boolean;
-        color?: 'blue' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'none';
-        size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-        icon?: typeof SvelteComponent | undefined;
         gradient?: boolean;
+        size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+        color?: 'blue' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple';
         shadow?: 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple' | null;
-        positionInGroup?: 'start' | 'middle' | 'end' | 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>