use ui for frontend (#589)

* add static src to modify sketch * add themes * update all tooling to use the new frontend dir * revert formatting * update template index * fix formatting * fix scripts for new ui folder * remoce console.logs * remoce console.logs * ensure dataeries clear works correctly * ensure label chart has correct width * remove cropper when component is destroyed * update tailwind * remove console logs * fix formatting Co-authored-by: Ali Abid <aliabid94@gmail.com>
2025-04-06 12:30:29 +08:00 · 2022-02-10 19:22:22 +00:00 · 2022-02-10 19:22:22 +00:00 · 37c8ee3974
commit 37c8ee3974
parent 316de05e5e
25 changed files with 658 additions and 372 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -31,9 +31,10 @@ jobs:
      - run:
          name: Build frontend
          command: |
-            cd frontend
-            npm install
-            npm run build
+            npm i pnpm -g
+            cd ui
+            pnpm i --frozen-lockfile
+            pnpm build
      - run:
          command: |
            mkdir screenshots
--- a/gradio/routes.py
+++ b/gradio/routes.py
@ -26,14 +26,14 @@ from gradio.process_examples import load_from_cache, process_example

 STATIC_TEMPLATE_LIB = pkg_resources.resource_filename("gradio", "templates/")
 STATIC_PATH_LIB = pkg_resources.resource_filename("gradio", "templates/frontend/static")
-BUILD_PATH_LIB = pkg_resources.resource_filename("gradio", "templates/frontend/build")
+BUILD_PATH_LIB = pkg_resources.resource_filename("gradio", "templates/frontend/assets")
 VERSION_FILE = pkg_resources.resource_filename("gradio", "version.txt")
 with open(VERSION_FILE) as version_file:
    VERSION = version_file.read()
 GRADIO_STATIC_ROOT = "https://gradio.s3-us-west-2.amazonaws.com/{}/static/".format(
    VERSION
 )
-GRADIO_BUILD_ROOT = "https://gradio.s3-us-west-2.amazonaws.com/{}/build/".format(
+GRADIO_BUILD_ROOT = "https://gradio.s3-us-west-2.amazonaws.com/{}/assets/".format(
    VERSION
 )

@ -129,8 +129,7 @@ def static_resource(path: str):
        return FileResponse(static_file)
    raise HTTPException(status_code=404, detail="Static file not found")

-
-@app.get("/build/{path:path}")
+@app.get("/assets/{path:path}")
 def build_resource(path: str):
    if app.interface.share:
        return RedirectResponse(GRADIO_BUILD_ROOT + path)
--- a/gradio/templates/frontend/index.html
+++ b/gradio/templates/frontend/index.html
@ -1,48 +1,57 @@
 <!DOCTYPE html>
-<html lang="en" style="height: 100%; margin: 0; padding: 0;">
+<html lang="en" style="min-height: 100%; margin: 0; padding: 0">
+	<head>
+		<meta charset="utf-8" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1, shrink-to-fit=no"
+		/>

-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <link rel='stylesheet' href='build/bundle.css'>
-  <link rel='stylesheet' href='build/themes.css'>
-
-  <link rel="stylesheet" href="build/global.css">
-
-  <title>{{ config['title'] or 'Gradio' }}</title>
-  <meta property="og:url" content="https://gradio.app/" />
-  <meta property="og:type" content="website" />
-  <meta property="og:image" content="{{ config['thumbnail'] or '' }}" />
-  <meta property="og:title" content="{{ config['title'] or '' }}" />
-  <meta property="og:description" content="{{ config['simple_description'] or '' }}" />
-  <meta name="twitter:card" content="summary_large_image">
-  <meta name="twitter:creator" content="@teamGradio">
-  <meta name="twitter:title" content="{{ config['title'] or '' }}">
-  <meta name="twitter:description" content="{{ config['simple_description'] or '' }}">
-  <meta name="twitter:image" content="{{ config['thumbnail'] or '' }}">
-  {%if config['analytics_enabled'] %}
-  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script>
-  {% endif %}
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag() {
-      dataLayer.push(arguments);
-    }
-    gtag('js', new Date());
-    gtag('config', 'UA-156449732-1');
-    window.gradio_mode = "app";
-  </script>
-  <script>
-      window.gradio_config = {{ config|tojson }};
-  </script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
-  <title>Gradio</title>
-</head>
-
-<body style="height: 100%; margin: 0; padding: 0;">
-  <div id="root" style="height: 100%"></div>
-
-</body>
-<script defer src='build/bundle.js'></script>
+		
+		<title>{{ config['title'] or 'Gradio' }}</title>
+		<meta property="og:url" content="https://gradio.app/" />
+		<meta property="og:type" content="website" />
+		<meta property="og:image" content="{{ config['thumbnail'] or '' }}" />
+		<meta property="og:title" content="{{ config['title'] or '' }}" />
+		<meta
+			property="og:description"
+			content="{{ config['simple_description'] or '' }}"
+		/>
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta name="twitter:creator" content="@teamGradio" />
+		<meta name="twitter:title" content="{{ config['title'] or '' }}" />
+		<meta
+			name="twitter:description"
+			content="{{ config['simple_description'] or '' }}"
+		/>
+		<meta name="twitter:image" content="{{ config['thumbnail'] or '' }}" />
+		{%if config['analytics_enabled'] %}
+		<script
+			async
+			src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"
+		></script>
+		{% endif %}
+		<script>
+			window.dataLayer = window.dataLayer || [];
+			function gtag() {
+				dataLayer.push(arguments);
+			}
+			gtag("js", new Date());
+			gtag("config", "UA-156449732-1");
+			window.gradio_mode = "app";
+		</script>
+		<script>
+			window.gradio_config = {{ config|tojson }};
+		</script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
+		<title>Gradio</title>
+		<script type="module" crossorigin src="/assets/index.1efa643a.js"></script>
+		<link rel="modulepreload" href="/assets/vendor.a0afec2a.js">
+		<link rel="stylesheet" href="/assets/vendor.327fceeb.css">
+		<link rel="stylesheet" href="/assets/index.dee61218.css">
+	</head>

+	<body style="height: 100%; margin: 0; padding: 0">
+		<div id="root" style="height: 100%"></div>
+	</body>
 </html>
--- a/scripts/build_frontend.sh
+++ b/scripts/build_frontend.sh
@ -4,7 +4,7 @@ if [ -z "$(ls | grep CONTRIBUTING.md)" ]; then
  exit -1
 else
  echo "Building the frontend"
-  cd frontend
-  npm install
-  npm run build
+  cd ui
+  pnpm i --frozen-lockfile
+  pnpm build
 fi
--- a/scripts/run_frontend.sh
+++ b/scripts/run_frontend.sh
@ -4,6 +4,6 @@ if [ -z "$(ls | grep CONTRIBUTING.md)" ]; then
  exit -1
 else
  echo "Running the frontend"
-  cd frontend
+  cd ui
  npm run dev
 fi
--- a/scripts/upload_to_pypi.sh
+++ b/scripts/upload_to_pypi.sh
@ -14,7 +14,7 @@ else
  if [[ $REPLY =~ ^[Yy]$ ]]
  then
    echo -n $new_version > gradio/version.txt
-    cd frontend
+    cd ui
    npm run build
    cd ..
    aws s3 cp gradio/templates/frontend s3://gradio/$new_version/ --recursive 
--- a/ui/packages/app/package.json
+++ b/ui/packages/app/package.json
@ -13,6 +13,7 @@
 		"postcss": "^8.4.5",
 		"postcss-nested": "^5.0.6",
 		"svelte": "^3.46.3",
+		"tailwindcss": "^3.0.19",
 		"vite": "^2.7.13"
 	},
 	"dependencies": {
@ -29,7 +30,6 @@
 		"resize-observer-polyfill": "^1.5.1",
 		"svelte-preprocess": "^4.10.1",
 		"svelte-range-slider-pips": "^2.0.1",
-		"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
 		"tui-image-editor": "^3.15.2"
 	}
 }
