From 319c30f3fccf23bfe1da6c9b132a6a99d59652f7 Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Tue, 17 Oct 2023 21:57:46 +0100
Subject: [PATCH] rererefactor frontend files (#5960)

* do all the things

* add changeset

* remove codemod

* fix

* change casing

* condense upload button

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
---
 .changeset/cute-crabs-know.md                 |  46 +++++
 .../StaticAccordion.svelte => Index.svelte}   |   2 +-
 js/accordion/package.json                     |  10 +-
 .../{static => shared}/Accordion.svelte       |   0
 js/accordion/static/index.ts                  |   1 -
 .../AnnotatedImage.svelte => Index.svelte}    |   2 +-
 js/annotatedimage/package.json                |  10 +-
 js/annotatedimage/static/index.ts             |   1 -
 js/app/build_plugins.ts                       |  42 ++---
 js/app/component_loader.js                    |  13 +-
 js/app/src/Blocks.svelte                      |  64 ++-----
 js/app/src/Login.svelte                       |   4 +-
 js/app/src/api_docs/CopyButton.svelte         |   2 +-
 js/app/src/api_docs/InputPayload.svelte       |   4 +-
 js/app/src/api_docs/TryButton.svelte          |   2 +-
 js/app/src/vite-env-override.d.ts             |  13 +-
 .../{example/Audio.svelte => Example.svelte}  |   0
 js/audio/Index.svelte                         | 153 ++++++++++++++++
 js/audio/example/index.ts                     |   1 -
 js/audio/interactive/InteractiveAudio.svelte  | 116 ------------
 js/audio/interactive/index.ts                 |   1 -
 js/audio/package.json                         |  10 +-
 .../{static => shared}/AudioPlayer.svelte     |   2 +-
 .../InteractiveAudio.svelte}                  |  16 +-
 .../{Audio.svelte => StaticAudio.svelte}      |   5 +-
 js/audio/static/StaticAudio.svelte            |  84 ---------
 js/audio/static/index.ts                      |   1 -
 js/box/{static/index.svelte => Index.svelte}  |   0
 js/box/package.json                           |  10 +-
 js/box/static/index.ts                        |   1 -
 js/button/Button.stories.svelte               |   2 +-
 .../StaticButton.svelte => Index.svelte}      |   8 +-
 js/button/package.json                        |   8 +-
 js/button/{static => shared}/Button.svelte    |   0
 js/button/static/index.ts                     |   2 -
 js/chatbot/Chatbot.stories.svelte             |   2 +-
 .../StaticChatbot.svelte => Index.svelte}     |   2 +-
 js/chatbot/package.json                       |   9 +-
 js/chatbot/{static => shared}/ChatBot.svelte  |   4 +-
 js/chatbot/{static => shared}/Copy.svelte     |   0
 .../{static => shared}/LikeDislike.svelte     |   0
 js/chatbot/{static => shared}/Pending.svelte  |   0
 js/chatbot/{static => shared}/autorender.d.ts |   0
 js/chatbot/{ => shared}/utils.ts              |   0
 js/chatbot/static/index.ts                    |   1 -
 .../Checkbox.svelte => Example.svelte}        |   0
 .../StaticCheckbox.svelte => Index.svelte}    |   6 +-
 js/checkbox/example/index.ts                  |   1 -
 .../interactive/InteractiveCheckbox.svelte    |  45 -----
 js/checkbox/interactive/index.ts              |   1 -
 js/checkbox/package.json                      |  10 +-
 js/checkbox/shared/index.ts                   |   1 -
 js/checkbox/static/index.ts                   |   1 -
 .../Checkboxgroup.svelte => Example.svelte}   |   0
 ...ctiveCheckboxgroup.svelte => Index.svelte} |   4 +-
 js/checkboxgroup/example/index.ts             |   1 -
 js/checkboxgroup/interactive/index.ts         |   1 -
 js/checkboxgroup/package.json                 |  10 +-
 js/checkboxgroup/shared/index.ts              |   1 -
 .../static/StaticCheckboxgroup.svelte         |  56 ------
 js/checkboxgroup/static/index.ts              |   1 -
 .../{example/Code.svelte => Example.svelte}   |   0
 .../StaticCode.svelte => Index.svelte}        |  21 ++-
 js/code/example/index.ts                      |   1 -
 js/code/interactive/InteractiveCode.svelte    |  52 ------
 js/code/interactive/index.ts                  |   1 -
 js/code/package.json                          |  10 +-
 js/code/shared/index.ts                       |   2 -
 js/code/static/index.ts                       |   1 -
 js/colorpicker/ColorPicker.stories.svelte     |   2 +-
 .../Colorpicker.svelte => Example.svelte}     |   0
 .../StaticColorpicker.svelte => Index.svelte} |   6 +-
 js/colorpicker/example/index.ts               |   1 -
 .../interactive/InteractiveColorpicker.svelte |  52 ------
 js/colorpicker/interactive/index.ts           |   1 -
 js/colorpicker/package.json                   |  10 +-
 js/colorpicker/shared/index.ts                |   1 -
 js/colorpicker/static/index.ts                |   1 -
 .../StaticColumn.svelte => Index.svelte}      |   0
 js/column/package.json                        |  10 +-
 js/column/static/index.ts                     |   1 -
 .../Dataframe.svelte => Example.svelte}       |   0
 .../StaticDataframe.svelte => Index.svelte}   |   7 +-
 js/dataframe/example/index.ts                 |   1 -
 .../interactive/InteractiveDataframe.svelte   | 114 ------------
 js/dataframe/interactive/index.ts             |   1 -
 js/dataframe/package.json                     |  10 +-
 js/dataframe/shared/Table.svelte              |   4 +-
 js/dataframe/shared/index.ts                  |   1 -
 js/dataframe/static/index.ts                  |   1 -
 .../{static/index.svelte => Index.svelte}     |   0
 js/dataset/package.json                       |  10 +-
 js/dataset/static/index.ts                    |   1 -
 .../Dropdown.svelte => Example.svelte}        |   0
 .../StaticDropdown.svelte => Index.svelte}    |   9 +-
 js/dropdown/example/index.ts                  |   1 -
 .../interactive/InteractiveDropdown.svelte    |  87 ---------
 js/dropdown/interactive/index.ts              |   1 -
 js/dropdown/package.json                      |  10 +-
 js/dropdown/shared/index.ts                   |   2 -
 js/dropdown/static/index.ts                   |   1 -
 .../Fallback.svelte => Example.svelte}        |   0
 ...nteractiveFallback.svelte => Index.svelte} |   0
 js/fallback/example/index.ts                  |   1 -
 js/fallback/interactive/index.ts              |   1 -
 js/fallback/package.json                      |  10 +-
 js/fallback/static/StaticFallback.svelte      |  36 ----
 js/fallback/static/index.ts                   |   1 -
 .../{example/File.svelte => Example.svelte}   |   0
 .../InteractiveFile.svelte => Index.svelte}   | 128 ++++++++-----
 js/file/example/index.ts                      |   1 -
 js/file/interactive/index.ts                  |   1 -
 js/file/package.json                          |  10 +-
 js/file/{static => shared}/File.svelte        |   2 +-
 .../{interactive => shared}/FileUpload.svelte |   2 +-
 js/file/shared/index.ts                       |   1 -
 js/file/static/StaticFile.svelte              | 136 --------------
 js/file/static/index.ts                       |   2 -
 js/file/static/utils.ts                       |  33 ----
 .../{example/File.svelte => Example.svelte}   |   0
 ...StaticFileExplorer.svelte => Index.svelte} |  11 +-
 js/fileexplorer/example/index.ts              |   1 -
 .../InteractiveFileExplorer.svelte            |  63 -------
 js/fileexplorer/interactive/index.ts          |   1 -
 js/fileexplorer/package.json                  |  10 +-
 js/fileexplorer/shared/index.ts               |   1 -
 js/fileexplorer/static/index.ts               |   1 -
 js/fileexplorer/static/utils.ts               |  33 ----
 .../StaticForm.svelte => Index.svelte}        |   0
 js/form/package.json                          |  10 +-
 js/form/static/index.ts                       |   1 -
 js/gallery/Gallery.stories.svelte             |   2 +-
 .../StaticGallery.svelte => Index.svelte}     |   2 +-
 js/gallery/package.json                       |  10 +-
 js/gallery/{static => shared}/Gallery.svelte  |   0
 js/gallery/{static => shared}/utils.ts        |   0
 js/gallery/static/index.ts                    |   1 -
 .../{static/Group.svelte => Index.svelte}     |   0
 js/group/package.json                         |  10 +-
 js/group/static/index.ts                      |   1 -
 .../HighlightedText.stories.svelte            |  25 +--
 js/highlightedtext/Index.svelte               | 131 +++++++++++++
 .../InteractiveHighlightedText.svelte         |  81 --------
 js/highlightedtext/interactive/index.ts       |   1 -
 js/highlightedtext/package.json               |  10 +-
 .../InteractiveHighlightedtext.svelte}        |   2 +-
 .../{interactive => shared}/LabelInput.svelte |   0
 .../StaticHighlightedtext.svelte}             |   2 +-
 js/highlightedtext/{ => shared}/utils.ts      |   0
 .../static/StaticHighlightedtext.svelte       |  88 ---------
 js/highlightedtext/static/index.ts            |   1 -
 .../{example/Html.svelte => Example.svelte}   |   0
 .../StaticHtml.svelte => Index.svelte}        |   2 +-
 js/html/example/index.ts                      |   1 -
 js/html/package.json                          |  11 +-
 js/html/{static => shared}/HTML.svelte        |   0
 js/html/static/index.ts                       |   1 -
 .../{example/Image.svelte => Example.svelte}  |   2 +-
 js/image/Image.stories.svelte                 |   2 +-
 js/image/Index.svelte                         | 155 ++++++++++++++++
 js/image/example/index.ts                     |   1 -
 js/image/interactive/InteractiveImage.svelte  | 108 -----------
 js/image/interactive/index.ts                 |   2 -
 js/image/package.json                         |  10 +-
 .../{interactive => shared}/Cropper.svelte    |   0
 .../ImageEditor.svelte}                       |   6 +-
 .../{static => shared}/ImagePreview.svelte    |   4 +-
 .../ModifySketch.svelte                       |   0
 .../{interactive => shared}/Sketch.svelte     |   0
 .../SketchSettings.svelte                     |   0
 .../{interactive => shared}/Webcam.svelte     |   0
 js/image/static/StaticImage.svelte            |  76 --------
 js/image/static/index.ts                      |   1 -
 .../StaticJson.svelte => Index.svelte}        |   2 +-
 js/json/package.json                          |  10 +-
 js/json/{static => shared}/JSON.svelte        |   0
 js/json/{static => shared}/JSONNode.svelte    |   0
 js/json/static/index.ts                       |   1 -
 .../StaticLabel.svelte => Index.svelte}       |   2 +-
 js/label/package.json                         |  10 +-
 js/label/{static => shared}/Label.svelte      |   0
 js/label/static/index.ts                      |   1 -
 .../Markdown.svelte => Example.svelte}        |   0
 .../StaticMarkdown.svelte => Index.svelte}    |   6 +-
 js/markdown/Markdown.stories.svelte           |   2 +-
 js/markdown/example/index.ts                  |   1 -
 js/markdown/package.json                      |  11 +-
 .../{static => shared}/Markdown.svelte        |   0
 .../{static => shared}/MarkdownCode.svelte    |   0
 js/markdown/{static => shared}/prism-dark.css |   0
 js/markdown/{static => shared}/prism.css      |   0
 js/markdown/{static => shared}/utils.ts       |   0
 js/markdown/static/index.ts                   |   2 -
 .../Model3d.svelte => Example.svelte}         |   0
 js/model3D/Index.svelte                       | 118 ++++++++++++
 js/model3D/example/index.ts                   |   1 -
 .../interactive/InteractiveModel3d.svelte     |  78 --------
 js/model3D/interactive/index.ts               |   1 -
 js/model3D/package.json                       |  10 +-
 js/model3D/{static => shared}/Model3D.svelte  |   2 +-
 .../Model3DUpload.svelte                      |   2 +-
 js/model3D/static/StaticModel3d.svelte        |  78 --------
 js/model3D/static/index.ts                    |   1 -
 .../{example/Number.svelte => Example.svelte} |   0
 .../InteractiveNumber.svelte => Index.svelte} |   5 +-
 js/number/Number.stories.svelte               |   2 +-
 js/number/example/index.ts                    |   1 -
 js/number/interactive/index.ts                |   1 -
 js/number/package.json                        |  10 +-
 js/number/shared/index.ts                     |   1 -
 js/number/static/StaticNumber.svelte          |  63 -------
 js/number/static/index.ts                     |   1 -
 .../StaticPlot.svelte => Index.svelte}        |   8 +-
 js/plot/package.json                          |  10 +-
 js/plot/{static => shared}/Plot.svelte        |   0
 js/plot/{static => shared}/utils.ts           |   0
 js/plot/static/index.ts                       |   2 -
 js/preview/src/build.ts                       |  14 +-
 js/preview/src/dev.ts                         |  23 +--
 .../frontend/static/StaticTextbox.svelte      |   2 +-
 .../{example/Radio.svelte => Example.svelte}  |   0
 .../InteractiveRadio.svelte => Index.svelte}  |   4 +-
 js/radio/example/index.ts                     |   1 -
 js/radio/interactive/index.ts                 |   1 -
 js/radio/package.json                         |  10 +-
 js/radio/shared/index.ts                      |   1 -
 js/radio/static/Radio.svelte                  |  56 ------
 js/radio/static/index.ts                      |   1 -
 .../{static/StaticRow.svelte => Index.svelte} |   0
 js/row/Row.stories.svelte                     |   4 +-
 js/row/package.json                           |  10 +-
 js/row/static/index.ts                        |   1 -
 .../{example/Slider.svelte => Example.svelte} |   0
 .../StaticSlider.svelte => Index.svelte}      |   5 +-
 js/slider/Slider.stories.svelte               |   2 +-
 js/slider/example/index.ts                    |   1 -
 .../interactive/InteractiveSlider.svelte      |  51 ------
 js/slider/interactive/index.ts                |   1 -
 js/slider/package.json                        |  10 +-
 js/slider/shared/index.ts                     |   1 -
 js/slider/static/index.ts                     |   1 -
 .../src/Image.svelte => state/Index.svelte}   |   0
 js/state/index.svelte                         |   0
 js/state/package.json                         |  10 +-
 js/state/static/index.svelte                  |   0
 js/state/static/index.ts                      |   1 -
 .../StaticTabItem.svelte => Index.svelte}     |   2 +-
 js/tabitem/package.json                       |  10 +-
 js/tabitem/{static => shared}/TabItem.svelte  |   2 +-
 js/tabitem/static/index.ts                    |   1 -
 .../StaticTabs.svelte => Index.svelte}        |   6 +-
 js/tabs/package.json                          |  10 +-
 js/tabs/{static => shared}/Tabs.svelte        |   0
 js/tabs/static/index.ts                       |   2 -
 .../Textbox.svelte => Example.svelte}         |   0
 .../StaticTextbox.svelte => Index.svelte}     |   5 +-
 js/textbox/Textbox.stories.svelte             |   2 +-
 js/textbox/example/index.ts                   |   1 -
 .../interactive/InteractiveTextbox.svelte     |  92 ----------
 js/textbox/interactive/index.ts               |   2 -
 js/textbox/package.json                       |  10 +-
 js/textbox/shared/index.ts                    |   1 -
 js/textbox/static/index.ts                    |   1 -
 ...StaticUploadButton.svelte => Index.svelte} |   5 +-
 .../InteractiveUploadButton.svelte            |  80 --------
 js/uploadbutton/interactive/index.ts          |   1 -
 js/uploadbutton/package.json                  |   9 +-
 js/uploadbutton/shared/UploadButton.svelte    |   2 +-
 js/uploadbutton/shared/index.ts               |   1 -
 js/uploadbutton/static/index.ts               |   1 -
 .../{example/Video.svelte => Example.svelte}  |   3 +-
 js/video/Index.svelte                         | 173 ++++++++++++++++++
 js/video/Video.stories.svelte                 |   2 +-
 js/video/example/index.ts                     |   1 -
 js/video/interactive/InteractiveVideo.svelte  | 130 -------------
 js/video/interactive/index.ts                 |   1 -
 js/video/package.json                         |  10 +-
 .../InteractiveVideo.svelte}                  |   6 +-
 js/video/shared/Player.svelte                 |   2 +-
 js/video/shared/StaticVideo.svelte            |  70 +++++++
 .../{static => shared}/VideoPreview.svelte    |   2 +-
 js/video/shared/index.ts                      |   3 -
 js/video/static/StaticVideo.svelte            | 106 -----------
 js/video/static/index.ts                      |   1 -
 pnpm-lock.yaml                                |   2 +
 285 files changed, 1283 insertions(+), 2602 deletions(-)
 create mode 100644 .changeset/cute-crabs-know.md
 rename js/accordion/{static/StaticAccordion.svelte => Index.svelte} (93%)
 rename js/accordion/{static => shared}/Accordion.svelte (100%)
 delete mode 100644 js/accordion/static/index.ts
 rename js/annotatedimage/{static/AnnotatedImage.svelte => Index.svelte} (99%)
 delete mode 100644 js/annotatedimage/static/index.ts
 rename js/audio/{example/Audio.svelte => Example.svelte} (100%)
 create mode 100644 js/audio/Index.svelte
 delete mode 100644 js/audio/example/index.ts
 delete mode 100644 js/audio/interactive/InteractiveAudio.svelte
 delete mode 100644 js/audio/interactive/index.ts
 rename js/audio/{static => shared}/AudioPlayer.svelte (98%)
 rename js/audio/{interactive/Audio.svelte => shared/InteractiveAudio.svelte} (96%)
 rename js/audio/shared/{Audio.svelte => StaticAudio.svelte} (94%)
 delete mode 100644 js/audio/static/StaticAudio.svelte
 delete mode 100644 js/audio/static/index.ts
 rename js/box/{static/index.svelte => Index.svelte} (100%)
 delete mode 100644 js/box/static/index.ts
 rename js/button/{static/StaticButton.svelte => Index.svelte} (79%)
 rename js/button/{static => shared}/Button.svelte (100%)
 delete mode 100644 js/button/static/index.ts
 rename js/chatbot/{static/StaticChatbot.svelte => Index.svelte} (98%)
 rename js/chatbot/{static => shared}/ChatBot.svelte (99%)
 rename js/chatbot/{static => shared}/Copy.svelte (100%)
 rename js/chatbot/{static => shared}/LikeDislike.svelte (100%)
 rename js/chatbot/{static => shared}/Pending.svelte (100%)
 rename js/chatbot/{static => shared}/autorender.d.ts (100%)
 rename js/chatbot/{ => shared}/utils.ts (100%)
 delete mode 100644 js/chatbot/static/index.ts
 rename js/checkbox/{example/Checkbox.svelte => Example.svelte} (100%)
 rename js/checkbox/{static/StaticCheckbox.svelte => Index.svelte} (90%)
 delete mode 100644 js/checkbox/example/index.ts
 delete mode 100644 js/checkbox/interactive/InteractiveCheckbox.svelte
 delete mode 100644 js/checkbox/interactive/index.ts
 delete mode 100644 js/checkbox/shared/index.ts
 delete mode 100644 js/checkbox/static/index.ts
 rename js/checkboxgroup/{example/Checkboxgroup.svelte => Example.svelte} (100%)
 rename js/checkboxgroup/{interactive/InteractiveCheckboxgroup.svelte => Index.svelte} (90%)
 delete mode 100644 js/checkboxgroup/example/index.ts
 delete mode 100644 js/checkboxgroup/interactive/index.ts
 delete mode 100644 js/checkboxgroup/shared/index.ts
 delete mode 100644 js/checkboxgroup/static/StaticCheckboxgroup.svelte
 delete mode 100644 js/checkboxgroup/static/index.ts
 rename js/code/{example/Code.svelte => Example.svelte} (100%)
 rename js/code/{static/StaticCode.svelte => Index.svelte} (86%)
 delete mode 100644 js/code/example/index.ts
 delete mode 100644 js/code/interactive/InteractiveCode.svelte
 delete mode 100644 js/code/interactive/index.ts
 delete mode 100644 js/code/shared/index.ts
 delete mode 100644 js/code/static/index.ts
 rename js/colorpicker/{example/Colorpicker.svelte => Example.svelte} (100%)
 rename js/colorpicker/{static/StaticColorpicker.svelte => Index.svelte} (91%)
 delete mode 100644 js/colorpicker/example/index.ts
 delete mode 100644 js/colorpicker/interactive/InteractiveColorpicker.svelte
 delete mode 100644 js/colorpicker/interactive/index.ts
 delete mode 100644 js/colorpicker/shared/index.ts
 delete mode 100644 js/colorpicker/static/index.ts
 rename js/column/{static/StaticColumn.svelte => Index.svelte} (100%)
 delete mode 100644 js/column/static/index.ts
 rename js/dataframe/{example/Dataframe.svelte => Example.svelte} (100%)
 rename js/dataframe/{static/StaticDataframe.svelte => Index.svelte} (92%)
 delete mode 100644 js/dataframe/example/index.ts
 delete mode 100644 js/dataframe/interactive/InteractiveDataframe.svelte
 delete mode 100644 js/dataframe/interactive/index.ts
 delete mode 100644 js/dataframe/shared/index.ts
 delete mode 100644 js/dataframe/static/index.ts
 rename js/dataset/{static/index.svelte => Index.svelte} (100%)
 delete mode 100644 js/dataset/static/index.ts
 rename js/dropdown/{example/Dropdown.svelte => Example.svelte} (100%)
 rename js/dropdown/{static/StaticDropdown.svelte => Index.svelte} (90%)
 delete mode 100644 js/dropdown/example/index.ts
 delete mode 100644 js/dropdown/interactive/InteractiveDropdown.svelte
 delete mode 100644 js/dropdown/interactive/index.ts
 delete mode 100644 js/dropdown/shared/index.ts
 delete mode 100644 js/dropdown/static/index.ts
 rename js/fallback/{example/Fallback.svelte => Example.svelte} (100%)
 rename js/fallback/{interactive/InteractiveFallback.svelte => Index.svelte} (100%)
 delete mode 100644 js/fallback/example/index.ts
 delete mode 100644 js/fallback/interactive/index.ts
 delete mode 100644 js/fallback/static/StaticFallback.svelte
 delete mode 100644 js/fallback/static/index.ts
 rename js/file/{example/File.svelte => Example.svelte} (100%)
 rename js/file/{interactive/InteractiveFile.svelte => Index.svelte} (63%)
 delete mode 100644 js/file/example/index.ts
 delete mode 100644 js/file/interactive/index.ts
 rename js/file/{static => shared}/File.svelte (93%)
 rename js/file/{interactive => shared}/FileUpload.svelte (97%)
 delete mode 100644 js/file/shared/index.ts
 delete mode 100644 js/file/static/StaticFile.svelte
 delete mode 100644 js/file/static/index.ts
 delete mode 100644 js/file/static/utils.ts
 rename js/fileexplorer/{example/File.svelte => Example.svelte} (100%)
 rename js/fileexplorer/{static/StaticFileExplorer.svelte => Index.svelte} (85%)
 delete mode 100644 js/fileexplorer/example/index.ts
 delete mode 100644 js/fileexplorer/interactive/InteractiveFileExplorer.svelte
 delete mode 100644 js/fileexplorer/interactive/index.ts
 delete mode 100644 js/fileexplorer/shared/index.ts
 delete mode 100644 js/fileexplorer/static/index.ts
 delete mode 100644 js/fileexplorer/static/utils.ts
 rename js/form/{static/StaticForm.svelte => Index.svelte} (100%)
 delete mode 100644 js/form/static/index.ts
 rename js/gallery/{static/StaticGallery.svelte => Index.svelte} (97%)
 rename js/gallery/{static => shared}/Gallery.svelte (100%)
 rename js/gallery/{static => shared}/utils.ts (100%)
 delete mode 100644 js/gallery/static/index.ts
 rename js/group/{static/Group.svelte => Index.svelte} (100%)
 delete mode 100644 js/group/static/index.ts
 create mode 100644 js/highlightedtext/Index.svelte
 delete mode 100644 js/highlightedtext/interactive/InteractiveHighlightedText.svelte
 delete mode 100644 js/highlightedtext/interactive/index.ts
 rename js/highlightedtext/{interactive/Highlightedtext.svelte => shared/InteractiveHighlightedtext.svelte} (99%)
 rename js/highlightedtext/{interactive => shared}/LabelInput.svelte (100%)
 rename js/highlightedtext/{static/Highlightedtext.svelte => shared/StaticHighlightedtext.svelte} (99%)
 rename js/highlightedtext/{ => shared}/utils.ts (100%)
 delete mode 100644 js/highlightedtext/static/StaticHighlightedtext.svelte
 delete mode 100644 js/highlightedtext/static/index.ts
 rename js/html/{example/Html.svelte => Example.svelte} (100%)
 rename js/html/{static/StaticHtml.svelte => Index.svelte} (96%)
 delete mode 100644 js/html/example/index.ts
 rename js/html/{static => shared}/HTML.svelte (100%)
 delete mode 100644 js/html/static/index.ts
 rename js/image/{example/Image.svelte => Example.svelte} (94%)
 create mode 100644 js/image/Index.svelte
 delete mode 100644 js/image/example/index.ts
 delete mode 100644 js/image/interactive/InteractiveImage.svelte
 delete mode 100644 js/image/interactive/index.ts
 rename js/image/{interactive => shared}/Cropper.svelte (100%)
 rename js/image/{interactive/Image.svelte => shared/ImageEditor.svelte} (99%)
 rename js/image/{static => shared}/ImagePreview.svelte (94%)
 rename js/image/{interactive => shared}/ModifySketch.svelte (100%)
 rename js/image/{interactive => shared}/Sketch.svelte (100%)
 rename js/image/{interactive => shared}/SketchSettings.svelte (100%)
 rename js/image/{interactive => shared}/Webcam.svelte (100%)
 delete mode 100644 js/image/static/StaticImage.svelte
 delete mode 100644 js/image/static/index.ts
 rename js/json/{static/StaticJson.svelte => Index.svelte} (96%)
 rename js/json/{static => shared}/JSON.svelte (100%)
 rename js/json/{static => shared}/JSONNode.svelte (100%)
 delete mode 100644 js/json/static/index.ts
 rename js/label/{static/StaticLabel.svelte => Index.svelte} (97%)
 rename js/label/{static => shared}/Label.svelte (100%)
 delete mode 100644 js/label/static/index.ts
 rename js/markdown/{example/Markdown.svelte => Example.svelte} (100%)
 rename js/markdown/{static/StaticMarkdown.svelte => Index.svelte} (88%)
 delete mode 100644 js/markdown/example/index.ts
 rename js/markdown/{static => shared}/Markdown.svelte (100%)
 rename js/markdown/{static => shared}/MarkdownCode.svelte (100%)
 rename js/markdown/{static => shared}/prism-dark.css (100%)
 rename js/markdown/{static => shared}/prism.css (100%)
 rename js/markdown/{static => shared}/utils.ts (100%)
 delete mode 100644 js/markdown/static/index.ts
 rename js/model3D/{example/Model3d.svelte => Example.svelte} (100%)
 create mode 100644 js/model3D/Index.svelte
 delete mode 100644 js/model3D/example/index.ts
 delete mode 100644 js/model3D/interactive/InteractiveModel3d.svelte
 delete mode 100644 js/model3D/interactive/index.ts
 rename js/model3D/{static => shared}/Model3D.svelte (97%)
 rename js/model3D/{interactive => shared}/Model3DUpload.svelte (97%)
 delete mode 100644 js/model3D/static/StaticModel3d.svelte
 delete mode 100644 js/model3D/static/index.ts
 rename js/number/{example/Number.svelte => Example.svelte} (100%)
 rename js/number/{interactive/InteractiveNumber.svelte => Index.svelte} (92%)
 delete mode 100644 js/number/example/index.ts
 delete mode 100644 js/number/interactive/index.ts
 delete mode 100644 js/number/shared/index.ts
 delete mode 100644 js/number/static/StaticNumber.svelte
 delete mode 100644 js/number/static/index.ts
 rename js/plot/{static/StaticPlot.svelte => Index.svelte} (90%)
 rename js/plot/{static => shared}/Plot.svelte (100%)
 rename js/plot/{static => shared}/utils.ts (100%)
 delete mode 100644 js/plot/static/index.ts
 rename js/radio/{example/Radio.svelte => Example.svelte} (100%)
 rename js/radio/{interactive/InteractiveRadio.svelte => Index.svelte} (91%)
 delete mode 100644 js/radio/example/index.ts
 delete mode 100644 js/radio/interactive/index.ts
 delete mode 100644 js/radio/shared/index.ts
 delete mode 100644 js/radio/static/Radio.svelte
 delete mode 100644 js/radio/static/index.ts
 rename js/row/{static/StaticRow.svelte => Index.svelte} (100%)
 delete mode 100644 js/row/static/index.ts
 rename js/slider/{example/Slider.svelte => Example.svelte} (100%)
 rename js/slider/{static/StaticSlider.svelte => Index.svelte} (91%)
 delete mode 100644 js/slider/example/index.ts
 delete mode 100644 js/slider/interactive/InteractiveSlider.svelte
 delete mode 100644 js/slider/interactive/index.ts
 delete mode 100644 js/slider/shared/index.ts
 delete mode 100644 js/slider/static/index.ts
 rename js/{image/src/Image.svelte => state/Index.svelte} (100%)
 delete mode 100644 js/state/index.svelte
 delete mode 100644 js/state/static/index.svelte
 delete mode 100644 js/state/static/index.ts
 rename js/tabitem/{static/StaticTabItem.svelte => Index.svelte} (89%)
 rename js/tabitem/{static => shared}/TabItem.svelte (96%)
 delete mode 100644 js/tabitem/static/index.ts
 rename js/tabs/{static/StaticTabs.svelte => Index.svelte} (81%)
 rename js/tabs/{static => shared}/Tabs.svelte (100%)
 delete mode 100644 js/tabs/static/index.ts
 rename js/textbox/{example/Textbox.svelte => Example.svelte} (100%)
 rename js/textbox/{static/StaticTextbox.svelte => Index.svelte} (94%)
 delete mode 100644 js/textbox/example/index.ts
 delete mode 100644 js/textbox/interactive/InteractiveTextbox.svelte
 delete mode 100644 js/textbox/interactive/index.ts
 delete mode 100644 js/textbox/shared/index.ts
 delete mode 100644 js/textbox/static/index.ts
 rename js/uploadbutton/{static/StaticUploadButton.svelte => Index.svelte} (93%)
 delete mode 100644 js/uploadbutton/interactive/InteractiveUploadButton.svelte
 delete mode 100644 js/uploadbutton/interactive/index.ts
 delete mode 100644 js/uploadbutton/shared/index.ts
 delete mode 100644 js/uploadbutton/static/index.ts
 rename js/video/{example/Video.svelte => Example.svelte} (93%)
 create mode 100644 js/video/Index.svelte
 delete mode 100644 js/video/example/index.ts
 delete mode 100644 js/video/interactive/InteractiveVideo.svelte
 delete mode 100644 js/video/interactive/index.ts
 rename js/video/{interactive/Video.svelte => shared/InteractiveVideo.svelte} (93%)
 create mode 100644 js/video/shared/StaticVideo.svelte
 rename js/video/{static => shared}/VideoPreview.svelte (98%)
 delete mode 100644 js/video/shared/index.ts
 delete mode 100644 js/video/static/StaticVideo.svelte
 delete mode 100644 js/video/static/index.ts

