windmill-components 1.448.50 → 1.472.2

package/package/components/SuperadminSettings.svelte

@@ -281,15 +281,22 @@ async function updateName(name, email) {
 																	sendUserToast('User updated')
 																	listUsers(activeOnly)
 																}}
+																let:item
 															>
-																<ToggleButton value={'user'} size="xs" label="User" />
+																<ToggleButton value={'user'} size="xs" label="User" {item} />
 																<ToggleButton
 																	value={'devops'}
 																	size="xs"
 																	label="Devops"
 																	tooltip="Devops is a role that grants visibilty similar to that of a super admin, but without giving all rights. For example devops users can see service logs and crtical alerts. You can think of it as a 'readonly' super admin"
+																	{item}
+																/>
+																<ToggleButton
+																	value={'super_admin'}
+																	size="xs"
+																	label="Superadmin"
+																	{item}
 																/>
-																<ToggleButton value={'super_admin'} size="xs" label="Superadmin" />
 															</ToggleButtonGroup>
 														</td>
 														<td>

package/package/components/TestJobLoader.svelte

@@ -87,7 +87,7 @@ export async function getLogs() {
             running: `running` in job && job.running,
             logOffset: job.logs?.length ?? 0
         });
-        if ((job.logs ?? '').length == 0) {
+        if ((job?.logs ?? '').length == 0) {
             job.logs = getUpdate.new_logs ?? '';
             logOffset = getUpdate.log_offset ?? 0;
         }

package/package/components/TestJobLoader.svelte.d.ts

@@ -52,7 +52,7 @@ export default class TestJobLoader extends SvelteComponent<TestJobLoaderProps, T
     get runScriptByPath(): (path: string | undefined, args: Record<string, any>) => Promise<string>;
     get runFlowByPath(): (path: string | undefined, args: Record<string, any>) => Promise<string>;
     get getLogs(): () => Promise<void>;
-    get runPreview(): (path: string | undefined, code: string, lang: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "oracledb" | "graphql" | "nativets" | "bun" | "php" | "rust" | "ansible" | "csharp" | undefined, args: Record<string, any>, tag: string | undefined, lock?: string | undefined) => Promise<string>;
+    get runPreview(): (path: string | undefined, code: string, lang: import("../gen").ScriptLang | undefined, args: Record<string, any>, tag: string | undefined, lock?: string | undefined) => Promise<string>;
     get cancelJob(): () => Promise<void>;
     get clearCurrentJob(): () => Promise<void>;
     get watchJob(): (testId: string) => Promise<void>;

package/package/components/TimelineBar.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        position?: "center" | "right" | "left" | undefined;
+        position?: "right" | "left" | "center" | undefined;
         total: number;
         min: number | undefined;
         started_at: number | undefined;

package/package/components/ToggleHubWorkspace.svelte

@@ -6,8 +6,8 @@ export let selected = 'hub';
 </script>
 
 <div class="max-w-min">
-	<ToggleButtonGroup bind:selected>
-		<ToggleButton value="hub" icon={WindmillIcon} label="Hub" />
-		<ToggleButton value="workspace" icon={Building} label="Workspace" />
+	<ToggleButtonGroup bind:selected let:item>
+		<ToggleButton value="hub" icon={WindmillIcon} label="Hub" {item} />
+		<ToggleButton value="workspace" icon={Building} label="Workspace" {item} />
 	</ToggleButtonGroup>
 </div>

package/package/components/ToggleHubWorkspaceQuick.svelte

@@ -6,9 +6,9 @@ export let selected = 'all';
 </script>
 
 <div class="max-w-min">
-	<ToggleButtonGroup id="flow-editor-flow-providers" bind:selected>
-		<ToggleButton value="all" label="All" light small />
-		<ToggleButton value="hub" icon={WindmillIcon2} label="Hub" light small />
-		<ToggleButton value="workspace" icon={Building} label="Workspace" light small />
+	<ToggleButtonGroup id="flow-editor-flow-providers" bind:selected let:item>
+		<ToggleButton value="all" label="All" light small {item} />
+		<ToggleButton value="hub" icon={WindmillIcon2} label="Hub" light small {item} />
+		<ToggleButton value="workspace" icon={Building} label="Workspace" light small {item} />
 	</ToggleButtonGroup>
 </div>

package/package/components/Tooltip.svelte

@@ -2,6 +2,7 @@
 import Popover from './Popover.svelte';
 import { ExternalLink, InfoIcon } from 'lucide-svelte';
 import { gfmPlugin } from 'svelte-exmarkdown/gfm';
+import { getContext, hasContext } from 'svelte';
 export let light = false;
 export let wrapperClass = '';
 export let placement = undefined;
@@ -10,37 +11,42 @@ export let small = false;
 export let markdownTooltip = undefined;
 export let customSize = '100%';
 const plugins = [gfmPlugin()];
+const disableTooltips = hasContext('disableTooltips')
+    ? getContext('disableTooltips') === true
+    : false;
 </script>
 
-<Popover
-	notClickable
-	{placement}
-	class={wrapperClass}
-	style="transform: scale({parseFloat(customSize) / 100});"
->
-	<div
-		class="inline-flex w-3 mx-0.5 h-3 {light
-			? 'text-tertiary-inverse'
-			: 'text-tertiary'} {$$props.class} relative"
+{#if disableTooltips !== true}
+	<Popover
+		notClickable
+		{placement}
+		class={wrapperClass}
+		style="transform: scale({parseFloat(customSize) / 100});"
 	>
-		<InfoIcon class="{small ? 'bottom-0' : '-bottom-0.5'} absolute" size={small ? 12 : 14} />
-	</div>
-	<svelte:fragment slot="text">
-		{#if markdownTooltip}
-			<div class="prose-sm">
-				<Markdown md={markdownTooltip} {plugins} />
-			</div>
-		{:else}
-			<slot />
-		{/if}
-
-		{#if documentationLink}
-			<a href={documentationLink} target="_blank" class="text-blue-300 text-xs">
-				<div class="flex flex-row gap-2 mt-4">
-					See documentation
-					<ExternalLink size="16" />
+		<div
+			class="inline-flex w-3 mx-0.5 h-3 {light
+				? 'text-tertiary-inverse'
+				: 'text-tertiary'} {$$props.class} relative"
+		>
+			<InfoIcon class="{small ? 'bottom-0' : '-bottom-0.5'} absolute" size={small ? 12 : 14} />
+		</div>
+		<svelte:fragment slot="text">
+			{#if markdownTooltip}
+				<div class="prose-sm">
+					<Markdown md={markdownTooltip} {plugins} />
 				</div>
-			</a>
-		{/if}
-	</svelte:fragment>
-</Popover>
+			{:else}
+				<slot />
+			{/if}
+
+			{#if documentationLink}
+				<a href={documentationLink} target="_blank" class="text-blue-300 text-xs">
+					<div class="flex flex-row gap-2 mt-4">
+						See documentation
+						<ExternalLink size="16" />
+					</div>
+				</a>
+			{/if}
+		</svelte:fragment>
+	</Popover>
+{/if}

package/package/components/VariableEditor.svelte

@@ -8,13 +8,12 @@ import Drawer from './common/drawer/Drawer.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import Alert from './common/alert/Alert.svelte';
 import Toggle from './Toggle.svelte';
-import SimpleEditor from './SimpleEditor.svelte';
 import { sendUserToast } from '../toast';
 import { canWrite, isOwner } from '../utils';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import Section from './Section.svelte';
-import { Save } from 'lucide-svelte';
+import { Loader2, Save } from 'lucide-svelte';
 import autosize from '../autosize';
 const dispatch = createEventDispatcher();
 let path = '';
@@ -166,10 +165,10 @@ let editor = undefined;
 								>{/if}{/if}
 					</div>
 					<div class="flex flex-col gap-2">
-						<ToggleButtonGroup bind:selected={editorKind}>
-							<ToggleButton value="plain" label="Plain" />
-							<ToggleButton value="json" label="Json" />
-							<ToggleButton value="yaml" label="YAML" />
+						<ToggleButtonGroup bind:selected={editorKind} let:item>
+							<ToggleButton value="plain" label="Plain" {item} />
+							<ToggleButton value="json" label="Json" {item} />
+							<ToggleButton value="yaml" label="YAML" {item} />
 						</ToggleButtonGroup>
 						{#if editorKind == 'plain'}
 							<textarea
@@ -181,23 +180,31 @@ let editor = undefined;
 							/>
 						{:else if editorKind == 'json'}
 							<div class="border rounded mb-4 w-full">
-								<SimpleEditor
-									bind:this={editor}
-									autoHeight
-									lang="json"
-									bind:code={variable.value}
-									fixedOverflowWidgets={false}
-								/>
+								{#await import('./SimpleEditor.svelte')}
+									<Loader2 class="animate-spin" />
+								{:then Module}
+									<Module.default
+										bind:this={editor}
+										autoHeight
+										lang="json"
+										bind:code={variable.value}
+										fixedOverflowWidgets={false}
+									/>
+								{/await}
 							</div>
 						{:else if editorKind == 'yaml'}
 							<div class="border rounded mb-4 w-full">
-								<SimpleEditor
-									bind:this={editor}
-									autoHeight
-									lang="yaml"
-									bind:code={variable.value}
-									fixedOverflowWidgets={false}
-								/>
+								{#await import('./SimpleEditor.svelte')}
+									<Loader2 class="animate-spin" />
+								{:then Module}
+									<Module.default
+										bind:this={editor}
+										autoHeight
+										lang="yaml"
+										bind:code={variable.value}
+										fixedOverflowWidgets={false}
+									/>
+								{/await}
 							</div>
 						{/if}
 					</div>

package/package/components/WorkerGroup.svelte

@@ -220,13 +220,21 @@ let createdTags = [];
 				}
 			}}
 			class="mb-4"
+			let:item
 		>
-			<ToggleButton position="left" value="normal" size="sm" label="Any jobs within worker tags" />
+			<ToggleButton
+				position="left"
+				value="normal"
+				size="sm"
+				label="Any jobs within worker tags"
+				{item}
+			/>
 			<ToggleButton
 				position="dedicated"
 				value="dedicated"
 				size="sm"
 				label="Dedicated to a script/flow"
+				{item}
 			/>
 		</ToggleButtonGroup>
 		{#if selected == 'normal'}
@@ -639,9 +647,10 @@ let createdTags = [];
 									envvar.value = undefined
 								}
 							}}
+							let:item
 						>
-							<ToggleButton position="left" value="dynamic" label="Dynamic" />
-							<ToggleButton position="right" value="static" label="Static" />
+							<ToggleButton value="dynamic" label="Dynamic" {item} />
+							<ToggleButton value="static" label="Static" {item} />
 						</ToggleButtonGroup>
 						<input
 							type="text"

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

@@ -49,14 +49,34 @@ let beforeIconComponent;
 let afterIconComponent;
 $: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon();
 $: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon();
+function getIconSize() {
+    switch (resolvedConfig.size) {
+        case 'xs':
+            return 14;
+        case 'xs2':
+            return 12;
+        case 'xs3':
+            return 10;
+        case 'sm':
+            return 16;
+        case 'md':
+            return 20;
+        case 'lg':
+            return 24;
+        case 'xl':
+            return 26;
+        default:
+            return 24;
+    }
+}
 async function handleBeforeIcon() {
     if (resolvedConfig.beforeIcon) {
-        beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon, beforeIconComponent, 14, undefined, undefined);
+        beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon, beforeIconComponent, getIconSize(), undefined, undefined);
     }
 }
 async function handleAfterIcon() {
     if (resolvedConfig.afterIcon) {
-        afterIconComponent = await loadIcon(resolvedConfig.afterIcon, afterIconComponent, 14, undefined, undefined);
+        afterIconComponent = await loadIcon(resolvedConfig.afterIcon, afterIconComponent, getIconSize(), undefined, undefined);
     }
 }
 onDestroy(() => {

package/package/components/apps/components/buttons/AppFormButton.svelte

@@ -72,75 +72,79 @@ let modal;
 		configuration={configuration[key]}
 	/>
 {/each}
-<AlwaysMountedModal {css} title={resolvedConfig.modalTitle ?? ''} bind:this={modal}>
-	<div class="flex flex-col gap-2 px-4 w-full pt-2">
-		<RunnableWrapper
-			bind:this={runnableWrapper}
-			bind:loading
-			{recomputeIds}
-			{render}
-			bind:runnableComponent
-			{componentInput}
-			{id}
-			{extraQueryParams}
-			autoRefresh={false}
-			forceSchemaDisplay={true}
-			runnableClass="!block"
-			{outputs}
-			doOnSuccess={resolvedConfig.onSuccess}
-			doOnError={resolvedConfig.onError}
-			{errorHandledByComponent}
-		>
-			{#if noInputs}
-				<div class="text-secondary 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
-						<User size={20} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
-					</strong>
+{#if render}
+	<AlwaysMountedModal {css} title={resolvedConfig.modalTitle ?? ''} bind:this={modal}>
+		<div class="flex flex-col gap-2 px-4 w-full pt-2">
+			<RunnableWrapper
+				bind:this={runnableWrapper}
+				bind:loading
+				{recomputeIds}
+				{render}
+				bind:runnableComponent
+				{componentInput}
+				{id}
+				{extraQueryParams}
+				autoRefresh={false}
+				forceSchemaDisplay={true}
+				runnableClass="!block"
+				{outputs}
+				doOnSuccess={resolvedConfig.onSuccess}
+				doOnError={resolvedConfig.onError}
+				{errorHandledByComponent}
+			>
+				{#if noInputs}
+					<div class="text-secondary 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
+							<User size={20} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
+						</strong>
+					</div>
+				{/if}
+				<div class="flex justify-end gap-3 p-2">
+					<Button
+						{loading}
+						btnClasses="my-1"
+						on:pointerdown={(e) => {
+							e?.stopPropagation()
+						}}
+						on:click={async () => {
+							if (!runnableComponent) {
+								runnableWrapper?.handleSideEffect(true)
+							} else {
+								await runnableComponent?.runComponent()
+							}
+							modal?.close()
+						}}
+						size="xs"
+						color="dark"
+					>
+						Submit
+					</Button>
 				</div>
-			{/if}
-			<div class="flex justify-end gap-3 p-2">
-				<Button
-					{loading}
-					btnClasses="my-1"
-					on:pointerdown={(e) => {
-						e?.stopPropagation()
-					}}
-					on:click={async () => {
-						if (!runnableComponent) {
-							runnableWrapper?.handleSideEffect(true)
-						} else {
-							await runnableComponent?.runComponent()
-						}
-						modal?.close()
-					}}
-					size="xs"
-					color="dark"
-				>
-					Submit
-				</Button>
-			</div>
-		</RunnableWrapper>
-	</div>
-</AlwaysMountedModal>
+			</RunnableWrapper>
+		</div>
+	</AlwaysMountedModal>
 
-<AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
-	{#if errorsMessage}
-		<div class="text-red-500 text-xs">{errorsMessage}</div>
-	{/if}
-	<Button
-		disabled={resolvedConfig.disabled ?? false}
-		size={resolvedConfig.size ?? 'md'}
-		color={resolvedConfig.color}
-		btnClasses={twMerge(css?.button?.class, 'wm-button', 'wm-modal-form-button')}
-		style={css?.button?.style ?? ''}
-		on:click={(e) => {
-			modal?.open()
-		}}
-	>
-		{resolvedConfig.label}
-	</Button>
-</AlignWrapper>
+	<AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
+		{#if errorsMessage}
+			<div class="text-red-500 text-xs">{errorsMessage}</div>
+		{/if}
+		<Button
+			disabled={resolvedConfig.disabled ?? false}
+			size={resolvedConfig.size ?? 'md'}
+			color={resolvedConfig.color}
+			btnClasses={twMerge(css?.button?.class, 'wm-button', 'wm-modal-form-button')}
+			style={css?.button?.style ?? ''}
+			on:click={(e) => {
+				modal?.open()
+			}}
+		>
+			{resolvedConfig.label}
+		</Button>
+	</AlignWrapper>
+{:else}
+	<RunnableWrapper {outputs} {render} {componentInput} {id} />
+{/if}

package/package/components/apps/components/buttons/AppSchemaForm.svelte

@@ -1,7 +1,6 @@
 <script>import { getContext, onDestroy } from 'svelte';
 import { initConfig, initOutput, selectId } from '../../editor/appUtils';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-import LightweightSchemaForm from '../../../LightweightSchemaForm.svelte';
 import { initCss } from '../../utils';
 import { twMerge } from 'tailwind-merge';
 import { components } from '../../editor/component';
@@ -11,6 +10,7 @@ import { deepEqual } from 'fast-equals';
 import { computeWorkspaceS3FileInputPolicy } from '../../editor/appUtilsS3';
 import { defaultIfEmptyString } from '../../../../utils';
 import { userStore } from '../../../../stores';
+import SchemaForm from '../../../SchemaForm.svelte';
 export let id;
 export let componentInput;
 export let initializing = undefined;
@@ -109,7 +109,9 @@ function computeS3ForceViewerPolicies() {
 				on:pointerdown|stopPropagation={(e) =>
 					!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
 			>
-				<LightweightSchemaForm
+				<SchemaForm
+					noVariablePicker
+					onlyMaskPassword
 					defaultValues={resolvedConfig.defaultValues}
 					dynamicEnums={resolvedConfig.dynamicEnums}
 					schema={result}

package/package/components/apps/components/display/AppAccordionList.svelte

@@ -0,0 +1,149 @@
+<script>import { getContext } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
+import SubGridEditor from '../../editor/SubGridEditor.svelte';
+import { initCss } from '../../utils';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import ListWrapper from '../layout/ListWrapper.svelte';
+import { twMerge } from 'tailwind-merge';
+import ResolveStyle from '../helpers/ResolveStyle.svelte';
+export let id;
+export let componentInput;
+export let customCss = undefined;
+export let render;
+export let initializing;
+export let componentContainerHeight;
+$: accordionInput = componentInput;
+const { app, focusedGrid, selectedComponent, worldStore, connectingInput } = getContext('AppViewerContext');
+let everRender = render;
+$: render && !everRender && (everRender = true);
+let activeIndex = 0;
+const outputs = initOutput($worldStore, id, {
+    result: undefined,
+    activeIndex: 0,
+    loading: false,
+    inputs: {}
+});
+function onFocus() {
+    $focusedGrid = {
+        parentComponentId: id,
+        subGridIndex: 0
+    };
+}
+let css = initCss($app.css?.accordionlistcomponent, customCss);
+let result = undefined;
+let inputs = {};
+$: $selectedComponent?.includes(id) &&
+    $focusedGrid === undefined &&
+    ($focusedGrid = {
+        parentComponentId: id,
+        subGridIndex: 0
+    });
+function toggleAccordion(index) {
+    activeIndex = activeIndex === index ? -1 : index;
+    outputs.activeIndex.set(activeIndex);
+}
+</script>
+
+{#each Object.keys(css ?? {}) as key (key)}
+	<ResolveStyle
+		{id}
+		{customCss}
+		{key}
+		bind:css={css[key]}
+		componentStyle={$app.css?.accordionlistcomponent}
+	/>
+{/each}
+
+<InitializeComponent {id} />
+
+<RunnableWrapper
+	render={true}
+	{outputs}
+	autoRefresh
+	{componentInput}
+	{id}
+	bind:initializing
+	bind:result
+>
+	{#if everRender}
+		<div class="w-full flex flex-col overflow-auto max-h-full">
+			{#if $app.subgrids?.[`${id}-0`]}
+				{#if Array.isArray(result) && result.length > 0}
+					{#each result ?? [] as value, index}
+						<div class="border-b">
+							<button
+								on:pointerdown|stopPropagation
+								on:click={() => toggleAccordion(index)}
+								class={twMerge(
+									'w-full text-left bg-surface !truncate text-sm hover:text-primary px-1 py-2',
+									'wm-tabs-alltabs',
+									activeIndex === index
+										? twMerge('bg-surface text-primary ', 'wm-tabs-selectedTab')
+										: 'text-secondary'
+								)}
+							>
+								<span class="mr-2 w-8 font-mono">{activeIndex === index ? '-' : '+'}</span>
+								{result[index]?.header || `Header ${index}`}
+							</button>
+							<div class="overflow-auto w-full">
+								<ListWrapper
+									onSet={(id, value) => {
+										if (!inputs[id]) {
+											inputs[id] = { [index]: value }
+										} else {
+											inputs[id] = { ...inputs[id], [index]: value }
+										}
+										outputs?.inputs.set(inputs, true)
+									}}
+									onRemove={(id) => {
+										if (inputs?.[id] == undefined) {
+											return
+										}
+										if (index == 0) {
+											delete inputs[id]
+											inputs = { ...inputs }
+										} else {
+											delete inputs[id][index]
+											inputs[id] = { ...inputs[id] }
+										}
+										outputs?.inputs.set(inputs, true)
+									}}
+									{value}
+									{index}
+								>
+									<SubGridEditor
+										{id}
+										visible={render && index === activeIndex}
+										class={twMerge(css?.container?.class, 'wm-accordion p-2')}
+										style={css?.container?.style}
+										subGridId={`${id}-0`}
+										containerHeight={componentContainerHeight -
+											(30 * accordionInput?.value.length + 40)}
+										on:focus={() => {
+											if (!$connectingInput.opened) {
+												$selectedComponent = [id]
+											}
+											onFocus()
+										}}
+									/>
+								</ListWrapper>
+							</div>
+						</div>
+					{/each}
+				{:else}
+					<ListWrapper disabled value={undefined} index={0}>
+						<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
+					</ListWrapper>
+					{#if !Array.isArray(result)}
+						<div class="text-center text-tertiary">Input data is not an array</div>
+					{/if}
+				{/if}
+			{/if}
+		</div>
+	{:else if $app.subgrids}
+		<ListWrapper disabled value={undefined} index={0}>
+			<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
+		</ListWrapper>
+	{/if}
+</RunnableWrapper>

package/package/components/apps/components/display/AppAccordionList.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentCustomCSS } from '../../types';
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        customCss?: ComponentCustomCSS<'accordionlistcomponent'> | undefined;
+        render: boolean;
+        initializing: boolean | undefined;
+        componentContainerHeight: number;
+    };
+    events: {
+        pointerdown: PointerEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppAccordionListProps = typeof __propDef.props;
+export type AppAccordionListEvents = typeof __propDef.events;
+export type AppAccordionListSlots = typeof __propDef.slots;
+export default class AppAccordionList extends SvelteComponent<AppAccordionListProps, AppAccordionListEvents, AppAccordionListSlots> {
+}
+export {};