From 96e4f5b92260fb1a067a7b48d52f8425b1cbc737 Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Fri, 18 Aug 2023 16:33:07 +0100
Subject: [PATCH] remove index files and update test paths (#5262)

---
 js/app/src/Login.svelte              |   6 +-
 js/app/test/components.test.ts       | 151 +++++++++++++++++----------
 js/audio/index.svelte                |  98 -----------------
 js/audio/package.json                |   1 -
 js/chatbot/Chatbot.stories.svelte    |   2 +-
 js/chatbot/Chatbot.test.ts           |   2 +-
 js/chatbot/index.svelte              |  55 ----------
 js/chatbot/package.json              |   1 -
 js/checkbox/index.svelte             |  54 ----------
 js/checkbox/package.json             |   1 -
 js/checkboxgroup/index.svelte        |  63 -----------
 js/checkboxgroup/package.json        |   1 -
 js/code/index.svelte                 |  55 ----------
 js/code/package.json                 |   1 -
 js/colorpicker/index.svelte          |  67 ------------
 js/colorpicker/package.json          |   1 -
 js/dataframe/index.svelte            |  71 -------------
 js/dataframe/package.json            |   1 -
 js/dropdown/index.svelte             |  81 --------------
 js/dropdown/package.json             |   1 -
 js/file/index.svelte                 |  76 --------------
 js/file/package.json                 |   1 -
 js/image/Image.test.ts               |   2 +-
 js/image/index.svelte                | 112 --------------------
 js/image/package.json                |   1 -
 js/model3D/index.svelte              |  60 -----------
 js/model3D/package.json              |   1 -
 js/number/Number.stories.svelte      |   2 +-
 js/number/index.svelte               |  72 -------------
 js/number/package.json               |   1 -
 js/radio/Radio.test.ts               |   6 +-
 js/radio/index.svelte                |  61 -----------
 js/radio/package.json                |   1 -
 js/row/Row.stories.svelte            |   2 +-
 js/slider/Slider.component.spec.ts   |   2 +-
 js/slider/index.svelte               |  68 ------------
 js/slider/package.json               |   1 -
 js/textbox/Textbox.stories.svelte    |   2 +-
 js/textbox/Textbox.test.ts           |   8 +-
 js/textbox/index.svelte              |  90 ----------------
 js/textbox/package.json              |   1 -
 js/timeseries/index.svelte           |  61 -----------
 js/timeseries/package.json           |   1 -
 js/uploadbutton/UploadButton.test.ts |   3 +-
 js/uploadbutton/index.svelte         |  58 ----------
 js/uploadbutton/package.json         |   1 -
 js/video/Video.stories.svelte        |   2 +-
 js/video/Video.test.ts               |  66 ++++++------
 js/video/index.svelte                |  91 ----------------
 js/video/package.json                |   1 -
 50 files changed, 152 insertions(+), 1415 deletions(-)
 delete mode 100644 js/audio/index.svelte
 delete mode 100644 js/chatbot/index.svelte
 delete mode 100644 js/checkbox/index.svelte
 delete mode 100644 js/checkboxgroup/index.svelte
 delete mode 100644 js/code/index.svelte
 delete mode 100644 js/colorpicker/index.svelte
 delete mode 100644 js/dataframe/index.svelte
 delete mode 100644 js/dropdown/index.svelte
 delete mode 100644 js/file/index.svelte
 delete mode 100644 js/image/index.svelte
 delete mode 100644 js/model3D/index.svelte
 delete mode 100644 js/number/index.svelte
 delete mode 100644 js/radio/index.svelte
 delete mode 100644 js/slider/index.svelte
 delete mode 100644 js/textbox/index.svelte
 delete mode 100644 js/timeseries/index.svelte
 delete mode 100644 js/uploadbutton/index.svelte
 delete mode 100644 js/video/index.svelte

diff --git a/js/app/src/Login.svelte b/js/app/src/Login.svelte
index a0c6801b93..e443bbf33e 100644
--- a/js/app/src/Login.svelte
+++ b/js/app/src/Login.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Form from "@gradio/form";
-	import Textbox from "@gradio/textbox";
+	import Textbox from "@gradio/textbox/interactive";
 	import { BaseButton } from "@gradio/button/static";
 	import Column from "@gradio/column";
 	import { _ } from "svelte-i18n";
@@ -20,7 +20,7 @@
 
 		let response = await fetch(root + "/login", {
 			method: "POST",
-			body: formData,
+			body: formData
 		});
 		if (response.status === 400) {
 			incorrect_credentials = true;
@@ -52,7 +52,6 @@
 				lines={1}
 				show_label={true}
 				max_lines={1}
-				mode="interactive"
 				on:submit={submit}
 				bind:value={username}
 			/>
@@ -61,7 +60,6 @@
 				lines={1}
 				show_label={true}
 				max_lines={1}
-				mode="interactive"
 				type="password"
 				on:submit={submit}
 				bind:value={password}
diff --git a/js/app/test/components.test.ts b/js/app/test/components.test.ts
index a38f4cb754..f196edfb21 100644
--- a/js/app/test/components.test.ts
+++ b/js/app/test/components.test.ts
@@ -10,29 +10,45 @@ import {
 import { render, cleanup } from "@gradio/tootils";
 import { setupi18n } from "../src/i18n";
 
-import AnnotatedImage from "@gradio/annotatedimage";
-import Audio from "@gradio/audio";
-import Chatbot from "@gradio/chatbot";
-import Checkbox from "@gradio/checkbox";
-import CheckboxGroup from "@gradio/checkboxgroup";
-import ColorPicker from "@gradio/colorpicker";
-import DataFrame from "@gradio/dataframe";
-import Dropdown from "@gradio/dropdown";
-import File from "@gradio/file";
-import Gallery from "@gradio/gallery";
-import HTML from "@gradio/html";
-import HighlightedText from "@gradio/highlightedtext";
-import Json from "@gradio/json";
-import Label from "@gradio/label";
-import Markdown from "@gradio/markdown";
-import Model3D from "@gradio/model3d";
-import Number from "@gradio/number";
-import Radio from "@gradio/radio";
-import Slider from "@gradio/slider";
-import Textbox from "@gradio/textbox";
-import TimeSeries from "@gradio/timeseries";
-import UploadButton from "@gradio/uploadbutton";
-import Video from "@gradio/video";
+import StaticAnnotatedImage from "@gradio/annotatedimage/static";
+import StaticAudio from "@gradio/audio/static";
+import StaticChatbot from "@gradio/chatbot/static";
+import StaticCheckbox from "@gradio/checkbox/static";
+import StaticCheckboxGroup from "@gradio/checkboxgroup/static";
+import StaticColorPicker from "@gradio/colorpicker/static";
+import StaticDataframe from "@gradio/dataframe/static";
+import StaticDropdown from "@gradio/dropdown/static";
+import StaticFile from "@gradio/file/static";
+import StaticGallery from "@gradio/gallery/static";
+import StaticHTML from "@gradio/html/static";
+import StaticHighlightedText from "@gradio/highlightedtext/static";
+import StaticJson from "@gradio/json/static";
+import StaticLabel from "@gradio/label/static";
+import StaticMarkdown from "@gradio/markdown/static";
+import StaticModel3D from "@gradio/model3d/static";
+import StaticNumber from "@gradio/number/static";
+import StaticRadio from "@gradio/radio/static";
+import StaticSlider from "@gradio/slider/static";
+import StaticTextbox from "@gradio/textbox/static";
+import StaticTimeSeries from "@gradio/timeseries/static";
+import StaticUploadButton from "@gradio/uploadbutton/static";
+import StaticVideo from "@gradio/video/static";
+
+import InteractiveAudio from "@gradio/audio/interactive";
+import InteractiveCheckbox from "@gradio/checkbox/interactive";
+import InteractiveCheckboxGroup from "@gradio/checkboxgroup/interactive";
+import InteractiveColorPicker from "@gradio/colorpicker/interactive";
+import InteractiveDataframe from "@gradio/dataframe/interactive";
+import InteractiveDropdown from "@gradio/dropdown/interactive";
+import InteractiveFile from "@gradio/file/interactive";
+import InteractiveModel3D from "@gradio/model3d/interactive";
+import InteractiveNumber from "@gradio/number/interactive";
+import InteractiveRadio from "@gradio/radio/interactive";
+import InteractiveSlider from "@gradio/slider/interactive";
+import InteractiveTextbox from "@gradio/textbox/interactive";
+import InteractiveTimeSeries from "@gradio/timeseries/interactive";
+import InteractiveUploadButton from "@gradio/uploadbutton/interactive";
+import InteractiveVideo from "@gradio/video/interactive";
 import { LoadingStatus } from "@gradio/statustracker";
 
 const loading_status: LoadingStatus = {
@@ -47,38 +63,67 @@ const loading_status: LoadingStatus = {
 };
 
 const components = [
-	["AnnotatedImage", AnnotatedImage, { height: 100, width: 100, value: null }],
-	["Audio", Audio, {}],
-	// ["Button", Button, {}],
-	["Chatbot", Chatbot, {}],
-	["Checkbox", Checkbox, {}],
-	["CheckboxGroup", CheckboxGroup, { choices: ["a", "b", "c"] }],
-	// ["Code", Code, {}],
-	["ColorPicker", ColorPicker, {}],
 	[
-		"DataFrame",
-		DataFrame,
+		"StaticAnnotatedImage",
+		StaticAnnotatedImage,
+		{ height: 100, width: 100, value: null }
+	],
+	["InteractiveAudio", InteractiveAudio, {}],
+	["StaticAudio", StaticAudio, {}],
+
+	["StaticChatbot", StaticChatbot, {}],
+	["InteractiveCheckbox", InteractiveCheckbox, {}],
+	["StaticCheckbox", StaticCheckbox, {}],
+	[
+		"InteractiveCheckboxGroup",
+		InteractiveCheckboxGroup,
+		{ choices: ["a", "b", "c"] }
+	],
+	["StaticCheckboxGroup", StaticCheckboxGroup, { choices: ["a", "b", "c"] }],
+	["InteractiveColorPicker", InteractiveColorPicker, {}],
+	["StaticColorPicker", StaticColorPicker, {}],
+	[
+		"InteractiveDataFrame",
+		InteractiveDataframe,
 		{ value: [[1, 2, 3]], col_count: [3, "fixed"], row_count: [3, "fixed"] }
 	],
-	// ["Dataset", Dataset, {}],
-	["Dropdown", Dropdown, { choices: ["a", "b", "c"] }],
-	["File", File, {}],
-	["Gallery", Gallery, {}],
-	["HTML", HTML, {}],
-	["HighlightedText", HighlightedText, {}],
-	// ["Image",, {} Image],
-	["Json", Json, {}],
-	["Label", Label, {}],
-	["Markdown", Markdown, {}],
-	["Model3D", Model3D, {}],
-	["Number", Number, {}],
-	// ["Plot", Plot, {}],
-	["Radio", Radio, {}],
-	["Slider", Slider, {}],
-	["Textbox", Textbox, { container: false }],
-	["TimeSeries", TimeSeries, {}],
-	["UploadButton", UploadButton, {}],
-	["Video", Video, {}]
+	[
+		"StaticDataFrame",
+		StaticDataframe,
+		{ value: [[1, 2, 3]], col_count: [3, "fixed"], row_count: [3, "fixed"] }
+	],
+	["InteractiveDropdown", InteractiveDropdown, { choices: ["a", "b", "c"] }],
+	["StaticDropdown", StaticDropdown, { choices: ["a", "b", "c"] }],
+	["InteractiveFile", InteractiveFile, {}],
+	["StaticFile", StaticFile, {}],
+
+	["StaticGallery", StaticGallery, {}],
+
+	["StaticHTML", StaticHTML, {}],
+
+	["StaticHighlightedText", StaticHighlightedText, {}],
+
+	["StaticJson", StaticJson, {}],
+
+	["StaticLabel", StaticLabel, {}],
+
+	["StaticMarkdown", StaticMarkdown, {}],
+	["InteractiveModel3D", InteractiveModel3D, {}],
+	["StaticModel3D", StaticModel3D, {}],
+	["InteractiveNumber", InteractiveNumber, {}],
+	["StaticNumber", StaticNumber, {}],
+	["InteractiveRadio", InteractiveRadio, {}],
+	["StaticRadio", StaticRadio, {}],
+	["InteractiveSlider", InteractiveSlider, {}],
+	["StaticSlider", StaticSlider, {}],
+	["InteractiveTextbox", InteractiveTextbox, { container: false }],
+	["StaticTextbox", StaticTextbox, { container: false }],
+	["InteractiveTimeSeries", InteractiveTimeSeries, {}],
+	["StaticTimeSeries", StaticTimeSeries, {}],
+	["InteractiveUploadButton", InteractiveUploadButton, {}],
+	["StaticUploadButton", StaticUploadButton, {}],
+	["InteractiveVideo", InteractiveVideo, {}],
+	["StaticVideo", StaticVideo, {}]
 ] as const;
 
 describe("all components should apply provided class names", () => {
@@ -174,7 +219,7 @@ describe("all components should have the appropriate label when set via the `lab
 	});
 
 	components
-		.filter(([name]) => name !== "Markdown" && name !== "HTML")
+		.filter(([name]) => name !== "StaticMarkdown" && name !== "StaticHTML")
 		.forEach(([name, component, props]) => {
 			test(name, async () => {
 				const { getAllByText } = await render(component, {
diff --git a/js/audio/index.svelte b/js/audio/index.svelte
deleted file mode 100644
index da15f3806b..0000000000
--- a/js/audio/index.svelte
+++ /dev/null
@@ -1,98 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import type { FileData } from "@gradio/upload";
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	import Audio from "./interactive";
-	import StaticAudio from "./static";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let mode: "static" | "interactive";
-	export let value: null | FileData | string = null;
-	export let name: string;
-	export let source: "microphone" | "upload";
-	export let label: string;
-	export let root: string;
-	export let show_label: boolean;
-	export let pending: boolean;
-	export let streaming: boolean;
-	export let root_url: null | string;
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let loading_status: LoadingStatus;
-	export let autoplay = false;
-	export let show_download_button = true;
-	export let show_share_button = false;
-	export let show_edit_button = true;
-</script>
-
-{#if mode === "interactive"}
-	<Audio
-		{elem_id}
-		{elem_classes}
-		{visible}
-		bind:value
-		{name}
-		{source}
-		{label}
-		{root}
-		{show_label}
-		{pending}
-		{streaming}
-		{root_url}
-		{container}
-		{scale}
-		{min_width}
-		{loading_status}
-		{autoplay}
-		{show_edit_button}
-		on:change
-		on:stream
-		on:drag
-		on:edit
-		on:play
-		on:pause
-		on:stop
-		on:end
-		on:start_recording
-		on:stop_recording
-		on:upload
-		on:error
-	/>
-{:else}
-	<StaticAudio
-		{elem_id}
-		{elem_classes}
-		{visible}
-		{mode}
-		bind:value
-		{source}
-		{label}
-		{root}
-		{show_label}
-		{root_url}
-		{container}
-		{scale}
-		{min_width}
-		{loading_status}
-		{autoplay}
-		{show_download_button}
-		{show_share_button}
-		on:change
-		on:stream
-		on:drag
-		on:edit
-		on:play
-		on:pause
-		on:stop
-		on:end
-		on:start_recording
-		on:stop_recording
-		on:upload
-		on:error
-	/>
-{/if}
diff --git a/js/audio/package.json b/js/audio/package.json
index 9d828aa39c..6a12d2aa41 100644
--- a/js/audio/package.json
+++ b/js/audio/package.json
@@ -20,7 +20,6 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		".": "./index.svelte",
 		"./package.json": "./package.json",
 		"./interactive": "./interactive/index.ts",
 		"./static": "./static/index.ts",
diff --git a/js/chatbot/Chatbot.stories.svelte b/js/chatbot/Chatbot.stories.svelte
index c4ca798083..b743711004 100644
--- a/js/chatbot/Chatbot.stories.svelte
+++ b/js/chatbot/Chatbot.stories.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-	import Chatbot from "./index.svelte";
+	import Chatbot from "./static";
 </script>
 
 <Meta
diff --git a/js/chatbot/Chatbot.test.ts b/js/chatbot/Chatbot.test.ts
index bd31e35af6..1b1831b9be 100644
--- a/js/chatbot/Chatbot.test.ts
+++ b/js/chatbot/Chatbot.test.ts
@@ -1,6 +1,6 @@
 import { test, describe, assert, afterEach } from "vitest";
 import { cleanup, render } from "@gradio/tootils";
-import Chatbot from "./index.svelte";
+import Chatbot from "./static";
 import type { LoadingStatus } from "@gradio/statustracker";
 import type { FileData } from "@gradio/upload";
 
diff --git a/js/chatbot/index.svelte b/js/chatbot/index.svelte
deleted file mode 100644
index 992f481660..0000000000
--- a/js/chatbot/index.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script lang="ts">
-	import Chatbot from "./static";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import type { ThemeMode } from "js/app/src/components/types";
-	import type { FileData } from "@gradio/upload";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: [string | FileData | null, string | FileData | null][] = [];
-	export let latex_delimiters: {
-		left: string;
-		right: string;
-		display: boolean;
-	}[];
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let label: string;
-	export let show_label = true;
-	export let root: string;
-	export let root_url: null | string;
-	export let selectable = false;
-	export let theme_mode: ThemeMode;
-	export let show_share_button = false;
-	export let rtl = false;
-	export let show_copy_button = false;
-
-	export let loading_status: LoadingStatus | undefined = undefined;
-	export let height = 400;
-</script>
-
-<Chatbot
-	{elem_id}
-	{elem_classes}
-	{visible}
-	bind:value
-	{scale}
-	{min_width}
-	{label}
-	{show_label}
-	{root}
-	{root_url}
-	{selectable}
-	{theme_mode}
-	{show_share_button}
-	{rtl}
-	{show_copy_button}
-	{latex_delimiters}
-	on:change
-	on:select
-	on:share
-	on:error
-	{loading_status}
-	{height}
-/>
diff --git a/js/chatbot/package.json b/js/chatbot/package.json
index 2c73963b68..492b6eeade 100644
--- a/js/chatbot/package.json
+++ b/js/chatbot/package.json
@@ -25,7 +25,6 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		".": "./index.svelte",
 		"./package.json": "./package.json",
 		"./interactive": "./interactive/index.ts",
 		"./static": "./static/index.ts",
diff --git a/js/checkbox/index.svelte b/js/checkbox/index.svelte
deleted file mode 100644
index 22daab94f9..0000000000
--- a/js/checkbox/index.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script lang="ts">
-	import StaticCheckbox from "./static";
-	import InteractiveCheckbox from "./interactive";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import { _ } from "svelte-i18n";
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value = false;
-	export let value_is_output = false;
-	export let label = $_("checkbox.checkbox");
-	export let info: string | undefined = undefined;
-	export let mode: "static" | "interactive";
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let loading_status: LoadingStatus;
-</script>
-
-{#if mode === "static"}
-	<StaticCheckbox
-		{elem_id}
-		{elem_classes}
-		{visible}
-		bind:value
-		bind:value_is_output
-		{label}
-		{info}
-		{container}
-		{scale}
-		{min_width}
-		{loading_status}
-		on:change
-		on:input
-		on:select
-	/>
-{:else}
-	<InteractiveCheckbox
-		{elem_id}
-		{elem_classes}
-		{visible}
-		bind:value
-		bind:value_is_output
-		{label}
-		{info}
-		{container}
-		{scale}
-		{min_width}
-		{loading_status}
-		on:change
-		on:input
-		on:select
-	/>
-{/if}
diff --git a/js/checkbox/package.json b/js/checkbox/package.json
index 6be259f548..cdb7c26385 100644
--- a/js/checkbox/package.json
+++ b/js/checkbox/package.json
@@ -9,7 +9,6 @@
 	"private": true,
 	"main_changeset": true,
 	"exports": {
-		".": "./index.svelte",
 		"./package.json": "./package.json",
 		"./interactive": "./interactive/index.ts",
 		"./static": "./static/index.ts",
diff --git a/js/checkboxgroup/index.svelte b/js/checkboxgroup/index.svelte
deleted file mode 100644
index 164df9d2e1..0000000000
--- a/js/checkboxgroup/index.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts">
-	import StaticCheckboxgroup from "./static";
-	import InteractiveCheckboxgroup from "./interactive";
-
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import { _ } from "svelte-i18n";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: (string | number)[] = [];
-	export let value_is_output = false;
-	export let choices: [string, number][];
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let mode: "static" | "interactive";
-	export let label = $_("checkbox.checkbox_group");
-	export let info: string | undefined = undefined;
-	export let show_label: boolean;
-
-	export let loading_status: LoadingStatus;
-</script>
-
-{#if mode === "static"}
-	<StaticCheckboxgroup
-		{elem_id}
-		{elem_classes}
-		{visible}
-		bind:value
-		bind:value_is_output
-		{choices}
-		{container}
-		{scale}
-		{min_width}
-		{label}
-		{info}
-		{show_label}
-		{loading_status}
-		on:select
-		on:change
-		on:input
-	/>
-{:else}
-	<InteractiveCheckboxgroup
-		{elem_id}
-		{elem_classes}
-		{visible}
-		bind:value
-		bind:value_is_output
-		{choices}
-		{container}
-		{scale}
-		{min_width}
-		{label}
-		{info}
-		{show_label}
-		{loading_status}
-		on:select
-		on:change
-		on:input
-	/>
-{/if}
diff --git a/js/checkboxgroup/package.json b/js/checkboxgroup/package.json
index cd0b966690..c8f62d87c8 100644
--- a/js/checkboxgroup/package.json
+++ b/js/checkboxgroup/package.json
@@ -9,7 +9,6 @@
 	"private": true,
 	"main_changeset": true,
 	"exports": {
-		".": "./index.svelte",
 		"./package.json": "./package.json",
 		"./interactive": "./interactive/index.ts",
 		"./static": "./static/index.ts",
diff --git a/js/code/index.svelte b/js/code/index.svelte
deleted file mode 100644
index 5396d7cd97..0000000000
--- a/js/code/index.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script lang="ts">
-	import { _ } from "svelte-i18n";
-
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	import StaticCode from "./static";
-	import InteractiveCode from "./interactive";
-
-	export let value = "";
-	export let value_is_output = false;
-	export let language = "";
-	export let lines = 5;
-	export let target: HTMLElement;
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let mode: "static" | "interactive";
-	export let label = $_("code.code");
-	export let show_label = true;
-	export let loading_status: LoadingStatus;
-</script>
-
-{#if mode == "static"}
-	<StaticCode
-		bind:value
-		bind:value_is_output
-		{language}
-		{lines}
-		{target}
-		{elem_id}
-		{elem_classes}
-		{visible}
-		{label}
-		{show_label}
-		{loading_status}
-		on:change
-		on:input
-	/>
-{:else}
-	<InteractiveCode
-		bind:value
-		bind:value_is_output
-		{language}
-		{lines}
-		{target}
-		{elem_id}
-		{elem_classes}
-		{visible}
-		{label}
-		{show_label}
-		{loading_status}
-		on:change
-		on:input
-	/>
-{/if}
diff --git a/js/code/package.json b/js/code/package.json
index 0b738bfd00..46b1a63ee3 100644
--- a/js/code/package.json
+++ b/js/code/package.json
@@ -35,7 +35,6 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		".": "./index.svelte",
 		"./package.json": "./package.json",
 		"./interactive": "./interactive/index.ts",
 		"./static": "./static/index.ts",
diff --git a/js/colorpicker/index.svelte b/js/colorpicker/index.svelte
deleted file mode 100644
index d99df5ad1e..0000000000
--- a/js/colorpicker/index.svelte
+++ /dev/null
@@ -1,67 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import StaticColorpicker from "./static";
-	import InteractiveColorpicker from "./interactive";
-
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	export let label = "ColorPicker";
-	export let info: string | undefined = undefined;
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: string;
-	export let value_is_output = false;
-	export let show_label: boolean;
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let loading_status: LoadingStatus;
-	export let mode: "static" | "interactive";
-	export let interactive: boolean;
-</script>
-
-{#if mode === "static"}
-	<StaticColorpicker
-		{label}
-		{info}
-		{elem_id}
-		{elem_classes}
-		{visible}
-		bind:value
-		bind:value_is_output
-		{show_label}
-		{container}
-		{scale}
-		{min_width}
-		{loading_status}
-		{interactive}
-		on:change
-		on:input
-		on:submit
-		on:blur
-		on:focus
-	/>
-{:else}
-	<InteractiveColorpicker
-		{label}
-		{info}
-		{elem_id}
-		{elem_classes}
-		{visible}
-		bind:value
-		bind:value_is_output
-		{show_label}
-		{container}
-		{scale}
-		{min_width}
-		{loading_status}
-		{interactive}
-		on:change
-		on:input
-		on:submit
-		on:blur
-		on:focus
-	/>
-{/if}
diff --git a/js/colorpicker/package.json b/js/colorpicker/package.json
index 22e20f9386..7329e325a3 100644
--- a/js/colorpicker/package.json
+++ b/js/colorpicker/package.json
@@ -9,7 +9,6 @@
 	"private": true,
 	"main_changeset": true,
 	"exports": {
-		".": "./index.svelte",
 		"./package.json": "./package.json",
 		"./interactive": "./interactive/index.ts",
 		"./static": "./static/index.ts",
diff --git a/js/dataframe/index.svelte b/js/dataframe/index.svelte
deleted file mode 100644
index 0bfd566062..0000000000
--- a/js/dataframe/index.svelte
+++ /dev/null
@@ -1,71 +0,0 @@
-<script lang="ts">
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	import StaticDataframe from "./static";
-	import InteractiveDataframe from "./interactive";
-
-	type Headers = string[];
-	type Data = (string | number)[][];
-	type Datatype = "str" | "markdown" | "html" | "number" | "bool" | "date";
-
-	export let headers: Headers = [];
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value_is_output = false;
-	export let mode: "static" | "interactive";
-	export let col_count: [number, "fixed" | "dynamic"];
-	export let row_count: [number, "fixed" | "dynamic"];
-	export let label: string | null = null;
-	export let wrap: boolean;
-	export let datatype: Datatype | Datatype[];
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let loading_status: LoadingStatus;
-	export let value: { data: Data; headers: Headers } = {
-		data: [["", "", ""]],
-		headers: ["1", "2", "3"]
-	};
-</script>
-
-{#if mode === "static"}
-	<StaticDataframe
-		{headers}
-		{elem_id}
-		{elem_classes}
-		{visible}
-		bind:value
-		bind:value_is_output
-		{col_count}
-		{row_count}
-		{label}
-		{wrap}
-		{datatype}
-		{scale}
-		{min_width}
-		{loading_status}
-		on:change
-		on:select
-		on:input
-	/>
-{:else}
-	<InteractiveDataframe
-		{headers}
-		{elem_id}
-		{elem_classes}
-		{visible}
-		bind:value
-		bind:value_is_output
-		{col_count}
-		{row_count}
-		{label}
-		{wrap}
-		{datatype}
-		{scale}
-		{min_width}
-		{loading_status}
-		on:change
-		on:select
-		on:input
-	/>
-{/if}
diff --git a/js/dataframe/package.json b/js/dataframe/package.json
index 0c3354db9a..84c2b4b181 100644
--- a/js/dataframe/package.json
+++ b/js/dataframe/package.json
@@ -19,7 +19,6 @@
 		"dequal": "^2.0.2"
 	},
 	"exports": {
-		".": "./index.svelte",
 		"./package.json": "./package.json",
 		"./interactive": "./interactive/index.ts",
 		"./static": "./static/index.ts",
diff --git a/js/dropdown/index.svelte b/js/dropdown/index.svelte
deleted file mode 100644
index b63fd48aad..0000000000
--- a/js/dropdown/index.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script lang="ts">
-	import StaticDropdown from "./static";
-	import InteractiveDropdown from "./interactive";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import { _ } from "svelte-i18n";
-
-	export let label = $_("dropdown.dropdown");
-	export let info: string | undefined = undefined;
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: string | string[];
-	export let value_is_output = false;
-	export let multiselect = false;
-	export let max_choices: number;
-	export let choices: string[];
-	export let show_label: boolean;
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let loading_status: LoadingStatus;
-	export let allow_custom_value = false;
-
-	export let mode: "static" | "interactive";
-
-	if (multiselect && !value) {
-		value = [];
-	} else if (!value) {
-		value = "";
-	}
-</script>
-
-{#if mode === "static"}
-	<StaticDropdown
-		{visible}
-		{elem_id}
-		{elem_classes}
-		{container}
-		{scale}
-		{min_width}
-		bind:value
-		bind:value_is_output
-		{choices}
-		{multiselect}
-		{max_choices}
-		{label}
-		{info}
-		{show_label}
-		{allow_custom_value}
-		{loading_status}
-		on:change
-		on:input
-		on:select
-		on:blur
-		on:focus
-	/>
-{:else}
-	<InteractiveDropdown
-		{visible}
-		{elem_id}
-		{elem_classes}
-		{container}
-		{scale}
-		{min_width}
-		bind:value
-		bind:value_is_output
-		{choices}
-		{multiselect}
-		{max_choices}
-		{label}
-		{info}
-		{show_label}
-		{allow_custom_value}
-		{loading_status}
-		on:change
-		on:input
-		on:select
-		on:blur
-		on:focus
-	/>
-{/if}
diff --git a/js/dropdown/package.json b/js/dropdown/package.json
index 7ca23533e1..58b6139f35 100644
--- a/js/dropdown/package.json
+++ b/js/dropdown/package.json
@@ -9,7 +9,6 @@
 	"private": true,
 	"main_changeset": true,
 	"exports": {
-		".": "./index.svelte",
 		"./package.json": "./package.json",
 		"./interactive": "./interactive/index.ts",
 		"./static": "./static/index.ts",
diff --git a/js/file/index.svelte b/js/file/index.svelte
deleted file mode 100644
index b9cdf06afb..0000000000
--- a/js/file/index.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import Static from "./static";
-	import Interactive from "./interactive";
-	import type { FileData } from "@gradio/upload";
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: null | FileData | FileData[];
-	export let mode: "static" | "interactive";
-	export let root: string;
-	export let label: string;
-	export let show_label: boolean;
-	export let file_count: string;
-	export let file_types: string[] = ["file"];
-	export let root_url: null | string;
-	export let selectable = false;
-	export let loading_status: LoadingStatus;
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let height: number | undefined = undefined;
-</script>
-
-{#if mode === "static"}
-	<Static
-		{elem_id}
-		{elem_classes}
-		{visible}
-		bind:value
-		{mode}
-		{root}
-		{label}
-		{show_label}
-		{root_url}
-		{selectable}
-		{loading_status}
-		{container}
-		{scale}
-		{min_width}
-		{height}
-		on:clear
-		on:select
-		on:change
-		on:upload
-		on:error
-	/>
-{:else}
-	<Interactive
-		{elem_id}
-		{elem_classes}
-		{visible}
-		bind:value
-		{mode}
-		{root}
-		{label}
-		{show_label}
-		{file_count}
-		{file_types}
-		{root_url}
-		{selectable}
-		{loading_status}
-		{container}
-		{scale}
-		{min_width}
-		{height}
-		on:clear
-		on:select
-		on:change
-		on:upload
-		on:error
-	/>
-{/if}
diff --git a/js/file/package.json b/js/file/package.json
index 59d654f29f..61839c9a82 100644
--- a/js/file/package.json
+++ b/js/file/package.json
@@ -17,7 +17,6 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		".": "./index.svelte",
 		"./package.json": "./package.json",
 		"./interactive": "./interactive/index.ts",
 		"./static": "./static/index.ts",
diff --git a/js/image/Image.test.ts b/js/image/Image.test.ts
index ad91ac82fe..b9f94a466a 100644
--- a/js/image/Image.test.ts
+++ b/js/image/Image.test.ts
@@ -11,7 +11,7 @@ import { spy } from "tinyspy";
 import { cleanup, render } from "@gradio/tootils";
 import { setupi18n } from "../app/src/i18n";
 
-import Image from "./index.svelte";
+import Image from "./interactive";
 import type { LoadingStatus } from "@gradio/statustracker";
 
 const loading_status = {
diff --git a/js/image/index.svelte b/js/image/index.svelte
deleted file mode 100644
index 13b01a3a3b..0000000000
--- a/js/image/index.svelte
+++ /dev/null
@@ -1,112 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import Static from "./static";
-	import Interactive from "./interactive";
-
-	import { createEventDispatcher } from "svelte";
-	import StaticImage from "./static";
-	import Image from "./interactive";
-
-	import { Block } from "@gradio/atoms";
-	import { _ } from "svelte-i18n";
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import { UploadText } from "@gradio/atoms";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: null | string = null;
-	export let source: "canvas" | "webcam" | "upload" = "upload";
-	export let tool: "editor" | "select" | "sketch" | "color-sketch" = "editor";
-	export let label: string;
-	export let show_label: boolean;
-	export let show_download_button: boolean;
-	export let streaming: boolean;
-	export let pending: boolean;
-	export let height: number | undefined;
-	export let width: number | undefined;
-	export let mirror_webcam: boolean;
-	export let shape: [number, number];
-	export let brush_radius: number;
-	export let brush_color: string;
-	export let mask_opacity: number;
-	export let selectable = false;
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let loading_status: LoadingStatus;
-	export let mode: "static" | "interactive";
-	export let show_share_button = false;
-
-	const dispatch = createEventDispatcher<{
-		change: undefined;
-		error: string;
-	}>();
-
-	$: value, dispatch("change");
-	let dragging: boolean;
-	const FIXED_HEIGHT = 240;
-
-	$: value = !value ? null : value;
-</script>
-
-{#if mode === "static"}
-	<Static
-		bind:value
-		{elem_id}
-		{elem_classes}
-		{visible}
-		{label}
-		{show_label}
-		{show_download_button}
-		{height}
-		{width}
-		{selectable}
-		{container}
-		{scale}
-		{min_width}
-		{loading_status}
-		{show_share_button}
-		on:edit
-		on:clear
-		on:stream
-		on:upload
-		on:select
-		on:share
-		on:error
-	></Static>
-{:else}
-	<Interactive
-		bind:value
-		{elem_id}
-		{elem_classes}
-		{visible}
-		{source}
-		{tool}
-		{label}
-		{show_label}
-		{streaming}
-		{pending}
-		{height}
-		{width}
-		{mirror_webcam}
-		{shape}
-		{brush_radius}
-		{brush_color}
-		{mask_opacity}
-		{selectable}
-		{container}
-		{scale}
-		{min_width}
-		{loading_status}
-		on:edit
-		on:clear
-		on:stream
-		on:upload
-		on:select
-		on:share
-		on:error
-	></Interactive>
-{/if}
diff --git a/js/image/package.json b/js/image/package.json
index 8f5c08d602..44cc68f4e9 100644
--- a/js/image/package.json
+++ b/js/image/package.json
@@ -19,7 +19,6 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		".": "./index.svelte",
 		"./package.json": "./package.json",
 		"./interactive": "./interactive/index.ts",
 		"./static": "./static/index.ts",
diff --git a/js/model3D/index.svelte b/js/model3D/index.svelte
deleted file mode 100644
index 55153569e7..0000000000
--- a/js/model3D/index.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script lang="ts">
-	import Static from "./static";
-	import Interactive from "./interactive";
-
-	import type { FileData } from "@gradio/upload";
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: null | FileData = null;
-	export let mode: "static" | "interactive";
-	export let root: string;
-	export let root_url: null | string;
-	export let clearColor: [number, number, number, number];
-	export let loading_status: LoadingStatus;
-	export let label: string;
-	export let show_label: boolean;
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-</script>
-
-{#if mode === "static"}
-	<Static
-		{elem_id}
-		{elem_classes}
-		{visible}
-		bind:value
-		{root}
-		{root_url}
-		{clearColor}
-		{loading_status}
-		{label}
-		{show_label}
-		{container}
-		{scale}
-		{min_width}
-		on:change
-		on:clear
-	></Static>
-{:else}
-	<Interactive
-		{elem_id}
-		{elem_classes}
-		{visible}
-		bind:value
-		{root}
-		{root_url}
-		{clearColor}
-		{loading_status}
-		{label}
-		{show_label}
-		{container}
-		{scale}
-		{min_width}
-		on:change
-		on:clear
-	></Interactive>
-{/if}
diff --git a/js/model3D/package.json b/js/model3D/package.json
index b70303ac65..a2a8a0eefd 100644
--- a/js/model3D/package.json
+++ b/js/model3D/package.json
@@ -17,7 +17,6 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		".": "./index.svelte",
 		"./package.json": "./package.json",
 		"./interactive": "./interactive/index.ts",
 		"./static": "./static/index.ts",
diff --git a/js/number/Number.stories.svelte b/js/number/Number.stories.svelte
index 0687a0726b..e8852231d1 100644
--- a/js/number/Number.stories.svelte
+++ b/js/number/Number.stories.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-	import Number from "./index.svelte";
+	import Number from "./interactive";
 </script>
 
 <Meta title="Components/Number" component={Number} />
diff --git a/js/number/index.svelte b/js/number/index.svelte
deleted file mode 100644
index 215912f22c..0000000000
--- a/js/number/index.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<script lang="ts">
-	import Static from "./static";
-	import Interactive from "./interactive";
-
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import { _ } from "svelte-i18n";
-
-	export let label = $_("number.number");
-	export let info: string | undefined = undefined;
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let value = 0;
-	export let show_label: boolean;
-	export let minimum: number | undefined = undefined;
-	export let maximum: number | undefined = undefined;
-	export let loading_status: LoadingStatus;
-	export let mode: "static" | "interactive";
-	export let value_is_output = false;
-	export let step: number | null = null;
-</script>
-
-{#if mode === "static"}
-	<Static
-		bind:value
-		bind:value_is_output
-		{label}
-		{info}
-		{elem_id}
-		{elem_classes}
-		{visible}
-		{container}
-		{scale}
-		{min_width}
-		{show_label}
-		{minimum}
-		{maximum}
-		{loading_status}
-		{step}
-		on:change
-		on:input
-		on:submit
-		on:blur
-		on:focus
-	/>
-{:else}
-	<Interactive
-		bind:value
-		bind:value_is_output
-		{label}
-		{info}
-		{elem_id}
-		{elem_classes}
-		{visible}
-		{container}
-		{scale}
-		{min_width}
-		{show_label}
-		{minimum}
-		{maximum}
-		{step}
-		{loading_status}
-		on:change
-		on:input
-		on:submit
-		on:blur
-		on:focus
-	/>
-{/if}
diff --git a/js/number/package.json b/js/number/package.json
index 4ecda2255b..7eb336df63 100644
--- a/js/number/package.json
+++ b/js/number/package.json
@@ -9,7 +9,6 @@
 	"private": true,
 	"main_changeset": true,
 	"exports": {
-		".": "./index.svelte",
 		"./package.json": "./package.json",
 		"./interactive": "./interactive/index.ts",
 		"./static": "./static/index.ts",
diff --git a/js/radio/Radio.test.ts b/js/radio/Radio.test.ts
index a7c16d1495..f1c548a5fc 100644
--- a/js/radio/Radio.test.ts
+++ b/js/radio/Radio.test.ts
@@ -3,7 +3,7 @@ import { test, describe, assert, afterEach } from "vitest";
 import { cleanup, render } from "@gradio/tootils";
 import event from "@testing-library/user-event";
 
-import Radio from "./index.svelte";
+import Radio from "./interactive";
 import type { LoadingStatus } from "@gradio/statustracker";
 
 const loading_status = {
@@ -40,7 +40,9 @@ describe("Radio", () => {
 			true
 		);
 
-		const radioButtons: HTMLOptionElement[] = getAllByRole("radio");
+		const radioButtons: HTMLOptionElement[] = getAllByRole(
+			"radio"
+		) as HTMLOptionElement[];
 		assert.equal(radioButtons.length, 3);
 
 		radioButtons.forEach((radioButton: HTMLOptionElement, index) => {
diff --git a/js/radio/index.svelte b/js/radio/index.svelte
deleted file mode 100644
index a0a9480528..0000000000
--- a/js/radio/index.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<script lang="ts">
-	import Static from "./static";
-	import Interactive from "./interactive";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import { _ } from "svelte-i18n";
-
-	export let label = $_("radio.radio");
-	export let info: string | undefined = undefined;
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: string | number | null = null;
-	export let value_is_output = false;
-	export let choices: [string, number][] = [];
-	export let mode: "static" | "interactive";
-	export let show_label: boolean;
-	export let container = false;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let loading_status: LoadingStatus;
-</script>
-
-{#if mode === "static"}
-	<Static
-		bind:value
-		bind:value_is_output
-		{label}
-		{info}
-		{elem_id}
-		{elem_classes}
-		{visible}
-		{choices}
-		{show_label}
-		{container}
-		{scale}
-		{min_width}
-		{loading_status}
-		on:change
-		on:input
-		on:select
-	/>
-{:else}
-	<Interactive
-		bind:value
-		bind:value_is_output
-		{label}
-		{info}
-		{elem_id}
-		{elem_classes}
-		{visible}
-		{choices}
-		{show_label}
-		{container}
-		{scale}
-		{min_width}
-		{loading_status}
-		on:change
-		on:input
-		on:select
-	/>
-{/if}
diff --git a/js/radio/package.json b/js/radio/package.json
index 61510d5268..94c1c447cb 100644
--- a/js/radio/package.json
+++ b/js/radio/package.json
@@ -9,7 +9,6 @@
 	"private": true,
 	"main_changeset": true,
 	"exports": {
-		".": "./index.svelte",
 		"./package.json": "./package.json",
 		"./interactive": "./interactive/index.ts",
 		"./static": "./static/index.ts",
diff --git a/js/row/Row.stories.svelte b/js/row/Row.stories.svelte
index eeea8e15da..599a51e448 100644
--- a/js/row/Row.stories.svelte
+++ b/js/row/Row.stories.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
 	import Row from "./static";
-	import Image from "@gradio/image";
+	import Image from "@gradio/image/interactive";
 </script>
 
 <Meta title="Layout Elements/Row" component={Row} />
diff --git a/js/slider/Slider.component.spec.ts b/js/slider/Slider.component.spec.ts
index 61a836f2a6..1e9154a802 100644
--- a/js/slider/Slider.component.spec.ts
+++ b/js/slider/Slider.component.spec.ts
@@ -1,6 +1,6 @@
 import { test, expect } from "@playwright/experimental-ct-svelte";
 import type { Page, Locator } from "@playwright/test";
-import Slider from "./index.svelte";
+import Slider from "./interactive";
 import { spy } from "tinyspy";
 
 import type { LoadingStatus } from "@gradio/statustracker";
diff --git a/js/slider/index.svelte b/js/slider/index.svelte
deleted file mode 100644
index f5f059f1e3..0000000000
--- a/js/slider/index.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script lang="ts">
-	import Static from "./static";
-	import Interactive from "./interactive";
-	import { _ } from "svelte-i18n";
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value = 0;
-	export let label = $_("slider.slider");
-	export let info: string | undefined = undefined;
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let minimum: number;
-	export let maximum: number;
-	export let step: number;
-	export let mode: "static" | "interactive";
-	export let show_label: boolean;
-
-	export let loading_status: LoadingStatus;
-	export let value_is_output = false;
-</script>
-
-{#if mode === "static"}
-	<Static
-		bind:value
-		bind:value_is_output
-		{label}
-		{info}
-		{show_label}
-		{minimum}
-		{maximum}
-		{step}
-		{visible}
-		{elem_id}
-		{elem_classes}
-		{container}
-		{scale}
-		{min_width}
-		{loading_status}
-		on:input
-		on:change
-		on:release
-	/>
-{:else}
-	<Interactive
-		bind:value
-		bind:value_is_output
-		{label}
-		{info}
-		{show_label}
-		{minimum}
-		{maximum}
-		{step}
-		{visible}
-		{elem_id}
-		{elem_classes}
-		{container}
-		{scale}
-		{min_width}
-		{loading_status}
-		on:input
-		on:change
-		on:release
-	/>
-{/if}
diff --git a/js/slider/package.json b/js/slider/package.json
index 64adbb53dc..78d48bf2a1 100644
--- a/js/slider/package.json
+++ b/js/slider/package.json
@@ -9,7 +9,6 @@
 	"private": true,
 	"main_changeset": true,
 	"exports": {
-		".": "./index.svelte",
 		"./package.json": "./package.json",
 		"./interactive": "./interactive/index.ts",
 		"./static": "./static/index.ts",
diff --git a/js/textbox/Textbox.stories.svelte b/js/textbox/Textbox.stories.svelte
index eb646b0fe9..8d5714a95a 100644
--- a/js/textbox/Textbox.stories.svelte
+++ b/js/textbox/Textbox.stories.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-	import Textbox from "./index.svelte";
+	import Textbox from "./interactive";
 </script>
 
 <Meta
diff --git a/js/textbox/Textbox.test.ts b/js/textbox/Textbox.test.ts
index c6b5b10950..ce5a0c3d54 100644
--- a/js/textbox/Textbox.test.ts
+++ b/js/textbox/Textbox.test.ts
@@ -3,7 +3,7 @@ import { spy } from "tinyspy";
 import { cleanup, fireEvent, render, get_text, wait } from "@gradio/tootils";
 import event from "@testing-library/user-event";
 
-import Textbox from "./index.svelte";
+import Textbox from "./interactive";
 import type { LoadingStatus } from "@gradio/statustracker";
 
 const loading_status = {
@@ -30,7 +30,9 @@ describe("Textbox", () => {
 			label: "Textbox"
 		});
 
-		const item: HTMLInputElement = getByDisplayValue("hello world");
+		const item: HTMLInputElement = getByDisplayValue(
+			"hello world"
+		) as HTMLInputElement;
 		assert.equal(item.value, "hello world");
 	});
 
@@ -45,7 +47,7 @@ describe("Textbox", () => {
 			label: "Textbox"
 		});
 
-		const item: HTMLInputElement = getByDisplayValue("hi");
+		const item: HTMLInputElement = getByDisplayValue("hi") as HTMLInputElement;
 
 		const mock = spy();
 		component.$on("change", mock);
diff --git a/js/textbox/index.svelte b/js/textbox/index.svelte
deleted file mode 100644
index 5a6c3291f7..0000000000
--- a/js/textbox/index.svelte
+++ /dev/null
@@ -1,90 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import Static from "./static";
-	import Interactive from "./interactive";
-
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	export let label = "Textbox";
-	export let info: string | undefined = undefined;
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value = "";
-	export let lines: number;
-	export let placeholder = "";
-	export let show_label: boolean;
-	export let max_lines: number;
-	export let type: "text" | "password" | "email" = "text";
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let show_copy_button = false;
-	export let loading_status: LoadingStatus | undefined = undefined;
-	export let mode: "static" | "interactive";
-	export let value_is_output = false;
-	export let rtl = false;
-	export let text_align: "left" | "right" | undefined = undefined;
-	export let autofocus = false;
-</script>
-
-{#if mode === "static"}
-	<Static
-		{label}
-		{info}
-		{elem_id}
-		{elem_classes}
-		{visible}
-		bind:value
-		{lines}
-		{placeholder}
-		{show_label}
-		{max_lines}
-		{type}
-		{container}
-		{scale}
-		{min_width}
-		{show_copy_button}
-		{loading_status}
-		bind:value_is_output
-		{rtl}
-		{text_align}
-		{autofocus}
-		on:change
-		on:input
-		on:submit
-		on:blur
-		on:select
-		on:focus
-	></Static>
-{:else}
-	<Interactive
-		{label}
-		{info}
-		{elem_id}
-		{elem_classes}
-		{visible}
-		bind:value
-		{lines}
-		{placeholder}
-		{show_label}
-		{max_lines}
-		{type}
-		{container}
-		{scale}
-		{min_width}
-		{show_copy_button}
-		{loading_status}
-		bind:value_is_output
-		{rtl}
-		{text_align}
-		{autofocus}
-		on:change
-		on:input
-		on:submit
-		on:blur
-		on:select
-		on:focus
-	></Interactive>
-{/if}
diff --git a/js/textbox/package.json b/js/textbox/package.json
index 33dafe024e..08bf90233a 100644
--- a/js/textbox/package.json
+++ b/js/textbox/package.json
@@ -9,7 +9,6 @@
 	"private": true,
 	"main_changeset": true,
 	"exports": {
-		".": "./index.svelte",
 		"./package.json": "./package.json",
 		"./interactive": "./interactive/index.ts",
 		"./static": "./static/index.ts",
diff --git a/js/timeseries/index.svelte b/js/timeseries/index.svelte
deleted file mode 100644
index 64f06c5920..0000000000
--- a/js/timeseries/index.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<script lang="ts">
-	import Static from "./static";
-	import Interactive from "./interactive";
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	interface StaticData {
-		data: number[][];
-		headers: string[];
-	}
-	interface Data {
-		data: number[][] | string;
-		headers?: string[];
-	}
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: null | Data;
-	export let y: string[];
-	export let x: string;
-	export let mode: "static" | "interactive";
-	export let label: string;
-	export let show_label: boolean;
-	export let colors: string[];
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let loading_status: LoadingStatus;
-</script>
-
-{#if mode === "static"}
-	<Static
-		bind:value
-		{elem_id}
-		{elem_classes}
-		{visible}
-		{label}
-		{show_label}
-		{colors}
-		{container}
-		{scale}
-		{min_width}
-		{loading_status}
-	></Static>
-{:else}
-	<Interactive
-		bind:value
-		{elem_id}
-		{elem_classes}
-		{visible}
-		{y}
-		{x}
-		{label}
-		{show_label}
-		{colors}
-		{container}
-		{scale}
-		{min_width}
-		{loading_status}
-	></Interactive>
-{/if}
diff --git a/js/timeseries/package.json b/js/timeseries/package.json
index 1e7af2268e..d810301328 100644
--- a/js/timeseries/package.json
+++ b/js/timeseries/package.json
@@ -9,7 +9,6 @@
 	"private": true,
 	"main_changeset": true,
 	"exports": {
-		".": "./index.svelte",
 		"./package.json": "./package.json",
 		"./interactive": "./interactive/index.ts",
 		"./static": "./static/index.ts",
diff --git a/js/uploadbutton/UploadButton.test.ts b/js/uploadbutton/UploadButton.test.ts
index 37cd83b914..ce8e6d301b 100644
--- a/js/uploadbutton/UploadButton.test.ts
+++ b/js/uploadbutton/UploadButton.test.ts
@@ -3,8 +3,7 @@ import { spy, spyOn } from "tinyspy";
 import { cleanup, render, wait_for_event } from "@gradio/tootils";
 import event from "@testing-library/user-event";
 import { setupi18n } from "../app/src/i18n";
-import type { LoadingStatus } from "@gradio/statustracker";
-import UploadButton from "./index.svelte";
+import UploadButton from "./interactive";
 
 describe("UploadButton", () => {
 	afterEach(() => {
diff --git a/js/uploadbutton/index.svelte b/js/uploadbutton/index.svelte
deleted file mode 100644
index 621f718c6e..0000000000
--- a/js/uploadbutton/index.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script lang="ts">
-	import Static from "./static";
-	import Interactive from "./interactive";
-
-	import type { FileData } from "@gradio/upload";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let label: string;
-	export let value: null | FileData;
-	export let file_count: string;
-	export let file_types: string[] = [];
-	export let root: string;
-	export let size: "sm" | "lg" = "lg";
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let mode: "static" | "dynamic" = "dynamic";
-	export let variant: "primary" | "secondary" | "stop" = "secondary";
-</script>
-
-{#if mode === "static"}
-	<Static
-		bind:value
-		{elem_id}
-		{elem_classes}
-		{visible}
-		{file_count}
-		{file_types}
-		{size}
-		{scale}
-		{min_width}
-		{variant}
-		{label}
-		{root}
-		on:click
-		on:upload
-		on:change
-	/>
-{:else}
-	<Interactive
-		bind:value
-		{elem_id}
-		{elem_classes}
-		{visible}
-		{file_count}
-		{file_types}
-		{size}
-		{scale}
-		{min_width}
-		{variant}
-		{label}
-		{root}
-		on:click
-		on:upload
-		on:change
-	/>
-{/if}
diff --git a/js/uploadbutton/package.json b/js/uploadbutton/package.json
index 548e600724..94c419a183 100644
--- a/js/uploadbutton/package.json
+++ b/js/uploadbutton/package.json
@@ -9,7 +9,6 @@
 	"private": true,
 	"main_changeset": true,
 	"exports": {
-		".": "./index.svelte",
 		"./package.json": "./package.json",
 		"./interactive": "./interactive/index.ts",
 		"./static": "./static/index.ts",
diff --git a/js/video/Video.stories.svelte b/js/video/Video.stories.svelte
index 07600e0ac2..425456e21c 100644
--- a/js/video/Video.stories.svelte
+++ b/js/video/Video.stories.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-	import Video from "./index.svelte";
+	import Video from "./interactive";
 </script>
 
 <Meta
diff --git a/js/video/Video.test.ts b/js/video/Video.test.ts
index 2e4139fd14..798a6fc662 100644
--- a/js/video/Video.test.ts
+++ b/js/video/Video.test.ts
@@ -12,7 +12,9 @@ import { spy, spyOn } from "tinyspy";
 import { cleanup, render } from "@gradio/tootils";
 import { setupi18n } from "../app/src/i18n";
 
-import Video from "./index.svelte";
+import InteractiveVideo from "./interactive";
+import StaticVideo from "./static";
+
 import type { LoadingStatus } from "@gradio/statustracker";
 
 const loading_status = {
@@ -35,10 +37,9 @@ describe("Video", () => {
 	afterEach(() => cleanup());
 
 	test("renders provided value and label", async () => {
-		const { getByTestId, queryAllByText } = await render(Video, {
+		const { getByTestId, queryAllByText } = await render(InteractiveVideo, {
 			show_label: true,
 			loading_status,
-			mode: "dynamic",
 			value: [
 				{
 					name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
@@ -55,18 +56,17 @@ describe("Video", () => {
 			source: "upload"
 		});
 		assert.isTrue(
-			getByTestId("Test Label-player").src.endsWith(
+			(getByTestId("Test Label-player") as HTMLVideoElement).src.endsWith(
 				"foo/file=https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
 			)
 		);
-		assert(queryAllByText("Test Label").length, 1);
+		assert.equal(queryAllByText("Test Label").length, 1);
 	});
 
 	test("hides label", async () => {
-		const { queryAllByText } = await render(Video, {
+		const { queryAllByText } = await render(InteractiveVideo, {
 			show_label: false,
 			loading_status,
-			mode: "dynamic",
 			value: {
 				name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
 				data: null,
@@ -80,14 +80,13 @@ describe("Video", () => {
 			name: "bar",
 			source: "upload"
 		});
-		assert(queryAllByText("Video Component").length, 0);
+		assert.equal(queryAllByText("Video Component").length, 1);
 	});
 
 	test("static Video sets value", async () => {
-		const { getByTestId } = await render(Video, {
+		const { getByTestId } = await render(StaticVideo, {
 			show_label: true,
 			loading_status,
-			mode: "static",
 			value: [
 				{
 					name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
@@ -103,14 +102,14 @@ describe("Video", () => {
 			source: "upload"
 		});
 		assert.isTrue(
-			getByTestId("test-player").src.endsWith(
+			(getByTestId("test-player") as HTMLVideoElement).src.endsWith(
 				"foo/file=https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
 			)
 		);
 	});
 
 	test("when autoplay is true `media.play` should be called in static mode", async () => {
-		const { getByTestId } = await render(Video, {
+		const { getByTestId } = await render(StaticVideo, {
 			show_label: true,
 			loading_status,
 			mode: "static",
@@ -128,17 +127,16 @@ describe("Video", () => {
 			source: "upload",
 			autoplay: true
 		});
-		const startButton = getByTestId<HTMLAudioElement>("test-player");
+		const startButton = getByTestId("test-player") as HTMLVideoElement;
 		const fn = spyOn(startButton, "play");
 		startButton.dispatchEvent(new Event("loadeddata"));
 		assert.equal(fn.callCount, 1);
 	});
 
 	test("when autoplay is true `media.play` should be called in dynamic mode", async () => {
-		const { getByTestId } = await render(Video, {
+		const { getByTestId } = await render(InteractiveVideo, {
 			show_label: true,
 			loading_status,
-			mode: "dynamic",
 			value: [
 				{
 					name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
@@ -153,14 +151,14 @@ describe("Video", () => {
 			source: "upload",
 			autoplay: true
 		});
-		const startButton = getByTestId<HTMLAudioElement>("test-player");
+		const startButton = getByTestId("test-player") as HTMLVideoElement;
 		const fn = spyOn(startButton, "play");
 		startButton.dispatchEvent(new Event("loadeddata"));
 		assert.equal(fn.callCount, 1);
 	});
 
 	test("when autoplay is true `media.play` should be called in static mode when the Video data is updated", async () => {
-		const { component, getByTestId } = await render(Video, {
+		const { component, getByTestId } = await render(StaticVideo, {
 			show_label: true,
 			loading_status,
 			mode: "static",
@@ -178,22 +176,24 @@ describe("Video", () => {
 			source: "upload",
 			autoplay: true
 		});
-		const startButton = getByTestId<HTMLAudioElement>("test-player");
+		const startButton = getByTestId("test-player") as HTMLVideoElement;
 		const fn = spyOn(startButton, "play");
 		startButton.dispatchEvent(new Event("loadeddata"));
 		component.$set({
-			value: {
-				name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
-				data: null,
-				is_file: true
-			}
+			value: [
+				{
+					name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
+					data: null,
+					is_file: true
+				}
+			]
 		});
 		startButton.dispatchEvent(new Event("loadeddata"));
 		assert.equal(fn.callCount, 2);
 	});
 
 	test("when autoplay is true `media.play` should be called in dynamic mode when the Video data is updated", async () => {
-		const { component, getByTestId } = await render(Video, {
+		const { component, getByTestId } = await render(InteractiveVideo, {
 			show_label: true,
 			loading_status,
 			mode: "dynamic",
@@ -211,15 +211,17 @@ describe("Video", () => {
 			source: "upload",
 			autoplay: true
 		});
-		const startButton = getByTestId<HTMLAudioElement>("test-player");
+		const startButton = getByTestId("test-player") as HTMLVideoElement;
 		const fn = spyOn(startButton, "play");
 		startButton.dispatchEvent(new Event("loadeddata"));
 		component.$set({
-			value: {
-				name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
-				data: null,
-				is_file: true
-			}
+			value: [
+				{
+					name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
+					data: null,
+					is_file: true
+				}
+			]
 		});
 		startButton.dispatchEvent(new Event("loadeddata"));
 		assert.equal(fn.callCount, 2);
@@ -232,7 +234,7 @@ describe("Video", () => {
 				is_file: true
 			}
 		];
-		const results = await render(Video, {
+		const results = await render(StaticVideo, {
 			mode: "static",
 			label: "video",
 			show_label: true,
@@ -250,7 +252,7 @@ describe("Video", () => {
 	});
 
 	test("video change event trigger fires when value is changed and only fires once", async () => {
-		const { component } = await render(Video, {
+		const { component } = await render(InteractiveVideo, {
 			show_label: true,
 			loading_status,
 			mode: "dynamic",
diff --git a/js/video/index.svelte b/js/video/index.svelte
deleted file mode 100644
index 183f20edfc..0000000000
--- a/js/video/index.svelte
+++ /dev/null
@@ -1,91 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import Static from "./static";
-	import Interactive from "./interactive";
-
-	import type { FileData } from "@gradio/upload";
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: [FileData, FileData | null] | null = null;
-	export let label: string;
-	export let source: "upload" | "webcam";
-	export let root: string;
-	export let root_url: null | string;
-	export let show_label: boolean;
-	export let loading_status: LoadingStatus;
-	export let height: number | undefined;
-	export let width: number | undefined;
-	export let mirror_webcam: boolean;
-	export let include_audio: boolean;
-	export let container = false;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let mode: "static" | "interactive";
-	export let autoplay = false;
-	export let show_share_button = true;
-</script>
-
-{#if mode === "static"}
-	<Static
-		{elem_id}
-		{elem_classes}
-		{visible}
-		bind:value
-		{label}
-		{source}
-		{root}
-		{root_url}
-		{show_label}
-		{loading_status}
-		{height}
-		{width}
-		{container}
-		{scale}
-		{min_width}
-		{autoplay}
-		{show_share_button}
-		on:clear
-		on:play
-		on:pause
-		on:upload
-		on:stop
-		on:end
-		on:start_recording
-		on:stop_recording
-		on:change
-	></Static>
-{:else}
-	<Interactive
-		{elem_id}
-		{elem_classes}
-		{visible}
-		bind:value
-		{label}
-		{source}
-		{root}
-		{root_url}
-		{show_label}
-		{loading_status}
-		{height}
-		{width}
-		{mirror_webcam}
-		{include_audio}
-		{container}
-		{scale}
-		{min_width}
-		{autoplay}
-		on:clear
-		on:play
-		on:pause
-		on:upload
-		on:stop
-		on:end
-		on:start_recording
-		on:stop_recording
-		on:change
-	></Interactive>
-{/if}
diff --git a/js/video/package.json b/js/video/package.json
index e1ac6c490f..84239c0cb8 100644
--- a/js/video/package.json
+++ b/js/video/package.json
@@ -17,7 +17,6 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		".": "./index.svelte",
 		"./package.json": "./package.json",
 		"./interactive": "./interactive/index.ts",
 		"./static": "./static/index.ts",