@gradio/core 1.0.0-dev.3 → 1.0.1

package/package.json

@@ -1,68 +1,67 @@
 {
   "name": "@gradio/core",
-  "version": "1.0.0-dev.3",
+  "version": "1.0.1",
   "type": "module",
   "devDependencies": {
-    "@gradio/accordion": "^0.5.25-dev.1",
-    "@gradio/annotatedimage": "^0.10.1-dev.2",
-    "@gradio/audio": "^0.20.0-dev.4",
-    "@gradio/box": "^0.2.26-dev.1",
-    "@gradio/atoms": "^0.19.0-dev.1",
-    "@gradio/browserstate": "^0.3.3-dev.0",
-    "@gradio/button": "^0.5.14-dev.2",
-    "@gradio/chatbot": "^0.28.0-dev.3",
-    "@gradio/checkboxgroup": "^0.8.0-dev.2",
-    "@gradio/checkbox": "^0.5.0-dev.1",
-    "@gradio/client": "^2.0.0-dev.2",
-    "@gradio/colorpicker": "^0.5.0-dev.2",
-    "@gradio/column": "^0.2.2",
-    "@gradio/dataframe": "^0.21.0-dev.3",
-    "@gradio/code": "^0.16.0-dev.3",
-    "@gradio/dataset": "^0.5.0-dev.3",
-    "@gradio/datetime": "^0.3.23-dev.1",
-    "@gradio/downloadbutton": "^0.4.13-dev.1",
-    "@gradio/file": "^0.13.1-dev.2",
-    "@gradio/dropdown": "^0.10.6-dev.2",
-    "@gradio/fallback": "^0.4.30-dev.1",
-    "@gradio/form": "^0.2.26-dev.1",
-    "@gradio/fileexplorer": "^0.5.42-dev.2",
-    "@gradio/html": "^0.8.0-dev.1",
-    "@gradio/highlightedtext": "^0.9.14-dev.1",
-    "@gradio/image": "^0.24.0-dev.2",
-    "@gradio/group": "^0.2.1",
-    "@gradio/icons": "^0.15.0-dev.0",
-    "@gradio/imageeditor": "^0.18.2-dev.2",
-    "@gradio/gallery": "^0.15.35-dev.3",
-    "@gradio/imageslider": "^0.3.1-dev.2",
-    "@gradio/label": "^0.5.22-dev.1",
-    "@gradio/json": "^0.5.32-dev.1",
-    "@gradio/markdown": "^0.13.23-dev.1",
-    "@gradio/model3d": "^0.15.1-dev.2",
-    "@gradio/multimodaltextbox": "^0.11.0-dev.2",
-    "@gradio/nativeplot": "^0.9.0-dev.2",
-    "@gradio/paramviewer": "^0.9.0-dev.1",
-    "@gradio/number": "^0.7.2-dev.1",
-    "@gradio/plot": "^0.9.25-dev.1",
-    "@gradio/radio": "^0.8.0-dev.1",
-    "@gradio/row": "^0.2.2",
-    "@gradio/sidebar": "^0.1.24-dev.1",
-    "@gradio/simpleimage": "^0.9.1-dev.2",
-    "@gradio/simpletextbox": "^0.3.31-dev.1",
-    "@gradio/simpledropdown": "^0.3.30-dev.1",
-    "@gradio/sketchbox": "^0.6.18-dev.1",
-    "@gradio/slider": "^0.7.0-dev.2",
-    "@gradio/state": "^0.1.2",
-    "@gradio/statustracker": "^0.12.0-dev.1",
-    "@gradio/tabs": "^0.5.2-dev.0",
-    "@gradio/tabitem": "^0.6.2-dev.0",
-    "@gradio/theme": "^0.5.0-dev.0",
-    "@gradio/timer": "^0.4.6-dev.0",
-    "@gradio/textbox": "^0.12.0-dev.2",
-    "@gradio/upload": "^0.17.2-dev.2",
-    "@gradio/utils": "^0.10.3-dev.0",
-    "@gradio/uploadbutton": "^0.9.13-dev.1",
-    "@gradio/video": "^0.17.0-dev.2",
-    "@gradio/vibeeditor": "^0.3.1-dev.2"
+    "@gradio/annotatedimage": "^0.10.1",
+    "@gradio/atoms": "^0.19.0",
+    "@gradio/box": "^0.2.26",
+    "@gradio/browserstate": "^0.3.3",
+    "@gradio/button": "^0.5.14",
+    "@gradio/checkbox": "^0.5.0",
+    "@gradio/chatbot": "^0.28.0",
+    "@gradio/client": "^2.0.0",
+    "@gradio/audio": "^0.20.0",
+    "@gradio/checkboxgroup": "^0.8.0",
+    "@gradio/accordion": "^0.5.25",
+    "@gradio/colorpicker": "^0.5.0",
+    "@gradio/code": "^0.16.0",
+    "@gradio/dataframe": "^0.21.0",
+    "@gradio/column": "^0.3.0",
+    "@gradio/dataset": "^0.5.0",
+    "@gradio/datetime": "^0.3.23",
+    "@gradio/downloadbutton": "^0.4.13",
+    "@gradio/dropdown": "^0.10.6",
+    "@gradio/fallback": "^0.4.30",
+    "@gradio/file": "^0.13.1",
+    "@gradio/form": "^0.2.27",
+    "@gradio/fileexplorer": "^0.5.42",
+    "@gradio/gallery": "^0.15.35",
+    "@gradio/group": "^0.3.0",
+    "@gradio/highlightedtext": "^0.9.14",
+    "@gradio/html": "^0.8.0",
+    "@gradio/image": "^0.24.0",
+    "@gradio/imageeditor": "^0.18.2",
+    "@gradio/icons": "^0.15.0",
+    "@gradio/imageslider": "^0.3.1",
+    "@gradio/json": "^0.5.32",
+    "@gradio/markdown": "^0.13.23",
+    "@gradio/label": "^0.5.22",
+    "@gradio/model3d": "^0.15.1",
+    "@gradio/multimodaltextbox": "^0.11.0",
+    "@gradio/nativeplot": "^0.9.0",
+    "@gradio/number": "^0.7.2",
+    "@gradio/paramviewer": "^0.9.0",
+    "@gradio/plot": "^0.9.25",
+    "@gradio/radio": "^0.8.0",
+    "@gradio/row": "^0.3.0",
+    "@gradio/sidebar": "^0.1.24",
+    "@gradio/simpledropdown": "^0.3.30",
+    "@gradio/simpletextbox": "^0.3.31",
+    "@gradio/slider": "^0.7.0",
+    "@gradio/simpleimage": "^0.9.1",
+    "@gradio/state": "^0.2.0",
+    "@gradio/tabitem": "^0.6.2",
+    "@gradio/tabs": "^0.5.2",
+    "@gradio/textbox": "^0.12.0",
+    "@gradio/statustracker": "^0.12.0",
+    "@gradio/theme": "^0.5.0",
+    "@gradio/timer": "^0.4.6",
+    "@gradio/upload": "^0.17.2",
+    "@gradio/utils": "^0.10.4",
+    "@gradio/uploadbutton": "^0.9.13",
+    "@gradio/video": "^0.17.0",
+    "@gradio/vibeeditor": "^0.3.1"
   },
   "msw": {
     "workerDirectory": "public"

package/src/Blocks.svelte

@@ -40,7 +40,6 @@
 	import * as screen_recorder from "./screen_recorder";
 
 	import { DependencyManager } from "./dependency";
-
 	let {
 		root,
 		components,
@@ -67,7 +66,8 @@
 		search_params,
 		render_complete = false,
 		ready = $bindable(false),
-		reload_count = $bindable(0)
+		reload_count = $bindable(0),
+		add_new_message = $bindable()
 	}: {
 		root: string;
 		components: ComponentMeta[];
@@ -95,6 +95,7 @@
 		render_complete: boolean;
 		ready: boolean;
 		reload_count: number;
+		add_new_message: (title: string, message: string, type: string) => void;
 	} = $props();
 
 	components.forEach((comp) => {
@@ -136,11 +137,11 @@
 			// trigger_share(title, description);
 			// TODO: lets combine all of the into a log type with levels
 		} else if (event === "error") {
-			new_message("Error", data, -1, event, 10, true);
+			new_message("Error", data as string, -1, event, 10, true);
 		} else if (event === "warning") {
-			new_message("Warning", data, -1, event, 10, true);
+			new_message("Warning", data as string, -1, event, 10, true);
 		} else if (event === "info") {
-			new_message("Info", data, -1, event, 10, true);
+			new_message("Info", data as string, -1, event, 10, true);
 		} else if (event == "clear_status") {
 			app_tree.update_state(
 				id,
@@ -161,7 +162,7 @@
 			// so we need to pull out the correct id here.
 			if (event === "select" && id in app_tree.initial_tabs) {
 				// this is the id of the selected tab
-				id = data.id;
+				id = (data as { id: number }).id;
 			}
 			dep_manager.dispatch({
 				type: "event",
@@ -173,11 +174,14 @@
 	}
 
 	let api_calls: Payload[] = $state([]);
+	let last_api_call: Payload | null = $state(null);
 	// We need a callback to add to api_calls from the DependencyManager
 	// We can't update a state variable from inside the DependencyManager because
 	// svelte won't see it and won't update the UI.
 	let add_to_api_calls = (payload: Payload): void => {
-		api_calls = [...api_calls, payload];
+		last_api_call = payload;
+		if (!api_recorder_visible) return;
+		api_calls = [...api_calls, last_api_call];
 	};
 
 	let dep_manager = new DependencyManager(
@@ -228,14 +232,14 @@
 	let ApiDocs: ComponentType<ApiDocsInterface> | null = null;
 	let ApiRecorder: ComponentType<ApiRecorderInterface> | null = null;
 	let Settings: ComponentType<SettingsInterface> | null = null;
-	let VibeEditor: ComponentType | null = null;
+	let VibeEditor: any = $state(null);
 
 	async function loadApiDocs(): Promise<void> {
 		if (!ApiDocs || !ApiRecorder) {
 			const api_docs_module = await import("./api_docs/ApiDocs.svelte");
 			const api_recorder_module = await import("./api_docs/ApiRecorder.svelte");
-			if (!ApiDocs) ApiDocs = api_docs_module.default;
-			if (!ApiRecorder) ApiRecorder = api_recorder_module.default;
+			if (!ApiDocs) ApiDocs = api_docs_module?.default;
+			if (!ApiRecorder) ApiRecorder = api_recorder_module?.default;
 		}
 	}
 
@@ -312,6 +316,8 @@
 		});
 	}
 
+	add_new_message = new_message;
+
 	let _error_id = -1;
 
 	const MESSAGE_QUOTE_RE = /^'([^]+)'$/;
@@ -387,6 +393,10 @@
 			dep_manager.dispatch_load_events();
 		});
 
+		if (vibe_mode) {
+			void loadVibeEditor();
+		}
+
 		return () => {
 			mut.disconnect();
 			res.disconnect();
@@ -520,6 +530,7 @@
 					{space_id}
 					{api_calls}
 					{username}
+					{last_api_call}
 				/>
 			</div>
 		</div>
@@ -554,6 +565,10 @@
 			</div>
 		</div>
 	{/if}
+
+	{#if vibe_mode && VibeEditor}
+		<svelte:component this={VibeEditor} {app} {root} />
+	{/if}
 </div>
 
 {#if messages}

package/src/Login.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import Form from "@gradio/form";
+	import { BaseForm } from "@gradio/form";
 	import { BaseTextbox as Textbox } from "@gradio/textbox";
 	import { BaseButton } from "@gradio/button";
-	import Column from "@gradio/column";
+	import { BaseColumn } from "@gradio/column";
 	import { Block } from "@gradio/atoms";
-	import { _ } from "svelte-i18n";
 	export let root: string;
 	export let auth_message: string | null;
 	export let app_mode: boolean;
 	export let space_id: string | null;
+	export let i18n: (s: string) => string;
 
 	let username = "";
 	let password = "";
@@ -34,23 +34,23 @@
 </script>
 
 <div class="wrap" class:min-h-screen={app_mode}>
-	<Column variant="panel" min_width={480}>
-		<h2>{$_("login.login")}</h2>
+	<BaseColumn variant="panel" min_width={480}>
+		<h2>{i18n("login.login")}</h2>
 		{#if auth_message}
 			<p class="auth">{@html auth_message}</p>
 		{/if}
 		{#if space_id}
 			<p class="auth">
-				{$_("login.enable_cookies")}
+				{i18n("login.enable_cookies")}
 			</p>
 		{/if}
 		{#if incorrect_credentials}
-			<p class="creds">{$_("login.incorrect_credentials")}</p>
+			<p class="creds">{i18n("login.incorrect_credentials")}</p>
 		{/if}
-		<Form>
+		<BaseForm>
 			<Block>
 				<Textbox
-					label={$_("login.username")}
+					label={i18n("login.username")}
 					lines={1}
 					show_label={true}
 					max_lines={1}
@@ -61,7 +61,7 @@
 
 			<Block>
 				<Textbox
-					label={$_("login.password")}
+					label={i18n("login.password")}
 					lines={1}
 					show_label={true}
 					max_lines={1}
@@ -70,12 +70,12 @@
 					bind:value={password}
 				/>
 			</Block>
-		</Form>
+		</BaseForm>
 
 		<BaseButton size="lg" variant="primary" on:click={submit}
-			>{$_("login.login")}</BaseButton
+			>{i18n("login.login")}</BaseButton
 		>
-	</Column>
+	</BaseColumn>
 </div>
 
 <style>

package/src/api_docs/ApiDocs.svelte

@@ -29,6 +29,7 @@
 	export let space_id: string | null;
 	export let root_node: ComponentMeta;
 	export let username: string | null;
+	export let last_api_call: Payload | null = null;
 
 	const js_docs =
 		"https://www.gradio.app/guides/getting-started-with-the-js-client";
@@ -54,6 +55,20 @@
 	export let api_calls: Payload[] = [];
 	let current_language: "python" | "javascript" | "bash" | "mcp" = "python";
 
+	$: sorted_dependencies = (() => {
+		const valid = dependencies.filter(
+			(dep) =>
+				dep.api_visibility === "public" &&
+				info?.named_endpoints?.["/" + dep.api_name]
+		);
+		if (info && last_api_call) {
+			const mostRecent = valid.find((dep) => dep.id === last_api_call.fn_index);
+			const others = valid.filter((dep) => dep.id !== last_api_call.fn_index);
+			return mostRecent ? [mostRecent, ...others] : valid;
+		}
+		return valid;
+	})();
+
 	function set_query_param(key: string, value: string) {
 		const url = new URL(window.location.href);
 		url.searchParams.set(key, value);
@@ -407,6 +422,7 @@
 							{file_data_present}
 							{mcp_docs}
 							{analytics}
+							{root}
 							bind:config_snippets
 						/>
 					</div>
@@ -465,8 +481,8 @@
 				{/if}
 
 				<div class:hidden={current_language === "mcp"}>
-					{#each dependencies as dependency}
-						{#if dependency.api_visibility === "public" && info.named_endpoints["/" + dependency.api_name]}
+					{#each sorted_dependencies as dependency}
+						{#if info.named_endpoints["/" + dependency.api_name]}
 							<div class="endpoint-container">
 								<CodeSnippet
 									endpoint_parameters={info.named_endpoints[
@@ -482,6 +498,7 @@
 										"/" + dependency.api_name
 									].description}
 									{analytics}
+									{last_api_call}
 									bind:markdown_code_snippets
 								/>
 

package/src/api_docs/ApiRecorder.svelte

@@ -4,9 +4,6 @@
 
 	export let api_calls: Payload[] = [];
 	export let dependencies: Dependency[];
-
-	$: console.log("API CALLS UPDATED:", api_calls);
-	$: console.log("DEPENDENCIES:", dependencies);
 </script>
 
 <div id="api-recorder">

package/src/api_docs/CodeSnippet.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ComponentMeta, Dependency } from "../types";
+	import type { ComponentMeta, Dependency, Payload } from "../types";
 	import CopyButton from "./CopyButton.svelte";
 	import { represent_value, is_potentially_nested_file_data } from "./utils";
 	import { Block } from "@gradio/atoms";
@@ -24,6 +24,7 @@
 	export let api_description: string | null = null;
 	export let analytics: Record<string, any>;
 	export let markdown_code_snippets: Record<string, Record<string, string>>;
+	export let last_api_call: Payload | null = null;
 
 	let python_code: HTMLElement;
 	let js_code: HTMLElement;
@@ -41,6 +42,27 @@
 	$: normalised_api_prefix = api_prefix ? api_prefix : "/";
 	$: normalised_root = root.replace(/\/$/, "");
 
+	$: is_most_recently_used = last_api_call?.fn_index === dependency.id;
+
+	$: actual_data =
+		is_most_recently_used && last_api_call?.data
+			? last_api_call.data.filter((d) => typeof d !== "undefined")
+			: null;
+
+	function getParameterValue(param: any, index: number): any {
+		if (
+			is_most_recently_used &&
+			actual_data &&
+			actual_data[index] !== undefined
+		) {
+			return actual_data[index];
+		}
+		return param.parameter_has_default !== undefined &&
+			param.parameter_has_default
+			? param.parameter_default
+			: param.example_input;
+	}
+
 	$: markdown_code_snippets[
 		dependency.api_name as keyof typeof markdown_code_snippets
 	] = {
@@ -55,6 +77,8 @@
 		api_name={dependency.api_name}
 		description={api_description}
 		{analytics}
+		{last_api_call}
+		dependency_id={dependency.id}
 	/>
 	<div class:hidden={current_language !== "python"}>
 		<Block>
@@ -71,14 +95,16 @@ client = Client(<span class="token string">"{space_id || root}"</span
 						>{#if username !== null}, auth=("{username}", **password**){/if})
 result = client.<span class="highlight">predict</span
 						>(<!--
--->{#each endpoint_parameters as { python_type, example_input, parameter_name, parameter_has_default, parameter_default }, i}<!--
+-->{#each endpoint_parameters as param, i}<!--
 		-->
-	{parameter_name
-								? parameter_name + "="
+	{param.parameter_name
+								? param.parameter_name + "="
 								: ""}<span
+								class:recent-value={is_most_recently_used &&
+									actual_data?.[i] !== undefined}
 								>{represent_value(
-									parameter_has_default ? parameter_default : example_input,
-									python_type.type,
+									getParameterValue(param, i),
+									param.python_type.type,
 									"py"
 								)}</span
 							>,{/each}<!--
@@ -112,22 +138,26 @@ result = client.<span class="highlight">predict</span
 	const result = await client.predict(<span class="api-name"
 							>"/{dependency.api_name}"</span
 						>, &lbrace; <!--
-	-->{#each endpoint_parameters as { label, parameter_name, type, python_type, component, example_input, serializer }, i}<!--
-			-->{#if blob_components.includes(component)}<!--
+	-->{#each endpoint_parameters as param, i}<!--
+			-->{#if blob_components.includes(param.component)}<!--
 		-->
 					<span
 									class="example-inputs"
-									>{parameter_name}: example{component}</span
+									>{param.parameter_name}: example{param.component}</span
 								>, <!--
 			--><span class="desc"><!--
 			--></span
 								><!--
 			-->{:else}<!--
 		-->		
-			<span class="example-inputs"
-									>{parameter_name}: {represent_value(
-										example_input,
-										python_type.type,
+			<span
+									class="example-inputs {is_most_recently_used &&
+									actual_data?.[i] !== undefined
+										? 'recent-value'
+										: ''}"
+									>{param.parameter_name}: {represent_value(
+										getParameterValue(param, i),
+										param.python_type.type,
 										"js"
 									)}</span
 								>, <!--
@@ -151,13 +181,18 @@ result = client.<span class="highlight">predict</span
 
 				<div bind:this={bash_post_code}>
 					<pre>curl -X POST {normalised_root}{normalised_api_prefix}/call/{dependency.api_name} -s -H "Content-Type: application/json" -d '{"{"}
-	"data": [{#each endpoint_parameters as { label, parameter_name, type, python_type, component, example_input, serializer }, i}
+	"data": [{#each endpoint_parameters as param, i}
 							<!-- 
-	-->{represent_value(
-								example_input,
-								python_type.type,
-								"bash"
-							)}{#if i < endpoint_parameters.length - 1},
+	--><span
+								class={is_most_recently_used && actual_data?.[i] !== undefined
+									? "recent-value"
+									: ""}
+								>{represent_value(
+									getParameterValue(param, i),
+									param.python_type.type,
+									"bash"
+								)}</span
+							>{#if i < endpoint_parameters.length - 1},
 							{/if}
 						{/each}
 	]{"}"}' \
@@ -211,6 +246,15 @@ result = client.<span class="highlight">predict</span
 		color: var(--color-accent);
 	}
 
+	.recent-value {
+		color: #fd7b00;
+		background: #fff4e6;
+		border: 1px solid #ffd9b3;
+		border-radius: var(--radius-sm);
+		padding: 1px 4px;
+		font-weight: var(--weight-medium);
+	}
+
 	.hidden {
 		display: none;
 	}

package/src/api_docs/EndpointDetail.svelte

@@ -1,30 +1,45 @@
 <script lang="ts">
+	import type { Payload } from "../types";
 	export let api_name: string | null = null;
 	export let description: string | null = null;
 	export let analytics: Record<string, any>;
+	export let last_api_call: Payload | null = null;
+	export let dependency_id: number | null = null;
 	import { format_latency, get_color_from_success_rate } from "./utils";
+	import PercentileChart from "./PercentileChart.svelte";
 
 	const success_rate = api_name ? analytics[api_name]?.success_rate : 0;
 	const color = get_color_from_success_rate(success_rate);
+	$: is_most_recently_used = last_api_call?.fn_index === dependency_id;
 </script>
 
 <h3>
 	API name:
 	<span class="post">{"/" + api_name}</span>
-	<span class="desc">{description}</span>
-	{#if analytics && api_name && analytics[api_name]}
-		<span class="analytics">
-			Total requests: {analytics[api_name].total_requests} (<span style={color}
-				>{Math.round(success_rate * 100)}%</span
-			>
-			successful) &nbsp;|&nbsp; p50/p90/p99:
-			{format_latency(analytics[api_name].process_time_percentiles["50th"])}
-			/
-			{format_latency(analytics[api_name].process_time_percentiles["90th"])}
-			/
-			{format_latency(analytics[api_name].process_time_percentiles["99th"])}
-		</span>
-	{/if}
+	<span class="desc">
+		{description}
+		{#if analytics && api_name && analytics[api_name]}
+			{@const endpoint_analytics = analytics[api_name]}
+			{@const p50 = endpoint_analytics.process_time_percentiles["50th"]}
+			{@const p90 = endpoint_analytics.process_time_percentiles["90th"]}
+			{@const p99 = endpoint_analytics.process_time_percentiles["99th"]}
+			<span class="analytics-inline">
+				<span class="analytics-content">
+					<span class="analytics-text-wrapper">
+						{endpoint_analytics.total_requests} requests ({Math.round(
+							success_rate * 100
+						)}% successful, p50: {format_latency(p50)})
+					</span>
+					<div class="analytics-tooltip">
+						<PercentileChart {p50} {p90} {p99} />
+					</div>
+				</span>
+				{#if is_most_recently_used}
+					<span class="most-recently-used">Most recently used</span>
+				{/if}
+			</span>
+		{/if}
+	</span>
 </h3>
 
 <style>
@@ -46,14 +61,55 @@
 		font-weight: var(--weight-semibold);
 	}
 
-	.analytics {
+	.analytics-inline {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--size-2);
+		margin-left: var(--size-2);
 		color: var(--body-text-color-subdued);
-		margin-top: var(--size-1);
+	}
+
+	.analytics-content {
+		position: relative;
+		display: inline-block;
+	}
+
+	.analytics-text-wrapper {
+		cursor: help;
+	}
+
+	.analytics-tooltip {
+		position: absolute;
+		bottom: 100%;
+		left: 50%;
+		transform: translateX(-50%);
+		margin-bottom: var(--size-2);
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity 0.2s ease;
+		z-index: 1000;
+	}
+
+	.analytics-content:hover .analytics-tooltip {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	.most-recently-used {
+		display: inline-block;
+		color: #fd7b00;
+		background: #fff4e6;
+		border: 1px solid #ffd9b3;
+		border-radius: var(--radius-sm);
+		padding: var(--size-1) var(--size-2);
+		font-size: var(--text-sm);
+		font-weight: var(--weight-medium);
+		white-space: nowrap;
 	}
 
 	.desc {
 		color: var(--body-text-color);
 		font-size: var(--text-lg);
-		margin-top: var(--size-1);
+		margin-left: var(--size-2);
 	}
 </style>