--- a/ui/packages/app/src/App.svelte
+++ b/ui/packages/app/src/App.svelte
@ -9,6 +9,10 @@
 <script lang="ts">
 	import Interface from "./Interface.svelte";
 	import "./global.css";
+	import "./themes/huggingface.css";
+	import "./themes/grass.css";
+	import "./themes/peach.css";
+	import "./themes/seafoam.css";

 	interface Component {
 		name: string;
--- a/ui/packages/app/src/Interface.svelte
+++ b/ui/packages/app/src/Interface.svelte
@ -36,7 +36,6 @@
 	const default_inputs: Array<unknown> = input_components.map((component) =>
 		"default" in component ? component.default : null
 	);
-	console.log(default_inputs);
 	const default_outputs = new Array(output_components.length).fill(null);

 	let input_values: Array<unknown> = deepCopy(default_inputs);
@ -47,7 +46,6 @@
 	let timer_diff = 0;
 	let avg_duration = Array.isArray(avg_durations) ? avg_durations[0] : null;
 	let expected_duration: number | null = null;
-	console.log({ interpretation_values });

 	const setValues = (index: number, value: unknown) => {
 		has_changed = true;
@ -274,8 +272,8 @@
 					</div>
 				{/if}
 				{#each output_components as output_component, i}
-					{#if output_values[i] !== null}
-						<div class="component" key={i}>
+					{#if output_values[i] !== null && output_component.name !== "state"}
+						<div class="component">
 							<div class="panel-header mb-1.5">{output_component.label}</div>
 							<svelte:component
 								this={output_component_map[output_component.name].component}
--- a/ui/packages/app/src/components/input/Audio/Interpretation.svelte
+++ b/ui/packages/app/src/components/input/Audio/Interpretation.svelte
@ -5,8 +5,6 @@
 	export let value: Value;
 	export let interpretation: Array<number>;
 	export let theme: string;
-
-	$: console.log({ value, interpretation, theme });
 </script>

 <div class="input-audio" {theme}>
--- a/ui/packages/app/src/components/input/Image/Image.svelte
+++ b/ui/packages/app/src/components/input/Image/Image.svelte
@ -45,6 +45,7 @@
 			<ModifySketch
 				on:undo={() => sketch.undo()}
 				on:clear={() => sketch.clear()}
+				{static_src}
 			/>
 			<Sketch
 				{value}
--- a/ui/packages/app/src/components/input/TimeSeries/TimeSeries.svelte
+++ b/ui/packages/app/src/components/input/TimeSeries/TimeSeries.svelte
@ -57,7 +57,6 @@
 	}

 	function make_dict(x: XRow, y: Array<YRow>): Data {
-		console.log(x, y);
 		const headers = [];
 		const data = [];

@ -85,6 +84,8 @@
 		setValue({ data: v as string });
 		return v;
 	}
+
+	$: _value = value == null ? null : _value;
 </script>

 {#if _value}
@ -95,7 +96,7 @@
 		on:process={({ detail: { x, y } }) => setValue(make_dict(x, y))}
 	/>
 {/if}
-{#if !value}
+{#if value == null}
 	<Upload
 		filetype="text/csv"
 		load={handle_load}
--- a/ui/packages/app/src/components/output/Carousel/Carousel.svelte
+++ b/ui/packages/app/src/components/output/Carousel/Carousel.svelte
@ -10,8 +10,6 @@
 	export let theme: string;
 	export let components: Array<Component>;

-	$: console.log({ value, theme, components });
-
 	let carousel_index: number = 0;
 	const next = () => {
 		carousel_index = (carousel_index + 1) % value.length;
--- a/ui/packages/app/src/components/output/Json/JsonNode.svelte
+++ b/ui/packages/app/src/components/output/Json/JsonNode.svelte
@ -3,8 +3,6 @@
 	export let theme: string;
 	export let depth: number;
 	export let collapsed = depth > 4;
-
-	$: console.log(value);
 </script>

 <div class="json-node inline" {theme}>
--- a/ui/packages/app/src/components/output/Label/Label.svelte
+++ b/ui/packages/app/src/components/output/Label/Label.svelte
@ -30,10 +30,9 @@
 					<div
 						class="confidence flex justify-end items-center overflow-hidden whitespace-nowrap h-7 mb-2 px-1"
 						style="min-width: calc(
-							{Math.round(confidence_set.confidence * 100)}
-							% - 12px)"
+							{Math.round(confidence_set.confidence * 100)}% - 12px)"
 					>
-						{Math.round(confidence_set.confidence * 100) + "%"}
+						{Math.round(confidence_set.confidence * 100)}%
 					</div>
 				{/each}
 			</div>
--- a/ui/packages/app/src/components/utils/Cropper.svelte
+++ b/ui/packages/app/src/components/utils/Cropper.svelte
@ -17,6 +17,10 @@
 		});

 		dispatch("crop", image);
+
+		return () => {
+			cropper.destroy();
+		};
 	});
 </script>

--- a/ui/packages/app/src/components/utils/ModifySketch.svelte
+++ b/ui/packages/app/src/components/utils/ModifySketch.svelte
@ -1,6 +1,8 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";

+	export let static_src: string;
+
 	const dispatch = createEventDispatcher();
 </script>

@ -9,12 +11,12 @@
 		class="bg-opacity-30 hover:bg-opacity-100 transition p-1.5 bg-yellow-500 dark:bg-red-600 rounded shadow w-8 h-8"
 		on:click={() => dispatch("undo")}
 	>
-		<img alt="undo sketch" src="/static/img/undo-solid.svg" />
+		<img alt="undo sketch" src="{static_src}/static/img/undo-solid.svg" />
 	</button>
 	<button
 		class="clear bg-opacity-30 hover:bg-opacity-100 transition p-1 bg-gray-50 dark:bg-gray-500 rounded shadow w-8 h-8"
 		on:click={() => dispatch("clear")}
 	>
-		<img alt="clear sketch" src="static/img/clear.svg" />
+		<img alt="clear sketch" src="{static_src}/static/img/clear.svg" />
 	</button>
 </div>
--- a/ui/packages/app/src/components/utils/Webcam.svelte
+++ b/ui/packages/app/src/components/utils/Webcam.svelte
@ -18,7 +18,7 @@
 			video_source.srcObject = stream;
 			video_source.play();
 		} catch (error) {
-			console.log(error);
+			console.error(error);
 		}
 	}

--- a/ui/packages/app/src/main.ts
+++ b/ui/packages/app/src/main.ts
@ -70,6 +70,11 @@ window.launchGradio = (config: Config, element_query: string) => {
 	} else {
 		config.static_src = "https://gradio.s3-us-west-2.amazonaws.com/PIP_VERSION";
 	}
