flowbite-svelte 0.25.21 → 0.25.24

package/timelines/TimelineItem.svelte

@@ -1,37 +1,125 @@
-<script>export let timelineItems;
+<script>import classNames from 'classnames';
+import { getContext } from 'svelte';
+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 $$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/timelines/TimelineItem.svelte.d.ts

@@ -1,13 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
-import type { TimelineItemType } from '../types';
 declare const __propDef: {
     props: {
-        timelineItems: TimelineItemType[];
+        title?: string;
+        date?: string;
+        customDiv?: string;
+        customTimeClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+        icon: {};
+    };
 };
 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,33 @@
-<script>export let timelineItems;
+<script>// import type { TimelineItemVerticalType } from '../types';
+// export let timelineItems: TimelineItemVerticalType[];
+export let title;
+export let date;
 </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 $$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}
-	</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>
+	<slot />
+</li>

package/timelines/TimelineItemVertical.svelte.d.ts

@@ -1,13 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
-import type { TimelineItemVerticalType } from '../types';
 declare const __propDef: {
     props: {
-        timelineItems: TimelineItemVerticalType[];
+        title: string;
+        date: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        icon: {};
+        default: {};
+    };
 };
 export declare type TimelineItemVerticalProps = typeof __propDef.props;
 export declare type TimelineItemVerticalEvents = typeof __propDef.events;

package/tooltips/Tooltip.svelte

@@ -1,9 +1,11 @@
 <script>import Popper from '../utils/Popper.svelte';
 import classNames from 'classnames';
+import generateId from '../utils/generateId';
 export let content = '';
 export let style = 'dark';
 export let tipColor = '';
 export let tipClass = 'py-2 px-3 text-sm font-medium rounded-lg shadow-sm tooltip';
+export let triggeredBy;
 const tipStyleClasses = {
     dark: 'border border-gray-800 bg-gray-900 text-white dark:bg-gray-700 dark:border-gray-600',
     light: 'border border-gray-200 bg-white text-gray-900',
@@ -12,9 +14,17 @@ const tipStyleClasses = {
 };
 let toolTipClass;
 $: toolTipClass = classNames(tipClass, tipStyleClasses[style], $$props.class);
+let id = generateId();
 </script>
 
-<Popper activeContent={false} {...$$restProps} class={toolTipClass} on:show>
-	<slot slot="trigger" />
+<div {id}>
+	<slot />
+</div>
+<Popper
+	activeContent={false}
+	triggeredBy={triggeredBy ?? '#' + id}
+	{...$$restProps}
+	class={toolTipClass}
+	on:show>
 	<slot name="content">{content}</slot>
 </Popper>

package/tooltips/Tooltip.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         style?: 'dark' | 'light' | 'auto' | 'custom';
         tipColor?: string;
         tipClass?: string;
+        triggeredBy: string;
     };
     events: {
         show: CustomEvent<any>;
@@ -13,9 +14,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {
-            slot: string;
-        };
+        default: {};
         content: {};
     };
 };

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