windmill-components 1.408.2 → 1.430.3

package/package/components/FlowStatusViewerInner.svelte.d.ts

@@ -14,24 +14,24 @@ declare const __propDef: {
             length: number;
         } | undefined;
         innerModule?: FlowModuleValue | undefined;
+        globalRefreshes?: Record<string, (clear: any, root: any) => Promise<void>> | undefined;
         render?: boolean | undefined;
         isOwner?: boolean | undefined;
         selectedNode?: string | undefined;
         globalModuleStates: Writable<Record<string, GraphModuleState>>[];
         globalDurationStatuses: Writable<Record<string, DurationStatus>>[];
-        globalRefreshes?: Record<string, (loopJob: {
-            index: number;
-            job: string;
-        }) => Promise<void>> | undefined;
         childFlow?: boolean | undefined;
+        isSubflow?: boolean | undefined;
         reducedPolling?: boolean | undefined;
         wideResults?: boolean | undefined;
         hideFlowResult?: boolean | undefined;
+        workspace?: string | undefined;
+        prefix?: string | undefined;
+        subflowParentsGlobalModuleStates?: Writable<Record<string, GraphModuleState>>[] | undefined;
+        subflowParentsDurationStatuses?: Writable<Record<string, DurationStatus>>[] | undefined;
+        isForloopSelected?: boolean | undefined;
+        parentRecursiveRefresh?: Record<string, (clear: any, root: any) => Promise<void>> | undefined;
         job?: Job | undefined;
