flowbite-svelte 0.27.15 → 0.27.16

package/src/lib/accordions/Accordion.svelte

@@ -1,45 +0,0 @@
-<script context="module" lang="ts">
-  import { writable, type Writable } from 'svelte/store';
-
-  export interface AccordionCtxType {
-    flush: boolean;
-    activeClasses: string;
-    inactiveClasses: string;
-    selected?: Writable<object>;
-  }
-</script>
-
-<script lang="ts">
-  import Frame from '$lib/utils/Frame.svelte';
-  import classNames from 'classnames';
-  import { setContext } from 'svelte';
-
-  export let multiple: boolean = false;
-  export let flush: boolean = false;
-  export let activeClasses: string =
-    'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800';
-  export let inactiveClasses: string =
-    'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
-  export let defaultClass: string = 'text-gray-500 dark:text-gray-400';
-
-  const ctx: AccordionCtxType = {
-    flush,
-    activeClasses,
-    inactiveClasses,
-    selected: multiple ? undefined : writable()
-  };
-
-  setContext<AccordionCtxType>('ctx', ctx);
-
-  let frameClass = classNames(
-    defaultClass,
-    'divide-y divide-gray-200 dark:divide-gray-700',
-    'border-gray-200 dark:border-gray-700',
-    'rounded-t-xl',
-    $$props.class
-  );
-</script>
-
-<Frame class={frameClass} color="none" border={!flush}>
-  <slot />
-</Frame>

package/src/lib/accordions/AccordionItem.svelte