+	if (config.css) {
+		let style = document.createElement("style");
+		style.innerHTML = config.css;
+		document.head.appendChild(style);
+	}
 	if (config.detail === "Not authenticated") {
 		new Login({
 			target: target,
--- a/ui/packages/app/src/themes/grass.css
+++ b/ui/packages/app/src/themes/grass.css
@ -0,0 +1,120 @@
+.gradio-bg[theme="grass"] {
+	@apply dark:bg-gray-700;
+}
+.gradio-bg[theme="grass"] .gradio-interface {
+	.component-set {
+		@apply bg-gray-50 dark:bg-gray-800 rounded-none;
+	}
+	.component {
+		@apply p-1 transition;
+	}
+	.panel-header {
+		@apply text-gray-400 dark:text-gray-200 font-semibold;
+	}
+	.panel-button {
+		@apply rounded-none bg-gray-100 dark:bg-gray-800 shadow;
+	}
+	.panel-button.submit {
+		@apply bg-green-400 text-white;
+	}
+	.examples {
+		.examples-holder:not(.gallery) {
+			.examples-table {
+				@apply dark:bg-gray-800;
+				tbody tr:hover {
+					@apply bg-green-400;
+				}
+			}
+		}
+		.examples-holder.gallery .examples-table {
+			.example {
+				@apply dark:bg-gray-800;
+			}
+			.example:hover {
+				@apply bg-green-400;
+			}
+		}
+	}
+
+	/* Input Components */
+	.input-text {
+		@apply rounded-none dark:bg-gray-700 dark:text-gray-50 box-border border-4 p-2 border-white dark:border-gray-600 focus:border-green-400 dark:focus:border-green-400;
+	}
+	.input-number {
+		@apply rounded-none dark:bg-gray-700 dark:text-gray-50 box-border border-4 p-2 border-white dark:border-gray-600 focus:border-green-400 dark:focus:border-green-400;
+	}
+	.input-slider {
+		.range {
+			@apply dark:bg-gray-700 rounded-none;
+		}
+		.range::-webkit-slider-thumb {
+			@apply bg-green-400 rounded-none shadow-sm;
+		}
+		.range::-moz-range-thumb {
+			@apply bg-green-400 rounded-none shadow-sm;
+		}
+		.value {
+			@apply font-semibold text-gray-500 dark:bg-gray-700 dark:text-gray-50;
+		}
+	}
+	.input-radio {
+		.radio-item {
+			@apply bg-gray-100 rounded-none dark:bg-gray-700 dark:text-gray-50;
+		}
+		.radio-circle {
+			@apply hidden;
+		}
+		.radio-item.selected {
+			@apply bg-green-400 text-white shadow;
+		}
+		.radio-circle {
+			@apply w-4 h-4 bg-white transition rounded-full box-border;
+		}
+	}
+
+	.input-checkbox-group,
+	.input-checkbox {
+		.checkbox-item {
+			@apply bg-gray-100 rounded-none dark:bg-gray-700 dark:text-gray-50;
+		}
+		.checkbox-item.selected {
+			@apply bg-green-400 text-white shadow;
+		}
+	}
+	.input-checkbox {
+		.checkbox {
+			@apply bg-gray-200;
+		}
+		.selected .checkbox {
+			@apply bg-green-500;
+		}
+	}
+	.input-checkbox-group .checkbox {
+		@apply hidden;
+	}
+
+	.input-dropdown {
+		.selector {
+			@apply bg-gray-100 rounded-none dark:bg-gray-700 dark:text-gray-50;
+		}
+		.dropdown-menu {
+			@apply shadow;
+		}
+		.dropdown-item {
+			@apply bg-gray-100 dark:bg-gray-800 hover:bg-green-400 hover:text-gray-50 hover:font-semibold;
+		}
+		.dropdown-item:first-child,
+		.dropdown-item:last-child {
+			@apply rounded-none;
+		}
+	}
+	/* Components */
+	.output-label {
+		.confidence {
+			@apply bg-gray-300 text-white dark:bg-gray-600 font-semibold;
+		}
+		.confidence:first-child {
+			@apply bg-green-400;
+		}
+	}
+}
--- a/ui/packages/app/src/themes/huggingface.css
+++ b/ui/packages/app/src/themes/huggingface.css
@ -0,0 +1,124 @@
+.gradio-bg[theme="huggingface"] {
+	@apply dark:bg-[#0b0f19];
+}
+
+.gradio-bg[theme="huggingface"] .gradio-interface {
+	.load-status {
+		@apply text-gray-700;
+	}
+	.component-set {
+		@apply from-gray-50 to-white dark:from-gray-700 dark:to-gray-800 bg-gradient-to-br border border-gray-100 dark:border-none p-4 rounded-lg gap-3;
+	}
+	.panel-header {
+		@apply flex items-center text-sm text-gray-700 dark:text-gray-50 mb-1.5;
+	}
+	.panel-button {
+		@apply from-gray-50 hover:from-gray-100 to-gray-100 bg-gradient-to-b focus:ring-offset-indigo-300 dark:from-gray-700 dark:hover:from-gray-800 dark:to-gray-800 dark:focus:ring-offset-indigo-700 dark:border-none shadow-sm border rounded-lg;
+	}
+	.examples {
+		.examples-holder:not(.gallery) .examples-table {
+			@apply dark:from-gray-700 dark:to-gray-800 bg-gradient-to-br;
+			thead {
+				@apply border-gray-100 dark:border-gray-600;
+			}
+			tbody tr:hover {
+				@apply bg-indigo-500 dark:bg-indigo-900 text-white;
+			}
+		}
+		.examples-holder.gallery .examples-table {
+			.example:hover {
+				@apply bg-indigo-500 dark:bg-indigo-900 text-white;
+			}
+		}
+	}
+	/* Common Classes */
+	.modify-upload {
+		@apply p-1 gap-1;
+		button {
+			@apply rounded-full;
+		}
+		.edit {
+			@apply bg-indigo-400 hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400;
+		}
+		.clear {
+			@apply bg-gray-300 hover:bg-gray-400 dark:bg-gray-400 dark:hover:bg-gray-300;
+		}
+	}
+	/* Input Components */
+	.input-text {
+		@apply p-3 border rounded-lg shadow-inner outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-200 focus:shadow-inner placeholder-gray-400 dark:bg-gray-600 dark:placeholder-gray-100 dark:border-none;
+	}
+	.input-number {
+		@apply p-3 border rounded-lg shadow-inner outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-200 focus:shadow-inner placeholder-gray-400 dark:bg-gray-600 dark:placeholder-gray-100 dark:border-none;
+	}
+	.input-radio {
+		.radio-item {
+			@apply border bg-gradient-to-t from-gray-100 to-gray-50 text-gray-600 py-1.5 px-3 hover:to-gray-100 dark:text-gray-50 dark:from-gray-600 dark:to-gray-500 dark:hover:to-gray-600 dark:border-none;
+		}
+		.radio-item.selected {
+			@apply text-indigo-500 dark:text-white dark:from-indigo-600 dark:to-indigo-500;
+		}
+		.radio-circle {
+			@apply bg-white;
+		}
+		.selected .radio-circle {
+			@apply border-4 border-indigo-600 dark:border-indigo-400;
+		}
+	}
+	.input-checkbox-group,
+	.input-checkbox {
+		.checkbox-item {
+			@apply border bg-gradient-to-t from-gray-100 to-gray-50 hover:to-gray-100 text-gray-600 dark:text-gray-50 dark:from-gray-600 dark:to-gray-500 dark:hover:to-gray-600 dark:border-none py-1.5 px-3;
+		}
+		.checkbox-item.selected {
+			@apply text-indigo-500 dark:text-white dark:from-indigo-600 dark:to-indigo-500;
+		}
+		.selected .checkbox {
+			@apply bg-indigo-600 dark:bg-indigo-400;
+		}
+	}
+	.input-dropdown {
+		.selector {
+			@apply border bg-gradient-to-t from-gray-100 to-gray-50 text-gray-600 dark:text-gray-50 dark:from-gray-600 dark:to-gray-500 dark:hover:to-gray-600 dark:border-none py-1.5 px-3 hover:to-gray-100;
+		}
+		.dropdown-item {
+			@apply bg-gray-50 dark:bg-gray-500 hover:bg-gray-400 hover:text-gray-50 dark:hover:bg-indigo-600;
+		}
+	}
+	.input-slider {
+		@apply text-center;
+		.range {
+			@apply bg-white hover:bg-gray-100 dark:bg-gray-600 rounded-full border dark:border-none;
+		}
+		.range::-webkit-slider-thumb {
+			@apply border dark:bg-white bg-indigo-500 rounded-full shadow;
+		}
+		.range::-moz-range-thumb {
+			@apply border dark:bg-white bg-indigo-500 rounded-full shadow;
+		}
+		.value {
+			@apply bg-gray-100 text-gray-700 dark:text-gray-50 dark:bg-gray-600 dark:border-none shadow-inner;
+		}
+	}
+	.input-audio {
+		.start {
+			@apply bg-gradient-to-t border from-gray-100 to-gray-50 text-gray-600 py-1.5 px-3 hover:to-gray-100 dark:text-gray-50 dark:from-gray-600 dark:to-gray-500 dark:hover:to-gray-600 dark:border-none;
+		}
+		.stop {
+			@apply border border-red-200 bg-gradient-to-t from-red-200 to-red-50 text-red-600 py-1.5 px-3 hover:to-red-100 dark:from-red-700 dark:to-red-600 dark:text-red-100;
+		}
+	}
+	/* Output Components */
+	.output-text {
+		@apply p-3 border rounded-lg shadow-inner outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-200 focus:shadow-inner whitespace-pre-wrap dark:bg-gray-600 dark:border-none;
+	}
+	.output-label {
+		.output-class {
+			@apply hidden;
+		}
+		.confidence {
+			@apply bg-gradient-to-r from-indigo-200 to-indigo-500 dark:from-indigo-500 dark:to-indigo-700 rounded text-white;
+			color: transparent;
+		}
+	}
+}
--- a/ui/packages/app/src/themes/peach.css
+++ b/ui/packages/app/src/themes/peach.css
@ -0,0 +1,108 @@
+.gradio-bg[theme="peach"] {
+	@apply bg-gradient-to-r from-red-50 to-yellow-100 dark:from-gray-900 dark:to-gray-800;
+}
+.gradio-bg[theme="peach"] .gradio-interface {
+	.component-set {
+		@apply bg-white dark:bg-gray-800 rounded-lg;
+	}
+	.component {
+		@apply p-1 transition;
+	}
+	.panel-header {
+		@apply text-gray-600 dark:text-gray-200 font-semibold;
+	}
+	.panel-button {
+		@apply rounded-lg bg-white dark:bg-gray-800 shadow;
+	}
+	.panel-button.submit {
+		@apply text-white bg-gradient-to-tr from-red-500 to-yellow-400;
+	}
+	.examples {
+		.examples-holder:not(.gallery) {
+			.examples-table {
+				@apply bg-white dark:bg-gray-800;
+				tbody tr:hover {
+					@apply bg-yellow-500 dark:bg-red-800;
+				}
+			}
+		}
+		.examples-table-holder.gallery .examples-table {
+			.example {
+				@apply bg-white dark:bg-gray-800;
+			}
+			.example:hover {
+				@apply bg-yellow-500 dark:bg-red-800;
+			}
+		}
+	}
+
+	/* Input Components */
+	.input-text {
+		@apply rounded-lg bg-gray-50 dark:bg-gray-700 dark:text-gray-50;
+	}
+	.input-number {
+		@apply rounded-lg bg-gray-50 dark:bg-gray-700 dark:text-gray-50;
+	}
+	.input-slider {
+		.range {
+			@apply bg-gray-50 dark:bg-gray-700 rounded-lg;
+		}
+		.range::-webkit-slider-thumb {
+			@apply bg-gradient-to-tr from-red-500 to-yellow-400 rounded-lg shadow-sm;
+		}
+		.range::-moz-range-thumb {
+			@apply bg-gradient-to-tr from-red-500 to-yellow-400 rounded-lg shadow-sm;
+		}
+		.value {
+			@apply font-semibold text-gray-500 dark:bg-gray-700 dark:text-gray-50;
+		}
+	}
+	.input-radio {
+		.radio-item {
+			@apply bg-gray-100 rounded-lg dark:bg-gray-700 dark:text-gray-50;
+		}
+		.radio-item.selected {
+			@apply bg-gradient-to-tr from-red-500 to-yellow-400 text-white shadow;
+		}
+		.radio-circle {
+			@apply w-4 h-4 bg-white transition rounded-full box-border;
+		}
+	}
+
+	.input-checkbox-group,
+	.input-checkbox {
+		.checkbox-item {
+			@apply bg-gray-100 rounded-lg dark:bg-gray-700 dark:text-gray-50;
+		}
+		.checkbox-item.selected {
+			@apply bg-gradient-to-tr from-red-500 to-yellow-400 text-white shadow;
+		}
+		.selected .checkbox {
+			@apply bg-gray-200 bg-opacity-20;
+		}
+	}
+	.input-dropdown {
+		.selector {
+			@apply bg-gray-100 rounded-lg dark:bg-gray-700 dark:text-gray-50;
+		}
+		.dropdown-menu {
+			@apply shadow;
+		}
+		.dropdown-item {
+			@apply bg-gray-100 dark:bg-gray-800 hover:bg-red-500 hover:text-gray-50 hover:font-semibold;
+		}
+		.dropdown-item:first-child,
+		.dropdown-item:last-child {
+			@apply rounded-lg;
+		}
+	}
+	/* Components */
+	.output-label {
+		.confidence {
+			@apply bg-gray-300 text-white dark:bg-gray-600 font-semibold rounded-lg;
+		}
+		.confidence:first-child {
+			@apply bg-gradient-to-tr from-red-500 to-yellow-400;
+		}
+	}
+}
--- a/ui/packages/app/src/themes/seafoam.css
+++ b/ui/packages/app/src/themes/seafoam.css
@ -0,0 +1,116 @@
+.gradio-bg[theme="seafoam"] {
+	@apply bg-yellow-100 dark:bg-gray-700;
+}
+.gradio-bg[theme="seafoam"] .gradio-interface {
+	.component-set {
+		@apply p-0;
+	}
+	.component {
+		@apply p-2 transition bg-white dark:bg-gray-800 shadow-sm;
+	}
+	.component:hover .panel-header {
+		@apply text-green-400 text-base;
+	}
+	.panel-header {
+		@apply text-sm h-6 text-gray-400 dark:text-gray-200 transition-all font-semibold;
+	}
+	.panel-button {
+		@apply bg-gradient-to-t from-blue-400 to-green-300 dark:from-blue-500 hover:to-green-400 text-white shadow;
+	}
+	.examples {
+		.examples-holder:not(.gallery) {
+			.examples-table {
+				@apply dark:bg-gray-800;
+				tbody tr:hover {
+					@apply bg-blue-400 dark:bg-blue-500;
+				}
+			}
+		}
+		.examples-holder.gallery .examples-table {
+			.example {
+				@apply dark:bg-gray-800;
+			}
+			.example:hover {
+				@apply bg-blue-400 dark:bg-blue-500;
+			}
+		}
+	}
+
+	/* Common Classes */
+	.edit,
+	.clear {
+		@apply bg-gradient-to-t from-blue-400 to-green-300 dark:from-blue-500 hover:to-green-400 text-white;
+	}
+
+	/* Input Components */
+	.input-text {
+		@apply rounded-none bg-gray-50 text-blue-400 dark:bg-gray-700 dark:text-gray-50;
+	}
+	.input-number {
+		@apply rounded-none bg-gray-50 text-blue-400 dark:bg-gray-700 dark:text-gray-50;
+	}
+	.input-slider {
+		.range {
+			@apply bg-gray-50 dark:bg-gray-700 rounded-none;
+		}
+		.range::-webkit-slider-thumb {
+			@apply bg-gradient-to-t from-blue-400 to-green-300 dark:from-blue-500 shadow-sm;
+		}
+		.range::-moz-range-thumb {
+			@apply bg-gradient-to-t from-blue-400 to-green-300 dark:from-blue-500 shadow-sm;
+		}
+		.value {
+			@apply bg-gray-50 font-semibold text-blue-400 dark:bg-gray-700 dark:text-gray-50;
+		}
+	}
+	.input-radio {
+		.radio-item {
+			@apply bg-gray-50 text-blue-400 dark:bg-gray-700 dark:text-gray-50;
+		}
+		.radio-circle {
+			@apply bg-gray-50 dark:bg-gray-400 border-4 border-gray-200 dark:border-gray-600;
+		}
+		.radio-item.selected {
+			@apply bg-gradient-to-t from-blue-400 to-green-300 dark:from-blue-500 text-white shadow;
+		}
+		.radio-circle {
+			@apply w-4 h-4 bg-white transition rounded-full box-border;
+		}
+		.selected .radio-circle {
+			@apply border-gray-400 opacity-40;
+		}
+	}
+
+	.input-checkbox-group,
+	.input-checkbox {
+		.checkbox-item {
+			@apply bg-gray-50 text-blue-400 dark:bg-gray-700 dark:text-gray-50;
+		}
+		.checkbox-item.selected {
+			@apply bg-gradient-to-t from-blue-400 to-green-300 dark:from-blue-500 text-white shadow;
+		}
+		.selected .checkbox {
+			@apply bg-gray-400 bg-opacity-40;
+		}
+	}
+	.input-dropdown {
+		.selector {
+			@apply bg-gray-50 text-blue-400 dark:bg-gray-700 dark:text-gray-50;
+		}
+		.dropdown-menu {
+			@apply shadow;
+		}
+		.dropdown-item {
+			@apply bg-white dark:bg-gray-800 hover:bg-blue-400 hover:text-gray-50 hover:font-semibold;
+		}
+	}
+	/* Output Components */
+	.output-label {
+		.confidence {
+			@apply bg-gradient-to-t from-gray-400 to-gray-300 dark:from-gray-500 dark:to-gray-400 text-white rounded font-semibold;
+		}
+		.confidence:first-child {
+			@apply bg-gradient-to-t from-blue-400 to-green-300 dark:from-blue-500;
+		}
+	}
+}
--- a/ui/packages/app/tailwind.config.js
+++ b/ui/packages/app/tailwind.config.js
@ -1,9 +1,6 @@
 const production = !process.env.ROLLUP_WATCH;
 module.exports = {
-	purge: {
-		content: ["./src/**/*.svelte"],
-		enabled: production // disable purge in dev
-	},
+	content: ["./src/**/*.svelte"],
 	mode: "jit",
 	darkMode: "class", // or 'media' or 'class'
 	theme: {
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@ -33,7 +33,7 @@ importers:
      svelte: ^3.46.3
      svelte-preprocess: ^4.10.1
      svelte-range-slider-pips: ^2.0.1
-      tailwindcss: npm:@tailwindcss/postcss7-compat@^2.2.17
+      tailwindcss: ^3.0.19
      tui-image-editor: ^3.15.2
      vite: ^2.7.13
    dependencies:
@ -50,13 +50,13 @@ importers:
      resize-observer-polyfill: 1.5.1
      svelte-preprocess: 4.10.2_postcss@8.4.6+svelte@3.46.3
      svelte-range-slider-pips: 2.0.2
-      tailwindcss: /@tailwindcss/postcss7-compat/2.2.17
      tui-image-editor: 3.15.2
    devDependencies:
      '@sveltejs/vite-plugin-svelte': 1.0.0-next.36_svelte@3.46.3+vite@2.7.13
      postcss: 8.4.6
      postcss-nested: 5.0.6_postcss@8.4.6
      svelte: 3.46.3
+      tailwindcss: 3.0.19_autoprefixer@9.8.8+postcss@8.4.6
      vite: 2.7.13

  packages/components:
@ -69,12 +69,12 @@ packages:
    engines: {node: '>=6.9.0'}
    dependencies:
      '@babel/highlight': 7.16.10
-    dev: false
+    dev: true

  /@babel/helper-validator-identifier/7.16.7:
    resolution: {integrity: sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==}
    engines: {node: '>=6.9.0'}
-    dev: false
+    dev: true

  /@babel/highlight/7.16.10:
    resolution: {integrity: sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==}
@ -83,7 +83,7 @@ packages:
      '@babel/helper-validator-identifier': 7.16.7
      chalk: 2.4.2
      js-tokens: 4.0.0
-    dev: false
+    dev: true

  /@mapbox/node-pre-gyp/1.0.8:
    resolution: {integrity: sha512-CMGKi28CF+qlbXh26hDe6NxCd7amqeAzEqnS6IHeO6LoaKyM/n+Xw3HT1COdq8cuioOdlKdqn/hCmqPUOMOywg==}
@ -110,12 +110,10 @@ packages:
    dependencies:
      '@nodelib/fs.stat': 2.0.5
      run-parallel: 1.2.0
-    dev: false

  /@nodelib/fs.stat/2.0.5:
    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
    engines: {node: '>= 8'}
-    dev: false

  /@nodelib/fs.walk/1.2.8:
    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
@ -123,7 +121,6 @@ packages:
    dependencies:
      '@nodelib/fs.scandir': 2.1.5
      fastq: 1.13.0
-    dev: false

  /@rollup/pluginutils/4.1.2:
    resolution: {integrity: sha512-ROn4qvkxP9SyPeHaf7uQC/GPFY6L/OWy9+bd9AwcjOAWQwxRscoEyAUD8qCY5o5iL4jqQwoLk2kaTKJPb/HwzQ==}
@ -155,50 +152,6 @@ packages:
      - supports-color
    dev: true

-  /@tailwindcss/postcss7-compat/2.2.17:
-    resolution: {integrity: sha512-3h2svqQAqYHxRZ1KjsJjZOVTQ04m29LjfrLjXyZZEJuvUuJN+BCIF9GI8vhE1s0plS0mogd6E6YLg6mu4Wv/Vw==}
-    engines: {node: '>=12.13.0'}
-    hasBin: true
-    dependencies:
-      arg: 5.0.1
-      autoprefixer: 9.8.8
-      bytes: 3.1.2
-      chalk: 4.1.2
-      chokidar: 3.5.3
-      color: 4.2.0
-      cosmiconfig: 7.0.1
-      detective: 5.2.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.2.11
-      fs-extra: 10.0.0
-      glob-parent: 6.0.2
-      html-tags: 3.1.0
-      is-color-stop: 1.1.0
-      is-glob: 4.0.3
-      lodash: 4.17.21
-      lodash.topath: 4.5.2
-      modern-normalize: 1.1.0
-      node-emoji: 1.11.0
-      normalize-path: 3.0.0
-      object-hash: 2.2.0
-      postcss: 7.0.39
-      postcss-functions: 3.0.0
-      postcss-js: 2.0.3
-      postcss-load-config: 3.1.1
-      postcss-nested: 4.2.3
-      postcss-selector-parser: 6.0.9
-      postcss-value-parser: 4.2.0
-      pretty-hrtime: 1.0.3
-      purgecss: 4.1.3
-      quick-lru: 5.1.1
-      reduce-css-calc: 2.1.8
-      resolve: 1.22.0
-      tmp: 0.2.1
-    transitivePeerDependencies:
-      - ts-node
-    dev: false
-
  /@types/d3-dsv/3.0.0:
    resolution: {integrity: sha512-o0/7RlMl9p5n6FQDptuJVMxDf/7EDEv2SYEO/CwdG2tr1hTfUVi0Iavkk2ax+VpaQ/1jVhpnj5rq1nj8vwhn2A==}
    dev: false
@ -229,7 +182,7 @@ packages:

  /@types/parse-json/4.0.0:
    resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
-    dev: false
+    dev: true

  /@types/pug/2.0.6:
    resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==}
@ -265,7 +218,7 @@ packages:
      acorn: 7.4.1
      acorn-walk: 7.2.0
      xtend: 4.0.2
-    dev: false
+    dev: true

  /acorn-walk/6.2.0:
    resolution: {integrity: sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==}
@ -276,7 +229,7 @@ packages:
  /acorn-walk/7.2.0:
    resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
    engines: {node: '>=0.4.0'}
-    dev: false
+    dev: true

  /acorn/6.4.2:
    resolution: {integrity: sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==}
@ -289,7 +242,6 @@ packages:
    resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
    engines: {node: '>=0.4.0'}
    hasBin: true
-    dev: false

  /agent-base/6.0.2:
    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
@ -322,14 +274,14 @@ packages:
    engines: {node: '>=4'}
    dependencies:
      color-convert: 1.9.3
-    dev: false
+    dev: true

  /ansi-styles/4.3.0:
    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
    engines: {node: '>=8'}
    dependencies:
      color-convert: 2.0.1
-    dev: false
+    dev: true

  /anymatch/3.1.2:
    resolution: {integrity: sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==}
@ -337,7 +289,6 @@ packages:
    dependencies:
      normalize-path: 3.0.0
      picomatch: 2.3.1
-    dev: false

  /aproba/2.0.0:
    resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==}
@ -355,7 +306,7 @@ packages:

  /arg/5.0.1:
    resolution: {integrity: sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==}
-    dev: false
+    dev: true

  /array-equal/1.0.0:
    resolution: {integrity: sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=}
@ -417,7 +368,6 @@ packages:
  /binary-extensions/2.2.0:
    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
    engines: {node: '>=8'}
-    dev: false

  /brace-expansion/1.1.11:
    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
@ -431,7 +381,6 @@ packages:
    engines: {node: '>=8'}
    dependencies:
      fill-range: 7.0.1
-    dev: false

  /browser-process-hrtime/1.0.0:
    resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==}
@ -454,20 +403,14 @@ packages:
    resolution: {integrity: sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=}
    dev: false

-  /bytes/3.1.2:
-    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
-    engines: {node: '>= 0.8'}
-    dev: false
-
  /callsites/3.1.0:
    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
    engines: {node: '>=6'}
-    dev: false

  /camelcase-css/2.0.1:
    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
    engines: {node: '>= 6'}
-    dev: false
+    dev: true

  /caniuse-lite/1.0.30001304:
    resolution: {integrity: sha512-bdsfZd6K6ap87AGqSHJP/s1V+U6Z5lyrcbBu3ovbCCf8cSYpwTtGrCBObMpJqwxfTbLW6YTIdbb1jEeTelcpYQ==}
@ -499,7 +442,7 @@ packages:
      ansi-styles: 3.2.1
      escape-string-regexp: 1.0.5
      supports-color: 5.5.0
-    dev: false
+    dev: true

  /chalk/4.1.2:
    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
@ -507,7 +450,7 @@ packages:
    dependencies:
      ansi-styles: 4.3.0
      supports-color: 7.2.0
-    dev: false
+    dev: true

  /chokidar/3.5.3:
    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
@ -522,7 +465,6 @@ packages:
      readdirp: 3.6.0
    optionalDependencies:
      fsevents: 2.3.2
-    dev: false

  /chownr/2.0.0:
    resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
@ -534,29 +476,22 @@ packages:
    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
    dependencies:
      color-name: 1.1.3
-    dev: false
+    dev: true

  /color-convert/2.0.1:
    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
    engines: {node: '>=7.0.0'}
    dependencies:
      color-name: 1.1.4
-    dev: false
+    dev: true

  /color-name/1.1.3:
    resolution: {integrity: sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=}
-    dev: false
+    dev: true

  /color-name/1.1.4:
    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: false
-
-  /color-string/1.9.0:
-    resolution: {integrity: sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==}
-    dependencies:
-      color-name: 1.1.4
-      simple-swizzle: 0.2.2
-    dev: false
+    dev: true

  /color-support/1.1.3:
    resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==}
@ -564,13 +499,6 @@ packages:
    dev: false
    optional: true

-  /color/4.2.0:
-    resolution: {integrity: sha512-hHTcrbvEnGjC7WBMk6ibQWFVDgEFTVmjrz2Q5HlU6ltwxv0JJN2Z8I7uRbWeQLF04dikxs8zgyZkazRJvSMtyQ==}
-    dependencies:
-      color-convert: 2.0.1
-      color-string: 1.9.0
-    dev: false
-
  /combined-stream/1.0.8:
    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
    engines: {node: '>= 0.8'}
@ -584,11 +512,6 @@ packages:
    engines: {node: '>= 10'}
    dev: false

-  /commander/8.3.0:
-    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
-    engines: {node: '>= 12'}
-    dev: false
-
  /concat-map/0.0.1:
    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
    dev: false
@ -612,24 +535,17 @@ packages:
      parse-json: 5.2.0
      path-type: 4.0.0
      yaml: 1.10.2
-    dev: false
+    dev: true

  /cropperjs/1.5.12:
    resolution: {integrity: sha512-re7UdjE5UnwdrovyhNzZ6gathI4Rs3KGCBSc8HCIjUo5hO42CtzyblmWLj6QWVw7huHyDMfpKxhiO2II77nhDw==}
    dev: false

-  /css-color-names/0.0.4:
-    resolution: {integrity: sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=}
-    dev: false
-
-  /css-unit-converter/1.1.2:
-    resolution: {integrity: sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==}
-    dev: false
-
  /cssesc/3.0.0:
    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
    engines: {node: '>=4'}
    hasBin: true
+    dev: true

  /cssom/0.3.8:
    resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
@ -763,7 +679,7 @@ packages:

  /defined/1.0.0:
    resolution: {integrity: sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=}
-    dev: false
+    dev: true

  /delayed-stream/1.0.0:
    resolution: {integrity: sha1-3zrhmayt+31ECqrgsp4icrJOxhk=}
@ -796,15 +712,15 @@ packages:
      acorn-node: 1.8.2
      defined: 1.0.0
      minimist: 1.2.5
-    dev: false
+    dev: true

  /didyoumean/1.2.2:
    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-    dev: false
+    dev: true

  /dlv/1.1.3:
    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-    dev: false
+    dev: true

  /domexception/1.0.1:
    resolution: {integrity: sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==}
@ -834,7 +750,7 @@ packages:
    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
    dependencies:
      is-arrayish: 0.2.1
-    dev: false
+    dev: true

  /es6-promise/3.3.1:
    resolution: {integrity: sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM=}
@ -1008,7 +924,7 @@ packages:
  /escape-string-regexp/1.0.5:
    resolution: {integrity: sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=}
    engines: {node: '>=0.8.0'}
-    dev: false
+    dev: true

  /escodegen/1.14.3:
    resolution: {integrity: sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==}
@ -1085,7 +1001,6 @@ packages:
      glob-parent: 5.1.2
      merge2: 1.4.1
      micromatch: 4.0.4
-    dev: false

  /fast-json-stable-stringify/2.1.0:
    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
@ -1101,14 +1016,12 @@ packages:
    resolution: {integrity: sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==}
    dependencies:
      reusify: 1.0.4
-    dev: false

  /fill-range/7.0.1:
    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
    engines: {node: '>=8'}
    dependencies:
      to-regex-range: 5.0.1
-    dev: false

  /forever-agent/0.6.1:
    resolution: {integrity: sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=}
@ -1125,15 +1038,6 @@ packages:
    dev: false
    optional: true

-  /fs-extra/10.0.0:
-    resolution: {integrity: sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==}
-    engines: {node: '>=12'}
-    dependencies:
-      graceful-fs: 4.2.9
-      jsonfile: 6.1.0
-      universalify: 2.0.0
-    dev: false
-
  /fs-minipass/2.1.0:
    resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
    engines: {node: '>= 8'}
@ -1155,6 +1059,7 @@ packages:

  /function-bind/1.1.1:
    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
+    dev: true

  /gauge/3.0.2:
    resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==}
@ -1184,14 +1089,13 @@ packages:
    engines: {node: '>= 6'}
    dependencies:
      is-glob: 4.0.3
-    dev: false

  /glob-parent/6.0.2:
    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
    engines: {node: '>=10.13.0'}
    dependencies:
      is-glob: 4.0.3
-    dev: false
+    dev: true

  /glob/7.2.0:
    resolution: {integrity: sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==}
@ -1227,12 +1131,12 @@ packages:
  /has-flag/3.0.0:
    resolution: {integrity: sha1-tdRU3CGZriJWmfNGfloH87lVuv0=}
    engines: {node: '>=4'}
-    dev: false
+    dev: true

  /has-flag/4.0.0:
    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
    engines: {node: '>=8'}
-    dev: false
+    dev: true

  /has-unicode/2.0.1:
    resolution: {integrity: sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=}
@ -1244,18 +1148,7 @@ packages:
    engines: {node: '>= 0.4.0'}
    dependencies:
      function-bind: 1.1.1
-
-  /hex-color-regex/1.1.0:
-    resolution: {integrity: sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==}
-    dev: false
-
-  /hsl-regex/1.0.0:
-    resolution: {integrity: sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=}
-    dev: false
-
-  /hsla-regex/1.0.0:
-    resolution: {integrity: sha1-wc56MWjIxmFAM6S194d/OyJfnDg=}
-    dev: false
+    dev: true

  /html-encoding-sniffer/1.0.2:
    resolution: {integrity: sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==}
@ -1264,11 +1157,6 @@ packages:
    dev: false
    optional: true

-  /html-tags/3.1.0:
-    resolution: {integrity: sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==}
-    engines: {node: '>=8'}
-    dev: false
-
  /http-signature/1.2.0:
    resolution: {integrity: sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=}
    engines: {node: '>=0.8', npm: '>=1.3.7'}
@ -1311,7 +1199,6 @@ packages:
    dependencies:
      parent-module: 1.0.1
      resolve-from: 4.0.0
-    dev: false

  /inflight/1.0.6:
    resolution: {integrity: sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=}
@ -1337,39 +1224,23 @@ packages:

  /is-arrayish/0.2.1:
    resolution: {integrity: sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=}
-    dev: false
-
-  /is-arrayish/0.3.2:
-    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
-    dev: false
+    dev: true

  /is-binary-path/2.1.0:
    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
    engines: {node: '>=8'}
    dependencies:
      binary-extensions: 2.2.0
-    dev: false
-
-  /is-color-stop/1.1.0:
-    resolution: {integrity: sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=}
-    dependencies:
-      css-color-names: 0.0.4
-      hex-color-regex: 1.1.0
-      hsl-regex: 1.0.0
-      hsla-regex: 1.0.0
-      rgb-regex: 1.0.1
-      rgba-regex: 1.0.0
-    dev: false

  /is-core-module/2.8.1:
    resolution: {integrity: sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==}
    dependencies:
      has: 1.0.3
+    dev: true

  /is-extglob/2.1.1:
    resolution: {integrity: sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=}
    engines: {node: '>=0.10.0'}
-    dev: false

  /is-fullwidth-code-point/3.0.0:
    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
@ -1382,12 +1253,10 @@ packages:
    engines: {node: '>=0.10.0'}
    dependencies:
      is-extglob: 2.1.1
-    dev: false

  /is-number/7.0.0:
    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
    engines: {node: '>=0.12.0'}
-    dev: false

  /is-typedarray/1.0.0:
    resolution: {integrity: sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=}
@ -1401,7 +1270,7 @@ packages:

  /js-tokens/4.0.0:
    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-    dev: false
+    dev: true

  /jsbn/0.1.1:
    resolution: {integrity: sha1-peZUwuWi3rXyAdls77yoDA7y9RM=}
@ -1453,7 +1322,7 @@ packages:

  /json-parse-even-better-errors/2.3.1:
    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
-    dev: false
+    dev: true

  /json-schema-traverse/0.4.1:
    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
@ -1470,14 +1339,6 @@ packages:
    dev: false
    optional: true

-  /jsonfile/6.1.0:
-    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
-    dependencies:
-      universalify: 2.0.0
-    optionalDependencies:
-      graceful-fs: 4.2.9
-    dev: false
-
  /jsprim/1.4.2:
    resolution: {integrity: sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==}
    engines: {node: '>=0.6.0'}
@ -1510,24 +1371,21 @@ packages:
  /lilconfig/2.0.4:
    resolution: {integrity: sha512-bfTIN7lEsiooCocSISTWXkiWJkRqtL9wYtYy+8EK3Y41qh3mpwPU0ycTOgjdY9ErwXCc8QyrQp82bdL0Xkm9yA==}
    engines: {node: '>=10'}
-    dev: false
+    dev: true

  /lines-and-columns/1.2.4:
    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    dev: false
+    dev: true

  /lodash.sortby/4.7.0:
    resolution: {integrity: sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=}
    dev: false
    optional: true

-  /lodash.topath/4.5.2:
-    resolution: {integrity: sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=}
-    dev: false
-
  /lodash/4.17.21:
    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
    dev: false
+    optional: true

  /lru-cache/6.0.0:
    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
@ -1553,7 +1411,6 @@ packages:
  /merge2/1.4.1:
    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
    engines: {node: '>= 8'}
-    dev: false

  /micromatch/4.0.4:
    resolution: {integrity: sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==}
@ -1561,7 +1418,6 @@ packages:
    dependencies:
      braces: 3.0.2
      picomatch: 2.3.1
-    dev: false

  /mime-db/1.51.0:
    resolution: {integrity: sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==}
@ -1594,7 +1450,6 @@ packages:

  /minimist/1.2.5:
    resolution: {integrity: sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==}
-    dev: false

  /minipass/3.1.6:
    resolution: {integrity: sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==}
@ -1627,11 +1482,6 @@ packages:
    dev: false
    optional: true

-  /modern-normalize/1.1.0:
-    resolution: {integrity: sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==}
-    engines: {node: '>=6'}
-    dev: false
-
  /mri/1.2.0:
    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
    engines: {node: '>=4'}
@ -1649,12 +1499,7 @@ packages:
    resolution: {integrity: sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==}
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
    hasBin: true
-
-  /node-emoji/1.11.0:
-    resolution: {integrity: sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==}
-    dependencies:
-      lodash: 4.17.21
-    dev: false
+    dev: true

  /node-fetch/2.6.7:
    resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
@ -1685,7 +1530,6 @@ packages:
  /normalize-path/3.0.0:
    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
    engines: {node: '>=0.10.0'}
-    dev: false

  /normalize-range/0.1.2:
    resolution: {integrity: sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=}
@ -1720,11 +1564,12 @@ packages:
    resolution: {integrity: sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=}
    engines: {node: '>=0.10.0'}
    dev: false
+    optional: true

  /object-hash/2.2.0:
    resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==}
    engines: {node: '>= 6'}
