windmill-components 1.35.1 → 1.35.43

package/components/flows/header/FlowPreviewButtons.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowPreviewButtonsProps = typeof __propDef.props;
+export declare type FlowPreviewButtonsEvents = typeof __propDef.events;
+export declare type FlowPreviewButtonsSlots = typeof __propDef.slots;
+export default class FlowPreviewButtons extends SvelteComponentTyped<FlowPreviewButtonsProps, FlowPreviewButtonsEvents, FlowPreviewButtonsSlots> {
+}
+export {};

package/components/flows/header/FlowStatus.svelte

@@ -0,0 +1,36 @@
+<script>import { classNames } from '../../../utils';
+import { faArrowCircleDown, faArrowRotateBack, faArrowRotateForward, faCalendar, faCalendarAlt } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import Icon from 'svelte-awesome';
+import { flowStore } from '../flowStore';
+const { schedule, select } = getContext('FlowEditorContext');
+$: retriesEnabled = $flowStore.value.retry?.constant || $flowStore.value.retry?.exponential;
+</script>
+
+<div class="flex space-x-1">
+	<span
+		class={classNames(
+			' text-sm font-medium mr-2 px-2.5 py-0.5 rounded cursor-pointer flex items-center ',
+			$schedule?.enabled
+				? 'bg-sky-100 text-sky-800 hover:bg-sky-200'
+				: 'bg-gray-100 text-gray-800 hover:bg-gray-200'
+		)}
+		on:click={() => select('settings-schedule')}
+	>
+		<Icon data={faCalendarAlt} class="mr-2" scale={0.8} />
+
+		{$schedule?.enabled ? `Schedule: ${$schedule?.cron}` : 'Schedule disabled'}
+	</span>
+	<span
+		class={classNames(
+			' text-sm font-medium mr-2 px-2.5 py-0.5 rounded cursor-pointer flex items-center',
+			retriesEnabled
+				? 'bg-sky-100 text-sky-800 hover:bg-sky-200'
+				: 'bg-gray-100 text-gray-800 hover:bg-gray-200'
+		)}
+		on:click={() => select('settings-retries')}
+	>
+		<Icon data={faArrowRotateForward} class="mr-2" scale={0.8} />
+		{retriesEnabled ? `Retries enabled` : 'Retries disabled'}
+	</span>
+</div>

package/components/flows/header/FlowStatus.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowStatusProps = typeof __propDef.props;
+export declare type FlowStatusEvents = typeof __propDef.events;
+export declare type FlowStatusSlots = typeof __propDef.slots;
+export default class FlowStatus extends SvelteComponentTyped<FlowStatusProps, FlowStatusEvents, FlowStatusSlots> {
+}
+export {};

package/components/flows/map/FlowErrorHandlerItem.svelte

