UI update: API documentation page (#2652)

* changes * update UI * ui update * add font weight 600 to google font <link> * import paths * changes * changes * changes * changes * Update ui/packages/app/src/ApiDocs.svelte Co-authored-by: Victor Muštar <victor.mustar@gmail.com> * changes * changes * changes * changes * changes * changes Co-authored-by: Ali Abid <aabid94@gmail.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
2025-03-25 12:10:31 +08:00 · 2022-11-20 23:21:01 +01:00 · 2022-11-20 23:21:01 +01:00 · 70227354e6
commit 70227354e6
parent 8edc91ff4b
42 changed files with 789 additions and 444 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -2,6 +2,10 @@

 ## New Features:

+### Revamped API documentation page
+
+New API Docs page with in-browser playground and updated aesthetics. [@gary149](https://github.com/gary149) in [PR 2652](https://github.com/gradio-app/gradio/pull/2652)
+
 ### Accessing the Requests Object Directly

 You can now access the Request object directly in your Python function by [@abidlabs](https://github.com/abidlabs) in [PR 2641](https://github.com/gradio-app/gradio/pull/2641). This means that you can access request headers, the client IP address, and so on. In order to use it, add a parameter to your function and set its type hint to be `gr.Request`. Here's a simple example:
--- a/gradio/blocks.py
+++ b/gradio/blocks.py
@ -42,11 +42,7 @@ from gradio import (
 )
 from gradio.context import Context
 from gradio.deprecation import check_deprecated_parameters
-from gradio.documentation import (
-    document,
-    document_component_api,
-    set_documentation_group,
-)
+from gradio.documentation import document, set_documentation_group
 from gradio.exceptions import DuplicateBlockError, InvalidApiName
 from gradio.utils import (
    TupleNoPrint,
@ -240,17 +236,6 @@ class Block:
            "max_batch_size": max_batch_size,
            "cancels": cancels or [],
        }
-        if api_name is not None:
-            dependency["documentation"] = [
-                [
-                    document_component_api(component.__class__, "input")
-                    for component in inputs
-                ],
-                [
-                    document_component_api(component.__class__, "output")
-                    for component in outputs
-                ],
-            ]
        Context.root_block.dependencies.append(dependency)
        return dependency

--- a/gradio/components.py
+++ b/gradio/components.py
@ -361,7 +361,7 @@ class Textbox(
        """
        Preprocesses input (converts it to a string) before passing it to the function.
        Parameters:
-            x: sample input to preprocess.
+            x: text
        Returns:
            text
        """
--- a/gradio/documentation.py
+++ b/gradio/documentation.py
@ -187,25 +187,3 @@ def generate_documentation():
                )
            documentation[mode].append(cls_documentation)
    return documentation
-
-
-def document_component_api(component_cls, target):
-    """
-    Used for the view API page in the app itself. Generates documentation based on the pre/postprocess methods of the Component.
-    Parameters:
-        component_cls: The IOComponent in the app to document
-        target: Either "input" or "output", which sets whether to return input or output Component documentation
-    Returns:
-        doc: Description of value expected / returned by Component
-        annotation: Type expected / returned by Component
-    """
-    if target == "input":
-        _, parameter_docs, _, _ = document_fn(component_cls.preprocess)
-        if len(parameter_docs) > 1:
-            return parameter_docs[1]["doc"], str(parameter_docs[1]["annotation"])
-        return None, None
-    elif target == "output":
-        _, _, return_docs, _ = document_fn(component_cls.postprocess)
-        return return_docs.get("doc"), str(return_docs.get("annotation"))
-    else:
-        raise ValueError("Invalid doumentation target.")
--- a/test/test_documentation.py
+++ b/test/test_documentation.py
@ -16,8 +16,3 @@ class TestDocumentation:
    def test_website_documentation(self):
        documentation = gr.documentation.generate_documentation()
        assert len(documentation) > 0
-
-    def test_component_api_documentation(self):
-        for cls in gr.components.IOComponent.__subclasses__():
-            gr.documentation.document_component_api(cls, "input")
-            gr.documentation.document_component_api(cls, "output")
--- a/ui/packages/app/index.html
+++ b/ui/packages/app/index.html
@ -44,7 +44,7 @@
 			crossorigin="anonymous"
 		/>
 		<link
-			href="https://fonts.googleapis.com/css?family=Source Sans Pro"
+			href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap"
 			rel="stylesheet"
 		/>
 		<link
--- a/ui/packages/app/public/static/img/api-logo.svg
+++ b/ui/packages/app/public/static/img/api-logo.svg
@ -1,8 +1,4 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="189.38997mm" height="219.02647mm" viewBox="0 0 189.38997 219.02647" version="1.1" id="svg6" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
-  <g transform="translate(-48.100733,-16.629147)" style="fill:#eb9f59;fill-opacity:1">
-    <path style="fill:#eb9f59;fill-opacity:1;stroke-width:0.264583" d="m 99.013488,228.53136 c 0.26339,-0.29104 0.538422,-0.52916 0.611182,-0.52916 0.07276,0 -0.08321,0.23812 -0.346599,0.52916 -0.26339,0.29105 -0.538421,0.52917 -0.611182,0.52917 -0.07276,0 0.08321,-0.23812 0.346599,-0.52917 z m -41.552032,-2.44739 -1.045885,-1.12448 1.12448,1.04588 c 0.618463,0.57524 1.124479,1.08126 1.124479,1.12448 0,0.20018 -0.230413,-1.3e-4 -1.203074,-1.04588 z m 44.594744,-0.56292 c 0,-0.0549 0.20836,-0.2633 0.46302,-0.46302 0.41964,-0.32911 0.429,-0.31975 0.0999,0.0999 -0.34564,0.44073 -0.56291,0.58088 -0.56291,0.36312 z m -53.933229,-23.7126 c 0,-0.3638 0.06006,-0.51263 0.133454,-0.33073 0.0734,0.1819 0.0734,0.47956 0,0.66146 -0.0734,0.1819 -0.133454,0.0331 -0.133454,-0.33073 z M 113.18959,74.654109 c 0.0127,-0.308226 0.0754,-0.370919 0.15985,-0.159853 0.0764,0.190994 0.067,0.4192 -0.0209,0.507119 -0.0879,0.08792 -0.15045,-0.06835 -0.13896,-0.347266 z M 225.61661,46.927302 c 0,-0.05494 0.20836,-0.2633 0.46302,-0.463021 0.41965,-0.329107 0.42901,-0.319749 0.0999,0.0999 -0.34564,0.44073 -0.56292,0.580888 -0.56292,0.363125 z m -51.85833,-2.38125 c 0,-0.05494 0.20836,-0.2633 0.46302,-0.463021 0.41965,-0.329107 0.429,-0.319749 0.0999,0.0999 -0.34565,0.44073 -0.56292,0.580888 -0.56292,0.363125 z m 4.49792,-5.291666 c 0,-0.05494 0.20836,-0.263301 0.46302,-0.463021 0.41964,-0.329108 0.429,-0.319749 0.0999,0.0999 -0.34564,0.44073 -0.56291,0.580887 -0.56291,0.363125 z m -46.43438,-4.662604 c 0.71666,-0.727605 1.36256,-1.322917 1.43532,-1.322917 0.0728,0 -0.45407,0.595312 -1.17074,1.322917 -0.71666,0.727604 -1.36255,1.322916 -1.43531,1.322916 -0.0728,0 0.45407,-0.595312 1.17073,-1.322916 z m 36.3306,-17.64324 c 0.191,-0.07643 0.4192,-0.06703 0.50712,0.02088 0.0879,0.08792 -0.0683,0.150452 -0.34727,0.138964 -0.30822,-0.0127 -0.37092,-0.07539 -0.15985,-0.15985 z m 2.91042,-0.264583 c 0.19099,-0.07643 0.4192,-0.06703 0.50712,0.02088 0.0879,0.08792 -0.0684,0.150453 -0.34727,0.138965 -0.30823,-0.0127 -0.37092,-0.07539 -0.15985,-0.159851 z m 6.08541,0 c 0.191,-0.07643 0.4192,-0.06703 0.50712,0.02088 0.0879,0.08792 -0.0684,0.150453 -0.34726,0.138965 -0.30823,-0.0127 -0.37092,-0.07539 -0.15986,-0.159851 z" />
-    <path style="fill:#eb9f59;fill-opacity:1;stroke-width:0.264583" d="m 76.606587,235.49438 c 0.190995,-0.0764 0.419201,-0.067 0.507119,0.0209 0.08792,0.0879 -0.06835,0.15047 -0.347266,0.13899 -0.308226,-0.0127 -0.370919,-0.0754 -0.159853,-0.15987 z m -28.47381,-28.79114 c 0.0054,-0.43656 0.06469,-0.58313 0.131773,-0.32569 0.06708,0.25743 0.06267,0.61461 -0.0098,0.79375 -0.07248,0.17913 -0.127363,-0.0315 -0.12197,-0.46806 z m -0.03069,-3.9908 c 0.0127,-0.30822 0.07539,-0.37092 0.159851,-0.15985 0.07643,0.19099 0.06703,0.4192 -0.02088,0.50712 -0.08792,0.0879 -0.150452,-0.0684 -0.138964,-0.34727 z M 172.12117,142.09646 c 0.191,-0.0764 0.4192,-0.067 0.50712,0.0209 0.0879,0.0879 -0.0683,0.15046 -0.34727,0.13897 -0.30822,-0.0127 -0.37092,-0.0754 -0.15985,-0.15985 z m 2.91042,-0.26458 c 0.19099,-0.0764 0.4192,-0.067 0.50712,0.0209 0.0879,0.0879 -0.0684,0.15045 -0.34727,0.13897 -0.30823,-0.0127 -0.37092,-0.0754 -0.15985,-0.15986 z m 39.73711,-15.79416 c 0,-0.0549 0.20836,-0.2633 0.46302,-0.46302 0.41964,-0.32911 0.429,-0.31975 0.0999,0.0999 -0.34564,0.44073 -0.56291,0.58089 -0.56291,0.36313 z M 188.64109,84.143941 c 0.40018,-0.06062 1.05503,-0.06062 1.45521,0 0.40018,0.06062 0.0728,0.110222 -0.7276,0.110222 -0.80037,0 -1.12779,-0.0496 -0.72761,-0.110222 z m 48.63808,-0.493999 c 0.0127,-0.308226 0.0754,-0.370919 0.15985,-0.159853 0.0764,0.190995 0.067,0.4192 -0.0209,0.507119 -0.0879,0.08792 -0.15045,-0.06835 -0.13896,-0.347266 z m -34.8136,-4.872744 c 0.56839,-0.582083 1.09297,-1.058333 1.16573,-1.058333 0.0728,0 -0.33276,0.47625 -0.90115,1.058333 -0.56838,0.582084 -1.09296,1.058334 -1.16572,1.058334 -0.0728,0 0.33275,-0.47625 0.90114,-1.058334 z m 34.84429,-3.836458 c 0.005,-0.436563 0.0647,-0.583126 0.13177,-0.325694 0.0671,0.257431 0.0627,0.614619 -0.01,0.79375 -0.0725,0.179131 -0.12737,-0.03149 -0.12197,-0.468056 z M 165.9076,61.44699 c 0.001,-1.018646 0.049,-1.402943 0.10627,-0.853996 0.0573,0.54895 0.0563,1.382387 -0.002,1.852084 -0.0585,0.469699 -0.10532,0.02056 -0.10414,-0.998088 z m 58.3861,-12.932188 c 0,-0.05494 0.20836,-0.2633 0.46302,-0.463021 0.41964,-0.329107 0.429,-0.319749 0.0999,0.0999 -0.34564,0.44073 -0.56291,0.580888 -0.56291,0.363125 z m -48.15417,-6.879166 c 0,-0.05494 0.20836,-0.263301 0.46302,-0.463021 0.41965,-0.329108 0.429,-0.319749 0.0999,0.0999 -0.34565,0.44073 -0.56292,0.580887 -0.56292,0.363125 z m 4.49792,-5.291667 c 0,-0.05494 0.20836,-0.2633 0.46302,-0.463021 0.41964,-0.329107 0.429,-0.319749 0.0999,0.0999 -0.34564,0.44073 -0.56291,0.580888 -0.56291,0.363125 z m -46.30209,-3.96875 c 0,-0.05494 0.20836,-0.2633 0.46302,-0.463021 0.41965,-0.329107 0.42901,-0.319749 0.0999,0.0999 -0.34564,0.44073 -0.56292,0.580888 -0.56292,0.363125 z m 45.45873,-15.426677 c 0.19099,-0.07643 0.4192,-0.06703 0.50712,0.02088 0.0879,0.08792 -0.0684,0.150452 -0.34727,0.138964 -0.30823,-0.0127 -0.37092,-0.07539 -0.15985,-0.15985 z m -7.29258,-0.276585 c 0.5457,-0.05708 1.43867,-0.05708 1.98437,0 0.54571,0.05708 0.0992,0.103786 -0.99218,0.103786 -1.09141,0 -1.53789,-0.0467 -0.99219,-0.103786 z m 3.85299,0.01201 c 0.191,-0.07643 0.4192,-0.06703 0.50712,0.02088 0.0879,0.08792 -0.0683,0.150453 -0.34726,0.138964 -0.30823,-0.0127 -0.37092,-0.07539 -0.15986,-0.15985 z" />
-    <path style="fill:#eb9f59;fill-opacity:1;stroke-width:0.264583" d="m 75.212304,235.2476 c -4.768424,-0.86074 -9.89013,-3.14915 -14.156303,-6.32518 -9.921891,-7.38651 -14.817371,-19.77821 -12.085188,-30.5907 1.113261,-4.40567 2.03654,-6.45122 4.739941,-10.50147 0.712058,-1.06681 15.399907,-20.21223 32.639659,-42.54536 l 31.345007,-40.60571 -1.19176,-3.88901 c -1.77435,-5.790137 -2.19948,-7.791017 -3.06496,-14.425346 -0.83847,-6.427195 0.12466,-16.786696 2.23901,-24.082846 1.61271,-5.565148 5.04296,-12.996921 8.10684,-17.563838 9.1454,-13.631799 22.76859,-23.101774 38.33206,-26.646 7.1018,-1.617273 17.42134,-1.617477 24.53969,-5.29e-4 2.79586,0.635148 6.68115,1.784175 6.68115,1.975914 0,0.681228 -8.51197,11.500323 -15.606,19.835923 -8.93791,10.502194 -9.94047,11.958402 -11.0907,16.109143 -2.03047,7.327204 0.13873,14.823086 6.0037,20.746331 4.98075,5.030238 10.43175,7.42704 16.85654,7.41181 3.38749,-0.008 5.42319,-0.468852 8.16035,-1.847262 3.93316,-1.980711 6.66847,-4.747496 10.15627,-10.273147 6.09648,-9.658522 16.39286,-23.861334 18.66603,-25.747895 0.83884,-0.69618 6.11005,9.216877 8.0958,15.225014 5.59821,16.938083 3.0088,35.139117 -7.18486,50.502628 -10.315,15.54639 -27.259,26.03055 -47.2239,29.21996 -3.03525,0.48488 -9.10183,1.03651 -11.45889,1.04194 l -2.26837,0.005 -31.51693,40.81198 c -17.33431,22.44659 -32.05376,41.4589 -32.70988,42.24959 -3.066208,3.69504 -8.092656,7.18047 -12.802697,8.87762 -3.905258,1.40716 -9.76262,1.83248 -14.201609,1.03121 z" />
-  </g>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.9425 2.94265C27.4632 2.42195 27.4632 1.57773 26.9425 1.05703C26.4218 0.536329 25.5776 0.536329 25.0569 1.05703L22.5713 3.54256C21.1213 2.59333 19.5367 2.43378 18.1753 2.64006C16.5495 2.88638 15.1127 3.66838 14.3905 4.39053L12.3905 6.39053C12.1405 6.64058 12 6.97972 12 7.33334C12 7.68697 12.1405 8.0261 12.3905 8.27615L19.7239 15.6095C20.2446 16.1302 21.0888 16.1302 21.6095 15.6095L23.6095 13.6095C24.3316 12.8873 25.1136 11.4505 25.36 9.82475C25.5663 8.46312 25.4066 6.87827 24.4571 5.42807L26.9425 2.94265Z" fill="#3c4555"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.276 12.9426C12.7967 12.4219 12.7967 11.5777 12.276 11.057C11.7553 10.5363 10.9111 10.5363 10.3904 11.057L8.66651 12.7809L8.27615 12.3905C8.0261 12.1405 7.68697 12 7.33334 12C6.97972 12 6.64058 12.1405 6.39053 12.3905L4.39053 14.3905C3.66838 15.1127 2.88638 16.5495 2.64006 18.1753C2.43377 19.5367 2.59333 21.1214 3.54262 22.5714L1.05703 25.057C0.536329 25.5777 0.536329 26.4219 1.05703 26.9426C1.57773 27.4633 2.42195 27.4633 2.94265 26.9426L5.42817 24.4571C6.87835 25.4066 8.46315 25.5663 9.82475 25.36C11.4505 25.1136 12.8873 24.3316 13.6095 23.6095L15.6095 21.6095C16.1302 21.0888 16.1302 20.2446 15.6095 19.7239L15.2188 19.3332L16.9426 17.6093C17.4633 17.0886 17.4633 16.2444 16.9426 15.7237C16.4219 15.203 15.5777 15.203 15.057 15.7237L13.3332 17.4475L10.5521 14.6665L12.276 12.9426Z" fill="#FF7C00"/>
 </svg>
--- a/ui/packages/app/public/static/img/javascript.svg
+++ b/ui/packages/app/public/static/img/javascript.svg
@ -0,0 +1,16 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	aria-hidden="true"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 32 32"
+>
+	<rect width="32" height="32" fill="#f7df1e"></rect>
+	<path
+		d="M21.5,25a3.27,3.27,0,0,0,3,1.83c1.25,0,2-.63,2-1.49,0-1-.81-1.39-2.19-2L23.56,23C21.39,22.1,20,20.94,20,18.49c0-2.25,1.72-4,4.41-4a4.44,4.44,0,0,1,4.27,2.41l-2.34,1.5a2,2,0,0,0-1.93-1.29,1.31,1.31,0,0,0-1.44,1.29c0,.9.56,1.27,1.85,1.83l.75.32c2.55,1.1,4,2.21,4,4.72,0,2.71-2.12,4.19-5,4.19a5.78,5.78,0,0,1-5.48-3.07Zm-10.63.26c.48.84.91,1.55,1.94,1.55s1.61-.39,1.61-1.89V14.69h3V25c0,3.11-1.83,4.53-4.49,4.53a4.66,4.66,0,0,1-4.51-2.75Z"
+	></path>
+</svg>
--- a/ui/packages/app/public/static/img/python.svg
+++ b/ui/packages/app/public/static/img/python.svg
@ -0,0 +1,20 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	aria-hidden="true"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 32 32"
+>
+	<path
+		d="M15.84.5a16.4,16.4,0,0,0-3.57.32C9.1,1.39,8.53,2.53,8.53,4.64V7.48H16v1H5.77a4.73,4.73,0,0,0-4.7,3.74,14.82,14.82,0,0,0,0,7.54c.57,2.28,1.86,3.82,4,3.82h2.6V20.14a4.73,4.73,0,0,1,4.63-4.63h7.38a3.72,3.72,0,0,0,3.73-3.73V4.64A4.16,4.16,0,0,0,19.65.82,20.49,20.49,0,0,0,15.84.5ZM11.78,2.77a1.39,1.39,0,0,1,1.38,1.46,1.37,1.37,0,0,1-1.38,1.38A1.42,1.42,0,0,1,10.4,4.23,1.44,1.44,0,0,1,11.78,2.77Z"
+		fill="#5a9fd4"
+	></path>
+	<path
+		d="M16.16,31.5a16.4,16.4,0,0,0,3.57-.32c3.17-.57,3.74-1.71,3.74-3.82V24.52H16v-1H26.23a4.73,4.73,0,0,0,4.7-3.74,14.82,14.82,0,0,0,0-7.54c-.57-2.28-1.86-3.82-4-3.82h-2.6v3.41a4.73,4.73,0,0,1-4.63,4.63H12.35a3.72,3.72,0,0,0-3.73,3.73v7.14a4.16,4.16,0,0,0,3.73,3.82A20.49,20.49,0,0,0,16.16,31.5Zm4.06-2.27a1.39,1.39,0,0,1-1.38-1.46,1.37,1.37,0,0,1,1.38-1.38,1.42,1.42,0,0,1,1.38,1.38A1.44,1.44,0,0,1,20.22,29.23Z"
+		fill="#ffd43b"
+	></path>
+</svg>
--- a/ui/packages/app/src/ApiDocs.svelte
+++ b/ui/packages/app/src/ApiDocs.svelte
@ -1,7 +1,25 @@
 <script lang="ts">
+	import { onMount, createEventDispatcher } from "svelte";
 	import type { ComponentMeta, Dependency } from "./components/types";
+	import { post_data } from "./api";
+	import Loader from "./components/StatusTracker/Loader.svelte";
+	import api_logo from "/static/img/api-logo.svg";
+	import clear from "/static/img/clear.svg";
+	import python from "/static/img/python.svg";
+	import javascript from "/static/img/javascript.svg";

-	export let components: Array<ComponentMeta>;
+	const dispatch = createEventDispatcher();
+
+	onMount(() => {
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = "auto";
+		};
+	});
+
+	export let instance_map: {
+		[id: number]: ComponentMeta;
+	};
 	export let dependencies: Array<Dependency>;
 	export let root: string;

@ -12,130 +30,382 @@
 		root += "/";
 	}

+	let current_language = "python";
 	let just_copied = -1;
+	let isRunning = false;
+
+	let dependency_inputs = dependencies.map((dependency) =>
+		dependency.inputs.map((_id) => {
+			let default_data = instance_map[_id].documentation?.example_data;
+			if (default_data === undefined) {
+				default_data = "";
+			} else if (typeof default_data === "object") {
+				default_data = JSON.stringify(default_data);
+			}
+			return default_data;
+		})
+	);
+	let dependency_outputs: any[][] = dependencies.map(
+		(dependency) => new Array(dependency.outputs.length)
+	);
+	let dependency_failures: boolean[][] = dependencies.map((dependency) =>
+		new Array(dependency.inputs.length).fill(false)
+	);
+	let active_api_count = dependencies.filter((d) => d.api_name).length;
+
+	const run = async (index: number) => {
+		isRunning = true;
+		let dependency = dependencies[index];
+		let attempted_component_index = 0;
+		try {
+			var inputs = dependency_inputs[index].map((input_val, i) => {
+				attempted_component_index = i;
+				let component = instance_map[dependency.inputs[i]];
+				input_val = represent_value(input_val, component.documentation?.type);
+				dependency_failures[index][attempted_component_index] = false;
+				return input_val;
+			});
+		} catch (err) {
+			dependency_failures[index][attempted_component_index] = true;
+			isRunning = false;
+			return;
+		}
+		let [response, status_code] = await post_data(
+			`${root}run/${dependency.api_name}`,
+			{
+				data: inputs
+			}
+		);
+		isRunning = false;
+		if (status_code == 200) {
+			dependency_outputs[index] = response.data.map(
+				(output_val: any, i: number) => {
+					let component = instance_map[dependency.outputs[i]];
+					console.log(
+						component.documentation?.type,
+						output_val,
+						represent_value(output_val, component.documentation?.type, "js")
+					);
+					return represent_value(
+						output_val,
+						component.documentation?.type,
+						"js"
+					);
+				}
+			);
+		} else {
+			dependency_failures[index] = new Array(
+				dependency_failures[index].length
+			).fill(true);
+		}
+	};
+
+	const represent_value = (
+		value: string,
+		type: string | undefined,
+		lang: "js" | "py" | null = null
+	) => {
+		if (type === undefined) {
+			return lang === "py" ? "None" : null;
+		}
+		if (type === "string") {
+			return lang === null ? value : '"' + value + '"';
+		} else if (type === "number") {
+			return lang === null ? parseFloat(value) : value;
+		} else if (type === "boolean") {
+			if (lang === "py") {
+				return value === "true" ? "True" : "False";
+			} else if (lang === "js") {
+				return value;
+			} else {
+				return value === "true";
+			}
+		} else {
+			// assume object type
+			if (lang === null) {
+				return value === "" ? null : JSON.parse(value);
+			} else if (typeof value === "string") {
+				if (value === "") {
+					return lang === "py" ? "None" : "null";
+				}
+				return value;
+			} else {
+				return JSON.stringify(value);
+			}
+		}
+	};
 </script>

-<div>
-	{#if dependencies.some((d) => "documentation" in d)}
-		<h2 class="text-3xl text-center mb-6">
-			API Docs for
-			<span class="italic text-amber-500">
+{#if active_api_count}
+	<div
+		class="px-6 py-4 border-b border-gray-100 dark:border-gray-900 relative text-sm md:text-lg"
+	>
+		<h2 class="font-semibold flex">
+			<img src={api_logo} alt="" class="w-3.5 md:w-4 mr-1 md:mr-2" />
+			API documentation for&nbsp;
+			<div class="text-orange-500">
 				{root}
-			</span>
+			</div>
+			<button
+				class="absolute right-6 top-5 md:top-6"
+				on:click={() => dispatch("close")}
+				><img src={clear} alt="" class="w-3 dark:invert" /></button
+			>
 		</h2>
-		<div class="flex flex-col gap-6">
-			{#each dependencies as dependency, d}
-				{#if dependency.documentation}
-					<div
-						class="bg-gray-50 border border-gray-100 dark:bg-gray-800 dark:border-gray-700 p-6 rounded"
-					>
-						<h3 class="text-3xl text-amber-500 font-semibold mb-2">
-							POST /run/{dependency.api_name}
-						</h3>
-						<div class="mb-6">
-							Full URL: <span class="underline"
-								>{root}run/{dependency.api_name}</span
-							>
-							<button
-								class="ml-1 px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700"
-								on:click={() => {
-									navigator.clipboard.writeText(
-										root + "run/" + dependency.api_name
-									);
-									just_copied = d;
-									setTimeout(() => {
-										just_copied = -1;
-									}, 500);
-								}}
-							>
-								{#if just_copied === d}copied!{:else}copy{/if}
-							</button>
-						</div>
-						<h4 class="text-2xl mt-6 mb-4">Input Payload</h4>
-						<div
-							class="block mb-4 text-lg bg-gray-100 dark:bg-gray-700 p-4 font-mono"
+		{#if active_api_count > 1}
+			<div>
+				{active_api_count} API endpoints:
+			</div>
+		{/if}
+	</div>
+	<div class="flex flex-col gap-6">
+		{#each dependencies as dependency, dependency_index}
+			{#if dependency.api_name}
+				<div
+					class="bg-gradient-to-b dark:from-orange-200/5 from-orange-200/20 via-transparent to-transparent p-6 rounded"
+				>
+					<h3 class="text-lg font-bold mb-1.5">
+						<span
+							class="bg-orange-100 px-1 rounded text-sm border border-orange-200 mr-2 font-semibold text-orange-600 dark:bg-orange-400 dark:text-orange-900 dark:border-orange-600"
+							>POST</span
 						>
+						/run/{dependency.api_name}
+					</h3>
+					<div class="text-sm md:text-base mb-6 text-gray-500">
+						Endpoint: <span class="underline"
+							>{root}run/{dependency.api_name}</span
+						>
+						<button
+							class="gr-button ml-2 !py-0"
+							on:click={() => {
+								navigator.clipboard.writeText(
+									root + "run/" + dependency.api_name
+								);
+								just_copied = dependency_index;
+								setTimeout(() => {
+									just_copied = -1;
+								}, 500);
+							}}
+						>
+							{#if just_copied === dependency_index}copied!{:else}copy{/if}
+						</button>
+					</div>
+					<h4 class="font-bold mt-6 mb-3 flex items-center">
+						<div
+							class="flex items-center h-1 w-3 bg-gray-300 dark:bg-gray-500 rounded-full mr-2"
+						>
+							<div
+								class="rounded-full h-1.5 w-1.5 bg-gray-700 dark:bg-gray-400"
+							/>
+						</div>
+						Input Payload
+					</h4>
+					<div
+						class="block bg-white border dark:bg-gray-800 p-4 font-mono text-sm rounded-lg"
+					>
+						&#123;<br />
+						&nbsp;&nbsp;"data": [<br />
+						{#each dependency.inputs as component_id, component_index}
+							&nbsp;&nbsp;&nbsp;&nbsp;<input
+								class="bg-gray-100 dark:bg-gray-600 border-none w-40 px-1 py-0.5 my-0.5 text-sm rounded ring-1 ring-gray-300 dark:ring-gray-500"
+								type="text"
+								bind:value={dependency_inputs[dependency_index][
+									component_index
+								]}
+							/>
+							{#if dependency_failures[dependency_index][component_index]}
+								<span class="text-red-600">ERROR</span>
+							{/if}
+							<span class="text-gray-500">
+								: {instance_map[component_id].documentation?.type},</span
+							>
+							<span class="text-gray-400"
+								>// represents {instance_map[component_id].documentation
+									?.description} of
+								{((label) => {
+									return label ? "'" + label + "'" : "the";
+								})(instance_map[component_id].props.label)}
+
+								<span class="capitalize"
+									>{instance_map[component_id].props.name}</span
+								> component
+							</span>
+							<br />
+						{/each}
+						&nbsp;&nbsp;]<br />
+						&#125;
+					</div>
+					<button
+						on:click={run.bind(null, dependency_index)}
+						class="gr-button gr-button-lg gr-button-primary w-full mt-4"
+						>Try It Out</button
+					>
+					<h4 class="font-bold mt-6 mb-3 flex items-center">
+						<div
+							class="flex items-center h-1 w-3 bg-gray-300 dark:bg-gray-500 rounded-full mr-2"
+						>
+							<div
+								class="rounded-full h-1.5 w-1.5 bg-gray-700 dark:bg-gray-400 ml-auto"
+							/>
+						</div>
+						Response Object
+					</h4>
+					<div
+						class="bg-white border dark:bg-gray-800 p-4 font-mono text-sm rounded-lg flex flex-col"
+					>
+						<div class={isRunning ? "hidden" : ""}>
 							&#123;<br />
 							&nbsp;&nbsp;"data": [<br />
-							{#each dependency.documentation[0] as dependency_doc, i}
-								&nbsp;&nbsp;&nbsp;&nbsp;{dependency_doc[1]},
-								<span class="text-pink-400 dark:text-pink-600"
-									>// represents {dependency_doc[0]} of
+							{#each dependency.outputs as component_id, component_index}
+								&nbsp;&nbsp;&nbsp;&nbsp;{#if dependency_outputs[dependency_index][component_index] !== undefined}
+									<input
+										disabled
+										class="bg-gray-100 dark:bg-gray-600 border-none w-40 px-1 py-0.5 my-0.5 text-sm rounded ring-1 ring-gray-300 dark:ring-gray-500"
+										type="text"
+										bind:value={dependency_outputs[dependency_index][
+											component_index
+										]}
+									/> :
+								{/if}
+								<span class="text-gray-500">
+									{instance_map[component_id].documentation?.type},
+								</span>
+								<span class="text-gray-400"
+									>// represents {instance_map[component_id].documentation
+										?.description} of
 									{((label) => {
 										return label ? "'" + label + "'" : "the";
-									})(
-										components.filter((c) => c.id === dependency.inputs[i])[0]
-											.props.label
-									)}
+									})(instance_map[component_id].props.label)}

 									<span class="capitalize"
-										>{components.filter((c) => c.id === dependency.inputs[i])[0]
-											.props.name}</span
+										>{instance_map[component_id].props.name}</span
 									> component
 								</span>
 								<br />
 							{/each}
-							&nbsp;&nbsp;]<br />
-							&#125;
-						</div>
-						<h4 class="text-2xl mt-6 mb-4">Response Object</h4>
-						<div
-							class="block mb-4 text-lg bg-gray-100 dark:bg-gray-700 p-4 font-mono"
-						>
-							&#123;<br />
-							&nbsp;&nbsp;"data": [<br />
-							{#each dependency.documentation[1] as dependency_doc, i}
-								&nbsp;&nbsp;&nbsp;&nbsp;{dependency_doc[1]},
-								<span class="text-pink-400 dark:text-pink-600"
-									>// represents {dependency_doc[0]} of
-									{((label) => {
-										return label ? "'" + label + "'" : "the";
-									})(
-										components.filter((c) => c.id === dependency.outputs[i])[0]
-											.props.label
-									)}
-									<span class="capitalize"
-										>{components.filter(
-											(c) => c.id === dependency.outputs[i]
-										)[0].props.name}</span
-									> component
-								</span>
-								<br />
-							{/each}
-							&nbsp;&nbsp;],<br />
-							&nbsp;&nbsp;"duration": (float)
-							<span class="text-pink-400 dark:text-pink-600">
+							&nbsp;&nbsp;&nbsp;&nbsp;],<br />
+							&nbsp;&nbsp;&nbsp;&nbsp;"duration": (float)
+							<span class="text-gray-400">
 								// number of seconds to run function call</span
 							><br />
 							&#125;
 						</div>
+						{#if isRunning}
+							<div class="self-center justify-self-center">
+								<Loader margin={false} />
+							</div>
+						{/if}
 					</div>
-				{/if}
-			{/each}
-		</div>
-	{:else}
-		<h2 class="text-3xl text-center mb-6">
-			There are no named API Routes for
-			<span class="italic text-amber-500">
+					<h4 class="font-bold mt-8 mb-3 flex items-center">
+						<svg width="1em" height="1em" viewBox="0 0 24 24" class="mr-1.5"
+							><path
+								fill="currentColor"
+								d="m8 18l-6-6l6-6l1.425 1.425l-4.6 4.6L9.4 16.6Zm8 0l-1.425-1.425l4.6-4.6L14.6 7.4L16 6l6 6Z"
+							/></svg
+						>
+						Code snippets
+					</h4>
+					<div class="flex space-x-2 items-center mb-3">
+						{#each [["python", python], ["javascript", javascript]] as [language, img]}
+							<li
+								class="flex items-center border rounded-lg px-1.5 py-1 leading-none select-none text-smd capitalize
+						{current_language === language
+									? 'border-gray-400 text-gray-800 dark:bg-gray-700'
+									: 'text-gray-400 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 hover:shadow-sm'}"
+								on:click={() => (current_language = language)}
+							>
+								<img src={img} class="mr-1.5 w-3" alt="" />
+								{language}
+							</li>
+						{/each}
+					</div>
+					<code
+						class="bg-white border dark:bg-gray-800 p-4 font-mono text-sm rounded-lg flex flex-col overflow-x-auto"
+					>
+						{#if current_language === "python"}
+							<pre>import requests
+
+response = requests.post("{root + "run/" + dependency.api_name}", json=&lbrace;
+  "data": [{#each dependency_inputs[dependency_index] as component_value, component_index}<br
+									/><!--
+									-->    {represent_value(
+										component_value,
+										instance_map[
+											dependencies[dependency_index].inputs[component_index]
+										].documentation?.type,
+										"py"
+									)},{/each}
+]&rbrace;).json()
+
+data = response["data"]</pre>
+						{:else if current_language === "javascript"}
+							<pre>fetch("{root + "run/" + dependency.api_name}", &lbrace;
+  method: "POST",
+  headers: &lbrace; "Content-Type": "application/json" &rbrace;,
+  body: JSON.stringify(&lbrace;
+    data: [{#each dependency_inputs[dependency_index] as component_value, component_index}<br
+									/><!--
+	-->      {represent_value(
+										component_value,
+										instance_map[
+											dependencies[dependency_index].inputs[component_index]
+										].documentation?.type,
+										"js"
+									)},{/each}
+	]
+  &rbrace;)&rbrace;)
+.then(r =&gt; r.json())
+.then(
+  r =&gt; &lbrace;
+    let data = r.data;
+  &rbrace;
+)</pre>
+						{:else if current_language === "gradio client"}
+							<pre class="break-words whitespace-pre-wrap">Hello World</pre>
+						{/if}
+					</code>
+				</div>
+			{/if}
+		{/each}
+	</div>
+{:else}
+	<div class="p-6">
+		<h2 class="text-lg mb-4 font-semibold">
+			No named API Routes found for
+			<span class="italic text-orange-500">
 				{root}
 			</span>
+			<button
+				class="absolute right-6 top-5 md:top-6"
+				on:click={() => dispatch("close")}
+			>
+				<img src={clear} alt="" class="w-3 dark:invert" />
+			</button>
 		</h2>
 		<div>
-			To expose an API endpoint of your app in these API docs, set the <span
-				class="italic text-amber-500"
+			To expose an API endpoint of your app in this page, set the <span
+				class="text-gray-800 text-sm bg-gray-200/80 dark:bg-gray-600 px-1 rounded font-mono"
 			>
 				api_name
 			</span>
-			parameter of the event listener. For more information, see the "API Page"
+			parameter of the event listener.<br /> For more information, visit the
 			<a
 				href="https://gradio.app/sharing_your_app/#api-page"
-				class="text-amber-500"
+				target="_blank"
+				class="text-orange-500 hover:text-orange-600 underline"
+				>API Page guide</a
+			>. To hide the API documentation button and this page, set
+			<span
+				class="text-gray-800 text-sm bg-gray-200/80 dark:bg-gray-600 px-1 rounded font-mono"
 			>
-				section</a
+				show_api=False
+			</span>
+			in the
+			<span
+				class="text-gray-800 text-sm bg-gray-200/80 dark:bg-gray-600 px-1 rounded font-mono"
 			>
-			in the guides. To hide this API page, set
-			<span class="italic text-amber-500"> show_api=False </span>
-			in the <span class="italic text-amber-500"> Blocks.launch()</span> method.
+				Blocks.launch()</span
+			> method.
 		</div>
-	{/if}
-</div>
+	</div>
+{/if}
--- a/ui/packages/app/src/Blocks.svelte
+++ b/ui/packages/app/src/Blocks.svelte
@ -12,7 +12,8 @@
 	import type {
 		ComponentMeta,
 		Dependency,
-		LayoutNode
+		LayoutNode,
+		Documentation
 	} from "./components/types";
 	import type { fn as api_fn } from "./api";
 	import { setupi18n } from "./i18n";
@ -20,6 +21,7 @@
 	import ApiDocs from "./ApiDocs.svelte";

 	import logo from "./images/logo.svg";
+	import api_logo from "/static/img/api-logo.svg";

 	setupi18n();

@ -69,7 +71,19 @@
 			}
 		}
 	});
-	let api_docs_visible = false;
+
+	let params = new URLSearchParams(window.location.search);
+	let api_docs_visible = params.get("view") === "api";
+	const set_api_docs_visible = (visible: boolean) => {
+		api_docs_visible = visible;
+		let params = new URLSearchParams(window.location.search);
+		if (visible) {
+			params.set("view", "api");
+		} else {
+			params.delete("view");
+		}
+		history.replaceState(null, "", "?" + params.toString());
+	};

 	function is_dep(
 		id: number,
@ -126,6 +140,7 @@
 	type LoadedComponent = {
 		Component: ComponentMeta["component"];
 		modes?: Array<string>;
+		document?: (arg0: Record<string, unknown>) => Documentation;
 	};

 	function load_component<T extends ComponentMeta["type"]>(
@ -161,6 +176,9 @@
 		let instance = instance_map[node.id];
 		const _component = (await _component_map.get(instance.type))!.component;
 		instance.component = _component.Component;
+		if (_component.document) {
+			instance.documentation = _component.document(instance.props);
+		}
 		if (_component.modes && _component.modes.length > 1) {
 			instance.has_modes = true;
 		}
@ -438,9 +456,7 @@
 		class="mx-auto container px-4 py-6 dark:bg-gray-950"
 		class:flex-grow={app_mode}
 	>
-		{#if api_docs_visible}
-			<ApiDocs {components} {dependencies} {root} />
-		{:else if ready}
+		{#if ready}
 			<Render
 				has_modes={rootNode.has_modes}
 				component={rootNode.component}
@ -457,31 +473,50 @@
 		{/if}
 	</div>
 	<footer
-		class="flex justify-center pb-6 text-gray-300 dark:text-gray-500 font-semibold"
+		class="flex justify-center pb-6 text-gray-400 space-x-2 text-sm md:text-base"
 	>
 		{#if show_api}
-			<div
-				class="cursor-pointer hover:text-gray-400 dark:hover:text-gray-400 transition-colors"
+			<button
 				on:click={() => {
-					api_docs_visible = !api_docs_visible;
+					set_api_docs_visible(!api_docs_visible);
 				}}
+				class="flex items-center hover:text-gray-500"
 			>
-				{#if api_docs_visible}hide{:else}view{/if} api
-			</div>
-			&nbsp; &bull; &nbsp;
+				Use via API <img src={api_logo} alt="" class="w-2.5 md:w-3 mx-1" />
+			</button>
+			<div>·</div>
 		{/if}
 		<a
 			href="https://gradio.app"
+			class="flex items-center hover:text-gray-500"
 			target="_blank"
 			rel="noreferrer"
-			class="group hover:text-gray-400 dark:hover:text-gray-400 transition-colors"
 		>
-			{$_("interface.built_with_Gradio")}
-			<img
-				class="h-[22px] ml-0.5 inline-block pb-0.5 filter grayscale opacity-50 group-hover:grayscale-0 group-hover:opacity-100 transition"
-				src={logo}
-				alt="logo"
-			/>
+			Built with Gradio
+			<img class="w-2.5 md:w-3 mx-1" src={logo} alt="logo" />
 		</a>
 	</footer>
 </div>
+
+{#if api_docs_visible && ready}
+	<div class="h-screen w-screen fixed z-50 bg-black/50 flex top-0">
+		<div
+			class="flex-1 backdrop-blur-sm"
+			on:click={() => {
+				set_api_docs_visible(false);
+			}}
+		/>
+		<div
+			class="md:w-[950px] 2xl:w-[1150px] bg-white md:rounded-l-xl shadow-2xl overflow-hidden overflow-y-auto"
+		>
+			<ApiDocs
+				on:close={() => {
+					set_api_docs_visible(false);
+				}}
+				{instance_map}
+				{dependencies}
+				{root}
+			/>
+		</div>
+	</div>
+{/if}
--- a/ui/packages/app/src/api.ts
+++ b/ui/packages/app/src/api.ts
@ -34,12 +34,12 @@ declare let BACKEND_URL: string;

 interface PostResponse {
 	error?: string;
-	[x: string]: unknown;
+	[x: string]: any;
 }
 const QUEUE_FULL_MSG = "This application is too busy. Keep trying!";
 const BROKEN_CONNECTION_MSG = "Connection errored out.";

-async function post_data(
+export async function post_data(
 	url: string,
 	body: unknown
 ): Promise<[PostResponse, number]> {
--- a/ui/packages/app/src/components/Audio/index.ts
+++ b/ui/packages/app/src/components/Audio/index.ts
@ -1,2 +1,11 @@
 export { default as Component } from "./Audio.svelte";
 export const modes = ["static", "dynamic"];
+
+export const document = () => ({
+	type: "{ name: string; data: string }",
+	description: "audio data as base64 string",
+	example_data: {
+		name: "audio.wav",
+		data: "data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YQAAAAA="
+	}
+});
--- a/ui/packages/app/src/components/Button/index.ts
+++ b/ui/packages/app/src/components/Button/index.ts
@ -1,2 +1,8 @@
 export { default as Component } from "./Button.svelte";
 export const modes = ["static"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "string",
+	description: "button label",
+	example_data: config.value || "Run"
+});
--- a/ui/packages/app/src/components/Chatbot/index.ts
+++ b/ui/packages/app/src/components/Chatbot/index.ts
@ -1,2 +1,11 @@
 export { default as Component } from "./Chatbot.svelte";
 export const modes = ["static"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "Array<[string, string]>",
+	description: "Represents list of message pairs of chat message.",
+	example_data: config.value ?? [
+		["Hi", "Hello"],
+		["1 + 1", "2"]
+	]
+});
--- a/ui/packages/app/src/components/Checkbox/index.ts
+++ b/ui/packages/app/src/components/Checkbox/index.ts
@ -1,2 +1,8 @@
 export { default as Component } from "./Checkbox.svelte";
 export const modes = ["static", "dynamic"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "boolean",
+	description: "checked status",
+	example_data: config.value ?? true
+});
--- a/ui/packages/app/src/components/CheckboxGroup/index.ts
+++ b/ui/packages/app/src/components/CheckboxGroup/index.ts
@ -1,2 +1,8 @@
 export { default as Component } from "./CheckboxGroup.svelte";
 export const modes = ["static", "dynamic"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "Array<string>",
+	description: "list of selected choices",
+	example_data: config.choices.length ? [config.choices[0]] : []
+});
--- a/ui/packages/app/src/components/ColorPicker/index.ts
+++ b/ui/packages/app/src/components/ColorPicker/index.ts
@ -1,2 +1,8 @@
 export { default as Component } from "./ColorPicker.svelte";
 export const modes = ["static", "dynamic"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "string",
+	description: "hex color code",
+	example_data: config.value ?? "#000000"
+});
--- a/ui/packages/app/src/components/DataFrame/index.ts
+++ b/ui/packages/app/src/components/DataFrame/index.ts
@ -1,2 +1,8 @@
 export { default as Component } from "./DataFrame.svelte";
 export const modes = ["static", "dynamic"];
+
+export const document = (config: Record<string, any>) => ({
+	type: " { data: Array<Array<string | number>>; headers: Array<string> }",
+	description: "hex color code",
+	example_data: config.value ?? "#000000"
+});
--- a/ui/packages/app/src/components/Dataset/index.ts
+++ b/ui/packages/app/src/components/Dataset/index.ts
@ -1,2 +1,8 @@
 export { default as Component } from "./Dataset.svelte";
 export const modes = ["dynamic"];
+
+export const document = () => ({
+	type: "number",
+	description: "index of selected row",
+	example_data: 0
+});
--- a/ui/packages/app/src/components/Dropdown/index.ts
+++ b/ui/packages/app/src/components/Dropdown/index.ts
@ -1,2 +1,8 @@
 export { default as Component } from "./Dropdown.svelte";
 export const modes = ["static", "dynamic"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "string",
+	description: "selected choice",
+	example_data: config.choices.length ? config.choices[0] : ""
+});
--- a/ui/packages/app/src/components/File/index.ts
+++ b/ui/packages/app/src/components/File/index.ts
@ -1,2 +1,11 @@
 export { default as Component } from "./File.svelte";
 export const modes = ["static", "dynamic"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "{ name: string; data: string }",
+	description: "file name and base64 data as an object",
+	example_data: {
+		name: "zip.zip",
+		data: "data:@file/octet-stream;base64,UEsFBgAAAAAAAAAAAAAAAAAAAAAAAA=="
+	}
+});
--- a/ui/packages/app/src/components/Gallery/index.ts
+++ b/ui/packages/app/src/components/Gallery/index.ts
@ -1,2 +1,7 @@
 export { default as Component } from "./Gallery.svelte";
 export const modes = ["static"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "Array<{ name: string } | [{ name: string }, string]>",
+	description: "list of objects with filename and optional caption"
+});
--- a/ui/packages/app/src/components/HTML/index.ts
+++ b/ui/packages/app/src/components/HTML/index.ts
@ -1,2 +1,7 @@
 export { default as Component } from "./HTML.svelte";
 export const modes = ["static"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "string",
+	description: "HTML output"
+});
--- a/ui/packages/app/src/components/HighlightedText/index.ts
+++ b/ui/packages/app/src/components/HighlightedText/index.ts
@ -1,2 +1,7 @@
 export { default as Component } from "./HighlightedText.svelte";
 export const modes = ["static"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "Array<[string, string | number]>",
+	description: "list of text spans and corresponding label / value"
+});
--- a/ui/packages/app/src/components/Image/index.ts
+++ b/ui/packages/app/src/components/Image/index.ts
@ -1,3 +1,10 @@
 export { default as Component } from "./Image.svelte";
 export { default as ExampleComponent } from "../Dataset/ExampleComponents/Image.svelte";
 export const modes = ["static", "dynamic"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "string",
+	description: "image data as base64 string",
+	example_data:
+		"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg=="
+});
--- a/ui/packages/app/src/components/Json/index.ts
+++ b/ui/packages/app/src/components/Json/index.ts
@ -1,2 +1,7 @@
 export { default as Component } from "./Json.svelte";
 export const modes = ["static"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "Object | Array",
+	description: "JSON object"
+});
--- a/ui/packages/app/src/components/Label/index.ts
+++ b/ui/packages/app/src/components/Label/index.ts
@ -1,2 +1,7 @@
 export { default as Component } from "./Label.svelte";
 export const modes = ["static"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "{ label: string; confidences?: Array<{ label: string; confidence: number }>",
+	description: "output label and optional set of confidences per label"
+});
--- a/ui/packages/app/src/components/Markdown/index.ts
+++ b/ui/packages/app/src/components/Markdown/index.ts
@ -1,2 +1,7 @@
 export { default as Component } from "./Markdown.svelte";
 export const modes = ["static"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "string",
+	description: "HTML rendering of markdown"
+});
--- a/ui/packages/app/src/components/Model3D/index.ts
+++ b/ui/packages/app/src/components/Model3D/index.ts
@ -1,3 +1,8 @@
 export { default as Component } from "./Model3D.svelte";
 export { default as ExampleComponent } from "../Dataset/ExampleComponents/Model3D.svelte";
 export const modes = ["static", "dynamic"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "{ name: string; data: string }",
+	description: "file name and base64 data of Model3D object"
+});
--- a/ui/packages/app/src/components/Number/index.ts
+++ b/ui/packages/app/src/components/Number/index.ts
@ -1,2 +1,8 @@
 export { default as Component } from "./Number.svelte";
 export const modes = ["static", "dynamic"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "number",
+	description: "numeric value",
+	example_data: config.value ?? 1
+});
--- a/ui/packages/app/src/components/Radio/index.ts
+++ b/ui/packages/app/src/components/Radio/index.ts
@ -1,2 +1,8 @@
 export { default as Component } from "./Radio.svelte";
 export const modes = ["static", "dynamic"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "string",
+	description: "selected choice",
+	example_data: config.choices.length > 1 ? config.choices[0] : ""
+});
--- a/ui/packages/app/src/components/Slider/index.ts
+++ b/ui/packages/app/src/components/Slider/index.ts
@ -1,2 +1,8 @@
 export { default as Component } from "./Slider.svelte";
 export const modes = ["static", "dynamic"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "number",
+	description: "selected value",
+	example_data: config.value ?? config.minimum
+});
--- a/ui/packages/app/src/components/State/index.ts
+++ b/ui/packages/app/src/components/State/index.ts
@ -1,2 +1,8 @@
 export { default as Component } from "./State.svelte";
 export const modes = ["static"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "Any",
+	description: "stored state value",
+	example_data: ""
+});
--- a/ui/packages/app/src/components/Textbox/index.ts
+++ b/ui/packages/app/src/components/Textbox/index.ts
@ -1,2 +1,8 @@
 export { default as Component } from "./Textbox.svelte";
 export const modes = ["static", "dynamic"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "string",
+	description: "text string",
+	example_data: config.value || "hello world"
+});
--- a/ui/packages/app/src/components/TimeSeries/index.ts
+++ b/ui/packages/app/src/components/TimeSeries/index.ts
@ -1,2 +1,7 @@
 export { default as Component } from "./TimeSeries.svelte";
 export const modes = ["static", "dynamic"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "{data: Array<Array<number>> | string; headers?: Array<string>;}",
+	description: "dataset of series"
+});
--- a/ui/packages/app/src/components/Video/index.ts
+++ b/ui/packages/app/src/components/Video/index.ts
@ -1,2 +1,7 @@
 export { default as Component } from "./Video.svelte";
 export const modes = ["static", "dynamic"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "{ name: string; data: string }",
+	description: "file name and base64 data of video file"
+});
--- a/ui/packages/app/src/components/types.ts
+++ b/ui/packages/app/src/components/types.ts
@ -12,6 +12,7 @@ export interface ComponentMeta {
 	props: Record<string, unknown>;
 	instance: SvelteComponentDev;
 	component: ComponentType<SvelteComponentDev>;
+	documentation?: Documentation;
 	children?: Array<ComponentMeta>;
 	value?: any;
 }
