windmill-components 1.58.1 → 1.60.0

package/components/Tooltip.svelte

@@ -1,11 +1,12 @@
 <script>import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import Popover from './Popover.svelte';
+export let light = false;
 </script>
 
 <Popover notClickable>
 	<Icon
-		class="text-gray-500 font-thin inline-block align-middle w-4"
+		class="{light ? 'text-gray-300' : ' text-gray-500'} font-thin inline-block align-middle w-4"
 		data={faInfoCircle}
 		scale={0.8}
 	/>

package/components/Tooltip.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        light?: boolean | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/apps/components/DisplayComponent.svelte

@@ -6,7 +6,7 @@ let result = undefined;
 export const staticOutputs = ['result', 'loading'];
 </script>
 
-<RunnableWrapper bind:result bind:componentInput {id}>
+<RunnableWrapper flexWrap bind:result bind:componentInput {id}>
 	<div class="w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm">
 		Results
 	</div>

package/components/apps/components/buttons/AppButton.svelte

@@ -40,6 +40,7 @@ $: loading = isLoading && ownClick;
 <InputValue {id} input={configuration.size} bind:value={size} />
 
 <RunnableWrapper
+	flexWrap
 	bind:runnableComponent
 	bind:componentInput
 	{id}
@@ -66,13 +67,9 @@ $: loading = isLoading && ownClick;
 			}}
 			{size}
 			{color}
+			{loading}
 		>
 			{labelValue}