-    dev: false
+    dev: true

  /once/1.4.0:
    resolution: {integrity: sha1-WDsap3WWHUsROsF9nFC6753Xa9E=}
@ -1750,7 +1595,6 @@ packages:
    engines: {node: '>=6'}
    dependencies:
      callsites: 3.1.0
-    dev: false

  /parse-json/5.2.0:
    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
@ -1760,7 +1604,7 @@ packages:
      error-ex: 1.3.2
      json-parse-even-better-errors: 2.3.1
      lines-and-columns: 1.2.4
-    dev: false
+    dev: true

  /parse5/5.1.0:
    resolution: {integrity: sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==}
@ -1774,11 +1618,12 @@ packages:

  /path-parse/1.0.7:
    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+    dev: true

  /path-type/4.0.0:
    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
    engines: {node: '>=8'}
-    dev: false
+    dev: true

  /performance-now/2.1.0:
    resolution: {integrity: sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=}
@ -1801,21 +1646,15 @@ packages:
    dev: false
    optional: true

-  /postcss-functions/3.0.0:
-    resolution: {integrity: sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=}
-    dependencies:
-      glob: 7.2.0
-      object-assign: 4.1.1
-      postcss: 6.0.23
-      postcss-value-parser: 3.3.1
-    dev: false
-
-  /postcss-js/2.0.3:
-    resolution: {integrity: sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==}
+  /postcss-js/4.0.0_postcss@8.4.6:
+    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: 7.0.39
-    dev: false
+      postcss: 8.4.6
+    dev: true

  /postcss-load-config/3.1.1:
    resolution: {integrity: sha512-c/9XYboIbSEUZpiD1UQD0IKiUe8n9WHYV7YFe7X7J+ZwCsEKkUJSFWjS9hBU1RR9THR7jMXst8sxiqP0jjo2mg==}
