windmill-components 1.550.0 → 1.555.0

package/package/components/apps/editor/AppEditorHeaderDeployInitialDraft.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">import { Alert } from '../../common';
+import Path from '../../Path.svelte';
+let { summary, appPath, pathError = $bindable(), newEditedPath = $bindable() } = $props();
+let path = $state(undefined);
+let dirtyPath = $state(false);
+</script>
+
+<Alert bgClass="mb-4" title="Require path" type="info">
+	Choose a path to save the initial draft of the app.
+</Alert>
+<h3>Summary</h3>
+<div class="w-full pt-2">
+	<!-- svelte-ignore a11y_autofocus -->
+	<input
+		autofocus
+		type="text"
+		placeholder="App summary"
+		class="text-sm w-full font-semibold"
+		onkeydown={(e) => {
+			e.stopPropagation()
+		}}
+		bind:value={$summary}
+		onkeyup={() => {
+			if ($appPath == '' && $summary?.length > 0 && !dirtyPath) {
+				path?.setName(
+					$summary
+						.toLowerCase()
+						.replace(/[^a-z0-9_]/g, '_')
+						.replace(/-+/g, '_')
+						.replace(/^-|-$/g, '')
+				)
+			}
+		}}
+	/>
+</div>
+<div class="py-2"></div>
+<Path
+	autofocus={false}
+	bind:this={path}
+	bind:error={pathError}
+	bind:path={newEditedPath}
+	bind:dirty={dirtyPath}
+	initialPath=""
+	namePlaceholder="app"
+	kind="app"
+/>
+<div class="py-4"></div>

package/package/components/apps/editor/AppEditorHeaderDeployInitialDraft.svelte.d.ts

@@ -0,0 +1,8 @@
+declare const AppEditorHeaderDeployInitialDraft: import("svelte").Component<{
+    summary: any;
+    appPath: any;
+    pathError?: any;
+    newEditedPath?: any;
+}, {}, "pathError" | "newEditedPath">;
+type AppEditorHeaderDeployInitialDraft = ReturnType<typeof AppEditorHeaderDeployInitialDraft>;
+export default AppEditorHeaderDeployInitialDraft;

package/package/components/apps/editor/GridEditor.svelte

@@ -74,7 +74,6 @@ export function moveComponentBetweenSubgrids(componentId, subgrid, position) {
 }
 </script>
 
-<input />
 <div class="w-full z-[1000] overflow-visible h-full">
 	<div class={$app.hideLegacyTopBar ? 'hidden' : ''}>
 		<div