-			{#if !loading}
-				<span class="w-5" />
-			{:else}
-				<Loader2 class="animate-spin ml-1" size={14} />
-			{/if}
 		</Button>
 	</AlignWrapper>
 </RunnableWrapper>

package/components/apps/components/dataDisplay/AppBarChart.svelte

@@ -41,7 +41,7 @@ $: data = {
 <InputValue {id} input={configuration.theme} bind:value={theme} />
 <InputValue {id} input={configuration.line} bind:value={lineChart} />
 
-<RunnableWrapper autoRefresh bind:componentInput {id} bind:result>
+<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:result>
 	{#if result}
 		{#if lineChart}
 			<Line {data} {options} />

package/components/apps/components/dataDisplay/AppHtml.svelte

@@ -9,7 +9,7 @@ export const staticOutputs = ['result', 'loading'];
 let result = undefined;
 </script>
 
-<RunnableWrapper bind:componentInput {id} bind:result>
+<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
 	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
 		<div
 			on:pointerdown={(e) => {

package/components/apps/components/dataDisplay/AppPieChart.svelte

@@ -36,7 +36,7 @@ $: data = {
 <InputValue {id} input={configuration.theme} bind:value={theme} />
 <InputValue {id} input={configuration.doughnutStyle} bind:value={doughnut} />
 
-<RunnableWrapper autoRefresh bind:componentInput {id} bind:result>
+<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:result>
 	{#if result}
 		{#if doughnut}
 			<Doughnut {data} {options} />

package/components/apps/components/dataDisplay/AppScatterChart.svelte

@@ -39,7 +39,7 @@ $: data = {
 <InputValue {id} input={configuration.zoomable} bind:value={zoomable} />
 <InputValue {id} input={configuration.pannable} bind:value={pannable} />
 
-<RunnableWrapper autoRefresh bind:componentInput {id} bind:result>
+<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:result>
 	{#if result}
 		<Scatter {data} {options} />
 	{/if}

package/components/apps/components/dataDisplay/AppText.svelte

@@ -1,4 +1,8 @@
-<script>import AlignWrapper from '../helpers/AlignWrapper.svelte';
+<script>import { Clipboard } from 'lucide-svelte';
+import { copyToClipboard } from '../../../../utils';
+import Button from '../../../common/button/Button.svelte';
+import Popover from '../../../Popover.svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
@@ -10,6 +14,7 @@ export const staticOutputs = ['result', 'loading'];
 let extraStyle = undefined;
 let result = undefined;
 let style = undefined;
+let copyButton;
 function getComponent() {
     switch (style) {
         case 'Title':
@@ -44,20 +49,38 @@ $: style && (classes = getClasses());
 
 <InputValue {id} input={configuration.extraStyle} bind:value={extraStyle} />
 <InputValue {id} input={configuration.style} bind:value={style} />
+<InputValue {id} input={configuration.copyButton} bind:value={copyButton} />
 
-<RunnableWrapper bind:componentInput {id} bind:result>
+<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
 	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
 		{#if !result || result === ''}
 			<div class="text-gray-400 bg-gray-100 flex justify-center items-center h-full w-full">
 				No text
 			</div>
-		{:else}<svelte:element
-				this={component}
-				class="whitespace-pre-wrap {classes}"
-				style={extraStyle}
-			>
-				{String(result)}
-			</svelte:element>
+		{:else}
+			<div class="flex flex-wrap gap-2">
+				<svelte:element
+					this={component}
+					class="whitespace-pre-wrap {classes}"
+					style={extraStyle}
+				>
+					{String(result)}
+				</svelte:element>
+				{#if copyButton && result}
+					<Popover notClickable>
+						<Button
+							size="xs"
+							btnClasses="!px-2"
+							on:click={() => copyToClipboard(result)}
+						>
+							<Clipboard size={14} strokeWidth={2} />
+						</Button>
+						<svelte:fragment slot="text">
+							Copy to clipboard
+						</svelte:fragment>
+					</Popover>
+				{/if}
+			</div>
 		{/if}
 	</AlignWrapper>
 </RunnableWrapper>

package/components/apps/components/dataDisplay/AppTimeseries.svelte

@@ -50,7 +50,7 @@ $: data = {
 <InputValue {id} input={configuration.zoomable} bind:value={zoomable} />
 <InputValue {id} input={configuration.pannable} bind:value={pannable} />
 
-<RunnableWrapper autoRefresh bind:componentInput {id} bind:result>
+<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:result>
 	{#if result}
 		<Scatter {data} {options} />
 	{/if}

package/components/apps/components/form/AppForm.svelte

@@ -1,5 +1,7 @@
 <script>import { Button } from '../../../common';
+import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
+import { Icon } from 'svelte-awesome';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
@@ -16,6 +18,8 @@ let color;
 let size;
 let runnableComponent;
 let isLoading = false;
+$: noInputs =
+    componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0;
 $: outputs = $worldStore?.outputsById[id];
 $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
@@ -32,6 +36,7 @@ $: outputs?.loading.subscribe({
 <InputValue {id} input={configuration.size} bind:value={size} />
 
 <RunnableWrapper
+	defaultUserInput
 	noMinH
 	bind:runnableComponent
 	bind:componentInput
@@ -39,39 +44,47 @@ $: outputs?.loading.subscribe({
 	{extraQueryParams}
 	autoRefresh={false}
 	forceSchemaDisplay={true}
+	runnableClass="!block"
 >
 	<AlignWrapper {horizontalAlignment}>
-		<div class="flex flex-col gap-2 px-4 w-full ">
+		<div class="flex flex-col gap-2 px-4 w-full">
 			<div>
-				{#if componentInput?.type != 'runnable' || Object.values(componentInput?.fields ?? {}).filter((x) => x.type == 'user').length == 0}
-					<span class="text-gray-600 italic text-sm py-2">
-						Run forms are meant to be associated with a runnable with some user inputs. Pick a
-						runnable and set some 'Runnable Inputs' to 'User Input'
-					</span>
+				{#if noInputs}
+					<div class="text-gray-600 italic text-sm my-4">
+						Run forms are associated with a runnable that has user inputs.
+						<br />
+						Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
+						<strong>
+							User Input
+							<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
+						</strong>
+					</div>
 				{/if}
 			</div>
 			<div class="flex justify-end">
-				<Button
-					loading={isLoading}
-					btnClasses="my-1"
-					on:pointerdown={(e) => {
-						e?.stopPropagation()
-						window.dispatchEvent(new Event('pointerup'))
-					}}
-					on:click={() => {
-						runnableComponent?.runComponent()
+				{#if !noInputs}
+					<Button
+						loading={isLoading}
+						btnClasses="my-1"
+						on:pointerdown={(e) => {
+							e?.stopPropagation()
+							window.dispatchEvent(new Event('pointerup'))
+						}}
+						on:click={() => {
+							runnableComponent?.runComponent()
 
-						if (recomputeIds) {
-							recomputeIds.forEach((id) => {
-								$runnableComponents[id]?.()
-							})
-						}
-					}}
-					{size}
-					{color}
-				>
-					{labelValue}
-				</Button>
+							if (recomputeIds) {
+								recomputeIds.forEach((id) => {
+									$runnableComponents[id]?.()
+								})
+							}
+						}}
+						{size}
+						{color}
+					>
+						{labelValue}
+					</Button>
+				{/if}
 			</div>
 		</div>
 	</AlignWrapper>

package/components/apps/components/helpers/RunnableComponent.svelte

@@ -16,6 +16,9 @@ export let autoRefresh = true;
 export let result = undefined;
 export let forceSchemaDisplay = false;
 export let noMinH = false;
+export let defaultUserInput = false;
+export let flexWrap = false;
+export let wrapperClass = '';
 const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend } = getContext('AppEditorContext');
 onMount(() => {
     if (autoRefresh) {
@@ -87,7 +90,7 @@ async function loadSchemaAndInputsByName() {
 function reloadInputs(schema) {
     let schemaCopy = JSON.parse(JSON.stringify(schema));
     const result = {};
-    const newInputs = schemaToInputsSpec(schemaCopy);
+    const newInputs = schemaToInputsSpec(schemaCopy, defaultUserInput);
     if (!fields) {
         return newInputs;
     }
@@ -99,7 +102,9 @@ function reloadInputs(schema) {
             result[key] = newInput;
         }
         else {
-            if (fieldTypeToTsType(newInput.fieldType) !== fieldTypeToTsType(oldInput.fieldType)) {
+            if (fieldTypeToTsType(newInput.fieldType) !== fieldTypeToTsType(oldInput.fieldType) ||
+                newInput.format !== oldInput.format ||
+                newInput.subFieldType !== oldInput.subFieldType) {
                 result[key] = newInput;
             }
             else {
@@ -188,7 +193,7 @@ async function executeComponent(noToast = false) {
         });
     });
     if (njob) {
-        $jobs = [...$jobs, { job: njob, component: id }];
+        $jobs = [{ job: njob, component: id }, ...$jobs];
     }
 }
 export async function runComponent() {
@@ -225,7 +230,7 @@ let lastStartedAt = Date.now();
 	bind:this={testJobLoader}
 />
 
-<div class="h-full flex relative flex-row flex-wrap">
+<div class="h-full flex relative flex-row flex-wrap {wrapperClass}">
 	{#if autoRefresh === true}
 		<div class="flex absolute top-1 right-1">
 			<RefreshButton componentId={id} />
@@ -234,8 +239,7 @@ let lastStartedAt = Date.now();
 	{#if schemaStripped && Object.keys(schemaStripped?.properties ?? {}).length > 0 && (autoRefresh || forceSchemaDisplay)}
 		<div class="px-2 h-fit min-h-0">
 			<SchemaForm
-				compact
-				flexWrap
+				{flexWrap}
 				schema={schemaStripped}
 				bind:args
 				{disabledArgs}
@@ -252,7 +256,8 @@ let lastStartedAt = Date.now();
 	{:else if result?.error}
 		<div class="p-2">
 			<Alert type="error" title="Error during execution">
-				<pre title={result.error} class="text-2xs whitespace-pre-wrap">{result.error}</pre>
+				See "Debug Runs" on the top right for more details
+				<pre title={result.error} class=" mt-2 text-2xs whitespace-pre-wrap">{result.error}</pre>
 			</Alert>
 			<slot />
 		</div>

package/components/apps/components/helpers/RunnableComponent.svelte.d.ts

@@ -10,6 +10,9 @@ declare const __propDef: {
         result?: any;
         forceSchemaDisplay?: boolean | undefined;
         noMinH?: boolean | undefined;
+        defaultUserInput?: boolean | undefined;
+        flexWrap?: boolean | undefined;
+        wrapperClass?: string | undefined;
         runComponent?: (() => Promise<void>) | undefined;
     };
     events: {

package/components/apps/components/helpers/RunnableWrapper.svelte

@@ -10,6 +10,9 @@ export let extraQueryParams = {};
 export let autoRefresh = true;
 export let runnableComponent = undefined;
 export let forceSchemaDisplay = false;
+export let defaultUserInput = false;
+export let flexWrap = false;
+export let runnableClass = '';
 const { staticExporter, noBackend } = getContext('AppEditorContext');
 if (noBackend && componentInput?.type == 'runnable') {
     result = componentInput?.['value'];
@@ -26,6 +29,8 @@ function isRunnableDefined() {
 	<slot />
 {:else if componentInput.type === 'runnable' && isRunnableDefined()}
 	<RunnableComponent
+		{flexWrap}
+		{defaultUserInput}
 		bind:this={runnableComponent}
 		bind:fields={componentInput.fields}
 		bind:result
@@ -35,6 +40,7 @@ function isRunnableDefined() {
 		{extraQueryParams}
 		{forceSchemaDisplay}
 		{noMinH}
+		wrapperClass={runnableClass}
 	>
 		<slot />
 	</RunnableComponent>

package/components/apps/components/helpers/RunnableWrapper.svelte.d.ts

@@ -11,6 +11,9 @@ declare const __propDef: {
         autoRefresh?: boolean | undefined;
         runnableComponent?: RunnableComponent | undefined;
         forceSchemaDisplay?: boolean | undefined;
+        defaultUserInput?: boolean | undefined;
+        flexWrap?: boolean | undefined;
+        runnableClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/numberInputs/AppSliderInputs.svelte

@@ -28,7 +28,7 @@ $: if (value || !value) {
 <AlignWrapper {verticalAlignment}>
 	<div class="flex w-full gap-1 px-1">
 		<span>{min}</span>
-		<div class="grow">
+		<div class="grow ">
 			<Range bind:value {min} {max} />
 		</div>
 		<span>{max}</span>

package/components/apps/components/table/AppTable.svelte

@@ -14,7 +14,7 @@ export let componentInput;
 export let configuration;
 export let actionButtons;
 export const staticOutputs = ['selectedRow', 'loading', 'result', 'search'];
-$: result = [];
+let result = undefined;
 let search = undefined;
 let searchValue = '';
 let pagination = true;
@@ -75,8 +75,8 @@ function cellIsObject(x, props) {
 }
 let filteredResult = [];
 $: filteredResult && setOptions(filteredResult);
-$: search === 'By Component' && (filteredResult = searchInResult(result, searchValue));
-$: (search === 'By Runnable' || search === 'Disabled') && (filteredResult = result);
+$: search === 'By Component' && (filteredResult = searchInResult(result ?? [], searchValue));
+$: (search === 'By Runnable' || search === 'Disabled') && (filteredResult = result ?? []);
 $: outputs = $worldStore?.outputsById[id];
 function rerender() {
     table = createSvelteTable(options);
@@ -86,7 +86,7 @@ $: result && rerender();
 
 <InputValue {id} input={configuration.search} bind:value={search} />
 
-<RunnableWrapper bind:componentInput {id} bind:result>
+<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
 	{#if Array.isArray(result) && result.every(isObject)}
 		<div class="border border-gray-300 shadow-sm divide-y divide-gray-300  flex flex-col h-full">
 			{#if search !== 'Disabled'}
@@ -180,7 +180,7 @@ $: result && rerender();
 
 			<AppTableFooter paginationEnabled={pagination} {result} {table} />
 		</div>
-	{:else}
+	{:else if result != undefined}
 		<Alert title="Parsing issues" type="error" size="xs">
 			The result should be an array of objects
 		</Alert>

package/components/apps/editor/AppEditorHeader.svelte

@@ -59,23 +59,29 @@ function toStatic() {
     return { app: newApp, summary: $summary };
 }
 async function computeTriggerables() {
-    const allTriggers = await Promise.all($app.grid.map(async (x) => {
+    const allTriggers = await Promise.all($app.grid
+        .flatMap((x) => {
         let c = x.data;
-        if (c.componentInput?.type == 'runnable') {
-            const staticInputs = Object.fromEntries(Object.entries(c.componentInput.fields ?? {})
+        let r = [c.componentInput];
+        if (c.type === 'tablecomponent') {
+            r.push(...c.actionButtons.map((x) => x.componentInput));
+        }
+        return r.filter((x) => x);
+    })
+        .map(async (input) => {
+        if (input?.type == 'runnable') {
+            const staticInputs = Object.fromEntries(Object.entries(input.fields ?? {})
                 .filter(([k, v]) => v.type == 'static')
                 .map(([k, v]) => {
                 return [k, v['value']];
             }));
-            if (c.componentInput.runnable?.type == 'runnableByName') {
-                let hex = await hash(c.componentInput.runnable.inlineScript?.content);
+            if (input.runnable?.type == 'runnableByName') {
+                let hex = await hash(input.runnable.inlineScript?.content);
                 return [`rawscript/${hex}`, staticInputs];
             }
-            else if (c.componentInput.runnable?.type == 'runnableByPath') {
-                return [
-                    `${c.componentInput.runnable.runType}/${c.componentInput.runnable.path}`,
-                    staticInputs
-                ];
+            else if (input.runnable?.type == 'runnableByPath') {
+                let prefix = input.runnable.runType !== 'hubscript' ? input.runnable.runType : 'script';
+                return [`${prefix}/${input.runnable.path}`, staticInputs];
             }
         }
         return [];
@@ -96,6 +102,7 @@ async function createApp(path) {
                 policy
             }
         });
+        closeSaveDrawer();
         goto(`/apps/edit/${appId}`);
     }
     catch (e) {
@@ -353,9 +360,9 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 		<div class="hidden lg:block">
 			<ToggleButtonGroup bind:selected={$app.fullscreen}>
 				<ToggleButton position="left" value={false} size="xs">
-					<div class="flex gap-1 justify-start">
+					<div class="flex gap-1 justify-start items-center">
 						<AlignHorizontalSpaceAround size={14} />
-						<Tooltip>
+						<Tooltip light>
 							The max width is 1168px and the content stay centered instead of taking the full page
 							width
 						</Tooltip>

package/components/apps/editor/GridEditor.svelte

@@ -125,7 +125,6 @@ const onpointerup = () => {
 							'h-full w-full flex justify-center align-center items-center',
 							gridComponent.data.card ? 'border border-gray-100' : ''
 						)}
-						on:click|preventDefault|capture|once|stopPropagation
 					>
 						<ComponentEditor
 							{pointerdown}

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

@@ -5,8 +5,6 @@ declare const __propDef: {
         policy: Policy;
     };
     events: {
-        click: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/apps/editor/componentsPanel/data.js

@@ -251,6 +251,13 @@ const display = {
                     type: 'static',
                     fieldType: 'text',
                     value: '',
+                    tooltip: 'CSS rules like "color: blue;"',
+                },
+                copyButton: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean',
+                    onlyStatic: true,
                 },
             },
             card: false

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

@@ -7,7 +7,7 @@ import { inferArgs } from '../../../../infer';
 import Badge from '../../../common/badge/Badge.svelte';
 import { fly } from 'svelte/transition';
 import Editor from '../../../Editor.svelte';
-import { scriptLangToEditorLang } from '../../../../utils';
+import { emptySchema, scriptLangToEditorLang } from '../../../../utils';
 import Tooltip from '../../../Tooltip.svelte';
 let inlineScriptEditorDrawer;
 export let inlineScript;
@@ -15,7 +15,7 @@ export let name = undefined;
 export let id;
 const { runnableComponents } = getContext('AppEditorContext');
 let editor;
-let validCode = false;
+let validCode = true;
 async function inferInlineScriptSchema(language, content, schema) {
     try {
         await inferArgs(language, content, schema);
@@ -28,8 +28,8 @@ async function inferInlineScriptSchema(language, content, schema) {
     return schema;
 }
 onMount(async () => {
-    if (inlineScript) {
-        inlineScript.schema = await inferInlineScriptSchema(inlineScript?.language, inlineScript?.content, inlineScript?.schema);
+    if (inlineScript && !inlineScript.schema) {
+        inlineScript.schema = await inferInlineScriptSchema(inlineScript?.language, inlineScript?.content, emptySchema());
     }
 });
 const dispatch = createEventDispatcher();
@@ -73,7 +73,7 @@ let runLoading = false;
 					startIcon={{ icon: faTrash }}
 					on:click={() => dispatch('delete')}
 				/>
-			{:else}
+			{:else if $runnableComponents[id] != undefined}
 				<Button
 					loading={runLoading}
 					size="xs"
@@ -84,9 +84,8 @@ let runLoading = false;
 						runLoading = false
 					}}
 				>
-					Run&nbsp;<Tooltip
-						>Ctrl+Enter to run the script and see the result in the component directly</Tooltip
-					>
+					Run&nbsp;
+					<Tooltip light>Ctrl+Enter</Tooltip>
 				</Button>
 			{/if}
 

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

@@ -13,7 +13,7 @@ export let id;
 async function fork(path) {
     let { content, language, schema } = await getScriptByPath(path);
     if (componentInput && componentInput.type == 'runnable') {
-        if (!schema || Object.keys(schema).length == 0) {
+        if (!schema || typeof schema == 'string' || Object.keys(schema).length == 0) {
             schema = emptySchema();
             await inferArgs(language, content, schema);
         }

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

@@ -109,7 +109,10 @@ $: extraLib =
 					{:else if component.componentInput.type === 'connected' && component.componentInput !== undefined}
 						<ConnectedInputEditor bind:componentInput={component.componentInput} />
 					{:else if component.componentInput?.type === 'runnable' && component.componentInput !== undefined}
-						<RunnableInputEditor bind:appInput={component.componentInput} />
+						<RunnableInputEditor
+							bind:appInput={component.componentInput}
+							defaultUserInput={component.type == 'formcomponent'}
+						/>
 					{/if}
 				</div>
 				{#if component.componentInput?.type === 'runnable' && Object.keys(component.componentInput.fields ?? {}).length > 0}

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

@@ -12,7 +12,5 @@ export let componentInput;
 {:else if componentInput.type === 'static'}
 	<StaticInputEditor bind:componentInput />
 {:else if componentInput.type === 'user'}
-	<span class="text-2xs italic text-gray-6f00"
-		>Field's value is set by the user in the visible field</span
-	>
+	<span class="text-2xs italic text-gray-6f00">Field's value is set by the user</span>
 {/if}