@ -1828,14 +1667,7 @@ packages:
    dependencies:
      lilconfig: 2.0.4
      yaml: 1.10.2
-    dev: false
-
-  /postcss-nested/4.2.3:
-    resolution: {integrity: sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==}
-    dependencies:
-      postcss: 7.0.39
-      postcss-selector-parser: 6.0.9
-    dev: false
+    dev: true

  /postcss-nested/5.0.6_postcss@8.4.6:
    resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
@ -1853,23 +1685,10 @@ packages:
    dependencies:
      cssesc: 3.0.0
      util-deprecate: 1.0.2
-
-  /postcss-value-parser/3.3.1:
-    resolution: {integrity: sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==}
-    dev: false
+    dev: true

  /postcss-value-parser/4.2.0:
    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: false
-
-  /postcss/6.0.23:
-    resolution: {integrity: sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==}
-    engines: {node: '>=4.0.0'}
-    dependencies:
-      chalk: 2.4.2
-      source-map: 0.6.1
-      supports-color: 5.5.0
-    dev: false

  /postcss/7.0.39:
    resolution: {integrity: sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==}
@ -1886,6 +1705,7 @@ packages:
      nanoid: 3.2.0
      picocolors: 1.0.0
      source-map-js: 1.0.2
+    dev: true

  /prelude-ls/1.1.2:
    resolution: {integrity: sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=}
