windmill-components 1.493.10 → 1.501.4

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

@@ -2,16 +2,13 @@
 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;
-export let shouldUsePortal = true;
-export let offset = 0;
-export let preventEscape = false;
-let disposable = undefined;
-$: durationMs = duration * 1000;
+import { chatState } from '../../copilot/chat/sharedChatState.svelte';
+let { open = $bindable(undefined), duration = 0.3, placement = 'right', size = '600px', alwaysOpen = false, shouldUsePortal = true, offset = 0, preventEscape = false, disableChatOffset = false, class: clazz = '', positionClass = undefined, children } = $props();
+if (open === undefined) {
+    open = false;
+}
+let disposable = $state(undefined);
+let durationMs = $derived(duration * 1000);
 export function toggleDrawer() {
     disposable?.toggleDrawer();
 }
@@ -29,7 +26,7 @@ export function isOpen() {
 }
 let mounted = false;
 const dispatch = createEventDispatcher();
-$: style = `--duration: ${duration}s; --size: ${size};`;
+let style = $derived(`--duration: ${duration}s; --size: ${size};`);
 function scrollLock(open) {
     if (BROWSER) {
         const body = document.querySelector('body');
@@ -38,42 +35,52 @@ function scrollLock(open) {
         }
     }
 }
-$: scrollLock(open);
-$: open ? openDrawer() : closeDrawer();
-let timeout = true;
-$: !open ? setTimeout(() => (timeout = true), durationMs) : (timeout = false);
+$effect(() => {
+    scrollLock(open ?? false);
+});
+$effect(() => {
+    open ? openDrawer() : closeDrawer();
+});
+let timeout = $state(true);
+$effect(() => {
+    !open ? setTimeout(() => (timeout = true), durationMs) : (timeout = false);
+});
 onMount(() => {
     mounted = true;
 });
+const children_render = $derived(children);
+const aiChatOpen = $derived(chatState.size > 0);
 </script>
 
 <ConditionalPortal condition={shouldUsePortal}>
 	<Disposable
 		initialOffset={offset}
-		let:handleClickAway
-		let:zIndex
 		bind:open
 		bind:this={disposable}
 		on:open
 		on:close
 		{preventEscape}
 	>