@@ -113,7 +112,13 @@ export function moveComponentBetweenSubgrids(componentId, subgrid, position) {
 			<div class="flex text-2xs gap-8 items-center">
 				<div class="py-2 pr-2 text-secondary flex gap-1 items-center">
 					Hide bar on view
-					<Toggle size="xs" bind:checked={$app.norefreshbar} />
+					<Toggle
+						size="xs"
+						bind:checked={
+							() => $app.norefreshbar ?? false,
+							(v) => ($app.norefreshbar !== undefined || v) && ($app.norefreshbar = v)
+						}
+					/>
 				</div>
 				<div>
 					{policy.on_behalf_of ? `Author ${policy.on_behalf_of_email}` : ''}

package/package/components/apps/editor/appDeploy.svelte.d.ts

@@ -0,0 +1 @@
+export declare function computeSecretUrl(secretUrl: string): string;

package/package/components/apps/editor/appDeploy.svelte.js

@@ -0,0 +1,6 @@
+import { base } from "../../../base";
+import { workspaceStore } from "../../../stores";
+import { get } from "svelte/store";
+export function computeSecretUrl(secretUrl) {
+    return `${window.location.origin}${base}/public/${get(workspaceStore)}/${secretUrl}`;
+}

package/package/components/apps/editor/appUtils.d.ts

@@ -124,4 +124,5 @@ export type GridShadow = {
 };
 export declare function areShadowsTheSame(shadow1: GridShadow | undefined, shadow2: GridShadow | undefined): boolean;
 export declare function animateTo(start: number, end: number, onUpdate: (newValue: number) => void): void;
+export declare function emptyApp(): App;
 export {};

package/package/components/apps/editor/appUtils.js

@@ -1,4 +1,4 @@
-import { ccomponents, components, getRecommendedDimensionsByComponent } from './component';
+import { ccomponents, components, getRecommendedDimensionsByComponent, presets, processDimension } from './component';
 import { gridColumns } from '../gridUtils';
 import { allItems, processSubcomponents } from '../utils';
 import { get } from 'svelte/store';
@@ -7,6 +7,7 @@ import { sendUserToast } from '../../../toast';
 import { getNextId } from '../../flows/idUtils';
 import { enterpriseLicense } from '../../../stores';
 import gridHelp from '../svelte-grid/utils/helper';
+import { DEFAULT_THEME } from './componentsPanel/themeUtils';
 export function allItemsWithLocation(grid, subgrids) {
     const gridItems = grid.map((x, i) => ({
         location: {
@@ -968,3 +969,31 @@ export function animateTo(start, end, onUpdate) {
 function easeInOut(t) {
     return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
 }
+export function emptyApp() {
+    let value = {
+        grid: [],
+        fullscreen: false,
+        unusedInlineScripts: [],
+        hiddenInlineScripts: [],
+        theme: {
+            type: 'path',
+            path: DEFAULT_THEME
+        }
+    };
+    const preset = presets['topbarcomponent'];
+    const id = insertNewGridItem(value, appComponentFromType(preset.targetComponent, preset.configuration, undefined, {
+        customCss: {
+            container: {
+                class: '!p-0',
+                style: ''
+            }
+        }
+    }), undefined, undefined, 'topbar', { x: 0, y: 0 }, {
+        3: processDimension(preset.dims, 3),
+        12: processDimension(preset.dims, 12)
+    }, true, true);
+    setUpTopBarComponentContent(id, value);
+    value.hideLegacyTopBar = true;
+    value.mobileViewOnSmallerScreens = false;
+    return value;
+}

package/package/components/apps/editor/component/ComponentNavigation.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">import { getContext } from 'svelte';
 import { handleEscape, handlePaste, handleArrowUp, handleCut, handleCopy, down, right, left } from './componentCallbacks.svelte';
+import { isCurrentlyInTutorial } from '../../../../stores';
 const { history, movingcomponents, jobsDrawerOpen, runnableJobEditorPanel } = getContext('AppEditorContext');
 const { app, selectedComponent, focusedGrid, componentControl } = getContext('AppViewerContext');
 const ctx = {
@@ -17,7 +18,8 @@ function keydown(event) {
     let classes = event.target?.['className'];
     if ((typeof classes === 'string' && classes.includes('inputarea')) ||
         ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName) ||
-        $runnableJobEditorPanel.focused) {
+        $runnableJobEditorPanel.focused ||
+        isCurrentlyInTutorial.val) {
         return;
     }
     switch (event.key) {

package/package/components/apps/editor/component/components.d.ts

@@ -879,7 +879,7 @@ export declare const components: {
                                 readonly tooltip: "The message of the toast to display";
                                 readonly fieldType: "text";
                                 readonly type: "static";
-                                readonly value: "An error occured";
+                                readonly value: "An error occurred";
                                 readonly placeholder: "Hello there";
                                 readonly onDemandOnly: true;
                             };
@@ -1210,7 +1210,7 @@ export declare const components: {
                                 readonly tooltip: "The message of the toast to display";
                                 readonly fieldType: "text";
                                 readonly type: "static";
-                                readonly value: "An error occured";
+                                readonly value: "An error occurred";
                                 readonly placeholder: "Hello there";
                                 readonly onDemandOnly: true;
                             };
@@ -1448,7 +1448,7 @@ export declare const components: {
                                 readonly tooltip: "The message of the toast to display";
                                 readonly fieldType: "text";
                                 readonly type: "static";
-                                readonly value: "An error occured";
+                                readonly value: "An error occurred";
                                 readonly placeholder: "Hello there";
                                 readonly onDemandOnly: true;
                             };

package/package/components/apps/editor/component/components.js

@@ -199,7 +199,7 @@ const onErrorClick = {
                 tooltip: 'The message of the toast to display',
                 fieldType: 'text',
                 type: 'static',
-                value: 'An error occured',
+                value: 'An error occurred',
                 placeholder: 'Hello there',
                 onDemandOnly: true
             },

package/package/components/apps/editor/contextPanel/ComponentOutputViewer.svelte

@@ -35,7 +35,7 @@ $effect(() => {
 
 {#if render && object != undefined && Object.keys(object).length > 0}
 	{#if $hasResult[componentId] || $search == ''}
-		<div class="pl-2 !cursor-pointer" data-connection-button>
+		<div class="pl-2 !cursor-pointer component-output-viewer-{componentId}" data-connection-button>
 			<ObjectViewer
 				json={filtered}
 				on:select

package/package/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte

@@ -8,12 +8,12 @@ import { emptySchema } from '../../../../utils';
 import { defaultScriptLanguages, getScriptByPath, processLangs } from '../../../../scripts';
 import { Building, GitFork, Globe2 } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
-import { fly } from 'svelte/transition';
 import { defaultCode } from '../component';
 import WorkspaceScriptList from '../settingsPanel/mainInput/WorkspaceScriptList.svelte';
 import RunnableSelector from '../settingsPanel/mainInput/RunnableSelector.svelte';
-import { defaultScripts } from '../../../../stores';
+import { defaultScripts, isCurrentlyInTutorial } from '../../../../stores';
 import DefaultScripts from '../../../DefaultScripts.svelte';
+import { twMerge } from 'tailwind-merge';
 let { componentType = undefined, showScriptPicker = false, rawApps = false, unusedInlineScripts } = $props();
 let tab = $state('workspacescripts');
 let filter = $state('');
@@ -92,8 +92,10 @@ let langs = $derived(processLangs(undefined, $defaultScripts?.order ?? Object.ke
 </Drawer>
 
 <div
-	class="flex flex-col px-4 gap-2 text-sm"
-	in:fly={{ duration: 50 }}
+	class={twMerge(
+		'flex flex-col px-4 gap-2 text-sm',
+		isCurrentlyInTutorial.val ? 'h-full overflow-y-clip' : ''
+	)}
 	id="app-editor-empty-runnable"
 >
 	<div class="mt-2 flex justify-between gap-4" id="app-editor-runnable-header">

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte.d.ts

@@ -30,6 +30,6 @@ declare const InlineScriptEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     delete: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "name" | "fields" | "editor" | "inlineScript">;
+}, {}, {}, "name" | "fields" | "inlineScript" | "editor">;
 type InlineScriptEditor = InstanceType<typeof InlineScriptEditor>;
 export default InlineScriptEditor;

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte.d.ts

@@ -26,6 +26,6 @@ declare const InlineScriptEditorDrawer: $$__sveltets_2_IsomorphicComponent<Props
     [evt: string]: CustomEvent<any>;
 }, {}, {
     openDrawer: () => void;
-}, "isOpen" | "inlineScript">;
+}, "inlineScript" | "isOpen">;
 type InlineScriptEditorDrawer = InstanceType<typeof InlineScriptEditorDrawer>;
 export default InlineScriptEditorDrawer;

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte.d.ts

@@ -26,6 +26,6 @@ declare const InlineScriptRunnableByPath: $$__sveltets_2_IsomorphicComponent<Pro
     fork: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "fields" | "runnable">;
+}, {}, {}, "runnable" | "fields">;
 type InlineScriptRunnableByPath = InstanceType<typeof InlineScriptRunnableByPath>;
 export default InlineScriptRunnableByPath;

package/package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -77,7 +77,7 @@ function openConnection() {
 </script>
 
 {#if !(resourceOnly && (fieldType !== 'object' || !format?.startsWith('resource-')))}
-	<div class={classNames('flex gap-1', 'flex-col')}>
+	<div class={classNames('flex gap-1 flex-col group')}>
 		<div class="flex justify-between items-end">
 			<div class="flex flex-row gap-4 items-center">
 				<div class="flex items-center">
@@ -108,8 +108,15 @@ function openConnection() {
 
 			<div class={classNames('flex gap-x-2 gap-y-1 justify-end items-center')}>
 				{#if componentInput?.type && allowTypeChange !== false}
+					<ConnectionButton
+						{closeConnection}
+						{openConnection}
+						isOpen={!!$connectingInput.opened}
+						btnWrapperClasses={'h-6 w-8 opacity-0 group-hover:opacity-100 transition-opacity'}
+						id="schema-plug-{key}"
+					/>
 					<ToggleButtonGroup
-						class="h-7"
+						class="h-6"
 						bind:selected={componentInput.type}
 						on:selected={(e) => {
 							if (
@@ -131,38 +138,81 @@ function openConnection() {
 						}}
 					>
 						{#snippet children({ item })}
-							<ToggleButton value="static" icon={Pen} iconOnly tooltip="Static" {item} />
+							<ToggleButton
+								small
+								light
+								value="static"
+								icon={Pen}
+								iconOnly
+								tooltip="Static"
+								{item}
+							/>
 							{#if userInputEnabled}
-								<ToggleButton value="user" icon={User} iconOnly tooltip="User Input" {item} />
+								<ToggleButton
+									small
+									light
+									value="user"
+									icon={User}
+									iconOnly
+									tooltip="User Input"
+									{item}
+								/>
 							{/if}
 							{#if fileUpload}
-								<ToggleButton value="upload" icon={Upload} iconOnly tooltip="Upload" {item} />
+								<ToggleButton
+									small
+									light
+									value="upload"
+									icon={Upload}
+									iconOnly
+									tooltip="Upload"
+									{item}
+								/>
 							{/if}
 							{#if fileUploadS3}
 								<ToggleButton
 									value="uploadS3"
 									icon={UploadCloud}
 									iconOnly
+									light
+									small
 									tooltip="Upload S3"
 									{item}
 								/>
 							{/if}
 							{#if componentInput?.type === 'connected'}
-								<ToggleButton value="connected" icon={Plug2} iconOnly tooltip="Connect" {item} />
+								<ToggleButton
+									light
+									value="connected"
+									icon={Plug2}
+									iconOnly
+									small
+									tooltip="Connect"
+									{item}
+								/>
 							{/if}
 							{#if componentInput?.type === 'eval'}
 								<ToggleButton
 									value="eval"
 									icon={FunctionSquare}
 									iconOnly
+									light
+									small
 									tooltip="Eval Legacy"
 									{item}
 								/>
 							{/if}
-							<ToggleButton value="evalv2" icon={FunctionSquare} iconOnly tooltip="Eval" {item} />
+							<ToggleButton
+								value="evalv2"
+								light
+								icon={FunctionSquare}
+								iconOnly
+								small
+								tooltip="Eval"
+								{item}
+							/>
 						{/snippet}
 					</ToggleButtonGroup>
-					<ConnectionButton {closeConnection} {openConnection} isOpen={!!$connectingInput.opened} />
 				{/if}
 			</div>
 		</div>

package/package/components/auditLogs/AuditLogsFilters.svelte

@@ -353,7 +353,7 @@ $effect(() => {
 
 		<Select
 			bind:value={operation}
-			items={['all', ...Object.keys(operations)].map((r) => ({ value: r, label: r }))}
+			items={['all', ...Object.values(operations)].map((r) => ({ value: r, label: r }))}
 			inputClass="dark:!bg-gray-700"
 			RightIcon={ChevronDown}
 		/>

package/package/components/common/ResizeTransitionWrapper.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">import { twMerge } from 'tailwind-merge';
+let { children, innerClass, class: className = '', horizontal, vertical, outerDivProps } = $props();
+let innerContainer = $state(null);
+let outerContainer = $state(null);
+let width = $state(null);
+let height = $state(null);
+let style = $derived.by(() => {
+    let s = 'transition: width 0.2s, height 0.2s; overflow: clip;';
+    if (width !== null)
+        s += `width: ${width}px;`;
+    if (height !== null)
+        s += `height: ${height}px;`;
+    return s;
+});
+$effect(() => {
+    if (!innerContainer || !outerContainer)
+        return;
+    let observer = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+            if (horizontal)
+                width = entry.contentRect.width;
+            if (vertical)
+                height = entry.contentRect.height;
+        }
+    });
+    observer.observe(innerContainer);
+    return () => {
+        if (innerContainer)
+            observer.unobserve(innerContainer);
+        observer.disconnect();
+    };
+});
+</script>
+
+<div bind:this={outerContainer} {...outerDivProps} class={className} {style}>
+	<div class={twMerge('absolute', innerClass)} bind:this={innerContainer}>
+		{@render children()}
+	</div>
+</div>

package/package/components/common/ResizeTransitionWrapper.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    children: import('svelte').Snippet;
+    innerClass?: string;
+    class?: string;
+    horizontal?: boolean;
+    vertical?: boolean;
+    outerDivProps?: HTMLAttributes<HTMLDivElement>;
+};
+declare const ResizeTransitionWrapper: import("svelte").Component<Props, {}, "">;
+type ResizeTransitionWrapper = ReturnType<typeof ResizeTransitionWrapper>;
+export default ResizeTransitionWrapper;

package/package/components/common/badge/CountBadge.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">import { Loader2 } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+let { count, small = true, alwaysVisible = false } = $props();
+</script>
+
+{#if count === undefined || count > 0 || alwaysVisible}
+	<div
+		class={twMerge(
+			// Base styles that apply in all cases
+			'absolute z-10 rounded-full overflow-hidden',
+			'flex center-center text-primary-inverse font-mono',
+			'bg-tertiary/50 group-hover:bg-primary transition-all duration-[100ms]',
+			alwaysVisible || count === undefined ? 'bg-primary' : '',
+
+			// Size variants based on small prop
+			small ? '-right-[3px] -top-[3px] h-3 w-3 text-[8px]' : '-right-1.5 -top-1.5 h-4 w-4 text-xs',
+
+			// Special case for always visible
+			alwaysVisible && small ? 'h-3 w-3 text-[8px] -right-0.5 -top-0.5' : '',
+			alwaysVisible && !small ? 'h-4 w-4 text-xs -right-1 -top-1' : ''
+		)}
+	>
+		{#if count === undefined}
+			<Loader2 class="animate-spin text-2xs" />
+		{:else}
+			<p>{count}</p>
+		{/if}
+	</div>
+{/if}

package/package/components/common/badge/CountBadge.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    count: number | undefined;
+    small?: boolean;
+    alwaysVisible?: boolean;
+}
+declare const CountBadge: import("svelte").Component<Props, {}, "">;
+type CountBadge = ReturnType<typeof CountBadge>;
+export default CountBadge;

package/package/components/common/button/Button.svelte

@@ -227,6 +227,7 @@ $effect(() => {
 			on:open={() => dispatch('dropdownOpen', true)}
 			on:close={() => dispatch('dropdownOpen', false)}
 			bind:open={dropdownOpen}
+			enableFlyTransition
 		>
 			{#snippet buttonReplacement()}
 				<div

package/package/components/common/button/ConnectionButton.svelte

@@ -3,9 +3,12 @@ import { pointerDownOutside } from '../../../utils';
 import AnimatedButton from './AnimatedButton.svelte';
 import Button from './Button.svelte';
 import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
 export let isOpen = false;
 export let openConnection;
 export let closeConnection;
+export let btnWrapperClasses = '';
+export let id = undefined;
 let selected = false;
 const { panzoomActive } = getContext('AppViewerContext');
 async function getConnectionButtonElements() {
@@ -67,7 +70,9 @@ $: !isOpen && (selected = false);
 			color="light"
 			title="Connect"
 			on:click={() => handleConnect(true)}
-			id="schema-plug"
+			{id}
+			wrapperClasses={twMerge(btnWrapperClasses, selected ? 'opacity-100' : '')}
+			btnClasses="p-0"
 		>
 			<Plug size={14} />
 		</Button>

package/package/components/common/button/ConnectionButton.svelte.d.ts

@@ -15,6 +15,8 @@ declare const ConnectionButton: $$__sveltets_2_IsomorphicComponent<{
     isOpen?: boolean;
     openConnection: () => void;
     closeConnection: () => void;
+    btnWrapperClasses?: string;
+    id?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/package/components/common/button/RefreshButton.svelte

@@ -1,7 +1,8 @@
-<script lang="ts">import { Button } from '..';
+<script lang="ts">import { Button, ButtonType } from '..';
 import { RefreshCw } from 'lucide-svelte';
 import Popover from '../../Popover.svelte';
-let { loading } = $props();
+import { twMerge } from 'tailwind-merge';
+let { loading, size = 'xs2', light = false } = $props();
 let buttonHover = $state(false);
 </script>
 
@@ -10,11 +11,14 @@ let buttonHover = $state(false);
 		on:mouseenter={() => (buttonHover = true)}
 		on:mouseleave={() => (buttonHover = false)}
 		color="light"
-		size="xs2"
+		{size}
 		variant="border"
 		on:click
 	>
-		<RefreshCw class={loading ? 'animate-spin ' : ''} size="14" />
+		<RefreshCw
+			class={twMerge(loading ? 'animate-spin ' : '', light ? 'text-secondary' : '')}
+			size="14"
+		/>
 	</Button>
 	{#snippet text()}
 		{#if loading}

package/package/components/common/button/RefreshButton.svelte.d.ts

@@ -1,5 +1,8 @@
+import { ButtonType } from '..';
 interface Props {
     loading: boolean;
+    size?: ButtonType.Size;
+    light?: boolean;
 }
 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> & {

package/package/components/common/calendarPicker/CalendarPicker.svelte

@@ -22,7 +22,7 @@ export let placement = 'top-end';
 		<button
 			title="Open calendar picker"
 			class={twMerge(
-				'absolute bottom-1 right-2 top-1 py-1 min-w-min !px-2 items-center text-primary bg-surface border rounded center-center hover:bg-surface-hover transition-all cursor-pointer',
+				'absolute bottom-1 right-2 top-1 py-1 min-w-min !px-2.5 items-center text-primary bg-surface-secondary rounded center-center hover:bg-surface-hover transition-all cursor-pointer',
 				$$props.class
 			)}
 			aria-label="Open calendar picker"

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

@@ -10,7 +10,7 @@ export let accept = '*';
 export let multiple = false;
 export let convertTo = undefined;
 export let hideIcon = false;
-export let iconSize = 36;
+export let iconSize = 24;
 export let returnFileNames = false;
 export let submittedText = undefined;
 export let defaultFile = undefined;
@@ -164,10 +164,11 @@ 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
+		`relative center-center flex flex-col gap-x-2 gap-y-1 justify-center items-center flex-wrap text-center font-normal text-hint text-xs rounded-md
+		bg-surface-secondary
+		border border-dashed border-nord-400 dark:border-nord-300 hover:border-nord-900 dark:hover:border-nord-900
 		focus-within:border-blue-300 hover:bg-blue-50 dark:hover:bg-frost-900
-		duration-200 rounded-component p-1`,
+		duration-200 px-1 py-8`,
 		c
 	)}
 	on:dragover={handleDragOver}
@@ -186,7 +187,7 @@ export function clearFiles() {
 	{disabled}
 >
 	{#if !hideIcon && !files}
-		<FileUp size={iconSize} class="mb-2" />
+		<FileUp size={iconSize} />
 	{/if}
 	{#if files}
 		<div class="w-full max-h-full overflow-auto px-6">
@@ -235,7 +236,7 @@ export function clearFiles() {
 	/>
 	{#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>
+			Default file: <span class="text-nord-900">{defaultFile}</span>
 		</div>
 	{/if}
 </button>