@gradio/core 0.0.2

package/src/api_docs/ResponseSnippet.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { Loader } from "@gradio/statustracker";
+
+	export let is_running: boolean;
+	export let endpoint_returns: any;
+	export let js_returns: any;
+	export let current_language: "python" | "javascript" | "bash";
+</script>
+
+<h4>
+	<div class="toggle-icon">
+		<div class="toggle-dot toggle-right" />
+	</div>
+	Returns {#if endpoint_returns.length > 1}
+		{current_language == "python" ? "tuple" : "list"} of {endpoint_returns.length}
+		elements{:else}
+		1 element{/if}
+</h4>
+
+<div class:hide={is_running}>
+	{#each endpoint_returns as { label, type, python_type, component, serializer }, i}
+		<hr class="hr" />
+		<div style="margin:10px;">
+			<p>
+				{#if endpoint_returns.length > 1}
+					<span class="code">[{i}]</span>
+				{/if}
+				<span class="code highlight"
+					>{#if current_language === "python"}{python_type.type}{:else}{js_returns[
+							i
+						].type}{/if}</span
+				>
+			</p>
+			<p class="desc">
+				The output value that appears in the "{label}" <!--
+	-->{component}
+				component<!--
+	-->.
+			</p>
+		</div>
+	{/each}
+</div>
+{#if is_running}
+	<div class="load-wrap">
+		<Loader margin={false} />
+	</div>
+{/if}
+
+<style>
+	.hr {
+		border: 0;
+		height: 1px;
+		background: var(--color-accent-soft);
+	}
+	.code {
+		font-family: var(--font-mono);
+		margin-right: 10px;
+	}
+
+	.highlight {
+		background: var(--color-accent-soft);
+		color: var(--color-accent);
+		padding: var(--size-1);
+	}
+
+	.desc {
+		color: var(--body-text-color-subdued);
+		font-size: var(--text-lg);
+	}
+
+	h4 {
+		display: flex;
+		align-items: center;
+		margin-top: var(--size-6);
+		margin-bottom: var(--size-3);
+		color: var(--body-text-color);
+		font-weight: var(--weight-bold);
+	}
+
+	.toggle-icon {
+		display: flex;
+		align-items: center;
+		margin-right: var(--size-2);
+		border-radius: var(--radius-full);
+		background: var(--color-grey-300);
+		width: 12px;
+		height: 4px;
+	}
+
+	.toggle-dot {
+		border-radius: var(--radius-full);
+		background: var(--color-grey-700);
+		width: 6px;
+		height: 6px;
+		margin-left: auto;
+	}
+</style>

package/src/api_docs/TryButton.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { BaseButton } from "@gradio/button";
+
+	export let dependency_index: number;
+	export let run: (id: number) => Promise<void>;
+</script>
+
+<span class="space" />
+<BaseButton variant="primary" on:click={run.bind(null, dependency_index)}>
+	Try It Out
+</BaseButton>
+
+<style>
+	.space {
+		display: flex;
+		flex-basis: 1;
+		margin-top: var(--size-4);
+	}
+</style>

package/src/api_docs/img/api-logo.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.9425 2.94265C27.4632 2.42195 27.4632 1.57773 26.9425 1.05703C26.4218 0.536329 25.5776 0.536329 25.0569 1.05703L22.5713 3.54256C21.1213 2.59333 19.5367 2.43378 18.1753 2.64006C16.5495 2.88638 15.1127 3.66838 14.3905 4.39053L12.3905 6.39053C12.1405 6.64058 12 6.97972 12 7.33334C12 7.68697 12.1405 8.0261 12.3905 8.27615L19.7239 15.6095C20.2446 16.1302 21.0888 16.1302 21.6095 15.6095L23.6095 13.6095C24.3316 12.8873 25.1136 11.4505 25.36 9.82475C25.5663 8.46312 25.4066 6.87827 24.4571 5.42807L26.9425 2.94265Z" fill="#3c4555"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.276 12.9426C12.7967 12.4219 12.7967 11.5777 12.276 11.057C11.7553 10.5363 10.9111 10.5363 10.3904 11.057L8.66651 12.7809L8.27615 12.3905C8.0261 12.1405 7.68697 12 7.33334 12C6.97972 12 6.64058 12.1405 6.39053 12.3905L4.39053 14.3905C3.66838 15.1127 2.88638 16.5495 2.64006 18.1753C2.43377 19.5367 2.59333 21.1214 3.54262 22.5714L1.05703 25.057C0.536329 25.5777 0.536329 26.4219 1.05703 26.9426C1.57773 27.4633 2.42195 27.4633 2.94265 26.9426L5.42817 24.4571C6.87835 25.4066 8.46315 25.5663 9.82475 25.36C11.4505 25.1136 12.8873 24.3316 13.6095 23.6095L15.6095 21.6095C16.1302 21.0888 16.1302 20.2446 15.6095 19.7239L15.2188 19.3332L16.9426 17.6093C17.4633 17.0886 17.4633 16.2444 16.9426 15.7237C16.4219 15.203 15.5777 15.203 15.057 15.7237L13.3332 17.4475L10.5521 14.6665L12.276 12.9426Z" fill="#FF7C00"/>
+</svg>

package/src/api_docs/img/bash.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 150 150" style="enable-background:new 0 0 150 150; background-color: #72a824;" xml:space="preserve"><script xmlns=""/>
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M118.9,40.3L81.7,18.2c-2.2-1.3-4.7-2-7.2-2s-5,0.7-7.2,2L30.1,40.3c-4.4,2.6-7.2,7.5-7.2,12.8v44.2   c0,5.3,2.7,10.1,7.2,12.8l37.2,22.1c2.2,1.3,4.7,2,7.2,2c2.5,0,5-0.7,7.2-2l37.2-22.1c4.4-2.6,7.2-7.5,7.2-12.8V53   C126.1,47.8,123.4,42.9,118.9,40.3z M90.1,109.3l0.1,3.2c0,0.4-0.2,0.8-0.5,1l-1.9,1.1c-0.3,0.2-0.5,0-0.6-0.4l0-3.1   c-1.6,0.7-3.2,0.8-4.3,0.4c-0.2-0.1-0.3-0.4-0.2-0.7l0.7-2.9c0.1-0.2,0.2-0.5,0.3-0.6c0.1-0.1,0.1-0.1,0.2-0.1   c0.1-0.1,0.2-0.1,0.3,0c1.1,0.4,2.6,0.2,3.9-0.5c1.8-0.9,2.9-2.7,2.9-4.5c0-1.6-0.9-2.3-3-2.3c-2.7,0-5.2-0.5-5.3-4.5   c0-3.3,1.7-6.7,4.4-8.8l0-3.2c0-0.4,0.2-0.8,0.5-1l1.8-1.2c0.3-0.2,0.5,0,0.6,0.4l0,3.2c1.3-0.5,2.5-0.7,3.6-0.4   c0.2,0.1,0.3,0.4,0.2,0.7l-0.7,2.8c-0.1,0.2-0.2,0.4-0.3,0.6c-0.1,0.1-0.1,0.1-0.2,0.1c-0.1,0-0.2,0.1-0.3,0   c-0.5-0.1-1.6-0.4-3.4,0.6c-1.9,1-2.6,2.6-2.5,3.8c0,1.5,0.8,1.9,3.3,1.9c3.4,0.1,4.9,1.6,5,5C94.7,103.4,92.9,107,90.1,109.3z    M109.6,103.9c0,0.3,0,0.6-0.3,0.7l-9.4,5.7c-0.2,0.1-0.4,0-0.4-0.3v-2.4c0-0.3,0.2-0.5,0.4-0.6l9.3-5.5c0.2-0.1,0.4,0,0.4,0.3   V103.9z M116.1,49.6L80.9,71.3c-4.4,2.6-7.6,5.4-7.6,10.7v43.4c0,3.2,1.3,5.2,3.2,5.8c-0.6,0.1-1.3,0.2-2,0.2   c-2.1,0-4.1-0.6-5.9-1.6l-37.2-22.1c-3.6-2.2-5.9-6.2-5.9-10.5V53c0-4.3,2.3-8.4,5.9-10.5l37.2-22.1c1.8-1.1,3.8-1.6,5.9-1.6   s4.1,0.6,5.9,1.6l37.2,22.1c3.1,1.8,5.1,5,5.7,8.5C122.1,48.4,119.3,47.7,116.1,49.6z"/>
+</g>
+</svg>

package/src/api_docs/img/clear.svelte

@@ -0,0 +1,19 @@
+<svg
+	width="100%"
+	height="100%"
+	viewBox="0 0 5 5"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	xml:space="preserve"
+	style="fill:currentColor;fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+>
+	<g>
+		<path
+			d="M3.789,0.09C3.903,-0.024 4.088,-0.024 4.202,0.09L4.817,0.705C4.931,0.819 4.931,1.004 4.817,1.118L1.118,4.817C1.004,4.931 0.819,4.931 0.705,4.817L0.09,4.202C-0.024,4.088 -0.024,3.903 0.09,3.789L3.789,0.09Z"
+		/>
+		<path
+			d="M4.825,3.797C4.934,3.907 4.934,4.084 4.825,4.193L4.193,4.825C4.084,4.934 3.907,4.934 3.797,4.825L0.082,1.11C-0.027,1.001 -0.027,0.823 0.082,0.714L0.714,0.082C0.823,-0.027 1.001,-0.027 1.11,0.082L4.825,3.797Z"
+		/>
+	</g>
+</svg>

package/src/api_docs/img/javascript.svg

@@ -0,0 +1,16 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	aria-hidden="true"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 32 32"
+>
+	<rect width="32" height="32" fill="#f7df1e"></rect>
+	<path
+		d="M21.5,25a3.27,3.27,0,0,0,3,1.83c1.25,0,2-.63,2-1.49,0-1-.81-1.39-2.19-2L23.56,23C21.39,22.1,20,20.94,20,18.49c0-2.25,1.72-4,4.41-4a4.44,4.44,0,0,1,4.27,2.41l-2.34,1.5a2,2,0,0,0-1.93-1.29,1.31,1.31,0,0,0-1.44,1.29c0,.9.56,1.27,1.85,1.83l.75.32c2.55,1.1,4,2.21,4,4.72,0,2.71-2.12,4.19-5,4.19a5.78,5.78,0,0,1-5.48-3.07Zm-10.63.26c.48.84.91,1.55,1.94,1.55s1.61-.39,1.61-1.89V14.69h3V25c0,3.11-1.83,4.53-4.49,4.53a4.66,4.66,0,0,1-4.51-2.75Z"
+	></path>
+</svg>

package/src/api_docs/img/python.svg

@@ -0,0 +1,20 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	aria-hidden="true"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 32 32"
+>
+	<path
+		d="M15.84.5a16.4,16.4,0,0,0-3.57.32C9.1,1.39,8.53,2.53,8.53,4.64V7.48H16v1H5.77a4.73,4.73,0,0,0-4.7,3.74,14.82,14.82,0,0,0,0,7.54c.57,2.28,1.86,3.82,4,3.82h2.6V20.14a4.73,4.73,0,0,1,4.63-4.63h7.38a3.72,3.72,0,0,0,3.73-3.73V4.64A4.16,4.16,0,0,0,19.65.82,20.49,20.49,0,0,0,15.84.5ZM11.78,2.77a1.39,1.39,0,0,1,1.38,1.46,1.37,1.37,0,0,1-1.38,1.38A1.42,1.42,0,0,1,10.4,4.23,1.44,1.44,0,0,1,11.78,2.77Z"
+		fill="#5a9fd4"
+	></path>
+	<path
+		d="M16.16,31.5a16.4,16.4,0,0,0,3.57-.32c3.17-.57,3.74-1.71,3.74-3.82V24.52H16v-1H26.23a4.73,4.73,0,0,0,4.7-3.74,14.82,14.82,0,0,0,0-7.54c-.57-2.28-1.86-3.82-4-3.82h-2.6v3.41a4.73,4.73,0,0,1-4.63,4.63H12.35a3.72,3.72,0,0,0-3.73,3.73v7.14a4.16,4.16,0,0,0,3.73,3.82A20.49,20.49,0,0,0,16.16,31.5Zm4.06-2.27a1.39,1.39,0,0,1-1.38-1.46,1.37,1.37,0,0,1,1.38-1.38,1.42,1.42,0,0,1,1.38,1.38A1.44,1.44,0,0,1,20.22,29.23Z"
+		fill="#ffd43b"
+	></path>
+</svg>

package/src/api_docs/index.ts

@@ -0,0 +1,2 @@
+export { default as ApiDocs } from "./ApiDocs.svelte";
+export { default as ApiRecorder } from "./ApiRecorder.svelte";

package/src/api_docs/utils.ts

@@ -0,0 +1,143 @@
+// eslint-disable-next-line complexity
+export function represent_value(
+	value: string,
+	type: string | undefined,
+	lang: "js" | "py" | "bash" | null = null
+): string | null | number | boolean | Record<string, unknown> {
+	if (type === undefined) {
+		return lang === "py" ? "None" : null;
+	}
+	if (value === null && lang === "py") {
+		return "None";
+	}
+	if (type === "string" || type === "str") {
+		return lang === null ? value : '"' + value + '"';
+	} else if (type === "number") {
+		return lang === null ? parseFloat(value) : value;
+	} else if (type === "boolean" || type == "bool") {
+		if (lang === "py") {
+			value = String(value);
+			return value === "true" ? "True" : "False";
+		} else if (lang === "js" || lang === "bash") {
+			return value;
+		}
+		return value === "true";
+	} else if (type === "List[str]") {
+		value = JSON.stringify(value);
+		return value;
+	} else if (type.startsWith("Literal['")) {
+		// a literal of strings
+		return '"' + value + '"';
+	}
+	// assume object type
+	if (lang === null) {
+		return value === "" ? null : JSON.parse(value);
+	} else if (typeof value === "string") {
+		if (value === "") {
+			return lang === "py" ? "None" : "null";
+		}
+		return value;
+	}
+	if (lang === "bash") {
+		value = simplify_file_data(value);
+	}
+	if (lang === "py") {
+		value = replace_file_data_with_file_function(value);
+	}
+	return stringify_except_file_function(value);
+}
+
+export function is_potentially_nested_file_data(obj: any): boolean {
+	if (typeof obj === "object" && obj !== null) {
+		if (obj.hasOwnProperty("url") && obj.hasOwnProperty("meta")) {
+			if (
+				typeof obj.meta === "object" &&
+				obj.meta !== null &&
+				obj.meta._type === "gradio.FileData"
+			) {
+				return true;
+			}
+		}
+	}
+	if (typeof obj === "object" && obj !== null) {
+		for (let key in obj) {
+			if (typeof obj[key] === "object") {
+				let result = is_potentially_nested_file_data(obj[key]);
+				if (result) {
+					return true;
+				}
+			}
+		}
+	}
+	return false;
+}
+
+function simplify_file_data(obj: any): any {
+	if (typeof obj === "object" && obj !== null && !Array.isArray(obj)) {
+		if (
+			"url" in obj &&
+			obj.url &&
+			"meta" in obj &&
+			obj.meta?._type === "gradio.FileData"
+		) {
+			return { path: obj.url };
+		}
+	}
+	if (Array.isArray(obj)) {
+		obj.forEach((item, index) => {
+			if (typeof item === "object" && item !== null) {
+				obj[index] = simplify_file_data(item); // Recurse and update array elements
+			}
+		});
+	} else if (typeof obj === "object" && obj !== null) {
+		Object.keys(obj).forEach((key) => {
+			obj[key] = simplify_file_data(obj[key]); // Recurse and update object properties
+		});
+	}
+	return obj;
+}
+
+function replace_file_data_with_file_function(obj: any): any {
+	if (typeof obj === "object" && obj !== null && !Array.isArray(obj)) {
+		if (
+			"url" in obj &&
+			obj.url &&
+			"meta" in obj &&
+			obj.meta?._type === "gradio.FileData"
+		) {
+			return `handle_file('${obj.url}')`;
+		}
+	}
+	if (Array.isArray(obj)) {
+		obj.forEach((item, index) => {
+			if (typeof item === "object" && item !== null) {
+				obj[index] = replace_file_data_with_file_function(item); // Recurse and update array elements
+			}
+		});
+	} else if (typeof obj === "object" && obj !== null) {
+		Object.keys(obj).forEach((key) => {
+			obj[key] = replace_file_data_with_file_function(obj[key]); // Recurse and update object properties
+		});
+	}
+	return obj;
+}
+
+function stringify_except_file_function(obj: any): string {
+	let jsonString = JSON.stringify(obj, (key, value) => {
+		if (value === null) {
+			return "UNQUOTEDNone";
+		}
+		if (
+			typeof value === "string" &&
+			value.startsWith("handle_file(") &&
+			value.endsWith(")")
+		) {
+			return `UNQUOTED${value}`; // Flag the special strings
+		}
+		return value;
+	});
+	const regex = /"UNQUOTEDhandle_file\(([^)]*)\)"/g;
+	jsonString = jsonString.replace(regex, (match, p1) => `handle_file(${p1})`);
+	const regexNone = /"UNQUOTEDNone"/g;
+	return jsonString.replace(regexNone, "None");
+}

package/src/css.ts

@@ -0,0 +1,116 @@
+let supports_adopted_stylesheets = false;
+
+if (
+	"attachShadow" in Element.prototype &&
+	"adoptedStyleSheets" in Document.prototype
+) {
+	// Both Shadow DOM and adoptedStyleSheets are supported
+	const shadow_root_test = document
+		.createElement("div")
+		.attachShadow({ mode: "open" });
+	supports_adopted_stylesheets = "adoptedStyleSheets" in shadow_root_test;
+}
+
+export function mount_css(url: string, target: HTMLElement): Promise<void> {
+	const base = new URL(import.meta.url).origin;
+	const _url = new URL(url, base).href;
+	const existing_link = document.querySelector(`link[href='${_url}']`);
+
+	if (existing_link) return Promise.resolve();
+
+	const link = document.createElement("link");
+	link.rel = "stylesheet";
+	link.href = _url;
+
+	return new Promise((res, rej) => {
+		link.addEventListener("load", () => res());
+		link.addEventListener("error", () => {
+			console.error(`Unable to preload CSS for ${_url}`);
+			res();
+		});
+		target.appendChild(link);
+	});
+}
+
+export function prefix_css(
+	string: string,
+	version: string,
+	style_element = document.createElement("style")
+): HTMLStyleElement | null {
+	if (!supports_adopted_stylesheets) return null;
+	style_element.remove();
+
+	const stylesheet = new CSSStyleSheet();
+	stylesheet.replaceSync(string);
+
+	let importString = "";
+	string = string.replace(/@import\s+url\((.*?)\);\s*/g, (match, url) => {
+		importString += `@import url(${url});\n`;
+		return ""; // remove and store any @import statements from the CSS
+	});
+
+	const rules = stylesheet.cssRules;
+
+	let css_string = "";
+	let gradio_css_infix = `gradio-app .gradio-container.gradio-container-${version} .contain `;
+
+	for (let i = 0; i < rules.length; i++) {
+		const rule = rules[i];
+
+		let is_dark_rule = rule.cssText.includes(".dark");
+		if (rule instanceof CSSStyleRule) {
+			const selector = rule.selectorText;
+			if (selector) {
+				const new_selector = selector
+					.replace(".dark", "")
+					.split(",")
+					.map(
+						(s) =>
+							`${is_dark_rule ? ".dark" : ""} ${gradio_css_infix} ${s.trim()} `
+					)
+					.join(",");
+
+				css_string += rule.cssText;
+				css_string += rule.cssText.replace(selector, new_selector);
+			}
+		} else if (rule instanceof CSSMediaRule) {
+			let mediaCssString = `@media ${rule.media.mediaText} {`;
+			for (let j = 0; j < rule.cssRules.length; j++) {
+				const innerRule = rule.cssRules[j];
+				if (innerRule instanceof CSSStyleRule) {
+					let is_dark_rule = innerRule.cssText.includes(".dark ");
+					const selector = innerRule.selectorText;
+					const new_selector = selector
+						.replace(".dark", "")
+						.split(",")
+						.map(
+							(s) =>
+								`${
+									is_dark_rule ? ".dark" : ""
+								} ${gradio_css_infix} ${s.trim()} `
+						)
+						.join(",");
+					mediaCssString += innerRule.cssText.replace(selector, new_selector);
+				}
+			}
+			mediaCssString += "}";
+			css_string += mediaCssString;
+		} else if (rule instanceof CSSKeyframesRule) {
+			css_string += `@keyframes ${rule.name} {`;
+			for (let j = 0; j < rule.cssRules.length; j++) {
+				const innerRule = rule.cssRules[j];
+				if (innerRule instanceof CSSKeyframeRule) {
+					css_string += `${innerRule.keyText} { ${innerRule.style.cssText} }`;
+				}
+			}
+			css_string += "}";
+		} else if (rule instanceof CSSFontFaceRule) {
+			css_string += `@font-face { ${rule.style.cssText} }`;
+		}
+	}
+	css_string = importString + css_string;
+	style_element.textContent = css_string;
+
+	document.head.appendChild(style_element);
+	return style_element;
+}

package/src/gradio_helper.ts

@@ -0,0 +1,7 @@
+import { format } from "svelte-i18n";
+import { get } from "svelte/store";
+export { Gradio } from "@gradio/utils";
+
+export const formatter = get(format);
+
+export type I18nFormatter = typeof formatter;

package/src/i18n.test.ts

@@ -0,0 +1,27 @@
+import { describe, test, assert } from "vitest";
+import { process_langs } from "./i18n";
+import languagesByAnyCode from "wikidata-lang/indexes/by_any_code";
+import BCP47 from "./lang/BCP47_codes";
+
+describe("i18n", () => {
+	test("languages are loaded correctly", () => {
+		const langs = process_langs();
+		assert.ok(langs.en);
+		assert.ok(langs.en.common);
+	});
+
+	test("language codes follow the correct format", () => {
+		const langs = Object.entries(process_langs());
+
+		langs.forEach(([code, translation]) => {
+			const BCP47_REGEX = /^.{2}-.{2}$/;
+
+			if (BCP47_REGEX.test(code)) {
+				assert.ok(BCP47.includes(code));
+			} else {
+				assert.exists(languagesByAnyCode[code]);
+			}
+			assert.ok(translation.common);
+		});
+	});
+});

package/src/i18n.ts

@@ -0,0 +1,36 @@
+import { addMessages, init, getLocaleFromNavigator } from "svelte-i18n";
+
+const langs = import.meta.glob("./lang/*.json", {
+	eager: true
+});
+
+type LangsRecord = Record<
+	string,
+	{
+		[key: string]: any;
+	}
+>;
+
+export function process_langs(): LangsRecord {
+	let _langs: LangsRecord = {};
+
+	for (const lang in langs) {
+		const code = (lang.split("/").pop() as string).split(".").shift() as string;
+		_langs[code] = (langs[lang] as Record<string, any>).default;
+	}
+
+	return _langs;
+}
+
+const processed_langs = process_langs();
+
+for (const lang in processed_langs) {
+	addMessages(lang, processed_langs[lang]);
+}
+
+export async function setupi18n(): Promise<void> {
+	await init({
+		fallbackLocale: "en",
+		initialLocale: getLocaleFromNavigator()
+	});
+}

package/src/images/lightning.svg

@@ -0,0 +1,2 @@
+<!-- Lightning https://iconscout.com/icons/lightning by IconLauk https://iconscout.com/contributors/icon-lauk on IconScout https://iconscout.com" -->
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 32 32" viewBox="0 0 32 32" id="lightning"><path fill="#ff7c00" d="M26.9,10.5C26.7,10.2,26.4,10,26,10h-9V2c0-0.4-0.3-0.8-0.7-1c-0.4-0.1-0.9,0-1.1,0.4l-10,14c-0.2,0.3-0.3,0.7-0.1,1   C5.3,16.8,5.6,17,6,17h8.8L13,29.9c-0.1,0.5,0.2,0.9,0.6,1.1c0.1,0,0.2,0.1,0.3,0.1c0.3,0,0.7-0.2,0.8-0.5l12-19   C27,11.2,27,10.8,26.9,10.5z"/></svg>

package/src/images/logo.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="576" height="576" viewBox="0 0 576 576" fill="none">
+<path d="M287.5 229L86 344.5L287.5 460L489 344.5L287.5 229Z" stroke="url(#paint0_linear_102_7)" stroke-width="59" stroke-linejoin="round"/>
+<path d="M287.5 116L86 231.5L287.5 347L489 231.5L287.5 116Z" stroke="url(#paint1_linear_102_7)" stroke-width="59" stroke-linejoin="round"/>
+<path d="M86 344L288 229" stroke="url(#paint2_linear_102_7)" stroke-width="59" stroke-linejoin="bevel"/>
+<defs>
+<linearGradient id="paint0_linear_102_7" x1="60" y1="341" x2="429.5" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F9D100"/>
+<stop offset="1" stop-color="#F97700"/>
+</linearGradient>
+<linearGradient id="paint1_linear_102_7" x1="513.5" y1="231" x2="143.5" y2="231" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F9D100"/>
+<stop offset="1" stop-color="#F97700"/>
+</linearGradient>
+<linearGradient id="paint2_linear_102_7" x1="60" y1="344" x2="428.987" y2="341.811" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F9D100"/>
+<stop offset="1" stop-color="#F97700"/>
+</linearGradient>
+</defs>
+</svg>

package/src/images/play.svg

@@ -0,0 +1,2 @@
+<!-- Play https://iconscout.com/icons/play by Alexandru Stoica https://iconscout.com/contributors/alexandru-stoica on IconScout https://iconscout.com" -->
+<svg xmlns="http://www.w3.org/2000/svg" width="6" height="7" viewBox="0 0 6 7" id="play"><g fill="#999b9e" transform="translate(-347 -3766)"><g transform="translate(56 160)"><path d="M296.495 3608.573l-3.994-2.43c-.669-.408-1.501.107-1.501.926v4.862c0 .82.832 1.333 1.5.927l3.995-2.43c.673-.41.673-1.445 0-1.855"/></g></g></svg>

package/src/images/spaces.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none">
+  <path fill="#FF3270" d="M1.93 6.03v2.04h2.04V6.03H1.93Z"/>
+  <path fill="#861FFF" d="M6.03 6.03v2.04h2.04V6.03H6.03Z"/>
+  <path fill="#097EFF" d="M1.93 1.93v2.04h2.04V1.93H1.93Z"/>
+  <path fill="#000" fill-rule="evenodd" d="M.5 1.4c0-.5.4-.9.9-.9h3.1a.9.9 0 0 1 .87.67A2.44 2.44 0 0 1 9.5 2.95c0 .65-.25 1.24-.67 1.68.39.1.67.46.67.88v3.08c0 .5-.4.91-.9.91H1.4a.9.9 0 0 1-.9-.9V1.4Zm1.43.53v2.04h2.04V1.93H1.93Zm0 6.14V6.03h2.04v2.04H1.93Zm4.1 0V6.03h2.04v2.04H6.03Zm0-5.12a1.02 1.02 0 1 1 2.04 0 1.02 1.02 0 0 1-2.04 0Z" clip-rule="evenodd"/>
+  <path fill="#FFD702" d="M7.05 1.93a1.02 1.02 0 1 0 0 2.04 1.02 1.02 0 0 0 0-2.04Z"/>
+</svg>