flowbite-svelte 0.27.15 → 0.27.16

package/src/lib/tabs/Tabs.svelte

@@ -1,68 +0,0 @@
-<script context="module" lang="ts">
-  import { writable, type Writable } from 'svelte/store';
-
-  export interface TabCtxType {
-    activeClasses: string;
-    inactiveClasses: string;
-    selected: Writable<HTMLElement>;
-  }
-  // styles
-  const styledActiveClasses = {
-    full: 'p-4 w-full group-first:rounded-l-lg group-last:rounded-r-lg text-gray-900 bg-gray-100 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:bg-gray-700 dark:text-white',
-    pill: 'py-3 px-4 text-white bg-blue-600 rounded-lg',
-    underline: 'p-4 text-blue-600 border-b-2 border-blue-600 dark:text-blue-500 dark:border-blue-500',
-    none: ''
-  };
-
-  const styledInactiveClasses = {
-    full: 'p-4 w-full group-first:rounded-l-lg group-last:rounded-r-lg text-gray-500 dark:text-gray-400 bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700',
-    pill: 'py-3 px-4 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white',
-    underline:
-      'p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 text-gray-500 dark:text-gray-400',
-    none: ''
-  };
-</script>
-
-<script lang="ts">
-  import classNames from 'classnames';
-  import { setContext } from 'svelte';
-
-  export let style: 'full' | 'pill' | 'underline' | 'none' = 'none';
-  export let defaultClass: string = 'flex flex-wrap space-x-2';
-  export let contentClass: string = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4';
-  export let divider: boolean = true;
-  export let activeClasses: string =
-    'p-4 text-blue-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-blue-500';
-  export let inactiveClasses: string =
-    'p-4 text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300';
-
-  const ctx: TabCtxType = {
-    activeClasses: styledActiveClasses[style] || activeClasses,
-    inactiveClasses: styledInactiveClasses[style] || inactiveClasses,
-    selected: writable<HTMLElement>()
-  };
-
-  $: divider = ['full', 'pill'].includes(style) ? false : divider;
-
-  setContext('ctx', ctx);
-
-  function init(node: HTMLElement) {
-    const destroy = ctx.selected.subscribe((x: HTMLElement) => {
-      if (x) node.replaceChildren(x);
-    });
-
-    return { destroy };
-  }
-
-  $: ulClass = classNames(defaultClass, style === 'underline' && '-mb-px', $$props.class);
-</script>
-
-<ul class={ulClass}>
-  <slot {style} />
-</ul>
-{#if divider}
-  <slot name="divider">
-    <div class="h-px bg-gray-200 dark:bg-gray-700" />
-  </slot>
-{/if}
-<div class={contentClass} role="tabpanel" aria-labelledby="id-tab" use:init />

package/src/lib/timelines/Activity.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	export let olClass: string = 'relative border-l border-gray-200 dark:border-gray-700';
-</script>
-
-<ol class={olClass}>
-	<slot />
-</ol>

package/src/lib/timelines/ActivityItem.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-	import type { ActivityType } from '../types';
-	export let activities: ActivityType[];
-</script>
-
-{#each activities as { title, date, src, alt, text }}
-	<li class="mb-10 ml-6">
-		<span
-			class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900"
-		>
-			<img class="rounded-full shadow-lg" {src} {alt} />
-		</span>
-		<div
-			class="p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600"
-		>
-			<div class="justify-between items-center mb-3 sm:flex">
-				<time class="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">{date}</time>
-				<div class="text-sm font-normal text-gray-500 lex dark:text-gray-300">
-					{@html title}
-				</div>
-			</div>
-			{#if text}
-				<div
-					class="p-3 text-xs italic font-normal text-gray-500 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-600 dark:border-gray-500 dark:text-gray-300"
-				>
-					{@html text}
-				</div>
-			{/if}
-		</div>
-	</li>
-{/each}

package/src/lib/timelines/Group.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-	export let divClass: string = 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700';
-	export let timeClass: string = 'text-lg font-semibold text-gray-900 dark:text-white';
-	export let date: Date | string;
-</script>
-
-<div class={divClass}>
-	<time class={timeClass}>{date}</time>
-	<ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
-		<slot />
-	</ol>
-</div>

package/src/lib/timelines/GroupItem.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-	import type { GroupTimelineType } from '../types';
-	export let timelines: GroupTimelineType[];
-</script>
-
-{#each timelines as { title, src, alt, isPrivate, href, comment }}
-	<li>
-		<a {href} class="block items-center p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
-			<img class="mr-3 mb-3 w-12 h-12 rounded-full sm:mb-0" {src} {alt} />
-			<div class="text-gray-600 dark:text-gray-400">
-				<div class="text-base font-normal">
-					{@html title}
-				</div>
-				{#if comment}
-					<div class="text-sm font-normal">{comment}</div>
-				{/if}
-				<span class="inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400">
-					{#if isPrivate}
-						<svg
-							class="mr-1 w-3 h-3"
-							fill="currentColor"
-							viewBox="0 0 20 20"
-							xmlns="http://www.w3.org/2000/svg"
-							><path
-								fill-rule="evenodd"
-								d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"
-								clip-rule="evenodd"
-							/><path
-								d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z"
-							/></svg
-						>
-						Private
-					{:else}
-						<svg
-							class="mr-1 w-3 h-3"
-							fill="currentColor"
-							viewBox="0 0 20 20"
-							xmlns="http://www.w3.org/2000/svg"
-							><path
-								fill-rule="evenodd"
-								d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z"
-								clip-rule="evenodd"
-							/></svg
-						>
-						Public
-					{/if}
-				</span>
-			</div>
-		</a>
-	</li>
-{/each}

package/src/lib/timelines/Timeline.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-	import { setContext } from 'svelte';
-	export let customClass: string = '';
-	export let order: 'default' | 'vertical' | 'horizontal' | 'activity' | 'group' | 'custom' =
-		'default';
-
-	setContext('order', order);
-	let olClasses = {
-		group:
-			'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700',
-		horizontal: 'items-center sm:flex',
-		activity: 'relative border-l border-gray-200 dark:border-gray-700',
-		vertical: 'relative border-l border-gray-200 dark:border-gray-700',
-		default: 'relative border-l border-gray-200 dark:border-gray-700',
-		custom: customClass
-	};
-</script>
-
-<ol class={olClasses[order]}>
-	<slot />
-</ol>

package/src/lib/timelines/TimelineHorizontal.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	export let olClass: string = 'items-center sm:flex';
-</script>
-
-<ol class={olClass}>
-	<slot />
-</ol>

package/src/lib/timelines/TimelineItem.svelte

@@ -1,135 +0,0 @@
-<script lang="ts">
-	import classNames from 'classnames';
-	import { getContext } from 'svelte';
-	export let title: string = '';
-	export let date: string = '';
-	export let customDiv: string = '';
-	export let customTimeClass: string = '';
-	let order: 'default' | 'vertical' | 'horizontal' | 'activity' | 'group' | 'custom' = 'default';
-	order = getContext('order');
-	const liClasses = {
-		default: 'mb-10 ml-4',
-		vertical: 'mb-10 ml-6',
-		horizontal: 'relative mb-6 sm:mb-0',
-		activity: 'mb-10 ml-6',
-		group: ''
-	};
-
-	const divClasses = {
-		default:
-			'absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700',
-		vertical:
-			'flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900',
-		horizontal: 'flex items-center',
-		activity:
-			'flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900',
-		group:
-			'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700',
-		custom: customDiv
-	};
-
-	const timeClasses = {
-		default: 'mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500',
-		vertical: 'block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500',
-		horizontal: 'block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500',
-		activity: 'mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0',
-		group: 'text-lg font-semibold text-gray-900 dark:text-white',
-		custom: customTimeClass
-	};
-
-	const h3Class = classNames(
-		order === 'vertical'
-			? 'flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white'
-			: 'text-lg font-semibold text-gray-900 dark:text-white'
-	);
-</script>
-
-<li class={liClasses[order]}>
-	{#if order === 'default'}
-		<div class={divClasses[order]} />
-		{#if date}
-			<time class={timeClasses[order]}>{date}</time>
-		{/if}
-		{#if title}
-			<h3 class={h3Class}>
-				{title}
-			</h3>
-		{/if}
-		<slot />
-	{:else if order === 'vertical'}
-		<div class={divClasses[order]} />
-		{#if $$slots.icon}
-			<slot name="icon" />
-		{:else}
-			<svg
-				aria-hidden="true"
-				class="w-3 h-3 text-blue-600 dark:text-blue-400"
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-					clip-rule="evenodd" /></svg>
-		{/if}
-		{#if title}
-			<h3 class={h3Class}>
-				{title}
-			</h3>
-		{/if}
-		{#if date}
-			<time class={timeClasses[order]}>{date}</time>
-		{/if}
-		<slot />
-	{:else if order === 'horizontal'}
-		<div class={divClasses[order]} />
-		{#if $$slots.icon}
-			<slot name="icon" />
-		{:else}
-			<svg
-				aria-hidden="true"
-				class="w-3 h-3 text-blue-600 dark:text-blue-400"
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-					clip-rule="evenodd" /></svg>
-		{/if}
-		{#if title}
-			<h3 class={h3Class}>
-				{title}
-			</h3>
-		{/if}
-		{#if date}
-			<time class={timeClasses[order]}>{date}</time>
-		{/if}
-		<slot />
-	{:else}
-		<div class={divClasses[order]} />
-		{#if $$slots.icon}
-			<slot name="icon" />
-		{:else}
-			<svg
-				aria-hidden="true"
-				class="w-3 h-3 text-blue-600 dark:text-blue-400"
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-					clip-rule="evenodd" /></svg>
-		{/if}
-		{#if title}
-			<h3 class={h3Class}>
-				{title}
-			</h3>
-		{/if}
-		{#if date}
-			<time class={timeClasses[order]}>{date}</time>
-		{/if}
-		<slot />
-	{/if}
-</li>

package/src/lib/timelines/TimelineItemHorizontal.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">
-	// import type { TimelineItemHorizontalType } from '../types';
-	// export let timelineItems: TimelineItemHorizontalType[];
-	export let title: string;
-	export let date: string;
-	export let href: string;
-	export let text: string;
-	export let linkname: string;
-	export let icon: string;
-</script>
-
-<li class="relative mb-6 sm:mb-0">
-	<div class="flex items-center">
-		<div
-			class="flex z-10 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0">
-			{#if icon}
-				{@html icon}
-			{:else}
-				<svg
-					class="w-3 h-3 text-blue-600 dark:text-blue-300"
-					fill="currentColor"
-					viewBox="0 0 20 20"
-					xmlns="http://www.w3.org/2000/svg"
-					><path
-						fill-rule="evenodd"
-						d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-						clip-rule="evenodd" /></svg>
-			{/if}
-		</div>
-		<div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
-	</div>
-	<div class="mt-3 sm:pr-8">
-		<h3 class="text-lg font-semibold text-gray-900 dark:text-white">{title}</h3>
-		<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
-			>{date}</time>
-		<p class="text-base font-normal text-gray-500 dark:text-gray-400">
-			{text}
-		</p>
-	</div>
-	{#if href}
-		<a
-			{href}
-			class="inline-flex items-center py-2 px-4 text-sm font-medium 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-gray-200 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 dark:focus:ring-gray-700"
-			>{linkname}
-			<svg
-				class="ml-2 w-3 h-3"
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
-					clip-rule="evenodd" /></svg
-			></a>
-	{/if}
-</li>

package/src/lib/timelines/TimelineItemVertical.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-	// import type { TimelineItemVerticalType } from '../types';
-	// export let timelineItems: TimelineItemVerticalType[];
-	export let title: string;
-	export let date: string;
-</script>
-
-<li class="mb-10 ml-6">
-	<span
-		class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
-		{#if $$slots.icon}
-			<slot name="icon" />
-		{:else}
-			<svg
-				width="20"
-				height="20"
-				class="text-blue-600 dark:text-blue-300"
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-					clip-rule="evenodd" /></svg>
-		{/if}
-	</span>
-
-	<h3 class="flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white">
-		{title}
-	</h3>
-	<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
-		>{date}</time>
-	<slot />
-</li>

package/src/lib/toasts/Toast.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">
-  import Frame from '../utils/Frame.svelte';
-  import classNames from 'classnames';
-  import type { Colors } from '../types';
-  import CloseButton from '../utils/CloseButton.svelte';
-  import { fade } from 'svelte/transition';
-  export let color:
-    | 'gray'
-    | 'red'
-    | 'yellow'
-    | 'green'
-    | 'indigo'
-    | 'default'
-    | 'purple'
-    | 'pink'
-    | 'blue'
-    | 'light'
-    | 'dark'
-    | 'dropdown'
-    | 'navbar'
-    | 'navbarUl'
-    | 'form'
-    | 'none' = 'blue';
-  export let simple: boolean = false;
-  export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none' = 'none';
-  export let open: boolean = true;
-  export let divClass: string = 'w-full max-w-xs p-4';
-
-  const positions = {
-    'top-left': 'absolute top-5 left-5',
-    'top-right': 'absolute top-5 right-5',
-    'bottom-left': 'absolute bottom-5 left-5',
-    'bottom-right': 'absolute bottom-5 right-5',
-    none: ''
-  };
-
-  let classDiv: string;
-  $: classDiv = classNames(divClass, positions[position], $$props.class);
-
-  let iconClass: string;
-  $: iconClass = classNames('inline-flex items-center justify-center flex-shrink-0 w-8 h-8 mr-3');
-</script>
-
-{#if open}
-  <Frame rounded border transition={fade} {...$$restProps} class={classDiv} role="alert">
-    <div class="flex {$$slots.extra ? 'items-start' : 'items-center'}">
-      {#if $$slots.icon}
-        <Frame {color} rounded class={iconClass}><slot name="icon" /></Frame>
-      {/if}
-
-      <div class="text-sm font-normal w-full">
-        <slot />
-        <slot name="extra" />
-      </div>
-      {#if !simple}
-        <CloseButton on:click={() => (open = false)} />
-      {/if}
-    </div>
-  </Frame>
-{/if}

package/src/lib/toolbar/Toolbar.svelte

@@ -1,73 +0,0 @@
-<script lang="ts">
-	import { setContext } from 'svelte';
-	import { writable } from 'svelte/store';
-	import classNames from 'classnames';
-
-	const separators = writable(false);
-	setContext('toolbar', separators);
-
-	export let color: string = 'dark';
-	export let embedded: boolean = false;
-
-	const bgColors = {
-		gray: 'bg-gray-100 dark:bg-gray-200 ',
-		red: 'bg-red-100 dark:bg-red-200',
-		yellow: 'bg-yellow-100 dark:bg-yellow-200 ',
-		green: 'bg-green-100 dark:bg-green-200 ',
-		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 ',
-		dark: 'bg-gray-50 dark:bg-gray-700'
-		// custom: customBgClass
-	};
-
-	const textColors = {
-		gray: 'text-gray-500 dark:text-gray-700',
-		red: 'text-red-500 dark:text-red-700',
-		yellow: 'text-yellow-500 dark:text-yellow-700',
-		green: 'text-green-500 dark:text-green-700',
-		indigo: 'text-indigo-500 dark:text-indigo-700',
-		purple: 'text-purple-500 dark:text-purple-700',
-		pink: 'text-pink-500 dark:text-pink-700',
-		blue: 'text-blue-500 dark:text-blue-700',
-		dark: 'text-gray-500 dark:text-gray-400'
-		// custom: customTextColor
-	};
-
-	let divClass;
-	$: divClass = classNames(
-		'flex justify-between items-center',
-		embedded || 'rounded-lg border border-gray-200 dark:border-gray-600 py-2 px-3',
-		embedded || textColors[color],
-		embedded || bgColors[color],
-		$$props.class
-	);
-
-	const divideColors = {
-		gray: 'divide-gray-200 dark:divide-gray-700',
-		red: 'divide-red-200 dark:divide-red-700',
-		yellow: 'divide-yellow-200 dark:divide-yellow-700',
-		green: 'divide-green-200 dark:divide-green-700',
-		indigo: 'divide-indigo-200 dark:divide-indigo-700',
-		purple: 'divide-purple-200 dark:divide-purple-700',
-		pink: 'divide-pink-200 dark:divide-pink-700',
-		blue: 'divide-blue-200 dark:divide-blue-700',
-		dark: 'divide-gray-200 dark:divide-gray-600'
-		// custom: customTextColor
-	};
-
-	let separatorsClass;
-	$: separatorsClass = classNames(
-		$separators && 'divide-gray-200 sm:divide-x',
-		//  dark:divide-gray-600'
-		divideColors[color]
-	);
-</script>
-
-<div class={divClass}>
-	<div class="flex flex-wrap items-center {separatorsClass}">
-		<slot />
-	</div>
-	<slot name="end" />
-</div>

package/src/lib/toolbar/ToolbarButton.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">
-	import { getContext } from 'svelte';
-	import classNames from 'classnames';
-
-	const background = getContext('background');
-
-	export let color: string = 'default';
-	export let name: string = undefined;
-	export let ariaLabel: string = undefined;
-	export let size: 'xs' | 'sm' | 'md' = 'md';
-
-	const colors = {
-		default:
-			'hover:text-gray-900 hover:bg-gray-100 text-gray-500 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600',
-		gray: 'focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-300',
-		red: 'focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-300',
-		yellow: 'focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-300',
-		green: 'focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-300',
-		indigo: 'focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-300',
-		purple: 'focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-300',
-		pink: 'focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-300',
-		blue: 'focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-300'
-	};
-
-	const sizing = {
-		xs: 'm-0.5 rounded focus:ring-1 p-0.5',
-		sm: 'm-0.5 rounded focus:ring-1 p-0.5',
-		md: 'rounded-lg focus:ring-2 p-1.5'
-	};
-
-	let buttonClass: string;
-	$: buttonClass = classNames(
-		'focus:outline-none whitespace-normal',
-		sizing[size],
-		colors[color],
-		color === 'default' &&
-			(background ? 'hover:bg-gray-100 dark:hover:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-700'),
-		$$props.class
-	);
-
-	const svgSizes = {
-		xs: 'w-3 h-3',
-		sm: 'w-3.5 h-3.5',
-		md: 'w-5 h-5'
-	};
-</script>
-
-<button on:click type="button" {...$$restProps} class={buttonClass} aria-label={ariaLabel ?? name}>
-	{#if name}<span class="sr-only">{name}</span>{/if}
-	<slot>
-		<svg class={svgSizes[size]} 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>
-	</slot>
-</button>

package/src/lib/toolbar/ToolbarGroup.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-	import type { Writable } from 'svelte/store';
-	import { getContext } from 'svelte';
-
-	const options: Writable<boolean> = getContext('toolbar');
-	if (options) $options = true;
-</script>
-
-<div class="flex items-center space-x-1 sm:pr-4 sm:pl-4 first:sm:pl-0 last:sm:pr-0">
-	<slot />
-</div>

package/src/lib/tooltips/Tooltip.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-  import Popper from '../utils/Popper.svelte';
-  import classNames from 'classnames';
-
-  export let style: 'dark' | 'light' | 'auto' | 'custom' = 'auto';
-  export let defaultClass: string = 'py-2 px-3 text-sm font-medium';
-
-  const styles = {
-    dark: 'border-gray-800 bg-gray-900 text-white dark:bg-gray-700 dark:border-gray-600',
-    light: 'border-gray-200 bg-white text-gray-900',
-    auto: 'border-gray-200 bg-white text-gray-900 dark:bg-gray-700 dark:text-white dark:border-gray-600',
-    custom: ''
-  };
-
-  let toolTipClass: string;
-  $: {
-    if ($$restProps.color) style = 'custom';
-    else $$restProps.color = 'none';
-    toolTipClass = classNames('tooltip', defaultClass, styles[style], $$props.class);
-  }
-</script>
-
-<Popper data-tooltip rounded border shadow {...$$restProps} class={toolTipClass} on:show>
-  <slot />
-</Popper>