@ -1909,11 +1729,6 @@ packages:
    hasBin: true
    dev: false

-  /pretty-hrtime/1.0.3:
-    resolution: {integrity: sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=}
-    engines: {node: '>= 0.8'}
-    dev: false
-
  /psl/1.8.0:
    resolution: {integrity: sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==}
    dev: false
@ -1925,16 +1740,6 @@ packages:
    dev: false
    optional: true

-  /purgecss/4.1.3:
-    resolution: {integrity: sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==}
-    hasBin: true
-    dependencies:
-      commander: 8.3.0
-      glob: 7.2.0
-      postcss: 8.4.6
-      postcss-selector-parser: 6.0.9
-    dev: false
-
  /qs/6.5.3:
    resolution: {integrity: sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==}
    engines: {node: '>=0.6'}
@ -1943,12 +1748,11 @@ packages:

  /queue-microtask/1.2.3:
    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-    dev: false

  /quick-lru/5.1.1:
    resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
    engines: {node: '>=10'}
-    dev: false
+    dev: true

  /readable-stream/3.6.0:
    resolution: {integrity: sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==}
@ -1965,14 +1769,6 @@ packages:
    engines: {node: '>=8.10.0'}
    dependencies:
      picomatch: 2.3.1
-    dev: false
-
-  /reduce-css-calc/2.1.8:
-    resolution: {integrity: sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==}
-    dependencies:
-      css-unit-converter: 1.1.2
-      postcss-value-parser: 3.3.1
-    dev: false

  /request-promise-core/1.1.4_request@2.88.2:
    resolution: {integrity: sha512-TTbAfBBRdWD7aNNOoVOBH4pN/KigV6LyapYNNlAPA8JwbovRti1E88m3sYAwsLi5ryhPKsE9APwnjFTgdUjTpw==}