-		<aside
-			class="drawer windmill-app windmill-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>
-			<div class="panel {placement} {$$props.positionClass}" class:size>
-				{#if open || !timeout || alwaysOpen}
-					<slot {open} />
-				{/if}
-			</div>
-		</aside>
+		{#snippet children({ handleClickAway, zIndex })}
+			<aside
+				class="drawer windmill-app windmill-drawer {clazz ?? ''} {positionClass ?? ''} {aiChatOpen
+					? 'respect-global-chat'
+					: ''}"
+				class:open
+				class:close={!open && timeout}
+				class:global-chat-open={aiChatOpen}
+				style={`${style}; --zIndex: ${zIndex}; --adjusted-offset: calc(${aiChatOpen && placement === 'right' && !disableChatOffset ? chatState.size : 0}% + 4px)`}
+			>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div class="overlay {positionClass ?? ''}" onclick={handleClickAway}></div>
+				<div class="panel {placement} {positionClass}" class:size>
+					{#if open || !timeout || alwaysOpen}
+						{@render children_render?.({ open })}
+					{/if}
+				</div>
+			</aside>
+		{/snippet}
 	</Disposable>
 </ConditionalPortal>
 
@@ -92,8 +99,9 @@ onMount(() => {
 
 	.drawer.open {
 		height: 100%;
-		width: 100%;
 		z-index: var(--zIndex);
+		right: 0;
+		width: calc(100% - var(--adjusted-offset));
 		transition: z-index var(--duration) step-start;
 		pointer-events: auto;
 	}
@@ -110,6 +118,12 @@ onMount(() => {
 		transition: opacity var(--duration) ease;
 	}
 
+	.drawer.respect-global-chat.global-chat-open > .overlay {
+		width: 100%;
+		right: var(--adjusted-offset);
+		left: auto;
+	}
+
 	.drawer.open > .overlay {
 		opacity: 1;
 	}
@@ -125,7 +139,9 @@ onMount(() => {
 		--tw-bg-opacity: 1;
 		background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
 		z-index: 3;
-		transition: transform var(--duration) ease, max-width var(--duration) ease,
+		transition:
+			transform var(--duration) ease,
+			max-width var(--duration) ease,
 			max-height var(--duration) ease;
 		height: 100%;
 	}
@@ -140,6 +156,11 @@ onMount(() => {
 		transform: translate(100%, 0);
 	}
 
+	.drawer.respect-global-chat.global-chat-open > .panel.right {
+		right: var(--adjusted-offset);
+		width: calc(100vw - var(--adjusted-offset));
+	}
+
 	.panel.top {
 		top: 0;
 		transform: translate(0, -100%);

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

@@ -1,3 +1,17 @@
+interface Props {
+    open?: boolean;
+    duration?: number;
+    placement?: string;
+    size?: string;
+    alwaysOpen?: boolean;
+    shouldUsePortal?: boolean;
+    offset?: number;
+    preventEscape?: boolean;
+    disableChatOffset?: boolean;
+    class?: string | undefined;
+    positionClass?: string | undefined;
+    children?: import('svelte').Snippet<[any]>;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,43 +25,16 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Drawer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    open?: boolean | undefined;
-    duration?: number | undefined;
-    placement?: string | undefined;
-    size?: string | undefined;
-    alwaysOpen?: boolean | undefined;
-    shouldUsePortal?: boolean | undefined;
-    offset?: number | undefined;
-    preventEscape?: boolean | undefined;
-    toggleDrawer?: (() => void) | undefined;
-    openDrawer?: (() => void) | undefined;
-    closeDrawer?: (() => void) | undefined;
-    isOpen?: (() => boolean) | undefined;
-}, {
-    default: {
-        open: boolean;
-    };
-}>, {
+declare const Drawer: $$__sveltets_2_IsomorphicComponent<Props, {
     open: CustomEvent<any>;
     close: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {
-        open: boolean;
-    };
-}, {
+}, {}, {
     toggleDrawer: () => void;
     openDrawer: () => void;
     closeDrawer: () => void;
-    isOpen: () => boolean;
-}, string>;
+    isOpen: () => boolean | undefined;
+}, "open">;
 type Drawer = InstanceType<typeof Drawer>;
 export default Drawer;

package/package/components/common/drawer/DrawerContent.svelte

@@ -1,31 +1,36 @@
 <script lang="ts">import Tooltip from '../../Tooltip.svelte';
 import { classNames } from '../../../utils';
 import CloseButton from '../CloseButton.svelte';
-export let title = undefined;
-export let overflow_y = true;
-export let noPadding = false;
-export let forceOverflowVisible = false;
-export let tooltip = '';
-export let documentationLink = undefined;
-export let CloseIcon = undefined;
-export let fullScreen = true;
+import { triggerableByAI } from '../../../actions/triggerableByAI.svelte';
+import { createEventDispatcher } from 'svelte';
+let { aiId, aiDescription, title = undefined, overflow_y = true, noPadding = false, forceOverflowVisible = false, tooltip = '', documentationLink = undefined, CloseIcon = undefined, fullScreen = true, actions, children } = $props();
+const dispatch = createEventDispatcher();
 </script>
 
 <div class={classNames('flex flex-col divide-y', fullScreen ? 'h-screen max-h-screen' : 'h-full')}>
 	<div class="flex justify-between w-full items-center px-4 py-2 gap-2">
 		<div class="flex items-center gap-2 w-full truncate">
-			<CloseButton on:close Icon={CloseIcon} />
-
+			<div
+				use:triggerableByAI={{
+					id: `close-${aiId}`,
+					description: `Close ${aiDescription}`,
+					callback: () => {
+						dispatch('close')
+					}
+				}}
+			>
+				<CloseButton on:close Icon={CloseIcon} />
+			</div>
 			<span class="font-semibold truncate text-primary !text-lg max-w-sm"
 				>{title ?? ''}
 				{#if tooltip != '' || documentationLink}
-					<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
+					<Tooltip {documentationLink}>{tooltip}</Tooltip>
 				{/if}</span
 			>
 		</div>
-		{#if $$slots.actions}
+		{#if actions}
 			<div class="flex gap-2 items-center justify-end">
-				<slot name="actions" />
+				{@render actions?.()}
 			</div>
 		{/if}
 	</div>
@@ -38,6 +43,6 @@ export let fullScreen = true;
 		)}
 		class:overflow-y-auto={overflow_y}
 	>
-		<slot />
+		{@render children?.()}
 	</div>
 </div>

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

@@ -1,3 +1,17 @@
+interface Props {
+    aiId?: string | undefined;
+    aiDescription?: string | undefined;
+    title?: string | undefined;
+    overflow_y?: boolean;
+    noPadding?: boolean;
+    forceOverflowVisible?: boolean;
+    tooltip?: string;
+    documentationLink?: string | undefined;
+    CloseIcon?: any | undefined;
+    fullScreen?: boolean;
+    actions?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,30 +25,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const DrawerContent: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    title?: string | undefined;
-    overflow_y?: boolean;
-    noPadding?: boolean;
-    forceOverflowVisible?: boolean;
-    tooltip?: string;
-    documentationLink?: string | undefined;
-    CloseIcon?: any | undefined;
-    fullScreen?: boolean;
-}, {
-    actions: {};
-    default: {};
-}>, {
+declare const DrawerContent: $$__sveltets_2_IsomorphicComponent<Props, {
     close: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {
-    actions: {};
-    default: {};
-}, {}, string>;
+}, {}, {}, "">;
 type DrawerContent = InstanceType<typeof DrawerContent>;
 export default DrawerContent;

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

@@ -19,5 +19,7 @@ duration-200 rounded-lg p-1 gap-2"
 	download={s3object?.s3.split('/').pop() ?? 'unnamed_download.file'}
 >
 	<Download />
-	<span>s3://{s3object.s3} {s3object.storage ? ` (${s3object.storage})` : ''}</span>
+	<span>
+		{s3object.storage ? `s3://${s3object.storage}/${s3object.s3}` : `s3:///${s3object.s3}`}
+	</span>
 </a>

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

@@ -19,6 +19,12 @@ export let folderOnly = false;
 const dispatch = createEventDispatcher();
 let input;
 export let files = undefined;
+let pointerStartX = 0;
+let pointerStartY = 0;
+function handlePointerDown(e) {
+    pointerStartX = e.clientX;
+    pointerStartY = e.clientY;
+}
 async function onChange(fileList) {
     if (!fileList || !fileList.length) {
         files = undefined;
@@ -158,14 +164,24 @@ export function clearFiles() {
 
 <button
 	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-300 hover:bg-blue-50 dark:hover:bg-frost-900  
+		`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-300 hover:bg-blue-50 dark:hover:bg-frost-900
 		duration-200 rounded-component p-1`,
 		c
 	)}
 	on:dragover={handleDragOver}
 	on:drop={handleDrop}
+	on:pointerdown={handlePointerDown}
+	on:click={(e) => {
+		const deltaX = Math.abs(e.clientX - pointerStartX)
+		const deltaY = Math.abs(e.clientY - pointerStartY)
+		if (deltaX > 5 || deltaY > 5) {
+			e.preventDefault()
+			e.stopPropagation()
+			return
+		}
+	}}
 	{style}
 	{disabled}
 >
@@ -217,7 +233,7 @@ export function clearFiles() {
 		{multiple}
 		{...$$restProps}
 	/>
-	{#if defaultFile}
+	{#if defaultFile && (!Array.isArray(defaultFile) || defaultFile.length > 0)}
 		<div class="w-full border-dashed border-t-2 text-2xs pt-1 text-tertiary mt-2">
 			Default file: <span class="text-blue-500">{defaultFile}</span>
 		</div>

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

@@ -28,7 +28,7 @@ declare const FileInput: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Props
     iconSize?: number | undefined;
     returnFileNames?: boolean | undefined;
     submittedText?: string | undefined | undefined;
-    defaultFile?: string | undefined | undefined;
+    defaultFile?: string | string[] | undefined | undefined;
     disabled?: boolean | undefined | undefined;
     folderOnly?: boolean | undefined;
     files?: (File & {

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

@@ -9,47 +9,40 @@ import { Ban, CheckCheck, FileWarning, Files, RefreshCcw, Trash } from 'lucide-s
 import { twMerge } from 'tailwind-merge';
 import { createEventDispatcher, onDestroy } from 'svelte';
 import { emptyString } from '../../../utils';
-export let acceptedFileTypes = ['*'];
-export let allowMultiple = true;
-export let allowDelete = true;
-export let folderOnly = false;
-export let containerText = folderOnly
+let { acceptedFileTypes = ['*'], allowMultiple = true, allowDelete = true, folderOnly = false, containerText = folderOnly
     ? 'Drag and drop a folder here or click to browse'
     : allowMultiple
         ? 'Drag and drop files here or click to browse'
-        : 'Drag and drop a file here or click to browse';
-export let customResourcePath = undefined;
-export let customResourceType = undefined; // when customResourcePath is provided, this should be provided as well. Will default to S3 if not
-export let customClass = '';
-export let customStyle = '';
-export let randomFileKey = false;
-export let pathTransformer = undefined; // function taking as input {file: File} and returning a string
-export let forceDisplayUploads = false;
-export let defaultValue = undefined;
-export let workspace = undefined;
-export let fileUploads = writable([]);
-export let appPath = undefined;
-export let disabled = false;
-export let iconSize = undefined;
-export let initialValue = undefined;
+        : 'Drag and drop a file here or click to browse', customResourcePath = undefined, customResourceType = undefined, customClass = '', customStyle = '', randomFileKey = false, pathTransformer = undefined, forceDisplayUploads = $bindable(false), defaultValue = undefined, workspace = undefined, fileUploads = writable([]), appPath = undefined, disabled = false, iconSize = undefined, initialValue = undefined, computeForceViewerPolicies = undefined } = $props();
+const dispatch = createEventDispatcher();
+let initialS3 = $derived(Array.isArray(initialValue)
+    ? initialValue?.map((v) => v.s3)
+    : initialValue?.s3
+        ? [initialValue?.s3]
+        : undefined);
 init();
 function init() {
-    if (initialValue?.s3) {
-        if (!$fileUploads.find((fileUpload) => fileUpload.path === initialValue?.s3)) {
-            $fileUploads = [
-                ...$fileUploads,
-                {
-                    name: initialValue.filename,
-                    size: 0,
-                    progress: 100,
-                    path: initialValue?.s3
-                }
-            ];
+    if (initialS3) {
+        function transform(initialValue) {
+            return {
+                name: initialValue.filename,
+                size: 0,
+                progress: 100,
+                path: initialValue?.s3
+            };
+        }
+        for (const s3 of initialS3) {
+            if (!$fileUploads.find((fileUpload) => fileUpload.path === s3)) {
+                let initialFileUploads = initialValue
+                    ? Array.isArray(initialValue)
+                        ? initialValue.map(transform)
+                        : [transform(initialValue)]
+                    : [];
+                $fileUploads = [...$fileUploads, ...initialFileUploads];
+            }
         }
     }
 }
-export let computeForceViewerPolicies = undefined;
-const dispatch = createEventDispatcher();
 async function handleChange(files) {
     if (folderOnly) {
         uniqueFolderPrefix = getRandomFolderPrefix();
@@ -487,10 +480,10 @@ onDestroy(() => {
 			{containerText}{#if disabled}<br />(Disabled){/if}
 		</FileInput>
 	{/if}
-	{#if initialValue?.s3 && $fileUploads.length == 0}
+	{#if initialS3 && initialS3.length > 0 && $fileUploads.length == 0}
 		<div class="flex flex-row gap-1 items-center p-1">
 			<span class="text-sm">
-				File currently selected: {initialValue?.s3}
+				File currently selected: {initialS3?.join(', ')}
 			</span>
 		</div>
 	{/if}

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

@@ -1,56 +1,61 @@
 import { type Writable } from 'svelte/store';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FileUpload: $$__sveltets_2_IsomorphicComponent<{
+type FileUploadData = {
+    name: string;
+    size: number;
+    progress: number;
+    cancelled?: boolean;
+    errorMessage?: string;
+    path?: string;
+    file?: File;
+    deleteToken?: string;
+};
+interface Props {
     acceptedFileTypes?: string[] | undefined;
     allowMultiple?: boolean;
     allowDelete?: boolean;
     folderOnly?: boolean;
     containerText?: string;
     customResourcePath?: string | undefined;
-    customResourceType?: "s3" | "azure_blob" | undefined;
+    customResourceType?: 's3' | 'azure_blob' | undefined;
     customClass?: string;
     customStyle?: string;
     randomFileKey?: boolean;
     pathTransformer?: any;
     forceDisplayUploads?: boolean;
-    defaultValue?: string | undefined;
+    defaultValue?: string | string[] | undefined;
     workspace?: string | undefined;
-    fileUploads?: Writable<{
-        name: string;
-        size: number;
-        progress: number;
-        cancelled?: boolean;
-        errorMessage?: string;
-        path?: string;
-        file?: File;
-        deleteToken?: string;
-    }[]>;
+    fileUploads?: Writable<FileUploadData[]>;
     appPath?: string | undefined;
     disabled?: boolean;
     iconSize?: number | undefined;
     initialValue?: {
         s3: string;
         filename: string;
-    } | undefined;
+    } | {
+        s3: string;
+        filename: string;
+    }[] | undefined;
     computeForceViewerPolicies?: (() => {
         allowed_resources: string[];
         allow_user_resources: boolean;
         allow_workspace_resource: boolean;
         file_key_regex: string;
     } | undefined) | undefined;
-}, {
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FileUpload: $$__sveltets_2_IsomorphicComponent<Props, {
     addition: CustomEvent<{
         path?: string;
         filename?: string;
@@ -60,6 +65,6 @@ declare const FileUpload: $$__sveltets_2_IsomorphicComponent<{
     }>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "forceDisplayUploads">;
 type FileUpload = InstanceType<typeof FileUpload>;
 export default FileUpload;

package/package/components/common/kbd/Kbd.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">import { isMac } from '../../../utils';
 import { twMerge } from 'tailwind-merge';
-export let kbdClass = '';
-export let small = false;
-export let isModifier = false;
+let { kbdClass = $bindable(''), small = false, isModifier = false, class: classNames = '', children } = $props();
 if (small) {
     kbdClass = twMerge(kbdClass, '!text-[10px]  px-1', isModifier && isMac() ? '!text-lg ' : 'text-xs', 'leading-none');
 }
@@ -13,12 +11,12 @@ else {
 
 <span
 	class={twMerge(
-		$$props.class,
+		classNames,
 		small ? 'h-4  center-center' : '',
 		'ml-0.5 rounded border bg-surface-secondary text-primary shadow-sm font-light transition-all group-hover:border-primary-500 group-hover:text-primary-inverse'
 	)}
 >
 	<kbd class={kbdClass}>
-		<slot />
+		{@render children?.()}
 	</kbd>
 </span>

package/package/components/common/kbd/Kbd.svelte.d.ts

@@ -1,32 +1,10 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    kbdClass?: string;
+    small?: boolean;
+    isModifier?: boolean;
+    class?: string;
+    children?: import('svelte').Snippet;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Kbd: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    kbdClass?: string | undefined;
-    small?: boolean | undefined;
-    isModifier?: boolean | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Kbd = InstanceType<typeof Kbd>;
+declare const Kbd: import("svelte").Component<Props, {}, "kbdClass">;
+type Kbd = ReturnType<typeof Kbd>;
 export default Kbd;