windmill-components 1.448.1 → 1.472.1

package/package/components/ItemPicker.svelte

@@ -1,174 +0,0 @@
-<script>import { RotateCw } from 'lucide-svelte';
-import { Button, Drawer, Skeleton } from './common';
-import DrawerContent from './common/drawer/DrawerContent.svelte';
-import NoItemFound from './home/NoItemFound.svelte';
-import IconedResourceType from './IconedResourceType.svelte';
-import SearchItems from './SearchItems.svelte';
-export let pickCallback;
-export let loadItems;
-export let extraField = 'path';
-export let extraField2 = undefined;
-export let itemName;
-export let closeOnClick = true;
-/** Displayed if the load function returns no items. */
-export let noItemMessage = 'There are no items in the list';
-/** Displayed if the search returns no items. */
-export let buttons = {};
-export let tooltip = '';
-export let documentationLink = undefined;
-let loading = false;
-let items = [];
-let filteredItems = [];
-let filter = '';
-export function openDrawer() {
-    loading = true;
-    loadItems()
-        .then((v) => {
-        items = v;
-    })
-        .finally(() => {
-        loading = false;
-    });
-    drawer.openDrawer?.();
-}
-let drawer;
-let refreshing = false;
-</script>
-
-<SearchItems
-	{filter}
-	{items}
-	bind:filteredItems
-	f={(x) =>
-		(extraField2 ? x[extraField2] + ' ' : '') +
-		(x[extraField] ?? '') +
-		' ' +
-		(x['path'] && x['path'] != x[extraField] ? '(' + x['path'] + ')' ?? '' : '') +
-		' ' +
-		(x['description'] != x[extraField] ? x['description'] ?? '' : '')}
-/>
-
-<Drawer bind:this={drawer} size="600px">
-	<DrawerContent
-		{tooltip}
-		{documentationLink}
-		overflow_y={false}
-		title="Search {itemName}s"
-		on:close={drawer.closeDrawer}
-	>
-		<div class="w-full h-full flex flex-col">
-			<div class="flex flex-row gap-2 pb-4">
-				<!-- svelte-ignore a11y-autofocus -->
-				<input
-					type="text"
-					placeholder="Search {itemName}s"
-					bind:value={filter}
-					class="search-item"
-					autofocus
-				/>
-				<Button
-					color="light"
-					variant="border"
-					on:click={() => {
-						refreshing = true
-						loadItems()
-							.then((v) => {
-								items = v
-							})
-							.finally(() => {
-								loading = false
-								refreshing = false
-							})
-					}}
-					iconOnly
-					startIcon={{ icon: RotateCw, classes: loading || refreshing ? 'animate-spin' : '' }}
-				/>
-			</div>
-			{#if loading}
-				{#each new Array(3) as _}
-					<Skeleton layout={[[5], 0.2]} />
-				{/each}
-			{:else if !items?.length}
-				<div class="text-center text-sm text-tertiary mt-2">
-					{@html noItemMessage}
-				</div>
-			{:else if filteredItems?.length}
-				<div class="border rounded-md divide-y w-full overflow-auto pb-12 grow">
-					{#each filteredItems as obj}
-						<div
-							class="hover:bg-surface-hover w-full flex items-center p-4 gap-4 first-of-type:!border-t-0
-						first-of-type:rounded-t-md last-of-type:rounded-b-md"
-						>
-							<div class="inline-flex items-center grow">
-								<button
-									class="py-2 px-1 gap-1 flex grow border-gray-300 border-opacity-0
-									 text-primary"
-									on:click={() => {
-										if (closeOnClick) {
-											drawer.closeDrawer()
-										}
-										pickCallback(obj['path'], obj[extraField])
-									}}
-								>
-									{#if `app` in obj}
-										<div class="mr-2 text-sm text-left center-center w-30">
-											<IconedResourceType after={true} silent={false} name={obj['app']} />
-										</div>
-									{/if}
-									{#if `resource_type` in obj}
-										<div class="mr-2 text-left w-30 center-center text-sm">
-											<IconedResourceType after={true} name={obj['resource_type']} />
-										</div>
-									{/if}
-									<div class="flex grow flex-col break-all overflow-hidden">
-										{#if obj.marked}
-											<div class="text-sm font-semibold text-left">
-												{@html obj.marked}
-											</div>
-										{:else}
-											<div class="text-sm font-semibold flex flex-col">
-												<span class="mr-2 text-left">{obj[extraField] ?? ''}</span>
-												{#if extraField != 'path'}
-													<span class="font-normal text-xs text-left italic"
-														>{obj['path'] ?? ''}</span
-													>
-												{/if}
-											</div>
-											{#if extraField != 'description'}
-												<div class="text-xs font-light italic text-left"
-													>{obj['description'] ?? ''}</div
-												>
-											{/if}
-										{/if}
-									</div>
-								</button>
-							</div>
-							{#if buttons}
-								<div class="flex flex-row items-center">
-									{#each Object.entries(buttons) as [name, button]}
-										<div>
-											<Button
-												size="sm"
-												variant="border"
-												on:click={() => {
-													button(obj['path'] ?? '')
-												}}
-											>
-												{name}
-											</Button>
-										</div>
-									{/each}
-								</div>
-							{/if}
-						</div>
-					{/each}
-				</div>
-			{:else}
-				<NoItemFound />
-			{/if}
-		</div>
-		<svelte:fragment slot="actions">
-			<slot name="submission" />
-		</svelte:fragment>
-	</DrawerContent>
-</Drawer>

package/package/components/ItemPicker.svelte.d.ts

@@ -1,29 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        pickCallback: (path: string, f: string) => void;
-        loadItems: () => Promise<Record<string, any>[] | undefined>;
-        extraField?: string | undefined;
-        extraField2?: string | undefined;
-        itemName: string;
-        closeOnClick?: boolean | undefined;
-        /** Displayed if the load function returns no items. */ noItemMessage?: string | undefined;
-        /** Displayed if the search returns no items. */ buttons?: Record<string, (x: string) => void> | undefined;
-        tooltip?: string | undefined;
-        documentationLink?: string | undefined;
-        openDrawer?: (() => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        submission: {};
-    };
-};
-export type ItemPickerProps = typeof __propDef.props;
-export type ItemPickerEvents = typeof __propDef.events;
-export type ItemPickerSlots = typeof __propDef.slots;
-export default class ItemPicker extends SvelteComponent<ItemPickerProps, ItemPickerEvents, ItemPickerSlots> {
-    get openDrawer(): () => void;
-}
-export {};

package/package/components/JobArgs.svelte

@@ -1,166 +0,0 @@
-<script>import { ChevronRightSquare, ClipboardCopy, Download, Expand } from 'lucide-svelte';
-import ArgInfo from './ArgInfo.svelte';
-import { Button, Drawer, DrawerContent, Skeleton } from './common';
-import { Highlight } from 'svelte-highlight';
-import { copyToClipboard } from '../utils';
-import { json } from 'svelte-highlight/languages';
-import DataTable from './table/DataTable.svelte';
-import Cell from './table/Cell.svelte';
-import Head from './table/Head.svelte';
-import Row from './table/Row.svelte';
-import HighlightTheme from './HighlightTheme.svelte';
-import { deepEqual } from 'fast-equals';
-import { isWindmillTooBigObject } from './job_args';
-export let id = undefined;
-export let args;
-export let argLabel = undefined;
-export let workspace = undefined;
-let jsonViewer;
-let runLocally;
-let jsonStr = '';
-function pythonCode() {
-    return `
-if __name__ == "__main__":
-${Object.entries(args)
-        .map(([arg, value]) => {
-        return `    ${arg} = ${JSON.stringify(value)}`;
-    })
-        .join('\n')}
-
-	main(${Object.keys(args)
-        .map((x) => `${x} = ${x}`)
-        .join(', ')})
-`;
-}
-function typescriptCode() {
-    return `
-if (import.meta.main) {
-${Object.entries(args)
-        .map(([arg, value]) => {
-        return `  let ${arg} = ${JSON.stringify(value)}`;
-    })
-        .join('\n')}
-
-  await main(...)
-}
-`;
-}
-</script>
-
-{#if args && typeof args === 'object' && deepEqual( Object.keys(args), ['reason'] ) && args['reason'] == 'PREPROCESSOR_ARGS_ARE_DISCARDED'}
-	Preprocessor args are discarded
-{:else if id && workspace && args && typeof args === 'object' && deepEqual( Object.keys(args), ['reason'] ) && args['reason'] == 'WINDMILL_TOO_BIG'}
-	The args are too big in size to be able to fetch alongside job. Please <a
-		href="/api/w/{workspace}/jobs_u/get_args/{id}"
-		target="_blank">download the JSON file to view them</a
-	>.
-{:else}
-	<div class="relative">
-		<DataTable size="sm">
-			<Head>
-				<tr class="w-full">
-					<Cell head first>{argLabel ?? 'Arg'}</Cell>
-					<Cell head last>Value</Cell>
-				</tr>
-				<svelte:fragment slot="headerAction">
-					<button
-						on:click={() => {
-							jsonStr = JSON.stringify(args, null, 4)
-							jsonViewer.openDrawer()
-						}}
-					>
-						<Expand size={18} />
-					</button>
-				</svelte:fragment>
-			</Head>
-
-			<tbody class="divide-y w-full">
-				{#if args && Object.keys(args).length > 0}
-					{#each Object.entries(args).sort((a, b) => a[0].localeCompare(b[0])) as [arg, value]}
-						<Row>
-							<Cell first>{arg}</Cell>
-							<Cell last><ArgInfo {value} /></Cell>
-						</Row>
-					{/each}
-				{:else if args}
-					<Row><Cell>No arguments</Cell></Row>
-				{:else}
-					<Row>
-						<Cell first>
-							<Skeleton layout={[[1], 0.5, [1]]} />
-						</Cell>
-						<Cell last>
-							<Skeleton layout={[[1], 0.5, [1]]} />
-						</Cell>
-					</Row>
-				{/if}
-			</tbody>
-		</DataTable>
-	</div>
-{/if}
-
-<HighlightTheme />
-
-<Drawer bind:this={jsonViewer} size="900px">
-	<DrawerContent title="Expanded Args" on:close={jsonViewer.closeDrawer}>
-		<svelte:fragment slot="actions">
-			<Button
-				download="windmill-args.json"
-				href={id && workspace
-					? `/api/w/${workspace}/jobs_u/get_args/${id}`
-					: `data:text/json;charset=utf-8,${encodeURIComponent(jsonStr)}`}
-				startIcon={{ icon: Download }}
-				size="xs"
-				color="light"
-			>
-				Download
-			</Button>
-			<Button
-				on:click={runLocally.openDrawer}
-				color="light"
-				size="xs"
-				startIcon={{ icon: ChevronRightSquare }}
-			>
-				Use in a local script
-			</Button>
-			<Button
-				on:click={() => copyToClipboard(jsonStr)}
-				color="light"
-				size="xs"
-				startIcon={{ icon: ClipboardCopy }}
-			>
-				Copy to clipboard
-			</Button>
-		</svelte:fragment>
-		{#if jsonStr.length > 100000 || (id && workspace && args && isWindmillTooBigObject(args))}
-			<div class="text-sm mb-2 text-tertiary">
-				<a
-					download="windmill-args.json"
-					href={id && workspace
-						? `/api/w/${workspace}/jobs_u/get_args/${id}`
-						: `data:text/json;charset=utf-8,${encodeURIComponent(jsonStr)}`}
-				>
-					JSON is too large to be displayed in full.
-				</a></div
-			>
-		{:else}
-			<Highlight language={json} code={jsonStr.replace(/\\n/g, '\n')} />
-		{/if}
-	</DrawerContent>
-</Drawer>
-<Drawer bind:this={runLocally} size="900px">
-	<DrawerContent title="Run locally" on:close={runLocally.closeDrawer}>
-		<h3 class="mb-2">Envs</h3>
-		If using the wmill client in your code, set the following env variables:
-		<pre
-			><code
-				>BASE_URL="{window.location.origin}"
-WM_TOKEN="{'<TOKEN>'}"</code
-			></pre
-		>
-		<h3 class="mt-8">TypeScript</h3>
-		<pre><code>{typescriptCode()}</code></pre>
-		<h3 class="mt-8">Python</h3>
-		<pre><code>{pythonCode()}</code></pre>
-	</DrawerContent>
-</Drawer>

package/package/components/JobArgs.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        id?: string | undefined;
-        args: any;
-        argLabel?: string | undefined;
-        workspace?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type JobArgsProps = typeof __propDef.props;
-export type JobArgsEvents = typeof __propDef.events;
-export type JobArgsSlots = typeof __propDef.slots;
-export default class JobArgs extends SvelteComponent<JobArgsProps, JobArgsEvents, JobArgsSlots> {
-}
-export {};

package/package/components/JobLogs.svelte

@@ -1,12 +0,0 @@
-<script>import { JobService } from '../gen';
-import { workspaceStore } from '../stores';
-import LogViewer from './LogViewer.svelte';
-export let jobId;
-let logs = undefined;
-$: jobId && loadLogs();
-async function loadLogs() {
-    logs = await JobService.getJobLogs({ workspace: $workspaceStore, id: jobId });
-}
-</script>
-
-<LogViewer content={logs} isLoading={false} tag={undefined} {jobId} />

package/package/components/JobLogs.svelte.d.ts

@@ -1,16 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        jobId: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type JobLogsProps = typeof __propDef.props;
-export type JobLogsEvents = typeof __propDef.events;
-export type JobLogsSlots = typeof __propDef.slots;
-export default class JobLogs extends SvelteComponent<JobLogsProps, JobLogsEvents, JobLogsSlots> {
-}
-export {};

package/package/components/JobStatus.svelte

@@ -1,45 +0,0 @@
-<script>import { displayDate } from '../utils';
-import Badge from './common/badge/Badge.svelte';
-import { forLater } from '../forLater';
-import DurationMs from './DurationMs.svelte';
-import { Calendar, CheckCircle2, Circle, Clock, XCircle } from 'lucide-svelte';
-import NoWorkerWithTagWarning from './runs/NoWorkerWithTagWarning.svelte';
-const SMALL_ICON_SIZE = 12;
-export let job;
-</script>
-
-{#if job && 'success' in job && job.success}
-	<div class="flex flex-row flex-wrap gap-y-1 mb-1 gap-x-2">
-		<Badge large color="green" icon={{ icon: CheckCircle2, position: 'left' }}>
-			Success {job.is_skipped ? '(Skipped)' : ''}
-		</Badge>
-		<DurationMs duration_ms={job.duration_ms} self_wait_time_ms={job?.self_wait_time_ms} aggregate_wait_time_ms={job?.aggregate_wait_time_ms} />
-	</div>
-{:else if job && 'success' in job}
-	<div class="flex flex-row flex-wrap gap-y-1 mb-1 gap-x-2">
-		<Badge large color="red" icon={{ icon: XCircle, position: 'left' }}>Failed</Badge>
-		<DurationMs duration_ms={job.duration_ms} self_wait_time_ms={job?.self_wait_time_ms} aggregate_wait_time_ms={job?.aggregate_wait_time_ms} />
-	</div>
-{:else if job && 'running' in job && job.running}
-	<div>
-		<Badge large color="yellow" icon={{ icon: Clock, position: 'left' }}>
-			Running
-			{#if job.flow_status}
-				({job.flow_status?.step + 1 ?? ''} of {job.raw_flow?.modules?.length ?? '?'})
-			{/if}
-		</Badge>
-	</div>
-{:else if job && 'running' in job && 'scheduled_for' in job && job.scheduled_for && forLater(job.scheduled_for)}
-	<div>
-		<Badge color="blue" icon={{ icon: Calendar, position: 'left' }}>
-			Scheduled for {displayDate(job.scheduled_for)}
-		</Badge>
-	</div>
-{:else if job && 'running' in job}
-	<div class="flex flex-row gap-1 items-center">
-		<Badge color="orange" icon={{ icon: Clock, position: 'left' }}>Queued</Badge>
-		<NoWorkerWithTagWarning tag={job.tag} />
-	</div>
-{:else}
-	<Circle size={SMALL_ICON_SIZE} class="text-gray-200" />
-{/if}

package/package/components/JobStatus.svelte.d.ts

@@ -1,17 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { CompletedJob, QueuedJob } from '../gen';
-declare const __propDef: {
-    props: {
-        job: QueuedJob | CompletedJob | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type JobStatusProps = typeof __propDef.props;
-export type JobStatusEvents = typeof __propDef.events;
-export type JobStatusSlots = typeof __propDef.slots;
-export default class JobStatus extends SvelteComponent<JobStatusProps, JobStatusEvents, JobStatusSlots> {
-}
-export {};

package/package/components/KanidmSetting.svelte

@@ -1,70 +0,0 @@
-<script>import IconedResourceType from './IconedResourceType.svelte';
-import Toggle from './Toggle.svelte';
-export let value;
-const AUTH_URL_SUFFIX = '/ui/oauth2';
-$: enabled = value != undefined;
-// If `baseUrl` is not already set in the form, try to parse it from the `auth_url` value
-//
-// The binding dance here allows us to avoid rendering the string 'undefined' in the input, and
-// also allow lazy/async binding of the `value` prop.
-$: derivedBaseUrl = value?.connect_config?.auth_url?.replace(AUTH_URL_SUFFIX, '');
-let proxyUrlValue = undefined;
-$: baseUrl = proxyUrlValue ?? derivedBaseUrl ?? '';
-$: changeValues({ baseUrl, id: value?.id ?? '' });
-function changeValues({ baseUrl, id }) {
-    if (value) {
-        value = {
-            ...value,
-            connect_config: {
-                auth_url: `${baseUrl}${AUTH_URL_SUFFIX}`,
-                token_url: `${baseUrl}/oauth2/token`,
-                scopes: ['openid', 'profile', 'email']
-            },
-            login_config: {
-                auth_url: `${baseUrl}${AUTH_URL_SUFFIX}`,
-                token_url: `${baseUrl}/oauth2/token`,
-                userinfo_url: `${baseUrl}/oauth2/openid/${id}/userinfo`,
-                scopes: ['openid', 'profile', 'email']
-            }
-        };
-        proxyUrlValue = baseUrl;
-    }
-}
-</script>
-
-<div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
-	<label class="text-sm font-medium text-primary flex gap-4 items-center"
-		><div class="w-[120px]"><IconedResourceType name={'kanidm'} after={true} /></div><Toggle
-			checked={enabled}
-			on:change={(e) => {
-				if (e.detail) {
-					value = { id: '', secret: '' }
-				} else {
-					value = undefined
-				}
-			}}
-		/></label
-	>
-	{#if enabled}
-		<div class="border rounded p-2">
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">Kanidm Url ({'KANIDM_URL/ui/oauth2'})</span
-				>
-				<input type="text" placeholder="Base URL" bind:value={baseUrl} />
-			</label>
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">Custom Name</span>
-				<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
-			</label>
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">Client Id</span>
-				<input type="text" placeholder="Client Id" bind:value={value['id']} />
-			</label>
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">Client Secret </span>
-				<input type="text" placeholder="Client Secret" bind:value={value['secret']} />
-			</label>
-		</div>
-	{/if}
-</div>

package/package/components/KanidmSetting.svelte.d.ts

@@ -1,16 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        value: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type KanidmSettingProps = typeof __propDef.props;
-export type KanidmSettingEvents = typeof __propDef.events;
-export type KanidmSettingSlots = typeof __propDef.slots;
-export default class KanidmSetting extends SvelteComponent<KanidmSettingProps, KanidmSettingEvents, KanidmSettingSlots> {
-}
-export {};

package/package/components/KeycloakSetting.svelte

@@ -1,63 +0,0 @@
-<script>import IconedResourceType from './IconedResourceType.svelte';
-import Toggle from './Toggle.svelte';
-export let value;
-$: enabled = value != undefined;
-let org = '';
-$: changeOrg(org);
-function changeOrg(org) {
-    if (value) {
-        value = {
-            ...value,
-            connect_config: {
-                auth_url: `${org}/protocol/openid-connect/auth`,
-                token_url: `${org}/protocol/openid-connect/token`,
-                scopes: ['openid', 'offline_access']
-            },
-            login_config: {
-                auth_url: `${org}/protocol/openid-connect/auth`,
-                token_url: `${org}/protocol/openid-connect/token`,
-                userinfo_url: `${org}/protocol/openid-connect/userinfo`,
-                scopes: ['openid', 'offline_access']
-            }
-        };
-    }
-}
-</script>
-
-<div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
-	<label class="text-sm font-medium text-primary flex gap-4 items-center"
-		><div class="w-[120px]"><IconedResourceType name={'keycloak'} after={true} /></div><Toggle
-			checked={enabled}
-			on:change={(e) => {
-				if (e.detail) {
-					value = { id: '', secret: '' }
-				} else {
-					value = undefined
-				}
-			}}
-		/></label
-	>
-	{#if enabled}
-		<div class="border rounded p-2">
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm"
-					>Realm Url ({'REALM_URL/protocol/openid-connect/auth'})</span
-				>
-				<input type="text" placeholder="yourorg" bind:value={org} />
-			</label>
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">Custom Name</span>
-				<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
-			</label>
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">Client Id</span>
-				<input type="text" placeholder="Client Id" bind:value={value['id']} />
-			</label>
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">Client Secret </span>
-				<input type="text" placeholder="Client Secret" bind:value={value['secret']} />
-			</label>
-		</div>
-	{/if}
-</div>

package/package/components/KeycloakSetting.svelte.d.ts

@@ -1,16 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        value: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type KeycloakSettingProps = typeof __propDef.props;
-export type KeycloakSettingEvents = typeof __propDef.events;
-export type KeycloakSettingSlots = typeof __propDef.slots;
-export default class KeycloakSetting extends SvelteComponent<KeycloakSettingProps, KeycloakSettingEvents, KeycloakSettingSlots> {
-}
-export {};

package/package/components/Label.svelte

@@ -1,25 +0,0 @@
-<script>import { twMerge } from 'tailwind-merge';
-import Required from './Required.svelte';
-export let label = undefined;
-export let primary = false;
-export let disabled = false;
-export let headless = false;
-export let required = false;
-</script>
-
-<div class={twMerge(disabled ? 'opacity-60 pointer-events-none' : '', $$props.class)}>
-	<div class="flex flex-row justify-between items-center w-full">
-		{#if !headless}
-			<div class="flex flex-row items-center gap-2">
-				<span class="{primary ? 'text-primary' : 'text-secondary'} text-sm leading-6">{label}</span>
-				{#if required}
-					<Required required={true} />
-				{/if}
-				<slot name="header" />
-			</div>
-		{/if}
-		<slot name="error" />
-		<slot name="action" />
-	</div>
-	<slot />
-</div>