windmill-components 1.309.7 → 1.352.0

package/package/components/common/drawer/Disposable.svelte

@@ -0,0 +1,67 @@
+<script context="module">export let openedDrawers = [];
+</script>
+
+<script>import { zIndexes } from '../../../zIndexes';
+import { createEventDispatcher } from 'svelte';
+export let open = false;
+export let id = (Math.random() + 1).toString(36).substring(10);
+if (open) {
+    openedDrawers.push(id);
+}
+export let initialOffset = 0;
+let offset = initialOffset;
+export function toggleDrawer() {
+    if (!open) {
+        openDrawer();
+    }
+    else {
+        closeDrawer();
+    }
+}
+export function openDrawer() {
+    open = true;
+    offset = openedDrawers.length - 1;
+    if (openedDrawers.includes(id)) {
+        return;
+    }
+    openedDrawers.push(id);
+}
+export function closeDrawer() {
+    open = false;
+    offset = initialOffset;
+    // remove the last opened drawer
+    openedDrawers = openedDrawers.filter((drawer) => drawer !== id);
+}
+export function isOpen() {
+    return open;
+}
+const dispatch = createEventDispatcher();
+function handleClickAway(e) {
+    const last = openedDrawers[openedDrawers.length - 1];
+    if (last === id) {
+        e.stopPropagation();
+        closeDrawer();
+    }
+}
+function onKeyDown(event) {
+    if (open) {
+        switch (event.key) {
+            case 'Escape':
+                if (id == openedDrawers[openedDrawers.length - 1] || openedDrawers.length == 0) {
+                    openedDrawers.pop();
+                    event.preventDefault();
+                    event.stopPropagation();
+                    event.stopImmediatePropagation();
+                    closeDrawer();
+                    break;
+                }
+        }
+    }
+}
+$: zIndex = zIndexes.disposables + offset;
+$: open ? dispatch('open') : dispatch('close');
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+<slot {handleClickAway} {zIndex} {closeDrawer} {open} />

package/package/components/common/drawer/Disposable.svelte.d.ts

@@ -0,0 +1,37 @@
+import { SvelteComponent } from "svelte";
+export declare let openedDrawers: string[];
+declare const __propDef: {
+    props: {
+        open?: boolean | undefined;
+        id?: string | undefined;
+        initialOffset?: number | undefined;
+        toggleDrawer?: (() => void) | undefined;
+        openDrawer?: (() => void) | undefined;
+        closeDrawer?: (() => void) | undefined;
+        isOpen?: (() => boolean) | undefined;
+    };
+    events: {
+        open: CustomEvent<any>;
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            handleClickAway: (e: any) => void;
+            zIndex: number;
+            closeDrawer: () => void;
+            open: boolean;
+        };
+    };
+};
+export type DisposableProps = typeof __propDef.props;
+export type DisposableEvents = typeof __propDef.events;
+export type DisposableSlots = typeof __propDef.slots;
+export default class Disposable extends SvelteComponent<DisposableProps, DisposableEvents, DisposableSlots> {
+    get toggleDrawer(): () => void;
+    get openDrawer(): () => void;
+    get closeDrawer(): () => void;
+    get isOpen(): () => boolean;
+}
+export {};

package/package/components/common/drawer/Drawer.svelte

@@ -1,33 +1,24 @@
-<script context="module">"use strict";
-let openedDrawers = [];
-</script>
-
-<script>import { onMount } from 'svelte';
-import { createEventDispatcher } from 'svelte';
+<script>import { onMount, createEventDispatcher } from 'svelte';
 import { BROWSER } from 'esm-env';
+import Disposable from './Disposable.svelte';
+import ConditionalPortal from './ConditionalPortal.svelte';
 export let open = false;
 export let duration = 0.3;
 export let placement = 'right';
 export let size = '600px';
 export let alwaysOpen = false;
