From bd481adbfc5dedce0db9ee5ac7bb2097048a767a Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Mon, 3 Jul 2023 09:33:24 +0200
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20Forked=20svelte-select=20to=20?=
 =?UTF-8?q?fix=20overflow=20issues=20using=20a=20po=E2=80=A6=20(#1778)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): Forked svelte-select to fix overflow issues using a portal

* fix(frontend): fix event bubble

* fix(frontend): fix build

* fix(frontend): Remove uncessary support for multiple values

* fix(frontend): conditional portal

* fix(frontend): conditional portal

* fix(frontend): fix resourcepicker

* fix(frontend): AppMultiSelect fix

* fix(frontend): fix build

* fix(frontend): AppMultiSelect fix
---
 frontend/package-lock.json                    |   75 +-
 frontend/package.json                         |    3 +-
 .../src/lib/components/ResourcePicker.svelte  |    2 +-
 .../src/lib/components/ScriptPicker.svelte    |    3 +-
 .../components/inputs/AppMultiSelect.svelte   |   81 +-
 .../apps/components/inputs/AppSelect.svelte   |    2 +-
 .../apps/svelte-select/lib/ChevronIcon.svelte |   18 +
 .../apps/svelte-select/lib/ClearIcon.svelte   |   22 +
 .../lib/ConditionalPortal.svelte              |   11 +
 .../apps/svelte-select/lib/LoadingIcon.svelte |   34 +
 .../apps/svelte-select/lib/Select.svelte      | 1112 +++++++++++++++++
 .../apps/svelte-select/lib/filter.js          |   32 +
 .../apps/svelte-select/lib/get-items.js       |   30 +
 .../apps/svelte-select/lib/index.js           |    1 +
 .../apps/svelte-select/lib/tailwind.css       |  130 ++
 15 files changed, 1491 insertions(+), 65 deletions(-)
 create mode 100644 frontend/src/lib/components/apps/svelte-select/lib/ChevronIcon.svelte
 create mode 100644 frontend/src/lib/components/apps/svelte-select/lib/ClearIcon.svelte
 create mode 100644 frontend/src/lib/components/apps/svelte-select/lib/ConditionalPortal.svelte
 create mode 100644 frontend/src/lib/components/apps/svelte-select/lib/LoadingIcon.svelte
 create mode 100644 frontend/src/lib/components/apps/svelte-select/lib/Select.svelte
 create mode 100644 frontend/src/lib/components/apps/svelte-select/lib/filter.js
 create mode 100644 frontend/src/lib/components/apps/svelte-select/lib/get-items.js
 create mode 100644 frontend/src/lib/components/apps/svelte-select/lib/index.js
 create mode 100644 frontend/src/lib/components/apps/svelte-select/lib/tailwind.css

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4775af3b3d..347949a550 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -34,7 +34,6 @@
 				"svelte-chartjs": "^3.1.0",
 				"svelte-dnd-action": "^0.9.22",
 				"svelte-portal": "^2.2.0",
-				"svelte-select": "^5.6.1",
 				"svelte-timezone-picker": "^2.0.3",
 				"tailwind-merge": "^1.12.0",
 				"vscode-ws-jsonrpc": "3.0.0",
@@ -44,6 +43,7 @@
 				"yjs": "^13.6.4"
 			},
 			"devDependencies": {
+				"@floating-ui/core": "^1.3.1",
 				"@playwright/test": "^1.34.3",
 				"@rgossiaux/svelte-headlessui": "^1.0.2",
 				"@sveltejs/adapter-static": "^2.0.2",
@@ -81,6 +81,7 @@
 				"svelte-awesome": "^3.2.0",
 				"svelte-awesome-color-picker": "^2.4.5",
 				"svelte-check": "^3.4.3",
+				"svelte-floating-ui": "^1.5.3",
 				"svelte-highlight": "^7.3.0",
 				"svelte-multiselect": "^8.6.2",
 				"svelte-overlay": "^1.4.1",
@@ -452,16 +453,18 @@
 			}
 		},
 		"node_modules/@floating-ui/core": {
-			"version": "1.2.5",
-			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.5.tgz",
-			"integrity": "sha512-qrcbyfnRVziRlB6IYwjCopYhO7Vud750JlJyuljruIXcPxr22y8zdckcJGsuOdnQ639uVD1tTXddrcH3t3QYIQ=="
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz",
+			"integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==",
+			"dev": true
 		},
 		"node_modules/@floating-ui/dom": {
-			"version": "1.2.5",
-			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.5.tgz",
-			"integrity": "sha512-+sAUfpQ3Frz+VCbPCqj+cZzvEESy3fjSeT/pDWkYCWOBXYNNKZfuVsHuv8/JO2zze8+Eb/Q7a6hZVgzS81fLbQ==",
+			"version": "1.4.3",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.4.3.tgz",
+			"integrity": "sha512-nB/68NyaQlcdY22L+Fgd1HERQ7UGv7XFN+tPxwrEfQL4nKtAP/jIZnZtpUlXbtV+VEGHh6W/63Gy2C5biWI3sA==",
+			"dev": true,
 			"dependencies": {
-				"@floating-ui/core": "^1.2.4"
+				"@floating-ui/core": "^1.3.1"
 			}
 		},
 		"node_modules/@fortawesome/fontawesome-common-types": {
@@ -7143,12 +7146,13 @@
 			}
 		},
 		"node_modules/svelte-floating-ui": {
-			"version": "1.2.8",
-			"resolved": "https://registry.npmjs.org/svelte-floating-ui/-/svelte-floating-ui-1.2.8.tgz",
-			"integrity": "sha512-8Ifi5CD2Ui7FX7NjJRmutFtXjrB8T/FMNoS2H8P81t5LHK4I9G4NIs007rLWG/nRl7y+zJUXa3tWuTjYXw/O5A==",
+			"version": "1.5.3",
+			"resolved": "https://registry.npmjs.org/svelte-floating-ui/-/svelte-floating-ui-1.5.3.tgz",
+			"integrity": "sha512-yjLeRQ4SNcICbMabp5S2cXc5ubBd2eua+swfTqqGBeg8ZrUvotZYK8jsRWETl/3RgLQsaZbEYKx8OmLA3wL/yw==",
+			"dev": true,
 			"dependencies": {
-				"@floating-ui/core": "^1.1.0",
-				"@floating-ui/dom": "^1.1.0"
+				"@floating-ui/core": "^1.2.4",
+				"@floating-ui/dom": "^1.2.4"
 			}
 		},
 		"node_modules/svelte-highlight": {
@@ -7282,15 +7286,6 @@
 			"integrity": "sha512-fLkhfnyEc4uMOCZCl8IPyC0e9lujrjqdSyrKw28Y8j99YUPZR+pHnSxde7PqhM0ST6eyO4ugh2nFnLZTIoG9aQ==",
 			"dev": true
 		},