diff --git a/.changeset/cute-crabs-know.md b/.changeset/cute-crabs-know.md
new file mode 100644
index 000000000000..ac5fb6e1d147
--- /dev/null
+++ b/.changeset/cute-crabs-know.md
@@ -0,0 +1,46 @@
+---
+"@gradio/accordion": minor
+"@gradio/annotatedimage": minor
+"@gradio/app": minor
+"@gradio/audio": minor
+"@gradio/box": minor
+"@gradio/button": minor
+"@gradio/chatbot": minor
+"@gradio/checkbox": minor
+"@gradio/checkboxgroup": minor
+"@gradio/code": minor
+"@gradio/colorpicker": minor
+"@gradio/column": minor
+"@gradio/dataframe": minor
+"@gradio/dataset": minor
+"@gradio/dropdown": minor
+"@gradio/fallback": minor
+"@gradio/file": minor
+"@gradio/fileexplorer": minor
+"@gradio/form": minor
+"@gradio/gallery": minor
+"@gradio/group": minor
+"@gradio/highlightedtext": minor
+"@gradio/html": minor
+"@gradio/image": minor
+"@gradio/json": minor
+"@gradio/label": minor
+"@gradio/markdown": minor
+"@gradio/model3d": minor
+"@gradio/number": minor
+"@gradio/plot": minor
+"@gradio/preview": minor
+"@gradio/radio": minor
+"@gradio/row": minor
+"@gradio/slider": minor
+"@gradio/state": minor
+"@gradio/tabitem": minor
+"@gradio/tabs": minor
+"@gradio/textbox": minor
+"@gradio/uploadbutton": minor
+"@gradio/video": minor
+"gradio": minor
+"newtext": minor
+---
+
+feat:rererefactor frontend files
diff --git a/js/accordion/static/StaticAccordion.svelte b/js/accordion/Index.svelte
similarity index 93%
rename from js/accordion/static/StaticAccordion.svelte
rename to js/accordion/Index.svelte
index dd69e9165c70..9edb227cbcc2 100644
--- a/js/accordion/static/StaticAccordion.svelte
+++ b/js/accordion/Index.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Accordion from "./Accordion.svelte";
+	import Accordion from "./shared/Accordion.svelte";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
diff --git a/js/accordion/package.json b/js/accordion/package.json
index ecb13570cd41..f2cded8b7437 100644
--- a/js/accordion/package.json
+++ b/js/accordion/package.json
@@ -3,7 +3,6 @@
 	"version": "0.1.3",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./static/index.ts",
 	"author": "",
 	"license": "ISC",
 	"private": true,