-let id = (Math.random() + 1).toString(36).substring(10);
+export let shouldUsePortal = true;
+export let offset = 0;
+let disposable = undefined;
 $: durationMs = duration * 1000;
 export function toggleDrawer() {
-    open = !open;
-    if (open) {
-        openedDrawers.push(id);
-    }
-    else {
-        openedDrawers = openedDrawers.filter((x) => x != id);
-    }
+    disposable?.toggleDrawer();
 }
 export function openDrawer() {
-    openedDrawers.push(id);
-    open = true;
+    disposable?.openDrawer();
 }
 export function closeDrawer() {
-    open = false;
-    openedDrawers = openedDrawers.filter((x) => x != id);
+    disposable?.closeDrawer();
     setTimeout(() => {
         dispatch('afterClose');
     }, durationMs);
@@ -47,26 +38,7 @@ function scrollLock(open) {
     }
 }
 $: scrollLock(open);
-function handleClickAway() {
-    dispatch('clickAway');
-    open = false;
-}
-function onKeyDown(event) {
-    if (open) {
-        switch (event.key) {
-            case 'Escape':
-                if (id == openedDrawers[openedDrawers.length - 1] || openedDrawers.length == 0) {
-                    openedDrawers.pop();
-                    event.preventDefault();
-                    event.stopPropagation();
-                    event.stopImmediatePropagation();
-                    open = false;
-                    break;
-                }
-        }
-    }
-}
-$: open ? dispatch('open') : dispatch('close');
+$: open ? openDrawer() : closeDrawer();
 let timeout = true;
 $: !open ? setTimeout(() => (timeout = true), durationMs) : (timeout = false);
 onMount(() => {
@@ -74,22 +46,33 @@ onMount(() => {
 });
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
-
-<aside
-	class="drawer {$$props.class ?? ''} {$$props.positionClass ?? ''}"
-	class:open
-	class:close={!open && timeout}
-	{style}
->
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<div class="overlay {$$props.positionClass ?? ''}" on:click={handleClickAway} />
-	<div class="panel {placement} {$$props.positionClass}" class:size>
-		{#if open || !timeout || alwaysOpen}
-			<slot {open} />
-		{/if}
-	</div>
-</aside>
+<ConditionalPortal condition={shouldUsePortal}>
+	<Disposable
+		initialOffset={offset}
+		let:handleClickAway
+		let:zIndex
+		bind:open
+		bind:this={disposable}
+		on:open
+		on:close
+	>
+		<aside
+			class="drawer {$$props.class ?? ''} {$$props.positionClass ?? ''}"
+			class:open
+			class:close={!open && timeout}
+			style={`${style}; --zIndex: ${zIndex};`}
+		>
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div class="overlay {$$props.positionClass ?? ''}" on:click={handleClickAway} />
+			<div class="panel {placement} {$$props.positionClass}" class:size>
+				{#if open || !timeout || alwaysOpen}
+					<slot {open} />
+				{/if}
+			</div>
+		</aside>
+	</Disposable>
+</ConditionalPortal>
 
 <style>
 	.drawer {
@@ -107,7 +90,7 @@ onMount(() => {
 	.drawer.open {
 		height: 100%;
 		width: 100%;
-		z-index: var(--zIndex, 1002);
+		z-index: var(--zIndex);
 		transition: z-index var(--duration) step-start;
 		pointer-events: auto;
 	}
@@ -139,7 +122,8 @@ onMount(() => {
 		--tw-bg-opacity: 1;
 		background-color: rgb(var(--color-surface) / var(--tw-bg-opacity));
 		z-index: 3;
-		transition: transform var(--duration) ease;
+		transition: transform var(--duration) ease, max-width var(--duration) ease,
+			max-height var(--duration) ease;
 		height: 100%;
 	}
 

package/package/components/common/drawer/Drawer.svelte.d.ts

@@ -7,13 +7,14 @@ declare const __propDef: {
         placement?: string | undefined;
         size?: string | undefined;
         alwaysOpen?: boolean | undefined;
+        shouldUsePortal?: boolean | undefined;
+        offset?: number | undefined;
         toggleDrawer?: (() => void) | undefined;
         openDrawer?: (() => void) | undefined;
         closeDrawer?: (() => void) | undefined;
         isOpen?: (() => boolean) | undefined;
     };
     events: {
-        clickAway: CustomEvent<any>;
         open: CustomEvent<any>;
         close: CustomEvent<any>;
     } & {

package/package/components/common/fileDownload/FileDownload.svelte

@@ -8,9 +8,11 @@ export let s3object;
 border border-dashed border-gray-400 hover:border-blue-500
 focus-within:border-blue-500 hover:bg-blue-50 dark:hover:bg-frost-900 focus-within:bg-blue-50
 duration-200 rounded-lg p-1 gap-2"
-	href={`/api/w/${$workspaceStore}/job_helpers/download_s3_file?file_key=${s3object?.s3}`}
+	href={`/api/w/${$workspaceStore}/job_helpers/download_s3_file?file_key=${s3object?.s3}${
+		s3object?.storage ? `&storage=${s3object.storage}` : ''
+	}`}
 	download={s3object?.s3.split('/').pop() ?? 'unnamed_download.file'}
 >
 	<Download />
-	<span>s3://{s3object.s3}</span>
+	<span>s3://{s3object.s3} {s3object.storage ? ` (${s3object.storage})` : ''}</span>
 </a>

package/package/components/common/fileInput/FileInput.svelte

@@ -15,7 +15,7 @@ export let submittedText = undefined;
 export let defaultFile = undefined;
 const dispatch = createEventDispatcher();
 let input;
-let files = undefined;
+export let files = undefined;
 async function onChange(fileList) {
     if (!fileList || !fileList.length) {
         files = undefined;
@@ -109,8 +109,8 @@ export function clearFiles() {
 	class={twMerge(
 		`relative center-center flex-col text-center font-medium text-tertiary 
 		border border-dashed border-gray-400 hover:border-blue-500 
-		focus-within:border-blue-500 hover:bg-blue-50 dark:hover:bg-frost-900 focus-within:bg-blue-50 
-		duration-200 rounded-lg p-1`,
+		focus-within:border-blue-300 hover:bg-blue-50 dark:hover:bg-frost-900  
+		duration-200 rounded-component p-1`,
 		c
 	)}
 	on:dragover={handleDragOver}

package/package/components/common/fileInput/FileInput.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
         returnFileNames?: boolean | undefined;
         submittedText?: string | undefined;
         defaultFile?: string | undefined;
+        files?: File[] | undefined;
         clearFiles?: (() => void) | undefined;
     };
     events: {

package/package/components/common/fileUpload/FileUpload.svelte

@@ -114,20 +114,21 @@ async function uploadFileToS3(fileToUpload, fileToUploadKey) {
                 }
             });
             xhr?.addEventListener('loadend', () => {
+                activeUploads = activeUploads.filter((x) => x.fileName !== fileToUpload.name);
                 let response = xhr?.responseText;
                 if (xhr?.readyState === 4 && xhr?.status === 200 && response) {
                     uploadData.progress = 100;
                     resolve(JSON.parse(response));
                 }
                 else {
+                    xhr?.abort();
                     if (response) {
-                        reject('An error occurred while uploading the file, see server logs');
+                        reject(response);
                     }
                     else {
-                        reject(response);
+                        reject('An error occurred while uploading the file, see server logs');
                     }
                 }
-                activeUploads = activeUploads.filter((x) => x.fileName !== fileToUpload.name);
             });
             xhr?.open('POST', `/api/w/${$workspaceStore}/job_helpers/upload_s3_file?${params.toString()}`, true);
             xhr?.setRequestHeader('Content-Type', 'application/octet-stream');
@@ -182,7 +183,7 @@ onDestroy(() => {
 });
 </script>
 
-<div class="w-full h-full p-2 flex flex-col">
+<div class="w-full h-full p-0 flex flex-col">
 	{#if $fileUploads.length > 0 && !forceDisplayUploads}
 		<div class="border rounded-md flex flex-col gap-1 divide-y h-full w-full p-1">
 			<div class="flex h-full overflow-y-auto flex-col">

package/package/components/common/languageIcons/LanguageIcon.svelte

@@ -12,6 +12,7 @@ import GraphqlIcon from '../../icons/GraphqlIcon.svelte';
 import MSSqlServerIcon from '../../icons/MSSqlServerIcon.svelte';
 import BunIcon from '../../icons/BunIcon.svelte';
 import DenoIcon from '../../icons/DenoIcon.svelte';
+import PHPIcon from '../../icons/PHPIcon.svelte';
 export let lang;
 export let width = 30;
 export let height = 30;
@@ -29,7 +30,8 @@ const languageLabel = {
     snowflake: 'Snowflake',
     mysql: 'MySQL',
     mssql: 'MS SQL Server',
-    bun: 'TypeScript'
+    bun: 'TypeScript',
+    php: 'PHP'
 };
 const langToComponent = {
     go: GoIcon,
@@ -49,7 +51,8 @@ const langToComponent = {
     powershell: PowershellIcon,
     postgresql: PostgresIcon,
     nativets: RestIcon,
-    graphql: GraphqlIcon
+    graphql: GraphqlIcon,
+    php: PHPIcon
 };
 let subIconScale = width === 30 ? 0.6 : 0.8;
 </script>

package/package/components/common/modal/Modal.svelte

@@ -8,6 +8,7 @@ export let open = false;
 let c = '';
 export { c as class };
 export let style = '';
+export let cancelText = undefined;
 const dispatch = createEventDispatcher();
 function onKeyDown(event) {
     if (open) {
@@ -83,7 +84,9 @@ function fadeFast(node) {
 							color="light"
 							size="sm"
 						>
-							<span class="inline-flex gap-2">Cancel <Badge color="dark-gray">Escape</Badge></span>
+							<span class="inline-flex gap-2"
+								>{cancelText ?? 'Cancel'}<Badge color="dark-gray">Escape</Badge></span
+							>
 						</Button>
 					</div>
 				</div>

package/package/components/common/modal/Modal.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         open?: boolean | undefined;
         class?: string | undefined;
         style?: string | undefined;
+        cancelText?: string | undefined;
     };
     events: {
         click: MouseEvent;

package/package/components/common/popup/Popup.svelte

@@ -10,7 +10,7 @@ const [floatingRef, floatingContent] = createFloatingActions(floatingConfig);
 export let blockOpen = false;
 </script>
 
-<Popover on:close>
+<Popover on:close class="leading-none">
 	<PopoverButton>
 		<div use:floatingRef>
 			<slot name="button" />

package/package/components/common/table/RowIcon.svelte

@@ -4,10 +4,10 @@ import { Code2, LayoutDashboard } from 'lucide-svelte';
 export let kind;
 export let href = '#';
 const color = {
-    script: 'bg-blue-50 border-blue-200 dark:bg-transparent dark:border-blue-900',
-    flow: 'bg-[#f0fdfa] border-[#99f6e4] dark:bg-transparent dark:border-teal-900',
-    app: 'bg-[#fff7ed] border-orange-300 dark:bg-transparent dark:border-orange-900',
-    raw_app: 'bg-[#fff7ed] border-orange-300 dark:bg-transparent dark:border-orange-900'
+    script: 'bg-blue-50 border-blue-200 dark:bg-blue-800/20 dark:border-blue-500/70',
+    flow: 'bg-[#f0fdfa] border-[#99f6e4] dark:bg-teal-800/20 dark:border-teal-600/70',
+    app: 'bg-[#fff7ed] border-orange-300 dark:bg-orange-800/20 dark:border-orange-400/70',
+    raw_app: 'bg-[#fff7ed] border-orange-300 dark:bg-orange-800/20 dark:border-orange-400/70'
 }[kind];
 const iconColor = {
     script: '#60A5FA',

package/package/components/common/table/ScriptRow.svelte

@@ -15,6 +15,8 @@ import { LanguageIcon } from '../languageIcons';
 import { Archive, Calendar, Code, Copy, Eye, FileUp, GitFork, List, Pen, Share, Trash, History } from 'lucide-svelte';
 import ScriptVersionHistory from '../../ScriptVersionHistory.svelte';
 import { Drawer, DrawerContent } from '..';
+import NoMainFuncBadge from '../../NoMainFuncBadge.svelte';
+import Tooltip from '../../Tooltip.svelte';
 export let script;
 export let marked;
 export let starred;
@@ -83,6 +85,9 @@ let versionsDrawerOpen = false;
 			<Badge color="red" baseClass="border">archived</Badge>
 		{/if}
 
+		{#if script.no_main_func}
+			<NoMainFuncBadge />
+		{/if}
 		<SharedBadge canWrite={script.canWrite} extraPerms={script.extra_perms} />
 		<DraftBadge has_draft={script.has_draft} draft_only={script.draft_only} />
 		<div class="w-8 center-center">
@@ -93,7 +98,13 @@ let versionsDrawerOpen = false;
 	<svelte:fragment slot="actions">
 		<span class="hidden md:inline-flex gap-x-1">
 			{#if !$userStore?.operator}
-				{#if script.canWrite && !script.archived}
+				{#if script.use_codebase}
+					<Badge
+						>bundle<Tooltip
+							>This script is deployed as a bundle and can only be deployed from the CLI for now</Tooltip
+						></Badge
+					>
+				{:else if script.canWrite && !script.archived}
 					<div>
 						<Button
 							color="light"

package/package/components/common/table/ScriptRow.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
     props: {
         script: Script & {
             canWrite: boolean;
+            use_codebase: boolean;
         };
         marked: string | undefined;
         starred: boolean;

package/package/components/common/toggleButton-v2/ToggleButtonGroup.svelte

@@ -8,6 +8,7 @@ import { twMerge } from 'tailwind-merge';
 export let selected;
 export let noWFull = false;
 export let disabled = false;
+export let tabListClass = '';
 const dispatch = createEventDispatcher();
 const selectedContent = writable(selected);
 function setSelected(selected) {
@@ -32,7 +33,9 @@ setContext('ToggleButtonGroup', {
 		$$props.class
 	)}
 >
-	<TabList class="flex bg-surface-secondary rounded-md p-0.5 gap-1 h-full ">
+	<TabList
+		class={twMerge('flex bg-surface-secondary rounded-md p-0.5 gap-1 h-full ', tabListClass)}
+	>
 		<slot />
 	</TabList>
 </TabGroup>

package/package/components/common/toggleButton-v2/ToggleButtonGroup.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         selected: any;
         noWFull?: boolean | undefined;
         disabled?: boolean | undefined;
+        tabListClass?: string | undefined;
     };
     events: {
         selected: CustomEvent<any>;

package/package/components/common/toggleButton-v2/ToggleButtonMore.svelte

@@ -0,0 +1,45 @@
+<script>import { getContext } from 'svelte';
+import { Tab } from '@rgossiaux/svelte-headlessui';
+import { twMerge } from 'tailwind-merge';
+import Popover from '../../Popover.svelte';
+import DropdownV2 from '../../DropdownV2.svelte';
+export let disabled = false;
+export let small = false;
+export let light = false;
+export let id = undefined;
+export let togglableItems;
+const { select, selected } = getContext('ToggleButtonGroup');
+let items = togglableItems.map((i) => ({ displayName: i.label, action: () => select(i.value) }));
+function isAnOptionSelected(selected) {
+    return togglableItems.some((i) => i.value === selected);
+}
+</script>
+
+<Popover
+	disablePopup={true}
+	notClickable
+	class={twMerge('flex', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}
+	disappearTimeout={0}
+>
+	<div {id} class="flex">
+		{#if isAnOptionSelected($selected)}
+			<Tab
+				{disabled}
+				class={twMerge(
+					' rounded-md transition-all text-xs flex gap-1 flex-row items-center',
+					small ? 'px-1.5 py-0.5 text-2xs' : 'px-2 py-1',
+					light ? 'font-medium' : '',
+					isAnOptionSelected($selected)
+						? 'bg-surface shadow-md'
+						: 'bg-surface-secondary hover:bg-surface-hover',
+					$$props.class
+				)}
+			>
+				{togglableItems.find((i) => i.value === $selected)?.label}
+			</Tab>
+		{/if}
+		<div class="flex items-center">
+			<DropdownV2 {items} />
+		</div>
+	</div>
+</Popover>

package/package/components/common/toggleButton-v2/ToggleButtonMore.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        disabled?: boolean | undefined;
+        small?: boolean | undefined;
+        light?: boolean | undefined;
+        id?: string | undefined;
+        togglableItems: {
+            label: string;
+            value: string;
+        }[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToggleButtonMoreProps = typeof __propDef.props;
+export type ToggleButtonMoreEvents = typeof __propDef.events;
+export type ToggleButtonMoreSlots = typeof __propDef.slots;
+export default class ToggleButtonMore extends SvelteComponent<ToggleButtonMoreProps, ToggleButtonMoreEvents, ToggleButtonMoreSlots> {
+}
+export {};

package/package/components/common/waitTimeWarning/WaitTimeWarning.svelte

@@ -0,0 +1,79 @@
+<script>import Popover from '../../Popover.svelte';
+import { msToSec } from '../../../utils';
+import { AlertTriangle, Hourglass } from 'lucide-svelte';
+import Badge from '../badge/Badge.svelte';
+export let self_wait_time_ms = undefined;
+export let aggregate_wait_time_ms = undefined;
+export let variant = 'icon';
+$: total_wait = (self_wait_time_ms ?? 0) + (aggregate_wait_time_ms ?? 0);
+function classFromColorName(color) {
+    const colors = {
+        gray: 'text-gray-400 dark:text-gray-300',
+        red: 'text-red-400 dark:text-red-500',
+        yellow: 'text-yellow-500 dark:text-yellow-500',
+        orange: 'text-orange-500 dark:text-orange-500'
+    };
+    return colors[color];
+}
+function waitColorTresholds(waiting_time_ms) {
+    if (waiting_time_ms > 300_000) {
+        return 'red';
+    }
+    if (waiting_time_ms > 30_000) {
+        return 'orange';
+    }
+    if (waiting_time_ms > 5_000) {
+        return 'yellow';
+    }
+    return 'gray';
+}
+</script>
+
+<Popover notClickable>
+	<svelte:fragment slot="text">
+		<div class="mb-5">
+			{#if self_wait_time_ms != undefined}
+				<div>
+					Time spent waiting for an executor: <span class="font-bold"
+						>{msToSec(self_wait_time_ms)}s</span
+					>
+				</div>
+			{/if}
+			{#if aggregate_wait_time_ms != undefined}
+				<div>
+					Child jobs' time spent waiting for an executor: <span class="font-bold"
+						>{msToSec(aggregate_wait_time_ms)}s</span
+					>
+				</div>
+			{/if}
+		</div>
+		{#if self_wait_time_ms != undefined && aggregate_wait_time_ms != undefined}
+			The top level job and its children (e.g. flow steps) had to wait a for an unexpected amount of
+			time before starting. The first value is the top level job's time spent waiting for a worker
+			and the second is the cumulative wait time for its children.
+		{:else if self_wait_time_ms}
+			<div> This job spent an unexpected amount of time waiting for a worker before starting. </div>
+		{:else if aggregate_wait_time_ms != undefined}
+			<div>
+				This job's children spent an unexpected amount of time waiting for a worker before starting.
+				The value is an aggregate of their individual waiting times.
+			</div>
+		{/if}
+		<div> In a healthy queue, jobs are expected to start in under 50ms. </div>
+	</svelte:fragment>
+	{#if variant === 'icon'}
+		<Hourglass class={classFromColorName(waitColorTresholds(total_wait))} size={14} />
+	{:else if variant === 'badge'}
+		<Badge large icon={{ icon: Hourglass, position: 'left' }} color={waitColorTresholds(total_wait)}
+			>{msToSec(total_wait)}s</Badge
+		>
+	{:else if variant === 'badge-self-wait'}
+		{#if self_wait_time_ms}
+			<Badge
+				color={waitColorTresholds(self_wait_time_ms)}>+{msToSec(self_wait_time_ms)}s</Badge
+			>
+		{/if}
+	{:else if variant === 'alert'}
+		<AlertTriangle class={classFromColorName(waitColorTresholds(total_wait))} size={14} />
+	{/if}
+</Popover>

package/package/components/common/waitTimeWarning/WaitTimeWarning.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        self_wait_time_ms?: number | undefined;
+        aggregate_wait_time_ms?: number | undefined;
+        variant?: "alert" | "icon" | "badge" | "badge-self-wait" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type WaitTimeWarningProps = typeof __propDef.props;
+export type WaitTimeWarningEvents = typeof __propDef.events;
+export type WaitTimeWarningSlots = typeof __propDef.slots;
+export default class WaitTimeWarning extends SvelteComponent<WaitTimeWarningProps, WaitTimeWarningEvents, WaitTimeWarningSlots> {
+}
+export {};