-		"node_modules/svelte-select": {
-			"version": "5.6.1",
-			"resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-5.6.1.tgz",
-			"integrity": "sha512-Powj91VAWyaNMSSOQ0E29UMTw/ExWsHEsA83H7yQgfji2S2DhG6Rs5qZHslZ+ihbCPxXel5uEzwLsSqDABkQDw==",
-			"dependencies": {
-				"@floating-ui/dom": "^1.2.1",
-				"svelte-floating-ui": "1.2.8"
-			}
-		},
 		"node_modules/svelte-splitpanes": {
 			"version": "0.7.14",
 			"resolved": "https://registry.npmjs.org/svelte-splitpanes/-/svelte-splitpanes-0.7.14.tgz",
@@ -8394,16 +8389,18 @@
 			"dev": true
 		},
 		"@floating-ui/core": {
-			"version": "1.2.5",
-			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.5.tgz",
-			"integrity": "sha512-qrcbyfnRVziRlB6IYwjCopYhO7Vud750JlJyuljruIXcPxr22y8zdckcJGsuOdnQ639uVD1tTXddrcH3t3QYIQ=="
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz",
+			"integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==",
+			"dev": true
 		},
 		"@floating-ui/dom": {
-			"version": "1.2.5",
-			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.5.tgz",
-			"integrity": "sha512-+sAUfpQ3Frz+VCbPCqj+cZzvEESy3fjSeT/pDWkYCWOBXYNNKZfuVsHuv8/JO2zze8+Eb/Q7a6hZVgzS81fLbQ==",
+			"version": "1.4.3",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.4.3.tgz",
+			"integrity": "sha512-nB/68NyaQlcdY22L+Fgd1HERQ7UGv7XFN+tPxwrEfQL4nKtAP/jIZnZtpUlXbtV+VEGHh6W/63Gy2C5biWI3sA==",
+			"dev": true,
 			"requires": {
-				"@floating-ui/core": "^1.2.4"
+				"@floating-ui/core": "^1.3.1"
 			}
 		},
 		"@fortawesome/fontawesome-common-types": {
@@ -13253,12 +13250,13 @@
 			"requires": {}
 		},
 		"svelte-floating-ui": {
-			"version": "1.2.8",
-			"resolved": "https://registry.npmjs.org/svelte-floating-ui/-/svelte-floating-ui-1.2.8.tgz",
-			"integrity": "sha512-8Ifi5CD2Ui7FX7NjJRmutFtXjrB8T/FMNoS2H8P81t5LHK4I9G4NIs007rLWG/nRl7y+zJUXa3tWuTjYXw/O5A==",
+			"version": "1.5.3",
+			"resolved": "https://registry.npmjs.org/svelte-floating-ui/-/svelte-floating-ui-1.5.3.tgz",
+			"integrity": "sha512-yjLeRQ4SNcICbMabp5S2cXc5ubBd2eua+swfTqqGBeg8ZrUvotZYK8jsRWETl/3RgLQsaZbEYKx8OmLA3wL/yw==",
+			"dev": true,
 			"requires": {
-				"@floating-ui/core": "^1.1.0",
-				"@floating-ui/dom": "^1.1.0"
+				"@floating-ui/core": "^1.2.4",
+				"@floating-ui/dom": "^1.2.4"
 			}
 		},
 		"svelte-highlight": {
@@ -13334,15 +13332,6 @@
 			"integrity": "sha512-fLkhfnyEc4uMOCZCl8IPyC0e9lujrjqdSyrKw28Y8j99YUPZR+pHnSxde7PqhM0ST6eyO4ugh2nFnLZTIoG9aQ==",
 			"dev": true
 		},
-		"svelte-select": {
-			"version": "5.6.1",
-			"resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-5.6.1.tgz",
-			"integrity": "sha512-Powj91VAWyaNMSSOQ0E29UMTw/ExWsHEsA83H7yQgfji2S2DhG6Rs5qZHslZ+ihbCPxXel5uEzwLsSqDABkQDw==",
-			"requires": {
-				"@floating-ui/dom": "^1.2.1",
-				"svelte-floating-ui": "1.2.8"
-			}
-		},
 		"svelte-splitpanes": {
 			"version": "0.7.14",
 			"resolved": "https://registry.npmjs.org/svelte-splitpanes/-/svelte-splitpanes-0.7.14.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index e0146803ed..2e68ad3f7b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,6 +16,7 @@
 		"test": "playwright test --config=tests-out/playwright.config.js"
 	},
 	"devDependencies": {
+		"@floating-ui/core": "^1.3.1",
 		"@playwright/test": "^1.34.3",
 		"@rgossiaux/svelte-headlessui": "^1.0.2",
 		"@sveltejs/adapter-static": "^2.0.2",
@@ -53,6 +54,7 @@
 		"svelte-awesome": "^3.2.0",
 		"svelte-awesome-color-picker": "^2.4.5",
 		"svelte-check": "^3.4.3",
+		"svelte-floating-ui": "^1.5.3",
 		"svelte-highlight": "^7.3.0",
 		"svelte-multiselect": "^8.6.2",
 		"svelte-overlay": "^1.4.1",
@@ -94,7 +96,6 @@
 		"svelte-chartjs": "^3.1.0",
 		"svelte-dnd-action": "^0.9.22",
 		"svelte-portal": "^2.2.0",
-		"svelte-select": "^5.6.1",
 		"svelte-timezone-picker": "^2.0.3",
 		"tailwind-merge": "^1.12.0",
 		"vscode-ws-jsonrpc": "3.0.0",
diff --git a/frontend/src/lib/components/ResourcePicker.svelte b/frontend/src/lib/components/ResourcePicker.svelte
index 9208179b63..138dd80955 100644
--- a/frontend/src/lib/components/ResourcePicker.svelte
+++ b/frontend/src/lib/components/ResourcePicker.svelte
@@ -4,7 +4,7 @@
 	import { faPen, faPlus, faRotateRight } from '@fortawesome/free-solid-svg-icons'
 	import { createEventDispatcher } from 'svelte'
 	import Icon from 'svelte-awesome'
-	import Select from 'svelte-select'
+	import Select from './apps/svelte-select/lib/index'
 	import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults'
 	import AppConnect from './AppConnect.svelte'
 	import { Button } from './common'
diff --git a/frontend/src/lib/components/ScriptPicker.svelte b/frontend/src/lib/components/ScriptPicker.svelte
index 7aba40b42e..18f8cae332 100644
--- a/frontend/src/lib/components/ScriptPicker.svelte
+++ b/frontend/src/lib/components/ScriptPicker.svelte
@@ -4,7 +4,7 @@
 	import { hubScripts, workspaceStore } from '$lib/stores'
 	import { createEventDispatcher } from 'svelte'
 
-	import Select from 'svelte-select'
+	import Select from './apps/svelte-select/lib/index'
 
 	import { getScriptByPath } from '$lib/scripts'
 	import { Button, Drawer, DrawerContent } from './common'
@@ -97,6 +97,7 @@
 			placeholder="Pick a {itemKind}"
 			inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
 			containerStyles={SELECT_INPUT_DEFAULT_STYLE.containerStyles}
+			portal={false}
 		/>
 	{/if}
 
diff --git a/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
index 7e12578a24..94dd89b80e 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
-	// import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults'
+	import { getContext, onMount } from 'svelte'
 	import { initConfig, initOutput } from '../../editor/appUtils'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { concatCustomCss } from '../../utils'
@@ -10,12 +9,18 @@
 	import ResolveConfig from '../helpers/ResolveConfig.svelte'
 	// @ts-ignore
 	import MultiSelect from 'svelte-multiselect'
+	import Portal from 'svelte-portal'
+	import { createFloatingActions } from 'svelte-floating-ui'
 
 	export let id: string
 	export let configuration: RichConfigurations
 	export let customCss: ComponentCustomCSS<'multiselectcomponent'> | undefined = undefined
 	export let render: boolean
 
+	const [floatingRef, floatingContent] = createFloatingActions({
+		strategy: 'absolute'
+	})
+
 	const { app, worldStore, selectedComponent, componentControl } =
 		getContext<AppViewerContext>('AppViewerContext')
 	let items: string[]
@@ -62,7 +67,23 @@
 	$: css = concatCustomCss($app.css?.multiselectcomponent, customCss)
 
 	$: outerDiv && css?.multiselect?.style && outerDiv.setAttribute('style', css?.multiselect?.style)
+
 	let outerDiv: HTMLDivElement | undefined = undefined
+	let portalRef: HTMLDivElement | undefined = undefined
+
+	onMount(() => {
+		// Find ul element with class 'options' within the outerDiv
+		const ul = outerDiv?.querySelector('.options')
+
+		if (ul) {
+			// Move the ul element to the portal
+			portalRef?.appendChild(ul)
+		}
+	})
+
+	let w = 0
+	let h = 0
+	let open = false
 </script>
 
 {#each Object.keys(components['multiselectcomponent'].initialData.configuration) as key (key)}
@@ -84,23 +105,46 @@
 				e.stopPropagation()
 			}
 		}}