@ -2034,7 +1830,6 @@ packages:
  /resolve-from/4.0.0:
    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
    engines: {node: '>=4'}
-    dev: false

  /resolve/1.22.0:
    resolution: {integrity: sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==}
@ -2043,19 +1838,11 @@ packages:
      is-core-module: 2.8.1
      path-parse: 1.0.7
      supports-preserve-symlinks-flag: 1.0.0
+    dev: true

  /reusify/1.0.4:
    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-    dev: false
-
-  /rgb-regex/1.0.1:
-    resolution: {integrity: sha1-wODWiC3w4jviVKR16O3UGRX+rrE=}
-    dev: false
-
-  /rgba-regex/1.0.0:
-    resolution: {integrity: sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=}
-    dev: false

  /rimraf/2.7.1:
    resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==}
@ -2070,6 +1857,7 @@ packages:
    dependencies:
      glob: 7.2.0
    dev: false
+    optional: true

  /rollup/2.66.1:
    resolution: {integrity: sha512-crSgLhSkLMnKr4s9iZ/1qJCplgAgrRY+igWv8KhG/AjKOJ0YX/WpmANyn8oxrw+zenF3BXWDLa7Xl/QZISH+7w==}
@ -2083,7 +1871,6 @@ packages:
    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
    dependencies:
      queue-microtask: 1.2.3
