windmill-components 1.383.9 → 1.389.1

package/package/components/Editor.svelte.d.ts

@@ -3,11 +3,11 @@ import '@codingame/monaco-vscode-standalone-languages';
 import '@codingame/monaco-vscode-standalone-typescript-language-features';
 import { type Preview } from '../gen';
 import type { Text } from 'yjs';
-import { editor as meditor } from 'monaco-editor';
+import { editor as meditor, type IDisposable } from 'monaco-editor';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        lang: 'typescript' | 'python' | 'go' | 'shell' | 'sql' | 'graphql' | 'powershell' | 'php' | 'css' | 'javascript';
+        lang: 'typescript' | 'python' | 'go' | 'shell' | 'sql' | 'graphql' | 'powershell' | 'php' | 'css' | 'javascript' | 'rust';
         code?: string | undefined;
         cmdEnterAction?: (() => void) | undefined;
         formatAction?: (() => void) | undefined;
@@ -38,7 +38,7 @@ declare const __propDef: {
         insertAtBeginning?: ((code: string) => void) | undefined;
         insertAtLine?: ((code: string, line: number) => void) | undefined;
         getSelectedLines?: (() => string | undefined) | undefined;
-        onDidChangeCursorSelection?: ((f: (e: meditor.ICursorSelectionChangedEvent) => void) => import("monaco-editor").IDisposable | undefined) | undefined;
+        onDidChangeCursorSelection?: ((f: (e: meditor.ICursorSelectionChangedEvent) => void) => IDisposable | undefined) | undefined;
         show?: (() => void) | undefined;
         hide?: (() => void) | undefined;
         setCode?: ((ncode: string, noHistory?: boolean) => void) | undefined;
@@ -48,6 +48,7 @@ declare const __propDef: {
         addAction?: ((id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void) | undefined;
     };
     events: {
+        saveDraft: CustomEvent<any>;
         change: CustomEvent<any>;
         blur: CustomEvent<any>;
         focus: CustomEvent<any>;
@@ -67,7 +68,7 @@ export default class Editor extends SvelteComponent<EditorProps, EditorEvents, E
     get insertAtBeginning(): (code: string) => void;
     get insertAtLine(): (code: string, line: number) => void;
     get getSelectedLines(): () => string | undefined;
-    get onDidChangeCursorSelection(): (f: (e: meditor.ICursorSelectionChangedEvent) => void) => import("monaco-editor").IDisposable | undefined;
+    get onDidChangeCursorSelection(): (f: (e: meditor.ICursorSelectionChangedEvent) => void) => IDisposable | undefined;
     get show(): () => void;
     get hide(): () => void;
     get setCode(): (ncode: string, noHistory?: boolean) => void;

package/package/components/EditorBar.svelte

@@ -19,15 +19,14 @@ import { createEventDispatcher } from 'svelte';
 import { sendUserToast } from '../toast';
 import { getScriptByPath, scriptLangToEditorLang } from '../scripts';
 import Toggle from './Toggle.svelte';
-import FormatOnSave from './FormatOnSave.svelte';
 import { DollarSign, History, Library, Link, Package, Plus, RotateCw, Save, Users } from 'lucide-svelte';
 import { capitalize, toCamel } from '../utils';
 import ScriptVersionHistory from './ScriptVersionHistory.svelte';
 import ScriptGen from './copilot/ScriptGen.svelte';
 import { getResetCode } from '../script_helpers';
-import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte';
 import Popover from './Popover.svelte';
 import ResourceEditorDrawer from './ResourceEditorDrawer.svelte';
+import EditorSettings from './EditorSettings.svelte';
 export let lang;
 export let editor;
 export let websocketAlive;
@@ -63,7 +62,8 @@ $: showContextVarPicker = [
     'bun',
     'bunnative',
     'nativets',
-    'php'
+    'php',
+    'rust'
 ].includes(lang ?? '');
 $: showVarPicker = [
     'python3',
@@ -74,7 +74,8 @@ $: showVarPicker = [
     'bun',
     'bunnative',
     'nativets',
-    'php'
+    'php',
+    'rust'
 ].includes(lang ?? '');
 $: showResourcePicker = [
     'python3',
@@ -85,7 +86,8 @@ $: showResourcePicker = [
     'bun',
     'bunnative',
     'nativets',
-    'php'
+    'php',
+    'rust'
 ].includes(lang ?? '');
 $: showResourceTypePicker =
     ['typescript', 'javascript'].includes(scriptLangToEditorLang(lang)) ||
@@ -625,15 +627,11 @@ $res = json_decode(curl_exec($ch));`)
 				</div>
 			{/if}
 
-			{#if customUi?.autoformatting != false}
-				<FormatOnSave />
-			{/if}
 			{#if customUi?.aiGen != false}
 				<ScriptGen {editor} {diffEditor} {lang} {iconOnly} {args} />
 			{/if}
-			{#if customUi?.aiFix != false}
-				<CodeCompletionStatus />
-			{/if}
+
+			<EditorSettings {customUi} />
 		</div>
 	</div>
 

package/package/components/EditorSettings.svelte

@@ -0,0 +1,44 @@
+<script>import { Settings } from 'lucide-svelte';
+import FormatOnSave from './FormatOnSave.svelte';
+import VimMode from './VimMode.svelte';
+import { Button, Popup } from './common';
+import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte';
+export let customUi = {};
+</script>
+
+{#if customUi?.autoformatting != false || customUi?.vimMode != false || customUi?.aiCompletion != false}
+	<Popup
+		floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
+		containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
+	>
+		<svelte:fragment slot="button">
+			<Button
+				btnClasses="text-tertiary"
+				color="light"
+				size="xs"
+				nonCaptureEvent={true}
+				startIcon={{ icon: Settings }}
+				iconOnly
+				title="Editor settings"
+			/>
+		</svelte:fragment>
+
+		<div class="flex flex-col gap-y-2">
+			{#if customUi?.autoformatting != false}
+				<div>
+					<FormatOnSave />
+				</div>
+			{/if}
+			{#if customUi?.vimMode != false}
+				<div>
+					<VimMode />
+				</div>
+			{/if}
+			{#if customUi?.aiCompletion != false}
+				<div>
+					<CodeCompletionStatus />
+				</div>
+			{/if}
+		</div>
+	</Popup>
+{/if}

package/package/components/EditorSettings.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { EditorBarUi } from './custom_ui';
+declare const __propDef: {
+    props: {
+        customUi?: EditorBarUi | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EditorSettingsProps = typeof __propDef.props;
+export type EditorSettingsEvents = typeof __propDef.events;
+export type EditorSettingsSlots = typeof __propDef.slots;
+export default class EditorSettings extends SvelteComponent<EditorSettingsProps, EditorSettingsEvents, EditorSettingsSlots> {
+}
+export {};

package/package/components/EditorTheme.svelte

@@ -1,5 +1,5 @@
 <script>import { isInitialized } from './vscode';
-import { editor as meditor } from 'monaco-editor/esm/vs/editor/editor.api';
+import { editor as meditor } from 'monaco-editor';
 import { onMount } from 'svelte';
 import DarkModeObserver from './DarkModeObserver.svelte';
 function onThemeChange() {

package/package/components/ErrorOrRecoveryHandler.svelte

@@ -1,5 +1,4 @@
 <script>import { Alert, Button, Tab, Tabs } from './common';
-import SchemaForm from './SchemaForm.svelte';
 import ScriptPicker from './ScriptPicker.svelte';
 import Toggle from './Toggle.svelte';
 import { base } from '../base';
@@ -207,13 +206,17 @@ $: handlerPath &&
 	{/if}
 	{#if handlerPath}
 		<p class="font-semibold text-sm mt-4 mb-2">Extra arguments</p>
-		<SchemaForm
-			disabled={!isEditable}
-			schema={customHandlerSchema}
-			bind:args={handlerExtraArgs}
-			shouldHideNoInputs
-			class="text-xs"
-		/>
+		{#await import('./SchemaForm.svelte')}
+			<Loader2 class="animate-spin" />
+		{:then Module}
+			<Module.default
+				disabled={!isEditable}
+				schema={customHandlerSchema}
+				bind:args={handlerExtraArgs}
+				shouldHideNoInputs
+				class="text-xs"
+			/>
+		{/await}
 		{#if customHandlerSchema && customHandlerSchema.properties && Object.keys(customHandlerSchema.properties).length === 0}
 			<div class="text-xs texg-gray-700">This error handler takes no extra arguments</div>
 		{/if}
@@ -236,19 +239,23 @@ $: handlerPath &&
 		/>
 	</span>
 	{#if workspaceConnectedToSlack}
-		<SchemaForm
-			disabled={!$enterpriseLicense || !isSlackHandler(handlerPath)}
-			schema={slackHandlerSchema}
-			schemaSkippedValues={['slack']}
-			schemaFieldTooltip={{
-				channel: 'Slack channel name without the "#" - example: "windmill-alerts"'
-			}}
-			bind:args={handlerExtraArgs}
-			shouldHideNoInputs
-			class="text-xs"
-		/>
+		{#await import('./SchemaForm.svelte')}
+			<Loader2 class="animate-spin" />
+		{:then Module}
+			<Module.default
+				disabled={!$enterpriseLicense || !isSlackHandler(handlerPath)}
+				schema={slackHandlerSchema}
+				schemaSkippedValues={['slack']}
+				schemaFieldTooltip={{
+					channel: 'Slack channel name without the "#" - example: "windmill-alerts"'
+				}}
+				bind:args={handlerExtraArgs}
+				shouldHideNoInputs
+				class="text-xs"
+			/>
+		{/await}
 	{:else if workspaceConnectedToSlack == undefined}
-		<Loader2 class="animate-spin" />
+		<Loader2 class="animate-spin" size={10} />
 	{/if}
 	{#if $enterpriseLicense && isSlackHandler(handlerPath)}
 		{#if workspaceConnectedToSlack == false}

package/package/components/FlowBuilder.svelte

@@ -35,6 +35,7 @@ import { MenuItem } from '@rgossiaux/svelte-headlessui';
 import { twMerge } from 'tailwind-merge';
 import CustomPopover from './CustomPopover.svelte';
 import Summary from './Summary.svelte';
+import FlowYamlEditor from './flows/header/FlowYamlEditor.svelte';
 export let initialPath = '';
 export let pathStoreInit = undefined;
 export let newFlow;
@@ -46,6 +47,7 @@ export let flowStateStore;
 export let savedFlow = undefined;
 export let diffDrawer = undefined;
 export let customUi = {};
+export let disableAi = false;
 $: setContext('customUi', customUi);
 const dispatch = createEventDispatcher();
 async function createSchedule(path) {
@@ -161,6 +163,7 @@ async function saveDraft(forceSave = false) {
     }
     catch (error) {
         sendUserToast(`Error while saving the flow as a draft: ${error.body || error.message}`, true);
+        dispatch('saveDraftError', error);
     }
     loadingDraft = false;
 }
@@ -271,6 +274,7 @@ async function saveFlow(deploymentMsg) {
         dispatch('deploy', $pathStore);
     }
     catch (err) {
+        dispatch('deployError', err);
         sendUserToast(`The flow could not be saved: ${err.body}`, true);
         loadingSave = false;
     }
@@ -827,6 +831,7 @@ $: $copilotCurrentStepStore === undefined && blurCopilot();
 let renderCount = 0;
 let flowTutorials = undefined;
 let jsonViewerDrawer = undefined;
+let yamlEditorDrawer = undefined;
 let flowHistory = undefined;
 export function triggerTutorial() {
     const urlParams = new URLSearchParams(window.location.search);
@@ -860,6 +865,11 @@ function onCustomUiChange(customUi) {
                     displayName: 'Export',
                     icon: FileJson,
                     action: () => jsonViewerDrawer?.openDrawer()
+                },
+                {
+                    displayName: 'Edit in YAML',
+                    icon: FileJson,
+                    action: () => yamlEditorDrawer?.openDrawer()
                 }
             ]
             : [])
@@ -879,6 +889,7 @@ let msgInput = undefined;
 		{#if $pathStore}
 			<FlowHistory bind:this={flowHistory} path={$pathStore} on:historyRestore />
 		{/if}
+		<FlowYamlEditor bind:drawer={yamlEditorDrawer} />
 		<FlowImportExportMenu bind:drawer={jsonViewerDrawer} />
 		<FlowCopilotInputsModal
 			on:confirmed={async () => {
@@ -903,7 +914,10 @@ let msgInput = undefined;
 					<div transition:fade class="absolute inset-0 bg-gray-500 bg-opacity-75 z-[900] !m-0" />
 				{/if}
 				<div class="flex w-full max-w-md gap-4 items-center">
-					<Summary bind:value={$flowStore.summary} />
+					<Summary
+						disabled={customUi?.topBar?.editableSummary == false}
+						bind:value={$flowStore.summary}
+					/>
 
 					<UndoRedo
 						undoProps={{ disabled: $history.index === 0 }}
@@ -1048,7 +1062,7 @@ let msgInput = undefined;
 							</div>
 						</Button>
 					{/if}
-					{#if customUi?.topBar?.aiBuilder != false}
+					{#if !disableAi && customUi?.topBar?.aiBuilder != false}
 						<FlowCopilotStatus
 							{copilotLoading}
 							bind:copilotStatus
@@ -1112,7 +1126,7 @@ let msgInput = undefined;
 			<!-- metadata -->
 			{#if $flowStateStore}
 				<FlowEditor
-					enableAi={customUi?.stepInputs?.ai != false}
+					disableAi={disableAi || customUi?.stepInputs?.ai == false}
 					disableSettings={customUi?.settingsPanel === false}
 					{loading}
 					on:reload={() => {

package/package/components/FlowBuilder.svelte.d.ts

@@ -19,6 +19,7 @@ declare const __propDef: {
         }) | undefined;
         diffDrawer?: DiffDrawer | undefined;
         customUi?: FlowBuilderWhitelabelCustomUi | undefined;
+        disableAi?: boolean | undefined;
         computeUnlockedSteps?: ((flow: Flow) => {
             [k: string]: string;
         }) | undefined;
@@ -30,7 +31,9 @@ declare const __propDef: {
         saveInitial: CustomEvent<any>;
         saveDraftOnlyAtNewPath: CustomEvent<any>;
         saveDraft: CustomEvent<any>;
+        saveDraftError: CustomEvent<any>;
         deploy: CustomEvent<any>;
+        deployError: CustomEvent<any>;
         details: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/FlowGraphViewerStep.svelte

@@ -186,7 +186,7 @@ let codeViewer;
 						</Button>
 					</div>
 					<iframe
-						class="w-full grow text-sm"
+						class="w-full grow text-sm h-full"
 						title="embedded script from hub"
 						frameborder="0"
 						src="{$hubBaseUrlStore}/embed/script/{stepDetail.value?.path?.substring(4)}"

package/package/components/FlowStatusViewer.svelte

@@ -11,6 +11,7 @@ export let hideFlowResult = false;
 export let hideTimeline = false;
 export let hideDownloadInGraph = false;
 export let hideNodeDefinition = false;
+export let hideJobId = false;
 export let isOwner = false;
 export let wideResults = false;
 let lastJobId = jobId;
@@ -22,7 +23,8 @@ setContext('FlowStatusViewer', {
     retryStatus,
     hideDownloadInGraph,
     hideNodeDefinition,
-    hideTimeline
+    hideTimeline,
+    hideJobId
 });
 function loadOwner(path) {
     isOwner = loadIsOwner(path, $userStore, workspaceId ?? $workspaceStore);

package/package/components/FlowStatusViewer.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         hideTimeline?: boolean | undefined;
         hideDownloadInGraph?: boolean | undefined;
         hideNodeDefinition?: boolean | undefined;
+        hideJobId?: boolean | undefined;
         isOwner?: boolean | undefined;
         wideResults?: boolean | undefined;
     };

package/package/components/FlowStatusViewerInner.svelte

@@ -818,8 +818,11 @@ let wrapperHeight = 0;
 										selectedNode = 'end'
 										stepDetail = 'end'
 									} else {
-										selectedNode = e.detail
-										stepDetail = e.detail
+										const mod = dfs(job?.raw_flow?.modules ?? [], (m) => m).find(
+											(m) => m?.id === e?.detail
+										)
+										stepDetail = mod
+										selectedNode = e?.detail
 									}
 								} else {
 									stepDetail = e.detail

package/package/components/FlowViewerInner.svelte

@@ -6,13 +6,9 @@ import { ArrowDown, Clipboard } from 'lucide-svelte';
 import YAML from 'yaml';
 import { yaml } from 'svelte-highlight/languages';
 import HighlightTheme from './HighlightTheme.svelte';
+import { filteredContentForExport } from './flows/utils';
 export let flow;
-$: flowFiltered = {
-    summary: flow.summary,
-    description: flow.description,
-    value: flow.value,
-    schema: flow.schema
-};
+$: flowFiltered = filteredContentForExport(flow);
 let rawType = 'yaml';
 function trimStringToLines(inputString, maxLines = 100) {
     const lines = inputString?.split('\n') ?? [];
@@ -57,7 +53,7 @@ let maxLines = 100;
 					variant="border"
 					size="xs"
 					startIcon={{ icon: Clipboard }}
-					btnClasses="absolute top-2 right-2 w-min"
+					btnClasses="absolute top-2 right-2 w-min z-20"
 				>
 					Copy content
 				</Button>

package/package/components/FormatOnSave.svelte

@@ -1,33 +1,16 @@
-<script>import { Paintbrush } from 'lucide-svelte';
-import Button from './common/button/Button.svelte';
-import { formatOnSave } from '../stores';
-import Popover from './Popover.svelte';
-import { getLocalSetting, storeLocalSetting } from '../utils';
-import PaintbrushOff from './icons/PaintbrushOff.svelte';
-const SETTING_NAME = 'formatOnSave';
-function loadSetting() {
-    $formatOnSave = (getLocalSetting(SETTING_NAME) ?? 'true') == 'true';
-}
+<script>import { FORMAT_ON_SAVE_SETTING_NAME, formatOnSave } from '../stores';
+import { storeLocalSetting } from '../utils';
+import Toggle from './Toggle.svelte';
 function storeSetting() {
-    $formatOnSave = !$formatOnSave;
-    storeLocalSetting(SETTING_NAME, $formatOnSave.toString());
+    storeLocalSetting(FORMAT_ON_SAVE_SETTING_NAME, $formatOnSave.toString());
 }
-loadSetting();
 </script>
 
-<Popover>
-	<svelte:fragment slot="text"
-		>{$formatOnSave ? 'Disable' : 'Enable'} auto-formatting</svelte:fragment
-	>
-	<Button
-		size="xs"
-		color="light"
-		startIcon={{
-			icon: !$formatOnSave ? PaintbrushOff : Paintbrush
-		}}
-		btnClasses="text-tertiary"
-		on:click={() => {
-			storeSetting()
-		}}
-	/>
-</Popover>
+<Toggle
+	size="xs"
+	bind:checked={$formatOnSave}
+	on:change={() => {
+		storeSetting()
+	}}
+	options={{ right: 'auto-formatting' }}
+/>

package/package/components/GraphqlSchemaViewer.svelte

@@ -1,6 +1,6 @@
 <script>import { BROWSER } from 'esm-env';
 import { editor as meditor } from 'monaco-editor';
-import 'monaco-editor/esm/vs/basic-languages/graphql/graphql.contribution';
+import '@codingame/monaco-vscode-standalone-languages';
 import { onDestroy, onMount } from 'svelte';
 let divEl = null;
 let editor;

package/package/components/GraphqlSchemaViewer.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import 'monaco-editor/esm/vs/basic-languages/graphql/graphql.contribution';
+import '@codingame/monaco-vscode-standalone-languages';
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/HighlightCode.svelte

@@ -8,6 +8,7 @@ import javascript from 'svelte-highlight/languages/javascript';
 import sql from 'svelte-highlight/languages/sql';
 import powershell from 'svelte-highlight/languages/powershell';
 import php from 'svelte-highlight/languages/php';
+import rust from 'svelte-highlight/languages/rust';
 import { Button } from './common';
 import { copyToClipboard } from '../utils';
 import { ClipboardCopy } from 'lucide-svelte';
@@ -47,6 +48,8 @@ function getLang(lang) {
             return powershell;
         case 'php':
             return php;
+        case 'rust':
+            return rust;
         default:
             return typescript;
     }

package/package/components/InstanceNameEditor.svelte

@@ -0,0 +1,64 @@
+<script>import { Pencil } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import Button from './common/button/Button.svelte';
+import Popup from './common/popup/Popup.svelte';
+import { offset, flip, shift } from 'svelte-floating-ui/dom';
+import ChangeInstanceUsernameInner from './ChangeInstanceUsernameInner.svelte';
+export let value;
+export let email;
+export let username = undefined;
+export let automateUsernameCreation = false;
+const dispatch = createEventDispatcher();
+function save() {
+    dispatch('save', value);
+}
+</script>
+
+<Popup
+	let:close
+	floatingConfig={{
+		strategy: 'fixed',
+		placement: 'left-end',
+		middleware: [offset(8), flip(), shift()]
+	}}
+>
+	<svelte:fragment slot="button">
+		<Button nonCaptureEvent={true} size="xs" color="light" endIcon={{ icon: Pencil }}>Edit</Button>
+	</svelte:fragment>
+	<div class="flex flex-col gap-8 max-w-sm">
+		{#if automateUsernameCreation && username}
+			<ChangeInstanceUsernameInner {email} {username} on:renamed />
+		{/if}
+		<label class="block text-primary">
+			<div class="pb-1 text-xs text-secondary">Name</div>
+			<div class="flex w-full">
+				<input
+					type="text"
+					bind:value
+					class="!w-auto grow"
+					on:click|stopPropagation={() => {}}
+					on:keydown|stopPropagation
+					on:keypress|stopPropagation={({ key }) => {
+						if (key === 'Enter') {
+							save()
+							close(null)
+						}
+					}}
+				/>
+			</div>
+			<Button
+				size="xs"
+				color="blue"
+				buttonType="button"
+				btnClasses="mt-2 "
+				aria-label="Save ID"
+				on:click={() => {
+					save()
+					close(null)
+				}}
+			>
+				Update name
+			</Button>
+		</label>
+	</div>
+</Popup>

package/package/components/InstanceNameEditor.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value: string | undefined;
+        email: string;
+        username?: string | undefined;
+        automateUsernameCreation?: boolean | undefined;
+    };
+    events: {
+        renamed: CustomEvent<any>;
+        keydown: KeyboardEvent;
+        save: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InstanceNameEditorProps = typeof __propDef.props;
+export type InstanceNameEditorEvents = typeof __propDef.events;
+export type InstanceNameEditorSlots = typeof __propDef.slots;
+export default class InstanceNameEditor extends SvelteComponent<InstanceNameEditorProps, InstanceNameEditorEvents, InstanceNameEditorSlots> {
+}
+export {};

package/package/components/LightweightArgInput.svelte

@@ -248,11 +248,9 @@ function addItemByItemsType() {
 								dispatch('focus')
 							}}
 							type="number"
-							class={twMerge(
-								valid && error == ''
-									? ''
-									: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30'
-							)}
+							class={valid && error == ''
+								? ''
+								: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30'}
 							placeholder={placeholder ?? defaultValue ?? ''}
 							bind:value
 							min={extra['min']}
@@ -264,12 +262,9 @@ function addItemByItemsType() {
 						on:pointerdown={(e) => {
 							e?.stopPropagation()
 						}}
-						class={twMerge(
-							valid && error == ''
-								? ''
-								: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30',
-							'w-full'
-						)}
+						class={valid && error == ''
+							? ''
+							: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30'}
 						bind:checked={value}
 					/>
 					{#if type == 'boolean' && value == undefined}