@ -29,10 +30,15 @@ export interface Dependency {
 	status?: string;
 	queue: boolean | null;
 	api_name: string | null;
-	documentation?: Array<Array<Array<string>>>;
 	cancels: Array<number>;
 }

+export interface Documentation {
+	type?: string;
+	description?: string;
+	example_data?: string;
+}
+
 export interface LayoutNode {
 	id: number;
 	children: Array<LayoutNode>;
--- a/ui/packages/app/src/images/logo.svg
+++ b/ui/packages/app/src/images/logo.svg
@ -1,119 +1,10 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="26.399866mm"
-   height="26.001007mm"
-   viewBox="0 0 26.399867 26.001007"
-   version="1.1"
-   id="svg5"
-   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
-   sodipodi:docname="logo.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview7"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:document-units="mm"
-     showgrid="false"
-     inkscape:zoom="2.7313686"
-     inkscape:cx="-5.8578692"
-     inkscape:cy="65.534912"
-     inkscape:window-width="1248"
-     inkscape:window-height="770"
-     inkscape:window-x="-6"
-     inkscape:window-y="-6"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs2" />
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-113.51105,-128.48206)">
-    <path
-       style="fill:#000000;stroke-width:1.02388"
-       id="path21"
-       d="" />
-    <path
-       style="fill:#000000;stroke-width:0.271737"
-       id="path3317"
-       d="" />
-    <g
-       id="g880"
-       transform="matrix(0.56975915,0,0,0.56975915,63.360109,62.438369)">
-      <rect
-         style="fill:#f1bc8a;fill-opacity:1;stroke-width:0.0943025"
-         id="rect5331-6-3-1-7"
-         width="20.721741"
-         height="5.805635"
-         x="-147.61293"
-         y="69.866898"
-         transform="matrix(-0.87679283,-0.48086831,0,1,0,0)" />
-      <rect
-         style="fill:#f1bc8a;fill-opacity:1;stroke-width:0.0943025"
-         id="rect5331-6-3-1"
-         width="20.721741"
-         height="5.805635"
-         x="-147.61293"
-         y="59.790516"
-         transform="matrix(-0.87679283,-0.48086831,0,1,0,0)" />
-      <rect
-         style="fill:#eba059;fill-opacity:1;stroke-width:0.0942989"
-         id="rect5331-6-4"
-         width="20.79833"
-         height="5.8430037"
-         x="126.81767"
-         y="201.76166"
-         transform="matrix(0.87677457,-0.48090161,0,1,0,0)" />
-      <rect
-         style="fill:#f1bc8a;fill-opacity:1;stroke-width:0.0943025"
-         id="rect5331-6-3-1-3"
-         width="20.799767"
-         height="5.8430223"
-         x="-126.81503"
-         y="79.79348"
-         transform="matrix(-0.87679283,-0.48086831,0,1,0,0)" />
-      <rect
-         style="fill:#eba059;fill-opacity:1;stroke-width:0.0944389"
-         id="rect5331-6-3"
-         width="20.859709"
-         height="5.8430514"
-         x="105.92157"
-         y="181.56015"
-         transform="matrix(0.87755288,-0.47947986,0,1,0,0)" />
-      <rect
-         style="fill:#eba059;fill-opacity:1;stroke-width:0.0942989"
-         id="rect5331-6-4-9"
-         width="20.79833"
-         height="5.8430037"
-         x="126.81767"
-         y="211.83795"
-         transform="matrix(0.87677457,-0.48090161,0,1,0,0)" />
-      <rect
-         style="fill:#f1bc8a;fill-opacity:1;stroke-width:0.0943025"
-         id="rect5331-6-3-1-3-1"
-         width="20.799767"
-         height="5.8430223"
-         x="-126.81503"
-         y="89.869843"
-         transform="matrix(-0.87679283,-0.48086831,0,1,0,0)" />
-      <rect
-         style="fill:#eba059;fill-opacity:1;stroke-width:0.0944389"
-         id="rect5331-6-3-2"
-         width="20.859709"
-         height="5.8430514"
-         x="105.92157"
-         y="191.63644"
-         transform="matrix(0.87755288,-0.47947986,0,1,0,0)" />
-    </g>
-  </g>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+   <path d="M8.03076 0.0166016L15.9999 4.38717V6.93362L8.03076 2.56305V0.0166016Z" fill="#FF7C00" fill-opacity="0.75"/>
+   <path d="M15.9974 4.38672L7.99902 8.77375V11.3366L15.9974 6.94955V4.38672Z" fill="#FF7C00"/>
+   <path d="M0 4.38672L7.9991 8.77375V11.3366L0 6.94957V4.38672Z" fill="#FF7C00" fill-opacity="0.75"/>
+   <path d="M8.03008 0L0.000976562 4.38697V6.94982L8.03008 2.56286V0Z" fill="#FF7C00"/>
+   <path d="M8.03076 4.43604L15.9999 8.80659V11.353L8.03076 6.98248V4.43604Z" fill="#FF7C00" fill-opacity="0.75"/>
+   <path d="M15.9974 8.80664L7.99902 13.1937V15.7565L15.9974 11.3695V8.80664Z" fill="#FF7C00"/>
+   <path d="M0 8.80664L7.9991 13.1937V15.7565L0 11.3695V8.80664Z" fill="#FF7C00" fill-opacity="0.75"/>
+   <path d="M8.03008 4.41992L0.000976562 8.8069V11.3697L8.03008 6.98279V4.41992Z" fill="#FF7C00"/>
 </svg>