-        refresh?: ((root: boolean, loopJob: {
-            index: number;
-            job: string;
-        } | undefined) => Promise<void>) | undefined;
     };
     events: {
         jobsLoaded: CustomEvent<any>;
@@ -46,9 +46,5 @@ export type FlowStatusViewerInnerProps = typeof __propDef.props;
 export type FlowStatusViewerInnerEvents = typeof __propDef.events;
 export type FlowStatusViewerInnerSlots = typeof __propDef.slots;
 export default class FlowStatusViewerInner extends SvelteComponent<FlowStatusViewerInnerProps, FlowStatusViewerInnerEvents, FlowStatusViewerInnerSlots> {
-    get refresh(): (root: boolean, loopJob: {
-        index: number;
-        job: string;
-    } | undefined) => Promise<void>;
 }
 export {};

package/package/components/FlowTimeline.svelte

@@ -146,7 +146,7 @@ onDestroy(() => {
 				{/if}
 
 				<div class="px-2 py-2 grid grid-cols-6 w-full">
-					<div class="truncate">{k}</div>
+					<div class="truncate">{k.startsWith('subflow:') ? k.substring(8) : k}</div>
 					<div class="col-span-5 flex min-h-6">
 						{#if min && total}
 							<div class="flex flex-col gap-2 w-full p-2 ml-4">

package/package/components/FlowTutorials.svelte

@@ -1,29 +1,29 @@
 <script>import { skipAllTodos } from '../tutorialUtils';
-import FlowBranchAll from './tutorials/FlowBranchAll.svelte';
-import FlowBranchOne from './tutorials/FlowBranchOne.svelte';
+import FlowBuilderTutorialBranchAll from './tutorials/FlowBuilderTutorialBranchAll.svelte';
+import FlowBuilderTutorialBranchOne from './tutorials/FlowBuilderTutorialBranchOne.svelte';
 import FlowBuilderTutorialSimpleFlow from './tutorials/FlowBuilderTutorialSimpleFlow.svelte';
-import FlowBuilderTutorialsForLoop from './tutorials/FlowBuilderTutorialsForLoop.svelte';
-import FlowErrorHandler from './tutorials/FlowErrorHandler.svelte';
+import FlowBuilderTutorialForLoop from './tutorials/FlowBuilderTutorialForLoop.svelte';
+import FlowBuilderTutorialErrorHandler from './tutorials/FlowBuilderTutorialErrorHandler.svelte';
 let flowBuilderTutorialSimpleFlow = undefined;
-let flowBuilderTutorialsForLoop = undefined;
-let flowBranchOne = undefined;
-let flowBranchAll = undefined;
-let flowErrorHandler = undefined;
+let flowBuilderTutorialForLoop = undefined;
+let flowBuilderTutorialBranchOne = undefined;
+let flowBuilderTutorialBranchAll = undefined;
+let flowBuilderTutorialErrorHandler = undefined;
 export function runTutorialById(id, indexToInsertAt) {
     if (id === 'forloop') {
-        flowBuilderTutorialsForLoop?.runTutorial(indexToInsertAt);
+        flowBuilderTutorialForLoop?.runTutorial(indexToInsertAt);
     }
     else if (id === 'branchone') {
-        flowBranchOne?.runTutorial();
+        flowBuilderTutorialBranchOne?.runTutorial();
     }
     else if (id === 'branchall') {
-        flowBranchAll?.runTutorial();
+        flowBuilderTutorialBranchAll?.runTutorial();
     }
     else if (id === 'action') {
         flowBuilderTutorialSimpleFlow?.runTutorial();
     }
     else if (id === 'error-handler') {
-        flowErrorHandler?.runTutorial();
+        flowBuilderTutorialErrorHandler?.runTutorial();
     }
 }
 function skipAll() {
@@ -37,12 +37,27 @@ function skipAll() {
 	on:skipAll={skipAll}
 	on:reload
 />
-<FlowBuilderTutorialsForLoop
-	bind:this={flowBuilderTutorialsForLoop}
+<FlowBuilderTutorialForLoop
+	bind:this={flowBuilderTutorialForLoop}
+	on:error
+	on:skipAll={skipAll}
+	on:reload
+/>
+<FlowBuilderTutorialBranchOne
+	bind:this={flowBuilderTutorialBranchOne}
+	on:error
+	on:skipAll={skipAll}
+	on:reload
+/>
+<FlowBuilderTutorialBranchAll
+	bind:this={flowBuilderTutorialBranchAll}
+	on:error
+	on:skipAll={skipAll}
+	on:reload
+/>
+<FlowBuilderTutorialErrorHandler
+	bind:this={flowBuilderTutorialErrorHandler}
 	on:error
 	on:skipAll={skipAll}
 	on:reload
 />
-<FlowBranchOne bind:this={flowBranchOne} on:error on:skipAll={skipAll} on:reload />
-<FlowBranchAll bind:this={flowBranchAll} on:error on:skipAll={skipAll} on:reload />
-<FlowErrorHandler bind:this={flowErrorHandler} on:error on:skipAll={skipAll} on:reload />

package/package/components/FlowViewerInner.svelte

@@ -54,9 +54,8 @@ let maxLines = 100;
 					size="xs"
 					startIcon={{ icon: Clipboard }}
 					btnClasses="absolute top-2 right-2 w-min z-20"
-				>
-					Copy content
-				</Button>
+					iconOnly
+				/>
 
 				<div class={shouldDisplayLoadMore ? 'code-container' : ''}>
 					<Highlight

package/package/components/FolderEditor.svelte

@@ -46,6 +46,7 @@ async function addToFolder() {
             owner: (ownerKind == 'user' ? 'u/' : 'g/') + ownerItem
         }
     });
+    ownerItem = '';
     loadFolder();
 }
 let folderNotFound = undefined;
@@ -167,7 +168,7 @@ async function updateFolder() {
 					<AutoComplete
 						required
 						noInputStyles
-						items={ownerKind === 'user' ? usernames : groups}
+						items={ownerKind === 'user' ? usernames.filter((x) => !perms?.map((y) => y.owner_name).includes('u/'+x)) : groups.filter((x) => !perms?.map((y) => y.owner_name).includes('g/'+x))}
 						bind:selectedItem={ownerItem}
 					/>
 					{#if ownerKind == 'group'}

package/package/components/InputTransformForm.svelte

@@ -1,3 +1,12 @@
+<script context="module">
+	const dynamicTemplateRegexPairs = buildPrefixRegex([
+		'flow_input',
+		'results',
+		'resource',
+		'variable'
+	])
+</script>
+
 <script>import { createEventDispatcher, getContext } from 'svelte';
 import ArgInput from './ArgInput.svelte';
 import FieldHeader from './FieldHeader.svelte';
@@ -7,11 +16,16 @@ import SimpleEditor from './SimpleEditor.svelte';
 import { Button } from './common';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import { tick } from 'svelte';
+import { fade } from 'svelte/transition';
+import { buildPrefixRegex } from './flows/previousResults';
 import TemplateEditor from './TemplateEditor.svelte';
 import { setInputCat as computeInputCat, isCodeInjection } from '../utils';
-import { FunctionSquare, Plug } from 'lucide-svelte';
+import { FunctionSquare } from 'lucide-svelte';
 import { getResourceTypes } from './resourceTypesStore';
 import StepInputGen from './copilot/StepInputGen.svelte';
+import { twMerge } from 'tailwind-merge';
+import FlowPlugConnect from './FlowPlugConnect.svelte';
 export let schema;
 export let arg;
 export let argName;
@@ -28,10 +42,12 @@ export let enableAi = false;
 let monaco = undefined;
 let monacoTemplate = undefined;
 let argInput = undefined;
+let focusedPrev = false;
 const dispatch = createEventDispatcher();
 $: inputCat = computeInputCat(schema?.properties?.[argName].type, schema?.properties?.[argName].format, schema?.properties?.[argName].items?.type, schema?.properties?.[argName].enum, schema?.properties?.[argName].contentEncoding);
 let propertyType = getPropertyType(arg);
 const { shouldUpdatePropertyType, exprsToSet } = getContext('FlowCopilotContext') || {};
+const { inputMatches, focusProp, propPickerConfig } = getContext('PropPickerWrapper');
 function setExpr() {
     const newArg = $exprsToSet?.[argName];
     if (newArg) {
@@ -92,6 +108,45 @@ function setPropertyType(rawValue) {
         }
     }
 }
+let codeInjectionDetected = false;
+function checkCodeInjection(rawValue) {
+    if (!arg || !rawValue || rawValue.length < 3 || !dynamicTemplateRegexPairs) {
+        return undefined;
+    }
+    if (rawValue.trim() !== rawValue) {
+        return undefined;
+    }
+    const matches = dynamicTemplateRegexPairs.filter(({ regex }) => regex.test(rawValue));
+    if (matches.length > 0) {
+        return matches.map((m) => ({ word: m.word, value: rawValue }));
+    }
+    return undefined;
+}
+async function setJavaScriptExpr(rawValue) {
+    arg = {
+        type: 'javascript',
+        expr: rawValue
+    };
+    propertyType = 'javascript';
+    monaco?.setCode('');
+    monaco?.insertAtCursor(rawValue);
+    await tick();
+    monaco?.focus();
+    await tick();
+    monaco?.setCursorToEnd();
+}
+function handleKeyUp(e) {
+    if (e.key === 'Tab' &&
+        isStaticTemplate(inputCat) &&
+        propertyType == 'static' &&
+        !noDynamicToggle &&
+        codeInjectionDetected) {
+        setJavaScriptExpr(arg.value);
+    }
+    else {
+        stepInputGen?.onKeyUp?.(e);
+    }
+}
 function isStaticTemplate(inputCat) {
     return inputCat === 'string' || inputCat === 'sql' || inputCat == 'yaml';
 }
@@ -123,13 +178,32 @@ function onFocus() {
         });
     }
 }
-const { focusProp, propPickerConfig } = getContext('PropPickerWrapper');
-$: isStaticTemplate(inputCat) && propertyType == 'static' && setPropertyType(arg?.value);
+$: updateStaticInput(inputCat, propertyType, arg);
+function updateStaticInput(inputCat, propertyType, arg) {
+    if (!isStaticTemplate(inputCat)) {
+        return;
+    }
+    if (propertyType == 'static') {
+        setPropertyType(arg?.value);
+        codeInjectionDetected = checkCodeInjection(arg?.value) != undefined;
+    }
+    else if (propertyType == 'javascript' && focused) {
+        // setPropertyType(arg?.expr)
+        $inputMatches = checkCodeInjection(arg?.expr);
+    }
+}
 function setDefaultCode() {
     if (!arg?.value) {
         monacoTemplate?.setCode(schema.properties?.[argName].default);
     }
 }
+function updateFocused(newFocused) {
+    if (focusedPrev && !newFocused) {
+        $inputMatches = undefined;
+    }
+    focusedPrev = focused;
+}
+$: updateFocused(focused);
 $: schema?.properties?.[argName].default && setDefaultCode();
 let resourceTypes = undefined;
 async function loadResourceTypes() {
@@ -138,11 +212,21 @@ async function loadResourceTypes() {
 let focused = false;
 let stepInputGen = undefined;
 loadResourceTypes();
+$: connecting =
+    $propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect';
 </script>
 
 {#if arg != undefined}
-	<div class={$$props.class}>
-		<div class="flex flex-row justify-between gap-1 pb-1">
+	<div
+		class={twMerge(
+			'pl-2 pt-2 pb-2 ml-2 relative hover:bg-surface hover:shadow-md transition-all duration-200',
+			$propPickerConfig?.propName == argName
+				? 'bg-surface border-l-4 border-blue-500 shadow-md rounded-l-md z-50 '
+				: 'hover:rounded-md',
+			$$props.class
+		)}
+	>
+		<div class="flex flex-row justify-between gap-1 pb-1 px-2">
 			<div class="flex flex-wrap grow">
 				<FieldHeader
 					label={argName}
@@ -264,21 +348,32 @@ loadResourceTypes();
 								<ToggleButton small label="Static" value="static" />
 							{/if}
 
-							<ToggleButton
-								small
-								light
-								tooltip="JavaScript expression ('flow_input' or 'results')."
-								value="javascript"
-								icon={FunctionSquare}
-							/>
+							{#if codeInjectionDetected && propertyType == 'static'}
+								<Button
+									size="xs2"
+									color="light"
+									btnClasses="font-normal text-xs w-fit bg-green-100 text-green-800 hover:bg-green-100 dark:text-green-300 dark:bg-green-700 dark:hover:bg-green-600"
+									on:click={() => setJavaScriptExpr(arg.value)}
+								>
+									<span class="font-normal whitespace-nowrap flex gap-2 items-center"
+										><FunctionSquare size={14} /> detected -
+										<span class="font-bold">TAB</span>
+									</span>
+								</Button>
+							{:else}
+								<ToggleButton
+									small
+									light
+									tooltip="JavaScript expression ('flow_input' or 'results')."
+									value="javascript"
+									icon={FunctionSquare}
+								/>
+							{/if}
 						</ToggleButtonGroup>
 					</div>
 
-					<Button
-						title="Connect to another node's output"
-						variant="border"
-						color="light"
-						size="xs2"
+					<FlowPlugConnect
+						{connecting}
 						on:click={() => {
 							focusProp(argName, 'connect', (path) => {
 								connectProperty(path)
@@ -286,135 +381,154 @@ loadResourceTypes();
 								return true
 							})
 						}}
-						id="flow-editor-plug"
-					>
-						<Plug size={16} /> &rightarrow;
-					</Button>
+					/>
 				</div>
 			{/if}
 		</div>
 
 		<div class="max-w-xs" />
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div
-			class="relative {$propPickerConfig?.propName == argName
-				? 'outline outline-offset-1 outline-1 outline-blue-500 rounded-md'
-				: ''}"
-			on:keyup={stepInputGen?.onKeyUp}
-		>
-			{#if $propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect'}
+		<div class="relative" on:keyup={handleKeyUp}>
+			<!-- {#if $propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect'}
 				<span
 					class={'text-white  z-50 px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute top-0 right-0 bg-blue-500'}
 				>
 					Connect input &rightarrow;
 				</span>
-			{/if}
+			{/if} -->
 			<!-- {inputCat}
 			{propertyType} -->
-			{#if isStaticTemplate(inputCat) && propertyType == 'static' && !noDynamicToggle}
-				{#if argName && schema?.properties?.[argName]?.description}
-					<div class="text-xs italic pb-1 text-secondary">
-						<pre class="font-main">{schema.properties[argName].description}</pre>
-					</div>
-				{/if}
-				<div class="mt-2 min-h-[28px]">
-					{#if arg}
-						<TemplateEditor
-							bind:this={monacoTemplate}
-							{extraLib}
+			<div class="relative flex flex-row items-top gap-2 justify-between">
+				<div class="min-w-0 grow">
+					{#if isStaticTemplate(inputCat) && propertyType == 'static' && !noDynamicToggle}
+						{#if argName && schema?.properties?.[argName]?.description}
+							<div class="text-xs italic pb-1 text-secondary">
+								<pre class="font-main">{schema.properties[argName].description}</pre>
+							</div>
+						{/if}
+						<div class="mt-2 min-h-[28px]">
+							{#if arg}
+								<TemplateEditor
+									bind:this={monacoTemplate}
+									{extraLib}
+									on:focus={onFocus}
+									on:blur={() => {
+										focused = false
+									}}
+									bind:code={arg.value}
+									fontSize={14}
+									on:change={() => {
+										dispatch('change', { argName })
+									}}
+								/>
+							{/if}
+						</div>
+					{:else if (propertyType === undefined || propertyType == 'static') && schema?.properties?.[argName]}
+						<ArgInput
+							{resourceTypes}
+							noMargin
+							compact
+							bind:this={argInput}
 							on:focus={onFocus}
 							on:blur={() => {
 								focused = false
 							}}
-							bind:code={arg.value}
-							fontSize={14}
+							shouldDispatchChanges
 							on:change={() => {
 								dispatch('change', { argName })
 							}}
+							label={argName}
+							bind:editor={monaco}
+							bind:description={schema.properties[argName].description}
+							bind:value={arg.value}
+							type={schema.properties[argName].type}
+							oneOf={schema.properties[argName].oneOf}
+							required={schema.required?.includes(argName)}
+							bind:pattern={schema.properties[argName].pattern}
+							bind:valid={inputCheck}
+							defaultValue={schema.properties[argName].default}
+							bind:enum_={schema.properties[argName].enum}
+							bind:format={schema.properties[argName].format}
+							contentEncoding={schema.properties[argName].contentEncoding}
+							bind:itemsType={schema.properties[argName].items}
+							properties={schema.properties[argName].properties}
+							nestedRequired={schema.properties[argName].required}
+							displayHeader={false}
+							extra={argExtra}
+							{variableEditor}
+							{itemPicker}
+							bind:pickForField
+							showSchemaExplorer
+							nullable={schema.properties[argName].nullable}
+							bind:title={schema.properties[argName].title}
+							bind:placeholder={schema.properties[argName].placeholder}
 						/>
+					{:else if arg.expr != undefined}
+						<div class="border mt-2">
+							<SimpleEditor
+								bind:this={monaco}
+								bind:code={arg.expr}
+								on:change={() => {
+									dispatch('change', { argName })
+								}}
+								{extraLib}
+								lang="javascript"
+								shouldBindKey={false}
+								on:focus={() => {
+									focused = true
+									focusProp(argName, 'insert', (path) => {
+										monaco?.insertAtCursor(path)
+										return false
+									})
+								}}
+								on:change={() => {
+									dispatch('change', { argName })
+								}}
+								on:blur={() => {
+									focused = false
+								}}
+								autoHeight
+							/>
+						</div>
+						<DynamicInputHelpBox />
+						<div class="mb-2" />
+					{:else}
+						Not recognized input type {argName} ({arg.expr}, {propertyType})
+						<div class="flex mt-2">
+							<Button
+								variant="border"
+								size="xs"
+								on:click={() => {
+									arg.expr = ''
+								}}>Set expr to empty string</Button
+							></div
+						>
 					{/if}
 				</div>
-			{:else if (propertyType === undefined || propertyType == 'static') && schema?.properties?.[argName]}
-				<ArgInput
-					{resourceTypes}
-					noMargin
-					compact
-					bind:this={argInput}
-					on:focus={onFocus}
-					on:blur={() => {
-						focused = false
-					}}
-					shouldDispatchChanges
-					on:change={() => {
-						dispatch('change', { argName })
-					}}
-					label={argName}
-					bind:editor={monaco}
-					bind:description={schema.properties[argName].description}
-					bind:value={arg.value}
-					type={schema.properties[argName].type}
-					oneOf={schema.properties[argName].oneOf}
-					required={schema.required?.includes(argName)}
-					bind:pattern={schema.properties[argName].pattern}
-					bind:valid={inputCheck}
-					defaultValue={schema.properties[argName].default}
-					bind:enum_={schema.properties[argName].enum}
-					bind:format={schema.properties[argName].format}
-					contentEncoding={schema.properties[argName].contentEncoding}
-					bind:itemsType={schema.properties[argName].items}
-					properties={schema.properties[argName].properties}
-					nestedRequired={schema.properties[argName].required}
-					displayHeader={false}
-					extra={argExtra}
-					{variableEditor}
-					{itemPicker}
-					bind:pickForField
-					showSchemaExplorer
-					nullable={schema.properties[argName].nullable}
-					bind:title={schema.properties[argName].title}
-					bind:placeholder={schema.properties[argName].placeholder}
-				/>
-			{:else if arg.expr != undefined}
-				<div class="border mt-2">
-					<SimpleEditor
-						bind:this={monaco}
-						bind:code={arg.expr}
-						on:change={() => {
-							dispatch('change', { argName })
-						}}
-						{extraLib}
-						lang="javascript"
-						shouldBindKey={false}
-						on:focus={() => {
-							focused = true
-							focusProp(argName, 'insert', (path) => {
-								monaco?.insertAtCursor(path)
-								return false
-							})
-						}}
-						on:change={() => {
-							dispatch('change', { argName })
-						}}
-						on:blur={() => {
-							focused = false
-						}}
-						autoHeight
-					/>
-				</div>
-				<DynamicInputHelpBox />
-				<div class="mb-2" />
-			{:else}
-				Not recognized input type {argName} ({arg.expr}, {propertyType})
-				<div class="flex mt-2">
-					<Button
-						variant="border"
-						size="xs"
-						on:click={() => {
-							arg.expr = ''
-						}}>Set expr to empty string</Button
-					></div
-				>
-			{/if}
+
+				{#if $propPickerConfig?.propName == argName}
+					<div
+						class="text-blue-500 absolute top-2 lg:-right-2.5 -right-1"
+						in:fade={{ duration: 200 }}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="16"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="currentColor"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<polyline points="24 24 12 12 24 0" />
+						</svg>
+					</div>
+				{:else}
+					<div class="w-0" />
+				{/if}
+			</div>
 		</div>
 	</div>
 {/if}

package/package/components/InputTransformSchemaForm.svelte

@@ -52,24 +52,26 @@ $: {
 
 <div class="w-full {clazz}">
 	{#if enableAi}
-		<StepInputsGen
-			{pickableProperties}
-			argNames={keys
-				? keys.filter(
-						(argName) =>
-							Object.keys(schema.properties ?? {}).includes(argName) &&
-							Object.keys(args ?? {}).includes(argName) &&
-							((args[argName].type === 'static' && !args[argName].value) ||
-								(args[argName].type === 'javascript' && !args[argName].expr))
-				  )
-				: []}
-			{schema}
-		/>
+		<div class="px-0.5 pt-0.5">
+			<StepInputsGen
+				{pickableProperties}
+				argNames={keys
+					? keys.filter(
+							(argName) =>
+								Object.keys(schema.properties ?? {}).includes(argName) &&
+								Object.keys(args ?? {}).includes(argName) &&
+								((args[argName].type === 'static' && !args[argName].value) ||
+									(args[argName].type === 'javascript' && !args[argName].expr))
+					  )
+					: []}
+				{schema}
+			/>
+		</div>
 	{/if}
 	{#if keys.length > 0}
 		{#each keys as argName (argName)}
 			{#if (!filter || filter.includes(argName)) && Object.keys(schema.properties ?? {}).includes(argName)}
-				<div class="z-10 pt-4">
+				<div class="pt-2 relative">
 					<InputTransformForm
 						{previousModuleId}
 						bind:arg={args[argName]}
@@ -113,7 +115,7 @@ $: {
 >
 	<div
 		slot="submission"
-		class="flex flex-row-reverse w-full bg-surface border-t border-gray-200 rounded-bl-lg rounded-br-lg"
+		class="flex flex-row-reverse w-full border-t border-gray-200 rounded-bl-lg rounded-br-lg"
 	>
 		<Button
 			variant="border"