flowbite-svelte 0.25.21 → 0.25.22

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 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.25.22](https://github.com/themesberg/flowbite-svelte/compare/v0.25.21...v0.25.22) (2022-08-28)
+
+
+### Bug Fixes
+
+* create icon slot for Alert so that users can add svg or svelte component ([45244ec](https://github.com/themesberg/flowbite-svelte/commit/45244ec05f99298d150751209980dce519873163))
+* remove heros from: ([57f6928](https://github.com/themesberg/flowbite-svelte/commit/57f69282190f5d33d7ac17c6adeab36b89184f47))
+* update Alert color type ([fd819fb](https://github.com/themesberg/flowbite-svelte/commit/fd819fb59d2d01f900ad76449afabfa22de6d5b1))
+* update Timeline components ([4b47d6b](https://github.com/themesberg/flowbite-svelte/commit/4b47d6b5d09abad3b2d8fc29c2b38287726c44d7))
+
 ### [0.25.21](https://github.com/themesberg/flowbite-svelte/compare/v0.25.20...v0.25.21) (2022-08-27)
 
 

package/alerts/Alert.svelte

@@ -5,7 +5,6 @@ import CloseButton from '../utils/CloseButton.svelte';
 const dispatch = createEventDispatcher();
 setContext('background', true);
 export let color = 'blue';
-export let icon = null;
 export let dismissable = false;
 export let rounded = true;
 export let accent = false;
@@ -61,8 +60,8 @@ $: divClass = classNames('p-4 text-sm', bgClasses[color] ?? bgClasses.blue, acce
 
 <div id={$$props.id} class:hidden class={divClass} role="alert">
 	<div class="flex items-center whitespace-pre-wrap">
-		{#if icon}
-			<svelte:component this={icon} class="flex-shrink-0 w-5 h-5 mr-3" />
+		{#if $$slots.icon}
+			<slot name="icon" />
 		{/if}
 
 		<slot />
@@ -80,8 +79,7 @@ $: divClass = classNames('p-4 text-sm', bgClasses[color] ?? bgClasses.blue, acce
 				on:focus
 				on:blur
 				on:mouseenter
-				on:mouseleave
-			/>
+				on:mouseleave />
 		{/if}
 	</div>
 	<slot name="extra" />

package/alerts/Alert.svelte.d.ts

@@ -1,11 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { SvelteComponent } from 'svelte';
-import type { Colors } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        color?: Colors;
-        icon?: typeof SvelteComponent | null;
+        color?: 'gray' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink' | 'dark' | 'custom';
         dismissable?: boolean;
         rounded?: boolean;
         accent?: boolean;
@@ -27,6 +24,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        icon: {};
         default: {};
         extra: {};
     };

package/dropdowns/Dropdown.svelte

@@ -2,7 +2,10 @@
 import Button from '../buttons/Button.svelte';
 import Popper from '../utils/Popper.svelte';
 import classNames from 'classnames';
-import { ChevronUp, ChevronRight, ChevronDown, ChevronLeft } from 'svelte-heros';
+import ChevronUp from '../utils/ChevronUp.svelte';
+import ChevronRight from '../utils/ChevronRight.svelte';
+import ChevronDown from '../utils/ChevronDown.svelte';
+import ChevronLeft from '../utils/ChevronLeft.svelte';
 export let label = '';
 export let inline = false;
 export let arrowIcon = true;
@@ -30,8 +33,7 @@ $: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800'
 	class={popoverClass}
 	trigger="click"
 	on:show
-	bind:open
->
+	bind:open>
 	<slot name="trigger" slot="trigger">
 		{#if inline}
 			<button class={labelClass} class:flex-row-reverse={icon == ChevronLeft}>
@@ -39,8 +41,7 @@ $: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800'
 				{#if arrowIcon}
 					<svelte:component
 						this={icon ?? ChevronDown}
-						class={classNames('h-4 w-4', icon == ChevronLeft ? 'mr-2' : 'ml-2')}
-					/>
+						class={classNames('h-4 w-4', icon == ChevronLeft ? 'mr-2' : 'ml-2')} />
 				{/if}
 			</button>
 		{:else}
@@ -49,8 +50,7 @@ $: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800'
 				{#if arrowIcon}
 					<svelte:component
 						this={icon ?? ChevronDown}
-						class={classNames('h-4 w-4', icon == ChevronLeft ? 'mr-2' : 'ml-2')}
-					/>
+						class={classNames('h-4 w-4', icon == ChevronLeft ? 'mr-2' : 'ml-2')} />
 				{/if}
 			</Button>
 		{/if}

package/index.d.ts

@@ -124,3 +124,7 @@ export { default as Secondary } from './typography/Secondary.svelte';
 export { default as TextGradient } from './typography/TextGradient.svelte';
 export { default as Underline } from './typography/Underline.svelte';
 export { default as CloseButton } from './utils/CloseButton.svelte';
+export { default as ChevronDown } from './utils/ChevronDown.svelte';
+export { default as ChevronLeft } from './utils/ChevronLeft.svelte';
+export { default as ChevronRight } from './utils/ChevronRight.svelte';
+export { default as ChevronUp } from './utils/ChevronUp.svelte';

package/index.js

@@ -158,3 +158,7 @@ export { default as TextGradient } from './typography/TextGradient.svelte';
 export { default as Underline } from './typography/Underline.svelte';
 // utils
 export { default as CloseButton } from './utils/CloseButton.svelte';
+export { default as ChevronDown } from './utils/ChevronDown.svelte';
+export { default as ChevronLeft } from './utils/ChevronLeft.svelte';
+export { default as ChevronRight } from './utils/ChevronRight.svelte';
+export { default as ChevronUp } from './utils/ChevronUp.svelte';

package/navbar/Menu.svelte

@@ -0,0 +1,36 @@
+<script>export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M3.75 6.75H20.25M3.75 12H20.25M3.75 17.25H20.25" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 6.75C3 6.33579 3.33579 6 3.75 6H20.25C20.6642 6 21 6.33579 21 6.75C21 7.16421 20.6642 7.5 20.25 7.5H3.75C3.33579 7.5 3 7.16421 3 6.75ZM3 12C3 11.5858 3.33579 11.25 3.75 11.25H20.25C20.6642 11.25 21 11.5858 21 12C21 12.4142 20.6642 12.75 20.25 12.75H3.75C3.33579 12.75 3 12.4142 3 12ZM3 17.25C3 16.8358 3.33579 16.5 3.75 16.5H20.25C20.6642 16.5 21 16.8358 21 17.25C21 17.6642 20.6642 18 20.25 18H3.75C3.33579 18 3 17.6642 3 17.25Z" fill="${color}"/> `;
+$: switch (variation) {
+    case 'outline':
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+        break;
+    case 'solid':
+        svgpath = svgsolid;
+        viewBox = '0 0 24 24';
+        break;
+    default:
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+}
+export let ariaLabel = 'bars 3';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click>
+	{@html svgpath}
+</svg>

package/navbar/Menu.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string;
+        color?: string;
+        variation?: 'solid' | 'outline';
+        ariaLabel?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type MenuProps = typeof __propDef.props;
+export declare type MenuEvents = typeof __propDef.events;
+export declare type MenuSlots = typeof __propDef.slots;
+export default class Menu extends SvelteComponentTyped<MenuProps, MenuEvents, MenuSlots> {
+}
+export {};

package/navbar/NavHamburger.svelte

@@ -1,5 +1,5 @@
 <script>import classNames from 'classnames';
-import { Menu } from 'svelte-heros';
+import Menu from './Menu.svelte';
 export let btnClass = 'ml-3 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 md:hidden';
 </script>
 
@@ -7,8 +7,7 @@ export let btnClass = 'ml-3 inline-flex items-center rounded-lg p-2 text-sm text
 	{...$$restProps}
 	class={classNames(btnClass, $$props.class)}
 	data-testid="navbar-toggle"
-	on:click
->
+	on:click>
 	<span class="sr-only">Open main menu</span>
 	<Menu class="h-6 w-6 shrink-0" />
 </button>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.25.21",
+  "version": "0.25.22",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -157,6 +157,7 @@
     "./list-group/ListItem.svelte": "./list-group/ListItem.svelte",
     "./megamenu/MegaMenu.svelte": "./megamenu/MegaMenu.svelte",
     "./modals/Modal.svelte": "./modals/Modal.svelte",
+    "./navbar/Menu.svelte": "./navbar/Menu.svelte",
     "./navbar/NavBrand.svelte": "./navbar/NavBrand.svelte",
     "./navbar/NavDropdown.svelte": "./navbar/NavDropdown.svelte",
     "./navbar/NavHamburger.svelte": "./navbar/NavHamburger.svelte",
@@ -174,6 +175,7 @@
     "./ratings/RatingComment.svelte": "./ratings/RatingComment.svelte",
     "./ratings/Review.svelte": "./ratings/Review.svelte",
     "./ratings/ScoreRating.svelte": "./ratings/ScoreRating.svelte",
+    "./ratings/Star.svelte": "./ratings/Star.svelte",
     "./sidebars/Sidebar.svelte": "./sidebars/Sidebar.svelte",
     "./sidebars/SidebarBrand.svelte": "./sidebars/SidebarBrand.svelte",
     "./sidebars/SidebarCta.svelte": "./sidebars/SidebarCta.svelte",
@@ -234,6 +236,10 @@
     "./typography/Secondary.svelte": "./typography/Secondary.svelte",
     "./typography/TextGradient.svelte": "./typography/TextGradient.svelte",
     "./typography/Underline.svelte": "./typography/Underline.svelte",
+    "./utils/ChevronDown.svelte": "./utils/ChevronDown.svelte",
+    "./utils/ChevronLeft.svelte": "./utils/ChevronLeft.svelte",
+    "./utils/ChevronRight.svelte": "./utils/ChevronRight.svelte",
+    "./utils/ChevronUp.svelte": "./utils/ChevronUp.svelte",
     "./utils/CloseButton.svelte": "./utils/CloseButton.svelte",
     "./utils/Popper.svelte": "./utils/Popper.svelte",
     "./utils/Wrapper.svelte": "./utils/Wrapper.svelte",

package/ratings/Rating.svelte

@@ -1,4 +1,4 @@
-<script>import { Star } from 'svelte-heros';
+<script>import Star from './Star.svelte';
 export let divClass = 'flex items-center';
 export let size = '24';
 export let total = 5;

package/ratings/RatingComment.svelte

@@ -1,5 +1,5 @@
 <script>import Button from '../buttons/Button.svelte';
-import { Star } from 'svelte-heros';
+import Star from './Star.svelte';
 // default is floor
 export let ceil = false;
 export let helpfullink = '';
@@ -16,8 +16,7 @@ let grayStars = comment.total - roundedRating;
 			<p>
 				{comment.user.name}
 				<time datetime="2014-08-16 19:00" class="block text-sm text-gray-500 dark:text-gray-400"
-					>{comment.user.joined}</time
-				>
+					>{comment.user.joined}</time>
 			</p>
 		</div>
 	</div>
@@ -29,7 +28,7 @@ let grayStars = comment.total - roundedRating;
 		{/each}
 		{#each Array(grayStars) as _, star}
 			<slot name="ratingDown">
-				<Star size="26" class="px-0.5 text-gray-300 dark:text-gray-500" />
+				<Star size="24" class="px-0.5 text-gray-300 dark:text-gray-500" />
 			</slot>
 		{/each}
 		{#if comment.heading}
@@ -57,8 +56,7 @@ let grayStars = comment.total - roundedRating;
 					<a
 						href={abuselink}
 						class="pl-4 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
-						>Report abuse</a
-					>
+						>Report abuse</a>
 				{/if}
 			</div>
 		{/if}

package/ratings/Star.svelte

@@ -0,0 +1,36 @@
+<script>export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M11.4806 3.49883C11.6728 3.03685 12.3272 3.03685 12.5193 3.49883L14.6453 8.61028C14.7263 8.80504 14.9095 8.93811 15.1197 8.95497L20.638 9.39736C21.1367 9.43735 21.339 10.0598 20.959 10.3853L16.7546 13.9867C16.5945 14.1239 16.5245 14.3392 16.5734 14.5444L17.8579 19.9293C17.974 20.416 17.4446 20.8007 17.0176 20.5398L12.2932 17.6542C12.1132 17.5443 11.8868 17.5443 11.7068 17.6542L6.98238 20.5398C6.55539 20.8007 6.02594 20.416 6.14203 19.9293L7.42652 14.5444C7.47546 14.3392 7.4055 14.1239 7.24531 13.9867L3.04099 10.3853C2.661 10.0598 2.86323 9.43735 3.36197 9.39736L8.88022 8.95497C9.09048 8.93811 9.27363 8.80504 9.35464 8.61028L11.4806 3.49883Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.2108C11.2364 2.13286 12.7635 2.13286 13.2118 3.2108L15.2938 8.21652L20.6979 8.64976C21.8616 8.74306 22.3335 10.1953 21.4469 10.9549L17.3295 14.4818L18.5874 19.7553C18.8583 20.8909 17.6229 21.7884 16.6266 21.1799L11.9999 18.354L7.37329 21.1799C6.37697 21.7884 5.14158 20.8909 5.41246 19.7553L6.67038 14.4818L2.55303 10.9549C1.66639 10.1953 2.13826 8.74306 3.302 8.64976L8.70609 8.21652L10.7881 3.2108Z" fill="${color}"/> `;
+$: switch (variation) {
+    case 'outline':
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+        break;
+    case 'solid':
+        svgpath = svgsolid;
+        viewBox = '0 0 24 24';
+        break;
+    default:
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+}
+export let ariaLabel = 'star';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click>
+	{@html svgpath}
+</svg>

package/ratings/Star.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string;
+        color?: string;
+        variation?: 'solid' | 'outline';
+        ariaLabel?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type StarProps = typeof __propDef.props;
+export declare type StarEvents = typeof __propDef.events;
+export declare type StarSlots = typeof __propDef.slots;
+export default class Star extends SvelteComponentTyped<StarProps, StarEvents, StarSlots> {
+}
+export {};

package/sidebars/SidebarDropdownWrapper.svelte

@@ -1,7 +1,7 @@
 <script>import classNames from 'classnames';
 import { slide } from 'svelte/transition';
 import { quintOut } from 'svelte/easing';
-import { ChevronDown } from 'svelte-heros';
+import ChevronDown from '../utils/ChevronDown.svelte';
 export let btnClass = 'flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
 export let label = '';
 export let spanClass = 'flex-1 ml-3 text-left whitespace-nowrap';
@@ -19,14 +19,12 @@ const handleDropdown = () => {
 		on:click={() => handleDropdown()}
 		type="button"
 		class={classNames(btnClass, $$props.class)}
-		aria-controls="sidebar-dropdown"
-	>
+		aria-controls="sidebar-dropdown">
 		<svelte:component
 			this={icon.name}
 			size={icon.size}
 			color={icon.color}
-			class="mr-2 {icon.class}"
-		/>
+			class="mr-2 {icon.class}" />
 		<span class={spanClass} sidebar-toggle-item>{label}</span>
 		<ChevronDown />
 	</button>
@@ -34,8 +32,7 @@ const handleDropdown = () => {
 		<ul
 			id="dropdown"
 			class={ulClass}
-			transition:slide={{ delay: 250, duration: 300, easing: quintOut }}
-		>
+			transition:slide={{ delay: 250, duration: 300, easing: quintOut }}>
 			<slot />
 		</ul>
 	{/if}

package/timelines/Timeline.svelte

@@ -1,6 +1,17 @@
-<script>export let olClass = 'relative border-l border-gray-200 dark:border-gray-700';
+<script>import { setContext } from 'svelte';
+export let customClass = '';
+export let order = '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={olClass}>
+<ol class={olClasses[order]}>
 	<slot />
 </ol>

package/timelines/Timeline.svelte.d.ts

@@ -1,7 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        olClass?: string;
+        customClass?: string;
+        order?: 'default' | 'vertical' | 'horizontal' | 'activity' | 'group' | 'custom';
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/timelines/TimelineItem.svelte

@@ -1,37 +1,126 @@
-<script>export let timelineItems;
+<script>import classNames from 'classnames';
+import { getContext } from 'svelte';
+export let icon;
+export let title = '';
+export let date = '';
+export let customDiv = '';
+export let customTimeClass = '';
+let order = '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>
 
-{#each timelineItems as { date, title, text, href, linkname }}
-	<li class="mb-10 ml-4">
-		<div
-			class="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"
-		/>
-		<time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
-			>{date}</time
-		>
-		<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-			{title}
-		</h3>
-		<p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
-			{text}
-		</p>
-		{#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>
-{/each}
+<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 icon}
+			{@html 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 icon}
+			{@html 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 icon}
+			{@html 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/timelines/TimelineItem.svelte.d.ts

@@ -1,13 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
-import type { TimelineItemType } from '../types';
+import type { SvelteComponent } from 'svelte';
 declare const __propDef: {
     props: {
-        timelineItems: TimelineItemType[];
+        icon: string | SvelteComponent;
+        title?: string;
+        date?: string;
+        customDiv?: string;
+        customTimeClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type TimelineItemProps = typeof __propDef.props;
 export declare type TimelineItemEvents = typeof __propDef.events;

package/timelines/TimelineItemHorizontal.svelte

@@ -1,24 +1,55 @@
-<script>export let timelineItems;
+<script>// import type { TimelineItemHorizontalType } from '../types';
+// export let timelineItems: TimelineItemHorizontalType[];
+export let title;
+export let date;
+export let href;
+export let text;
+export let linkname;
+export let icon;
 </script>
 
-{#each timelineItems as { date, title, text, icon, iconClass, iconSize }}
-	<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}
-					<svelte:component this={icon} size={iconSize} class={iconClass} />
-				{: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" />
+<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="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>
-	</li>
-{/each}
+		<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/timelines/TimelineItemHorizontal.svelte.d.ts

@@ -1,8 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { TimelineItemHorizontalType } from '../types';
 declare const __propDef: {
     props: {
-        timelineItems: TimelineItemHorizontalType[];
+        title: string;
+        date: string;
+        href: string;
+        text: string;
+        linkname: string;
+        icon: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/timelines/TimelineItemVertical.svelte

@@ -1,28 +1,55 @@
-<script>export let timelineItems;
+<script>// import type { TimelineItemVerticalType } from '../types';
+// export let timelineItems: TimelineItemVerticalType[];
+export let title;
+export let date;
+export let href;
+export let text;
+export let linkname;
+export let icon;
 </script>
 
-{#each timelineItems as { date, title, text, href, linkname, icon, iconClass, iconSize }}
-	<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 icon}
-				<svelte:component this={icon} size={iconSize} class={iconClass} />
-			{: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>
-		<p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
-			{text}
-		</p>
-		{#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
-			>
+<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 icon}
+			{@html 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}
-	</li>
-{/each}
+	</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>
+	<p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
+		{text}
+	</p>
+	{#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/timelines/TimelineItemVertical.svelte.d.ts

@@ -1,8 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { TimelineItemVerticalType } from '../types';
 declare const __propDef: {
     props: {
-        timelineItems: TimelineItemVerticalType[];
+        title: string;
+        date: string;
+        href: string;
+        text: string;
+        linkname: string;
+        icon: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/utils/ChevronDown.svelte

@@ -0,0 +1,36 @@
+<script>export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 16.2803C12.2374 16.5732 11.7626 16.5732 11.4697 16.2803L3.96967 8.78033C3.67678 8.48744 3.67678 8.01256 3.96967 7.71967C4.26256 7.42678 4.73744 7.42678 5.03033 7.71967L12 14.6893L18.9697 7.71967C19.2626 7.42678 19.7374 7.42678 20.0303 7.71967C20.3232 8.01256 20.3232 8.48744 20.0303 8.78033L12.5303 16.2803Z" fill="${color}"/> `;
+$: switch (variation) {
+    case 'outline':
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+        break;
+    case 'solid':
+        svgpath = svgsolid;
+        viewBox = '0 0 24 24';
+        break;
+    default:
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+}
+export let ariaLabel = 'chevron down';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click>
+	{@html svgpath}
+</svg>

package/utils/ChevronDown.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string;
+        color?: string;
+        variation?: 'solid' | 'outline';
+        ariaLabel?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ChevronDownProps = typeof __propDef.props;
+export declare type ChevronDownEvents = typeof __propDef.events;
+export declare type ChevronDownSlots = typeof __propDef.slots;
+export default class ChevronDown extends SvelteComponentTyped<ChevronDownProps, ChevronDownEvents, ChevronDownSlots> {
+}
+export {};

package/utils/ChevronLeft.svelte

@@ -0,0 +1,36 @@
+<script>export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M15.75 19.5L8.25 12L15.75 4.5" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M7.71967 12.5303C7.42678 12.2374 7.42678 11.7626 7.71967 11.4697L15.2197 3.96967C15.5126 3.67678 15.9874 3.67678 16.2803 3.96967C16.5732 4.26256 16.5732 4.73744 16.2803 5.03033L9.31066 12L16.2803 18.9697C16.5732 19.2626 16.5732 19.7374 16.2803 20.0303C15.9874 20.3232 15.5126 20.3232 15.2197 20.0303L7.71967 12.5303Z" fill="${color}"/> `;
+$: switch (variation) {
+    case 'outline':
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+        break;
+    case 'solid':
+        svgpath = svgsolid;
+        viewBox = '0 0 24 24';
+        break;
+    default:
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+}
+export let ariaLabel = 'chevron left';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click>
+	{@html svgpath}
+</svg>

package/utils/ChevronLeft.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string;
+        color?: string;
+        variation?: 'solid' | 'outline';
+        ariaLabel?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ChevronLeftProps = typeof __propDef.props;
+export declare type ChevronLeftEvents = typeof __propDef.events;
+export declare type ChevronLeftSlots = typeof __propDef.slots;
+export default class ChevronLeft extends SvelteComponentTyped<ChevronLeftProps, ChevronLeftEvents, ChevronLeftSlots> {
+}
+export {};

package/utils/ChevronRight.svelte

@@ -0,0 +1,36 @@
+<script>export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M8.25 4.5L15.75 12L8.25 19.5" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2803 11.4697C16.5732 11.7626 16.5732 12.2374 16.2803 12.5303L8.78033 20.0303C8.48744 20.3232 8.01256 20.3232 7.71967 20.0303C7.42678 19.7374 7.42678 19.2626 7.71967 18.9697L14.6893 12L7.71967 5.03033C7.42678 4.73744 7.42678 4.26256 7.71967 3.96967C8.01256 3.67678 8.48744 3.67678 8.78033 3.96967L16.2803 11.4697Z" fill="${color}"/> `;
+$: switch (variation) {
+    case 'outline':
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+        break;
+    case 'solid':
+        svgpath = svgsolid;
+        viewBox = '0 0 24 24';
+        break;
+    default:
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+}
+export let ariaLabel = 'chevron right';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click>
+	{@html svgpath}
+</svg>

package/utils/ChevronRight.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string;
+        color?: string;
+        variation?: 'solid' | 'outline';
+        ariaLabel?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ChevronRightProps = typeof __propDef.props;
+export declare type ChevronRightEvents = typeof __propDef.events;
+export declare type ChevronRightSlots = typeof __propDef.slots;
+export default class ChevronRight extends SvelteComponentTyped<ChevronRightProps, ChevronRightEvents, ChevronRightSlots> {
+}
+export {};

package/utils/ChevronUp.svelte

@@ -0,0 +1,36 @@
+<script>export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M4.5 15.75L12 8.25L19.5 15.75" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4697 7.71967C11.7626 7.42678 12.2374 7.42678 12.5303 7.71967L20.0303 15.2197C20.3232 15.5126 20.3232 15.9874 20.0303 16.2803C19.7374 16.5732 19.2626 16.5732 18.9697 16.2803L12 9.31066L5.03033 16.2803C4.73744 16.5732 4.26256 16.5732 3.96967 16.2803C3.67678 15.9874 3.67678 15.5126 3.96967 15.2197L11.4697 7.71967Z" fill="${color}"/> `;
+$: switch (variation) {
+    case 'outline':
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+        break;
+    case 'solid':
+        svgpath = svgsolid;
+        viewBox = '0 0 24 24';
+        break;
+    default:
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+}
+export let ariaLabel = 'chevron up';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click>
+	{@html svgpath}
+</svg>

package/utils/ChevronUp.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string;
+        color?: string;
+        variation?: 'solid' | 'outline';
+        ariaLabel?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ChevronUpProps = typeof __propDef.props;
+export declare type ChevronUpEvents = typeof __propDef.events;
+export declare type ChevronUpSlots = typeof __propDef.slots;
+export default class ChevronUp extends SvelteComponentTyped<ChevronUpProps, ChevronUpEvents, ChevronUpSlots> {
+}
+export {};