@@ -0,0 +1,54 @@
+<script>import { getContext } from 'svelte';
+import Icon from 'svelte-awesome';
+import { faBug } from '@fortawesome/free-solid-svg-icons';
+import { NEVER_TESTED_THIS_FAR } from '../flowStateUtils';
+import { classNames, emptyModule, emptySchema } from '../../../utils';
+import { flowStateStore } from '../flowState';
+import Toggle from '../../Toggle.svelte';
+import { flowStore } from '../flowStore';
+const { select, selectedId } = getContext('FlowEditorContext');
+function onToggle() {
+    if ($flowStore.value.failure_module) {
+        $flowStore.value.failure_module = undefined;
+        // By default, we return to settings when disabling the failure module
+        select('settings');
+    }
+    else {
+        const failureModule = {
+            schema: emptySchema(),
+            previewResult: NEVER_TESTED_THIS_FAR,
+            childFlowModules: []
+        };
+        $flowStateStore.failureModule = failureModule;
+        $flowStore.value.failure_module = emptyModule();
+        select('failure');
+    }
+}
+</script>
+
+<div
+	on:click={() => {
+		if ($flowStore.value.failure_module) {
+			select('failure')
+		}
+	}}
+	class={classNames(
+		'border rounded-md p-2 bg-white text-sm cursor-pointer mt-4 flex flex-col',
+		$selectedId.includes('failure') ? 'outline outline-offset-1 outline-2 outline-slate-900' : ''
+	)}
+>
+	<div class=" flex justify-between items-center">
+		<div>
+			<Icon data={faBug} class="mr-2" />
+			<span class="font-bold">Error handler</span>
+		</div>
+		<Toggle checked={Boolean($flowStore.value.failure_module)} on:change={onToggle} />
+	</div>
+
+	{#if $flowStore.value.failure_module}
+		<textarea
+			bind:value={$flowStore.value.failure_module.summary}
+			placeholder="Error handler summary"
+		/>
+	{/if}
+</div>

package/components/flows/map/FlowErrorHandlerItem.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowErrorHandlerItemProps = typeof __propDef.props;
+export declare type FlowErrorHandlerItemEvents = typeof __propDef.events;
+export declare type FlowErrorHandlerItemSlots = typeof __propDef.slots;
+export default class FlowErrorHandlerItem extends SvelteComponentTyped<FlowErrorHandlerItemProps, FlowErrorHandlerItemEvents, FlowErrorHandlerItemSlots> {
+}
+export {};

package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -0,0 +1,58 @@
+<script>import Button from '../../common/button/Button.svelte';
+import { classNames } from '../../../utils';
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
+export let color = 'blue';
+export let isFirst = false;
+export let isLast = false;
+export let hasLine = true;
+export let selected = false;
+export let deletable = false;
+const margin = isLast ? '' : isFirst ? 'mb-0.5' : 'my-0.5';
+const dispatch = createEventDispatcher();
+</script>
+
+<div class="flex" on:click>
+	<div
+		class={classNames(
+			'flex  mr-2 w-8 ',
+			hasLine ? 'line' : '',
+			isFirst ? 'justify-center items-start' : 'justify-center items-center'
+		)}
+	>
+		<div
+			class={classNames(
+				'flex justify-center items-center w-6 h-6 border rounded-full text-xs font-bold',
+				color === 'blue' ? 'bg-blue-100 text-blue-400' : 'bg-orange-100 text-orange-400',
+				margin
+			)}
+		>
+			<slot name="icon" />
+		</div>
+	</div>
+	<div
+		class={classNames(
+			'border w-full rounded-sm p-2 bg-white text-sm cursor-pointer flex justify-between items-center space-x-2 overflow-hidden',
+			margin,
+			selected ? 'outline outline-offset-1 outline-2  outline-gray-600' : ''
+		)}
+	>
+		<slot name="content" />
+		{#if deletable}
+			<Button
+				on:click={(event) => dispatch('delete', { event })}
+				startIcon={{ icon: faTrashAlt }}
+				iconOnly={true}
+				color="light"
+				variant="border"
+				size="xs"
+			/>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.line {
+		background: repeating-linear-gradient(to bottom, transparent 0 4px, #bbb 4px 8px) 50%/1px 100%
+			no-repeat;
+	}</style>

package/components/flows/map/FlowModuleSchemaItem.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: "blue" | "orange" | undefined;
+        isFirst?: boolean | undefined;
+        isLast?: boolean | undefined;
+        hasLine?: boolean | undefined;
+        selected?: boolean | undefined;
+        deletable?: boolean | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        delete: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+        content: {};
+    };
+};
+export declare type FlowModuleSchemaItemProps = typeof __propDef.props;
+export declare type FlowModuleSchemaItemEvents = typeof __propDef.events;
+export declare type FlowModuleSchemaItemSlots = typeof __propDef.slots;
+export default class FlowModuleSchemaItem extends SvelteComponentTyped<FlowModuleSchemaItemProps, FlowModuleSchemaItemEvents, FlowModuleSchemaItemSlots> {
+}
+export {};

package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -0,0 +1,161 @@
+<script>import { getContext } from 'svelte';
+import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
+import Icon from 'svelte-awesome';
+import { faPen, faPlus, faSliders } from '@fortawesome/free-solid-svg-icons';
+import { emptyFlowModuleState, isEmptyFlowModule } from '../flowStateUtils';
+import { classNames, emptyModule } from '../../../utils';
+import FlowErrorHandlerItem from './FlowErrorHandlerItem.svelte';
+import RemoveStepConfirmationModal from '../content/RemoveStepConfirmationModal.svelte';
+export let prefix = undefined;
+export let modules;
+export let moduleStates;
+const { select, selectedId } = getContext('FlowEditorContext');
+function insertAtIndex(index) {
+    moduleStates.splice(index, 0, emptyFlowModuleState());
+    modules.splice(index, 0, emptyModule());
+    moduleStates = moduleStates;
+    modules = modules;
+    select([prefix, String(index)].filter(Boolean).join('-'));
+}
+function removeAtIndex(index) {
+    select('settings');
+    modules.splice(index, 1);
+    moduleStates.splice(index, 1);
+    moduleStates = moduleStates;
+    modules = modules;
+}
+let indexToRemove = undefined;
+$: confirmationModalOpen = indexToRemove !== undefined;
+</script>
+
+<div class="flex flex-col justify-between h-full">
+	<ul class="w-full">
+		{#if prefix === undefined}
+			<div
+				on:click={() => select('settings')}
+				class={classNames(
+					'border w-full rounded-md p-2 bg-white text-sm cursor-pointer flex items-center mb-4',
+					$selectedId.includes('settings')
+						? 'outline outline-offset-1 outline-2  outline-slate-900'
+						: ''
+				)}
+			>
+				<Icon data={faSliders} class="mr-2" />
+				<span class="font-bold">Settings</span>
+			</div>
+
+			<FlowModuleSchemaItem
+				on:click={() => select('inputs')}
+				isFirst
+				hasLine
+				selected={$selectedId === 'inputs'}
+			>
+				<div slot="icon">
+					<Icon data={faPen} scale={0.8} />
+				</div>
+				<div slot="content">
+					<span>Inputs</span>
+				</div>
+			</FlowModuleSchemaItem>
+		{/if}
+
+		{#each modules as mod, index (index)}
+			<button
+				on:click={() => insertAtIndex(index)}
+				type="button"
+				class="text-gray-900 m-0.5 my-0.5 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+			>
+				<Icon data={faPlus} scale={0.8} />
+			</button>
+			{#if mod.value.type === 'forloopflow'}
+				<li>
+					<FlowModuleSchemaItem
+						deletable
+						on:delete={() => removeAtIndex(index)}
+						on:click={() => select(['loop', String(index)].join('-'))}
+						selected={$selectedId === ['loop', String(index)].join('-')}
+					>
+						<div slot="icon">
+							<span>{index + 1}</span>
+						</div>
+						<div slot="content">
+							<span>For loop</span>
+						</div>
+					</FlowModuleSchemaItem>
+
+					<div class="flex text-xs">
+						<div class="line mr-2 w-8" />
+
+						<div class="w-full mb-2">
+							{#if moduleStates[index]?.childFlowModules}
+								<svelte:self
+									prefix={String(index)}
+									moduleStates={moduleStates[index].childFlowModules}
+									modules={mod.value.modules}
+								/>
+							{/if}
+						</div>
+					</div>
+
+					<div class="italic text-xs pl-10 text-gray-600">
+						The loop's result is the list of every iteration's result.
+					</div>
+				</li>
+			{:else}
+				<li>
+					<FlowModuleSchemaItem
+						on:click={() => select([prefix, String(index)].filter(Boolean).join('-'))}
+						color={prefix ? 'orange' : 'blue'}
+						isLast={index === modules.length - 1}
+						selected={$selectedId === [prefix, String(index)].filter(Boolean).join('-')}
+						deletable
+						on:delete={(event) => {
+							if (event.detail.event.shiftKey || isEmptyFlowModule(mod)) {
+								removeAtIndex(index)
+							} else {
+								indexToRemove = index
+							}
+						}}
+					>
+						<div slot="icon">
+							<span>{index + 1}</span>
+						</div>
+						<div slot="content" class="w-full truncate block">
+							<span
+								>{mod.summary ||
+									mod.value.path ||
+									(mod.value.type === 'rawscript'
+										? `Inline ${mod.value.language}`
+										: 'Select a script')}</span
+							>
+						</div>
+					</FlowModuleSchemaItem>
+				</li>
+			{/if}
+		{/each}
+
+		<button
+			on:click={() => insertAtIndex(modules.length)}
+			type="button"
+			class="text-gray-900 bg-white border m-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+		>
+			<Icon data={faPlus} scale={0.8} />
+		</button>
+	</ul>
+	{#if prefix === undefined}
+		<FlowErrorHandlerItem />
+	{/if}
+</div>
+
+<RemoveStepConfirmationModal
+	bind:open={confirmationModalOpen}
+	on:canceled={() => {
+		indexToRemove = undefined
+	}}
+	on:confirmed={() => {
+		if (indexToRemove !== undefined) {
+			removeAtIndex(indexToRemove)
+			indexToRemove = undefined
+		}
+	}}
+/>

package/components/flows/map/FlowModuleSchemaMap.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModuleState } from '../flowState';
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        prefix?: string | undefined;
+        modules: FlowModule[];
+        moduleStates: FlowModuleState[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowModuleSchemaMapProps = typeof __propDef.props;
+export declare type FlowModuleSchemaMapEvents = typeof __propDef.events;
+export declare type FlowModuleSchemaMapSlots = typeof __propDef.slots;
+export default class FlowModuleSchemaMap extends SvelteComponentTyped<FlowModuleSchemaMapProps, FlowModuleSchemaMapEvents, FlowModuleSchemaMapSlots> {
+}
+export {};

package/components/flows/pickers/PickHubScript.svelte

@@ -3,9 +3,10 @@ import FlowScriptPicker from './FlowScriptPicker.svelte';
 import ItemPicker from '../../ItemPicker.svelte';
 import { hubScripts } from '../../../stores';
 import { createEventDispatcher } from 'svelte';
-export let isTrigger = false;
+import { Script } from '../../../gen';
+export let kind;
 let items;
-$: items = $hubScripts?.filter((x) => x.is_trigger == isTrigger) ?? [];
+$: items = $hubScripts?.filter((x) => x.kind == kind) ?? [];
 let itemPicker;
 const dispatch = createEventDispatcher();
 </script>
@@ -23,7 +24,7 @@ const dispatch = createEventDispatcher();
 />
 
 <FlowScriptPicker
-	label={`Pick a ${isTrigger ? 'trigger ' : ''} script from the Hub`}
+	label={`Pick a ${kind == Script.kind.SCRIPT ? '' : kind} script from the Hub`}
 	icon={faUserGroup}
 	iconColor="text-blue-500"
 	on:click={() => itemPicker.openModal()}

package/components/flows/pickers/PickHubScript.svelte.d.ts

@@ -1,7 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
+import { Script } from '../../../gen';
 declare const __propDef: {
     props: {
-        isTrigger?: boolean | undefined;
+        kind: Script.kind;
     };
     events: {
         pick: CustomEvent<any>;

package/components/flows/pickers/PickScript.svelte

@@ -4,17 +4,11 @@ import { ScriptService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { createEventDispatcher } from 'svelte';
 import FlowScriptPicker from './FlowScriptPicker.svelte';
-export let isTrigger = false;
-let items = [];
+export let kind;
 let itemPicker;
 const dispatch = createEventDispatcher();
 async function loadItems() {
-    items = await ScriptService.listScripts({ workspace: $workspaceStore, isTrigger });
-}
-$: {
-    if ($workspaceStore) {
-        loadItems();
-    }
+    return await ScriptService.listScripts({ workspace: $workspaceStore, kind });
 }
 </script>
 
@@ -25,13 +19,11 @@ $: {
 	}}
 	itemName={'Script'}
 	extraField="summary"
-	loadItems={async () => {
-		return items
-	}}
+	{loadItems}
 />
 
 <FlowScriptPicker
-	label={`Pick a ${isTrigger ? 'trigger ' : ''}script from your workspace`}
+	label={`Pick a ${kind == 'script' ? '' : kind} script from your workspace`}
 	icon={faUserGroup}
 	iconColor="text-blue-500"
 	on:click={() => itemPicker.openModal()}

package/components/flows/pickers/PickScript.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        isTrigger?: boolean | undefined;
+        kind: string;
     };
     events: {
         pick: CustomEvent<any>;

package/components/flows/propPicker/PropPickerWrapper.svelte

@@ -0,0 +1,42 @@
+<script context="module">export {};
+</script>
+
+<script>import PropPicker from '../../propertyPicker/PropPicker.svelte';
+import { setContext } from 'svelte';
+import { HSplitPane } from 'svelte-split-pane';
+import { writable } from 'svelte/store';
+export let pickableProperties = {};
+const propPickerConfig = writable(undefined);
+setContext('PropPickerWrapper', {
+    propPickerConfig,
+    focusProp: (propName, insertionMode, onSelect) => {
+        propPickerConfig.set({
+            propName,
+            insertionMode,
+            onSelect
+        });
+    },
+    clearFocus: () => {
+        propPickerConfig.set(undefined);
+    }
+});
+</script>
+
+<HSplitPane leftPaneSize="50%" rightPaneSize="50%" minLeftPaneSize="20%" minRightPaneSize="20%">
+	<left slot="left" class="relative">
+		<div class="overflow-auto h-full p-4">
+			<slot />
+		</div>
+	</left>
+	<right slot="right">
+		<div class="overflow-auto h-full">
+			<PropPicker
+				{pickableProperties}
+				on:select={({ detail }) => {
+					$propPickerConfig?.onSelect(detail)
+					propPickerConfig.set(undefined)
+				}}
+			/>
+		</div>
+	</right>
+</HSplitPane>

package/components/flows/propPicker/PropPickerWrapper.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponentTyped } from "svelte";
+declare type InsertionMode = 'append' | 'connect' | 'insert';
+declare type SelectCallback = (path: string) => void;
+declare type PropPickerConfig = {
+    insertionMode: InsertionMode;
+    propName: string;
+    onSelect: SelectCallback;
+};
+export declare type PropPickerWrapperContext = {
+    propPickerConfig: Writable<PropPickerConfig | undefined>;
+    focusProp: (propName: string, insertionMode: InsertionMode, onSelect: SelectCallback) => void;
+    clearFocus: () => void;
+};
+import { type Writable } from 'svelte/store';
+declare const __propDef: {
+    props: {
+        pickableProperties?: Object | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type PropPickerWrapperProps = typeof __propDef.props;
+export declare type PropPickerWrapperEvents = typeof __propDef.events;
+export declare type PropPickerWrapperSlots = typeof __propDef.slots;
+export default class PropPickerWrapper extends SvelteComponentTyped<PropPickerWrapperProps, PropPickerWrapperEvents, PropPickerWrapperSlots> {
+}
+export {};

package/components/flows/scheduleUtils.d.ts

@@ -2,6 +2,5 @@ export declare type Schedule = {
     args: Record<string, any>;
     cron: string;
     enabled: boolean;
-    previewArgs: Record<string, any>;
 };
 export declare function loadFlowSchedule(path: string, workspace?: string): Promise<Schedule>;

package/components/flows/scheduleUtils.js

@@ -16,6 +16,5 @@ export async function loadFlowSchedule(path, workspace = '') {
         enabled: schedule.enabled,
         cron: schedule.schedule,
         args: schedule.args ?? {},
-        previewArgs: JSON.parse(JSON.stringify(schedule.args))
     };
 }

package/components/flows/types.d.ts

@@ -0,0 +1,9 @@
+import type { Writable } from 'svelte/store';
+import type { Schedule } from './scheduleUtils';
+export declare type FlowEditorContext = {
+    selectedId: Writable<string>;
+    select: (id: string) => void;
+    schedule: Writable<Schedule>;
+    path: string;
+    previewArgs: Writable<Record<string, any>>;
+};

package/components/flows/types.js

@@ -0,0 +1 @@
+export {};

package/components/flows/utils.d.ts

@@ -2,7 +2,6 @@ import type { Schema } from '../../common';
 import { type Flow, type FlowModule, type InputTransform, type Job } from '../../gen';
 export declare function cleanInputs(flow: Flow | any): Flow;
 export declare function getTypeAsString(arg: any): string;
-export declare function scrollIntoView(element: any): void;
 export declare function loadSchemaFromModule(module: FlowModule): Promise<{
     input_transforms: Record<string, InputTransform>;
     schema: Schema;
@@ -12,3 +11,4 @@ export declare function getDefaultExpr(importPath?: string | undefined, key?: st
 export declare function jobsToResults(jobs: Job[]): any;
 export declare function runFlowPreview(args: Record<string, any>, flow: Flow): Promise<string>;
 export declare function codeToStaticTemplate(code?: string): string | undefined;
+export declare function getIndexes(parentIndex: number | undefined, childIndex: number): number[];

package/components/flows/utils.js

@@ -35,17 +35,6 @@ export function getTypeAsString(arg) {
     }
     return typeof arg;
 }
-export function scrollIntoView(element) {
-    if (!element)
-        return;
-    var headerOffset = 45;
-    var elementPosition = element.getBoundingClientRect().top;
-    var offsetPosition = elementPosition + window.pageYOffset - headerOffset;
-    window.scrollTo({
-        top: offsetPosition,
-        behavior: 'smooth'
-    });
-}
 export async function loadSchemaFromModule(module) {
     const mod = module.value;
     if (mod.type == 'rawscript' || mod.type === 'script') {
@@ -134,3 +123,11 @@ export function codeToStaticTemplate(code) {
     }
     return undefined;
 }
+export function getIndexes(parentIndex, childIndex) {
+    const indexes = [];
+    if (parentIndex !== undefined) {
+        indexes.push(parentIndex);
+    }
+    indexes.push(childIndex);
+    return indexes;
+}

package/components/icons/HatIcon.svelte

@@ -0,0 +1,19 @@
+<script>let clazz = '';
+export { clazz as class };
+</script>
+
+<svg
+	class={clazz}
+	fill="none"
+	stroke="currentColor"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	><path d="M12 14l9-5-9-5-9 5 9 5z" /><path
+		d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
+	/><path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+	/>
+</svg>

package/components/icons/HatIcon.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type HatIconProps = typeof __propDef.props;
+export declare type HatIconEvents = typeof __propDef.events;
+export declare type HatIconSlots = typeof __propDef.slots;
+export default class HatIcon extends SvelteComponentTyped<HatIconProps, HatIconEvents, HatIconSlots> {
+}
+export {};