--- a/ui/packages/app/src/lang/en.json
+++ b/ui/packages/app/src/lang/en.json
@ -7,7 +7,7 @@
 		"drop_csv": "Drop CSV Here",
 		"click_to_upload": "Click to Upload",
 		"view_api": "view the api",
-		"built_with_Gradio": "built with gradio",
+		"built_with_Gradio": "Built with gradio",
 		"copy_to_clipboard": "copy to clipboard",
 		"loading": "Loading",
 		"error": "ERROR",
--- a/ui/packages/app/test/blocks_kinematics.spec.ts
+++ b/ui/packages/app/test/blocks_kinematics.spec.ts
@ -31,7 +31,7 @@ test("renders the correct elements", async ({ page }) => {
 	await page.goto("http://localhost:3000");

 	await Promise.all([
-		page.click("button"),
+		page.click("button:has-text('Run')"),
 		page.waitForResponse("**/run/predict/")
 	]);
 });
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@ -1,4 +1,4 @@
-lockfileVersion: 5.4
+lockfileVersion: 5.3

 importers:

@ -43,7 +43,7 @@ importers:
      '@tailwindcss/forms': 0.5.0_tailwindcss@3.1.6
      '@testing-library/dom': 8.11.3
      '@testing-library/svelte': 3.1.0_svelte@3.49.0