+		use:floatingRef
+		bind:clientWidth={w}
+		bind:clientHeight={h}
 	>
 		{#if !value || Array.isArray(value)}
-			<MultiSelect
-				bind:outerDiv
-				outerDivClass={`${resolvedConfig.allowOverflow ? '' : 'h-full'}`}
-				ulSelectedClass={`${resolvedConfig.allowOverflow ? '' : 'overflow-auto max-h-full'} `}
-				bind:selected={value}
-				on:change={() => {
-					outputs?.result.set([...(value ?? [])])
-				}}
-				options={Array.isArray(items) ? items : []}
-				placeholder={resolvedConfig.placeholder}
-				allowUserOptions={resolvedConfig.create}
-				on:open={() => {
-					$selectedComponent = [id]
-				}}
-			/>
+			<div style={`height:${h}px;`}>
+				<MultiSelect
+					bind:outerDiv
+					outerDivClass={`${resolvedConfig.allowOverflow ? '' : 'h-full'}`}
+					ulSelectedClass={`${resolvedConfig.allowOverflow ? '' : 'overflow-auto max-h-full'} `}
+					ulOptionsClass={'p-2'}
+					bind:selected={value}
+					on:change={() => {
+						outputs?.result.set([...(value ?? [])])
+					}}
+					options={Array.isArray(items) ? items : []}
+					placeholder={resolvedConfig.placeholder}
+					allowUserOptions={resolvedConfig.create}
+					on:open={() => {
+						$selectedComponent = [id]
+						open = true
+					}}
+					on:close={() => {
+						open = false
+					}}
+				>
+					<div slot="option" let:option class="hover:bg-gray-200 p-1 cursor-pointer z-50">
+						{option}
+					</div>
+				</MultiSelect>
+				<Portal>
+					<div use:floatingContent class="z1000" hidden={!open}>
+						<div
+							bind:this={portalRef}
+							class="bg-white w-full border shadow-md rounded-md"
+							style={`min-width: ${w}px; `}
+						/>
+					</div>
+				</Portal>
+			</div>
 		{:else}
 			Value {value} is not an array
 		{/if}
@@ -112,7 +156,8 @@
 		padding: 0 !important;
 		overflow: auto;
 	}