-    dev: false

  /rw/1.3.3:
    resolution: {integrity: sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=}
@ -2161,12 +1948,6 @@ packages:
    dev: false
    optional: true

-  /simple-swizzle/0.2.2:
-    resolution: {integrity: sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=}
-    dependencies:
-      is-arrayish: 0.3.2
-    dev: false
-
  /sorcery/0.10.0:
    resolution: {integrity: sha1-iukK19fLBfxZ8asMY3hF1cFaUrc=}
    hasBin: true
@ -2180,6 +1961,7 @@ packages:
  /source-map-js/1.0.2:
    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
    engines: {node: '>=0.10.0'}
+    dev: true

  /source-map/0.6.1:
    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
@ -2254,18 +2036,19 @@ packages:
    engines: {node: '>=4'}
    dependencies:
      has-flag: 3.0.0
-    dev: false
+    dev: true

  /supports-color/7.2.0:
    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
    engines: {node: '>=8'}
    dependencies:
      has-flag: 4.0.0
-    dev: false
+    dev: true

  /supports-preserve-symlinks-flag/1.0.0:
    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
    engines: {node: '>= 0.4'}
+    dev: true

  /svelte-check/2.4.1_svelte@3.46.3:
    resolution: {integrity: sha512-xhf3ShP5rnRwBokrgTBJ/0cO9QIc1DAVu1NWNRTfCDsDBNjGmkS3HgitgUadRuoMKj1+irZR/yHJ+Uqobnkbrw==}
@ -2419,6 +2202,40 @@ packages:
    dev: false
    optional: true

+  /tailwindcss/3.0.19_autoprefixer@9.8.8+postcss@8.4.6:
+    resolution: {integrity: sha512-rjsdfz/qZya5xQ0OVynEMETgWq1CacmftgMYeXXh6bRM5vxsNwRSbMJsCCIjq/w67om9VP/AFMolOwiE+5VKig==}
+    engines: {node: '>=12.13.0'}
+    hasBin: true
+    peerDependencies:
+      autoprefixer: ^10.0.2
+      postcss: ^8.0.9
+    dependencies:
+      arg: 5.0.1
+      autoprefixer: 9.8.8
+      chalk: 4.1.2
+      chokidar: 3.5.3
+      color-name: 1.1.4
+      cosmiconfig: 7.0.1
+      detective: 5.2.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.2.11
+      glob-parent: 6.0.2
+      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-load-config: 3.1.1
+      postcss-nested: 5.0.6_postcss@8.4.6
+      postcss-selector-parser: 6.0.9
+      postcss-value-parser: 4.2.0
+      quick-lru: 5.1.1
+      resolve: 1.22.0
+    transitivePeerDependencies:
+      - ts-node
+    dev: true
+
  /tar/6.1.11:
    resolution: {integrity: sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==}
    engines: {node: '>= 10'}
@ -2432,19 +2249,11 @@ packages:
    dev: false
    optional: true

-  /tmp/0.2.1:
-    resolution: {integrity: sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==}
-    engines: {node: '>=8.17.0'}
-    dependencies:
-      rimraf: 3.0.2
-    dev: false
-
  /to-regex-range/5.0.1:
    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
    engines: {node: '>=8.0'}
    dependencies:
      is-number: 7.0.0
-    dev: false

  /tough-cookie/2.5.0:
    resolution: {integrity: sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==}
@ -2524,11 +2333,6 @@ packages:
    hasBin: true
    dev: false

-  /universalify/2.0.0:
-    resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
-    engines: {node: '>= 10.0.0'}
-    dev: false
-
  /uri-js/4.4.1:
    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
    dependencies:
@ -2679,7 +2483,7 @@ packages:
  /xtend/4.0.2:
    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
    engines: {node: '>=0.4'}
-    dev: false
+    dev: true

  /yallist/4.0.0:
    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
@ -2689,4 +2493,4 @@ packages:
  /yaml/1.10.2:
    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
    engines: {node: '>= 6'}
-    dev: false
+    dev: true