@@ -14,10 +13,7 @@
 		"@gradio/statustracker": "workspace:^"
 	},
 	"exports": {
-		".": "./static/index.ts",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/accordion/static/Accordion.svelte b/js/accordion/shared/Accordion.svelte
similarity index 100%
rename from js/accordion/static/Accordion.svelte
rename to js/accordion/shared/Accordion.svelte
diff --git a/js/accordion/static/index.ts b/js/accordion/static/index.ts
deleted file mode 100644
index 231a625ab2cd..000000000000
--- a/js/accordion/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticAccordion.svelte";
diff --git a/js/annotatedimage/static/AnnotatedImage.svelte b/js/annotatedimage/Index.svelte
similarity index 99%
rename from js/annotatedimage/static/AnnotatedImage.svelte
rename to js/annotatedimage/Index.svelte
index 44f5cde62dae..0bd36771e665 100644
--- a/js/annotatedimage/static/AnnotatedImage.svelte
+++ b/js/annotatedimage/Index.svelte
@@ -67,7 +67,7 @@
 	function handle_click(i: number, value: string): void {
 		gradio.dispatch("select", {
 			value: label,
-			index: i,
+			index: i
 		});
 	}
 </script>
diff --git a/js/annotatedimage/package.json b/js/annotatedimage/package.json
index 4b80558b630d..b1078642ae72 100644
--- a/js/annotatedimage/package.json
+++ b/js/annotatedimage/package.json
@@ -3,17 +3,13 @@
 	"version": "0.2.3",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./static/index.ts",
 	"author": "",
 	"license": "ISC",
 	"private": true,
 	"main_changeset": true,
 	"exports": {
-		".": "./static/index.ts",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
 	},
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
@@ -22,4 +18,4 @@
 		"@gradio/upload": "workspace:^",
 		"@gradio/utils": "workspace:^"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/annotatedimage/static/index.ts b/js/annotatedimage/static/index.ts
deleted file mode 100644
index ce4ad9556fcf..000000000000
--- a/js/annotatedimage/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./AnnotatedImage.svelte";
diff --git a/js/app/build_plugins.ts b/js/app/build_plugins.ts
index 87c1db3313e1..afaf3482af8d 100644
--- a/js/app/build_plugins.ts
+++ b/js/app/build_plugins.ts
@@ -216,13 +216,13 @@ function get_export_path(
 	pkg_json: Record<string, any>
 ): string | undefined {
 	if (!pkg_json.exports) return undefined;
-	const _path = join(root, "..", `${pkg_json.exports[`./${path}`]}`);
+	const _path = join(root, "..", `${pkg_json.exports[`${path}`]}`);
 
 	return existsSync(_path) ? _path : undefined;
 }
 
 function generate_component_imports(): string {
-	const components = readdirSync(join(__dirname, ".."))
+	const exports = readdirSync(join(__dirname, ".."))
 		.map((dir) => {
 			if (!statSync(join(__dirname, "..", dir)).isDirectory()) return undefined;
 
@@ -232,48 +232,34 @@ function generate_component_imports(): string {
 					readFileSync(package_json_path, "utf8")
 				);
 
-				const interactive = get_export_path(
-					"interactive",
-					package_json_path,
-					package_json
-				);
+				const component = get_export_path(".", package_json_path, package_json);
 				const example = get_export_path(
-					"example",
-					package_json_path,
-					package_json
-				);
-				const static_dir = get_export_path(
-					"static",
+					"./example",
 					package_json_path,
 					package_json
 				);
 
-				if (!interactive && !example && !static_dir) return undefined;
+				if (!component && !example) return undefined;
 
 				return {
 					name: package_json.name,
-					interactive,
-					example,
-					static: static_dir
+					component,
+					example
 				};
 			}
 			return undefined;
 		})
 		.filter((x) => x !== undefined);
 
-	const imports = components.reduce((acc, component) => {
-		if (!component) return acc;
+	const imports = exports.reduce((acc, _export) => {
+		if (!_export) return acc;
 
-		const interactive = component.interactive
-			? `interactive: () => import("${component.name}/interactive"),\n`
+		const example = _export.example
+			? `example: () => import("${_export.name}/example"),\n`
 			: "";
-		const example = component.example
-			? `example: () => import("${component.name}/example"),\n`
-			: "";
-		return `${acc}"${component.name.replace("@gradio/", "")}": {
-			${interactive}
+		return `${acc}"${_export.name.replace("@gradio/", "")}": {
 			${example}
-			static: () => import("${component.name}/static")
+			component: () => import("${_export.name}")
 			},\n`;
 	}, "");
 
@@ -288,6 +274,8 @@ const component_map = {
 };
 `;
 
+	console.log(component_map);
+
 	return `${component_map}\n\n${readFileSync(loader_path, "utf8")}`;
 }
 
diff --git a/js/app/component_loader.js b/js/app/component_loader.js
index 949c9b1f4d73..327682a19994 100644
--- a/js/app/component_loader.js
+++ b/js/app/component_loader.js
@@ -1,6 +1,6 @@
 // @ts-nocheck
 
-export async function load_component(api_url, name, mode, id) {
+export async function load_component({ api_url, name, id, variant }) {
 	const comps = window.__GRADIO__CC__;
 
 	const _component_map = {
@@ -11,9 +11,8 @@ export async function load_component(api_url, name, mode, id) {
 	try {
 		//@ts-ignore
 		const c = await (
-			_component_map?.[id]?.[mode] || // for dev mode custom components
-			_component_map?.[name]?.[mode] ||
-			_component_map?.[name]?.["static"]
+			_component_map?.[id]?.[variant] || // for dev mode custom components
+			_component_map?.[name]?.[variant]
 		)();
 		return {
 			name,
@@ -21,16 +20,16 @@ export async function load_component(api_url, name, mode, id) {
 		};
 	} catch (e) {
 		try {
-			await load_css(`${api_url}/custom_component/${id}/${mode}/style.css`);
+			await load_css(`${api_url}/custom_component/${id}/${variant}/style.css`);
 			const c = await import(
-				/* @vite-ignore */ `${api_url}/custom_component/${id}/${mode}/index.js`
+				/* @vite-ignore */ `${api_url}/custom_component/${id}/${variant}/index.js`
 			);
 			return {
 				name,
 				component: c
 			};
 		} catch (e) {
-			if (mode === "example") {
+			if (variant === "example") {
 				return {
 					name,
 					component: await import("@gradio/fallback/example")
diff --git a/js/app/src/Blocks.svelte b/js/app/src/Blocks.svelte
index 472776f3ba69..6d13b7da82d0 100644
--- a/js/app/src/Blocks.svelte
+++ b/js/app/src/Blocks.svelte
@@ -237,13 +237,16 @@
 					}
 					let _c;
 
-					const id = components.find(
-						(c) => c.type === name
-					)?.component_class_id;
-					//@ts-ignore
-					_c = load_component(api_url, name, "example", id);
-
-					example_component_map.set(name, _c);
+					const matching_component = components.find((c) => c.type === name);
+					if (matching_component) {
+						_c = load_component({
+							api_url,
+							name,
+							id: matching_component.component_class_id,
+							variant: "example"
+						});
+						example_component_map.set(name, _c);
+					}
 				});
 
 				c.props.component_map = example_component_map;
@@ -251,12 +254,12 @@
 
 			// maybe load custom
 
-			const _c = load_component(
+			const _c = load_component({
 				api_url,
-				c.type,
-				c.props.mode,
-				c.component_class_id
-			);
+				name: c.type,
+				id: c.component_class_id,
+				variant: "component"
+			});
 			_component_set.add(_c);
 			__component_map.set(`${c.type}_${c.props.mode}`, _c);
 		});
@@ -276,37 +279,6 @@
 		});
 	}
 
-	async function update_interactive_mode(
-		instance: ComponentMeta,
-		mode: "dynamic" | "interactive" | "static"
-	): Promise<void> {
-		let new_mode: "interactive" | "static" =
-			mode === "dynamic" ? "interactive" : mode;
-
-		if (instance.props.mode === new_mode) return;
-
-		instance.props.mode = new_mode;
-		const _c = load_component(
-			api_url,
-			instance.type,
-			instance.props.mode,
-			instance.component_class_id
-		);
-		component_set.add(_c);
-		_component_map.set(
-			`${instance.type}_${instance.props.mode}`,
-			_c as Promise<{
-				name: ComponentMeta["type"];
-				component: LoadedComponent;
-			}>
-		);
-
-		_c.then((c) => {
-			instance.component = c.component.default;
-			rootNode = rootNode;
-		});
-	}
-
 	function handle_update(data: any, fn_index: number): void {
 		const outputs = dependencies[fn_index].outputs;
 		data?.forEach((value: any, i: number) => {
@@ -321,12 +293,6 @@
 					if (update_key === "__type__") {
 						continue;
 					} else {
-						if (update_key === "mode") {
-							update_interactive_mode(
-								output,
-								update_value as "dynamic" | "static"
-							);
-						}
 						output.props[update_key] = update_value;
 					}
 				}
diff --git a/js/app/src/Login.svelte b/js/app/src/Login.svelte
index e443bbf33e78..0094117c1eb8 100644
--- a/js/app/src/Login.svelte
+++ b/js/app/src/Login.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Form from "@gradio/form";
-	import Textbox from "@gradio/textbox/interactive";
-	import { BaseButton } from "@gradio/button/static";
+	import Textbox from "@gradio/textbox";
+	import { BaseButton } from "@gradio/button";
 	import Column from "@gradio/column";
 	import { _ } from "svelte-i18n";
 	export let root: string;
diff --git a/js/app/src/api_docs/CopyButton.svelte b/js/app/src/api_docs/CopyButton.svelte
index 2c8042655643..702c744f4b49 100644
--- a/js/app/src/api_docs/CopyButton.svelte
+++ b/js/app/src/api_docs/CopyButton.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BaseButton } from "@gradio/button/static";
+	import { BaseButton } from "@gradio/button";
 	export let code: string;
 	let copy_text = "copy";
 
diff --git a/js/app/src/api_docs/InputPayload.svelte b/js/app/src/api_docs/InputPayload.svelte
index a4254cca26af..0abd20c9ac69 100644
--- a/js/app/src/api_docs/InputPayload.svelte
+++ b/js/app/src/api_docs/InputPayload.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { ComponentMeta, Dependency } from "../components/types";
-	import { BaseButton } from "@gradio/button/static";
+	import type { ComponentMeta, Dependency } from "../types";
+	import { BaseButton } from "@gradio/button";
 	import { Block } from "@gradio/atoms";
 
 	export let dependency: Dependency;
diff --git a/js/app/src/api_docs/TryButton.svelte b/js/app/src/api_docs/TryButton.svelte
index 977dd73ac6c1..cdbc43a438b5 100644
--- a/js/app/src/api_docs/TryButton.svelte
+++ b/js/app/src/api_docs/TryButton.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BaseButton } from "@gradio/button/static";
+	import { BaseButton } from "@gradio/button";
 
 	export let dependency_index: number;
 	export let run: (id: number) => Promise<void>;
diff --git a/js/app/src/vite-env-override.d.ts b/js/app/src/vite-env-override.d.ts
index 4a525fa83272..c02b8f9bdaf0 100644
--- a/js/app/src/vite-env-override.d.ts
+++ b/js/app/src/vite-env-override.d.ts
@@ -7,12 +7,13 @@ declare module "*.whl" {
 
 // virtual module component type definition
 declare module "virtual:component-loader" {
-	export function load_component(
-		api_url: string,
-		name: string,
-		mode: "interactive" | "static" | "example",
-		id: string
-	): Promise<{
+	interface Args {
+		api_url: string;
+		name: string;
+		id: string;
+		variant: "component" | "example";
+	}
+	export function load_component(args: Args): Promise<{
 		name: ComponentMeta["type"];
 		component: LoadedComponent;
 	}>;
diff --git a/js/audio/example/Audio.svelte b/js/audio/Example.svelte
similarity index 100%
rename from js/audio/example/Audio.svelte
rename to js/audio/Example.svelte
diff --git a/js/audio/Index.svelte b/js/audio/Index.svelte
new file mode 100644
index 000000000000..827eb5b1ca57
--- /dev/null
+++ b/js/audio/Index.svelte
@@ -0,0 +1,153 @@
+<svelte:options accessors={true} />
+
+<script lang="ts">
+	import type { Gradio, ShareData } from "@gradio/utils";
+
+	import type { FileData } from "@gradio/upload";
+	import type { LoadingStatus } from "@gradio/statustracker";
+
+	import StaticAudio from "./shared/AudioPlayer.svelte";
+	import Audio from "./shared/InteractiveAudio.svelte";
+	import { StatusTracker } from "@gradio/statustracker";
+	import { Block, UploadText } from "@gradio/atoms";
+
+	import { normalise_file } from "@gradio/upload";
+
+	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 source: "microphone" | "upload";
+	export let label: string;
+	export let root: string;
+	export let show_label: 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 name: string;
+	export let pending: boolean;
+	export let streaming: boolean;
+	export let show_edit_button = true;
+	export let gradio: Gradio<{
+		change: typeof value;
+		stream: typeof value;
+		error: string;
+		edit: never;
+		play: never;
+		pause: never;
+		stop: never;
+		end: never;
+		start_recording: never;
+		stop_recording: never;
+		upload: never;
+		clear: never;
+		share: ShareData;
+	}>;
+
+	let old_value: null | FileData | string = null;
+
+	let _value: null | FileData;
+	$: _value = normalise_file(value, root, root_url);
+
+	$: {
+		if (JSON.stringify(value) !== JSON.stringify(old_value)) {
+			old_value = value;
+			gradio.dispatch("change");
+		}
+	}
+
+	let dragging: boolean;
+</script>
+
+{#if mode === "static"}
+	<Block
+		variant={"solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		{elem_id}
+		{elem_classes}
+		{visible}
+		{container}
+		{scale}
+		{min_width}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+		/>
+
+		<StaticAudio
+			i18n={gradio.i18n}
+			{autoplay}
+			{show_label}
+			{show_download_button}
+			{show_share_button}
+			value={_value}
+			name={_value?.name || "audio_file"}
+			{label}
+			on:share={(e) => gradio.dispatch("share", e.detail)}
+			on:error={(e) => gradio.dispatch("error", e.detail)}
+		/>
+	</Block>
+{:else}
+	<Block
+		variant={value === null && source === "upload" ? "dashed" : "solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		{elem_id}
+		{elem_classes}
+		{visible}
+		{container}
+		{scale}
+		{min_width}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+		/>
+		<Audio
+			{label}
+			{show_label}
+			value={_value}
+			on:change={({ detail }) => (value = detail)}
+			on:stream={({ detail }) => {
+				value = detail;
+				gradio.dispatch("stream", value);
+			}}
+			on:drag={({ detail }) => (dragging = detail)}
+			{name}
+			{root}
+			{source}
+			{pending}
+			{streaming}
+			{autoplay}
+			{show_edit_button}
+			on:edit={() => gradio.dispatch("edit")}
+			on:play={() => gradio.dispatch("play")}
+			on:pause={() => gradio.dispatch("pause")}
+			on:stop={() => gradio.dispatch("stop")}
+			on:end={() => gradio.dispatch("end")}
+			on:start_recording={() => gradio.dispatch("start_recording")}
+			on:stop_recording={() => gradio.dispatch("stop_recording")}
+			on:upload={() => gradio.dispatch("upload")}
+			on:clear={() => gradio.dispatch("clear")}
+			on:error={({ detail }) => {
+				loading_status = loading_status || {};
+				loading_status.status = "error";
+				gradio.dispatch("error", detail);
+			}}
+			i18n={gradio.i18n}
+		>
+			<UploadText i18n={gradio.i18n} type="audio" />
+		</Audio>
+	</Block>
+{/if}
diff --git a/js/audio/example/index.ts b/js/audio/example/index.ts
deleted file mode 100644
index f548ebcac3d4..000000000000
--- a/js/audio/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Audio.svelte";
diff --git a/js/audio/interactive/InteractiveAudio.svelte b/js/audio/interactive/InteractiveAudio.svelte
deleted file mode 100644
index 06d18b06a3e6..000000000000
--- a/js/audio/interactive/InteractiveAudio.svelte
+++ /dev/null
@@ -1,116 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import type { Gradio } from "@gradio/utils";
-
-	import { UploadText } from "@gradio/atoms";
-
-	import type { FileData } from "@gradio/upload";
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	import Audio from "./Audio.svelte";
-	import { StatusTracker } from "@gradio/statustracker";
-	import { Block } from "@gradio/atoms";
-
-	import { normalise_file } from "@gradio/upload";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	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_edit_button = true;
-	export let gradio: Gradio<{
-		change: typeof value;
-		stream: typeof value;
-		error: string;
-		edit: never;
-		play: never;
-		pause: never;
-		stop: never;
-		end: never;
-		start_recording: never;
-		stop_recording: never;
-		upload: never;
-		clear: never;
-	}>;
-
-	let old_value: null | FileData | string = null;
-
-	let _value: null | FileData;
-	$: _value = normalise_file(value, root, root_url);
-
-	$: {
-		if (JSON.stringify(value) !== JSON.stringify(old_value)) {
-			old_value = value;
-			gradio.dispatch("change");
-		}
-	}
-
-	let dragging: boolean;
-</script>
-
-<Block
-	variant={value === null && source === "upload" ? "dashed" : "solid"}
-	border_mode={dragging ? "focus" : "base"}
-	padding={false}
-	{elem_id}
-	{elem_classes}
-	{visible}
-	{container}
-	{scale}
-	{min_width}
->
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-	/>
-	<Audio
-		{label}
-		{show_label}
-		value={_value}
-		on:change={({ detail }) => (value = detail)}
-		on:stream={({ detail }) => {
-			value = detail;
-			gradio.dispatch("stream", value);
-		}}
-		on:drag={({ detail }) => (dragging = detail)}
-		{name}
-		{root}
-		{source}
-		{pending}
-		{streaming}
-		{autoplay}
-		{show_edit_button}
-		on:edit={() => gradio.dispatch("edit")}
-		on:play={() => gradio.dispatch("play")}
-		on:pause={() => gradio.dispatch("pause")}
-		on:stop={() => gradio.dispatch("stop")}
-		on:end={() => gradio.dispatch("end")}
-		on:start_recording={() => gradio.dispatch("start_recording")}
-		on:stop_recording={() => gradio.dispatch("stop_recording")}
-		on:upload={() => gradio.dispatch("upload")}
-		on:clear={() => gradio.dispatch("clear")}
-		on:error={({ detail }) => {
-			loading_status = loading_status || {};
-			loading_status.status = "error";
-			gradio.dispatch("error", detail);
-		}}
-		i18n={gradio.i18n}
-	>
-		<UploadText i18n={gradio.i18n} type="audio" />
-	</Audio>
-</Block>
diff --git a/js/audio/interactive/index.ts b/js/audio/interactive/index.ts
deleted file mode 100644
index 5eac34ce2024..000000000000
--- a/js/audio/interactive/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InteractiveAudio.svelte";
diff --git a/js/audio/package.json b/js/audio/package.json
index 01fc7760ed3b..695527a70b79 100644
--- a/js/audio/package.json
+++ b/js/audio/package.json
@@ -3,7 +3,6 @@
 	"version": "0.4.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": false,
@@ -21,9 +20,8 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./example": "./Example.svelte",
+		"./package.json": "./package.json"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/audio/static/AudioPlayer.svelte b/js/audio/shared/AudioPlayer.svelte
similarity index 98%
rename from js/audio/static/AudioPlayer.svelte
rename to js/audio/shared/AudioPlayer.svelte
index 1eecc8b58f8c..270403f6474a 100644
--- a/js/audio/static/AudioPlayer.svelte
+++ b/js/audio/shared/AudioPlayer.svelte
@@ -14,7 +14,7 @@
 	import { BlockLabel, ShareButton, IconButton } from "@gradio/atoms";
 	import { Music, Download } from "@gradio/icons";
 
-	import { loaded } from "../shared/utils";
+	import { loaded } from "./utils";
 	import type { I18nFormatter } from "js/app/src/gradio_helper";
 
 	export let value: null | { name: string; data: string } = null;
diff --git a/js/audio/interactive/Audio.svelte b/js/audio/shared/InteractiveAudio.svelte
similarity index 96%
rename from js/audio/interactive/Audio.svelte
rename to js/audio/shared/InteractiveAudio.svelte
index 3bc6e941f982..24582d570ded 100644
--- a/js/audio/interactive/Audio.svelte
+++ b/js/audio/shared/InteractiveAudio.svelte
@@ -1,6 +1,6 @@
 <script context="module" lang="ts">
 	import type { FileData } from "@gradio/upload";
-	import { BaseButton } from "@gradio/button/static";
+	import { BaseButton } from "@gradio/button";
 
 	export interface AudioData extends FileData {
 		crop_min?: number;
@@ -13,7 +13,7 @@
 	import { Upload, ModifyUpload } from "@gradio/upload";
 	import { BlockLabel } from "@gradio/atoms";
 	import { Music } from "@gradio/icons";
-	import Audio from "../shared/Audio.svelte";
+	import Audio from "./StaticAudio.svelte";
 	// @ts-ignore
 	import Range from "svelte-range-slider-pips";
 	import { _ } from "svelte-i18n";
@@ -56,7 +56,7 @@
 	function get_modules(): void {
 		module_promises = [
 			import("extendable-media-recorder"),
-			import("extendable-media-recorder-wav-encoder"),
+			import("extendable-media-recorder-wav-encoder")
 		];
 	}
 
@@ -96,9 +96,9 @@
 		let _audio_blob = new Blob(blobs, { type: "audio/wav" });
 		value = {
 			data: await blob_to_data_url(_audio_blob),
-			name: "audio.wav",
+			name: "audio.wav"
 		};
-		const detail = {...value, is_file: false}
+		const detail = { ...value, is_file: false };
 		dispatch(event, detail);
 	};
 
@@ -215,7 +215,7 @@
 	}
 
 	function handle_change({
-		detail: { values },
+		detail: { values }
 	}: {
 		detail: { values: [number, number] };
 	}): void {
@@ -225,14 +225,14 @@
 			data: value.data,
 			name,
 			crop_min: values[0],
-			crop_max: values[1],
+			crop_max: values[1]
 		});
 
 		dispatch("edit");
 	}
 
 	function handle_load({
-		detail,
+		detail
 	}: {
 		detail: {
 			data: string;
diff --git a/js/audio/shared/Audio.svelte b/js/audio/shared/StaticAudio.svelte
similarity index 94%
rename from js/audio/shared/Audio.svelte
rename to js/audio/shared/StaticAudio.svelte
index bd48d5be2e8a..d9615325c3b7 100644
--- a/js/audio/shared/Audio.svelte
+++ b/js/audio/shared/StaticAudio.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { HTMLAudioAttributes } from "svelte/elements";
 	import { createEventDispatcher } from "svelte";
-	import { loaded, type LoadedParams } from "../shared/utils";
+	import { loaded, type LoadedParams } from "./utils";
 	import { resolve_wasm_src } from "@gradio/wasm/svelte";
 
 	export let src: HTMLAudioAttributes["src"] = undefined;
@@ -32,11 +32,10 @@
 	<p style="color: red;">{error.message}</p>
 {/await}
 
-
 <style>
 	audio {
 		padding: var(--size-2);
 		width: var(--size-full);
 		height: var(--size-14);
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/js/audio/static/StaticAudio.svelte b/js/audio/static/StaticAudio.svelte
deleted file mode 100644
index dcd928695bf8..000000000000
--- a/js/audio/static/StaticAudio.svelte
+++ /dev/null
@@ -1,84 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import type { Gradio, ShareData } from "@gradio/utils";
-
-	import type { FileData } from "@gradio/upload";
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	import StaticAudio from "./AudioPlayer.svelte";
-	import { StatusTracker } from "@gradio/statustracker";
-	import { Block } from "@gradio/atoms";
-
-	import { normalise_file } from "@gradio/upload";
-
-	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 source: "microphone" | "upload";
-	export let label: string;
-	export let root: string;
-	export let show_label: 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 gradio: Gradio<{
-		change: typeof value;
-		share: ShareData;
-		error: string;
-	}>;
-
-	let old_value: null | FileData | string = null;
-
-	let _value: null | FileData;
-	$: _value = normalise_file(value, root, root_url);
-
-	$: {
-		if (JSON.stringify(value) !== JSON.stringify(old_value)) {
-			old_value = value;
-			gradio.dispatch("change");
-		}
-	}
-
-	let dragging: boolean;
-</script>
-
-<Block
-	variant={mode === "interactive" && value === null && source === "upload"
-		? "dashed"
-		: "solid"}
-	border_mode={dragging ? "focus" : "base"}
-	padding={false}
-	{elem_id}
-	{elem_classes}
-	{visible}
-	{container}
-	{scale}
-	{min_width}
->
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-	/>
-
-	<StaticAudio
-		i18n={gradio.i18n}
-		{autoplay}
-		{show_label}
-		{show_download_button}
-		{show_share_button}
-		value={_value}
-		name={_value?.name || "audio_file"}
-		{label}
-		on:share={(e) => gradio.dispatch("share", e.detail)}
-		on:error={(e) => gradio.dispatch("error", e.detail)}
-	/>
-</Block>
diff --git a/js/audio/static/index.ts b/js/audio/static/index.ts
deleted file mode 100644
index f64ada8406de..000000000000
--- a/js/audio/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticAudio.svelte";
diff --git a/js/box/static/index.svelte b/js/box/Index.svelte
similarity index 100%
rename from js/box/static/index.svelte
rename to js/box/Index.svelte
diff --git a/js/box/package.json b/js/box/package.json
index 1c2cb3640688..346f9ec7c718 100644
--- a/js/box/package.json
+++ b/js/box/package.json
@@ -3,19 +3,15 @@
 	"version": "0.0.5-beta.4",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./static/index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./static/index.svelte",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
 	},
 	"dependencies": {
 		"@gradio/atoms": "workspace:^"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/box/static/index.ts b/js/box/static/index.ts
deleted file mode 100644
index e8f2e8f605d5..000000000000
--- a/js/box/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./index.svelte";
diff --git a/js/button/Button.stories.svelte b/js/button/Button.stories.svelte
index eae855dfc61b..687d28c71f4c 100644
--- a/js/button/Button.stories.svelte
+++ b/js/button/Button.stories.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-	import Button from "./static/";
+	import Button from "./Index.svelte";
 </script>
 
 <Meta
diff --git a/js/button/static/StaticButton.svelte b/js/button/Index.svelte
similarity index 79%
rename from js/button/static/StaticButton.svelte
rename to js/button/Index.svelte
index a2af7f04987f..51ece54af3e9 100644
--- a/js/button/static/StaticButton.svelte
+++ b/js/button/Index.svelte
@@ -1,14 +1,18 @@
+<script context="module" lang="ts">
+	export { default as BaseButton } from "./shared/Button.svelte";
+</script>
+
 <script lang="ts">
 	import type { Gradio, ShareData } from "@gradio/utils";
 
-	import Button from "./Button.svelte";
+	import Button from "./shared/Button.svelte";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
 	export let value: string;
 	export let variant: "primary" | "secondary" | "stop" = "secondary";
-	export let mode: "static" | "dynamic" = "dynamic";
+	export let mode: "static" | "interactive" = "interactive";
 	export let size: "sm" | "lg" = "lg";
 	export let scale: number | null = null;
 	export let icon: string | null = null;
diff --git a/js/button/package.json b/js/button/package.json
index c0d565aaa8d3..07c17ef6a086 100644
--- a/js/button/package.json
+++ b/js/button/package.json
@@ -3,7 +3,6 @@
 	"version": "0.2.0-beta.4",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./static/index.ts",
 	"author": "",
 	"license": "ISC",
 	"private": false,
@@ -13,10 +12,7 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		".": "./static/index.ts",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
 	}
 }
diff --git a/js/button/static/Button.svelte b/js/button/shared/Button.svelte
similarity index 100%
rename from js/button/static/Button.svelte
rename to js/button/shared/Button.svelte
diff --git a/js/button/static/index.ts b/js/button/static/index.ts
deleted file mode 100644
index 52106e89a1e8..000000000000
--- a/js/button/static/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./StaticButton.svelte";
-export { default as BaseButton } from "./Button.svelte";
diff --git a/js/chatbot/Chatbot.stories.svelte b/js/chatbot/Chatbot.stories.svelte
index 759c6a2873d9..daba5aa292fb 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 "./static";
+	import Chatbot from "./Index.svelte";
 </script>
 
 <Meta
diff --git a/js/chatbot/static/StaticChatbot.svelte b/js/chatbot/Index.svelte
similarity index 98%
rename from js/chatbot/static/StaticChatbot.svelte
rename to js/chatbot/Index.svelte
index 33e36319bc0a..5059f0c1bf75 100644
--- a/js/chatbot/static/StaticChatbot.svelte
+++ b/js/chatbot/Index.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Gradio, SelectData, LikeData } from "@gradio/utils";
 
-	import ChatBot from "./ChatBot.svelte";
+	import ChatBot from "./shared/ChatBot.svelte";
 	import { Block, BlockLabel } from "@gradio/atoms";
 	import type { LoadingStatus } from "@gradio/statustracker";
 	import { Chat } from "@gradio/icons";
diff --git a/js/chatbot/package.json b/js/chatbot/package.json
index ca708cddd708..f141077513f1 100644
--- a/js/chatbot/package.json
+++ b/js/chatbot/package.json
@@ -3,7 +3,6 @@
 	"version": "0.4.0-beta.6",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": false,
@@ -22,9 +21,7 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/chatbot/static/ChatBot.svelte b/js/chatbot/shared/ChatBot.svelte
similarity index 99%
rename from js/chatbot/static/ChatBot.svelte
rename to js/chatbot/shared/ChatBot.svelte
index f728fa6c2664..b9d6395bd244 100644
--- a/js/chatbot/static/ChatBot.svelte
+++ b/js/chatbot/shared/ChatBot.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { format_chat_for_sharing } from "../utils";
+	import { format_chat_for_sharing } from "./utils";
 	import { copy } from "@gradio/utils";
 
 	import { dequal } from "dequal/lite";
@@ -7,7 +7,7 @@
 	import { ShareButton } from "@gradio/atoms";
 	import type { SelectData, LikeData } from "@gradio/utils";
 	import type { FileData } from "@gradio/upload";
-	import { MarkdownCode as Markdown } from "@gradio/markdown/static";
+	import { MarkdownCode as Markdown } from "@gradio/markdown";
 	import { get_fetchable_url_or_file } from "@gradio/upload";
 	import Copy from "./Copy.svelte";
 	import type { I18nFormatter } from "js/app/src/gradio_helper";
diff --git a/js/chatbot/static/Copy.svelte b/js/chatbot/shared/Copy.svelte
similarity index 100%
rename from js/chatbot/static/Copy.svelte
rename to js/chatbot/shared/Copy.svelte
diff --git a/js/chatbot/static/LikeDislike.svelte b/js/chatbot/shared/LikeDislike.svelte
similarity index 100%
rename from js/chatbot/static/LikeDislike.svelte
rename to js/chatbot/shared/LikeDislike.svelte
diff --git a/js/chatbot/static/Pending.svelte b/js/chatbot/shared/Pending.svelte
similarity index 100%
rename from js/chatbot/static/Pending.svelte
rename to js/chatbot/shared/Pending.svelte
diff --git a/js/chatbot/static/autorender.d.ts b/js/chatbot/shared/autorender.d.ts
similarity index 100%
rename from js/chatbot/static/autorender.d.ts
rename to js/chatbot/shared/autorender.d.ts
diff --git a/js/chatbot/utils.ts b/js/chatbot/shared/utils.ts
similarity index 100%
rename from js/chatbot/utils.ts
rename to js/chatbot/shared/utils.ts
diff --git a/js/chatbot/static/index.ts b/js/chatbot/static/index.ts
deleted file mode 100644
index c215fb4adb04..000000000000
--- a/js/chatbot/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticChatbot.svelte";
diff --git a/js/checkbox/example/Checkbox.svelte b/js/checkbox/Example.svelte
similarity index 100%
rename from js/checkbox/example/Checkbox.svelte
rename to js/checkbox/Example.svelte
diff --git a/js/checkbox/static/StaticCheckbox.svelte b/js/checkbox/Index.svelte
similarity index 90%
rename from js/checkbox/static/StaticCheckbox.svelte
rename to js/checkbox/Index.svelte
index 1bb82541a90e..bd54a9ea5694 100644
--- a/js/checkbox/static/StaticCheckbox.svelte
+++ b/js/checkbox/Index.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Gradio } from "@gradio/utils";
-	import Checkbox from "../shared";
+	import Checkbox from "./shared/Checkbox.svelte";
 	import { Block, Info } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
@@ -22,6 +22,7 @@
 		select: SelectData;
 		input: never;
 	}>;
+	export let mode: "static" | "interactive";
 </script>
 
 <Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
@@ -34,6 +35,7 @@
 	{#if info}
 		<Info>{info}</Info>
 	{/if}
+
 	<Checkbox
 		{label}
 		bind:value
@@ -41,6 +43,6 @@
 		on:change={() => gradio.dispatch("change")}
 		on:input={() => gradio.dispatch("input")}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
-		disabled
+		disabled={mode === "static"}
 	/>
 </Block>
diff --git a/js/checkbox/example/index.ts b/js/checkbox/example/index.ts
deleted file mode 100644
index a0ceb0e81b62..000000000000
--- a/js/checkbox/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Checkbox.svelte";
diff --git a/js/checkbox/interactive/InteractiveCheckbox.svelte b/js/checkbox/interactive/InteractiveCheckbox.svelte
deleted file mode 100644
index 27cde7843e4b..000000000000
--- a/js/checkbox/interactive/InteractiveCheckbox.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-	import type { Gradio } from "@gradio/utils";
-	import Checkbox from "../shared";
-	import { Block, Info } from "@gradio/atoms";
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import type { SelectData } from "@gradio/utils";
-
-	export let gradio: Gradio<{
-		change: never;
-		select: SelectData;
-		input: never;
-	}>;
-	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 = gradio.i18n("checkbox.checkbox");
-	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 loading_status: LoadingStatus;
-</script>
-
-<Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-	/>
-
-	{#if info}
-		<Info>{info}</Info>
-	{/if}
-	<Checkbox
-		{label}
-		bind:value
-		bind:value_is_output
-		on:change={() => gradio.dispatch("change")}
-		on:input={() => gradio.dispatch("input")}
-		on:select={(e) => gradio.dispatch("select", e.detail)}
-	/>
-</Block>
diff --git a/js/checkbox/interactive/index.ts b/js/checkbox/interactive/index.ts
deleted file mode 100644
index f9eab4ceab25..000000000000
--- a/js/checkbox/interactive/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InteractiveCheckbox.svelte";
diff --git a/js/checkbox/package.json b/js/checkbox/package.json
index f63120c3d7a0..9d8065c56a14 100644
--- a/js/checkbox/package.json
+++ b/js/checkbox/package.json
@@ -3,20 +3,18 @@
 	"version": "0.2.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./example": "./Example.svelte",
+		"./package.json": "./package.json"
 	},
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
 		"@gradio/statustracker": "workspace:^",
 		"@gradio/utils": "workspace:^"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/checkbox/shared/index.ts b/js/checkbox/shared/index.ts
deleted file mode 100644
index a0ceb0e81b62..000000000000
--- a/js/checkbox/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Checkbox.svelte";
diff --git a/js/checkbox/static/index.ts b/js/checkbox/static/index.ts
deleted file mode 100644
index 9b685648fee1..000000000000
--- a/js/checkbox/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticCheckbox.svelte";
diff --git a/js/checkboxgroup/example/Checkboxgroup.svelte b/js/checkboxgroup/Example.svelte
similarity index 100%
rename from js/checkboxgroup/example/Checkboxgroup.svelte
rename to js/checkboxgroup/Example.svelte
diff --git a/js/checkboxgroup/interactive/InteractiveCheckboxgroup.svelte b/js/checkboxgroup/Index.svelte
similarity index 90%
rename from js/checkboxgroup/interactive/InteractiveCheckboxgroup.svelte
rename to js/checkboxgroup/Index.svelte
index 0498fe49f720..1d80392f937e 100644
--- a/js/checkboxgroup/interactive/InteractiveCheckboxgroup.svelte
+++ b/js/checkboxgroup/Index.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Gradio, SelectData } from "@gradio/utils";
-	import CheckboxGroup from "../shared";
+	import CheckboxGroup from "./shared/Checkboxgroup.svelte";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
@@ -24,6 +24,7 @@
 	export let show_label: boolean;
 
 	export let loading_status: LoadingStatus;
+	export let mode: "static" | "interactive";
 </script>
 
 <Block
@@ -51,5 +52,6 @@
 		on:select={(e) => gradio.dispatch("select", e.detail)}
 		on:change={() => gradio.dispatch("change")}
 		on:input={() => gradio.dispatch("input")}
+		disabled={mode === "static"}
 	/>
 </Block>
diff --git a/js/checkboxgroup/example/index.ts b/js/checkboxgroup/example/index.ts
deleted file mode 100644
index 4cb2d3226a51..000000000000
--- a/js/checkboxgroup/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Checkboxgroup.svelte";
diff --git a/js/checkboxgroup/interactive/index.ts b/js/checkboxgroup/interactive/index.ts
deleted file mode 100644
index dd159c423596..000000000000
--- a/js/checkboxgroup/interactive/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InteractiveCheckboxgroup.svelte";
diff --git a/js/checkboxgroup/package.json b/js/checkboxgroup/package.json
index b4cbfd43ea34..b1ed6e806016 100644
--- a/js/checkboxgroup/package.json
+++ b/js/checkboxgroup/package.json
@@ -3,20 +3,18 @@
 	"version": "0.3.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./example": "./Example.svelte",
+		"./package.json": "./package.json"
 	},
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
 		"@gradio/statustracker": "workspace:^",
 		"@gradio/utils": "workspace:^"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/checkboxgroup/shared/index.ts b/js/checkboxgroup/shared/index.ts
deleted file mode 100644
index 4cb2d3226a51..000000000000
--- a/js/checkboxgroup/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Checkboxgroup.svelte";
diff --git a/js/checkboxgroup/static/StaticCheckboxgroup.svelte b/js/checkboxgroup/static/StaticCheckboxgroup.svelte
deleted file mode 100644
index 1b4f16e0c93e..000000000000
--- a/js/checkboxgroup/static/StaticCheckboxgroup.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts">
-	import type { Gradio, SelectData } from "@gradio/utils";
-	import CheckboxGroup from "../shared";
-	import { Block } from "@gradio/atoms";
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	export let gradio: Gradio<{
-		change: never;
-		select: SelectData;
-		input: never;
-	}>;
-	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 label = gradio.i18n("checkbox.checkbox_group");
-	export let info: string | undefined = undefined;
-	export let show_label: boolean;
-
-	export let loading_status: LoadingStatus;
-</script>
-
-<Block
-	{visible}
-	{elem_id}
-	{elem_classes}
-	type="fieldset"
-	{container}
-	{scale}
-	{min_width}
->
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-	/>
-
-	<CheckboxGroup
-		bind:value
-		bind:value_is_output
-		{choices}
-		{label}
-		{info}
-		{show_label}
-		on:select={(e) => gradio.dispatch("select", e.detail)}
-		on:change={() => gradio.dispatch("change")}
-		on:input={() => gradio.dispatch("input")}
-		disabled
-	/>
-</Block>
diff --git a/js/checkboxgroup/static/index.ts b/js/checkboxgroup/static/index.ts
deleted file mode 100644
index 88b1c020f890..000000000000
--- a/js/checkboxgroup/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticCheckboxgroup.svelte";
diff --git a/js/code/example/Code.svelte b/js/code/Example.svelte
similarity index 100%
rename from js/code/example/Code.svelte
rename to js/code/Example.svelte
diff --git a/js/code/static/StaticCode.svelte b/js/code/Index.svelte
similarity index 86%
rename from js/code/static/StaticCode.svelte
rename to js/code/Index.svelte
index 4e95843f46ed..11d91d49d82a 100644
--- a/js/code/static/StaticCode.svelte
+++ b/js/code/Index.svelte
@@ -4,11 +4,16 @@
 
 	import type { LoadingStatus } from "@gradio/statustracker";
 
-	import Code, { Widget } from "../shared";
+	import Code from "./shared/Code.svelte";
+	import Widget from "./shared/Widgets.svelte";
 	import { StatusTracker } from "@gradio/statustracker";
 	import { Block, BlockLabel, Empty } from "@gradio/atoms";
 	import { Code as CodeIcon } from "@gradio/icons";
 
+	export let gradio: Gradio<{
+		change: typeof value;
+		input: never;
+	}>;
 	export let value = "";
 	export let value_is_output = false;
 	export let language = "";
@@ -21,10 +26,8 @@
 	export let show_label = true;
 	export let loading_status: LoadingStatus;
 	export let scale: number | null = null;
-	export let gradio: Gradio<{
-		change: typeof value;
-		input: never;
-	}>;
+
+	export let mode: "static" | "interactive";
 
 	let dark_mode = target.classList.contains("dark");
 
@@ -63,6 +66,12 @@
 	{:else}
 		<Widget {language} {value} />
 
-		<Code bind:value {language} {lines} {dark_mode} readonly />
+		<Code
+			bind:value
+			{language}
+			{lines}
+			{dark_mode}
+			readonly={mode === "static"}
+		/>
 	{/if}
 </Block>
diff --git a/js/code/example/index.ts b/js/code/example/index.ts
deleted file mode 100644
index cba7346d75aa..000000000000
--- a/js/code/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Code.svelte";
diff --git a/js/code/interactive/InteractiveCode.svelte b/js/code/interactive/InteractiveCode.svelte
deleted file mode 100644
index c0a0b2ac648b..000000000000
--- a/js/code/interactive/InteractiveCode.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts">
-	import type { Gradio } from "@gradio/utils";
-	import { afterUpdate } from "svelte";
-
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	import Code from "../shared";
-	import { StatusTracker } from "@gradio/statustracker";
-	import { Block, BlockLabel } from "@gradio/atoms";
-	import { Code as CodeIcon } from "@gradio/icons";
-
-	export let gradio: Gradio<{
-		change: typeof value;
-		input: never;
-	}>;
-	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 label = gradio.i18n("code.code");
-	export let show_label = true;
-	export let loading_status: LoadingStatus;
-
-	let dark_mode = target.classList.contains("dark");
-
-	function handle_change(): void {
-		gradio.dispatch("change", value);
-		if (!value_is_output) {
-			gradio.dispatch("input");
-		}
-	}
-	afterUpdate(() => {
-		value_is_output = false;
-	});
-	$: value, handle_change();
-</script>
-
-<Block variant={"solid"} padding={false} {elem_id} {elem_classes} {visible}>
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-	/>
-
-	<BlockLabel Icon={CodeIcon} {show_label} {label} float={false} />
-
-	<Code bind:value {language} {lines} {dark_mode} />
-</Block>
diff --git a/js/code/interactive/index.ts b/js/code/interactive/index.ts
deleted file mode 100644
index f31562cc15df..000000000000
--- a/js/code/interactive/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InteractiveCode.svelte";
diff --git a/js/code/package.json b/js/code/package.json
index 968fed6e7b5f..c45b845e7f13 100644
--- a/js/code/package.json
+++ b/js/code/package.json
@@ -3,7 +3,6 @@
 	"version": "0.2.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": false,
@@ -36,9 +35,8 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./example": "./Example.svelte",
+		"./package.json": "./package.json"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/code/shared/index.ts b/js/code/shared/index.ts
deleted file mode 100644
index 1abbb89c9e98..000000000000
--- a/js/code/shared/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./Code.svelte";
-export { default as Widget } from "./Widgets.svelte";
diff --git a/js/code/static/index.ts b/js/code/static/index.ts
deleted file mode 100644
index caa21a796c3a..000000000000
--- a/js/code/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticCode.svelte";
diff --git a/js/colorpicker/ColorPicker.stories.svelte b/js/colorpicker/ColorPicker.stories.svelte
index 7609551b37c4..0820e392fec5 100644
--- a/js/colorpicker/ColorPicker.stories.svelte
+++ b/js/colorpicker/ColorPicker.stories.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-	import ColorPicker from "./static/StaticColorpicker.svelte";
+	import ColorPicker from "./Index.svelte";
 </script>
 
 <Meta title="Components/Color Picker" component={ColorPicker} argTypes={{}} />
diff --git a/js/colorpicker/example/Colorpicker.svelte b/js/colorpicker/Example.svelte
similarity index 100%
rename from js/colorpicker/example/Colorpicker.svelte
rename to js/colorpicker/Example.svelte
diff --git a/js/colorpicker/static/StaticColorpicker.svelte b/js/colorpicker/Index.svelte
similarity index 91%
rename from js/colorpicker/static/StaticColorpicker.svelte
rename to js/colorpicker/Index.svelte
index 82fca0b95a0e..52b3350e7553 100644
--- a/js/colorpicker/static/StaticColorpicker.svelte
+++ b/js/colorpicker/Index.svelte
@@ -2,7 +2,7 @@
 
 <script lang="ts">
 	import type { Gradio } from "@gradio/utils";
-	import Colorpicker from "../shared";
+	import Colorpicker from "./shared/Colorpicker.svelte";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
@@ -20,7 +20,6 @@
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
-	export let interactive = true;
 	export let gradio: Gradio<{
 		change: never;
 		input: never;
@@ -28,6 +27,7 @@
 		blur: never;
 		focus: never;
 	}>;
+	export let mode: "static" | "interactive";
 </script>
 
 <Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
@@ -43,7 +43,7 @@
 		{label}
 		{info}
 		{show_label}
-		disabled={!interactive}
+		disabled={mode === "static"}
 		on:change={() => gradio.dispatch("change")}
 		on:input={() => gradio.dispatch("input")}
 		on:submit={() => gradio.dispatch("submit")}
diff --git a/js/colorpicker/example/index.ts b/js/colorpicker/example/index.ts
deleted file mode 100644
index 2bc500f5533b..000000000000
--- a/js/colorpicker/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Colorpicker.svelte";
diff --git a/js/colorpicker/interactive/InteractiveColorpicker.svelte b/js/colorpicker/interactive/InteractiveColorpicker.svelte
deleted file mode 100644
index a1c4c92d93e9..000000000000
--- a/js/colorpicker/interactive/InteractiveColorpicker.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import type { Gradio } from "@gradio/utils";
-	import Colorpicker from "../shared";
-	import { Block } from "@gradio/atoms";
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	export let gradio: Gradio<{
-		change: never;
-		input: never;
-		submit: never;
-		blur: never;
-		focus: never;
-	}>;
-	export let label = gradio.i18n("color_picker.color_picker");
-	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 interactive = true;
-</script>
-
-<Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-	/>
-
-	<Colorpicker
-		bind:value
-		bind:value_is_output
-		{label}
-		{info}
-		{show_label}
-		disabled={!interactive}
-		on:change={() => gradio.dispatch("change")}
-		on:input={() => gradio.dispatch("input")}
-		on:submit={() => gradio.dispatch("submit")}
-		on:blur={() => gradio.dispatch("blur")}
-		on:focus={() => gradio.dispatch("focus")}
-	/>
-</Block>
diff --git a/js/colorpicker/interactive/index.ts b/js/colorpicker/interactive/index.ts
deleted file mode 100644
index b6639eb8b20b..000000000000
--- a/js/colorpicker/interactive/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InteractiveColorpicker.svelte";
diff --git a/js/colorpicker/package.json b/js/colorpicker/package.json
index a04b30aa21ff..4e96e0df6485 100644
--- a/js/colorpicker/package.json
+++ b/js/colorpicker/package.json
@@ -3,20 +3,18 @@
 	"version": "0.2.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./example": "./Example.svelte",
+		"./package.json": "./package.json"
 	},
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
 		"@gradio/statustracker": "workspace:^",
 		"@gradio/utils": "workspace:^"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/colorpicker/shared/index.ts b/js/colorpicker/shared/index.ts
deleted file mode 100644
index 2bc500f5533b..000000000000
--- a/js/colorpicker/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Colorpicker.svelte";
diff --git a/js/colorpicker/static/index.ts b/js/colorpicker/static/index.ts
deleted file mode 100644
index 29fbc766965f..000000000000
--- a/js/colorpicker/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticColorpicker.svelte";
diff --git a/js/column/static/StaticColumn.svelte b/js/column/Index.svelte
similarity index 100%
rename from js/column/static/StaticColumn.svelte
rename to js/column/Index.svelte
diff --git a/js/column/package.json b/js/column/package.json
index 66ad920092a3..ea91cfe82dcf 100644
--- a/js/column/package.json
+++ b/js/column/package.json
@@ -3,16 +3,12 @@
 	"version": "0.1.0-beta.1",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./static/index.ts",
 	"author": "",
 	"license": "ISC",
 	"main_changeset": true,
 	"private": false,
 	"exports": {
-		".": "./static/index.ts",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/column/static/index.ts b/js/column/static/index.ts
deleted file mode 100644
index 6d59378bc869..000000000000
--- a/js/column/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticColumn.svelte";
diff --git a/js/dataframe/example/Dataframe.svelte b/js/dataframe/Example.svelte
similarity index 100%
rename from js/dataframe/example/Dataframe.svelte
rename to js/dataframe/Example.svelte
diff --git a/js/dataframe/static/StaticDataframe.svelte b/js/dataframe/Index.svelte
similarity index 92%
rename from js/dataframe/static/StaticDataframe.svelte
rename to js/dataframe/Index.svelte
index 7d86e487c41a..80b931c36cf3 100644
--- a/js/dataframe/static/StaticDataframe.svelte
+++ b/js/dataframe/Index.svelte
@@ -2,10 +2,10 @@
 	import { afterUpdate } from "svelte";
 	import type { Gradio, SelectData } from "@gradio/utils";
 	import { Block } from "@gradio/atoms";
-	import Table from "../shared";
+	import Table from "./shared/Table.svelte";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
-	import type { Headers, Data, Metadata, Datatype } from "../shared/utils";
+	import type { Headers, Data, Metadata, Datatype } from "./shared/utils";
 	export let headers: Headers = [];
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
@@ -41,6 +41,7 @@
 	export let height: number | undefined = undefined;
 
 	export let loading_status: LoadingStatus;
+	export let mode: "static" | "interactive";
 
 	function handle_change(): void {
 		gradio.dispatch("change");
@@ -97,7 +98,7 @@
 		{wrap}
 		{datatype}
 		{latex_delimiters}
-		editable={false}
+		editable={mode === "interactive"}
 		{height}
 		i18n={gradio.i18n}
 		{line_breaks}
diff --git a/js/dataframe/example/index.ts b/js/dataframe/example/index.ts
deleted file mode 100644
index 11dd91493eda..000000000000
--- a/js/dataframe/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Dataframe.svelte";
diff --git a/js/dataframe/interactive/InteractiveDataframe.svelte b/js/dataframe/interactive/InteractiveDataframe.svelte
deleted file mode 100644
index 61f5fe119a1d..000000000000
--- a/js/dataframe/interactive/InteractiveDataframe.svelte
+++ /dev/null
@@ -1,114 +0,0 @@
-<script lang="ts">
-	import type { Gradio, SelectData } from "@gradio/utils";
-	import { Block } from "@gradio/atoms";
-	import Table from "../shared";
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import { afterUpdate } from "svelte";
-	import { _ } from "svelte-i18n";
-	import type { Headers, Data, Metadata, Datatype } from "../shared/utils";
-
-	export let headers: Headers = [];
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: { data: Data; headers: Headers; metadata: Metadata } = {
-		data: [["", "", ""]],
-		headers: ["1", "2", "3"],
-		metadata: null
-	};
-	export let latex_delimiters: {
-		left: string;
-		right: string;
-		display: boolean;
-	}[];
-	export let height = 500;
-
-	let old_value: string = JSON.stringify(value);
-	export let value_is_output = false;
-	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 root: string;
-
-	export let line_breaks = true;
-	export let column_widths: string[] = [];
-	export let gradio: Gradio<{
-		change: never;
-		select: SelectData;
-		input: never;
-	}>;
-
-	export let loading_status: LoadingStatus;
-
-	function handle_change(): void {
-		gradio.dispatch("change");
-		if (!value_is_output) {
-			gradio.dispatch("input");
-		}
-	}
-	afterUpdate(() => {
-		value_is_output = false;
-	});
-	$: {
-		if (JSON.stringify(value) !== old_value) {
-			old_value = JSON.stringify(value);
-			handle_change();
-		}
-	}
-
-	if (
-		(Array.isArray(value) && value?.[0]?.length === 0) ||
-		value.data?.[0]?.length === 0
-	) {
-		value = {
-			data: [Array(col_count?.[0] || 3).fill("")],
-			headers: Array(col_count?.[0] || 3)
-				.fill("")
-				.map((_, i) => `${i + 1}`),
-
-			metadata: null
-		};
-	}
-</script>
-
-<Block
-	{visible}
-	padding={false}
-	{elem_id}
-	{elem_classes}
-	container={false}
-	{scale}
-	{min_width}
-	allow_overflow={false}
->
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		{...loading_status}
-		i18n={gradio.i18n}
-	/>
-	<Table
-		{label}
-		{row_count}
-		{col_count}
-		{root}
-		{value}
-		{headers}
-		on:change={({ detail }) => {
-			value = detail;
-		}}
-		on:select={(e) => gradio.dispatch("select", e.detail)}
-		editable
-		{wrap}
-		{datatype}
-		{latex_delimiters}
-		{height}
-		i18n={gradio.i18n}
-		{line_breaks}
-		{column_widths}
-	/>
-</Block>
diff --git a/js/dataframe/interactive/index.ts b/js/dataframe/interactive/index.ts
deleted file mode 100644
index aff9a910eb33..000000000000
--- a/js/dataframe/interactive/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InteractiveDataframe.svelte";
diff --git a/js/dataframe/package.json b/js/dataframe/package.json
index cee371103839..9e7bbba3a0af 100644
--- a/js/dataframe/package.json
+++ b/js/dataframe/package.json
@@ -3,7 +3,6 @@
 	"version": "0.3.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": false,
@@ -25,9 +24,8 @@
 		"marked": "^7.0.0"
 	},
 	"exports": {
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./example": "./Example.svelte",
+		"./package.json": "./package.json"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/dataframe/shared/Table.svelte b/js/dataframe/shared/Table.svelte
index 1cdf141e3c49..d282cf05d330 100644
--- a/js/dataframe/shared/Table.svelte
+++ b/js/dataframe/shared/Table.svelte
@@ -4,7 +4,7 @@
 	import { dequal } from "dequal/lite";
 	import { copy } from "@gradio/utils";
 	import { Upload } from "@gradio/upload";
-	import { BaseButton } from "@gradio/button/static";
+	import { BaseButton } from "@gradio/button";
 	import EditableCell from "./EditableCell.svelte";
 	import type { SelectData } from "@gradio/utils";
 	import type { I18nFormatter } from "js/app/src/gradio_helper";
@@ -15,7 +15,7 @@
 		Data,
 		Metadata,
 		Datatype
-	} from "../shared/utils";
+	} from "./utils";
 
 	export let datatype: Datatype | Datatype[];
 	export let label: string | null = null;
diff --git a/js/dataframe/shared/index.ts b/js/dataframe/shared/index.ts
deleted file mode 100644
index 8110fb879876..000000000000
--- a/js/dataframe/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Table.svelte";
diff --git a/js/dataframe/static/index.ts b/js/dataframe/static/index.ts
deleted file mode 100644
index 082323ba0403..000000000000
--- a/js/dataframe/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticDataframe.svelte";
diff --git a/js/dataset/static/index.svelte b/js/dataset/Index.svelte
similarity index 100%
rename from js/dataset/static/index.svelte
rename to js/dataset/Index.svelte
diff --git a/js/dataset/package.json b/js/dataset/package.json
index 06e385c43a88..3b2e5ecf3522 100644
--- a/js/dataset/package.json
+++ b/js/dataset/package.json
@@ -3,21 +3,17 @@
 	"version": "0.0.1",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./static/index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./static/index.svelte",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
 	},
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
 		"@gradio/utils": "workspace:^",
 		"@gradio/upload": "workspace:^"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/dataset/static/index.ts b/js/dataset/static/index.ts
deleted file mode 100644
index e8f2e8f605d5..000000000000
--- a/js/dataset/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./index.svelte";
diff --git a/js/dropdown/example/Dropdown.svelte b/js/dropdown/Example.svelte
similarity index 100%
rename from js/dropdown/example/Dropdown.svelte
rename to js/dropdown/Example.svelte
diff --git a/js/dropdown/static/StaticDropdown.svelte b/js/dropdown/Index.svelte
similarity index 90%
rename from js/dropdown/static/StaticDropdown.svelte
rename to js/dropdown/Index.svelte
index d4d29910f079..52eb3be2349f 100644
--- a/js/dropdown/static/StaticDropdown.svelte
+++ b/js/dropdown/Index.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Gradio, SelectData } from "@gradio/utils";
-	import { Dropdown, Multiselect } from "../shared";
+	import Multiselect from "./shared/Multiselect.svelte";
+	import Dropdown from "./shared/Dropdown.svelte";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
@@ -29,6 +30,7 @@
 		blur: never;
 		focus: never;
 	}>;
+	export let mode: "static" | "interactive";
 </script>
 
 <Block
@@ -64,7 +66,7 @@
 			on:select={(e) => gradio.dispatch("select", e.detail)}
 			on:blur={() => gradio.dispatch("blur")}
 			on:focus={() => gradio.dispatch("focus")}
-			disabled
+			disabled={mode === "static"}
 		/>
 	{:else}
 		<Dropdown
@@ -77,13 +79,12 @@
 			{filterable}
 			{allow_custom_value}
 			{container}
-			i18n={gradio.i18n}
 			on:change={() => gradio.dispatch("change")}
 			on:input={() => gradio.dispatch("input")}
 			on:select={(e) => gradio.dispatch("select", e.detail)}
 			on:blur={() => gradio.dispatch("blur")}
 			on:focus={() => gradio.dispatch("focus")}
-			disabled
+			disabled={mode === "static"}
 		/>
 	{/if}
 </Block>
diff --git a/js/dropdown/example/index.ts b/js/dropdown/example/index.ts
deleted file mode 100644
index a5bb35ce8d6e..000000000000
--- a/js/dropdown/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Dropdown.svelte";
diff --git a/js/dropdown/interactive/InteractiveDropdown.svelte b/js/dropdown/interactive/InteractiveDropdown.svelte
deleted file mode 100644
index b99c1b088108..000000000000
--- a/js/dropdown/interactive/InteractiveDropdown.svelte
+++ /dev/null
@@ -1,87 +0,0 @@
-<script lang="ts">
-	import type { Gradio, SelectData, I18nFormatter } from "@gradio/utils";
-	import { Dropdown, Multiselect } from "../shared";
-	import { Block } from "@gradio/atoms";
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	export let gradio: Gradio<{
-		change: never;
-		input: never;
-		select: SelectData;
-		blur: never;
-		focus: never;
-	}>;
-	export let label = gradio.i18n("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 | null = null;
-	export let choices: [string, string | number][];
-	export let show_label: boolean;
-	export let filterable: 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 i18n: I18nFormatter;
-</script>
-
-<Block
-	{visible}
-	{elem_id}
-	{elem_classes}
-	padding={container}
-	allow_overflow={false}
-	{scale}
-	{min_width}
->
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-	/>
-
-	{#if multiselect}
-		<Multiselect
-			bind:value
-			bind:value_is_output
-			{choices}
-			{max_choices}
-			{label}
-			{info}
-			{show_label}
-			{allow_custom_value}
-			{container}
-			{filterable}
-			on:change={() => gradio.dispatch("change")}
-			on:input={() => gradio.dispatch("input")}
-			on:select={(e) => gradio.dispatch("select", e.detail)}
-			on:blur={() => gradio.dispatch("blur")}
-			on:focus={() => gradio.dispatch("focus")}
-		/>
-	{:else}
-		<Dropdown
-			bind:value
-			bind:value_is_output
-			{choices}
-			{label}
-			{info}
-			{show_label}
-			{allow_custom_value}
-			{container}
-			{filterable}
-			on:change={() => gradio.dispatch("change")}
-			on:input={() => gradio.dispatch("input")}
-			on:select={(e) => gradio.dispatch("select", e.detail)}
-			on:blur={() => gradio.dispatch("blur")}
-			on:focus={() => gradio.dispatch("focus")}
-			{i18n}
-		/>
-	{/if}
-</Block>
diff --git a/js/dropdown/interactive/index.ts b/js/dropdown/interactive/index.ts
deleted file mode 100644
index 5609026066fc..000000000000
--- a/js/dropdown/interactive/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InteractiveDropdown.svelte";
diff --git a/js/dropdown/package.json b/js/dropdown/package.json
index 7f68527ec724..96bcc6960fb3 100644
--- a/js/dropdown/package.json
+++ b/js/dropdown/package.json
@@ -3,16 +3,14 @@
 	"version": "0.3.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./example": "./Example.svelte",
+		"./package.json": "./package.json"
 	},
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
@@ -20,4 +18,4 @@
 		"@gradio/statustracker": "workspace:^",
 		"@gradio/utils": "workspace:^"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/dropdown/shared/index.ts b/js/dropdown/shared/index.ts
deleted file mode 100644
index 297ac35e3220..000000000000
--- a/js/dropdown/shared/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as Dropdown } from "./Dropdown.svelte";
-export { default as Multiselect } from "./Multiselect.svelte";
diff --git a/js/dropdown/static/index.ts b/js/dropdown/static/index.ts
deleted file mode 100644
index 27a4c2e19057..000000000000
--- a/js/dropdown/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticDropdown.svelte";
diff --git a/js/fallback/example/Fallback.svelte b/js/fallback/Example.svelte
similarity index 100%
rename from js/fallback/example/Fallback.svelte
rename to js/fallback/Example.svelte
diff --git a/js/fallback/interactive/InteractiveFallback.svelte b/js/fallback/Index.svelte
similarity index 100%
rename from js/fallback/interactive/InteractiveFallback.svelte
rename to js/fallback/Index.svelte
diff --git a/js/fallback/example/index.ts b/js/fallback/example/index.ts
deleted file mode 100644
index 595694a6cfd4..000000000000
--- a/js/fallback/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Fallback.svelte";
diff --git a/js/fallback/interactive/index.ts b/js/fallback/interactive/index.ts
deleted file mode 100644
index c38e7d2fa971..000000000000
--- a/js/fallback/interactive/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InteractiveFallback.svelte";
diff --git a/js/fallback/package.json b/js/fallback/package.json
index 6b69285d48d3..e8c0d1842570 100644
--- a/js/fallback/package.json
+++ b/js/fallback/package.json
@@ -3,16 +3,14 @@
 	"version": "0.2.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./example": "./Example.svelte",
+		"./package.json": "./package.json"
 	},
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
@@ -20,4 +18,4 @@
 		"@gradio/utils": "workspace:^",
 		"@zerodevx/svelte-json-view": "^1.0.7"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/fallback/static/StaticFallback.svelte b/js/fallback/static/StaticFallback.svelte
deleted file mode 100644
index 604245af31be..000000000000
--- a/js/fallback/static/StaticFallback.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts">
-	import { JsonView } from "@zerodevx/svelte-json-view";
-
-	import type { Gradio } from "@gradio/utils";
-	import { Block, Info } from "@gradio/atoms";
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import type { SelectData } from "@gradio/utils";
-
-	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";
-	// 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 loading_status: LoadingStatus;
-	export let gradio: Gradio<{
-		change: never;
-		select: SelectData;
-		input: never;
-	}>;
-</script>
-
-<Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-	/>
-
-	<JsonView json={value} />
-</Block>
diff --git a/js/fallback/static/index.ts b/js/fallback/static/index.ts
deleted file mode 100644
index c031ab5467cd..000000000000
--- a/js/fallback/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticFallback.svelte";
diff --git a/js/file/example/File.svelte b/js/file/Example.svelte
similarity index 100%
rename from js/file/example/File.svelte
rename to js/file/Example.svelte
diff --git a/js/file/interactive/InteractiveFile.svelte b/js/file/Index.svelte
similarity index 63%
rename from js/file/interactive/InteractiveFile.svelte
rename to js/file/Index.svelte
index 3e6d5b5a8bc5..4b7c410af022 100644
--- a/js/file/interactive/InteractiveFile.svelte
+++ b/js/file/Index.svelte
@@ -1,21 +1,24 @@
 <svelte:options accessors={true} />
 
+<script context="module" lang="ts">
+	export { default as FilePreview } from "./shared/FilePreview.svelte";
+</script>
+
 <script lang="ts">
 	import type { Gradio, SelectData } from "@gradio/utils";
 	import { getContext } from "svelte";
-	import FileUpload from "./FileUpload.svelte";
+	import File from "./shared/File.svelte";
+	import FileUpload from "./shared/FileUpload.svelte";
 	import { blobToBase64 } from "@gradio/upload";
 	import type { FileData } from "@gradio/upload";
 	import { normalise_file } from "@gradio/upload";
-	import { Block } from "@gradio/atoms";
-	import { UploadText } from "@gradio/atoms";
+	import { Block, UploadText } from "@gradio/atoms";
+
 	import { upload_files as default_upload_files } from "@gradio/client";
 
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
 
-	import type { S } from "@storybook/theming/dist/create-c2b2ce6d";
-
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
@@ -26,15 +29,14 @@
 	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 height: number | undefined = undefined;
+
 	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;
 	export let gradio: Gradio<{
 		change: never;
 		error: string;
@@ -42,6 +44,8 @@
 		clear: never;
 		select: SelectData;
 	}>;
+	export let file_count: string;
+	export let file_types: string[] = ["file"];
 
 	const upload_files =
 		getContext<typeof default_upload_files>("upload_files") ??
@@ -106,43 +110,77 @@
 	}
 </script>
 
-<Block
-	{visible}
-	variant={value === null ? "dashed" : "solid"}
-	border_mode={dragging ? "focus" : "base"}
-	padding={false}
-	{elem_id}
-	{elem_classes}
-	{container}
-	{scale}
-	{min_width}
-	{height}
-	allow_overflow={false}
->
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-		status={pending_upload
-			? "generating"
-			: loading_status?.status || "complete"}
-	/>
+{#if mode === "static"}
+	<Block
+		{visible}
+		variant={value === null ? "dashed" : "solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		{elem_id}
+		{elem_classes}
+		{container}
+		{scale}
+		{min_width}
+		allow_overflow={false}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+			status={pending_upload
+				? "generating"
+				: loading_status?.status || "complete"}
+		/>
 
-	<FileUpload
-		{label}
-		{show_label}
-		value={_value}
-		{file_count}
-		{file_types}
-		{selectable}
-		{root}
+		<File
+			on:select={({ detail }) => gradio.dispatch("select", detail)}
+			{selectable}
+			value={_value}
+			{label}
+			{show_label}
+			{height}
+			i18n={gradio.i18n}
+		/>
+	</Block>
+{:else}
+	<Block
+		{visible}
+		variant={value === null ? "dashed" : "solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		{elem_id}
+		{elem_classes}
+		{container}
+		{scale}
+		{min_width}
 		{height}
-		on:change={({ detail }) => (value = detail)}
-		on:drag={({ detail }) => (dragging = detail)}
-		on:clear={() => gradio.dispatch("clear")}
-		on:select={({ detail }) => gradio.dispatch("select", detail)}
-		i18n={gradio.i18n}
+		allow_overflow={false}
 	>
-		<UploadText i18n={gradio.i18n} type="file" />
-	</FileUpload>
-</Block>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+			status={pending_upload
+				? "generating"
+				: loading_status?.status || "complete"}
+		/>
+
+		<FileUpload
+			{label}
+			{show_label}
+			value={_value}
+			{file_count}
+			{file_types}
+			{selectable}
+			{root}
+			{height}
+			on:change={({ detail }) => (value = detail)}
+			on:drag={({ detail }) => (dragging = detail)}
+			on:clear={() => gradio.dispatch("clear")}
+			on:select={({ detail }) => gradio.dispatch("select", detail)}
+			i18n={gradio.i18n}
+		>
+			<UploadText i18n={gradio.i18n} type="file" />
+		</FileUpload>
+	</Block>
+{/if}
diff --git a/js/file/example/index.ts b/js/file/example/index.ts
deleted file mode 100644
index 446a5d6d3fe9..000000000000
--- a/js/file/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./File.svelte";
diff --git a/js/file/interactive/index.ts b/js/file/interactive/index.ts
deleted file mode 100644
index fa6844e67ef4..000000000000
--- a/js/file/interactive/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InteractiveFile.svelte";
diff --git a/js/file/package.json b/js/file/package.json
index e3570469a92e..f56de978cd25 100644
--- a/js/file/package.json
+++ b/js/file/package.json
@@ -3,7 +3,6 @@
 	"version": "0.2.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": false,
@@ -17,9 +16,8 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./example": "./Example.svelte",
+		"./package.json": "./package.json"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/file/static/File.svelte b/js/file/shared/File.svelte
similarity index 93%
rename from js/file/static/File.svelte
rename to js/file/shared/File.svelte
index 1a2aa9e2158e..0da0ecf7f6a6 100644
--- a/js/file/static/File.svelte
+++ b/js/file/shared/File.svelte
@@ -2,7 +2,7 @@
 	import type { FileData } from "@gradio/upload";
 	import { BlockLabel, Empty } from "@gradio/atoms";
 	import { File } from "@gradio/icons";
-	import { FilePreview } from "../shared";
+	import FilePreview from "./FilePreview.svelte";
 	import type { I18nFormatter } from "js/utils/src";
 
 	export let value: FileData | FileData[] | null = null;
diff --git a/js/file/interactive/FileUpload.svelte b/js/file/shared/FileUpload.svelte
similarity index 97%
rename from js/file/interactive/FileUpload.svelte
rename to js/file/shared/FileUpload.svelte
index 03c8c944bf66..d7c43b29e747 100644
--- a/js/file/interactive/FileUpload.svelte
+++ b/js/file/shared/FileUpload.svelte
@@ -5,7 +5,7 @@
 	import { BlockLabel } from "@gradio/atoms";
 	import { File } from "@gradio/icons";
 
-	import { FilePreview } from "../shared";
+	import FilePreview from "./FilePreview.svelte";
 	import type { I18nFormatter } from "js/utils/src";
 
 	export let value: null | FileData | FileData[];
diff --git a/js/file/shared/index.ts b/js/file/shared/index.ts
deleted file mode 100644
index ef998866f79e..000000000000
--- a/js/file/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as FilePreview } from "./FilePreview.svelte";
diff --git a/js/file/static/StaticFile.svelte b/js/file/static/StaticFile.svelte
deleted file mode 100644
index 6f9ef3fa6cb2..000000000000
--- a/js/file/static/StaticFile.svelte
+++ /dev/null
@@ -1,136 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import type { Gradio, SelectData } from "@gradio/utils";
-	import { getContext } from "svelte";
-	import File from "./File.svelte";
-	import { blobToBase64 } from "@gradio/upload";
-	import type { FileData } from "@gradio/upload";
-	import { normalise_file } from "@gradio/upload";
-	import { Block } from "@gradio/atoms";
-
-	import { upload_files as default_upload_files } from "@gradio/client";
-
-	import { StatusTracker } from "@gradio/statustracker";
-	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[];
-	let old_value: null | FileData | FileData[];
-
-	export let mode: "static" | "interactive";
-	export let root: string;
-	export let label: string;
-	export let show_label: boolean;
-	export let height: number | undefined = undefined;
-
-	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 gradio: Gradio<{
-		change: never;
-		error: string;
-		upload: never;
-		clear: never;
-		select: SelectData;
-	}>;
-
-	const upload_files =
-		getContext<typeof default_upload_files>("upload_files") ??
-		default_upload_files;
-
-	$: _value = normalise_file(value, root, root_url);
-
-	let dragging = false;
-	let pending_upload = false;
-
-	$: {
-		if (JSON.stringify(_value) !== JSON.stringify(old_value)) {
-			old_value = _value;
-			if (_value === null) {
-				gradio.dispatch("change");
-				pending_upload = false;
-			} else if (
-				!(Array.isArray(_value) ? _value : [_value]).every(
-					(file_data) => file_data.blob
-				)
-			) {
-				pending_upload = false;
-				gradio.dispatch("change");
-			} else if (mode === "interactive") {
-				let files = (Array.isArray(_value) ? _value : [_value]).map(
-					(file_data) => file_data.blob!
-				);
-				let upload_value = _value;
-				pending_upload = true;
-				upload_files(root, files).then((response) => {
-					if (upload_value !== _value) {
-						// value has changed since upload started
-						return;
-					}
-
-					pending_upload = false;
-					if (response.error) {
-						(Array.isArray(_value) ? _value : [_value]).forEach(
-							async (file_data, i) => {
-								file_data.data = await blobToBase64(file_data.blob!);
-								file_data.blob = undefined;
-							}
-						);
-					} else {
-						(Array.isArray(_value) ? _value : [_value]).forEach(
-							(file_data, i) => {
-								if (response.files) {
-									file_data.orig_name = file_data.name;
-									file_data.name = response.files[i];
-									file_data.is_file = true;
-									file_data.blob = undefined;
-								}
-							}
-						);
-						old_value = _value = normalise_file(value, root, root_url);
-					}
-					gradio.dispatch("change");
-					gradio.dispatch("upload");
-				});
-			}
-		}
-	}
-</script>
-
-<Block
-	{visible}
-	variant={value === null ? "dashed" : "solid"}
-	border_mode={dragging ? "focus" : "base"}
-	padding={false}
-	{elem_id}
-	{elem_classes}
-	{container}
-	{scale}
-	{min_width}
-	allow_overflow={false}
->
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-		status={pending_upload
-			? "generating"
-			: loading_status?.status || "complete"}
-	/>
-
-	<File
-		on:select={({ detail }) => gradio.dispatch("select", detail)}
-		{selectable}
-		value={_value}
-		{label}
-		{show_label}
-		{height}
-		i18n={gradio.i18n}
-	/>
-</Block>
diff --git a/js/file/static/index.ts b/js/file/static/index.ts
deleted file mode 100644
index 586ede80caee..000000000000
--- a/js/file/static/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./StaticFile.svelte";
-export { FilePreview } from "../shared";
diff --git a/js/file/static/utils.ts b/js/file/static/utils.ts
deleted file mode 100644
index 4b0ce6057f91..000000000000
--- a/js/file/static/utils.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { FileData } from "@gradio/upload";
-
-export const prettyBytes = (bytes: number): string => {
-	let units = ["B", "KB", "MB", "GB", "PB"];
-	let i = 0;
-	while (bytes > 1024) {
-		bytes /= 1024;
-		i++;
-	}
-	let unit = units[i];
-	return bytes.toFixed(1) + " " + unit;
-};
-
-export const display_file_name = (value: FileData): string => {
-	var str: string;
-	str = value.orig_name || value.name;
-	if (str.length > 30) {
-		return `${str.substr(0, 30)}...`;
-	}
-	return str;
-};
-
-export const display_file_size = (value: FileData | FileData[]): string => {
-	var total_size = 0;
-	if (Array.isArray(value)) {
-		for (var file of value) {
-			if (file.size !== undefined) total_size += file.size;
-		}
-	} else {
-		total_size = value.size || 0;
-	}
-	return prettyBytes(total_size);
-};
diff --git a/js/fileexplorer/example/File.svelte b/js/fileexplorer/Example.svelte
similarity index 100%
rename from js/fileexplorer/example/File.svelte
rename to js/fileexplorer/Example.svelte
diff --git a/js/fileexplorer/static/StaticFileExplorer.svelte b/js/fileexplorer/Index.svelte
similarity index 85%
rename from js/fileexplorer/static/StaticFileExplorer.svelte
rename to js/fileexplorer/Index.svelte
index 4a25f4c3cb7e..9bb8d2d76ed4 100644
--- a/js/fileexplorer/static/StaticFileExplorer.svelte
+++ b/js/fileexplorer/Index.svelte
@@ -5,7 +5,7 @@
 	import { File } from "@gradio/icons";
 
 	import { Block, BlockLabel } from "@gradio/atoms";
-	import DirectoryExplorer from "../shared/DirectoryExplorer.svelte";
+	import DirectoryExplorer from "./shared/DirectoryExplorer.svelte";
 
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
@@ -31,6 +31,7 @@
 	export let server: {
 		ls: (path: string[]) => Promise<[string[], string[]]>;
 	};
+	export let mode: "static" | "interactive" = "interactive";
 </script>
 
 <Block
@@ -46,7 +47,11 @@
 	allow_overflow={false}
 	{height}
 >
-	<StatusTracker {...loading_status} />
+	<StatusTracker
+		{...loading_status}
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+	/>
 	<BlockLabel
 		{show_label}
 		Icon={File}
@@ -57,7 +62,7 @@
 		bind:value
 		{file_count}
 		{server}
-		mode="static"
+		{mode}
 		on:change={() => gradio.dispatch("change")}
 	/>
 </Block>
diff --git a/js/fileexplorer/example/index.ts b/js/fileexplorer/example/index.ts
deleted file mode 100644
index 446a5d6d3fe9..000000000000
--- a/js/fileexplorer/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./File.svelte";
diff --git a/js/fileexplorer/interactive/InteractiveFileExplorer.svelte b/js/fileexplorer/interactive/InteractiveFileExplorer.svelte
deleted file mode 100644
index 0355550b8208..000000000000
--- a/js/fileexplorer/interactive/InteractiveFileExplorer.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import type { Gradio, SelectData } from "@gradio/utils";
-	import { Block, BlockLabel } from "@gradio/atoms";
-	import { File } from "@gradio/icons";
-
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import DirectoryExplorer from "../shared/DirectoryExplorer.svelte";
-
-	import { _ } from "svelte-i18n";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: string[][];
-
-	export let label: string;
-	export let show_label: boolean;
-	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;
-	export let gradio: Gradio<{
-		change: never;
-		select: SelectData;
-	}>;
-	export let file_count: "single" | "multiple" = "multiple";
-	export let server: {
-		ls: (path: string[]) => Promise<[string[], string[]]>;
-	};
-
-	// $: value && gradio.dispatch("change");
-</script>
-
-<Block
-	{visible}
-	padding={false}
-	{elem_id}
-	{elem_classes}
-	{container}
-	{scale}
-	{min_width}
-	{height}
->
-	<BlockLabel
-		{show_label}
-		Icon={File}
-		label={label || "FileExplorer"}
-		float={false}
-	/>
-	<StatusTracker {...loading_status} />
-
-	<DirectoryExplorer
-		bind:value
-		{file_count}
-		{server}
-		mode="interactive"
-		on:change={() => gradio.dispatch("change")}
-	/>
-</Block>
diff --git a/js/fileexplorer/interactive/index.ts b/js/fileexplorer/interactive/index.ts
deleted file mode 100644
index b3b01e8e3f96..000000000000
--- a/js/fileexplorer/interactive/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InteractiveFileExplorer.svelte";
diff --git a/js/fileexplorer/package.json b/js/fileexplorer/package.json
index 270e93df48e5..d90eb943e0b1 100644
--- a/js/fileexplorer/package.json
+++ b/js/fileexplorer/package.json
@@ -3,7 +3,6 @@
 	"version": "0.2.2",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": true,
@@ -20,9 +19,8 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./example": "./Example.svelte",
+		"./package.json": "./package.json"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/fileexplorer/shared/index.ts b/js/fileexplorer/shared/index.ts
deleted file mode 100644
index 864561ae86b5..000000000000
--- a/js/fileexplorer/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as DirectoryExplorer } from "./DirectoryExplorer.svelte";
diff --git a/js/fileexplorer/static/index.ts b/js/fileexplorer/static/index.ts
deleted file mode 100644
index 3ae1c4d789bb..000000000000
--- a/js/fileexplorer/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticFileExplorer.svelte";
diff --git a/js/fileexplorer/static/utils.ts b/js/fileexplorer/static/utils.ts
deleted file mode 100644
index 4b0ce6057f91..000000000000
--- a/js/fileexplorer/static/utils.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { FileData } from "@gradio/upload";
-
-export const prettyBytes = (bytes: number): string => {
-	let units = ["B", "KB", "MB", "GB", "PB"];
-	let i = 0;
-	while (bytes > 1024) {
-		bytes /= 1024;
-		i++;
-	}
-	let unit = units[i];
-	return bytes.toFixed(1) + " " + unit;
-};
-
-export const display_file_name = (value: FileData): string => {
-	var str: string;
-	str = value.orig_name || value.name;
-	if (str.length > 30) {
-		return `${str.substr(0, 30)}...`;
-	}
-	return str;
-};
-
-export const display_file_size = (value: FileData | FileData[]): string => {
-	var total_size = 0;
-	if (Array.isArray(value)) {
-		for (var file of value) {
-			if (file.size !== undefined) total_size += file.size;
-		}
-	} else {
-		total_size = value.size || 0;
-	}
-	return prettyBytes(total_size);
-};
diff --git a/js/form/static/StaticForm.svelte b/js/form/Index.svelte
similarity index 100%
rename from js/form/static/StaticForm.svelte
rename to js/form/Index.svelte
diff --git a/js/form/package.json b/js/form/package.json
index 50c48739da75..ac6ddf24d026 100644
--- a/js/form/package.json
+++ b/js/form/package.json
@@ -3,7 +3,6 @@
 	"version": "0.0.6-beta.4",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./static/index.ts",
 	"author": "",
 	"license": "ISC",
 	"private": false,
@@ -14,10 +13,7 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		".": "./static/index.ts",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/form/static/index.ts b/js/form/static/index.ts
deleted file mode 100644
index 5544f2001f48..000000000000
--- a/js/form/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticForm.svelte";
diff --git a/js/gallery/Gallery.stories.svelte b/js/gallery/Gallery.stories.svelte
index e836ea19c360..4e15cddced27 100644
--- a/js/gallery/Gallery.stories.svelte
+++ b/js/gallery/Gallery.stories.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-	import Gallery from "./static/";
+	import Gallery from "./Index.svelte";
 </script>
 
 <Meta
diff --git a/js/gallery/static/StaticGallery.svelte b/js/gallery/Index.svelte
similarity index 97%
rename from js/gallery/static/StaticGallery.svelte
rename to js/gallery/Index.svelte
index 6b11348da68a..b9f461b6f95d 100644
--- a/js/gallery/static/StaticGallery.svelte
+++ b/js/gallery/Index.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Gradio, ShareData, SelectData } from "@gradio/utils";
 	import { Block } from "@gradio/atoms";
-	import Gallery from "./Gallery.svelte";
+	import Gallery from "./shared/Gallery.svelte";
 	import type { LoadingStatus } from "@gradio/statustracker";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { FileData } from "@gradio/upload";
diff --git a/js/gallery/package.json b/js/gallery/package.json
index 5f53c4164580..8873ce3fd4e5 100644
--- a/js/gallery/package.json
+++ b/js/gallery/package.json
@@ -3,7 +3,6 @@
 	"version": "0.4.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./static/index.ts",
 	"author": "",
 	"license": "ISC",
 	"private": false,
@@ -18,10 +17,7 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		".": "./static/index.ts",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/gallery/static/Gallery.svelte b/js/gallery/shared/Gallery.svelte
similarity index 100%
rename from js/gallery/static/Gallery.svelte
rename to js/gallery/shared/Gallery.svelte
diff --git a/js/gallery/static/utils.ts b/js/gallery/shared/utils.ts
similarity index 100%
rename from js/gallery/static/utils.ts
rename to js/gallery/shared/utils.ts
diff --git a/js/gallery/static/index.ts b/js/gallery/static/index.ts
deleted file mode 100644
index 79b978da91b5..000000000000
--- a/js/gallery/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticGallery.svelte";
diff --git a/js/group/static/Group.svelte b/js/group/Index.svelte
similarity index 100%
rename from js/group/static/Group.svelte
rename to js/group/Index.svelte
diff --git a/js/group/package.json b/js/group/package.json
index 15ef952a2726..f77ac6aef316 100644
--- a/js/group/package.json
+++ b/js/group/package.json
@@ -3,16 +3,12 @@
 	"version": "0.0.2-beta.0",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./static/index.ts",
 	"author": "",
 	"license": "ISC",
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./static/index.ts",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/group/static/index.ts b/js/group/static/index.ts
deleted file mode 100644
index a40fcabfac11..000000000000
--- a/js/group/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Group.svelte";
diff --git a/js/highlightedtext/HighlightedText.stories.svelte b/js/highlightedtext/HighlightedText.stories.svelte
index 0023329f391c..ae64d432cd71 100644
--- a/js/highlightedtext/HighlightedText.stories.svelte
+++ b/js/highlightedtext/HighlightedText.stories.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-	import HighlightedText from "./static";
+	import HighlightedText from "./Index.svelte";
 	import { Gradio } from "@gradio/utils";
 </script>
 
@@ -11,14 +11,15 @@
 		value={[
 			["zebras", "+"],
 			["dogs", "-"],
-			["elephants", "+"],
+			["elephants", "+"]
 		]}
 		gradio={new Gradio(
 			0,
 			document.body,
 			"light",
 			"1.1.1",
-			"http://localhost:7860"
+			"http://localhost:7860",
+			false
 		)}
 		{...args}
 	/>
@@ -30,7 +31,7 @@
 <Story
 	name="Highlighted Text with new lines"
 	args={{
-		value: [["zebras", "+"], ["\n"], ["dogs", "-"], ["\n"], ["elephants", "+"]],
+		value: [["zebras", "+"], ["\n"], ["dogs", "-"], ["\n"], ["elephants", "+"]]
 	}}
 />
 <Story
@@ -48,9 +49,9 @@
 			["fox", "subject"],
 			[" jumped ", "past tense verb"],
 			["over the", null],
-			["lazy dog", "object"],
+			["lazy dog", "object"]
 		],