-      '@testing-library/user-event': 13.5.0_gzufz4q333be4gqfrvipwvqt6a
+      '@testing-library/user-event': 13.5.0_@testing-library+dom@8.11.3
      autoprefixer: 10.4.4_postcss@8.4.6
      babylonjs: 5.18.0
      babylonjs-loaders: 5.18.0
@ -56,14 +56,14 @@ importers:
      postcss: 8.4.6
      postcss-nested: 5.0.6_postcss@8.4.6
      prettier: 2.6.2
-      prettier-plugin-svelte: 2.7.0_3cyj5wbackxvw67rnaarcmbw7y
+      prettier-plugin-svelte: 2.7.0_prettier@2.6.2+svelte@3.49.0
      sirv: 2.0.2
      sirv-cli: 2.0.2
      svelte: 3.49.0
-      svelte-check: 2.8.0_mgmdnb6x5rpawk37gozc2sbtta
+      svelte-check: 2.8.0_postcss@8.4.6+svelte@3.49.0
      svelte-i18n: 3.3.13_svelte@3.49.0
-      svelte-preprocess: 4.10.6_mlkquajfpxs65rn6bdfntu7nmy
-      tailwindcss: 3.1.6_postcss@8.4.6
+      svelte-preprocess: 4.10.6_62d50a01257de5eec5be08cad9d3ed66
+      tailwindcss: 3.1.6
      tinyspy: 0.3.0
      typescript: 4.7.4
      vite: 2.9.5