@@ -1,79 +0,0 @@
-<script lang="ts">
-  import ChevronDown from '$lib/utils/ChevronDown.svelte';
-  import ChevronUp from '$lib/utils/ChevronUp.svelte';
-  import classNames from 'classnames';
-  import { getContext, onMount } from 'svelte';
-  import { writable } from 'svelte/store';
-  import { fade, blur, fly, slide } from 'svelte/transition';
-  import type { TransitionTypes, TransitionParamTypes } from '../types';
-  import type { AccordionCtxType } from './Accordion.svelte';
-
-  export let open: boolean = false;
-  export let activeClasses: string | undefined = undefined;
-  export let inactiveClasses: string | undefined = undefined;
-
-  export let defaultClass: string =
-    'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl';
-
-  export let transitionType: TransitionTypes = 'slide';
-  export let transitionParams: TransitionParamTypes = {};
-
-  // make a custom transition function that returns the desired transition
-  const multiple = (node: HTMLElement, params: any) => {
-    switch (transitionType) {
-      case 'blur':
-        return blur(node, params);
-      case 'fly':
-        return fly(node, params);
-      case 'fade':
-        return fade(node, params);
-      default:
-        return slide(node, params);
-    }
-  };
-
-  const ctx = getContext<AccordionCtxType>('ctx') ?? {};
-
-  // single selection
-  const self = {};
-  const selected = ctx.selected ?? writable();
-
-  let _open: boolean = open;
-  open = false;
-
-  onMount(() => {
-    if (_open) $selected = self;
-
-    // this will trigger unsubscribe on destroy
-    return selected.subscribe((x) => (open = x === self));
-  });
-
-  const handleToggle = (e: Event) => selected.set(open ? {} : self);
-
-  let buttonClass: string;
-  $: buttonClass = classNames(
-    defaultClass,
-    ctx.flush ? 'py-5' : 'p-5',
-    open && (ctx.flush ? 'text-gray-900 dark:text-white' : activeClasses || ctx.activeClasses),
-    !open && (ctx.flush ? 'text-gray-500 dark:text-gray-400' : inactiveClasses || ctx.inactiveClasses),
-    $$props.class
-  );
-</script>
-
-<h2 aria-expanded={open} class="group">
-  <button on:click={handleToggle} type="button" class={buttonClass}>
-    <slot name="header" />
-    {#if open}
-      <slot name="arrowup"><ChevronUp /></slot>
-    {:else}
-      <slot name="arrowdown"><ChevronDown /></slot>
-    {/if}
-  </button>
-</h2>
-{#if open}
-  <div transition:multiple={transitionParams}>
-    <div class={ctx.flush ? 'py-5' : 'p-5'}>
-      <slot />
-    </div>
-  </div>
-{/if}

package/src/lib/alerts/Alert.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-  import { createEventDispatcher } from 'svelte';
-  import CloseButton from '../utils/CloseButton.svelte';
-  import Frame from '../utils/Frame.svelte';
-
-  const dispatch = createEventDispatcher();
-
-  export let dismissable: boolean = false;
-  export let accent: boolean = false;
-
-  let hidden = false;
-
-  const handleHide = () => {
-    hidden = !hidden;
-    dispatch('close'); // preffered name
-  };
-
-  let divClass: string;
-  $: divClass = classNames(
-    'p-4 text-sm',
-    accent && 'border-t-4 ',
-    hidden && 'hidden',
-    $$props.class
-  );
-
-  $: {
-    // set default values
-    $$restProps.color = $$restProps.color ?? 'blue';
-    $$restProps.rounded = $$restProps.rounded ?? !accent;
-  }
-</script>
-
-<Frame {...$$restProps} class={divClass} role="alert">
-  <div class="flex items-center">
-    {#if $$slots.icon}
-      <slot name="icon" />
-    {/if}
-    <div class:ml-3={$$slots.icon}>
-      <slot />
-    </div>
-
-    {#if dismissable}
-      <CloseButton
-        class="-mx-1.5 -my-1.5"
-        color={$$restProps.color}
-        on:click={handleHide}
-        on:click
-        on:change
-        on:keydown
-        on:keyup
-        on:focus
-        on:blur
-        on:mouseenter
-        on:mouseleave />
-    {/if}
-  </div>
-  <slot name="extra" />
-</Frame>

package/src/lib/avatar/Avatar.svelte

@@ -1,54 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-
-  import AvatarPlaceholder from './Placeholder.svelte';
-  import Dot from './Dot.svelte';
-  import type { DotType } from '../types';
-
-  export let src: string = '';
-  export let href: string = '#';
-
-  export let rounded: boolean = false;
-  export let border: boolean = false;
-  export let stacked: boolean = false;
-
-  export let dot: DotType = { top: false, color: 'bg-gray-300 dark:bg-gray-500' };
-  export let alt: string = '';
-  export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
-
-  const sizes = {
-    xs: 'w-6 h-6',
-    sm: 'w-8 h-8',
-    md: 'w-10 h-10',
-    lg: 'w-20 h-20',
-    xl: 'w-36 h-36'
-  };
-
-  let avatarClass: string;
-  $: avatarClass = classNames(
-    rounded ? 'rounded' : 'rounded-full',
-    border && 'p-1 ring-2 ring-gray-300 dark:ring-gray-500',
-    sizes[size],
-    stacked && 'border-2 -ml-4 border-white dark:border-gray-800',
-    'bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300',
-    $$props.class
-  );
-</script>
-
-<Dot show={$$props.dot} {rounded} {...dot} {size} class={sizes[size]}>
-  {#if src}
-    <img {alt} {src} {...$$restProps} class={avatarClass} />
-  {:else if $$slots.default}
-    <svelte:element
-      this={href ? 'a' : 'div'}
-      {href}
-      {...$$restProps}
-      class="flex justify-center items-center text-xs font-medium {avatarClass}">
-      <slot />
-    </svelte:element>
-  {:else}
-    <svelte:element this={href ? 'a' : 'div'} {...$$restProps} class={avatarClass}>
-      <AvatarPlaceholder {rounded} />
-    </svelte:element>
-  {/if}
-</Dot>

package/src/lib/avatar/Dot.svelte

@@ -1,48 +0,0 @@
-<script lang="ts">
-	import classNames from 'classnames';
-
-	export let show: boolean = false;
-	export let top: boolean = false;
-	export let color: string = 'bg-gray-300 dark:bg-gray-500';
-	export let rounded: boolean = false;
-	export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
-
-	const sizes = {
-		xs: 'w-2.5 h-2.5',
-		sm: 'w-3 h-3',
-		md: 'w-3.5 h-3.5',
-		lg: 'w-6 h-6',
-		xl: 'w-10 h-10'
-	};
-
-	const offsets = {
-		xs: ['left-4', 'left-5'],
-		sm: ['left-6', 'left-6'],
-		md: ['left-7', 'left-8'],
-		lg: ['left-14', 'left-16'],
-		xl: ['left-24', 'left-32']
-	};
-
-	let dotClass;
-	$: dotClass = classNames(
-		'absolute rounded-full border-white dark:border-gray-800 border-2',
-		sizes[size],
-		offsets[size][+rounded],
-		top ? 'top-0' : 'bottom-0',
-		rounded && top && 'transform -translate-y-1/2',
-		rounded && !top && 'transform translate-y-1/4',
-		color
-	);
-
-	let divClass;
-	$: divClass = classNames('relative flex-shrink-0', $$props.class);
-</script>
-
-{#if show}
-	<div class={divClass}>
-		<slot />
-		<span class={dotClass} />
-	</div>
-{:else}
-	<slot />
-{/if}

package/src/lib/avatar/Placeholder.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-	export let rounded: boolean = false;
-</script>
-
-<svg
-	class="text-gray-400 bg-gray-100 dark:bg-gray-600 {rounded ? 'rounded' : 'rounded-full'}"
-	fill="currentColor"
-	viewBox="0 0 16 16"
-	xmlns="http://www.w3.org/2000/svg"
->
-	<path
-		fill-rule="evenodd"
-		d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-		clip-rule="evenodd"
-	/>
-</svg>

package/src/lib/badges/Badge.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-	import classNames from 'classnames';
-	import type { Colors } from '../types';
-	import CloseButton from '../utils/CloseButton.svelte';
-
-	export let color: Colors = 'blue';
-	export let large: boolean = false;
-	export let href: string = undefined;
-	export let rounded: boolean = false;
-	export let index: boolean = false;
-	export let dismissable: boolean = false;
-	export let baseClass: string = 'inline-flex items-center justify-center -mb-0.5';
-
-	let hidden = false;
-
-	const colors = {
-		blue: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800',
-		dark: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
-		red: 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900',
-		green: 'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900',
-		yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900',
-		indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900',
-		purple: 'bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-900',
-		pink: 'bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900',
-		['!blue']: 'bg-blue-500 text-blue-100',
-		['!dark']: 'bg-gray-500 text-gray-100',
-		['!red']: 'bg-red-500 text-white',
-		['!green']: 'bg-green-500 text-green-100',
-		['!yellow']: 'bg-yellow-300 text-yellow-800',
-		['!indigo']: 'bg-indigo-500 text-indigo-100',
-		['!purple']: 'bg-purple-500 text-purple-100',
-		['!pink']: 'bg-pink-500 text-pink-100'
-	};
-
-	const hovers = {
-		blue: 'hover:bg-blue-200 dark:hover:bg-blue-300',
-		dark: 'hover:bg-gray-200 dark:hover:bg-gray-300',
-		red: 'hover:bg-red-200 dark:hover:bg-red-300',
-		green: 'hover:bg-green-200 dark:hover:bg-green-300',
-		yellow: 'hover:bg-yellow-200 dark:hover:bg-yellow-300',
-		indigo: 'hover:bg-indigo-200 dark:hover:bg-indigo-300',
-		purple: 'hover:bg-purple-200 dark:hover:bg-purple-300',
-		pink: 'hover:bg-pink-200 dark:hover:bg-pink-300'
-	};
-
-	let badgeClass;
-	$: badgeClass = classNames(
-		baseClass,
-		large ? 'text-sm font-medium' : 'text-xs font-semibold',
-		colors[color],
-		href && (hovers[color] ?? hovers.blue),
-		rounded ? 'rounded-full p-1' : 'rounded px-2.5 py-0.5',
-		index && 'absolute font-bold border-2 border-white dark:border-gray-900',
-		index && (large ? 'w-7 h-7 -top-3 -right-3' : 'w-6 h-6 -top-2 -right-2'),
-		$$props.class
-	);
-	const handleHide = () => {
-		hidden = !hidden;
-	};
-</script>
-
-<svelte:element this={href ? 'a' : 'span'} {href} {...$$restProps} class={badgeClass} class:hidden>
-	<slot />
-	{#if dismissable}
-		<CloseButton {color} on:click={handleHide} size={large ? 'sm' : 'xs'} class="ml-1.5 -mr-1.5" />
-	{/if}
-</svelte:element>

package/src/lib/breadcrumbs/Breadcrumb.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-	import classNames from 'classnames';
-
-	export let solid: boolean = false;
-	export let navClass: string = 'flex';
-	export let solidClass: string =
-		'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
-	export let olClass: string = 'inline-flex items-center space-x-1 md:space-x-3';
-	let classNav: string = solid ? solidClass : navClass;
-</script>
-
-<nav aria-label="Breadcrumb" {...$$restProps} class={classNames(classNav, $$props.class)}>
-	<ol class={classNames(olClass, $$props.classOl)}>
-		<slot />
-	</ol>
-</nav>

package/src/lib/breadcrumbs/BreadcrumbItem.svelte

@@ -1,47 +0,0 @@
-<script lang="ts">
-  export let home: boolean = false;
-  export let href: string | undefined = undefined;
-  export let linkClass: string =
-    'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
-  export let spanClass: string = 'ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400';
-  export let homeClass: string =
-    'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
-</script>
-
-<li class="inline-flex items-center" {...$$restProps}>
-  {#if home}
-    <a class={homeClass} {href}>
-      {#if $$slots.icon}
-        <slot name="icon" />
-      {:else}
-        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-          ><path
-            d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" /></svg>
-      {/if}
-      <slot />
-    </a>
-  {:else}
-    {#if $$slots.icon}
-      <slot name="icon" />
-    {:else}
-      <svg
-        class="w-6 h-6 text-gray-400"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
-        ><path
-          fill-rule="evenodd"
-          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-          clip-rule="evenodd" /></svg>
-    {/if}
-    {#if href}
-      <a class={linkClass} {href}>
-        <slot />
-      </a>
-    {:else}
-      <span class={spanClass}>
-        <slot />
-      </span>
-    {/if}
-  {/if}
-</li>

package/src/lib/buttongroups/ButtonGroup.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-  import { setContext } from 'svelte';
-  import classNames from 'classnames';
-  import type { SizeType } from '$lib/types';
-
-  export let size: SizeType = 'md';
-  export let divClass: string = 'inline-flex rounded-lg shadow-sm';
-
-  setContext('group', { size });
-</script>
-
-<div {...$$restProps} class={classNames(divClass, $$props.class)} role="group">
-  <slot />
-</div>

package/src/lib/buttons/Button.svelte

@@ -1,182 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-  import { getContext } from 'svelte';
-  import type { ButtonType } from '../types';
-
-  const group = getContext('group');
-
-  export let pill: boolean = false;
-  export let outline: boolean = false;
-  export let gradient: boolean = false;
-  export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = group ? 'sm' : 'md';
-  export let href: string | undefined = undefined;
-  export let btnClass: string | undefined = undefined;
-  export let type: ButtonType = 'button';
-
-  export let color:
-    | 'alternative'
-    | 'blue'
-    | 'cyan'
-    | 'dark'
-    | 'light'
-    | 'lime'
-    | 'green'
-    | 'pink'
-    | 'primary'
-    | 'red'
-    | 'teal'
-    | 'yellow'
-    | 'purple'
-    | 'purpleToBlue'
-    | 'cyanToBlue'
-    | 'greenToBlue'
-    | 'purpleToPink'
-    | 'pinkToOrange'
-    | 'tealToLime'
-    | 'redToYellow' = group ? (outline ? 'dark' : 'alternative') : 'blue';
-
-  export let shadow: 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple' | null = null;
-
-  const colorClasses = {
-    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',
-    alternative:
-      'text-gray-900 bg-white border border-gray-200 dark:border-gray-600 hover:bg-gray-100 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 hover:text-blue-700 focus:text-blue-700 dark:focus:text-white 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',
-    primary:
-      'text-white bg-primary-700 hover:bg-primary-800 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800',
-    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-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',
-    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 = {
-    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:bg-gray-900 focus:text-white focus:ring-gray-300 dark:border-gray-600 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: 'px-3 py-2 text-xs',
-    sm: 'px-4 py-2 text-sm',
-    md: 'px-5 py-2.5 text-sm',
-    lg: 'px-5 py-3 text-base',
-    xl: 'px-6 py-3.5 text-base'
-  };
-
-  function rounded(gradientOutline: boolean = false) {
-    if (group) {
-      return pill
-        ? 'first:rounded-l-full last:rounded-r-full'
-        : gradientOutline
-        ? 'first:rounded-l-md last:rounded-r-md'
-        : 'first:rounded-l-lg last:rounded-r-lg';
-    }
-    return pill ? 'rounded-full' : gradientOutline ? 'rounded-md' : 'rounded-lg';
-  }
-
-  const hasBorder = () => outline || color === 'alternative' || color === 'light';
-
-  let buttonClass;
-  $: buttonClass = btnClass
-    ? btnClass
-    : classNames(
-        'text-center font-medium',
-        group ? 'focus:ring-2' : 'focus:ring-4',
-        group && 'focus:z-10',
-        !group || color === 'alternative' || (outline && color === 'dark') || 'focus:outline-none',
-        outline && gradient ? 'p-0.5' : 'inline-flex items-center justify-center ' + sizeClasses[size],
-        gradient ? gradientClasses[color] : outline ? outlineClasses[color] : colorClasses[color],
-        color === 'alternative' &&
-          (group
-            ? 'dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600'
-            : 'dark:bg-transparent dark:border-gray-800 dark:hover:border-gray-700'),
-        outline &&
-          color === 'dark' &&
-          (group ? 'dark:text-white dark:border-white' : 'dark:text-gray-400 dark:border-gray-700'),
-        hasBorder() && group && 'border-l-0 first:border-l',
-        rounded(false),
-        shadow && coloredShadowClasses[shadow],
-        $$props.disabled && 'cursor-not-allowed opacity-50',
-        $$props.class
-      );
-
-  let gradientOutlineClass;
-  $: gradientOutlineClass = classNames(
-    'inline-flex items-center justify-center',
-    sizeClasses[size],
-    rounded(true),
-    '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>
-
-<svelte:element
-  this={href ? 'a' : 'button'}
-  type={href ? undefined : type}
-  {href}
-  {...$$restProps}
-  class={buttonClass}
-  on:click
-  on:change
-  on:keydown
-  on:keyup
-  on:mouseenter
-  on:mouseleave>
-  {#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}
-</svelte:element>