-	.svelte-select-list {
+
+	.z1000 {
 		z-index: 1000 !important;
 	}
 </style>
diff --git a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
index dd6a187ed8..4cc3efca43 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
-	import Select from 'svelte-select'
+	import Select from '../../svelte-select/lib/index'
 
 	import type {
 		AppViewerContext,
diff --git a/frontend/src/lib/components/apps/svelte-select/lib/ChevronIcon.svelte b/frontend/src/lib/components/apps/svelte-select/lib/ChevronIcon.svelte
new file mode 100644
index 0000000000..000e802ab7
--- /dev/null
+++ b/frontend/src/lib/components/apps/svelte-select/lib/ChevronIcon.svelte
@@ -0,0 +1,18 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" focusable="false" aria-hidden="true">
+	<path
+		fill="currentColor"
+		d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747
+          3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0
+          1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502
+          0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0
+          0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+	/>
+</svg>
+
+<style>
+	svg {
+		width: var(--chevron-icon-width, 20px);
+		height: var(--chevron-icon-width, 20px);
+		color: var(--chevron-icon-colour, currentColor);
+	}
+</style>
diff --git a/frontend/src/lib/components/apps/svelte-select/lib/ClearIcon.svelte b/frontend/src/lib/components/apps/svelte-select/lib/ClearIcon.svelte
new file mode 100644
index 0000000000..c451f01c45
--- /dev/null
+++ b/frontend/src/lib/components/apps/svelte-select/lib/ClearIcon.svelte
@@ -0,0 +1,22 @@
+<svg
+	width="100%"
+	height="100%"
+	viewBox="-2 -2 50 50"
+	focusable="false"
+	aria-hidden="true"
+	role="presentation"
+>
+	<path
+		fill="currentColor"
+		d="M34.923,37.251L24,26.328L13.077,37.251L9.436,33.61l10.923-10.923L9.436,11.765l3.641-3.641L24,19.047L34.923,8.124
+    l3.641,3.641L27.641,22.688L38.564,33.61L34.923,37.251z"
+	/>
+</svg>
+
+<style>
+	svg {
+		width: var(--clear-icon-width, 20px);
+		height: var(--clear-icon-width, 20px);
+		color: var(--clear-icon-color, currentColor);
+	}
+</style>
diff --git a/frontend/src/lib/components/apps/svelte-select/lib/ConditionalPortal.svelte b/frontend/src/lib/components/apps/svelte-select/lib/ConditionalPortal.svelte
new file mode 100644
index 0000000000..d92f75a7b6
--- /dev/null
+++ b/frontend/src/lib/components/apps/svelte-select/lib/ConditionalPortal.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import Portal from 'svelte-portal'
+
+	export let condition = false
+</script>
+
+{#if condition}
+	<Portal><slot /></Portal>
+{:else}
+	<slot />
+{/if}
diff --git a/frontend/src/lib/components/apps/svelte-select/lib/LoadingIcon.svelte b/frontend/src/lib/components/apps/svelte-select/lib/LoadingIcon.svelte
new file mode 100644
index 0000000000..2feebbb525
--- /dev/null
+++ b/frontend/src/lib/components/apps/svelte-select/lib/LoadingIcon.svelte
@@ -0,0 +1,34 @@
+<svg class="loading" viewBox="25 25 50 50">
+	<circle
+		class="circle_path"
+		cx="50"
+		cy="50"
+		r="20"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="5"
+		stroke-miterlimit="10"
+	/>
+</svg>
+
+<style>
+	.loading {
+		width: var(--spinner-width, 20px);
+		height: var(--spinner-height, 20px);
+		color: var(--spinner-color, var(--icons-color));
+		animation: rotate 0.75s linear infinite;
+		transform-origin: center center;
+		transform: none;
+	}
+
+	.circle_path {
+		stroke-dasharray: 90;
+		stroke-linecap: round;
+	}
+
+	@keyframes rotate {
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+</style>
diff --git a/frontend/src/lib/components/apps/svelte-select/lib/Select.svelte b/frontend/src/lib/components/apps/svelte-select/lib/Select.svelte
new file mode 100644
index 0000000000..408c288362
--- /dev/null
+++ b/frontend/src/lib/components/apps/svelte-select/lib/Select.svelte
@@ -0,0 +1,1112 @@
+<script>
+	// @ts-nocheck
+	import { beforeUpdate, createEventDispatcher, onDestroy, onMount } from 'svelte'
+	import { offset, flip, shift } from '@floating-ui/dom'
+	import { createFloatingActions } from 'svelte-floating-ui'
+
+	const dispatch = createEventDispatcher()
+
+	import _filter from './filter'
+	import _getItems from './get-items'
+
+	import ChevronIcon from './ChevronIcon.svelte'
+	import ClearIcon from './ClearIcon.svelte'
+	import LoadingIcon from './LoadingIcon.svelte'
+	import ConditionalPortal from './ConditionalPortal.svelte'
+
+	export let portal = true
+
+	export let justValue = null // read-only
+
+	export let filter = _filter
+	export let getItems = _getItems
+
+	export let id = null
+	export let name = null
+	export let container = undefined
+	export let input = undefined
+
+	export let disabled = false
+	export let focused = false
+	export let value = undefined
+	export let filterText = ''
+	export let placeholder = 'Please select'
+	export let items = undefined
+	export let label = 'label'
+	export let itemFilter = (label, filterText, option) =>
+		`${label}`.toLowerCase().includes(filterText.toLowerCase())
+	export let groupBy = undefined
+	export let groupFilter = (groups) => groups
+	export let groupHeaderSelectable = false
+	export let itemId = 'value'
+	export let loadOptions = undefined
+	export let containerStyles = ''
+	export let hasError = false
+	export let filterSelectedItems = true
+	export let required = false
+	export let closeListOnChange = true
+
+	export let createGroupHeaderItem = (groupValue, item) => {
+		return {
+			value: groupValue,
+			[label]: groupValue
+		}
+	}
+
+	export const getFilteredItems = () => {
+		return filteredItems
+	}
+
+	export let searchable = true
+	export let inputStyles = ''
+	export let clearable = true
+	export let loading = false
+	export let listOpen = false
+
+	let timeout
+	export let debounce = (fn, wait = 1) => {
+		clearTimeout(timeout)
+		timeout = setTimeout(fn, wait)
+	}
+
+	export let debounceWait = 300
+	export let hideEmptyState = false
+	export let inputAttributes = {}
+	export let listAutoWidth = true
+	export let showChevron = false
+	export let listOffset = 5
+	export let hoverItemIndex = 0
+	export let floatingConfig = {}
+
+	export { containerClasses as class }
+
+	let containerClasses = ''
+	let activeValue
+	let prev_value
+	let prev_filterText
+
+	function setValue() {
+		if (typeof value === 'string') {
+			let item = (items || []).find((item) => item[itemId] === value)
+			value = item || {
+				[itemId]: value,
+				label: value
+			}
+		}
+	}
+
+	let _inputAttributes
+	function assignInputAttributes() {
+		_inputAttributes = Object.assign(
+			{
+				autocapitalize: 'none',
+				autocomplete: 'off',
+				autocorrect: 'off',
+				spellcheck: false,
+				tabindex: 0,
+				type: 'text',
+				'aria-autocomplete': 'list'
+			},
+			inputAttributes
+		)
+
+		if (id) {
+			_inputAttributes['id'] = id
+		}
+
+		if (!searchable) {
+			_inputAttributes['readonly'] = true
+		}
+	}
+
+	function convertStringItemsToObjects(_items) {
+		return _items.map((item, index) => {
+			return {
+				index,
+				value: item,
+				label: `${item}`
+			}
+		})
+	}
+
+	function filterGroupedItems(_items) {
+		const groupValues = []
+		const groups = {}
+
+		_items.forEach((item) => {
+			const groupValue = groupBy(item)
+
+			if (!groupValues.includes(groupValue)) {
+				groupValues.push(groupValue)
+				groups[groupValue] = []
+
+				if (groupValue) {
+					groups[groupValue].push(
+						Object.assign(createGroupHeaderItem(groupValue, item), {
+							id: groupValue,
+							groupHeader: true,
+							selectable: groupHeaderSelectable
+						})
+					)
+				}
+			}
+
+			groups[groupValue].push(Object.assign({ groupItem: !!groupValue }, item))
+		})
+
+		const sortedGroupedItems = []
+
+		groupFilter(groupValues).forEach((groupValue) => {
+			if (groups[groupValue]) sortedGroupedItems.push(...groups[groupValue])
+		})
+
+		return sortedGroupedItems
+	}
+
+	function dispatchSelectedItem() {
+		if (!prev_value || JSON.stringify(value[itemId]) !== JSON.stringify(prev_value[itemId])) {
+			dispatch('input', value)
+		}
+	}
+
+	$: if ((items, value)) setValue()
+	$: if (inputAttributes || !searchable) assignInputAttributes()
+	$: if (value) dispatchSelectedItem()
+	$: if (!focused && input) closeList()
+	$: if (filterText !== prev_filterText) setupFilterText()
+	$: if (listOpen && value && filteredItems) setValueIndexAsHoverIndex()
+	$: dispatchHover(hoverItemIndex)
+
+	function setValueIndexAsHoverIndex() {
+		const valueIndex = filteredItems.findIndex((i) => {
+			return i[itemId] === value[itemId]
+		})
+
+		checkHoverSelectable(valueIndex, true)
+	}
+
+	function dispatchHover(i) {
+		dispatch('hoverItem', i)
+	}
+
+	function checkHoverSelectable(startingIndex = 0, ignoreGroup) {
+		hoverItemIndex = startingIndex < 0 ? 0 : startingIndex
+		if (
+			!ignoreGroup &&
+			groupBy &&
+			filteredItems[hoverItemIndex] &&
+			!filteredItems[hoverItemIndex].selectable
+		) {
+			setHoverIndex(1)
+		}
+	}
+
+	function setupFilterText() {
+		if (!loadOptions && filterText.length === 0) return
+
+		if (loadOptions) {
+			debounce(async function () {
+				loading = true
+				let res = await getItems({
+					dispatch,
+					loadOptions,
+					convertStringItemsToObjects,
+					filterText
+				})
+
+				if (res) {
+					loading = res.loading
+					listOpen = listOpen ? res.listOpen : filterText.length > 0 ? true : false
+					focused = listOpen && res.focused
+					items = groupBy ? filterGroupedItems(res.filteredItems) : res.filteredItems
+				} else {
+					loading = false
+					focused = true
+					listOpen = true
+				}
+			}, debounceWait)
+		} else {
+			listOpen = true
+		}
+	}
+
+	$: hasValue = value
+	$: hideSelectedItem = hasValue && filterText.length > 0
+	$: showClear = hasValue && clearable && !disabled && !loading
+	$: placeholderText = value ? '' : placeholder
+	$: ariaSelection = value ? handleAriaSelection() : ''
+	$: ariaContext = handleAriaContent({ filteredItems, hoverItemIndex, focused, listOpen })
+	$: updateValueDisplay(items)
+	$: justValue = computeJustValue(value, itemId)
+	$: if (prev_value && !value) dispatch('input', value)
+	$: filteredItems = filter({
+		loadOptions,
+		filterText,
+		items,
+		value,
+		itemId,
+		groupBy,
+		label,
+		filterSelectedItems,
+		itemFilter,
+		convertStringItemsToObjects,
+		filterGroupedItems
+	})
+	$: if (listOpen && filteredItems && !value) checkHoverSelectable()
+	$: handleFilterEvent(filteredItems)
+
+	$: if (container && floatingConfig) floatingUpdate(Object.assign(_floatingConfig, floatingConfig))
+	$: listDom = !!list
+	$: listMounted(list, listOpen)
+	$: if (listOpen && container && list) setListWidth()
+	$: scrollToHoverItem = hoverItemIndex
+	$: if (input && listOpen && !focused) handleFocus()
+	$: if (filterText) hoverItemIndex = 0
+
+	function handleFilterEvent(items) {
+		if (listOpen) dispatch('filter', items)
+	}
+
+	beforeUpdate(async () => {
+		prev_value = value
+		prev_filterText = filterText
+	})
+
+	function computeJustValue() {
+		return value ? value[itemId] : value
+	}
+
+	function findItem(selection) {
+		let matchTo = selection ? selection[itemId] : value[itemId]
+		return items.find((item) => item[itemId] === matchTo)
+	}
+
+	function updateValueDisplay(items) {
+		if (!items || items.length === 0 || items.some((item) => typeof item !== 'object')) return
+		if (!value || !value[itemId]) return
+
+		if (Array.isArray(value)) {
+			value = value.map((selection) => findItem(selection) || selection)
+		} else {
+			value = findItem() || value
+		}
+	}
+
+	function handleKeyDown(e) {
+		if (!focused) return
+		e.stopPropagation()
+		switch (e.key) {
+			case 'Escape':
+				e.preventDefault()
+				closeList()
+				break
+			case 'Enter':
+				e.preventDefault()
+
+				if (listOpen) {
+					if (filteredItems.length === 0) break
+					const hoverItem = filteredItems[hoverItemIndex]
+
+					if (value && value[itemId] === hoverItem[itemId]) {
+						closeList()
+						break
+					} else {
+						handleSelect(filteredItems[hoverItemIndex])
+					}
+				}
+
+				break
+			case 'ArrowDown':
+				e.preventDefault()
+
+				if (listOpen) {
+					setHoverIndex(1)
+				} else {
+					listOpen = true
+					activeValue = undefined
+				}
+
+				break
+			case 'ArrowUp':
+				e.preventDefault()
+
+				if (listOpen) {
+					setHoverIndex(-1)
+				} else {
+					listOpen = true
+					activeValue = undefined
+				}
+
+				break
+			case 'Tab':
+				if (listOpen && focused) {
+					if (
+						filteredItems.length === 0 ||
+						(value && value[itemId] === filteredItems[hoverItemIndex][itemId])
+					)
+						return closeList()
+
+					e.preventDefault()
+					handleSelect(filteredItems[hoverItemIndex])
+					closeList()
+				}
+
+				break
+			case 'Backspace':
+				if (filterText.length > 0) return
+
+				break
+			case 'ArrowLeft':
+				if (!value || filterText.length > 0) return
+				if (activeValue === undefined) {
+					activeValue = value.length - 1
+				} else if (value.length > activeValue && activeValue !== 0) {
+					activeValue -= 1
+				}
+				break
+			case 'ArrowRight':
+				if (!value || filterText.length > 0 || activeValue === undefined) return
+				if (activeValue === value.length - 1) {
+					activeValue = undefined
+				} else if (activeValue < value.length - 1) {
+					activeValue += 1
+				}
+				break
+		}
+	}
+
+	function handleFocus(e) {
+		if (focused && input === document?.activeElement) return
+		if (e) dispatch('focus', e)
+		input.focus()
+		focused = true
+	}
+
+	async function handleBlur(e) {
+		if (isScrolling) return
+		if (listOpen || focused) {
+			dispatch('blur', e)
+			closeList()
+			focused = false
+			activeValue = undefined
+			input.blur()
+		}
+	}
+
+	function handleClick() {
+		if (disabled) return
+		listOpen = !listOpen
+	}
+
+	export function handleClear() {
+		dispatch('clear', value)
+		value = undefined
+		closeList()
+		handleFocus()
+	}
+
+	onMount(() => {
+		if (listOpen) focused = true
+		if (focused && input) input.focus()
+	})
+
+	function itemSelected(selection) {
+		if (selection) {
+			filterText = ''
+			const item = Object.assign({}, selection)
+
+			if (item.groupHeader && !item.selectable) return
+			value = value = item
+
+			setTimeout(() => {
+				if (closeListOnChange) closeList()
+				activeValue = undefined
+				dispatch('change', value)
+				dispatch('select', selection)
+			})
+		}
+	}
+
+	function closeList() {
+		filterText = ''
+		listOpen = false
+	}
+
+	export let ariaValues = (values) => {
+		return `Option ${values}, selected.`
+	}
+
+	export let ariaListOpen = (label, count) => {
+		return `You are currently focused on option ${label}. There are ${count} results available.`
+	}
+
+	export let ariaFocused = () => {
+		return `Select is focused, type to refine list, press down to open the menu.`
+	}
+
+	function handleAriaSelection() {
+		let selected = undefined
+		selected = value[label]
+
+		return ariaValues(selected)
+	}
+
+	function handleAriaContent() {
+		if (!filteredItems || filteredItems.length === 0) return ''
+		let _item = filteredItems[hoverItemIndex]
+		if (listOpen && _item) {
+			let count = filteredItems ? filteredItems.length : 0
+			return ariaListOpen(_item[label], count)
+		} else {
+			return ariaFocused()
+		}
+	}
+
+	let list = null
+
+	let isScrollingTimer
+	function handleListScroll() {
+		clearTimeout(isScrollingTimer)
+		isScrollingTimer = setTimeout(() => {
+			isScrolling = false
+		}, 100)
+	}
+
+	function handleClickOutside(event) {
+		if (
+			!listOpen &&
+			!focused &&
+			container &&
+			!container.contains(event.target) &&
+			!list?.contains(event.target)
+		) {
+			handleBlur()
+		}
+	}
+
+	onDestroy(() => {
+		list?.remove()
+	})
+
+	let isScrolling = false
+
+	function handleSelect(item) {
+		if (!item || item.selectable === false) return
+		itemSelected(item)
+	}
+
+	function handleHover(i) {
+		if (isScrolling) return
+		hoverItemIndex = i
+	}
+
+	function handleItemClick(args) {
+		const { item, i } = args
+		if (item?.selectable === false) return
+		if (value && value[itemId] === item[itemId]) return closeList()
+		if (isItemSelectable(item)) {
+			hoverItemIndex = i
+			handleSelect(item)
+		}
+	}
+
+	function setHoverIndex(increment) {
+		let selectableFilteredItems = filteredItems.filter(
+			(item) => !Object.hasOwn(item, 'selectable') || item.selectable === true
+		)
+
+		if (selectableFilteredItems.length === 0) {
+			return (hoverItemIndex = 0)
+		}
+
+		if (increment > 0 && hoverItemIndex === filteredItems.length - 1) {
+			hoverItemIndex = 0
+		} else if (increment < 0 && hoverItemIndex === 0) {
+			hoverItemIndex = filteredItems.length - 1
+		} else {
+			hoverItemIndex = hoverItemIndex + increment
+		}
+
+		const hover = filteredItems[hoverItemIndex]
+
+		if (hover && hover.selectable === false) {
+			if (increment === 1 || increment === -1) setHoverIndex(increment)
+			return
+		}
+	}
+
+	function isItemActive(item, value, itemId) {
+		return value && value[itemId] === item[itemId]
+	}
+
+	function isItemFirst(itemIndex) {
+		return itemIndex === 0
+	}
+
+	function isItemSelectable(item) {
+		return (
+			(item.groupHeader && item.selectable) || item.selectable || !item.hasOwnProperty('selectable')
+		)
+	}
+
+	const activeScroll = scrollAction
+	const hoverScroll = scrollAction
+
+	function scrollAction(node) {
+		return {
+			update(args) {
+				if (args.scroll) {
+					handleListScroll()
+					node.scrollIntoView({ behavior: 'auto', block: 'nearest' })
+				}
+			}
+		}
+	}
+
+	function setListWidth() {
+		const { width } = container.getBoundingClientRect()
+		list.style.width = listAutoWidth ? width + 'px' : 'auto'
+	}
+
+	let _floatingConfig = {
+		strategy: 'absolute',
+		placement: 'bottom-start',
+		middleware: [offset(listOffset), flip(), shift()],
+		autoUpdate: false
+	}
+
+	const [floatingRef, floatingContent, floatingUpdate] = createFloatingActions(_floatingConfig)
+
+	$: if (container && floatingConfig?.autoUpdate === undefined) {
+		_floatingConfig.autoUpdate = true
+	}
+
+	let prefloat = true
+	function listMounted(list, listOpen) {
+		if (!list || !listOpen) return (prefloat = true)
+		setTimeout(() => {
+			prefloat = false
+		}, 0)
+	}
+</script>
+
+<svelte:window on:click={handleClickOutside} on:keydown={handleKeyDown} />
+
+<div
+	class="svelte-select {containerClasses}"
+	class:disabled
+	class:focused
+	class:list-open={listOpen}
+	class:show-chevron={showChevron}
+	class:error={hasError}
+	style={containerStyles}
+	on:pointerup|preventDefault={handleClick}
+	on:mousedown|preventDefault
+	bind:this={container}
+	use:floatingRef
+>
+	{#if listOpen}
+		<ConditionalPortal condition={portal}>
+			<div
+				use:floatingContent
+				bind:this={list}
+				class="svelte-select-list"
+				class:prefloat
+				on:scroll={handleListScroll}
+				on:pointerup|preventDefault|stopPropagation
+				on:pointerdown|preventDefault|stopPropagation
+			>
+				{#if $$slots['list-prepend']}<slot name="list-prepend" />{/if}
+				{#if $$slots.list}<slot name="list" {filteredItems} />
+				{:else if filteredItems.length > 0}
+					{#each filteredItems as item, i}
+						<div
+							on:mouseover={() => handleHover(i)}
+							on:focus={() => handleHover(i)}
+							on:click|stopPropagation={() => handleItemClick({ item, i })}
+							on:keydown|preventDefault|stopPropagation
+							class="list-item"
+							tabindex="-1"
+						>
+							<div
+								use:activeScroll={{ scroll: isItemActive(item, value, itemId), listDom }}
+								use:hoverScroll={{ scroll: scrollToHoverItem === i, listDom }}
+								class="item"
+								class:list-group-title={item.groupHeader}
+								class:active={isItemActive(item, value, itemId)}
+								class:first={isItemFirst(i)}
+								class:hover={hoverItemIndex === i}
+								class:group-item={item.groupItem}
+								class:not-selectable={item?.selectable === false}
+							>
+								<slot name="item" {item} index={i}>
+									{item?.[label]}
+								</slot>
+							</div>
+						</div>
+					{/each}
+				{:else if !hideEmptyState}
+					<slot name="empty">
+						<div class="empty">No options</div>
+					</slot>
+				{/if}
+				{#if $$slots['list-append']}<slot name="list-append" />{/if}
+			</div>
+		</ConditionalPortal>
+	{/if}
+
+	<span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="a11y-text">
+		{#if focused}
+			<span id="aria-selection">{ariaSelection}</span>
+			<span id="aria-context">
+				{ariaContext}
+			</span>
+		{/if}
+	</span>
+
+	<div class="prepend">
+		<slot name="prepend" />
+	</div>
+
+	<div class="value-container">
+		{#if hasValue}
+			<div class="selected-item" class:hide-selected-item={hideSelectedItem}>
+				<slot name="selection" selection={value}>
+					{value[label]}
+				</slot>
+			</div>
+		{/if}
+
+		<input
+			on:keydown={handleKeyDown}
+			on:blur={handleBlur}
+			on:focus={handleFocus}
+			readOnly={!searchable}
+			{..._inputAttributes}
+			bind:this={input}
+			bind:value={filterText}
+			placeholder={placeholderText}
+			style={inputStyles}
+			{disabled}
+		/>
+	</div>
+
+	<div class="indicators">
+		{#if loading}
+			<div class="icon loading" aria-hidden="true">
+				<slot name="loading-icon">
+					<LoadingIcon />
+				</slot>
+			</div>
+		{/if}
+
+		{#if showClear}
+			<button type="button" class="icon clear-select" on:click={handleClear}>
+				<slot name="clear-icon">
+					<ClearIcon />
+				</slot>
+			</button>
+		{/if}
+
+		{#if showChevron}
+			<div class="icon chevron" aria-hidden="true">
+				<slot name="chevron-icon" {listOpen}>
+					<ChevronIcon />
+				</slot>
+			</div>
+		{/if}
+	</div>
+
+	<slot name="input-hidden" {value}>
+		<input {name} type="hidden" value={value ? JSON.stringify(value) : null} />
+	</slot>
+
+	{#if required && (!value || value.length === 0)}
+		<slot name="required" {value}>
+			<select class="required" required tabindex="-1" aria-hidden="true" />
+		</slot>
+	{/if}
+</div>
+
+<style>
+	.svelte-select {
+		/* deprecating camelCase custom props in favour of kebab-case for v5 */
+		--borderRadius: var(--border-radius);
+		--clearSelectColor: var(--clear-select-color);
+		--clearSelectWidth: var(--clear-select-width);
+		--disabledBackground: var(--disabled-background);
+		--disabledBorderColor: var(--disabled-border-color);
+		--disabledColor: var(--disabled-color);
+		--disabledPlaceholderColor: var(--disabled-placeholder-color);
+		--disabledPlaceholderOpacity: var(--disabled-placeholder-opacity);
+		--errorBackground: var(--error-background);
+		--errorBorder: var(--error-border);
+		--groupItemPaddingLeft: var(--group-item-padding-left);
+		--groupTitleColor: var(--group-title-color);
+		--groupTitleFontSize: var(--group-title-font-size);
+		--groupTitleFontWeight: var(--group-title-font-weight);
+		--groupTitlePadding: var(--group-title-padding);
+		--groupTitleTextTransform: var(--group-title-text-transform);
+		--indicatorColor: var(--chevron-color);
+		--indicatorHeight: var(--chevron-height);
+		--indicatorWidth: var(--chevron-width);
+		--inputColor: var(--input-color);
+		--inputLeft: var(--input-left);
+		--inputLetterSpacing: var(--input-letter-spacing);
+		--inputMargin: var(--input-margin);
+		--inputPadding: var(--input-padding);
+		--itemActiveBackground: var(--item-active-background);
+		--itemColor: var(--item-color);
+		--itemFirstBorderRadius: var(--item-first-border-radius);
+		--itemHoverBG: var(--item-hover-bg);
+		--itemHoverColor: var(--item-hover-color);
+		--itemIsActiveBG: var(--item-is-active-bg);
+		--itemIsActiveColor: var(--item-is-active-color);
+		--itemIsNotSelectableColor: var(--item-is-not-selectable-color);
+		--itemPadding: var(--item-padding);
+		--listBackground: var(--list-background);
+		--listBorder: var(--list-border);
+		--listBorderRadius: var(--list-border-radius);
+		--listEmptyColor: var(--list-empty-color);
+		--listEmptyPadding: var(--list-empty-padding);
+		--listEmptyTextAlign: var(--list-empty-text-align);
+		--listMaxHeight: var(--list-max-height);
+		--listPosition: var(--list-position);
+		--listShadow: var(--list-shadow);
+		--listZIndex: var(--list-z-index);
+		--multiItemBG: var(--multi-item-bg);
+		--multiItemBorderRadius: var(--multi-item-border-radius);
+		--multiItemDisabledHoverBg: var(--multi-item-disabled-hover-bg);
+		--multiItemDisabledHoverColor: var(--multi-item-disabled-hover-color);
+		--multiItemHeight: var(--multi-item-height);
+		--multiItemMargin: var(--multi-item-margin);
+		--multiItemPadding: var(--multi-item-padding);
+		--multiSelectInputMargin: var(--multi-select-input-margin);
+		--multiSelectInputPadding: var(--multi-select-input-padding);
+		--multiSelectPadding: var(--multi-select-padding);
+		--placeholderColor: var(--placeholder-color);
+		--placeholderOpacity: var(--placeholder-opacity);
+		--selectedItemPadding: var(--selected-item-padding);
+		--spinnerColor: var(--spinner-color);
+		--spinnerHeight: var(--spinner-height);
+		--spinnerWidth: var(--spinner-width);
+
+		--internal-padding: 0 0 0 16px;
+
+		border: var(--border, 1px solid #d8dbdf);
+		border-radius: var(--border-radius, 6px);
+		min-height: var(--height, 42px);
+		position: relative;
+		display: flex;
+		align-items: stretch;
+		padding: var(--padding, var(--internal-padding));
+		background: var(--background, #fff);
+		margin: var(--margin, 0);
+		width: var(--width, 100%);
+		font-size: var(--font-size, 16px);
+		max-height: var(--max-height);
+	}
+
+	* {
+		box-sizing: var(--box-sizing, border-box);
+	}
+
+	.svelte-select:hover {
+		border: var(--border-hover, 1px solid #b2b8bf);
+	}
+
+	.value-container {
+		display: flex;
+		flex: 1 1 0%;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 5px 10px;
+		padding: var(--value-container-padding, 5px 0);
+		position: relative;
+		overflow: var(--value-container-overflow, hidden);
+		align-self: stretch;
+	}
+
+	.prepend,
+	.indicators {
+		display: flex;
+		flex-shrink: 0;
+		align-items: center;
+	}
+
+	.indicators {
+		position: var(--indicators-position);
+		top: var(--indicators-top);
+		right: var(--indicators-right);
+		bottom: var(--indicators-bottom);
+	}
+
+	input {
+		position: absolute;
+		cursor: default;
+		border: none;
+		color: var(--input-color, var(--item-color));
+		padding: var(--input-padding, 0);
+		letter-spacing: var(--input-letter-spacing, inherit);
+		margin: var(--input-margin, 0);
+		min-width: 10px;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		background: transparent;
+		font-size: var(--font-size, 16px);
+	}
+
+	:not(.multi) > .value-container > input {
+		width: 100%;
+		height: 100%;
+	}
+
+	input::placeholder {
+		color: var(--placeholder-color, #78848f);
+		opacity: var(--placeholder-opacity, 1);
+	}
+
+	input:focus {
+		outline: none;
+	}
+
+	.svelte-select.focused {
+		border: var(--border-focused, 1px solid #006fe8);
+		border-radius: var(--border-radius-focused, var(--border-radius, 6px));
+	}
+
+	.disabled {
+		background: var(--disabled-background, #ebedef);
+		border-color: var(--disabled-border-color, #ebedef);
+		color: var(--disabled-color, #c1c6cc);
+	}
+
+	.disabled input::placeholder {
+		color: var(--disabled-placeholder-color, #c1c6cc);
+		opacity: var(--disabled-placeholder-opacity, 1);
+	}
+
+	.selected-item {
+		position: relative;
+		overflow: var(--selected-item-overflow, hidden);
+		padding: var(--selected-item-padding, 0 20px 0 0);
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		color: var(--selected-item-color, inherit);
+		font-size: var(--font-size, 16px);
+	}
+
+	.multi .selected-item {
+		position: absolute;
+		line-height: var(--height, 42px);
+		height: var(--height, 42px);
+	}
+
+	.selected-item:focus {
+		outline: none;
+	}
+
+	.hide-selected-item {
+		opacity: 0;
+	}
+
+	.icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.clear-select {
+		all: unset;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--clear-select-width, 40px);
+		height: var(--clear-select-height, 100%);
+		color: var(--clear-select-color, var(--icons-color));
+		margin: var(--clear-select-margin, 0);
+		pointer-events: all;
+		flex-shrink: 0;
+	}
+
+	.clear-select:focus {
+		outline: var(--clear-select-focus-outline, 1px solid #006fe8);
+	}
+
+	.loading {
+		width: var(--loading-width, 40px);
+		height: var(--loading-height);
+		color: var(--loading-color, var(--icons-color));
+		margin: var(--loading--margin, 0);
+		flex-shrink: 0;
+	}
+
+	.chevron {
+		width: var(--chevron-width, 40px);
+		height: var(--chevron-height, 40px);
+		background: var(--chevron-background, transparent);
+		pointer-events: var(--chevron-pointer-events, none);
+		color: var(--chevron-color, var(--icons-color));
+		border: var(--chevron-border, 0 0 0 1px solid #d8dbdf);
+		flex-shrink: 0;
+	}
+
+	.multi {
+		padding: var(--multi-select-padding, var(--internal-padding));
+	}
+
+	.multi input {
+		padding: var(--multi-select-input-padding, 0);
+		position: relative;
+		margin: var(--multi-select-input-margin, 5px 0);
+		flex: 1 1 40px;
+	}
+
+	.svelte-select.error {
+		border: var(--error-border, 1px solid #ff2d55);
+		background: var(--error-background, #fff);
+	}
+
+	.a11y-text {
+		z-index: 9999;
+		border: 0px;
+		clip: rect(1px, 1px, 1px, 1px);
+		height: 1px;
+		width: 1px;
+		position: absolute;
+		overflow: hidden;
+		padding: 0px;
+		white-space: nowrap;
+	}
+
+	.multi-item {
+		background: var(--multi-item-bg, #ebedef);
+		margin: var(--multi-item-margin, 0);
+		outline: var(--multi-item-outline, 1px solid #ddd);
+		border-radius: var(--multi-item-border-radius, 4px);
+		height: var(--multi-item-height, 25px);
+		line-height: var(--multi-item-height, 25px);
+		display: flex;
+		cursor: default;
+		padding: var(--multi-item-padding, 0 5px);
+		overflow: hidden;
+		gap: var(--multi-item-gap, 4px);
+		outline-offset: -1px;
+		max-width: var(--multi-max-width, none);
+		color: var(--multi-item-color, var(--item-color));
+	}
+
+	.multi-item.disabled:hover {
+		background: var(--multi-item-disabled-hover-bg, #ebedef);
+		color: var(--multi-item-disabled-hover-color, #c1c6cc);
+	}
+
+	.multi-item-text {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.multi-item-clear {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		--clear-icon-color: var(--multi-item-clear-icon-color, #000);
+	}
+
+	.multi-item.active {
+		outline: var(--multi-item-active-outline, 1px solid #006fe8);
+	}
+
+	.svelte-select-list {
+		box-shadow: var(--list-shadow, 0 2px 3px 0 rgba(44, 62, 80, 0.24));
+		border-radius: var(--list-border-radius, 4px);
+		max-height: var(--list-max-height, 252px);
+		overflow-y: auto;
+		background: var(--list-background, #fff);
+		position: var(--list-position, absolute);
+		z-index: var(--list-z-index, 2);
+		border: var(--list-border);
+	}
+
+	.prefloat {
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.list-group-title {
+		color: var(--group-title-color, #8f8f8f);
+		cursor: default;
+		font-size: var(--group-title-font-size, 16px);
+		font-weight: var(--group-title-font-weight, 600);
+		height: var(--height, 42px);
+		line-height: var(--height, 42px);
+		padding: var(--group-title-padding, 0 20px);
+		text-overflow: ellipsis;
+		overflow-x: hidden;
+		white-space: nowrap;
+		text-transform: var(--group-title-text-transform, uppercase);
+	}
+
+	.empty {
+		text-align: var(--list-empty-text-align, center);
+		padding: var(--list-empty-padding, 20px 0);
+		color: var(--list-empty-color, #78848f);
+	}
+
+	.item {
+		cursor: default;
+		height: var(--item-height, var(--height, 42px));
+		line-height: var(--item-line-height, var(--height, 42px));
+		padding: var(--item-padding, 0 20px);
+		color: var(--item-color, inherit);
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+		transition: var(--item-transition, all 0.2s);
+		align-items: center;
+		width: 100%;
+	}
+
+	.item.group-item {
+		padding-left: var(--group-item-padding-left, 40px);
+	}
+
+	.item:active {
+		background: var(--item-active-background, #b9daff);
+	}
+
+	.item.active {
+		background: var(--item-is-active-bg, #007aff);
+		color: var(--item-is-active-color, #fff);
+	}
+
+	.item.first {
+		border-radius: var(--item-first-border-radius, 4px 4px 0 0);
+	}
+
+	.item.hover:not(.active) {
+		background: var(--item-hover-bg, #e7f2ff);
+		color: var(--item-hover-color, inherit);
+	}
+
+	.item.not-selectable,
+	.item.hover.item.not-selectable,
+	.item.active.item.not-selectable,
+	.item.not-selectable:active {
+		color: var(--item-is-not-selectable-color, #999);
+		background: transparent;
+	}
+
+	.required {
+		opacity: 0;
+		z-index: -1;
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+	}
+</style>
diff --git a/frontend/src/lib/components/apps/svelte-select/lib/filter.js b/frontend/src/lib/components/apps/svelte-select/lib/filter.js
new file mode 100644
index 0000000000..52cd33ffbe
--- /dev/null
+++ b/frontend/src/lib/components/apps/svelte-select/lib/filter.js
@@ -0,0 +1,32 @@
+export default function filter({
+	loadOptions,
+	filterText,
+	items,
+	value,
+	itemId,
+	groupBy,
+	filterSelectedItems,
+	itemFilter,
+	convertStringItemsToObjects,
+	filterGroupedItems,
+	label
+}) {
+	if (items && loadOptions) return items
+	if (!items) return []
+
+	if (items && items.length > 0 && typeof items[0] !== 'object') {
+		items = convertStringItemsToObjects(items)
+	}
+
+	let filterResults = items.filter((item) => {
+		let matchesFilter = itemFilter(item[label], filterText, item)
+
+		return matchesFilter
+	})
+
+	if (groupBy) {
+		filterResults = filterGroupedItems(filterResults)
+	}
+
+	return filterResults
+}
diff --git a/frontend/src/lib/components/apps/svelte-select/lib/get-items.js b/frontend/src/lib/components/apps/svelte-select/lib/get-items.js
new file mode 100644
index 0000000000..94b3415f13
--- /dev/null
+++ b/frontend/src/lib/components/apps/svelte-select/lib/get-items.js
@@ -0,0 +1,30 @@
+export default async function getItems({
+	dispatch,
+	loadOptions,
+	convertStringItemsToObjects,
+	filterText
+}) {
+	let res = await loadOptions(filterText).catch((err) => {
+		console.warn('svelte-select loadOptions error :>> ', err)
+		dispatch('error', { type: 'loadOptions', details: err })
+	})
+
+	if (res && !res.cancelled) {
+		if (res) {
+			if (res && res.length > 0 && typeof res[0] !== 'object') {
+				res = convertStringItemsToObjects(res)
+			}
+
+			dispatch('loaded', { items: res })
+		} else {
+			res = []
+		}
+
+		return {
+			filteredItems: res,
+			loading: false,
+			focused: true,
+			listOpen: true
+		}
+	}
+}
diff --git a/frontend/src/lib/components/apps/svelte-select/lib/index.js b/frontend/src/lib/components/apps/svelte-select/lib/index.js
new file mode 100644
index 0000000000..7a0599e5b8
--- /dev/null
+++ b/frontend/src/lib/components/apps/svelte-select/lib/index.js
@@ -0,0 +1 @@
+export { default as default } from './Select.svelte'
diff --git a/frontend/src/lib/components/apps/svelte-select/lib/tailwind.css b/frontend/src/lib/components/apps/svelte-select/lib/tailwind.css
new file mode 100644
index 0000000000..637b4902e5
--- /dev/null
+++ b/frontend/src/lib/components/apps/svelte-select/lib/tailwind.css
@@ -0,0 +1,130 @@
+@import 'tailwindcss/base';
+
+.svelte-select {
+    @apply border rounded box-border h-10 relative flex items-center px-4 py-0 bg-white m-0	w-full
+        hover:border-gray-400;
+}
+
+.svelte-select input {
+    @apply cursor-default border-none text-gray-600 h-10 leading-10 px-4 py-0 bg-transparent text-sm absolute left-0 m-0 w-full 
+        focus:outline-none hover:border-gray-400;
+}
+
+.svelte-select.focused {
+    @apply border-blue-600;
+}
+
+.svelte-select.disabled {
+    @apply bg-gray-200 border-gray-200 text-gray-600;
+}
+
+.svelte-select.disabled input {
+    @apply placeholder:text-gray-400 placeholder:opacity-100;
+}
+
+.svelte-select .selected-item {
+    @apply leading-10 h-10 overflow-x-hidden pr-5
+        focus:outline-none;
+}
+
+.svelte-select .icons {
+    @apply absolute flex items-center right-0 translate-y-0 text-gray-200 pointer-events-none top-0 bottom-0;
+}
+
+.svelte-select .icons > * {
+    @apply transition-colors ease-in-out duration-200;
+}
+
+.svelte-select .clear-select {
+    @apply pointer-events-auto;
+}
+
+.svelte-select.focused .icons,
+.svelte-select .chevron:hover,
+.svelte-select .clear-select:hover {
+    @apply text-gray-600;
+}
+
+.svelte-select .clear-select {
+    @apply px-2 h-5 text-gray-300 flex-none w-9;
+}
+
+.svelte-select .chevron {
+    @apply flex pt-0 pr-2 pl-2 border-l-2 w-9 h-5 text-gray-300;
+}
+
+.svelte-select.multi {
+    @apply pr-9 pl-4 h-auto flex-wrap items-stretch;
+}
+
+.svelte-select.multi input {
+    @apply p-0 relative m-0;
+}
+
+.svelte-select.error {
+    @apply border-red-500 bg-white;
+}
+
+.a11y-text {
+    @apply sr-only;
+}
+
+.list {
+    @apply shadow-md rounded-sm max-h-64 overflow-y-auto bg-white border-none absolute z-10 w-full left-0 right-0;
+}
+
+.list .list-group-title {
+    @apply text-gray-400 cursor-default text-sm font-medium h-10 leading-10 px-5 overflow-ellipsis whitespace-nowrap uppercase;
+}
+
+.list .empty {
+    @apply text-center py-5 text-gray-500;
+}
+
+.item {
+    @apply cursor-default h-10 leading-10 px-5 text-gray-800 overflow-ellipsis overflow-hidden whitespace-nowrap;
+}
+
+.item.group-item {
+    @apply px-10;
+}
+
+.item:active {
+    @apply bg-blue-200;
+}
+
+.item.active {
+    @apply bg-blue-600 text-white;
+}
+
+.item.not-selectable {
+    @apply text-gray-300;
+}
+
+.item.first {
+    @apply rounded-t-sm;
+}
+
+.item.hover:not(.active) {
+    @apply bg-blue-100;
+}
+
+.multi input {
+    flex: 1 1 40px;
+}
+
+.multi-item {
+    @apply bg-gray-100 mt-1 mr-1 border border-gray-200 rounded-sm h-8 leading-8 flex cursor-default pr-1 pl-1 max-w-full items-center mr-1 overflow-hidden overflow-ellipsis whitespace-nowrap;
+}
+
+.multi-item.disabled {
+    @apply hover:bg-gray-300 hover:text-gray-500;
+}
+
+.multi-item-clear {
+    @apply flex items-center justify-center w-5;
+}
+
+.list-item {
+    @apply list-none;
+}
\ No newline at end of file