windmill-components 1.558.4 → 1.596.0

package/package/components/ArgInfo.svelte

@@ -31,15 +31,15 @@ async function getVariable(path) {
 		{#snippet actions()}
 			<Button
 				on:click={() => copyToClipboard(JSON.stringify(jsonViewerContent, null, 4))}
-				color="light"
-				size="xs"
+				variant="subtle"
+				unifiedSize="md"
 				startIcon={{ icon: ClipboardCopy }}
 			>
 				Copy
 			</Button>
 		{/snippet}
 		{#if isString(jsonViewerContent)}
-			<pre>{jsonViewerContent}</pre>
+			<pre class="text-xs whitespace-pre-wrap">{jsonViewerContent}</pre>
 		{:else}
 			<ObjectViewer pureViewer json={jsonViewerContent} />
 		{/if}
@@ -47,7 +47,7 @@ async function getVariable(path) {
 </Drawer>
 
 {#if value == undefined || value == null}
-	<span class="text-tertiary">null</span>
+	<span class="text-primary">null</span>
 {:else if value === '<function call>'}
 	{'<function call>'}<Tooltip
 		>The arg was none and the default argument of the script is a function call, hence the actual
@@ -55,7 +55,7 @@ async function getVariable(path) {
 	>
 {:else if isString(value) && value.startsWith('$res:')}
 	<button
-		class="text-xs text-blue-500"
+		class="text-xs text-accent"
 		onclick={async () => {
 			await getResource(value.substring('$res:'.length))
 			jsonViewer?.toggleDrawer()
@@ -63,7 +63,7 @@ async function getVariable(path) {
 	>
 {:else if isString(value) && value.startsWith('$var:')}
 	<button
-		class="text-xs text-blue-500"
+		class="text-xs text-accent"
 		onclick={async () => {
 			await getVariable(value.substring('$res:'.length))
 			jsonViewer?.toggleDrawer()
@@ -74,7 +74,7 @@ async function getVariable(path) {
 		{truncate(JSON.stringify(value), 80)}
 		{#if JSON.stringify(value).length > 80}
 			<button
-				class="text-xs text-blue-500"
+				class="text-xs text-accent"
 				onclick={() => {
 					jsonViewerContent = value
 					jsonViewer?.toggleDrawer()
@@ -86,7 +86,7 @@ async function getVariable(path) {
 	<div class="relative">
 		{#if JSON.stringify(value).length > 120}
 			<button
-				class="text-xs absolute top-0 right-8 text-tertiary"
+				class="text-xs absolute top-0 right-8 text-primary"
 				onclick={() => {
 					jsonViewerContent = value
 					jsonViewer?.toggleDrawer()

package/package/components/ArgInput.svelte

@@ -4,7 +4,7 @@ import { setInputCat as computeInputCat, debounce, emptySchema, emptyString, get
 import { DollarSign, Plus, X, Check, Loader2, ExternalLink } from 'lucide-svelte';
 import { createEventDispatcher, onDestroy, onMount, tick, untrack } from 'svelte';
 import { fade } from 'svelte/transition';
-import { Button, SecondsInput } from './common';
+import { Alert, Button, SecondsInput } from './common';
 import FieldHeader from './FieldHeader.svelte';
 import ObjectResourceInput from './ObjectResourceInput.svelte';
 import Range from './Range.svelte';
@@ -15,7 +15,6 @@ import ArgEnum from './ArgEnum.svelte';
 import DateTimeInput from './DateTimeInput.svelte';
 import DateInput from './DateInput.svelte';
 import CurrencyInput from './apps/components/inputs/currency/CurrencyInput.svelte';
-import autosize from '../autosize';
 import PasswordArgInput from './PasswordArgInput.svelte';
 import Password from './Password.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
@@ -31,9 +30,10 @@ import { base } from '../base';
 import { workspaceStore } from '../stores';
 import { getJsonSchemaFromResource } from './schema/jsonSchemaResource.svelte';
 import AIProviderPicker from './AIProviderPicker.svelte';
-import TextInput, { inputBaseClass, inputBorderClass } from './text_input/TextInput.svelte';
+import TextInput from './text_input/TextInput.svelte';
+import FileInput from './common/fileInput/FileInput.svelte';
 let { label = '', value = $bindable(), defaultValue = $bindable(undefined), description = $bindable(undefined), format = $bindable(undefined), contentEncoding = undefined, type = undefined, oneOf = $bindable(undefined), required = false, pattern = $bindable(undefined), valid = $bindable(undefined), // Note : this should not exist, valid and error should be one coherent state
-enum_ = $bindable(undefined), disabled = false, itemsType = $bindable(undefined), displayHeader = true, properties = $bindable(undefined), nestedRequired = undefined, autofocus = null, compact = false, password = false, pickForField = $bindable(undefined), variableEditor = undefined, itemPicker = undefined, noMargin = false, extra = {}, minW = true, prettifyHeader = false, resourceTypes, disablePortal = false, showSchemaExplorer = false, simpleTooltip = undefined, customErrorMessage = undefined, onlyMaskPassword = false, nullable = false, title = $bindable(undefined), placeholder = $bindable(undefined), order = $bindable(undefined), editor = $bindable(undefined), orderEditable = false, shouldDispatchChanges = false, noDefaultOnSelectFirst = false, helperScript = undefined, otherArgs = {}, lightHeader = false, diffStatus = undefined, hideNested = false, nestedParent = undefined, nestedClasses = '', displayType = true, css = undefined, appPath = undefined, computeS3ForceViewerPolicies = undefined, workspace = undefined, actions, innerBottomSnippet, fieldHeaderActions, lightHeaderFont = false } = $props();
+enum_ = $bindable(undefined), disabled = false, itemsType = $bindable(undefined), displayHeader = true, properties = $bindable(undefined), nestedRequired = undefined, autofocus = null, compact = false, password = false, pickForField = $bindable(undefined), variableEditor = undefined, itemPicker = undefined, noMargin = false, extra = {}, minW = true, prettifyHeader = false, resourceTypes, disablePortal = false, showSchemaExplorer = false, simpleTooltip = undefined, customErrorMessage = undefined, onlyMaskPassword = false, nullable = false, title = $bindable(undefined), placeholder = $bindable(undefined), order = $bindable(undefined), editor = $bindable(undefined), orderEditable = false, shouldDispatchChanges = false, noDefaultOnSelectFirst = false, helperScript = undefined, otherArgs = {}, lightHeader = false, diffStatus = undefined, hideNested = false, nestedParent = undefined, nestedClasses = '', displayType = true, css = undefined, appPath = undefined, computeS3ForceViewerPolicies = undefined, workspace = undefined, s3StorageConfigured = true, actions, innerBottomSnippet, fieldHeaderActions, lightHeaderFont = false } = $props();
 $effect(() => {
     if (description == undefined) {
         description = '';
@@ -106,7 +106,7 @@ function computeDefaultValue(inputCat, defaultValue, nnullable) {
                 nvalue = false;
             }
             else if (inputCat == 'list') {
-                nvalue = [];
+                nvalue = nullable ? null : [];
             }
         }
         else if (inputCat === 'object') {
@@ -195,18 +195,16 @@ function setNewValueFromCode(nvalue) {
 onMount(() => {
     evalValueToRaw();
 });
-function fileChanged(e, cb) {
-    let t = e.target;
-    if (t && 'files' in t && t.files.length > 0) {
-        let reader = new FileReader();
-        reader.onload = (e) => {
-            cb(e.target.result.split('base64,')[1]);
-        };
-        reader.readAsDataURL(t.files[0]);
-    }
-    else {
+function fileChangedInner(file, cb) {
+    if (!file) {
         cb(undefined);
+        return;
     }
+    let reader = new FileReader();
+    reader.onload = (e) => {
+        cb(e.target.result.split('base64,')[1]);
+    };
+    reader.readAsDataURL(file);
 }
 export function focus() {
     el?.focus();
@@ -228,6 +226,18 @@ function validateInput(pattern, v, required) {
         error = 'Required';
         valid && (valid = false);
     }
+    else if (required &&
+        inputCat == 'list' &&
+        extra?.['nonEmpty'] == true &&
+        Array.isArray(v) &&
+        v.length === 0) {
+        error = 'Required';
+        valid && (valid = false);
+    }
+    else if (inputCat == 'list' && !Array.isArray(v)) {
+        error = 'Expected an array, got ' + typeof v + ' instead';
+        valid && (valid = false);
+    }
     else {
         if (inputCat == 'number' && typeof v === 'number') {
             let min = extra['min'];
@@ -344,6 +354,7 @@ $effect.pre(() => {
         value;
 });
 $effect(() => {
+    extra?.['nonEmpty'];
     let args = [pattern, value, required];
     untrack(() => validateInput(...args));
 });
@@ -357,10 +368,10 @@ onDestroy(() => {
 
 {#snippet variableInput()}
 	{#if variableEditor}
-		<div class="text-sm text-hint">
+		<div class="text-2xs text-hint">
 			{#if value && typeof value == 'string' && value?.startsWith('$var:')}
 				Linked to variable <button
-					class="text-nord-950 underline font-normal"
+					class="text-accent underline font-normal"
 					onclick={() => variableEditor?.editVariable?.(value.slice(5))}>{value.slice(5)}</button
 				>
 			{/if}
@@ -369,7 +380,7 @@ onDestroy(() => {
 {/snippet}
 {#snippet resourceInput()}
 	{#if variableEditor}
-		<div class="text-sm text-tertiary">
+		<div class="text-sm text-primary">
 			{#if value && typeof value == 'string' && value?.startsWith('$res:')}
 				Linked to resource <a
 					target="_blank"
@@ -384,7 +395,7 @@ onDestroy(() => {
 <!-- svelte-ignore a11y_autofocus -->
 <div
 	class={twMerge(
-		'flex flex-col w-full rounded-md relative group',
+		'flex flex-col gap-1 w-full rounded-md relative group',
 		minW ? 'min-w-[250px]' : '',
 		diffStatus?.diff ? 'px-2' : '',
 		diffStatus?.diff == 'added'
@@ -426,7 +437,7 @@ onDestroy(() => {
 		</div>
 	{/if}
 	{#if displayHeader}
-		<div class="flex min-h-7 items-end pb-1">
+		<div class="flex items-end">
 			<FieldHeader
 				prettify={prettifyHeader}
 				label={title && !emptyString(title) ? title : label}
@@ -438,10 +449,7 @@ onDestroy(() => {
 				{simpleTooltip}
 				{lightHeader}
 				{displayType}
-				labelClass={twMerge(
-					lightHeaderFont ? '!font-normal !text-sm text-tertiary' : '',
-					css?.label?.class
-				)}
+				labelClass={twMerge(lightHeaderFont ? '!font-normal text-primary' : '', css?.label?.class)}
 			/>
 			<div class="ml-auto flex gap-2">
 				{#if displayJsonToggleHeader}
@@ -466,6 +474,12 @@ onDestroy(() => {
 		</div>
 	{/if}
 
+	{#if description}
+		<div class={twMerge('text-xs text-secondary', css?.description?.class)}>
+			<pre class="font-main whitespace-normal">{description}</pre>
+		</div>
+	{/if}
+
 	<div class="flex space-x-1">
 		{#if inputCat == 'number'}
 			{#if extra['min'] != undefined && extra['max'] != undefined}
@@ -590,13 +604,26 @@ onDestroy(() => {
 				<Loader2 class="animate-spin" />
 			{:then schema}
 				{#if !schema || !schema.properties}
-					{#await import('./JsonEditor.svelte')}
-						<Loader2 class="animate-spin" />
-					{:then Module}
-						<Module.default code={JSON.stringify(value, null, 2)} bind:value />
-					{/await}
+					<div>
+						<div class="w-full">
+							{#await import('./JsonEditor.svelte')}
+								<Loader2 class="animate-spin" />
+							{:then Module}
+								<Module.default code={JSON.stringify(value, null, 2)} bind:value />
+							{/await}
+						</div>
+						<div class="text-red-500 text-2xs">
+							Error loading json schema resource {format.substring('jsonschema-'.length)}, please
+							check if the resource exists and is a valid json schema.
+							<a
+								href="https://windmill.dev/docs/core_concepts/resources_and_types#json-schema-resources"
+								target="_blank"
+								class="text-blue-500 hover:text-blue-700 underline">See documentation</a
+							>
+						</div>
+					</div>
 				{:else}
-					<div class="px-3 pt-6 border rounded-md w-full">
+					<div class="px-4 pt-4 border rounded-md w-full">
 						<SchemaForm
 							lightHeaderFont
 							{onlyMaskPassword}
@@ -672,10 +699,10 @@ onDestroy(() => {
 														{@render deleteItemBtn()}
 													</div>
 												{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
-													<input
-														type="file"
-														class="my-6"
-														onchange={(x) => fileChanged(x, (val) => (value[i] = val))}
+													<FileInput
+														class="w-full"
+														on:change={(x) =>
+															fileChangedInner(x.detail?.[0], (val) => (value[i] = val))}
 														multiple={false}
 													/>
 													{@render deleteItemBtn()}
@@ -781,10 +808,9 @@ onDestroy(() => {
 							{/key}
 						</div>
 						<Button
-							variant="border"
+							variant="default"
 							color="light"
 							size="xs"
-							btnClasses="text-tertiary py-2.5"
 							wrapperClasses="w-full {Array.isArray(value) && value.length > 0 ? 'mt-1.5' : ''}"
 							on:click={() => {
 								if (value == undefined || !Array.isArray(value)) {
@@ -814,7 +840,7 @@ onDestroy(() => {
 					{/if}
 				</div>
 				{#if !displayHeader}
-					<div class="block mt-2.5 pl-2">
+					<div class="block mt-2 pl-2">
 						<Toggle
 							on:change={(e) => {
 								// Once the user has changed the input type, we should not change it back automatically
@@ -836,13 +862,13 @@ onDestroy(() => {
 		{:else if inputCat == 'dynamic'}
 			<DynamicInput name={label} {otherArgs} {helperScript} bind:value format={format ?? ''} />
 		{:else if inputCat == 'resource-object' && resourceTypes == undefined}
-			<span class="text-2xs text-tertiary">Loading resource types...</span>
+			<span class="text-2xs text-primary">Loading resource types...</span>
 		{:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format && format?.split('-').length > 1 && resourceTypes.includes(format?.substring('resource-'.length))))}
 			<!-- {JSON.stringify(value)} -->
 			<ObjectResourceInput
 				{disabled}
 				{defaultValue}
-				selectFirst={!noDefaultOnSelectFirst}
+				selectFirst={!noDefaultOnSelectFirst && required}
 				{disablePortal}
 				format={format ?? ''}
 				bind:value
@@ -854,10 +880,12 @@ onDestroy(() => {
 			/>
 		{:else if inputCat == 'object' || inputCat == 'resource-object' || isListJson}
 			{#if oneOf && oneOf.length >= 2}
-				<div class="flex flex-col gap-2 w-full border rounded-md p-2">
+				<div class="flex flex-col gap-2 w-full border rounded-md p-4">
 					{#if oneOf && oneOf.length >= 2}
 						<ToggleButtonGroup
 							selected={oneOfSelected}
+							wrap
+							class="mb-4"
 							on:selected={({ detail }) => {
 								oneOfSelected = detail
 								const selectedObjProperties =
@@ -959,6 +987,15 @@ onDestroy(() => {
 										/>
 									{/if}
 								{/key}
+								{#if !s3StorageConfigured && obj['x-no-s3-storage-workspace-warning']}
+									<Alert
+										type="warning"
+										title={obj['x-no-s3-storage-workspace-warning']}
+										size="xs"
+										titleClass="text-2xs"
+									/>
+								{/if}
+	
 							{:else if disabled}
 								<textarea disabled></textarea>
 							{:else}
@@ -1004,7 +1041,7 @@ onDestroy(() => {
 					{/if}
 				</div>
 			{:else if properties && Object.keys(properties).length > 0 && inputCat !== 'list'}
-				<div class={hideNested ? 'hidden' : 'px-3 pt-6 border rounded-md w-full'}>
+				<div class={hideNested ? 'hidden' : 'px-4 pt-4 border rounded-md w-full'}>
 					{#if orderEditable}
 						<SchemaFormDnd
 							lightHeaderFont
@@ -1105,6 +1142,10 @@ onDestroy(() => {
 		{:else if inputCat == 'enum'}
 			<div class="flex flex-row w-full gap-1">
 				<ArgEnum
+					onClear={() => {
+						lastValue = undefined
+						value = undefined
+					}}
 					create={extra['disableCreate'] != true}
 					{defaultValue}
 					valid={valid ?? true}
@@ -1119,7 +1160,6 @@ onDestroy(() => {
 						dispatch('blur')
 					}}
 					enumLabels={extra['enumLabels']}
-					selectClass="min-h-10"
 				/>
 			</div>
 		{:else if inputCat == 'date'}
@@ -1157,19 +1197,15 @@ onDestroy(() => {
 				</div>
 			{/if}
 		{:else if inputCat == 'base64'}
-			<div class="flex flex-col my-6 w-full">
-				<input
-					{autofocus}
-					type="file"
-					onchange={(x) => fileChanged(x, (val) => (value = val))}
+			<div class="flex flex-col w-full">
+				<FileInput
+					on:change={(x) => fileChangedInner(x.detail?.[0], (val) => (value = val))}
 					multiple={false}
 				/>
 				{#if value?.length}
-					<div class="text-2xs text-tertiary mt-1"
-						>File length: {value.length} base64 chars ({(value.length / 1024 / 1024).toFixed(
-							2
-						)}MB)</div
-					>
+					<div class="text-2xs text-primary mt-1">
+						File length: {value.length} base64 chars ({(value.length / 1024 / 1024).toFixed(2)}MB)
+					</div>
 				{/if}
 			</div>
 		{:else if inputCat == 'resource-string'}
@@ -1217,39 +1253,39 @@ onDestroy(() => {
 						{/if}
 					{:else}
 						{#key extra?.['minRows']}
-							<textarea
-								{autofocus}
-								rows={extra?.['minRows'] ? extra['minRows']?.toString() : '1'}
-								bind:this={el}
-								onfocus={(e) => {
-									dispatch('focus')
-								}}
-								onblur={(e) => {
-									dispatch('blur')
+							<TextInput
+								inputProps={{
+									autofocus,
+									onfocus: () => dispatch('focus'),
+									onblur: () => dispatch('blur'),
+									disabled,
+									onkeydown: onKeyDown,
+									placeholder: placeholder ?? defaultValue ?? '',
+									rows: extra?.['minRows'] ? extra['minRows']?.toString() : '1'
 								}}
-								use:autosize
-								onkeydown={onKeyDown}
-								{disabled}
-								class={twMerge('w-full', inputBaseClass, inputBorderClass({ error: !!error }))}
-								placeholder={placeholder ?? defaultValue ?? ''}
 								bind:value
-							></textarea>
+								{error}
+								unifiedHeight={false}
+								underlyingInputEl="textarea"
+							/>
 						{/key}
 					{/if}
 					{#if !disabled && itemPicker && extra?.['disableVariablePicker'] != true}
-						<!-- svelte-ignore a11y_click_events_have_key_events -->
-						<button
-							class="absolute {password || extra?.['password'] == true
-								? 'right-16 top-1.5'
-								: 'right-1 top-[7px]'} opacity-0 group-hover:opacity-100 duration-200 py-1 min-w-min !px-2 items-center text-gray-800 bg-surface-secondary border rounded center-center hover:bg-gray-300 transition-all cursor-pointer"
-							onclick={() => {
+						<Button
+							iconOnly
+							startIcon={{ icon: DollarSign }}
+							unifiedSize="sm"
+							onClick={() => {
 								pickForField = label
 								itemPicker?.openDrawer?.()
 							}}
+							wrapperClasses={twMerge(
+								'opacity-0 group-hover:opacity-100 transition-opacity absolute bg-surface-input',
+								password || extra?.['password'] == true ? 'right-8	' : 'right-2'
+							)}
+							variant="subtle"
 							title="Insert a Variable"
-						>
-							<DollarSign class="!text-tertiary" size={14} />
-						</button>
+						/>
 					{/if}
 				</div>
 				{@render variableInput()}
@@ -1259,23 +1295,26 @@ onDestroy(() => {
 		{@render actions?.()}
 	</div>
 
-	{#if description}
-		<div class={twMerge('text-2xs italic py-1 text-hint', css?.description?.class)}>
-			<pre class="font-main whitespace-normal">{description}</pre>
-		</div>
-	{/if}
-
 	{#if !compact || (error && error != '')}
-		{#if disabled || error === ''}
-			&nbsp;
-		{:else}
-			<div class="text-right text-xs text-red-600 dark:text-red-400 mb-2">
+		<div class="text-right text-xs leading-3 text-red-600 dark:text-red-400 mb-2">
+			{#if disabled || error === ''}
+				&nbsp;
+			{:else}
 				{error}
-			</div>
-		{/if}
+			{/if}
+		</div>
 	{:else if !noMargin}
 		<div class="mb-2"></div>
 	{/if}
+
+	{#if !s3StorageConfigured && extra['x-no-s3-storage-workspace-warning']}
+		<Alert
+			type="warning"
+			title={extra['x-no-s3-storage-workspace-warning']}
+			size="xs"
+			titleClass="text-2xs"
+		/>
+	{/if}
 </div>
 
 <style>

package/package/components/ArgInput.svelte.d.ts

@@ -79,6 +79,7 @@ interface Props {
         file_key_regex: string;
     } | undefined) | undefined;
     workspace?: string | undefined;
+    s3StorageConfigured?: boolean;
     actions?: import('svelte').Snippet;
     innerBottomSnippet?: import('svelte').Snippet;
     fieldHeaderActions?: import('svelte').Snippet;
@@ -108,6 +109,6 @@ declare const ArgInput: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
-}, "value" | "description" | "title" | "pattern" | "properties" | "placeholder" | "valid" | "oneOf" | "format" | "defaultValue" | "order" | "editor" | "enum_" | "itemsType" | "pickForField">;
+}, "value" | "description" | "title" | "pattern" | "format" | "order" | "placeholder" | "properties" | "oneOf" | "defaultValue" | "valid" | "editor" | "enum_" | "itemsType" | "pickForField">;
 type ArgInput = InstanceType<typeof ArgInput>;
 export default ArgInput;

package/package/components/ArrayTypeNarrowing.svelte

@@ -9,7 +9,7 @@ import EditableSchemaDrawer from './schema/EditableSchemaDrawer.svelte';
 import Toggle from './Toggle.svelte';
 import { tick } from 'svelte';
 import Select from './select/Select.svelte';
-let { canEditResourceType = false, originalType = undefined, itemsType = $bindable() } = $props();
+let { canEditResourceType = false, originalType = undefined, itemsType = $bindable(), nonEmpty = $bindable() } = $props();
 let selected = $state(itemsType?.type != 'string'
     ? itemsType?.type == 'object' && itemsType?.resourceType == 's3object'
         ? 's3object'
@@ -111,11 +111,16 @@ let selected = $state(itemsType?.type != 'string'
 				</div>
 			{/each}
 		</div>
+		<Toggle
+			size="sm"
+			class="mt-8"
+			bind:checked={nonEmpty}
+			options={{ right: 'Require non-empty array' }}
+		/>
 		{#if canEditResourceType || originalType == 'string[]' || originalType == 'object[]'}
 			<div class="flex flex-row mb-1 mt-2">
 				<Button
-					color="light"
-					variant="border"
+					variant="default"
 					size="sm"
 					on:click={() => {
 						if (itemsType?.enum) {
@@ -128,8 +133,7 @@ let selected = $state(itemsType?.type != 'string'
 					<Plus size={14} />
 				</Button>
 				<Button
-					color="light"
-					variant="border"
+					variant="default"
 					size="sm"
 					btnClasses="ml-2"
 					on:click={() => itemsType?.enum && (itemsType.enum = undefined)}

package/package/components/ArrayTypeNarrowing.svelte.d.ts

@@ -11,7 +11,8 @@ interface Props {
             [name: string]: SchemaProperty;
         };
     } | undefined;
+    nonEmpty?: boolean | undefined;
 }
-declare const ArrayTypeNarrowing: import("svelte").Component<Props, {}, "itemsType">;
+declare const ArrayTypeNarrowing: import("svelte").Component<Props, {}, "itemsType" | "nonEmpty">;
 type ArrayTypeNarrowing = ReturnType<typeof ArrayTypeNarrowing>;
 export default ArrayTypeNarrowing;

package/package/components/AssignableTags.svelte

@@ -3,7 +3,7 @@ import { Pen } from 'lucide-svelte';
 import Popover from './meltComponents/Popover.svelte';
 import Tooltip from './Tooltip.svelte';
 import AssignableTagsInner from './AssignableTagsInner.svelte';
-let { placement = 'bottom-end', color = 'dark', disabled = false, showWorkspaceRestriction = false } = $props();
+let { placement = 'bottom-end', variant = 'default', disabled = false } = $props();
 </script>
 
 <Popover
@@ -13,7 +13,7 @@ let { placement = 'bottom-end', color = 'dark', disabled = false, showWorkspaceR
 	usePointerDownOutside
 >
 	{#snippet trigger()}
-		<Button {color} size="xs" nonCaptureEvent={true} {disabled}>
+		<Button {variant} unifiedSize="md" nonCaptureEvent={true} {disabled}>
 			<div class="flex flex-row gap-1 items-center"
 				><Pen size={14} /> Custom tags&nbsp;<Tooltip light
 					>Tags are assigned to scripts and flows. Workers only accept jobs that correspond to their
@@ -25,6 +25,6 @@ let { placement = 'bottom-end', color = 'dark', disabled = false, showWorkspaceR
 		</Button>
 	{/snippet}
 	{#snippet content()}
-		<AssignableTagsInner {showWorkspaceRestriction} on:refresh />
+		<AssignableTagsInner on:refresh />
 	{/snippet}
 </Popover>

package/package/components/AssignableTags.svelte.d.ts

@@ -1,8 +1,7 @@
 interface Props {
     placement?: 'bottom-end' | 'top-end';
-    color?: 'nord' | 'dark';
+    variant?: 'default' | 'accent';
     disabled?: boolean;
-    showWorkspaceRestriction?: 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> & {