-		combine_adjacent: true,
+		combine_adjacent: true
 	}}
 />
 
@@ -64,8 +65,8 @@
 			["fox", "subject"],
 			[" jumped ", "past tense verb"],
 			["over the", null],
-			["lazy dog", "object"],
-		],
+			["lazy dog", "object"]
+		]
 	}}
 />
 
@@ -81,9 +82,9 @@
 			["jumped", "past tense verb"],
 			["\n"],
 			["over the", null],
-			["lazy dog", "object"],
+			["lazy dog", "object"]
 		],
-		combine_adjacent: true,
+		combine_adjacent: true
 	}}
 />
 
@@ -93,9 +94,9 @@
 		value: [
 			["the", -1],
 			["quick", 1],
-			["fox", 0.3],
+			["fox", 0.3]
 		],
 
-		show_legend: true,
+		show_legend: true
 	}}
 />
diff --git a/js/highlightedtext/Index.svelte b/js/highlightedtext/Index.svelte
new file mode 100644
index 000000000000..b69eb91b219a
--- /dev/null
+++ b/js/highlightedtext/Index.svelte
@@ -0,0 +1,131 @@
+<script lang="ts">
+	import type { Gradio, SelectData, I18nFormatter } from "@gradio/utils";
+	import StaticHighlightedText from "./shared/StaticHighlightedtext.svelte";
+	import InteractiveHighlightedText from "./shared/InteractiveHighlightedtext.svelte";
+	import { Block, BlockLabel, Empty } from "@gradio/atoms";
+	import { TextHighlight } from "@gradio/icons";
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { LoadingStatus } from "@gradio/statustracker";
+	import { merge_elements } from "./shared/utils";
+
+	export let gradio: Gradio<{
+		select: SelectData;
+		change: never;
+	}>;
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let value: {
+		token: string;
+		class_or_confidence: string | number | null;
+	}[];
+	let old_value: typeof value;
+	export let show_legend: boolean;
+	export let color_map: Record<string, string> = {};
+	export let label = gradio.i18n("highlighted_text.highlighted_text");
+	export let container = true;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let selectable = false;
+	export let combine_adjacent = false;
+	export let mode: "static" | "interactive";
+
+	$: if (!color_map && Object.keys(color_map).length) {
+		color_map = color_map;
+	}
+
+	export let loading_status: LoadingStatus;
+
+	$: {
+		if (value !== old_value) {
+			old_value = value;
+			gradio.dispatch("change");
+		}
+	}
+
+	$: if (value && combine_adjacent) {
+		value = merge_elements(value, "equal");
+	}
+</script>
+
+{#if mode === "static"}
+	<Block
+		variant={"solid"}
+		test_id="highlighted-text"
+		{visible}
+		{elem_id}
+		{elem_classes}
+		padding={false}
+		{container}
+		{scale}
+		{min_width}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+		/>
+		{#if label}
+			<BlockLabel
+				Icon={TextHighlight}
+				{label}
+				float={false}
+				disable={container === false}
+			/>
+		{/if}
+
+		{#if value}
+			<StaticHighlightedText
+				on:select={({ detail }) => gradio.dispatch("select", detail)}
+				{selectable}
+				{value}
+				{show_legend}
+				{color_map}
+			/>
+		{:else}
+			<Empty>
+				<TextHighlight />
+			</Empty>
+		{/if}
+	</Block>
+{:else}
+	<Block
+		variant={mode === "interactive" ? "dashed" : "solid"}
+		test_id="highlighted-text"
+		{visible}
+		{elem_id}
+		{elem_classes}
+		padding={false}
+		{container}
+		{scale}
+		{min_width}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			{...loading_status}
+			i18n={gradio.i18n}
+		/>
+		{#if label}
+			<BlockLabel
+				Icon={TextHighlight}
+				{label}
+				float={false}
+				disable={container === false}
+			/>
+		{/if}
+
+		{#if value}
+			<InteractiveHighlightedText
+				bind:value
+				on:change={() => gradio.dispatch("change")}
+				{selectable}
+				{show_legend}
+				{color_map}
+			/>
+		{:else}
+			<Empty>
+				<TextHighlight />
+			</Empty>
+		{/if}
+	</Block>
+{/if}
diff --git a/js/highlightedtext/interactive/InteractiveHighlightedText.svelte b/js/highlightedtext/interactive/InteractiveHighlightedText.svelte
deleted file mode 100644
index d46e8f6476bd..000000000000
--- a/js/highlightedtext/interactive/InteractiveHighlightedText.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script lang="ts">
-	import type { Gradio, SelectData } from "@gradio/utils";
-	import HighlightedText from "./Highlightedtext.svelte";
-	import { Block, BlockLabel, Empty } from "@gradio/atoms";
-	import { TextHighlight } from "@gradio/icons";
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import { merge_elements } from "../utils";
-
-	export let gradio: Gradio<{
-		select: SelectData;
-		change: typeof value;
-		input: never;
-	}>;
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: {
-		token: string;
-		class_or_confidence: string | number | null;
-	}[] = [];
-	export let mode: "static" | "interactive";
-	export let show_legend: boolean;
-	export let color_map: Record<string, string> = {};
-	export let label = gradio.i18n("highlighted_text.highlighted_text");
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let selectable = false;
-	export let combine_adjacent = false;
-
-	$: if (!color_map && Object.keys(color_map).length) {
-		color_map = color_map;
-	}
-
-	export let loading_status: LoadingStatus;
-
-	$: if (value && combine_adjacent) {
-		value = merge_elements(value, "equal");
-	}
-</script>
-
-<Block
-	variant={mode === "interactive" ? "dashed" : "solid"}
-	test_id="highlighted-text"
-	{visible}
-	{elem_id}
-	{elem_classes}
-	padding={false}
-	{container}
-	{scale}
-	{min_width}
->
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		{...loading_status}
-		i18n={gradio.i18n}
-	/>
-	{#if label}
-		<BlockLabel
-			Icon={TextHighlight}
-			{label}
-			float={false}
-			disable={container === false}
-		/>
-	{/if}
-
-	{#if value}
-		<HighlightedText
-			bind:value
-			on:change={() => gradio.dispatch("change")}
-			{selectable}
-			{show_legend}
-			{color_map}
-		/>
-	{:else}
-		<Empty>
-			<TextHighlight />
-		</Empty>
-	{/if}
-</Block>
diff --git a/js/highlightedtext/interactive/index.ts b/js/highlightedtext/interactive/index.ts
deleted file mode 100644
index 2df0072857a5..000000000000
--- a/js/highlightedtext/interactive/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InteractiveHighlightedText.svelte";
diff --git a/js/highlightedtext/package.json b/js/highlightedtext/package.json
index dfcc62605360..bb32d329466c 100644
--- a/js/highlightedtext/package.json
+++ b/js/highlightedtext/package.json
@@ -3,7 +3,6 @@
 	"version": "0.4.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./static/index.ts",
 	"author": "",
 	"license": "ISC",
 	"private": false,
@@ -16,10 +15,7 @@
 		"@gradio/utils": "workspace:^"
 	},
 	"exports": {
-		".": "./static/index.ts",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/highlightedtext/interactive/Highlightedtext.svelte b/js/highlightedtext/shared/InteractiveHighlightedtext.svelte
similarity index 99%
rename from js/highlightedtext/interactive/Highlightedtext.svelte
rename to js/highlightedtext/shared/InteractiveHighlightedtext.svelte
index 3d4986240b43..5b0c56e65895 100644
--- a/js/highlightedtext/interactive/Highlightedtext.svelte
+++ b/js/highlightedtext/shared/InteractiveHighlightedtext.svelte
@@ -3,7 +3,7 @@
 	import { get_next_color } from "@gradio/utils";
 	import type { SelectData } from "@gradio/utils";
 	import { createEventDispatcher, onMount } from "svelte";
-	import { correct_color_map, merge_elements } from "../utils";
+	import { correct_color_map, merge_elements } from "./utils";
 	import LabelInput from "./LabelInput.svelte";
 
 	export let value: {
diff --git a/js/highlightedtext/interactive/LabelInput.svelte b/js/highlightedtext/shared/LabelInput.svelte
similarity index 100%
rename from js/highlightedtext/interactive/LabelInput.svelte
rename to js/highlightedtext/shared/LabelInput.svelte
diff --git a/js/highlightedtext/static/Highlightedtext.svelte b/js/highlightedtext/shared/StaticHighlightedtext.svelte
similarity index 99%
rename from js/highlightedtext/static/Highlightedtext.svelte
rename to js/highlightedtext/shared/StaticHighlightedtext.svelte
index 657301b0af5e..f7ebea19a2cd 100644
--- a/js/highlightedtext/static/Highlightedtext.svelte
+++ b/js/highlightedtext/shared/StaticHighlightedtext.svelte
@@ -3,7 +3,7 @@
 	import { get_next_color } from "@gradio/utils";
 	import type { SelectData } from "@gradio/utils";
 	import { createEventDispatcher } from "svelte";
-	import { correct_color_map } from "../utils";
+	import { correct_color_map } from "./utils";
 
 	export let value: {
 		token: string;
diff --git a/js/highlightedtext/utils.ts b/js/highlightedtext/shared/utils.ts
similarity index 100%
rename from js/highlightedtext/utils.ts
rename to js/highlightedtext/shared/utils.ts
diff --git a/js/highlightedtext/static/StaticHighlightedtext.svelte b/js/highlightedtext/static/StaticHighlightedtext.svelte
deleted file mode 100644
index fd209276a5aa..000000000000
--- a/js/highlightedtext/static/StaticHighlightedtext.svelte
+++ /dev/null
@@ -1,88 +0,0 @@
-<script lang="ts">
-	import type { Gradio, SelectData, I18nFormatter } from "@gradio/utils";
-	import HighlightedText from "./Highlightedtext.svelte";
-	import { Block, BlockLabel, Empty } from "@gradio/atoms";
-	import { TextHighlight } from "@gradio/icons";
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import { merge_elements } from "../utils";
-
-	export let gradio: Gradio<{
-		select: SelectData;
-		change: never;
-	}>;
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: {
-		token: string;
-		class_or_confidence: string | number | null;
-	}[];
-	let old_value: typeof value;
-	export let show_legend: boolean;
-	export let color_map: Record<string, string> = {};
-	export let label = gradio.i18n("highlighted_text.highlighted_text");
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let selectable = false;
-	export let combine_adjacent = false;
-	export let mode: "static" | "interactive";
-
-	$: if (!color_map && Object.keys(color_map).length) {
-		color_map = color_map;
-	}
-
-	export let loading_status: LoadingStatus;
-
-	$: {
-		if (value !== old_value) {
-			old_value = value;
-			gradio.dispatch("change");
-		}
-	}
-
-	$: if (value && combine_adjacent) {
-		value = merge_elements(value, "equal");
-	}
-</script>
-
-<Block
-	variant={mode === "interactive" ? "dashed" : "solid"}
-	test_id="highlighted-text"
-	{visible}
-	{elem_id}
-	{elem_classes}
-	padding={false}
-	{container}
-	{scale}
-	{min_width}
->
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-	/>
-	{#if label}
-		<BlockLabel
-			Icon={TextHighlight}
-			{label}
-			float={false}
-			disable={container === false}
-		/>
-	{/if}
-
-	{#if value}
-		<HighlightedText
-			on:select={({ detail }) => gradio.dispatch("select", detail)}
-			{selectable}
-			{value}
-			{show_legend}
-			{color_map}
-		/>
-	{:else}
-		<Empty>
-			<TextHighlight />
-		</Empty>
-	{/if}
-</Block>
diff --git a/js/highlightedtext/static/index.ts b/js/highlightedtext/static/index.ts
deleted file mode 100644
index 8342679ba13b..000000000000
--- a/js/highlightedtext/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticHighlightedtext.svelte";
diff --git a/js/html/example/Html.svelte b/js/html/Example.svelte
similarity index 100%
rename from js/html/example/Html.svelte
rename to js/html/Example.svelte
diff --git a/js/html/static/StaticHtml.svelte b/js/html/Index.svelte
similarity index 96%
rename from js/html/static/StaticHtml.svelte
rename to js/html/Index.svelte
index 89809fca804a..a4490b9e76c9 100644
--- a/js/html/static/StaticHtml.svelte
+++ b/js/html/Index.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Gradio } from "@gradio/utils";
-	import HTML from "./HTML.svelte";
+	import HTML from "./shared/HTML.svelte";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
 	import { Block } from "@gradio/atoms";
diff --git a/js/html/example/index.ts b/js/html/example/index.ts
deleted file mode 100644
index 632b76350957..000000000000
--- a/js/html/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Html.svelte";
diff --git a/js/html/package.json b/js/html/package.json
index 1f30b8427692..4b4df692bb02 100644
--- a/js/html/package.json
+++ b/js/html/package.json
@@ -3,7 +3,6 @@
 	"version": "0.1.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./static/index.ts",
 	"author": "",
 	"license": "ISC",
 	"private": false,
@@ -14,10 +13,8 @@
 		"@gradio/utils": "workspace:^"
 	},
 	"exports": {
-		".": "./static/index.ts",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./example": "./Example.svelte",
+		"./package.json": "./package.json"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/html/static/HTML.svelte b/js/html/shared/HTML.svelte
similarity index 100%
rename from js/html/static/HTML.svelte
rename to js/html/shared/HTML.svelte
diff --git a/js/html/static/index.ts b/js/html/static/index.ts
deleted file mode 100644
index b634c2f34130..000000000000
--- a/js/html/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticHtml.svelte";
diff --git a/js/image/example/Image.svelte b/js/image/Example.svelte
similarity index 94%
rename from js/image/example/Image.svelte
rename to js/image/Example.svelte
index 88fb86ae06ae..fba0a58d8897 100644
--- a/js/image/example/Image.svelte
+++ b/js/image/Example.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Image from "../shared/Image.svelte";
+	import Image from "./shared/Image.svelte";
 
 	export let value: string;
 	export let samples_dir: string;
diff --git a/js/image/Image.stories.svelte b/js/image/Image.stories.svelte
index 761b61272709..a87bbccc2a46 100644
--- a/js/image/Image.stories.svelte
+++ b/js/image/Image.stories.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-	import StaticImage from "./static";
+	import StaticImage from "./Index.svelte";
 </script>
 
 <Meta
diff --git a/js/image/Index.svelte b/js/image/Index.svelte
new file mode 100644
index 000000000000..cf684b336a26
--- /dev/null
+++ b/js/image/Index.svelte
@@ -0,0 +1,155 @@
+<svelte:options accessors={true} />
+
+<script context="module" lang="ts">
+	export { default as Webcam } from "./shared/Webcam.svelte";
+</script>
+
+<script lang="ts">
+	import type { Gradio, SelectData } from "@gradio/utils";
+	import StaticImage from "./shared/ImagePreview.svelte";
+	import Image from "./shared/ImageEditor.svelte";
+
+	import { Block, UploadText } from "@gradio/atoms";
+
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { FileData } from "js/upload/src";
+	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 label: string;
+	export let show_label: boolean;
+	export let show_download_button: boolean;
+	export let root: string;
+
+	export let height: number | undefined;
+	export let width: number | undefined;
+
+	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 show_share_button = false;
+
+	export let mode: "static" | "interactive";
+	export let source: "canvas" | "webcam" | "upload" = "upload";
+	export let tool: "editor" | "select" | "sketch" | "color-sketch" = "editor";
+	export let streaming: boolean;
+	export let pending: boolean;
+	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 gradio: Gradio<{
+		change: never;
+		error: string;
+		edit: never;
+		stream: never;
+		drag: never;
+		upload: never;
+		clear: never;
+		select: SelectData;
+		share: ShareData;
+	}>;
+
+	$: value, gradio.dispatch("change");
+	let dragging: boolean;
+
+	$: value = !value ? null : value;
+
+	const FIXED_HEIGHT = 240;
+</script>
+
+{#if mode === "static"}
+	<Block
+		{visible}
+		variant={"solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		{elem_id}
+		{elem_classes}
+		height={height || undefined}
+		{width}
+		allow_overflow={false}
+		{container}
+		{scale}
+		{min_width}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+		/>
+		<StaticImage
+			on:select={({ detail }) => gradio.dispatch("select", detail)}
+			on:share={({ detail }) => gradio.dispatch("share", detail)}
+			on:error={({ detail }) => gradio.dispatch("error", detail)}
+			{root}
+			{value}
+			{label}
+			{show_label}
+			{show_download_button}
+			{selectable}
+			{show_share_button}
+			i18n={gradio.i18n}
+		/>
+	</Block>
+{:else}
+	<Block
+		{visible}
+		variant={value === null && source === "upload" ? "dashed" : "solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		{elem_id}
+		{elem_classes}
+		height={height || (source === "webcam" ? undefined : FIXED_HEIGHT)}
+		{width}
+		allow_overflow={false}
+		{container}
+		{scale}
+		{min_width}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+		/>
+
+		<Image
+			{brush_radius}
+			{brush_color}
+			{shape}
+			bind:value
+			{source}
+			{tool}
+			{selectable}
+			{mask_opacity}
+			{root}
+			on:edit={() => gradio.dispatch("edit")}
+			on:clear={() => gradio.dispatch("clear")}
+			on:stream={() => gradio.dispatch("stream")}
+			on:drag={({ detail }) => (dragging = detail)}
+			on:upload={() => gradio.dispatch("upload")}
+			on:select={({ detail }) => gradio.dispatch("select", detail)}
+			on:share={({ detail }) => gradio.dispatch("share", detail)}
+			on:error={({ detail }) => {
+				loading_status = loading_status || {};
+				loading_status.status = "error";
+				gradio.dispatch("error", detail);
+			}}
+			{label}
+			{show_label}
+			{pending}
+			{streaming}
+			{mirror_webcam}
+			i18n={gradio.i18n}
+		>
+			<UploadText i18n={gradio.i18n} type="image" />
+		</Image>
+	</Block>
+{/if}
diff --git a/js/image/example/index.ts b/js/image/example/index.ts
deleted file mode 100644
index f77af3dcfa03..000000000000
--- a/js/image/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Image.svelte";
diff --git a/js/image/interactive/InteractiveImage.svelte b/js/image/interactive/InteractiveImage.svelte
deleted file mode 100644
index 2b0b718dd2a8..000000000000
--- a/js/image/interactive/InteractiveImage.svelte
+++ /dev/null
@@ -1,108 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import type { Gradio, SelectData, ShareData } from "@gradio/utils";
-	import Image from "./Image.svelte";
-
-	import { Block } from "@gradio/atoms";
-
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import { UploadText } from "@gradio/atoms";
-	import type { FileData } from "js/upload/src";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: null | FileData = 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 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 root: string;
-
-	export let gradio: Gradio<{
-		change: never;
-		error: string;
-		edit: never;
-		stream: never;
-		drag: never;
-		upload: never;
-		clear: never;
-		select: SelectData;
-		share: ShareData;
-	}>;
-
-	$: value, gradio.dispatch("change");
-	let dragging: boolean;
-	const FIXED_HEIGHT = 240;
-
-	$: value = !value ? null : value;
-</script>
-
-<Block
-	{visible}
-	variant={value === null && source === "upload" ? "dashed" : "solid"}
-	border_mode={dragging ? "focus" : "base"}
-	padding={false}
-	{elem_id}
-	{elem_classes}
-	height={height || (source === "webcam" ? undefined : FIXED_HEIGHT)}
-	{width}
-	allow_overflow={false}
-	{container}
-	{scale}
-	{min_width}
->
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-	/>
-
-	<Image
-		{brush_radius}
-		{brush_color}
-		{shape}
-		bind:value
-		{source}
-		{tool}
-		{selectable}
-		{mask_opacity}
-		{root}
-		on:edit={() => gradio.dispatch("edit")}
-		on:clear={() => gradio.dispatch("clear")}
-		on:stream={() => gradio.dispatch("stream")}
-		on:drag={({ detail }) => (dragging = detail)}
-		on:upload={() => gradio.dispatch("upload")}
-		on:select={({ detail }) => gradio.dispatch("select", detail)}
-		on:share={({ detail }) => gradio.dispatch("share", detail)}
-		on:error={({ detail }) => {
-			loading_status = loading_status || {};
-			loading_status.status = "error";
-			gradio.dispatch("error", detail);
-		}}
-		{label}
-		{show_label}
-		{pending}
-		{streaming}
-		{mirror_webcam}
-		i18n={gradio.i18n}
-	>
-		<UploadText i18n={gradio.i18n} type="image" />
-	</Image>
-</Block>
diff --git a/js/image/interactive/index.ts b/js/image/interactive/index.ts
deleted file mode 100644
index dbae9def8ba4..000000000000
--- a/js/image/interactive/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as Webcam } from "./Webcam.svelte";
-export { default } from "./InteractiveImage.svelte";
diff --git a/js/image/package.json b/js/image/package.json
index cae6d60b9a04..82b2ddd25397 100644
--- a/js/image/package.json
+++ b/js/image/package.json
@@ -3,7 +3,6 @@
 	"version": "0.3.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": false,
@@ -20,9 +19,8 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./example": "./Example.svelte",
+		"./package.json": "./package.json"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/image/interactive/Cropper.svelte b/js/image/shared/Cropper.svelte
similarity index 100%
rename from js/image/interactive/Cropper.svelte
rename to js/image/shared/Cropper.svelte
diff --git a/js/image/interactive/Image.svelte b/js/image/shared/ImageEditor.svelte
similarity index 99%
rename from js/image/interactive/Image.svelte
rename to js/image/shared/ImageEditor.svelte
index 74afad958e56..9ff868231b13 100644
--- a/js/image/interactive/Image.svelte
+++ b/js/image/shared/ImageEditor.svelte
@@ -4,7 +4,7 @@
 	import { BlockLabel } from "@gradio/atoms";
 	import { Image, Sketch as SketchIcon } from "@gradio/icons";
 	import type { SelectData, I18nFormatter } from "@gradio/utils";
-	import { get_coordinates_of_clicked_image } from "../shared/utils";
+	import { get_coordinates_of_clicked_image } from "./utils";
 
 	import Cropper from "./Cropper.svelte";
 	import Sketch from "./Sketch.svelte";
@@ -76,12 +76,12 @@
 			if (source === "webcam" && initial) {
 				value = {
 					image: detail,
-					mask: null,
+					mask: null
 				};
 			} else {
 				value = {
 					image: typeof value === "string" ? value : value?.image || null,
-					mask: detail,
+					mask: detail
 				};
 			}
 		} else if (
diff --git a/js/image/static/ImagePreview.svelte b/js/image/shared/ImagePreview.svelte
similarity index 94%
rename from js/image/static/ImagePreview.svelte
rename to js/image/shared/ImagePreview.svelte
index d2d00bd96d91..391533453299 100644
--- a/js/image/static/ImagePreview.svelte
+++ b/js/image/shared/ImagePreview.svelte
@@ -4,7 +4,7 @@
 	import { uploadToHuggingFace } from "@gradio/utils";
 	import { BlockLabel, Empty, IconButton, ShareButton } from "@gradio/atoms";
 	import { Download } from "@gradio/icons";
-	import { get_coordinates_of_clicked_image } from "../shared/utils";
+	import { get_coordinates_of_clicked_image } from "./utils";
 
 	import { Image } from "@gradio/icons";
 	import { type FileData, normalise_file } from "@gradio/upload";
@@ -69,7 +69,7 @@
 		{/if}
 	</div>
 	<button on:click={handle_click}>
-		<img src={value_.data} alt="" class:selectable loading="lazy"/>
+		<img src={value_.data} alt="" class:selectable loading="lazy" />
 	</button>
 {/if}
 
diff --git a/js/image/interactive/ModifySketch.svelte b/js/image/shared/ModifySketch.svelte
similarity index 100%
rename from js/image/interactive/ModifySketch.svelte
rename to js/image/shared/ModifySketch.svelte
diff --git a/js/image/interactive/Sketch.svelte b/js/image/shared/Sketch.svelte
similarity index 100%
rename from js/image/interactive/Sketch.svelte
rename to js/image/shared/Sketch.svelte
diff --git a/js/image/interactive/SketchSettings.svelte b/js/image/shared/SketchSettings.svelte
similarity index 100%
rename from js/image/interactive/SketchSettings.svelte
rename to js/image/shared/SketchSettings.svelte
diff --git a/js/image/interactive/Webcam.svelte b/js/image/shared/Webcam.svelte
similarity index 100%
rename from js/image/interactive/Webcam.svelte
rename to js/image/shared/Webcam.svelte
diff --git a/js/image/static/StaticImage.svelte b/js/image/static/StaticImage.svelte
deleted file mode 100644
index eca9aa7bdc49..000000000000
--- a/js/image/static/StaticImage.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import type { Gradio, SelectData } from "@gradio/utils";
-	import StaticImage from "./ImagePreview.svelte";
-
-	import { Block } from "@gradio/atoms";
-
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { FileData } from "js/upload/src";
-	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 label: string;
-	export let show_label: boolean;
-	export let show_download_button: boolean;
-	export let root: string;
-
-	export let height: number | undefined;
-	export let width: number | undefined;
-
-	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 show_share_button = false;
-	export let gradio: Gradio<{
-		change: never;
-		error: string;
-		select: SelectData;
-		share: ShareData;
-	}>;
-
-	$: value, gradio.dispatch("change");
-	let dragging: boolean;
-
-	$: value = !value ? null : value;
-</script>
-
-<Block
-	{visible}
-	variant={"solid"}
-	border_mode={dragging ? "focus" : "base"}
-	padding={false}
-	{elem_id}
-	{elem_classes}
-	height={height || undefined}
-	{width}
-	allow_overflow={false}
-	{container}
-	{scale}
-	{min_width}
->
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-	/>
-	<StaticImage
-		on:select={({ detail }) => gradio.dispatch("select", detail)}
-		on:share={({ detail }) => gradio.dispatch("share", detail)}
-		on:error={({ detail }) => gradio.dispatch("error", detail)}
-		{root}
-		{value}
-		{label}
-		{show_label}
-		{show_download_button}
-		{selectable}
-		{show_share_button}
-		i18n={gradio.i18n}
-	/>
-</Block>
diff --git a/js/image/static/index.ts b/js/image/static/index.ts
deleted file mode 100644
index 8d950f3e426f..000000000000
--- a/js/image/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticImage.svelte";
diff --git a/js/json/static/StaticJson.svelte b/js/json/Index.svelte
similarity index 96%
rename from js/json/static/StaticJson.svelte
rename to js/json/Index.svelte
index 721cde89e5b1..0088205f2093 100644
--- a/js/json/static/StaticJson.svelte
+++ b/js/json/Index.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Gradio } from "@gradio/utils";
-	import JSON from "./JSON.svelte";
+	import JSON from "./shared/JSON.svelte";
 	import { Block, BlockLabel } from "@gradio/atoms";
 	import { JSON as JSONIcon } from "@gradio/icons";
 
diff --git a/js/json/package.json b/js/json/package.json
index 321a879a441d..1b046e9af467 100644
--- a/js/json/package.json
+++ b/js/json/package.json
@@ -3,7 +3,6 @@
 	"version": "0.1.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./static/index.ts",
 	"author": "",
 	"license": "ISC",
 	"private": false,
@@ -15,10 +14,7 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		".": "./static/index.ts",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/json/static/JSON.svelte b/js/json/shared/JSON.svelte
similarity index 100%
rename from js/json/static/JSON.svelte
rename to js/json/shared/JSON.svelte
diff --git a/js/json/static/JSONNode.svelte b/js/json/shared/JSONNode.svelte
similarity index 100%
rename from js/json/static/JSONNode.svelte
rename to js/json/shared/JSONNode.svelte
diff --git a/js/json/static/index.ts b/js/json/static/index.ts
deleted file mode 100644
index 26f26822eb14..000000000000
--- a/js/json/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticJson.svelte";
diff --git a/js/label/static/StaticLabel.svelte b/js/label/Index.svelte
similarity index 97%
rename from js/label/static/StaticLabel.svelte
rename to js/label/Index.svelte
index f3c7ee0b56e1..8ab1c5a5d5b5 100644
--- a/js/label/static/StaticLabel.svelte
+++ b/js/label/Index.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Gradio, SelectData } from "@gradio/utils";
-	import Label from "./Label.svelte";
+	import Label from "./shared/Label.svelte";
 	import { LineChart as LabelIcon } from "@gradio/icons";
 	import { Block, BlockLabel, Empty } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
diff --git a/js/label/package.json b/js/label/package.json
index a719043a3f0d..88e2bad4d188 100644
--- a/js/label/package.json
+++ b/js/label/package.json
@@ -3,7 +3,6 @@
 	"version": "0.2.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./static/index.ts",
 	"author": "",
 	"license": "ISC",
 	"private": false,
@@ -15,10 +14,7 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		".": "./static/index.ts",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/label/static/Label.svelte b/js/label/shared/Label.svelte
similarity index 100%
rename from js/label/static/Label.svelte
rename to js/label/shared/Label.svelte
diff --git a/js/label/static/index.ts b/js/label/static/index.ts
deleted file mode 100644
index 159df477818c..000000000000
--- a/js/label/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticLabel.svelte";
diff --git a/js/markdown/example/Markdown.svelte b/js/markdown/Example.svelte
similarity index 100%
rename from js/markdown/example/Markdown.svelte
rename to js/markdown/Example.svelte
diff --git a/js/markdown/static/StaticMarkdown.svelte b/js/markdown/Index.svelte
similarity index 88%
rename from js/markdown/static/StaticMarkdown.svelte
rename to js/markdown/Index.svelte
index 7c31b567c6a9..099c723343e0 100644
--- a/js/markdown/static/StaticMarkdown.svelte
+++ b/js/markdown/Index.svelte
@@ -1,6 +1,10 @@
+<script context="module" lang="ts">
+	export { default as MarkdownCode } from "./shared/MarkdownCode.svelte";
+</script>
+
 <script lang="ts">
 	import type { Gradio } from "@gradio/utils";
-	import Markdown from "./Markdown.svelte";
+	import Markdown from "./shared/Markdown.svelte";
 
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
diff --git a/js/markdown/Markdown.stories.svelte b/js/markdown/Markdown.stories.svelte
index c301bb42de14..f0c667c34819 100644
--- a/js/markdown/Markdown.stories.svelte
+++ b/js/markdown/Markdown.stories.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-	import Markdown from "./static";
+	import Markdown from "./Index.svelte";
 </script>
 
 <Meta
diff --git a/js/markdown/example/index.ts b/js/markdown/example/index.ts
deleted file mode 100644
index 359b432a232b..000000000000
--- a/js/markdown/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Markdown.svelte";
diff --git a/js/markdown/package.json b/js/markdown/package.json
index 2feb950a2916..e47236279483 100644
--- a/js/markdown/package.json
+++ b/js/markdown/package.json
@@ -3,17 +3,14 @@
 	"version": "0.3.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./static/index.ts",
 	"author": "",
 	"license": "ISC",
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./static/index.ts",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./example": "./Example.svelte",
+		"./package.json": "./package.json"
 	},
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
@@ -28,4 +25,4 @@
 		"marked-highlight": "^2.0.1",
 		"prismjs": "1.29.0"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/markdown/static/Markdown.svelte b/js/markdown/shared/Markdown.svelte
similarity index 100%
rename from js/markdown/static/Markdown.svelte
rename to js/markdown/shared/Markdown.svelte
diff --git a/js/markdown/static/MarkdownCode.svelte b/js/markdown/shared/MarkdownCode.svelte
similarity index 100%
rename from js/markdown/static/MarkdownCode.svelte
rename to js/markdown/shared/MarkdownCode.svelte
diff --git a/js/markdown/static/prism-dark.css b/js/markdown/shared/prism-dark.css
similarity index 100%
rename from js/markdown/static/prism-dark.css
rename to js/markdown/shared/prism-dark.css
diff --git a/js/markdown/static/prism.css b/js/markdown/shared/prism.css
similarity index 100%
rename from js/markdown/static/prism.css
rename to js/markdown/shared/prism.css
diff --git a/js/markdown/static/utils.ts b/js/markdown/shared/utils.ts
similarity index 100%
rename from js/markdown/static/utils.ts
rename to js/markdown/shared/utils.ts
diff --git a/js/markdown/static/index.ts b/js/markdown/static/index.ts
deleted file mode 100644
index 72f376e65ead..000000000000
--- a/js/markdown/static/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./StaticMarkdown.svelte";
-export { default as MarkdownCode } from "./MarkdownCode.svelte";
diff --git a/js/model3D/example/Model3d.svelte b/js/model3D/Example.svelte
similarity index 100%
rename from js/model3D/example/Model3d.svelte
rename to js/model3D/Example.svelte
diff --git a/js/model3D/Index.svelte b/js/model3D/Index.svelte
new file mode 100644
index 000000000000..e6acb503896c
--- /dev/null
+++ b/js/model3D/Index.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+	import type { FileData } from "@gradio/upload";
+	import { normalise_file } from "@gradio/upload";
+	import Model3D from "./shared/Model3D.svelte";
+	import Model3DUpload from "./shared/Model3DUpload.svelte";
+	import { BlockLabel, Block, Empty, UploadText } from "@gradio/atoms";
+	import { File } from "@gradio/icons";
+
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { LoadingStatus } from "@gradio/statustracker";
+	import type { Gradio } from "@gradio/utils";
+
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let value: null | FileData = null;
+	export let root: string;
+	export let root_url: null | string;
+	export let clear_color: [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;
+	export let gradio: Gradio;
+	export let height: number | undefined = undefined;
+	export let zoom_speed = 1;
+
+	// alpha, beta, radius
+	export let camera_position: [number | null, number | null, number | null] = [
+		null,
+		null,
+		null
+	];
+	export let mode: "static" | "interactive";
+
+	let _value: null | FileData;
+	$: _value = normalise_file(value, root, root_url);
+
+	let dragging = false;
+</script>
+
+{#if mode === "static"}
+	<Block
+		{visible}
+		variant={value === null ? "dashed" : "solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		{elem_id}
+		{elem_classes}
+		{container}
+		{scale}
+		{min_width}
+		{height}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+		/>
+
+		{#if value}
+			<Model3D
+				value={_value}
+				i18n={gradio.i18n}
+				{clear_color}
+				{label}
+				{show_label}
+				{camera_position}
+				{zoom_speed}
+			/>
+		{:else}
+			<!-- Not ideal but some bugs to work out before we can 
+				 make this consistent with other components -->
+
+			<BlockLabel {show_label} Icon={File} label={label || "3D Model"} />
+
+			<Empty unpadded_box={true} size="large"><File /></Empty>
+		{/if}
+	</Block>
+{:else}
+	<Block
+		{visible}
+		variant={value === null ? "dashed" : "solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		{elem_id}
+		{elem_classes}
+		{container}
+		{scale}
+		{min_width}
+		{height}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+		/>
+
+		<Model3DUpload
+			{label}
+			{show_label}
+			{root}
+			{clear_color}
+			value={_value}
+			{camera_position}
+			{zoom_speed}
+			on:change={({ detail }) => (value = detail)}
+			on:drag={({ detail }) => (dragging = detail)}
+			on:change={({ detail }) => gradio.dispatch("change", detail)}
+			on:clear={() => gradio.dispatch("clear")}
+			i18n={gradio.i18n}
+		>
+			<UploadText i18n={gradio.i18n} type="file" />
+		</Model3DUpload>
+	</Block>
+{/if}
diff --git a/js/model3D/example/index.ts b/js/model3D/example/index.ts
deleted file mode 100644
index 4e90a2ef1772..000000000000
--- a/js/model3D/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Model3d.svelte";
diff --git a/js/model3D/interactive/InteractiveModel3d.svelte b/js/model3D/interactive/InteractiveModel3d.svelte
deleted file mode 100644
index eed629f76b51..000000000000
--- a/js/model3D/interactive/InteractiveModel3d.svelte
+++ /dev/null
@@ -1,78 +0,0 @@
-<script lang="ts">
-	import type { Gradio } from "@gradio/utils";
-	import type { FileData } from "@gradio/upload";
-	import { normalise_file } from "@gradio/upload";
-	import Model3DUpload from "./Model3DUpload.svelte";
-	import { Block, UploadText } from "@gradio/atoms";
-
-	import { StatusTracker } from "@gradio/statustracker";
-	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 root: string;
-	export let root_url: null | string;
-	export let clear_color: [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;
-	export let gradio: Gradio<{
-		change: typeof value;
-		clear: never;
-	}>;
-	export let zoom_speed = 1;
-	export let height: number | undefined = undefined;
-
-	// alpha, beta, radius
-	export let camera_position: [number | null, number | null, number | null] = [
-		null,
-		null,
-		null
-	];
-
-	let _value: null | FileData;
-	$: _value = normalise_file(value, root, root_url);
-
-	let dragging = false;
-</script>
-
-<Block
-	{visible}
-	variant={value === null ? "dashed" : "solid"}
-	border_mode={dragging ? "focus" : "base"}
-	padding={false}
-	{elem_id}
-	{elem_classes}
-	{container}
-	{scale}
-	{min_width}
-	{height}
->
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-	/>
-
-	<Model3DUpload
-		{label}
-		{show_label}
-		{root}
-		{clear_color}
-		value={_value}
-		{camera_position}
-		{zoom_speed}
-		on:change={({ detail }) => (value = detail)}
-		on:drag={({ detail }) => (dragging = detail)}
-		on:change={({ detail }) => gradio.dispatch("change", detail)}
-		on:clear={() => gradio.dispatch("clear")}
-		i18n={gradio.i18n}
-	>
-		<UploadText i18n={gradio.i18n} type="file" />
-	</Model3DUpload>
-</Block>
diff --git a/js/model3D/interactive/index.ts b/js/model3D/interactive/index.ts
deleted file mode 100644
index 77478dd872ec..000000000000
--- a/js/model3D/interactive/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InteractiveModel3d.svelte";
diff --git a/js/model3D/package.json b/js/model3D/package.json
index 2af17c13ab8f..4dd2fa9456a0 100644
--- a/js/model3D/package.json
+++ b/js/model3D/package.json
@@ -3,7 +3,6 @@
 	"version": "0.3.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": false,
@@ -19,9 +18,8 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./example": "./Example.svelte",
+		"./package.json": "./package.json"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/model3D/static/Model3D.svelte b/js/model3D/shared/Model3D.svelte
similarity index 97%
rename from js/model3D/static/Model3D.svelte
rename to js/model3D/shared/Model3D.svelte
index 5e6799f49f79..2494f7784699 100644
--- a/js/model3D/static/Model3D.svelte
+++ b/js/model3D/shared/Model3D.svelte
@@ -2,7 +2,7 @@
 	import type { FileData } from "@gradio/upload";
 	import { BlockLabel, IconButton } from "@gradio/atoms";
 	import { File, Download, Undo } from "@gradio/icons";
-	import { add_new_model, reset_camera_position } from "../shared/utils";
+	import { add_new_model, reset_camera_position } from "./utils";
 	import { onMount } from "svelte";
 	import * as BABYLON from "babylonjs";
 	import * as BABYLON_LOADERS from "babylonjs-loaders";
diff --git a/js/model3D/interactive/Model3DUpload.svelte b/js/model3D/shared/Model3DUpload.svelte
similarity index 97%
rename from js/model3D/interactive/Model3DUpload.svelte
rename to js/model3D/shared/Model3DUpload.svelte
index 97439725bb1b..63b232cd87de 100644
--- a/js/model3D/interactive/Model3DUpload.svelte
+++ b/js/model3D/shared/Model3DUpload.svelte
@@ -4,7 +4,7 @@
 	import type { FileData } from "@gradio/upload";
 	import { BlockLabel } from "@gradio/atoms";
 	import { File } from "@gradio/icons";
-	import { add_new_model, reset_camera_position } from "../shared/utils";
+	import { add_new_model, reset_camera_position } from "./utils";
 
 	export let value: null | FileData;
 	export let clear_color: [number, number, number, number] = [0, 0, 0, 0];
diff --git a/js/model3D/static/StaticModel3d.svelte b/js/model3D/static/StaticModel3d.svelte
deleted file mode 100644
index 0deacde100c1..000000000000
--- a/js/model3D/static/StaticModel3d.svelte
+++ /dev/null
@@ -1,78 +0,0 @@
-<script lang="ts">
-	import type { FileData } from "@gradio/upload";
-	import { normalise_file } from "@gradio/upload";
-	import Model3D from "./Model3D.svelte";
-	import { BlockLabel, Block, Empty } from "@gradio/atoms";
-	import { File } from "@gradio/icons";
-
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import type { Gradio } from "@gradio/utils";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: null | FileData = null;
-	export let root: string;
-	export let root_url: null | string;
-	export let clear_color: [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;
-	export let gradio: Gradio;
-	export let height: number | undefined = undefined;
-	export let zoom_speed = 1;
-
-	// alpha, beta, radius
-	export let camera_position: [number | null, number | null, number | null] = [
-		null,
-		null,
-		null
-	];
-
-	let _value: null | FileData;
-	$: _value = normalise_file(value, root, root_url);
-
-	let dragging = false;
-</script>
-
-<Block
-	{visible}
-	variant={value === null ? "dashed" : "solid"}
-	border_mode={dragging ? "focus" : "base"}
-	padding={false}
-	{elem_id}
-	{elem_classes}
-	{container}
-	{scale}
-	{min_width}
-	{height}
->
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-	/>
-
-	{#if value}
-		<Model3D
-			value={_value}
-			i18n={gradio.i18n}
-			{clear_color}
-			{label}
-			{show_label}
-			{camera_position}
-			{zoom_speed}
-		/>
-	{:else}
-		<!-- Not ideal but some bugs to work out before we can 
-				 make this consistent with other components -->
-
-		<BlockLabel {show_label} Icon={File} label={label || "3D Model"} />
-
-		<Empty unpadded_box={true} size="large"><File /></Empty>
-	{/if}
-</Block>
diff --git a/js/model3D/static/index.ts b/js/model3D/static/index.ts
deleted file mode 100644
index b24426e6ac34..000000000000
--- a/js/model3D/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticModel3d.svelte";
diff --git a/js/number/example/Number.svelte b/js/number/Example.svelte
similarity index 100%
rename from js/number/example/Number.svelte
rename to js/number/Example.svelte
diff --git a/js/number/interactive/InteractiveNumber.svelte b/js/number/Index.svelte
similarity index 92%
rename from js/number/interactive/InteractiveNumber.svelte
rename to js/number/Index.svelte
index 4971ed359d71..25c686892a29 100644
--- a/js/number/interactive/InteractiveNumber.svelte
+++ b/js/number/Index.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Gradio } from "@gradio/utils";
-	import Number from "../shared";
+	import Number from "./shared/Number.svelte";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
@@ -27,6 +27,7 @@
 	export let loading_status: LoadingStatus;
 	export let value_is_output = false;
 	export let step: number | null = null;
+	export let mode: "static" | "interactive";
 </script>
 
 <Block
@@ -43,7 +44,6 @@
 		i18n={gradio.i18n}
 		{...loading_status}
 	/>
-
 	<Number
 		bind:value
 		bind:value_is_output
@@ -54,6 +54,7 @@
 		{maximum}
 		{step}
 		{container}
+		disabled={mode === "static"}
 		on:change={() => gradio.dispatch("change")}
 		on:input={() => gradio.dispatch("input")}
 		on:submit={() => gradio.dispatch("submit")}
diff --git a/js/number/Number.stories.svelte b/js/number/Number.stories.svelte
index e8852231d196..c248d4b017f7 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 "./interactive";
+	import Number from "./Index.svelte";
 </script>
 
 <Meta title="Components/Number" component={Number} />
diff --git a/js/number/example/index.ts b/js/number/example/index.ts
deleted file mode 100644
index 71ced2e39222..000000000000
--- a/js/number/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Number.svelte";
diff --git a/js/number/interactive/index.ts b/js/number/interactive/index.ts
deleted file mode 100644
index 77eb2eed7226..000000000000
--- a/js/number/interactive/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InteractiveNumber.svelte";
diff --git a/js/number/package.json b/js/number/package.json
index 3e365ae1264e..f19a18cc4987 100644
--- a/js/number/package.json
+++ b/js/number/package.json
@@ -3,20 +3,18 @@
 	"version": "0.3.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./example": "./Example.svelte",
+		"./package.json": "./package.json"
 	},
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
 		"@gradio/statustracker": "workspace:^",
 		"@gradio/utils": "workspace:^"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/number/shared/index.ts b/js/number/shared/index.ts
deleted file mode 100644
index 71ced2e39222..000000000000
--- a/js/number/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Number.svelte";
diff --git a/js/number/static/StaticNumber.svelte b/js/number/static/StaticNumber.svelte
deleted file mode 100644
index c736039482c4..000000000000
--- a/js/number/static/StaticNumber.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts">
-	import type { Gradio } from "@gradio/utils";
-	import Number from "../shared";
-	import { Block } from "@gradio/atoms";
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	export let gradio: Gradio<{
-		change: never;
-		input: never;
-		submit: never;
-		blur: never;
-		focus: never;
-	}>;
-	export let label = gradio.i18n("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 value_is_output = false;
-	export let step: number | null = null;
-</script>
-
-<Block
-	{visible}
-	{elem_id}
-	{elem_classes}
-	padding={container}
-	allow_overflow={false}
-	{scale}
-	{min_width}
->
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-	/>
-	<Number
-		bind:value
-		bind:value_is_output
-		{label}
-		{info}
-		{show_label}
-		{minimum}
-		{maximum}
-		{step}
-		{container}
-		disabled
-		on:change={() => gradio.dispatch("change")}
-		on:input={() => gradio.dispatch("input")}
-		on:submit={() => gradio.dispatch("submit")}
-		on:blur={() => gradio.dispatch("blur")}
-		on:focus={() => gradio.dispatch("focus")}
-	/>
-</Block>
diff --git a/js/number/static/index.ts b/js/number/static/index.ts
deleted file mode 100644
index 5979f2c8c0ca..000000000000
--- a/js/number/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticNumber.svelte";
diff --git a/js/plot/static/StaticPlot.svelte b/js/plot/Index.svelte
similarity index 90%
rename from js/plot/static/StaticPlot.svelte
rename to js/plot/Index.svelte
index c88748aa4d41..ee28821cfd87 100644
--- a/js/plot/static/StaticPlot.svelte
+++ b/js/plot/Index.svelte
@@ -1,6 +1,10 @@
+<script context="module" lang="ts">
+	// @ts-ignore
+</script>
+
 <script lang="ts">
 	import type { Gradio } from "@gradio/utils";
-	import Plot from "./Plot.svelte";
+	import Plot from "./shared/Plot.svelte";
 
 	import { Block, BlockLabel } from "@gradio/atoms";
 	import { Plot as PlotIcon } from "@gradio/icons";
@@ -8,7 +12,7 @@
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
 
-	import type { ThemeMode } from "js/app/src/components/types";
+	type ThemeMode = "system" | "light" | "dark";
 
 	export let value: null | string = null;
 	export let elem_id = "";
diff --git a/js/plot/package.json b/js/plot/package.json
index d131afd84ffe..a3029d0c48a7 100644
--- a/js/plot/package.json
+++ b/js/plot/package.json
@@ -3,7 +3,6 @@
 	"version": "0.2.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./static/index.ts",
 	"author": "",
 	"license": "ISC",
 	"private": false,
@@ -21,10 +20,7 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		".": "./static/index.ts",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/plot/static/Plot.svelte b/js/plot/shared/Plot.svelte
similarity index 100%
rename from js/plot/static/Plot.svelte
rename to js/plot/shared/Plot.svelte
diff --git a/js/plot/static/utils.ts b/js/plot/shared/utils.ts
similarity index 100%
rename from js/plot/static/utils.ts
rename to js/plot/shared/utils.ts
diff --git a/js/plot/static/index.ts b/js/plot/static/index.ts
deleted file mode 100644
index 74481ebb2763..000000000000
--- a/js/plot/static/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// @ts-ignore
-export { default } from "./StaticPlot.svelte";
diff --git a/js/preview/src/build.ts b/js/preview/src/build.ts
index 2b9d9067826f..85eb152aefab 100644
--- a/js/preview/src/build.ts
+++ b/js/preview/src/build.ts
@@ -2,10 +2,9 @@ import * as fs from "fs";
 import { join } from "path";
 import { build } from "vite";
 import { plugins, make_gradio_plugin } from "./plugins";
-import path from "path";
+
 import { examine_module } from "./index";
 
-import { patch } from "toml-patch";
 interface BuildOptions {
 	component_dir: string;
 	root_dir: string;
@@ -24,9 +23,16 @@ export async function make_build({
 			const template_dir = comp.template_dir;
 			const source_dir = comp.frontend_dir;
 
-			const entries = ["interactive", "example", "static"];
+			const pkg = JSON.parse(
+				fs.readFileSync(join(source_dir, "package.json"), "utf-8")
+			);
+
+			const exports: string[][] = [
+				["component", pkg.exports["."] as string],
+				["exmaple", pkg.exports["./example"] as string]
+			].filter(([_, path]) => !!path);
 
-			for (const entry of entries) {
+			for (const [entry, path] of exports) {
 				try {
 					const x = await build({
 						plugins: [
diff --git a/js/preview/src/dev.ts b/js/preview/src/dev.ts
index 6d0009943e14..254a7d011472 100644
--- a/js/preview/src/dev.ts
+++ b/js/preview/src/dev.ts
@@ -116,22 +116,23 @@ function generate_imports(component_dir: string, root: string): string {
 	});
 
 	const imports = component_entries.reduce((acc, component) => {
-		const x = {
-			interactive: to_posix(join(component.frontend_dir, "interactive")),
-			static: to_posix(join(component.frontend_dir, "static")),
-			example: to_posix(join(component.frontend_dir, "example"))
+		const pkg = JSON.parse(
+			fs.readFileSync(join(component.frontend_dir, "package.json"), "utf-8")
+		);
+
+		const exports: Record<string, string | undefined> = {
+			component: pkg.exports["."] as string,
+			exmaple: pkg.exports["./example"] as string
 		};
 
-		const interactive = fs.existsSync(x.interactive)
-			? `interactive: () => import("${x.interactive}"),\n`
-			: "";
-		const example = fs.existsSync(x.example)
-			? `example: () => import("${x.example}"),\n`
+		const example = exports.example
+			? `example: () => import("${to_posix(
+					join(component.frontend_dir, "example")
+			  )}"),\n`
 			: "";
 		return `${acc}"${component.component_class_id}": {
-			${interactive}
 			${example}
-			static: () => import("${x.static}")
+			component: () => import("${to_posix(component.frontend_dir)}")
 			},\n`;
 	}, "");
 
diff --git a/js/preview/test/newtext/frontend/static/StaticTextbox.svelte b/js/preview/test/newtext/frontend/static/StaticTextbox.svelte
index 0dd48cab946b..dfe490767010 100644
--- a/js/preview/test/newtext/frontend/static/StaticTextbox.svelte
+++ b/js/preview/test/newtext/frontend/static/StaticTextbox.svelte
@@ -2,7 +2,7 @@
 
 <script lang="ts">
 	import type { Gradio, SelectData } from "@gradio/utils";
-	import TextBox from "../shared";
+	import TextBox from ".";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
diff --git a/js/radio/example/Radio.svelte b/js/radio/Example.svelte
similarity index 100%
rename from js/radio/example/Radio.svelte
rename to js/radio/Example.svelte
diff --git a/js/radio/interactive/InteractiveRadio.svelte b/js/radio/Index.svelte
similarity index 91%
rename from js/radio/interactive/InteractiveRadio.svelte
rename to js/radio/Index.svelte
index 2e249cf78a9f..7aa926d17f56 100644
--- a/js/radio/interactive/InteractiveRadio.svelte
+++ b/js/radio/Index.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Gradio, SelectData } from "@gradio/utils";
-	import Radio from "../shared";
+	import Radio from "./shared/Radio.svelte";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
@@ -23,6 +23,7 @@
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
+	export let mode: "static" | "interactive";
 </script>
 
 <Block
@@ -48,6 +49,7 @@
 		{elem_id}
 		{show_label}
 		{choices}
+		disabled={mode === "static"}
 		on:change={() => gradio.dispatch("change")}
 		on:input={() => gradio.dispatch("input")}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
diff --git a/js/radio/example/index.ts b/js/radio/example/index.ts
deleted file mode 100644
index ec8c3b4df2b2..000000000000
--- a/js/radio/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Radio.svelte";
diff --git a/js/radio/interactive/index.ts b/js/radio/interactive/index.ts
deleted file mode 100644
index 8ece4bbd081f..000000000000
--- a/js/radio/interactive/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InteractiveRadio.svelte";
diff --git a/js/radio/package.json b/js/radio/package.json
index b2f5a65f3abd..5a23c7ca38bd 100644
--- a/js/radio/package.json
+++ b/js/radio/package.json
@@ -3,20 +3,18 @@
 	"version": "0.3.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./example": "./Example.svelte",
+		"./package.json": "./package.json"
 	},
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
 		"@gradio/statustracker": "workspace:^",
 		"@gradio/utils": "workspace:^"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/radio/shared/index.ts b/js/radio/shared/index.ts
deleted file mode 100644
index ec8c3b4df2b2..000000000000
--- a/js/radio/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Radio.svelte";
diff --git a/js/radio/static/Radio.svelte b/js/radio/static/Radio.svelte
deleted file mode 100644
index 0bbf7d4026f6..000000000000
--- a/js/radio/static/Radio.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts">
-	import type { Gradio, SelectData } from "@gradio/utils";
-	import Radio from "../shared";
-	import { Block } from "@gradio/atoms";
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	export let gradio: Gradio<{
-		change: never;
-		select: SelectData;
-		input: never;
-	}>;
-	export let label = gradio.i18n("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 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>
-
-<Block
-	{visible}
-	type="fieldset"
-	{elem_id}
-	{elem_classes}
-	{container}
-	{scale}
-	{min_width}
->
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-	/>
-
-	<Radio
-		bind:value
-		bind:value_is_output
-		{label}
-		{info}
-		{elem_id}
-		{show_label}
-		{choices}
-		disabled
-		on:change={() => gradio.dispatch("change")}
-		on:input={() => gradio.dispatch("input")}
-		on:select={(e) => gradio.dispatch("select", e.detail)}
-	/>
-</Block>
diff --git a/js/radio/static/index.ts b/js/radio/static/index.ts
deleted file mode 100644
index ec8c3b4df2b2..000000000000
--- a/js/radio/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Radio.svelte";
diff --git a/js/row/static/StaticRow.svelte b/js/row/Index.svelte
similarity index 100%
rename from js/row/static/StaticRow.svelte
rename to js/row/Index.svelte
diff --git a/js/row/Row.stories.svelte b/js/row/Row.stories.svelte
index 599a51e4489e..60b0645425d7 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/interactive";
+	import Row from "./Index.svelte";
+	import Image from "@gradio/image";
 </script>
 
 <Meta title="Layout Elements/Row" component={Row} />
diff --git a/js/row/package.json b/js/row/package.json
index 4f8c94c53fc8..7db5d9cefb1a 100644
--- a/js/row/package.json
+++ b/js/row/package.json
@@ -3,19 +3,15 @@
 	"version": "0.0.2-beta.0",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./static/index.ts",
 	"author": "",
 	"license": "ISC",
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./static/index.ts",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
 	},
 	"devDependencies": {
 		"@gradio/image": "workspace:^"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/row/static/index.ts b/js/row/static/index.ts
deleted file mode 100644
index dbfe1337b527..000000000000
--- a/js/row/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticRow.svelte";
diff --git a/js/slider/example/Slider.svelte b/js/slider/Example.svelte
similarity index 100%
rename from js/slider/example/Slider.svelte
rename to js/slider/Example.svelte
diff --git a/js/slider/static/StaticSlider.svelte b/js/slider/Index.svelte
similarity index 91%
rename from js/slider/static/StaticSlider.svelte
rename to js/slider/Index.svelte
index d5de8a404d5b..4b41102074e5 100644
--- a/js/slider/static/StaticSlider.svelte
+++ b/js/slider/Index.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Gradio, ShareData } from "@gradio/utils";
-	import Slider from "../shared";
+	import Slider from "./shared/Range.svelte";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
@@ -23,6 +23,7 @@
 	export let maximum: number;
 	export let step: number;
 	export let show_label: boolean;
+	export let mode: "static" | "interactive";
 
 	export let loading_status: LoadingStatus;
 	export let value_is_output = false;
@@ -44,7 +45,7 @@
 		{minimum}
 		{maximum}
 		{step}
-		disabled
+		disabled={mode === "static"}
 		on:input={() => gradio.dispatch("input")}
 		on:change={() => gradio.dispatch("change")}
 		on:release={(e) => gradio.dispatch("release", e.detail)}
diff --git a/js/slider/Slider.stories.svelte b/js/slider/Slider.stories.svelte
index 48d0c5755cbb..37bbd5f713af 100644
--- a/js/slider/Slider.stories.svelte
+++ b/js/slider/Slider.stories.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-	import Slider from "./interactive";
+	import Slider from "./Index.svelte";
 </script>
 
 <Meta title="Components/Slider" component={Slider} />
diff --git a/js/slider/example/index.ts b/js/slider/example/index.ts
deleted file mode 100644
index 9a386eefa19e..000000000000
--- a/js/slider/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Slider.svelte";
diff --git a/js/slider/interactive/InteractiveSlider.svelte b/js/slider/interactive/InteractiveSlider.svelte
deleted file mode 100644
index 3d47d85e79b0..000000000000
--- a/js/slider/interactive/InteractiveSlider.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script lang="ts">
-	import type { Gradio } from "@gradio/utils";
-	import Slider from "../shared";
-	import { Block } from "@gradio/atoms";
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	export let gradio: Gradio<{
-		change: never;
-		input: never;
-		release: number;
-	}>;
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value = 0;
-	export let label = gradio.i18n("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 show_label: boolean;
-
-	export let loading_status: LoadingStatus;
-	export let value_is_output = false;
-</script>
-
-<Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-	/>
-
-	<Slider
-		bind:value
-		bind:value_is_output
-		{label}
-		{info}
-		{show_label}
-		{minimum}
-		{maximum}
-		{step}
-		on:input={() => gradio.dispatch("input")}
-		on:change={() => gradio.dispatch("change")}
-		on:release={(e) => gradio.dispatch("release", e.detail)}
-	/>
-</Block>
diff --git a/js/slider/interactive/index.ts b/js/slider/interactive/index.ts
deleted file mode 100644
index 6e3518ddbac6..000000000000
--- a/js/slider/interactive/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InteractiveSlider.svelte";
diff --git a/js/slider/package.json b/js/slider/package.json
index 51af405be845..70e29539a2fb 100644
--- a/js/slider/package.json
+++ b/js/slider/package.json
@@ -3,20 +3,18 @@
 	"version": "0.2.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./example": "./Example.svelte",
+		"./package.json": "./package.json"
 	},
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
 		"@gradio/statustracker": "workspace:^",
 		"@gradio/utils": "workspace:^"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/slider/shared/index.ts b/js/slider/shared/index.ts
deleted file mode 100644
index d4c2639d6513..000000000000
--- a/js/slider/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Range.svelte";
diff --git a/js/slider/static/index.ts b/js/slider/static/index.ts
deleted file mode 100644
index e46bac6c976c..000000000000
--- a/js/slider/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticSlider.svelte";
diff --git a/js/image/src/Image.svelte b/js/state/Index.svelte
similarity index 100%
rename from js/image/src/Image.svelte
rename to js/state/Index.svelte
diff --git a/js/state/index.svelte b/js/state/index.svelte
deleted file mode 100644
index e69de29bb2d1..000000000000
diff --git a/js/state/package.json b/js/state/package.json
index 7a35be57a47d..845206c79014 100644
--- a/js/state/package.json
+++ b/js/state/package.json
@@ -3,16 +3,12 @@
 	"version": "0.0.2-beta.0",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./index.svelte",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/state/static/index.svelte b/js/state/static/index.svelte
deleted file mode 100644
index e69de29bb2d1..000000000000
diff --git a/js/state/static/index.ts b/js/state/static/index.ts
deleted file mode 100644
index e8f2e8f605d5..000000000000
--- a/js/state/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./index.svelte";
diff --git a/js/tabitem/static/StaticTabItem.svelte b/js/tabitem/Index.svelte
similarity index 89%
rename from js/tabitem/static/StaticTabItem.svelte
rename to js/tabitem/Index.svelte
index ba52196b4608..bae4cdeed6b3 100644
--- a/js/tabitem/static/StaticTabItem.svelte
+++ b/js/tabitem/Index.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Gradio, SelectData } from "@gradio/utils";
-	import TabItem from "./TabItem.svelte";
+	import TabItem from "./shared/TabItem.svelte";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
diff --git a/js/tabitem/package.json b/js/tabitem/package.json
index 2c879082b837..18ca44b04a5c 100644
--- a/js/tabitem/package.json
+++ b/js/tabitem/package.json
@@ -3,21 +3,17 @@
 	"version": "0.0.5-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./static/index.ts",
 	"author": "",
 	"license": "ISC",
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./static/index.ts",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
 	},
 	"dependencies": {
 		"@gradio/column": "workspace:^",
 		"@gradio/tabs": "workspace:^",
 		"@gradio/utils": "workspace:^"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/tabitem/static/TabItem.svelte b/js/tabitem/shared/TabItem.svelte
similarity index 96%
rename from js/tabitem/static/TabItem.svelte
rename to js/tabitem/shared/TabItem.svelte
index 0451cd688e4d..95922751fc8f 100644
--- a/js/tabitem/static/TabItem.svelte
+++ b/js/tabitem/shared/TabItem.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext, onMount, createEventDispatcher, tick } from "svelte";
-	import { TABS } from "@gradio/tabs/static";
+	import { TABS } from "@gradio/tabs";
 	import Column from "@gradio/column";
 	import type { SelectData } from "@gradio/utils";
 
diff --git a/js/tabitem/static/index.ts b/js/tabitem/static/index.ts
deleted file mode 100644
index 385543cdae20..000000000000
--- a/js/tabitem/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticTabItem.svelte";
diff --git a/js/tabs/static/StaticTabs.svelte b/js/tabs/Index.svelte
similarity index 81%
rename from js/tabs/static/StaticTabs.svelte
rename to js/tabs/Index.svelte
index 383f0913a0ef..a51263abcd9b 100644
--- a/js/tabs/static/StaticTabs.svelte
+++ b/js/tabs/Index.svelte
@@ -1,7 +1,11 @@
+<script context="module" lang="ts">
+	export { TABS } from "./shared/Tabs.svelte";
+</script>
+
 <script lang="ts">
 	import type { Gradio, SelectData } from "@gradio/utils";
 	import { createEventDispatcher } from "svelte";
-	import Tabs from "./Tabs.svelte";
+	import Tabs from "./shared/Tabs.svelte";
 
 	const dispatch = createEventDispatcher();
 
diff --git a/js/tabs/package.json b/js/tabs/package.json
index 6217a75d81eb..d42e1f5dea38 100644
--- a/js/tabs/package.json
+++ b/js/tabs/package.json
@@ -3,19 +3,15 @@
 	"version": "0.0.6-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./static/index.ts",
 	"author": "",
 	"license": "ISC",
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./static/index.ts",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
 	},
 	"dependencies": {
 		"@gradio/utils": "workspace:^"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/tabs/static/Tabs.svelte b/js/tabs/shared/Tabs.svelte
similarity index 100%
rename from js/tabs/static/Tabs.svelte
rename to js/tabs/shared/Tabs.svelte
diff --git a/js/tabs/static/index.ts b/js/tabs/static/index.ts
deleted file mode 100644
index 7e9b6b01f9d0..000000000000
--- a/js/tabs/static/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./StaticTabs.svelte";
-export { TABS } from "./Tabs.svelte";
diff --git a/js/textbox/example/Textbox.svelte b/js/textbox/Example.svelte
similarity index 100%
rename from js/textbox/example/Textbox.svelte
rename to js/textbox/Example.svelte
diff --git a/js/textbox/static/StaticTextbox.svelte b/js/textbox/Index.svelte
similarity index 94%
rename from js/textbox/static/StaticTextbox.svelte
rename to js/textbox/Index.svelte
index e00adb815113..ac6723953439 100644
--- a/js/textbox/static/StaticTextbox.svelte
+++ b/js/textbox/Index.svelte
@@ -2,7 +2,7 @@
 
 <script lang="ts">
 	import type { Gradio, SelectData } from "@gradio/utils";
-	import TextBox from "../shared";
+	import TextBox from "./shared/Textbox.svelte";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
@@ -36,6 +36,7 @@
 	export let text_align: "left" | "right" | undefined = undefined;
 	export let autofocus = false;
 	export let autoscroll = true;
+	export let mode: "static" | "interactive";
 </script>
 
 <Block
@@ -77,6 +78,6 @@
 		on:blur={() => gradio.dispatch("blur")}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
 		on:focus={() => gradio.dispatch("focus")}
-		disabled
+		disabled={mode === "static"}
 	/>
 </Block>
diff --git a/js/textbox/Textbox.stories.svelte b/js/textbox/Textbox.stories.svelte
index 8d5714a95aa6..406e8828e4c5 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 "./interactive";
+	import Textbox from "./Index.svelte";
 </script>
 
 <Meta
diff --git a/js/textbox/example/index.ts b/js/textbox/example/index.ts
deleted file mode 100644
index 42397adf0d93..000000000000
--- a/js/textbox/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Textbox.svelte";
diff --git a/js/textbox/interactive/InteractiveTextbox.svelte b/js/textbox/interactive/InteractiveTextbox.svelte
deleted file mode 100644
index 296583811d60..000000000000
--- a/js/textbox/interactive/InteractiveTextbox.svelte
+++ /dev/null
@@ -1,92 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import type { Gradio, SelectData } from "@gradio/utils";
-	import { createEventDispatcher } from "svelte";
-
-	import TextBox from "../shared";
-	import { Block } from "@gradio/atoms";
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	const dispatch = createEventDispatcher<{
-		change: string;
-		submit: never;
-		blur: never;
-		select: SelectData;
-		input: never;
-		focus: never;
-	}>();
-
-	export let gradio: Gradio<{
-		change: string;
-		submit: never;
-		blur: never;
-		select: SelectData;
-		input: never;
-		focus: never;
-	}> = { dispatch, i18n: (s: string) => s };
-
-	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 value_is_output = false;
-	export let rtl = false;
-	export let text_align: "left" | "right" | undefined = undefined;
-	export let autofocus = false;
-	export let autoscroll = true;
-</script>
-
-<Block
-	{visible}
-	{elem_id}
-	{elem_classes}
-	{scale}
-	{min_width}
-	allow_overflow={false}
-	padding={container}
->
-	{#if loading_status}
-		<StatusTracker
-			autoscroll={gradio.autoscroll}
-			i18n={gradio.i18n}
-			{...loading_status}
-		/>
-	{/if}
-
-	<TextBox
-		bind:value
-		bind:value_is_output
-		{label}
-		{info}
-		{show_label}
-		{lines}
-		{type}
-		{rtl}
-		{text_align}
-		max_lines={!max_lines ? lines + 1 : max_lines}
-		{placeholder}
-		{show_copy_button}
-		{autofocus}
-		{container}
-		{autoscroll}
-		on:change={() => gradio.dispatch("change", value)}
-		on:input={() => gradio.dispatch("input")}
-		on:submit={() => gradio.dispatch("submit")}
-		on:blur={() => gradio.dispatch("blur")}
-		on:select={(e) => gradio.dispatch("select", e.detail)}
-		on:focus={() => gradio.dispatch("focus")}
-	/>
-</Block>
diff --git a/js/textbox/interactive/index.ts b/js/textbox/interactive/index.ts
deleted file mode 100644
index 3c02cf172f41..000000000000
--- a/js/textbox/interactive/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./InteractiveTextbox.svelte";
-export { default as BaseTextbox } from "../shared/Textbox.svelte";
diff --git a/js/textbox/package.json b/js/textbox/package.json
index 659728d48f69..63ac5e95e8c4 100644
--- a/js/textbox/package.json
+++ b/js/textbox/package.json
@@ -3,16 +3,14 @@
 	"version": "0.4.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./example": "./Example.svelte",
+		"./package.json": "./package.json"
 	},
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
@@ -20,4 +18,4 @@
 		"@gradio/statustracker": "workspace:^",
 		"@gradio/utils": "workspace:^"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/textbox/shared/index.ts b/js/textbox/shared/index.ts
deleted file mode 100644
index 42397adf0d93..000000000000
--- a/js/textbox/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Textbox.svelte";
diff --git a/js/textbox/static/index.ts b/js/textbox/static/index.ts
deleted file mode 100644
index 52f5da4ebc99..000000000000
--- a/js/textbox/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticTextbox.svelte";
diff --git a/js/uploadbutton/static/StaticUploadButton.svelte b/js/uploadbutton/Index.svelte
similarity index 93%
rename from js/uploadbutton/static/StaticUploadButton.svelte
rename to js/uploadbutton/Index.svelte
index 23ef4bda59b7..f0ec05ee60ef 100644
--- a/js/uploadbutton/static/StaticUploadButton.svelte
+++ b/js/uploadbutton/Index.svelte
@@ -2,7 +2,7 @@
 	import type { Gradio } from "@gradio/utils";
 	import { tick, getContext } from "svelte";
 	import type { FileData } from "@gradio/upload";
-	import UploadButton from "../shared";
+	import UploadButton from "./shared/UploadButton.svelte";
 	import { upload_files as default_upload_files } from "@gradio/client";
 	import { blobToBase64 } from "@gradio/upload";
 
@@ -23,6 +23,7 @@
 		upload: FileData;
 		click: never;
 	}>;
+	export let mode: "static" | "interactive";
 
 	const upload_files =
 		getContext<typeof default_upload_files>("upload_files") ??
@@ -71,7 +72,7 @@
 	{size}
 	{scale}
 	{min_width}
-	disabled
+	disabled={mode === "static"}
 	{variant}
 	{label}
 	on:click={() => gradio.dispatch("click")}
diff --git a/js/uploadbutton/interactive/InteractiveUploadButton.svelte b/js/uploadbutton/interactive/InteractiveUploadButton.svelte
deleted file mode 100644
index 913d2e4aa9b9..000000000000
--- a/js/uploadbutton/interactive/InteractiveUploadButton.svelte
+++ /dev/null
@@ -1,80 +0,0 @@
-<script lang="ts">
-	import type { Gradio } from "@gradio/utils";
-	import { getContext, tick } from "svelte";
-	import type { FileData } from "@gradio/upload";
-	import UploadButton from "../shared";
-	import { upload_files as default_upload_files } from "@gradio/client";
-	import { blobToBase64 } 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 variant: "primary" | "secondary" | "stop" = "secondary";
-	export let gradio: Gradio<{
-		change: FileData | null;
-		upload: FileData;
-		click: never;
-	}>;
-
-	const upload_files =
-		getContext<typeof default_upload_files>("upload_files") ??
-		default_upload_files;
-
-	async function handle_upload({
-		detail
-	}: CustomEvent<FileData>): Promise<void> {
-		value = detail;
-		await tick();
-		let files = (Array.isArray(detail) ? detail : [detail]).map(
-			(file_data) => file_data.blob!
-		);
-
-		upload_files(root, files).then(async (response) => {
-			if (response.error) {
-				(Array.isArray(detail) ? detail : [detail]).forEach(
-					async (file_data, i) => {
-						file_data.data = await blobToBase64(file_data.blob!);
-						file_data.blob = undefined;
-					}
-				);
-			} else {
-				(Array.isArray(detail) ? detail : [detail]).forEach((file_data, i) => {
-					if (response.files) {
-						file_data.orig_name = file_data.name;
-						file_data.name = response.files[i];
-						file_data.is_file = true;
-						file_data.blob = undefined;
-					}
-				});
-			}
-
-			gradio.dispatch("change", value);
-			gradio.dispatch("upload", detail);
-		});
-	}
-</script>
-
-<UploadButton
-	{elem_id}
-	{elem_classes}
-	{visible}
-	{file_count}
-	{file_types}
-	{size}
-	{scale}
-	{min_width}
-	{variant}
-	{label}
-	on:click={() => gradio.dispatch("click")}
-	on:load={handle_upload}
->
-	{gradio.i18n(label)}
-</UploadButton>
diff --git a/js/uploadbutton/interactive/index.ts b/js/uploadbutton/interactive/index.ts
deleted file mode 100644
index afcb286dae76..000000000000
--- a/js/uploadbutton/interactive/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InteractiveUploadButton.svelte";
diff --git a/js/uploadbutton/package.json b/js/uploadbutton/package.json
index 1d9a0ac90b73..848933f5aa4f 100644
--- a/js/uploadbutton/package.json
+++ b/js/uploadbutton/package.json
@@ -3,16 +3,13 @@
 	"version": "0.1.0-beta.4",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
 	},
 	"dependencies": {
 		"@gradio/button": "workspace:^",
@@ -20,4 +17,4 @@
 		"@gradio/upload": "workspace:^",
 		"@gradio/utils": "workspace:^"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/uploadbutton/shared/UploadButton.svelte b/js/uploadbutton/shared/UploadButton.svelte
index b8f2074c8687..73411bd94129 100644
--- a/js/uploadbutton/shared/UploadButton.svelte
+++ b/js/uploadbutton/shared/UploadButton.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BaseButton } from "@gradio/button/static";
+	import { BaseButton } from "@gradio/button";
 	import { createEventDispatcher } from "svelte";
 	import type { FileData } from "@gradio/upload";
 
diff --git a/js/uploadbutton/shared/index.ts b/js/uploadbutton/shared/index.ts
deleted file mode 100644
index e614821f9b10..000000000000
--- a/js/uploadbutton/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./UploadButton.svelte";
diff --git a/js/uploadbutton/static/index.ts b/js/uploadbutton/static/index.ts
deleted file mode 100644
index d203f33ca3ca..000000000000
--- a/js/uploadbutton/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticUploadButton.svelte";
diff --git a/js/video/example/Video.svelte b/js/video/Example.svelte
similarity index 93%
rename from js/video/example/Video.svelte
rename to js/video/Example.svelte
index b1faec5f1bb9..e04bbebce86a 100644
--- a/js/video/example/Video.svelte
+++ b/js/video/Example.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { playable, Video } from "../shared";
+	import Video from "./shared/Video.svelte";
+	import { playable } from "./shared/utils";
 
 	export let type: "gallery" | "table";
 	export let selected = false;
diff --git a/js/video/Index.svelte b/js/video/Index.svelte
new file mode 100644
index 000000000000..7cdb5547d9cc
--- /dev/null
+++ b/js/video/Index.svelte
@@ -0,0 +1,173 @@
+<svelte:options accessors={true} />
+
+<script lang="ts">
+	import type { Gradio, ShareData } from "@gradio/utils";
+	import type { FileData } from "@gradio/upload";
+	import { normalise_file } from "@gradio/upload";
+	import { Block, UploadText } from "@gradio/atoms";
+	import StaticVideo from "./shared/VideoPreview.svelte";
+	import Video from "./shared/InteractiveVideo.svelte";
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { LoadingStatus } from "@gradio/statustracker";
+
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let value: { video: FileData; subtitles: FileData | null } | null =
+		null;
+	let old_value: { video: FileData; subtitles: 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 container = false;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let autoplay = false;
+	export let show_share_button = true;
+	export let gradio: Gradio<{
+		change: never;
+		clear: never;
+		play: never;
+		pause: never;
+		upload: never;
+		stop: never;
+		end: never;
+		start_recording: never;
+		stop_recording: never;
+		share: ShareData;
+		error: string;
+	}>;
+	export let mode: "static" | "interactive";
+	export let mirror_webcam: boolean;
+	export let include_audio: boolean;
+
+	let _video: FileData | null = null;
+	let _subtitle: FileData | null = null;
+
+	$: {
+		if (value != null) {
+			_video = normalise_file(value.video, root, root_url);
+			_subtitle = normalise_file(value.subtitles, root, root_url);
+		} else {
+			_video = null;
+			_subtitle = null;
+		}
+	}
+
+	let dragging = false;
+
+	$: {
+		if (JSON.stringify(value) !== JSON.stringify(old_value)) {
+			old_value = value;
+			gradio.dispatch("change");
+		}
+	}
+
+	function handle_change({ detail }: CustomEvent<FileData | null>): void {
+		if (detail != null) {
+			value = { video: detail, subtitles: null } as {
+				video: FileData;
+				subtitles: FileData | null;
+			} | null;
+		} else {
+			value = null;
+		}
+	}
+</script>
+
+{#if mode === "static"}
+	<Block
+		{visible}
+		variant={value === null && source === "upload" ? "dashed" : "solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		{elem_id}
+		{elem_classes}
+		{height}
+		{width}
+		{container}
+		{scale}
+		{min_width}
+		allow_overflow={false}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+		/>
+
+		<StaticVideo
+			value={_video}
+			subtitle={_subtitle}
+			{label}
+			{show_label}
+			{autoplay}
+			{show_share_button}
+			on:play={() => gradio.dispatch("play")}
+			on:pause={() => gradio.dispatch("pause")}
+			on:stop={() => gradio.dispatch("stop")}
+			on:end={() => gradio.dispatch("end")}
+			on:share={({ detail }) => gradio.dispatch("share", detail)}
+			on:error={({ detail }) => gradio.dispatch("error", detail)}
+			i18n={gradio.i18n}
+		/>
+	</Block>
+{:else}
+	<Block
+		{visible}
+		variant={value === null && source === "upload" ? "dashed" : "solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		{elem_id}
+		{elem_classes}
+		{height}
+		{width}
+		{container}
+		{scale}
+		{min_width}
+		allow_overflow={false}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+		/>
+
+		<Video
+			value={_video}
+			subtitle={_subtitle}
+			on:change={handle_change}
+			on:drag={({ detail }) => (dragging = detail)}
+			on:error={({ detail }) => {
+				loading_status = loading_status || {};
+				loading_status.status = "error";
+				loading_status.message = detail;
+			}}
+			{label}
+			{show_label}
+			{source}
+			{mirror_webcam}
+			{include_audio}
+			{autoplay}
+			{root}
+			on:clear={() => gradio.dispatch("clear")}
+			on:play={() => gradio.dispatch("play")}
+			on:pause={() => gradio.dispatch("pause")}
+			on:upload={() => gradio.dispatch("upload")}
+			on:stop={() => gradio.dispatch("stop")}
+			on:end={() => gradio.dispatch("end")}
+			on:start_recording={() => gradio.dispatch("start_recording")}
+			on:stop_recording={() => gradio.dispatch("stop_recording")}
+			i18n={gradio.i18n}
+		>
+			<UploadText i18n={gradio.i18n} type="video" />
+		</Video>
+	</Block>
+{/if}
diff --git a/js/video/Video.stories.svelte b/js/video/Video.stories.svelte
index 425456e21c64..6dde8c20306c 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 "./interactive";
+	import Video from "./Index.svelte";
 </script>
 
 <Meta
diff --git a/js/video/example/index.ts b/js/video/example/index.ts
deleted file mode 100644
index 851cc0482306..000000000000
--- a/js/video/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Video.svelte";
diff --git a/js/video/interactive/InteractiveVideo.svelte b/js/video/interactive/InteractiveVideo.svelte
deleted file mode 100644
index 3aad3b53c5c4..000000000000
--- a/js/video/interactive/InteractiveVideo.svelte
+++ /dev/null
@@ -1,130 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import type { Gradio } from "@gradio/utils";
-	import type { FileData } from "@gradio/upload";
-	import { normalise_file } from "@gradio/upload";
-	import { Block } from "@gradio/atoms";
-	import Video from "./Video.svelte";
-	import { UploadText } from "@gradio/atoms";
-
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: { video: FileData; subtitles: FileData | null } | null =
-		null;
-	let old_value: { video: FileData; subtitles: 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 autoplay = false;
-	export let gradio: Gradio<{
-		change: never;
-		clear: never;
-		play: never;
-		pause: never;
-		upload: never;
-		stop: never;
-		end: never;
-		start_recording: never;
-		stop_recording: never;
-	}>;
-
-	let _video: FileData | null = null;
-	let _subtitle: FileData | null = null;
-
-	$: {
-		if (value != null) {
-			_video = normalise_file(value.video, root, root_url);
-			_subtitle = normalise_file(value.subtitles, root, root_url);
-		} else {
-			_video = null;
-			_subtitle = null;
-		}
-	}
-
-	let dragging = false;
-
-	function handle_change({ detail }: CustomEvent<FileData | null>): void {
-		if (detail != null) {
-			value = { video: detail, subtitles: null } as {
-				video: FileData;
-				subtitles: FileData | null;
-			} | null;
-		} else {
-			value = null;
-		}
-	}
-
-	$: {
-		if (JSON.stringify(value) !== JSON.stringify(old_value)) {
-			old_value = value;
-			gradio.dispatch("change");
-		}
-	}
-</script>
-
-<Block
-	{visible}
-	variant={value === null && source === "upload" ? "dashed" : "solid"}
-	border_mode={dragging ? "focus" : "base"}
-	padding={false}
-	{elem_id}
-	{elem_classes}
-	{height}
-	{width}
-	{container}
-	{scale}
-	{min_width}
-	allow_overflow={false}
->
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-	/>
-
-	<Video
-		value={_video}
-		subtitle={_subtitle}
-		on:change={handle_change}
-		on:drag={({ detail }) => (dragging = detail)}
-		on:error={({ detail }) => {
-			loading_status = loading_status || {};
-			loading_status.status = "error";
-			loading_status.message = detail;
-		}}
-		{label}
-		{show_label}
-		{source}
-		{mirror_webcam}
-		{include_audio}
-		{autoplay}
-		{root}
-		on:clear={() => gradio.dispatch("clear")}
-		on:play={() => gradio.dispatch("play")}
-		on:pause={() => gradio.dispatch("pause")}
-		on:upload={() => gradio.dispatch("upload")}
-		on:stop={() => gradio.dispatch("stop")}
-		on:end={() => gradio.dispatch("end")}
-		on:start_recording={() => gradio.dispatch("start_recording")}
-		on:stop_recording={() => gradio.dispatch("stop_recording")}
-		i18n={gradio.i18n}
-	>
-		<UploadText i18n={gradio.i18n} type="video" />
-	</Video>
-</Block>
diff --git a/js/video/interactive/index.ts b/js/video/interactive/index.ts
deleted file mode 100644
index 681e7b31eb43..000000000000
--- a/js/video/interactive/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InteractiveVideo.svelte";
diff --git a/js/video/package.json b/js/video/package.json
index 4d49917924f3..99d7e7761411 100644
--- a/js/video/package.json
+++ b/js/video/package.json
@@ -3,7 +3,6 @@
 	"version": "0.1.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": false,
@@ -18,9 +17,8 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./example": "./Example.svelte",
+		"./package.json": "./package.json"
 	}
-}
+}
\ No newline at end of file
diff --git a/js/video/interactive/Video.svelte b/js/video/shared/InteractiveVideo.svelte
similarity index 93%
rename from js/video/interactive/Video.svelte
rename to js/video/shared/InteractiveVideo.svelte
index 3c29c9dd9d15..c82b1d376774 100644
--- a/js/video/interactive/Video.svelte
+++ b/js/video/shared/InteractiveVideo.svelte
@@ -3,11 +3,11 @@
 	import { Upload, ModifyUpload } from "@gradio/upload";
 	import type { FileData } from "@gradio/upload";
 	import { BlockLabel } from "@gradio/atoms";
-	import { Webcam } from "@gradio/image/interactive";
+	import { Webcam } from "@gradio/image";
 	import { Video } from "@gradio/icons";
 
-	import { prettyBytes, playable } from "../shared/utils";
-	import Player from "../shared/Player.svelte";
+	import { prettyBytes, playable } from "./utils";
+	import Player from "./Player.svelte";
 	import type { I18nFormatter } from "@gradio/utils";
 
 	export let value: FileData | null = null;
diff --git a/js/video/shared/Player.svelte b/js/video/shared/Player.svelte
index 5c1517eb3dfb..ff420e4a744e 100644
--- a/js/video/shared/Player.svelte
+++ b/js/video/shared/Player.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 	import { Play, Pause, Maximise, Undo } from "@gradio/icons";
-	import Video from "./Video.svelte";
+	import Video from "./StaticVideo.svelte";
 
 	export let src: string;
 	export let subtitle: string | null = null;
diff --git a/js/video/shared/StaticVideo.svelte b/js/video/shared/StaticVideo.svelte
new file mode 100644
index 000000000000..b6e294c0cf7a
--- /dev/null
+++ b/js/video/shared/StaticVideo.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { HTMLVideoAttributes } from "svelte/elements";
+	import { createEventDispatcher } from "svelte";
+	import { loaded } from "./utils";
+
+	import { resolve_wasm_src } from "@gradio/wasm/svelte";
+
+	export let src: HTMLVideoAttributes["src"] = undefined;
+
+	export let muted: HTMLVideoAttributes["muted"] = undefined;
+	export let playsinline: HTMLVideoAttributes["playsinline"] = undefined;
+	export let preload: HTMLVideoAttributes["preload"] = undefined;
+	export let autoplay: HTMLVideoAttributes["autoplay"] = undefined;
+	export let controls: HTMLVideoAttributes["controls"] = undefined;
+
+	export let currentTime: number | undefined = undefined;
+	export let duration: number | undefined = undefined;
+	export let paused: boolean | undefined = undefined;
+
+	export let node: HTMLVideoElement | undefined = undefined;
+
+	const dispatch = createEventDispatcher();
+</script>
+
+{#await resolve_wasm_src(src) then resolved_src}
+	<!--
+	The spread operator with `$$props` or `$$restProps` can't be used here
+	to pass props from the parent component to the <video> element
+	because of its unexpected behavior: https://github.com/sveltejs/svelte/issues/7404
+	For example, if we add {...$$props} or {...$$restProps}, the boolean props aside it like `controls` will be compiled as string "true" or "false" on the actual DOM.
+	Then, even when `controls` is false, the compiled DOM would be `<video controls="false">` which is equivalent to `<video controls>` since the string "false" is even truthy.
+-->
+	<video
+		src={resolved_src}
+		{muted}
+		{playsinline}
+		{preload}
+		{autoplay}
+		{controls}
+		on:loadeddata={dispatch.bind(null, "loadeddata")}
+		on:click={dispatch.bind(null, "click")}
+		on:play={dispatch.bind(null, "play")}
+		on:pause={dispatch.bind(null, "pause")}
+		on:ended={dispatch.bind(null, "ended")}
+		on:mouseover={dispatch.bind(null, "mouseover")}
+		on:mouseout={dispatch.bind(null, "mouseout")}
+		on:focus={dispatch.bind(null, "focus")}
+		on:blur={dispatch.bind(null, "blur")}
+		bind:currentTime
+		bind:duration
+		bind:paused
+		bind:this={node}
+		use:loaded={{ autoplay: autoplay ?? false }}
+		data-testid={$$props["data-testid"]}
+	>
+		<slot />
+	</video>
+{:catch error}
+	<p style="color: red;">{error.message}</p>
+{/await}
+
+<style>
+	video {
+		position: inherit;
+		background-color: black;
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: contain;
+	}
+</style>
diff --git a/js/video/static/VideoPreview.svelte b/js/video/shared/VideoPreview.svelte
similarity index 98%
rename from js/video/static/VideoPreview.svelte
rename to js/video/shared/VideoPreview.svelte
index a2cbe4f1ce8d..7d99c5932294 100644
--- a/js/video/static/VideoPreview.svelte
+++ b/js/video/shared/VideoPreview.svelte
@@ -5,7 +5,7 @@
 	import { Video, Download } from "@gradio/icons";
 	import { uploadToHuggingFace } from "@gradio/utils";
 
-	import { Player } from "../shared";
+	import Player from "./Player.svelte";
 	import type { I18nFormatter } from "js/app/src/gradio_helper";
 
 	export let value: FileData | null = null;
diff --git a/js/video/shared/index.ts b/js/video/shared/index.ts
deleted file mode 100644
index afa160191705..000000000000
--- a/js/video/shared/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./utils";
-export { default as Player } from "./Player.svelte";
-export { default as Video } from "./Video.svelte";
diff --git a/js/video/static/StaticVideo.svelte b/js/video/static/StaticVideo.svelte
deleted file mode 100644
index 1c0a30972eda..000000000000
--- a/js/video/static/StaticVideo.svelte
+++ /dev/null
@@ -1,106 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import type { Gradio, ShareData } from "@gradio/utils";
-	import type { FileData } from "@gradio/upload";
-	import { normalise_file } from "@gradio/upload";
-	import { Block } from "@gradio/atoms";
-	import StaticVideo from "./VideoPreview.svelte";
-
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: { video: FileData; subtitles: FileData | null } | null =
-		null;
-	let old_value: { video: FileData; subtitles: 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 container = false;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let autoplay = false;
-	export let show_share_button = true;
-	export let gradio: Gradio<{
-		change: never;
-		clear: never;
-		play: never;
-		pause: never;
-		upload: never;
-		stop: never;
-		end: never;
-		start_recording: never;
-		stop_recording: never;
-		share: ShareData;
-		error: string;
-	}>;
-
-	let _video: FileData | null = null;
-	let _subtitle: FileData | null = null;
-
-	$: {
-		if (value != null) {
-			_video = normalise_file(value.video, root, root_url);
-			_subtitle = normalise_file(value.subtitles, root, root_url);
-		} else {
-			_video = null;
-			_subtitle = null;
-		}
-	}
-
-	let dragging = false;
-
-	$: {
-		if (JSON.stringify(value) !== JSON.stringify(old_value)) {
-			old_value = value;
-			gradio.dispatch("change");
-		}
-	}
-</script>
-
-<Block
-	{visible}
-	variant={value === null && source === "upload" ? "dashed" : "solid"}
-	border_mode={dragging ? "focus" : "base"}
-	padding={false}
-	{elem_id}
-	{elem_classes}
-	{height}
-	{width}
-	{container}
-	{scale}
-	{min_width}
-	allow_overflow={false}
->
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-	/>
-
-	<StaticVideo
-		value={_video}
-		subtitle={_subtitle}
-		{label}
-		{show_label}
-		{autoplay}
-		{show_share_button}
-		on:play={() => gradio.dispatch("play")}
-		on:pause={() => gradio.dispatch("pause")}
-		on:stop={() => gradio.dispatch("stop")}
-		on:end={() => gradio.dispatch("end")}
-		on:share={({ detail }) => gradio.dispatch("share", detail)}
-		on:error={({ detail }) => gradio.dispatch("error", detail)}
-		i18n={gradio.i18n}
-	/>
-</Block>
diff --git a/js/video/static/index.ts b/js/video/static/index.ts
deleted file mode 100644
index bbd5cbd962d5..000000000000
--- a/js/video/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticVideo.svelte";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f365a9fdf782..2f8db4922b70 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1292,6 +1292,8 @@ importers:
         specifier: workspace:^
         version: link:../utils
 
+  js/storybook: {}
+
   js/tabitem:
     dependencies:
       '@gradio/column':