@ -131,7 +131,7 @@ importers:
      '@gradio/video': link:../video
      d3-dsv: 3.0.1
      mime-types: 2.1.34
-      svelte-i18n: 3.3.13
+      svelte-i18n: 3.3.13_svelte@3.49.0

  packages/atoms:
    specifiers:
@ -391,14 +391,14 @@ importers:
      '@gradio/upload': link:../upload
      '@gradio/video': link:../video
    devDependencies:
-      '@sveltejs/adapter-auto': 1.0.0-next.83
-      '@sveltejs/kit': 1.0.0-next.318
+      '@sveltejs/adapter-auto': 1.0.0-next.87
+      '@sveltejs/kit': 1.0.0-next.318_svelte@3.49.0
      autoprefixer: 10.4.2_postcss@8.4.6
      postcss: 8.4.6
      postcss-load-config: 3.1.1
-      svelte-check: 2.4.1_2y4otvh2n6klv6metqycpfiuzy
-      svelte-preprocess: 4.10.2_bw7ic75prjd4umr4fb55sbospu
-      tailwindcss: 3.0.23_qm7bagfnbv4vjkuayu3hle4sne
+      svelte-check: 2.4.1_736abba5ed1eb6f8ecf70b1d49ead14b
+      svelte-preprocess: 4.10.2_d50790bb30dd88cc44babe7efa52bace
+      tailwindcss: 3.0.23_autoprefixer@10.4.2
      tslib: 2.3.1
      typescript: 4.5.5

@ -444,12 +444,21 @@ packages:
      regenerator-runtime: 0.13.9
    dev: false

-  /@cloudflare/workers-types/3.14.1:
-    resolution: {integrity: sha512-B1/plF62pt+H2IJHvApK8fdOJAVsvojvacuac8x8s+JIyqbropMyqNqHTKLm3YD8ZFLGwYeFTudU+PQ7vGvBdA==}
+  /@cloudflare/workers-types/3.18.0:
+    resolution: {integrity: sha512-ehKOJVLMeR+tZkYhWEaLYQxl0TaIZu/kE86HF3/RidR8Xv5LuQxpbh+XXAoKVqsaphWLhIgBhgnlN5HGdheXSQ==}
    dev: true

-  /@esbuild/linux-loong64/0.15.7:
-    resolution: {integrity: sha512-IKznSJOsVUuyt7cDzzSZyqBEcZe+7WlBqTVXiF1OXP/4Nm387ToaXZ0fyLwI1iBlI/bzpxVq411QE2/Bt2XWWw==}
+  /@esbuild/android-arm/0.15.13:
+    resolution: {integrity: sha512-RY2fVI8O0iFUNvZirXaQ1vMvK0xhCcl0gqRj74Z6yEiO1zAUa7hbsdwZM1kzqbxHK7LFyMizipfXT3JME+12Hw==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-loong64/0.15.13:
+    resolution: {integrity: sha512-+BoyIm4I8uJmH/QDIH0fu7MG0AEx9OXEDXnqptXCwKOlOqZiS4iraH1Nr7/ObLMokW3sOCeBNyD68ATcV9b9Ag==}
    engines: {node: '>=12'}
    cpu: [loong64]
    os: [linux]
@ -578,52 +587,53 @@ packages:
      estree-walker: 2.0.2
      picomatch: 2.3.1

-  /@sveltejs/adapter-auto/1.0.0-next.83:
-    resolution: {integrity: sha512-6Km4x792PjHaN0H0odsy7JOj3jdDZqN1tA58B1b96xWUUUj87tw6XYC7VWRBjwo2wZqWkRat94IegrtAAhYVaA==}
+  /@sveltejs/adapter-auto/1.0.0-next.87:
+    resolution: {integrity: sha512-0MPCKo3aY1i3oESI6ZZikOB+MDV89WlWj4ot+/WEsP1J2uDA2HSirCZYWDnLB5i00HDHzqwBOfDDwHJ00pPC4w==}
    dependencies:
-      '@sveltejs/adapter-cloudflare': 1.0.0-next.39
-      '@sveltejs/adapter-netlify': 1.0.0-next.81
-      '@sveltejs/adapter-vercel': 1.0.0-next.79
+      '@sveltejs/adapter-cloudflare': 1.0.0-next.40
+      '@sveltejs/adapter-netlify': 1.0.0-next.84
+      '@sveltejs/adapter-vercel': 1.0.0-next.81
    transitivePeerDependencies:
      - encoding
      - supports-color
    dev: true

-  /@sveltejs/adapter-cloudflare/1.0.0-next.39:
-    resolution: {integrity: sha512-95iRY3+mFVqEp4BqTJQGAyga7gSovIsm4SvhqsfBE/IQLkb2MnwLq2usRkXm9R6nby4w/jzEwgQM2ohsZD2HHA==}
+  /@sveltejs/adapter-cloudflare/1.0.0-next.40:
+    resolution: {integrity: sha512-KT4TK40T9pl24nPFWHgw1QwAv9AjOkUymjFpS07Ro2zeBHJVgga1Jl0OA1bsiyEiLNRivNRwaWHFySlZ2JJpxQ==}
    dependencies:
-      '@cloudflare/workers-types': 3.14.1
-      esbuild: 0.15.7
+      '@cloudflare/workers-types': 3.18.0
+      esbuild: 0.15.13
      worktop: 0.8.0-next.14
    dev: true

-  /@sveltejs/adapter-netlify/1.0.0-next.81:
-    resolution: {integrity: sha512-jWZHw2uqUMJk8lFPzRm0xxmBZoDc430tbeCU9EtYhG+ypze2B6pJAlNTtcN3/J7wapHq19TgEK5oNt4LqORfNg==}
+  /@sveltejs/adapter-netlify/1.0.0-next.84:
+    resolution: {integrity: sha512-i4vf3to0sV/iI39UPPhlVjOP+jZCZ048M4oHkqDM1FfJwACwgXaysdF2t4X0DV3loLmrkfarwbatjbGIECA9uQ==}
    dependencies:
      '@iarna/toml': 2.2.5
-      esbuild: 0.15.7
-      set-cookie-parser: 2.4.8
+      esbuild: 0.15.13
+      set-cookie-parser: 2.5.1
    dev: true

-  /@sveltejs/adapter-vercel/1.0.0-next.79:
-    resolution: {integrity: sha512-Mitw34vS+wR/qxZm6qOUltf910N8gcekYZHaEVxO6HaE/9LyEZ/O03e9rRKwo4LAWrHXOkHMdUxvv1VcS9BqmQ==}
+  /@sveltejs/adapter-vercel/1.0.0-next.81:
+    resolution: {integrity: sha512-cuNolQSqabSs97J2hn9bnRDOscihIO+VEYltsc+POLU/ecv7pbUm1qdRakeG3+ehK1mfZ9dub6vEVuLKhm+Qng==}
    dependencies:
-      '@vercel/nft': 0.22.0
-      esbuild: 0.15.7
+      '@vercel/nft': 0.22.1
+      esbuild: 0.15.13
    transitivePeerDependencies:
      - encoding
      - supports-color
    dev: true

-  /@sveltejs/kit/1.0.0-next.318:
+  /@sveltejs/kit/1.0.0-next.318_svelte@3.49.0:
    resolution: {integrity: sha512-/M/XNvEqK71KCGro1xLuiUuklsMPe+G5DiVMs39tpfFIFhH4oCzAt+YBaIZDKORogGz3QDaYc5BV+eFv9E5cyw==}
    engines: {node: '>=14.13'}
    hasBin: true
    peerDependencies:
      svelte: ^3.44.0
    dependencies:
-      '@sveltejs/vite-plugin-svelte': 1.0.0-next.44_vite@2.9.9
+      '@sveltejs/vite-plugin-svelte': 1.0.0-next.44_svelte@3.49.0+vite@2.9.9
      sade: 1.8.1
+      svelte: 3.49.0
      vite: 2.9.9
    transitivePeerDependencies:
      - diff-match-patch
@ -656,7 +666,7 @@ packages:
      - supports-color
    dev: false

-  /@sveltejs/vite-plugin-svelte/1.0.0-next.44_vite@2.9.9:
+  /@sveltejs/vite-plugin-svelte/1.0.0-next.44_svelte@3.49.0+vite@2.9.9:
    resolution: {integrity: sha512-n+sssEWbzykPS447FmnNyU5GxEhrBPDVd0lxNZnxRGz9P6651LjjwAnISKr3CKgT9v8IybP8VD0n2i5XzbqExg==}
    engines: {node: ^14.13.1 || >= 16}
    peerDependencies:
@ -672,7 +682,8 @@ packages:
      deepmerge: 4.2.2
      kleur: 4.1.4
      magic-string: 0.26.1
-      svelte-hmr: 0.14.11
+      svelte: 3.49.0
+      svelte-hmr: 0.14.11_svelte@3.49.0
      vite: 2.9.9
    transitivePeerDependencies:
      - supports-color
@ -684,7 +695,7 @@ packages:
      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
    dependencies:
      mini-svg-data-uri: 1.4.4
-      tailwindcss: 3.1.6_postcss@8.4.6
+      tailwindcss: 3.1.6
    dev: false

  /@testing-library/dom/7.31.2:
@ -725,7 +736,7 @@ packages:
      svelte: 3.49.0
    dev: false

-  /@testing-library/user-event/13.5.0_gzufz4q333be4gqfrvipwvqt6a:
+  /@testing-library/user-event/13.5.0_@testing-library+dom@8.11.3:
    resolution: {integrity: sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==}
    engines: {node: '>=10', npm: '>=6'}
    peerDependencies:
@ -841,8 +852,8 @@ packages:
      '@types/yargs-parser': 21.0.0
    dev: false

-  /@vercel/nft/0.22.0:
-    resolution: {integrity: sha512-hB80/093PPiCefN2gVbqv6J93MH+63Zr7uDCwkiS/U4W07DXkLoftbnkBmZoS0Q84LiTSl9DRVSHU4XYCX+sJA==}
+  /@vercel/nft/0.22.1:
+    resolution: {integrity: sha512-lYYZIoxRurqDOSoVIdBicGnpUIpfyaS5qVjdPq+EfI285WqtZK3NK/dyCkiyBul+X2U2OEhRyeMdXPCHGJbohw==}
    hasBin: true
    dependencies:
      '@mapbox/node-pre-gyp': 1.0.9
@ -1571,8 +1582,8 @@ packages:
    requiresBuild: true
    optional: true

-  /esbuild-android-64/0.15.7:
-    resolution: {integrity: sha512-p7rCvdsldhxQr3YHxptf1Jcd86dlhvc3EQmQJaZzzuAxefO9PvcI0GLOa5nCWem1AJ8iMRu9w0r5TG8pHmbi9w==}
+  /esbuild-android-64/0.15.13:
+    resolution: {integrity: sha512-yRorukXBlokwTip+Sy4MYskLhJsO0Kn0/Fj43s1krVblfwP+hMD37a4Wmg139GEsMLl+vh8WXp2mq/cTA9J97g==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [android]
@ -1588,8 +1599,8 @@ packages:
    requiresBuild: true
    optional: true

-  /esbuild-android-arm64/0.15.7:
-    resolution: {integrity: sha512-L775l9ynJT7rVqRM5vo+9w5g2ysbOCfsdLV4CWanTZ1k/9Jb3IYlQ06VCI1edhcosTYJRECQFJa3eAvkx72eyQ==}
+  /esbuild-android-arm64/0.15.13:
+    resolution: {integrity: sha512-TKzyymLD6PiVeyYa4c5wdPw87BeAiTXNtK6amWUcXZxkV51gOk5u5qzmDaYSwiWeecSNHamFsaFjLoi32QR5/w==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [android]
@ -1605,8 +1616,8 @@ packages:
    requiresBuild: true
    optional: true

-  /esbuild-darwin-64/0.15.7:
-    resolution: {integrity: sha512-KGPt3r1c9ww009t2xLB6Vk0YyNOXh7hbjZ3EecHoVDxgtbUlYstMPDaReimKe6eOEfyY4hBEEeTvKwPsiH5WZg==}
+  /esbuild-darwin-64/0.15.13:
+    resolution: {integrity: sha512-WAx7c2DaOS6CrRcoYCgXgkXDliLnFv3pQLV6GeW1YcGEZq2Gnl8s9Pg7ahValZkpOa0iE/ojRVQ87sbUhF1Cbg==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [darwin]
@ -1622,8 +1633,8 @@ packages:
    requiresBuild: true
    optional: true

-  /esbuild-darwin-arm64/0.15.7:
-    resolution: {integrity: sha512-kBIHvtVqbSGajN88lYMnR3aIleH3ABZLLFLxwL2stiuIGAjGlQW741NxVTpUHQXUmPzxi6POqc9npkXa8AcSZQ==}
+  /esbuild-darwin-arm64/0.15.13:
+    resolution: {integrity: sha512-U6jFsPfSSxC3V1CLiQqwvDuj3GGrtQNB3P3nNC3+q99EKf94UGpsG9l4CQ83zBs1NHrk1rtCSYT0+KfK5LsD8A==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [darwin]
@ -1639,8 +1650,8 @@ packages:
    requiresBuild: true
    optional: true

-  /esbuild-freebsd-64/0.15.7:
-    resolution: {integrity: sha512-hESZB91qDLV5MEwNxzMxPfbjAhOmtfsr9Wnuci7pY6TtEh4UDuevmGmkUIjX/b+e/k4tcNBMf7SRQ2mdNuK/HQ==}
+  /esbuild-freebsd-64/0.15.13:
+    resolution: {integrity: sha512-whItJgDiOXaDG/idy75qqevIpZjnReZkMGCgQaBWZuKHoElDJC1rh7MpoUgupMcdfOd+PgdEwNQW9DAE6i8wyA==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [freebsd]
@ -1656,8 +1667,8 @@ packages:
    requiresBuild: true
    optional: true

-  /esbuild-freebsd-arm64/0.15.7:
-    resolution: {integrity: sha512-dLFR0ChH5t+b3J8w0fVKGvtwSLWCv7GYT2Y2jFGulF1L5HftQLzVGN+6pi1SivuiVSmTh28FwUhi9PwQicXI6Q==}
+  /esbuild-freebsd-arm64/0.15.13:
+    resolution: {integrity: sha512-6pCSWt8mLUbPtygv7cufV0sZLeylaMwS5Fznj6Rsx9G2AJJsAjQ9ifA+0rQEIg7DwJmi9it+WjzNTEAzzdoM3Q==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [freebsd]
@ -1673,8 +1684,8 @@ packages:
    requiresBuild: true
    optional: true

-  /esbuild-linux-32/0.15.7:
-    resolution: {integrity: sha512-v3gT/LsONGUZcjbt2swrMjwxo32NJzk+7sAgtxhGx1+ZmOFaTRXBAi1PPfgpeo/J//Un2jIKm/I+qqeo4caJvg==}
+  /esbuild-linux-32/0.15.13:
+    resolution: {integrity: sha512-VbZdWOEdrJiYApm2kkxoTOgsoCO1krBZ3quHdYk3g3ivWaMwNIVPIfEE0f0XQQ0u5pJtBsnk2/7OPiCFIPOe/w==}
    engines: {node: '>=12'}
    cpu: [ia32]
    os: [linux]
@ -1690,8 +1701,8 @@ packages:
    requiresBuild: true
    optional: true

-  /esbuild-linux-64/0.15.7:
-    resolution: {integrity: sha512-LxXEfLAKwOVmm1yecpMmWERBshl+Kv5YJ/1KnyAr6HRHFW8cxOEsEfisD3sVl/RvHyW//lhYUVSuy9jGEfIRAQ==}
+  /esbuild-linux-64/0.15.13:
+    resolution: {integrity: sha512-rXmnArVNio6yANSqDQlIO4WiP+Cv7+9EuAHNnag7rByAqFVuRusLbGi2697A5dFPNXoO//IiogVwi3AdcfPC6A==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [linux]
@ -1707,8 +1718,8 @@ packages:
    requiresBuild: true
    optional: true

-  /esbuild-linux-arm/0.15.7:
-    resolution: {integrity: sha512-JKgAHtMR5f75wJTeuNQbyznZZa+pjiUHV7sRZp42UNdyXC6TiUYMW/8z8yIBAr2Fpad8hM1royZKQisqPABPvQ==}
+  /esbuild-linux-arm/0.15.13:
+    resolution: {integrity: sha512-Ac6LpfmJO8WhCMQmO253xX2IU2B3wPDbl4IvR0hnqcPrdfCaUa2j/lLMGTjmQ4W5JsJIdHEdW12dG8lFS0MbxQ==}
    engines: {node: '>=12'}
    cpu: [arm]
    os: [linux]
@ -1724,8 +1735,8 @@ packages:
    requiresBuild: true
    optional: true

-  /esbuild-linux-arm64/0.15.7:
-    resolution: {integrity: sha512-P3cfhudpzWDkglutWgXcT2S7Ft7o2e3YDMrP1n0z2dlbUZghUkKCyaWw0zhp4KxEEzt/E7lmrtRu/pGWnwb9vw==}
+  /esbuild-linux-arm64/0.15.13:
+    resolution: {integrity: sha512-alEMGU4Z+d17U7KQQw2IV8tQycO6T+rOrgW8OS22Ua25x6kHxoG6Ngry6Aq6uranC+pNWNMB6aHFPh7aTQdORQ==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [linux]
@ -1741,8 +1752,8 @@ packages:
    requiresBuild: true
    optional: true

-  /esbuild-linux-mips64le/0.15.7:
-    resolution: {integrity: sha512-T7XKuxl0VpeFLCJXub6U+iybiqh0kM/bWOTb4qcPyDDwNVhLUiPcGdG2/0S7F93czUZOKP57YiLV8YQewgLHKw==}
+  /esbuild-linux-mips64le/0.15.13:
+    resolution: {integrity: sha512-47PgmyYEu+yN5rD/MbwS6DxP2FSGPo4Uxg5LwIdxTiyGC2XKwHhHyW7YYEDlSuXLQXEdTO7mYe8zQ74czP7W8A==}
    engines: {node: '>=12'}
    cpu: [mips64el]
    os: [linux]
@ -1758,8 +1769,8 @@ packages:
    requiresBuild: true
    optional: true

-  /esbuild-linux-ppc64le/0.15.7:
-    resolution: {integrity: sha512-6mGuC19WpFN7NYbecMIJjeQgvDb5aMuvyk0PDYBJrqAEMkTwg3Z98kEKuCm6THHRnrgsdr7bp4SruSAxEM4eJw==}
+  /esbuild-linux-ppc64le/0.15.13:
+    resolution: {integrity: sha512-z6n28h2+PC1Ayle9DjKoBRcx/4cxHoOa2e689e2aDJSaKug3jXcQw7mM+GLg+9ydYoNzj8QxNL8ihOv/OnezhA==}
    engines: {node: '>=12'}
    cpu: [ppc64]
    os: [linux]
@ -1775,8 +1786,8 @@ packages:
    requiresBuild: true
    optional: true

-  /esbuild-linux-riscv64/0.15.7:
-    resolution: {integrity: sha512-uUJsezbswAYo/X7OU/P+PuL/EI9WzxsEQXDekfwpQ23uGiooxqoLFAPmXPcRAt941vjlY9jtITEEikWMBr+F/g==}
+  /esbuild-linux-riscv64/0.15.13:
+    resolution: {integrity: sha512-+Lu4zuuXuQhgLUGyZloWCqTslcCAjMZH1k3Xc9MSEJEpEFdpsSU0sRDXAnk18FKOfEjhu4YMGaykx9xjtpA6ow==}
    engines: {node: '>=12'}
    cpu: [riscv64]
    os: [linux]
@ -1792,8 +1803,8 @@ packages:
    requiresBuild: true
    optional: true

-  /esbuild-linux-s390x/0.15.7:
-    resolution: {integrity: sha512-+tO+xOyTNMc34rXlSxK7aCwJgvQyffqEM5MMdNDEeMU3ss0S6wKvbBOQfgd5jRPblfwJ6b+bKiz0g5nABpY0QQ==}
+  /esbuild-linux-s390x/0.15.13:
+    resolution: {integrity: sha512-BMeXRljruf7J0TMxD5CIXS65y7puiZkAh+s4XFV9qy16SxOuMhxhVIXYLnbdfLrsYGFzx7U9mcdpFWkkvy/Uag==}
    engines: {node: '>=12'}
    cpu: [s390x]
    os: [linux]
@ -1809,8 +1820,8 @@ packages:
    requiresBuild: true
    optional: true

-  /esbuild-netbsd-64/0.15.7:
-    resolution: {integrity: sha512-yVc4Wz+Pu3cP5hzm5kIygNPrjar/v5WCSoRmIjCPWfBVJkZNb5brEGKUlf+0Y759D48BCWa0WHrWXaNy0DULTQ==}
+  /esbuild-netbsd-64/0.15.13:
+    resolution: {integrity: sha512-EHj9QZOTel581JPj7UO3xYbltFTYnHy+SIqJVq6yd3KkCrsHRbapiPb0Lx3EOOtybBEE9EyqbmfW1NlSDsSzvQ==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [netbsd]
@ -1826,8 +1837,8 @@ packages:
    requiresBuild: true
    optional: true

-  /esbuild-openbsd-64/0.15.7:
-    resolution: {integrity: sha512-GsimbwC4FSR4lN3wf8XmTQ+r8/0YSQo21rWDL0XFFhLHKlzEA4SsT1Tl8bPYu00IU6UWSJ+b3fG/8SB69rcuEQ==}
+  /esbuild-openbsd-64/0.15.13:
+    resolution: {integrity: sha512-nkuDlIjF/sfUhfx8SKq0+U+Fgx5K9JcPq1mUodnxI0x4kBdCv46rOGWbuJ6eof2n3wdoCLccOoJAbg9ba/bT2w==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [openbsd]
@ -1843,8 +1854,8 @@ packages:
    requiresBuild: true
    optional: true

-  /esbuild-sunos-64/0.15.7:
-    resolution: {integrity: sha512-8CDI1aL/ts0mDGbWzjEOGKXnU7p3rDzggHSBtVryQzkSOsjCHRVe0iFYUuhczlxU1R3LN/E7HgUO4NXzGGP/Ag==}
+  /esbuild-sunos-64/0.15.13:
+    resolution: {integrity: sha512-jVeu2GfxZQ++6lRdY43CS0Tm/r4WuQQ0Pdsrxbw+aOrHQPHV0+LNOLnvbN28M7BSUGnJnHkHm2HozGgNGyeIRw==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [sunos]
@ -1860,8 +1871,8 @@ packages:
    requiresBuild: true
    optional: true

-  /esbuild-windows-32/0.15.7:
-    resolution: {integrity: sha512-cOnKXUEPS8EGCzRSFa1x6NQjGhGsFlVgjhqGEbLTPsA7x4RRYiy2RKoArNUU4iR2vHmzqS5Gr84MEumO/wxYKA==}
+  /esbuild-windows-32/0.15.13:
+    resolution: {integrity: sha512-XoF2iBf0wnqo16SDq+aDGi/+QbaLFpkiRarPVssMh9KYbFNCqPLlGAWwDvxEVz+ywX6Si37J2AKm+AXq1kC0JA==}
    engines: {node: '>=12'}
    cpu: [ia32]
    os: [win32]
@ -1877,8 +1888,8 @@ packages:
    requiresBuild: true
    optional: true

-  /esbuild-windows-64/0.15.7:
-    resolution: {integrity: sha512-7MI08Ec2sTIDv+zH6StNBKO+2hGUYIT42GmFyW6MBBWWtJhTcQLinKS6ldIN1d52MXIbiJ6nXyCJ+LpL4jBm3Q==}
+  /esbuild-windows-64/0.15.13:
+    resolution: {integrity: sha512-Et6htEfGycjDrtqb2ng6nT+baesZPYQIW+HUEHK4D1ncggNrDNk3yoboYQ5KtiVrw/JaDMNttz8rrPubV/fvPQ==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [win32]
@ -1894,8 +1905,8 @@ packages:
    requiresBuild: true
    optional: true

-  /esbuild-windows-arm64/0.15.7:
-    resolution: {integrity: sha512-R06nmqBlWjKHddhRJYlqDd3Fabx9LFdKcjoOy08YLimwmsswlFBJV4rXzZCxz/b7ZJXvrZgj8DDv1ewE9+StMw==}
+  /esbuild-windows-arm64/0.15.13:
+    resolution: {integrity: sha512-3bv7tqntThQC9SWLRouMDmZnlOukBhOCTlkzNqzGCmrkCJI7io5LLjwJBOVY6kOUlIvdxbooNZwjtBvj+7uuVg==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [win32]
@ -1930,33 +1941,34 @@ packages:
      esbuild-windows-64: 0.14.31
      esbuild-windows-arm64: 0.14.31

-  /esbuild/0.15.7:
-    resolution: {integrity: sha512-7V8tzllIbAQV1M4QoE52ImKu8hT/NLGlGXkiDsbEU5PS6K8Mn09ZnYoS+dcmHxOS9CRsV4IRAMdT3I67IyUNXw==}
+  /esbuild/0.15.13:
+    resolution: {integrity: sha512-Cu3SC84oyzzhrK/YyN4iEVy2jZu5t2fz66HEOShHURcjSkOSAVL8C/gfUT+lDJxkVHpg8GZ10DD0rMHRPqMFaQ==}
    engines: {node: '>=12'}
    hasBin: true
    requiresBuild: true
    optionalDependencies:
-      '@esbuild/linux-loong64': 0.15.7
-      esbuild-android-64: 0.15.7
-      esbuild-android-arm64: 0.15.7
-      esbuild-darwin-64: 0.15.7
-      esbuild-darwin-arm64: 0.15.7
-      esbuild-freebsd-64: 0.15.7
-      esbuild-freebsd-arm64: 0.15.7
-      esbuild-linux-32: 0.15.7
-      esbuild-linux-64: 0.15.7
-      esbuild-linux-arm: 0.15.7
-      esbuild-linux-arm64: 0.15.7
-      esbuild-linux-mips64le: 0.15.7
-      esbuild-linux-ppc64le: 0.15.7
-      esbuild-linux-riscv64: 0.15.7
-      esbuild-linux-s390x: 0.15.7
-      esbuild-netbsd-64: 0.15.7
-      esbuild-openbsd-64: 0.15.7
-      esbuild-sunos-64: 0.15.7
-      esbuild-windows-32: 0.15.7
-      esbuild-windows-64: 0.15.7
-      esbuild-windows-arm64: 0.15.7
+      '@esbuild/android-arm': 0.15.13
+      '@esbuild/linux-loong64': 0.15.13
+      esbuild-android-64: 0.15.13
+      esbuild-android-arm64: 0.15.13
+      esbuild-darwin-64: 0.15.13
+      esbuild-darwin-arm64: 0.15.13
+      esbuild-freebsd-64: 0.15.13
+      esbuild-freebsd-arm64: 0.15.13
+      esbuild-linux-32: 0.15.13
+      esbuild-linux-64: 0.15.13
+      esbuild-linux-arm: 0.15.13
+      esbuild-linux-arm64: 0.15.13
+      esbuild-linux-mips64le: 0.15.13
+      esbuild-linux-ppc64le: 0.15.13
+      esbuild-linux-riscv64: 0.15.13
+      esbuild-linux-s390x: 0.15.13
+      esbuild-netbsd-64: 0.15.13
+      esbuild-openbsd-64: 0.15.13
+      esbuild-sunos-64: 0.15.13
+      esbuild-windows-32: 0.15.13
+      esbuild-windows-64: 0.15.13
+      esbuild-windows-arm64: 0.15.13
    dev: true

  /escalade/3.1.1:
@ -2876,26 +2888,26 @@ packages:
      trouter: 3.2.0
    dev: false

-  /postcss-import/14.1.0_postcss@8.4.6:
+  /postcss-import/14.1.0_postcss@8.4.14:
    resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
    engines: {node: '>=10.0.0'}
    peerDependencies:
      postcss: ^8.0.0
    dependencies:
-      postcss: 8.4.6
+      postcss: 8.4.14
      postcss-value-parser: 4.2.0
      read-cache: 1.0.0
      resolve: 1.22.1
    dev: false

-  /postcss-js/4.0.0_postcss@8.4.6:
+  /postcss-js/4.0.0_postcss@8.4.14:
    resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
    engines: {node: ^12 || ^14 || >= 16}
    peerDependencies:
      postcss: ^8.3.3
    dependencies:
      camelcase-css: 2.0.1
-      postcss: 8.4.6
+      postcss: 8.4.14

  /postcss-load-config/3.1.1:
    resolution: {integrity: sha512-c/9XYboIbSEUZpiD1UQD0IKiUe8n9WHYV7YFe7X7J+ZwCsEKkUJSFWjS9hBU1RR9THR7jMXst8sxiqP0jjo2mg==}
@ -2910,7 +2922,7 @@ packages:
      yaml: 1.10.2
    dev: true

-  /postcss-load-config/3.1.4_postcss@8.4.6:
+  /postcss-load-config/3.1.4_postcss@8.4.14:
    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
    engines: {node: '>= 10'}
    peerDependencies:
@ -2923,10 +2935,19 @@ packages:
        optional: true
    dependencies:
      lilconfig: 2.0.6
-      postcss: 8.4.6
+      postcss: 8.4.14
      yaml: 1.10.2
    dev: false

+  /postcss-nested/5.0.6_postcss@8.4.14:
+    resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss: 8.4.14
+      postcss-selector-parser: 6.0.9
+
  /postcss-nested/5.0.6_postcss@8.4.6:
    resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
    engines: {node: '>=12.0'}
@ -2935,6 +2956,7 @@ packages:
    dependencies:
      postcss: 8.4.6
      postcss-selector-parser: 6.0.9
+    dev: false

  /postcss-selector-parser/6.0.10:
    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
@ -2979,7 +3001,7 @@ packages:
      picocolors: 1.0.0
      source-map-js: 1.0.2

-  /prettier-plugin-svelte/2.7.0_3cyj5wbackxvw67rnaarcmbw7y:
+  /prettier-plugin-svelte/2.7.0_prettier@2.6.2+svelte@3.49.0:
    resolution: {integrity: sha512-fQhhZICprZot2IqEyoiUYLTRdumULGRvw0o4dzl5jt0jfzVWdGqeYW27QTWAeXhoupEZJULmNoH3ueJwUWFLIA==}
    peerDependencies:
      prettier: ^1.16.4 || ^2.0.0
@ -3237,8 +3259,8 @@ packages:
    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
    dev: true

-  /set-cookie-parser/2.4.8:
-    resolution: {integrity: sha512-edRH8mBKEWNVIVMKejNnuJxleqYE/ZSdcT8/Nem9/mmosx12pctd80s2Oy00KNZzrogMZS5mauK2/ymL1bvlvg==}
+  /set-cookie-parser/2.5.1:
+    resolution: {integrity: sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ==}
    dev: true

  /shebang-command/1.2.0:
@ -3423,7 +3445,7 @@ packages:
    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
    engines: {node: '>= 0.4'}

-  /svelte-check/2.4.1_2y4otvh2n6klv6metqycpfiuzy:
+  /svelte-check/2.4.1_736abba5ed1eb6f8ecf70b1d49ead14b:
    resolution: {integrity: sha512-xhf3ShP5rnRwBokrgTBJ/0cO9QIc1DAVu1NWNRTfCDsDBNjGmkS3HgitgUadRuoMKj1+irZR/yHJ+Uqobnkbrw==}
    hasBin: true
    peerDependencies:
@ -3436,7 +3458,8 @@ packages:
      picocolors: 1.0.0
      sade: 1.8.1
      source-map: 0.7.3
-      svelte-preprocess: 4.10.2_bw7ic75prjd4umr4fb55sbospu
+      svelte: 3.49.0
+      svelte-preprocess: 4.10.2_d50790bb30dd88cc44babe7efa52bace
      typescript: 4.5.5
    transitivePeerDependencies:
      - '@babel/core'
@ -3451,7 +3474,7 @@ packages:
      - sugarss
    dev: true

-  /svelte-check/2.8.0_mgmdnb6x5rpawk37gozc2sbtta:
+  /svelte-check/2.8.0_postcss@8.4.6+svelte@3.49.0:
    resolution: {integrity: sha512-HRL66BxffMAZusqe5I5k26mRWQ+BobGd9Rxm3onh7ZVu0nTk8YTKJ9vu3LVPjUGLU9IX7zS+jmwPVhJYdXJ8vg==}
    hasBin: true
    peerDependencies:
@ -3464,7 +3487,7 @@ packages:
      picocolors: 1.0.0
      sade: 1.8.1
      svelte: 3.49.0
-      svelte-preprocess: 4.10.6_mlkquajfpxs65rn6bdfntu7nmy
+      svelte-preprocess: 4.10.6_62d50a01257de5eec5be08cad9d3ed66
      typescript: 4.7.4
    transitivePeerDependencies:
      - '@babel/core'
@ -3479,13 +3502,6 @@ packages:
      - sugarss
    dev: false

-  /svelte-hmr/0.14.11:
-    resolution: {integrity: sha512-R9CVfX6DXxW1Kn45Jtmx+yUe+sPhrbYSUp7TkzbW0jI5fVPn6lsNG9NEs5dFg5qRhFNAoVdRw5qQDLALNKhwbQ==}
-    engines: {node: ^12.20 || ^14.13.1 || >= 16}
-    peerDependencies:
-      svelte: '>=3.19.0'
-    dev: true
-
  /svelte-hmr/0.14.11_svelte@3.49.0:
    resolution: {integrity: sha512-R9CVfX6DXxW1Kn45Jtmx+yUe+sPhrbYSUp7TkzbW0jI5fVPn6lsNG9NEs5dFg5qRhFNAoVdRw5qQDLALNKhwbQ==}
    engines: {node: ^12.20 || ^14.13.1 || >= 16}
@ -3493,21 +3509,6 @@ packages:
      svelte: '>=3.19.0'
    dependencies:
      svelte: 3.49.0
-    dev: false
-
-  /svelte-i18n/3.3.13:
-    resolution: {integrity: sha512-RQM+ys4+Y9ztH//tX22H1UL2cniLNmIR+N4xmYygV6QpQ6EyQvloZiENRew8XrVzfvJ8HaE8NU6/yurLkl7z3g==}
-    engines: {node: '>= 11.15.0'}
-    hasBin: true
-    peerDependencies:
-      svelte: ^3.25.1
-    dependencies:
-      deepmerge: 4.2.2
-      estree-walker: 2.0.2
-      intl-messageformat: 9.11.4
-      sade: 1.8.1
-      tiny-glob: 0.2.9
-    dev: false

  /svelte-i18n/3.3.13_svelte@3.49.0:
    resolution: {integrity: sha512-RQM+ys4+Y9ztH//tX22H1UL2cniLNmIR+N4xmYygV6QpQ6EyQvloZiENRew8XrVzfvJ8HaE8NU6/yurLkl7z3g==}
@ -3524,7 +3525,7 @@ packages:
      tiny-glob: 0.2.9
    dev: false

-  /svelte-preprocess/4.10.2_bw7ic75prjd4umr4fb55sbospu:
+  /svelte-preprocess/4.10.2_d50790bb30dd88cc44babe7efa52bace:
    resolution: {integrity: sha512-aPpkCreSo8EL/y8kJSa1trhiX0oyAtTjlNNM7BNjRAsMJ8Yy2LtqHt0zyd4pQPXt+D4PzbO3qTjjio3kwOxDlA==}
    engines: {node: '>= 9.11.2'}
    requiresBuild: true
@ -3573,10 +3574,11 @@ packages:
      postcss-load-config: 3.1.1
      sorcery: 0.10.0
      strip-indent: 3.0.0
+      svelte: 3.49.0
      typescript: 4.5.5
    dev: true

-  /svelte-preprocess/4.10.6_mlkquajfpxs65rn6bdfntu7nmy:
+  /svelte-preprocess/4.10.6_62d50a01257de5eec5be08cad9d3ed66:
    resolution: {integrity: sha512-I2SV1w/AveMvgIQlUF/ZOO3PYVnhxfcpNyGt8pxpUVhPfyfL/CZBkkw/KPfuFix5FJ9TnnNYMhACK3DtSaYVVQ==}
    engines: {node: '>= 9.11.2'}
    requiresBuild: true
@ -3635,7 +3637,6 @@ packages:
  /svelte/3.49.0:
    resolution: {integrity: sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==}
    engines: {node: '>= 8'}
-    dev: false

  /sync-request/6.1.0:
    resolution: {integrity: sha512-8fjNkrNlNCrVc/av+Jn+xxqfCjYaBoHqCsDz6mt030UMxJGr+GSfCV1dQt2gRtlL63+VPidwDVLr7V2OcTSdRw==}
@ -3652,13 +3653,12 @@ packages:
      get-port: 3.2.0
    dev: false

-  /tailwindcss/3.0.23_qm7bagfnbv4vjkuayu3hle4sne:
+  /tailwindcss/3.0.23_autoprefixer@10.4.2:
    resolution: {integrity: sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA==}
    engines: {node: '>=12.13.0'}
    hasBin: true
    peerDependencies:
      autoprefixer: ^10.0.2
-      postcss: ^8.0.9
    dependencies:
      arg: 5.0.1
      autoprefixer: 10.4.2_postcss@8.4.6
@ -3674,10 +3674,10 @@ packages:
      is-glob: 4.0.3
      normalize-path: 3.0.0
      object-hash: 2.2.0
-      postcss: 8.4.6
-      postcss-js: 4.0.0_postcss@8.4.6
+      postcss: 8.4.14
+      postcss-js: 4.0.0_postcss@8.4.14
      postcss-load-config: 3.1.1
-      postcss-nested: 5.0.6_postcss@8.4.6
+      postcss-nested: 5.0.6_postcss@8.4.14
      postcss-selector-parser: 6.0.9
      postcss-value-parser: 4.2.0
      quick-lru: 5.1.1
@ -3686,12 +3686,10 @@ packages:
      - ts-node
    dev: true

-  /tailwindcss/3.1.6_postcss@8.4.6:
+  /tailwindcss/3.1.6:
    resolution: {integrity: sha512-7skAOY56erZAFQssT1xkpk+kWt2NrO45kORlxFPXUt3CiGsVPhH1smuH5XoDH6sGPXLyBv+zgCKA2HWBsgCytg==}
    engines: {node: '>=12.13.0'}
    hasBin: true
-    peerDependencies:
-      postcss: ^8.0.9
    dependencies:
      arg: 5.0.2
      chokidar: 3.5.3
@ -3706,11 +3704,11 @@ packages:
      normalize-path: 3.0.0
      object-hash: 3.0.0
      picocolors: 1.0.0
-      postcss: 8.4.6
-      postcss-import: 14.1.0_postcss@8.4.6
-      postcss-js: 4.0.0_postcss@8.4.6
-      postcss-load-config: 3.1.4_postcss@8.4.6
-      postcss-nested: 5.0.6_postcss@8.4.6
+      postcss: 8.4.14
+      postcss-import: 14.1.0_postcss@8.4.14
+      postcss-js: 4.0.0_postcss@8.4.14
+      postcss-load-config: 3.1.4_postcss@8.4.14
+      postcss-nested: 5.0.6_postcss@8.4.14
      postcss-selector-parser: 6.0.10
      postcss-value-parser: 4.2.0
      quick-lru: 5.1.1