diff --git a/web/locales/en/plugin__distributed-tracing-console-plugin.json b/web/locales/en/plugin__distributed-tracing-console-plugin.json
index f788415..be82baf 100644
--- a/web/locales/en/plugin__distributed-tracing-console-plugin.json
+++ b/web/locales/en/plugin__distributed-tracing-console-plugin.json
@@ -16,6 +16,7 @@
   "tempoinstance_helptext": "TempoStack and TempoMonolithic instances with multi-tenancy are supported. Instances without multi-tenancy are not supported.",
   "Tenant": "Tenant",
   "Select a tenant": "Select a tenant",
+  "No results found for {{value}}": "No results found for {{value}}",
   "Trace": "Trace",
   "Tracing": "Tracing",
   "Traces": "Traces",
diff --git a/web/package-lock.json b/web/package-lock.json
index c5c866f..e6e8988 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -14,7 +14,7 @@
         "@hookform/resolvers": "^3.3.4",
         "@mui/material": "^5.15.14",
         "@patternfly/react-charts": "6.92.0",
-        "@patternfly/react-table": "^5.2.4",
+        "@patternfly/react-core": "^5.4.13",
         "@perses-dev/components": "0.49.0-rc.1",
         "@perses-dev/dashboards": "0.49.0-rc.1",
         "@perses-dev/panels-plugin": "0.49.0-rc.1",
@@ -31,9 +31,8 @@
       },
       "devDependencies": {
         "@cypress/webpack-preprocessor": "^5.15.5",
-        "@openshift-console/dynamic-plugin-sdk": "0.0.12",
-        "@openshift-console/dynamic-plugin-sdk-webpack": "0.0.7",
-        "@patternfly/react-core": "4.221.3",
+        "@openshift-console/dynamic-plugin-sdk": "^4.19.0-prerelease.1",
+        "@openshift-console/dynamic-plugin-sdk-webpack": "^4.19.0-prerelease.1",
         "@types/node": "^18.0.0",
         "@types/react": "^17.0.37",
         "@types/react-router-dom": "^5.3.2",
@@ -57,8 +56,8 @@
         "react-dom": "^17.0.1",
         "react-helmet-async": "^1.0.0",
         "react-i18next": "^11.8.11",
-        "react-router": "5.2.0",
-        "react-router-dom": "5.2.0",
+        "react-router": "5.3.x",
+        "react-router-dom": "5.3.x",
         "style-loader": "^3.3.1",
         "stylelint": "^15.3.0",
         "stylelint-config-standard": "^31.0.0",
@@ -3275,117 +3274,108 @@
       }
     },
     "node_modules/@openshift-console/dynamic-plugin-sdk": {
-      "version": "0.0.12",
-      "resolved": "https://registry.npmjs.org/@openshift-console/dynamic-plugin-sdk/-/dynamic-plugin-sdk-0.0.12.tgz",
-      "integrity": "sha512-dgWnNCOqchN6Pos6aG5vV1Loecegqt073U8BNLk9lKBT6BVE7PXtGnoZRzXXkYfnNfGjDByIo57Yxxds/b4OUw==",
+      "version": "4.19.0-prerelease.1",
+      "resolved": "https://registry.npmjs.org/@openshift-console/dynamic-plugin-sdk/-/dynamic-plugin-sdk-4.19.0-prerelease.1.tgz",
+      "integrity": "sha512-2//K5B743tkj3ndoBljlTy6VSjtly6OFZrW9AQ5jCJGa3nI+OivT+XD4ZtZ4q4liVavBTxC+Y0I3z6gxvGLQtg==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "@patternfly/quickstarts": "2.0.1",
-        "@patternfly/react-core": "4.224.1",
-        "@patternfly/react-table": "4.93.1",
+        "classnames": "2.x",
+        "immutable": "3.x",
+        "lodash": "^4.17.21",
         "react": "^17.0.1",
-        "react-helmet": "^6.1.0",
         "react-i18next": "^11.7.3",
         "react-redux": "7.2.2",
-        "react-router": "5.2.0",
-        "react-router-dom": "5.2.0",
+        "react-router": "5.3.x",
+        "react-router-dom": "5.3.x",
+        "react-router-dom-v5-compat": "^6.11.2",
         "redux": "4.0.1",
         "redux-thunk": "2.4.0",
+        "reselect": "4.x",
         "typesafe-actions": "^4.2.1",
         "whatwg-fetch": "2.x"
       }
     },
     "node_modules/@openshift-console/dynamic-plugin-sdk-webpack": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/@openshift-console/dynamic-plugin-sdk-webpack/-/dynamic-plugin-sdk-webpack-0.0.7.tgz",
-      "integrity": "sha512-NvIxZIkv+jGivZ4E1d4jPBrMsQem5gUztvfbTBSJKdUPaWeJGCP4B8CWYix1p+qPId9CARmLZS0FfYBiq2Lm0g==",
+      "version": "4.19.0-prerelease.1",
+      "resolved": "https://registry.npmjs.org/@openshift-console/dynamic-plugin-sdk-webpack/-/dynamic-plugin-sdk-webpack-4.19.0-prerelease.1.tgz",
+      "integrity": "sha512-dlEz4AkT81Ry1fdlQNonSudOJTOD1287guYkQNk8Xq/UE8ZaPmBubuui9/5ZG3EqSJE2IC6DzVexUD+xUkqs3w==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
+        "@openshift/dynamic-plugin-sdk-webpack": "^4.0.2",
         "ajv": "^6.12.3",
         "chalk": "2.4.x",
         "comment-json": "4.x",
         "find-up": "4.x",
+        "glob": "7.x",
         "lodash": "^4.17.21",
         "read-pkg": "5.x",
         "semver": "6.x",
-        "webpack": "^5.68.0"
-      }
-    },
-    "node_modules/@openshift-console/dynamic-plugin-sdk/node_modules/@patternfly/react-core": {
-      "version": "4.224.1",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.224.1.tgz",
-      "integrity": "sha512-v8wGGNoMGndAScAoE5jeOA5jVgymlLSwttPjQk/Idr0k7roSpOrsM39oXUR5DEgkZee45DW00WKTgmg50PP3FQ==",
-      "dev": true,
-      "dependencies": {
-        "@patternfly/react-icons": "^4.75.1",
-        "@patternfly/react-styles": "^4.74.1",
-        "@patternfly/react-tokens": "^4.76.1",
-        "focus-trap": "6.9.2",
-        "react-dropzone": "9.0.0",
-        "tippy.js": "5.1.2",
-        "tslib": "^2.0.0"
+        "webpack": "^5.75.0"
       },
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
+        "typescript": ">=4.5.5"
       }
     },
-    "node_modules/@openshift-console/dynamic-plugin-sdk/node_modules/@patternfly/react-table": {
-      "version": "4.93.1",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-4.93.1.tgz",
-      "integrity": "sha512-N/zHkNsY3X3yUXPg6COwdZKAFmTCbWm25qCY2aHjrXlIlE2OKWaYvVag0CcTwPiQhIuCumztr9Y2Uw9uvv0Fsw==",
+    "node_modules/@openshift-console/dynamic-plugin-sdk-webpack/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "@patternfly/react-core": "^4.224.1",
-        "@patternfly/react-icons": "^4.75.1",
-        "@patternfly/react-styles": "^4.74.1",
-        "@patternfly/react-tokens": "^4.76.1",
-        "lodash": "^4.17.19",
-        "tslib": "^2.0.0"
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
       },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/@patternfly/patternfly": {
-      "version": "4.122.2",
-      "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.122.2.tgz",
-      "integrity": "sha512-kSoW8mt9eEJcAZX2lX4r/SYvFd44GGb8PUSDjMrpKDZqgn9/9VFh1rSChG4v5kCK6cpS99/gdTapZc3ylf8Rpw==",
-      "dev": true
+    "node_modules/@openshift-console/dynamic-plugin-sdk/node_modules/reselect": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
+      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/@patternfly/quickstarts": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@patternfly/quickstarts/-/quickstarts-2.0.1.tgz",
-      "integrity": "sha512-tbF1sqlkVb9rEriiHPnKAN5SercMxP27ty+PB87uZ/aF9YkvDD5BUuCbU3JR0e2qe189WksvLrgrAEaamh3gig==",
+    "node_modules/@openshift/dynamic-plugin-sdk-webpack": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@openshift/dynamic-plugin-sdk-webpack/-/dynamic-plugin-sdk-webpack-4.1.0.tgz",
+      "integrity": "sha512-Pkq6R+fkoE0llgv9WJBcotViAPywrzDkpWK0HSTmrVyfEuWS5cuZUs8ono6L5w9BqDBRXm3ceEuUAZA/Zrar1w==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "@patternfly/react-catalog-view-extension": "4.12.15",
-        "dompurify": "^2.2.6",
-        "history": "^5.0.0",
-        "showdown": "1.8.6"
+        "lodash": "^4.17.21",
+        "semver": "^7.3.7",
+        "yup": "^0.32.11"
+      },
+      "engines": {
+        "node": ">=16"
       },
       "peerDependencies": {
-        "@patternfly/react-core": ">=4.115.2",
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0",
-        "showdown": ">=1.8.6"
+        "webpack": "^5.75.0"
       }
     },
-    "node_modules/@patternfly/react-catalog-view-extension": {
-      "version": "4.12.15",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-catalog-view-extension/-/react-catalog-view-extension-4.12.15.tgz",
-      "integrity": "sha512-1mp+Ogi7fJfgh5wV9q+PolmplbMj3Tcias8xs0eeD5GCirdzOQxG+wihEM5k6CAGhBAr7jHg5fRSgO8QLTt3UQ==",
+    "node_modules/@openshift/dynamic-plugin-sdk-webpack/node_modules/semver": {
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
+      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
       "dev": true,
-      "dependencies": {
-        "@patternfly/patternfly": "4.122.2",
-        "@patternfly/react-core": "^4.135.15",
-        "@patternfly/react-styles": "^4.11.4",
-        "classnames": "^2.2.5"
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
       },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/@patternfly/react-charts": {
@@ -3422,139 +3412,49 @@
       }
     },
     "node_modules/@patternfly/react-core": {
-      "version": "4.221.3",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.221.3.tgz",
-      "integrity": "sha512-I33TnX5Xn8ypXYjHc7G5kIVsYjB4PnDxxmJG6rBLqFslrnGUBzvb0sflnP43QlI0camamVIoaBRjedj8WXqaRg==",
-      "dev": true,
-      "dependencies": {
-        "@patternfly/react-icons": "^4.72.3",
-        "@patternfly/react-styles": "^4.71.3",
-        "@patternfly/react-tokens": "^4.73.3",
-        "focus-trap": "6.9.2",
-        "react-dropzone": "9.0.0",
-        "tippy.js": "5.1.2",
-        "tslib": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      }
-    },
-    "node_modules/@patternfly/react-icons": {
-      "version": "4.93.7",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.93.7.tgz",
-      "integrity": "sha512-3kr35dgba7Qz5CSzmfH0rIjSvBC5xkmiknf3SvVUVxaiVA7KRowID8viYHeZlf3v/Oa3sEewaH830Q0t+nWsZQ==",
-      "dev": true,
-      "peerDependencies": {
-        "react": "^16.8 || ^17 || ^18",
-        "react-dom": "^16.8 || ^17 || ^18"
-      }
-    },
-    "node_modules/@patternfly/react-styles": {
-      "version": "4.92.8",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.92.8.tgz",
-      "integrity": "sha512-K4lUU8O4HiCX9NeuNUIrPgN3wlGERCxJVio+PAjd8hpJD/PKnjFfOJ9u6/Cii3qLy/5ZviWPRNHbGiwA/+YUhg=="
-    },
-    "node_modules/@patternfly/react-table": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-5.3.3.tgz",
-      "integrity": "sha512-uaRmsJABvVPH8gYTh+EUcDz61knIxe9qor/VGUYDLONYBL5G3IaltwG42IsJ9jShxiwFmIPy+QARPpaadTpv5w==",
-      "dependencies": {
-        "@patternfly/react-core": "^5.3.3",
-        "@patternfly/react-icons": "^5.3.2",
-        "@patternfly/react-styles": "^5.3.1",
-        "@patternfly/react-tokens": "^5.3.1",
-        "lodash": "^4.17.19",
-        "tslib": "^2.5.0"
-      },
-      "peerDependencies": {
-        "react": "^17 || ^18",
-        "react-dom": "^17 || ^18"
-      }
-    },
-    "node_modules/@patternfly/react-table/node_modules/@patternfly/react-core": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-5.3.3.tgz",
-      "integrity": "sha512-qq3j0M+Vi+Xmd+a/MhRhGgjdRh9Hnm79iA+L935HwMIVDcIWRYp6Isib/Ha4+Jk+f3Qdl0RT3dBDvr/4m6OpVQ==",
+      "version": "5.4.14",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-5.4.14.tgz",
+      "integrity": "sha512-oXVMzLs9Pa+xmdc39L2u05zbXfY3mWuOFi4GDv44GPdDexZUFy5W69+Nv5P8cwfMim55Nf5kKYpcqmatD2bBXw==",
+      "license": "MIT",
       "dependencies": {
-        "@patternfly/react-icons": "^5.3.2",
-        "@patternfly/react-styles": "^5.3.1",
-        "@patternfly/react-tokens": "^5.3.1",
-        "focus-trap": "7.5.2",
+        "@patternfly/react-icons": "^5.4.2",
+        "@patternfly/react-styles": "^5.4.1",
+        "@patternfly/react-tokens": "^5.4.1",
+        "focus-trap": "7.6.2",
         "react-dropzone": "^14.2.3",
-        "tslib": "^2.5.0"
+        "tslib": "^2.7.0"
       },
       "peerDependencies": {
         "react": "^17 || ^18",
         "react-dom": "^17 || ^18"
       }
     },
-    "node_modules/@patternfly/react-table/node_modules/@patternfly/react-icons": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-5.3.2.tgz",
-      "integrity": "sha512-GEygYbl0H4zD8nZuTQy2dayKIrV2bMMeWKSOEZ16Y3EYNgYVUOUnN+J0naAEuEGH39Xb1DE9n+XUbE1PC4CxPA==",
-      "peerDependencies": {
-        "react": "^17 || ^18",
-        "react-dom": "^17 || ^18"
-      }
-    },
-    "node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-5.3.1.tgz",
-      "integrity": "sha512-H6uBoFH3bJjD6PP75qZ4k+2TtF59vxf9sIVerPpwrGJcRgBZbvbMZCniSC3+S2LQ8DgXLnDvieq78jJzHz0hiA=="
-    },
-    "node_modules/@patternfly/react-table/node_modules/@patternfly/react-tokens": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-5.3.1.tgz",
-      "integrity": "sha512-VYK0uVP2/2RJ7ZshJCCLeq0Boih5I1bv+9Z/Bg6h12dCkLs85XsxAX9Ve+BGIo5DF54/mzcRHE1RKYap4ISXuw=="
-    },
-    "node_modules/@patternfly/react-table/node_modules/attr-accept": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
-      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/@patternfly/react-table/node_modules/file-selector": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
-      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
-      "dependencies": {
-        "tslib": "^2.4.0"
-      },
-      "engines": {
-        "node": ">= 12"
-      }
+    "node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-5.4.1.tgz",
+      "integrity": "sha512-XA8PXksD8uiA3RTwxdUwJXOCf+V6sVd+2HKapWAdRLvtSV+Sdk7NgCvalb4IAQncsddLopjPQD8gAHA298+N8w==",
+      "license": "MIT"
     },
-    "node_modules/@patternfly/react-table/node_modules/focus-trap": {
-      "version": "7.5.2",
-      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.2.tgz",
-      "integrity": "sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==",
-      "dependencies": {
-        "tabbable": "^6.2.0"
-      }
+    "node_modules/@patternfly/react-core/node_modules/@patternfly/react-tokens": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-5.4.1.tgz",
+      "integrity": "sha512-eygdHE7Krta1mijAv/E8RHiKIgysD0eeNTo8EXUYC8/M4e5K6sqpr2p6rQBF8QiRMN8FnbXvZT3K2OQ28pYt9Q==",
+      "license": "MIT"
     },
-    "node_modules/@patternfly/react-table/node_modules/react-dropzone": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
-      "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
-      "dependencies": {
-        "attr-accept": "^2.2.2",
-        "file-selector": "^0.6.0",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">= 10.13"
-      },
+    "node_modules/@patternfly/react-icons": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-5.4.2.tgz",
+      "integrity": "sha512-CMQ5oHYzW6TPVTs2jpNJmP2vGCAKR/YeTPwHGO9dLkAUej1IcIxtCCWK2Fdo2UJsnBjuZihasyw2b6ehvbUm9Q==",
+      "license": "MIT",
       "peerDependencies": {
-        "react": ">= 16.8 || 18.0.0"
+        "react": "^17 || ^18",
+        "react-dom": "^17 || ^18"
       }
     },
-    "node_modules/@patternfly/react-table/node_modules/tabbable": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
-      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    "node_modules/@patternfly/react-styles": {
+      "version": "4.92.8",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.92.8.tgz",
+      "integrity": "sha512-K4lUU8O4HiCX9NeuNUIrPgN3wlGERCxJVio+PAjd8hpJD/PKnjFfOJ9u6/Cii3qLy/5ZviWPRNHbGiwA/+YUhg=="
     },
     "node_modules/@patternfly/react-tokens": {
       "version": "4.94.7",
@@ -3776,6 +3676,16 @@
         "@lezer/lr": "^1.2.3"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.22.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.22.0.tgz",
+      "integrity": "sha512-MBOl8MeOzpK0HQQQshKB7pABXbmyHizdTpqnrIseTbsv0nAepwC2ENZa1aaBExNQcpLoXmWthhak8SABLzvGPw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@sindresorhus/merge-streams": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
@@ -4051,6 +3961,13 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.15.tgz",
+      "integrity": "sha512-w/P33JFeySuhN6JLkysYUK2gEmy9kHHFN7E8ro0tkfmlDOgxBDzWEZ/J8cWA+fHqFevpswDTFZnDx+R9lbL6xw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/mime": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
@@ -5249,13 +5166,10 @@
       }
     },
     "node_modules/attr-accept": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-1.1.3.tgz",
-      "integrity": "sha512-iT40nudw8zmCweivz6j58g+RT33I4KbaIvRUhjNmDwO2WmsQUxFEZZYZ5w3vXe5x5MX9D7mfvA/XaLOZYFR9EQ==",
-      "dev": true,
-      "dependencies": {
-        "core-js": "^2.5.0"
-      },
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz",
+      "integrity": "sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
@@ -6188,7 +6102,8 @@
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
       "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/clean-stack": {
       "version": "2.2.0",
@@ -6323,15 +6238,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/code-point-at": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-      "integrity": "sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/codemirror": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
@@ -6657,14 +6563,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/core-js": {
-      "version": "2.6.12",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
-      "dev": true,
-      "hasInstallScript": true
-    },
     "node_modules/core-js-compat": {
       "version": "3.37.1",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.37.1.tgz",
@@ -8889,15 +8787,15 @@
       }
     },
     "node_modules/file-selector": {
-      "version": "0.1.19",
-      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.1.19.tgz",
-      "integrity": "sha512-kCWw3+Aai8Uox+5tHCNgMFaUdgidxvMnLWO6fM5sZ0hA2wlHP5/DHGF0ECe84BiB95qdJbKNEJhWKVDvMN+JDQ==",
-      "dev": true,
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-2.1.2.tgz",
+      "integrity": "sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==",
+      "license": "MIT",
       "dependencies": {
-        "tslib": "^2.0.1"
+        "tslib": "^2.7.0"
       },
       "engines": {
-        "node": ">= 10"
+        "node": ">= 12"
       }
     },
     "node_modules/filename-regex": {
@@ -9018,12 +8916,12 @@
       "dev": true
     },
     "node_modules/focus-trap": {
-      "version": "6.9.2",
-      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.2.tgz",
-      "integrity": "sha512-gBEuXOPNOKPrLdZpMFUSTyIo1eT2NSZRrwZ9r/0Jqw5tmT3Yvxfmu8KBHw8xW2XQkw6E/JoG+OlEq7UDtSUNgw==",
-      "dev": true,
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.2.tgz",
+      "integrity": "sha512-9FhUxK1hVju2+AiQIDJ5Dd//9R2n2RAfJ0qfhF4IHGHgcoEUTMpbTeG/zbEuwaiYXfuAH6XE0/aCyxDdRM+W5w==",
+      "license": "MIT",
       "dependencies": {
-        "tabbable": "^5.3.2"
+        "tabbable": "^6.2.0"
       }
     },
     "node_modules/follow-redirects": {
@@ -9865,6 +9763,7 @@
       "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
       "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.7.6"
       }
@@ -10211,6 +10110,16 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
+      "integrity": "sha512-15gZoQ38eYjEjxkorfbcgBKBL6R7T459OuK+CpcWt7O3KF4uPCx2tD0uFETlUDIyo+1789crbMhTvQBSR5yBMg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -10419,15 +10328,6 @@
         "loose-envify": "^1.0.0"
       }
     },
-    "node_modules/invert-kv": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
-      "integrity": "sha512-xgs2NH9AE66ucSq4cNG1nhSFghr5l6tdL15Pk+jl46bmmBapgoaY/AacXyaDznAqmGL99TiLSQgO/XazFSKYeQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/ipaddr.js": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
@@ -11403,18 +11303,6 @@
         "node": "> 0.8"
       }
     },
-    "node_modules/lcid": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
-      "integrity": "sha512-YiGkH6EnGrDGqLMITnGjXtGmNtjoXw9SVUzcaos8RBi7Ps0VBylkq+vOcY9QE5poLasPCR849ucFUkl0UzUyOw==",
-      "dev": true,
-      "dependencies": {
-        "invert-kv": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/lead": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/lead/-/lead-4.0.0.tgz",
@@ -11532,6 +11420,13 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -11963,27 +11858,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/mem": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz",
-      "integrity": "sha512-nOBDrc/wgpkd3X/JOhMqYR+/eLqlfLP4oQfoBA6QExIxEl+GU01oyEkwWyueyO8110pUKijtiHGhEmYoOn88oQ==",
-      "dev": true,
-      "dependencies": {
-        "mimic-fn": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/mem/node_modules/mimic-fn": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
-      "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/memfs": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.3.tgz",
@@ -12106,21 +11980,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/mini-create-react-context": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
-      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
-      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
-      "devOptional": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.1",
-        "tiny-warning": "^1.0.3"
-      },
-      "peerDependencies": {
-        "prop-types": "^15.0.0",
-        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
-      }
-    },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -12822,6 +12681,13 @@
         "multicast-dns": "cli.js"
       }
     },
+    "node_modules/nanoclone": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
+      "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -13019,15 +12885,6 @@
       "integrity": "sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==",
       "dev": true
     },
-    "node_modules/number-is-nan": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-      "integrity": "sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/numbro": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/numbro/-/numbro-2.5.0.tgz",
@@ -13256,171 +13113,40 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/os-locale": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-2.1.0.tgz",
-      "integrity": "sha512-3sslG3zJbEYcaC4YVAvDorjGxc7tv6KVATnLPZONiljsUncvihe9BQoVCEs0RZ1kmf4Hk9OBqlZfJZWI4GanKA==",
+    "node_modules/ospath": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz",
+      "integrity": "sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==",
+      "dev": true
+    },
+    "node_modules/p-finally": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
+      "integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==",
       "dev": true,
-      "dependencies": {
-        "execa": "^0.7.0",
-        "lcid": "^1.0.0",
-        "mem": "^1.1.0"
-      },
       "engines": {
         "node": ">=4"
       }
     },
-    "node_modules/os-locale/node_modules/cross-spawn": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-      "integrity": "sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==",
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
       "dev": true,
       "dependencies": {
-        "lru-cache": "^4.0.1",
-        "shebang-command": "^1.2.0",
-        "which": "^1.2.9"
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/os-locale/node_modules/execa": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
-      "integrity": "sha512-RztN09XglpYI7aBBrJCPW95jEH7YF1UEPOoX9yDhUTPdp7mK+CQvnLTuD10BNXZ3byLTu2uehZ8EcKT/4CGiFw==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^5.0.1",
-        "get-stream": "^3.0.0",
-        "is-stream": "^1.1.0",
-        "npm-run-path": "^2.0.0",
-        "p-finally": "^1.0.0",
-        "signal-exit": "^3.0.0",
-        "strip-eof": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/os-locale/node_modules/get-stream": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-      "integrity": "sha512-GlhdIUuVakc8SJ6kK0zAFbiGzRFzNnY4jUuEbV9UROo4Y+0Ny4fjvcZFVTeDA4odpFyOQzaw6hXukJSq/f28sQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/os-locale/node_modules/is-stream": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/os-locale/node_modules/lru-cache": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-      "dev": true,
-      "dependencies": {
-        "pseudomap": "^1.0.2",
-        "yallist": "^2.1.2"
-      }
-    },
-    "node_modules/os-locale/node_modules/npm-run-path": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
-      "integrity": "sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/os-locale/node_modules/path-key": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-      "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/os-locale/node_modules/shebang-command": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-      "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/os-locale/node_modules/shebang-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-      "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/os-locale/node_modules/which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "which": "bin/which"
-      }
-    },
-    "node_modules/os-locale/node_modules/yallist": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-      "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
-      "dev": true
-    },
-    "node_modules/ospath": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz",
-      "integrity": "sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==",
-      "dev": true
-    },
-    "node_modules/p-finally": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-      "integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
       "dev": true,
       "dependencies": {
         "p-limit": "^2.2.0"
@@ -13829,17 +13555,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -15235,30 +14950,18 @@
         "react-is": "^16.13.1"
       }
     },
-    "node_modules/prop-types-extra": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
-      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
-      "dev": true,
-      "dependencies": {
-        "react-is": "^16.3.2",
-        "warning": "^4.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=0.14.0"
-      }
-    },
-    "node_modules/prop-types-extra/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
-    },
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/property-expr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+      "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -15578,21 +15281,20 @@
       }
     },
     "node_modules/react-dropzone": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-9.0.0.tgz",
-      "integrity": "sha512-wZ2o9B2qkdE3RumWhfyZT9swgJYJPeU5qHEcMU8weYpmLex1eeWX0CC32/Y0VutB+BBi2D+iePV/YZIiB4kZGw==",
-      "dev": true,
+      "version": "14.3.8",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.3.8.tgz",
+      "integrity": "sha512-sBgODnq+lcA4P296DY4wacOZz3JFpD99fp+hb//iBO2HHnyeZU3FwWyXJ6salNpqQdsZrgMrotuko/BdJMV8Ug==",
+      "license": "MIT",
       "dependencies": {
-        "attr-accept": "^1.1.3",
-        "file-selector": "^0.1.8",
-        "prop-types": "^15.6.2",
-        "prop-types-extra": "^1.1.0"
+        "attr-accept": "^2.2.4",
+        "file-selector": "^2.1.0",
+        "prop-types": "^15.8.1"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 10.13"
       },
       "peerDependencies": {
-        "react": ">=0.14.0"
+        "react": ">= 16.8 || 18.0.0"
       }
     },
     "node_modules/react-error-boundary": {
@@ -15632,21 +15334,6 @@
         "react-dom": ">= 16.3.0"
       }
     },
-    "node_modules/react-helmet": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
-      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
-      "dev": true,
-      "dependencies": {
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.7.2",
-        "react-fast-compare": "^3.1.1",
-        "react-side-effect": "^2.1.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.3.0"
-      }
-    },
     "node_modules/react-helmet-async": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.3.0.tgz",
@@ -15764,16 +15451,16 @@
       }
     },
     "node_modules/react-router": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
-      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
+      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
       "devOptional": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.1.2",
+        "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
         "hoist-non-react-statics": "^3.1.0",
         "loose-envify": "^1.3.1",
-        "mini-create-react-context": "^0.4.0",
         "path-to-regexp": "^1.7.0",
         "prop-types": "^15.6.2",
         "react-is": "^16.6.0",
@@ -15785,16 +15472,17 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
-      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
+      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
       "devOptional": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.1.2",
+        "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
         "loose-envify": "^1.3.1",
         "prop-types": "^15.6.2",
-        "react-router": "5.2.0",
+        "react-router": "5.3.4",
         "tiny-invariant": "^1.0.2",
         "tiny-warning": "^1.0.0"
       },
@@ -15802,6 +15490,42 @@
         "react": ">=15"
       }
     },
+    "node_modules/react-router-dom-v5-compat": {
+      "version": "6.29.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom-v5-compat/-/react-router-dom-v5-compat-6.29.0.tgz",
+      "integrity": "sha512-WfZyWsOzcZK4g7KPrXMKbjHpRhTRdiEg/aioP72Q5NIL1Ekop3VFlML29UtKtvi5ncxqJO0/b4nPCaBqSo9Gww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.22.0",
+        "history": "^5.3.0",
+        "react-router": "6.29.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8",
+        "react-router-dom": "4 || 5"
+      }
+    },
+    "node_modules/react-router-dom-v5-compat/node_modules/react-router": {
+      "version": "6.29.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.29.0.tgz",
+      "integrity": "sha512-DXZJoE0q+KyeVw75Ck6GkPxFak63C4fGqZGNijnWgzB/HzSP1ZfTlBj5COaGWwhrMQ/R8bXiq5Ooy4KG+ReyjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.22.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/react-router-dom/node_modules/history": {
       "version": "4.10.1",
       "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
@@ -15836,15 +15560,6 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "devOptional": true
     },
-    "node_modules/react-side-effect": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
-      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
-      "dev": true,
-      "peerDependencies": {
-        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -16944,255 +16659,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/showdown": {
-      "version": "1.8.6",
-      "resolved": "https://registry.npmjs.org/showdown/-/showdown-1.8.6.tgz",
-      "integrity": "sha512-cOmS+LUIiyMxFo7OU3cgV+zTv43GItwlTwUPrpUd5dqdlZh8CJMVb8KxAMhr42J6exQwKTCHMxUiG74vamV1kA==",
-      "dev": true,
-      "dependencies": {
-        "yargs": "^10.0.3"
-      },
-      "bin": {
-        "showdown": "bin/showdown.js"
-      }
-    },
-    "node_modules/showdown/node_modules/ansi-regex": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
-      "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/showdown/node_modules/camelcase": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
-      "integrity": "sha512-FxAv7HpHrXbh3aPo4o2qxHay2lkLY3x5Mw3KeE4KQE8ysVfziWeRZDwcjauvwBSGEC/nXUPzZy8zeh4HokqOnw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/showdown/node_modules/cliui": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
-      "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
-      "dev": true,
-      "dependencies": {
-        "string-width": "^2.1.1",
-        "strip-ansi": "^4.0.0",
-        "wrap-ansi": "^2.0.0"
-      }
-    },
-    "node_modules/showdown/node_modules/find-up": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
-      "integrity": "sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/showdown/node_modules/get-caller-file": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
-      "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==",
-      "dev": true
-    },
-    "node_modules/showdown/node_modules/is-fullwidth-code-point": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/showdown/node_modules/locate-path": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
-      "integrity": "sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==",
-      "dev": true,
-      "dependencies": {
-        "p-locate": "^2.0.0",
-        "path-exists": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/showdown/node_modules/p-limit": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
-      "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
-      "dev": true,
-      "dependencies": {
-        "p-try": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/showdown/node_modules/p-locate": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
-      "integrity": "sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/showdown/node_modules/p-try": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
-      "integrity": "sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/showdown/node_modules/path-exists": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/showdown/node_modules/require-main-filename": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
-      "integrity": "sha512-IqSUtOVP4ksd1C/ej5zeEh/BIP2ajqpn8c5x+q99gvcIG/Qf0cud5raVnE/Dwd0ua9TXYDoDc0RE5hBSdz22Ug==",
-      "dev": true
-    },
-    "node_modules/showdown/node_modules/string-width": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-      "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-      "dev": true,
-      "dependencies": {
-        "is-fullwidth-code-point": "^2.0.0",
-        "strip-ansi": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/showdown/node_modules/strip-ansi": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-      "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/showdown/node_modules/wrap-ansi": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
-      "integrity": "sha512-vAaEaDM946gbNpH5pLVNR+vX2ht6n0Bt3GXwVB1AuAqZosOvHNF3P7wDnh8KLkSqgUh0uh77le7Owgoz+Z9XBw==",
-      "dev": true,
-      "dependencies": {
-        "string-width": "^1.0.1",
-        "strip-ansi": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/showdown/node_modules/wrap-ansi/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/showdown/node_modules/wrap-ansi/node_modules/is-fullwidth-code-point": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-      "integrity": "sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==",
-      "dev": true,
-      "dependencies": {
-        "number-is-nan": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/showdown/node_modules/wrap-ansi/node_modules/string-width": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-      "integrity": "sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==",
-      "dev": true,
-      "dependencies": {
-        "code-point-at": "^1.0.0",
-        "is-fullwidth-code-point": "^1.0.0",
-        "strip-ansi": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/showdown/node_modules/wrap-ansi/node_modules/strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/showdown/node_modules/y18n": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.2.tgz",
-      "integrity": "sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ==",
-      "dev": true
-    },
-    "node_modules/showdown/node_modules/yargs": {
-      "version": "10.1.2",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-10.1.2.tgz",
-      "integrity": "sha512-ivSoxqBGYOqQVruxD35+EyCFDYNEFL/Uo6FcOnz+9xZdZzK0Zzw4r4KhbrME1Oo2gOggwJod2MnsdamSG7H9ig==",
-      "dev": true,
-      "dependencies": {
-        "cliui": "^4.0.0",
-        "decamelize": "^1.1.1",
-        "find-up": "^2.1.0",
-        "get-caller-file": "^1.0.1",
-        "os-locale": "^2.0.0",
-        "require-directory": "^2.1.1",
-        "require-main-filename": "^1.0.1",
-        "set-blocking": "^2.0.0",
-        "string-width": "^2.0.0",
-        "which-module": "^2.0.0",
-        "y18n": "^3.2.1",
-        "yargs-parser": "^8.1.0"
-      }
-    },
-    "node_modules/showdown/node_modules/yargs-parser": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-8.1.0.tgz",
-      "integrity": "sha512-yP+6QqN8BmrgW2ggLtTbdrOyBNSI7zBa4IykmiV5R1wl1JWNxQvWhMfMdmzIYtKU7oP3OOInY/tl2ov3BDjnJQ==",
-      "dev": true,
-      "dependencies": {
-        "camelcase": "^4.1.0"
-      }
-    },
     "node_modules/side-channel": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
@@ -18260,10 +17726,10 @@
       "integrity": "sha512-0K91MEXFpBUaywiwSSkmKjnGcasG/rVBXFLJz5DrgGabpYD6N+3yZrfD6uUIfpuTu65DZLHi7N8CizHc07BPZA=="
     },
     "node_modules/tabbable": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
-      "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==",
-      "dev": true
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "license": "MIT"
     },
     "node_modules/table": {
       "version": "6.8.2",
@@ -18714,15 +18180,6 @@
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
       "devOptional": true
     },
-    "node_modules/tippy.js": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-5.1.2.tgz",
-      "integrity": "sha512-Qtrv2wqbRbaKMUb6bWWBQWPayvcDKNrGlvihxtsyowhT7RLGEh1STWuy6EMXC6QLkfKPB2MLnf8W2mzql9VDAw==",
-      "dev": true,
-      "dependencies": {
-        "popper.js": "^1.16.0"
-      }
-    },
     "node_modules/tmp": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
@@ -18771,6 +18228,13 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tough-cookie": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
@@ -19000,9 +18464,10 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
@@ -20158,15 +19623,6 @@
         "node": "8.* || >= 10.*"
       }
     },
-    "node_modules/warning": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-      "dev": true,
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "node_modules/watchpack": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz",
@@ -20979,6 +20435,25 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/yup": {
+      "version": "0.32.11",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
+      "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.15.4",
+        "@types/lodash": "^4.14.175",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "nanoclone": "^0.2.1",
+        "property-expr": "^2.0.4",
+        "toposort": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/zod": {
       "version": "3.23.8",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
diff --git a/web/package.json b/web/package.json
index 3b0e5ff..dd90248 100644
--- a/web/package.json
+++ b/web/package.json
@@ -21,9 +21,8 @@
   },
   "devDependencies": {
     "@cypress/webpack-preprocessor": "^5.15.5",
-    "@openshift-console/dynamic-plugin-sdk": "0.0.12",
-    "@openshift-console/dynamic-plugin-sdk-webpack": "0.0.7",
-    "@patternfly/react-core": "4.221.3",
+    "@openshift-console/dynamic-plugin-sdk": "^4.19.0-prerelease.1",
+    "@openshift-console/dynamic-plugin-sdk-webpack": "^4.19.0-prerelease.1",
     "@types/node": "^18.0.0",
     "@types/react": "^17.0.37",
     "@types/react-router-dom": "^5.3.2",
@@ -47,8 +46,8 @@
     "react-dom": "^17.0.1",
     "react-helmet-async": "^1.0.0",
     "react-i18next": "^11.8.11",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
+    "react-router": "5.3.x",
+    "react-router-dom": "5.3.x",
     "style-loader": "^3.3.1",
     "stylelint": "^15.3.0",
     "stylelint-config-standard": "^31.0.0",
@@ -76,8 +75,8 @@
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.3.4",
     "@mui/material": "^5.15.14",
+    "@patternfly/react-core": "^5.4.13",
     "@patternfly/react-charts": "6.92.0",
-    "@patternfly/react-table": "^5.2.4",
     "@perses-dev/components": "0.49.0-rc.1",
     "@perses-dev/dashboards": "0.49.0-rc.1",
     "@perses-dev/panels-plugin": "0.49.0-rc.1",
diff --git a/web/src/components/BasicSelect.tsx b/web/src/components/BasicSelect.tsx
new file mode 100644
index 0000000..ca5d99b
--- /dev/null
+++ b/web/src/components/BasicSelect.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import {
+  Select,
+  SelectOption,
+  SelectList,
+  MenuToggle,
+  MenuToggleElement,
+  SelectOptionProps,
+} from '@patternfly/react-core';
+
+interface BasicSelectProps {
+  id: string;
+  width: number;
+  placeholder: string;
+  options: SelectOptionProps[];
+  selected?: string;
+  setSelected: (value?: string) => void;
+}
+
+export function BasicSelect({
+  id,
+  width,
+  placeholder,
+  options,
+  selected,
+  setSelected,
+}: BasicSelectProps) {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined,
+  ) => {
+    setSelected(value as string);
+    setIsOpen(false);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen} style={{ width }}>
+      {selected ? options.find((o) => o.value === selected)?.children ?? placeholder : placeholder}
+    </MenuToggle>
+  );
+
+  return (
+    <Select
+      id={id}
+      isOpen={isOpen}
+      selected={selected}
+      onSelect={onSelect}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={toggle}
+      shouldFocusToggleOnSelect
+    >
+      <SelectList>
+        {options.map((option) => (
+          <SelectOption key={option.value} value={option.value}>
+            {option.children}
+          </SelectOption>
+        ))}
+      </SelectList>
+    </Select>
+  );
+}
diff --git a/web/src/components/DurationDropdown.tsx b/web/src/components/DurationDropdown.tsx
index 150a89e..44ff566 100644
--- a/web/src/components/DurationDropdown.tsx
+++ b/web/src/components/DurationDropdown.tsx
@@ -1,16 +1,11 @@
 import * as React from 'react';
-import {
-  Select,
-  SelectVariant,
-  SelectOption,
-  SelectOptionObject,
-  Stack,
-} from '@patternfly/react-core';
+import { Stack } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { DurationString } from '@perses-dev/prometheus-plugin';
+import { BasicSelect } from './BasicSelect';
 
 type TimeRangeSelectOption = {
-  display: string;
+  children: string;
   value: DurationString;
 };
 
@@ -25,77 +20,55 @@ export const DurationValues = ['5m', '15m', '30m', '1h', '6h', '12h', '1d', '7d'
 
 export const DurationDropdown = ({ duration, setDuration }: DurationDropDownProps) => {
   const { t } = useTranslation('plugin__distributed-tracing-console-plugin');
-  const [isOpen, setIsOpen] = React.useState(false);
 
   // The time range selection mirrors the options on the Metrics Page
   // Keep this list in sync with DurationValues above
   const timeRangeSelectOptions: TimeRangeSelectOption[] = [
     {
-      display: t('Last 5 minutes'),
+      children: t('Last 5 minutes'),
       value: '5m',
     },
     {
-      display: t('Last 15 minutes'),
+      children: t('Last 15 minutes'),
       value: '15m',
     },
     {
-      display: t('Last 30 minutes'),
+      children: t('Last 30 minutes'),
       value: '30m',
     },
     {
-      display: t('Last 1 hour'),
+      children: t('Last 1 hour'),
       value: '1h',
     },
     {
-      display: t('Last 6 hours'),
+      children: t('Last 6 hours'),
       value: '6h',
     },
     {
-      display: t('Last 12 hours'),
+      children: t('Last 12 hours'),
       value: '12h',
     },
     {
-      display: t('Last 1 day'),
+      children: t('Last 1 day'),
       value: '1d',
     },
     {
-      display: t('Last 7 days'),
+      children: t('Last 7 days'),
       value: '7d',
     },
   ];
 
-  const onToggle = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const onSelect = (
-    _event: React.MouseEvent | React.ChangeEvent,
-    value: string | SelectOptionObject,
-  ) => {
-    setDuration(value.toString() as DurationString);
-    setIsOpen(false);
-  };
-
   return (
     <Stack>
       <label htmlFor="duration-dropdown">{t('Time Range')}</label>
-      <Select
+      <BasicSelect
         id="duration-dropdown"
-        variant={SelectVariant.typeahead}
-        typeAheadAriaLabel={t('Select a Time Range')}
-        onToggle={onToggle}
-        onSelect={onSelect}
-        selections={duration}
-        isOpen={isOpen}
-        placeholderText={t('Select a Time Range')}
         width={200}
-      >
-        {timeRangeSelectOptions.map((option: TimeRangeSelectOption) => (
-          <SelectOption key={option.display} value={option.value}>
-            {option.display}
-          </SelectOption>
-        ))}
-      </Select>
+        placeholder={t('Select a Time Range')}
+        options={timeRangeSelectOptions}
+        selected={duration}
+        setSelected={(value) => setDuration(value as DurationString)}
+      />
     </Stack>
   );
 };
diff --git a/web/src/components/NoTempoInstanceSelectedState.tsx b/web/src/components/NoTempoInstanceSelectedState.tsx
index cf23025..5c5bddf 100644
--- a/web/src/components/NoTempoInstanceSelectedState.tsx
+++ b/web/src/components/NoTempoInstanceSelectedState.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import {
-  Title,
   EmptyState,
   EmptyStateBody,
   EmptyStateIcon,
-  Bullseye,
+  EmptyStateHeader,
 } from '@patternfly/react-core';
 import { CubesIcon } from '@patternfly/react-icons';
 
@@ -14,16 +13,15 @@ export const NoTempoInstanceSelectedState: React.FunctionComponent = () => {
   const { t } = useTranslation('plugin__distributed-tracing-console-plugin');
 
   return (
-    <Bullseye>
-      <EmptyState>
-        <EmptyStateIcon icon={CubesIcon} />
-        <Title headingLevel="h2" size="lg">
-          {t('No Tempo instance selected')}
-        </Title>
-        <EmptyStateBody>
-          {t('To explore data, select a Tempo instance and run a query.')}
-        </EmptyStateBody>
-      </EmptyState>
-    </Bullseye>
+    <EmptyState>
+      <EmptyStateHeader
+        titleText={t('No Tempo instance selected')}
+        headingLevel="h4"
+        icon={<EmptyStateIcon icon={CubesIcon} />}
+      />
+      <EmptyStateBody>
+        {t('To explore data, select a Tempo instance and run a query.')}
+      </EmptyStateBody>
+    </EmptyState>
   );
 };
diff --git a/web/src/components/TempoInstanceDropdown.tsx b/web/src/components/TempoInstanceDropdown.tsx
index 43cbcc1..4a3e463 100644
--- a/web/src/components/TempoInstanceDropdown.tsx
+++ b/web/src/components/TempoInstanceDropdown.tsx
@@ -1,58 +1,51 @@
-import {
-  Popover,
-  Select,
-  SelectOption,
-  SelectOptionObject,
-  SelectVariant,
-  Spinner,
-  Stack,
-} from '@patternfly/react-core';
-import * as React from 'react';
+import { Popover, Stack } from '@patternfly/react-core';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { TempoResource, useTempoResources } from '../hooks/useTempoResources';
-import { TypeaheadSelect } from './TypeaheadSelect';
 import { TempoInstance } from '../hooks/useTempoInstance';
 import { HelpIcon } from '@patternfly/react-icons';
+import { TypeaheadSelect } from './TypeaheadSelect';
 
 interface TempoInstanceDropdownProps {
   tempo: TempoInstance | undefined;
   setTempo: (tempo: TempoInstance) => void;
 }
 
-class TempoResourceSelectOption implements SelectOptionObject {
-  constructor(public tempo: TempoResource) {}
-  public toString() {
-    return `${this.tempo.namespace} / ${this.tempo.name}`;
-  }
-  public compareTo(other: TempoResourceSelectOption) {
-    return (
-      this.tempo.kind === other.tempo.kind &&
-      this.tempo.namespace === other.tempo.namespace &&
-      this.tempo.name === other.tempo.name
-    );
-  }
+interface TempoResourceOption {
+  value: string;
+  children: string;
+  tempo: TempoResource;
 }
 
 export const TempoInstanceDropdown = ({ tempo, setTempo }: TempoInstanceDropdownProps) => {
   const { t } = useTranslation('plugin__distributed-tracing-console-plugin');
   const { loading: tempoResourcesLoading, tempoResources } = useTempoResources();
-  const [isOpen, setIsOpen] = React.useState(false);
-  const options = (tempoResources ?? [])
-    .map((tempo) => new TempoResourceSelectOption(tempo))
-    .sort((a, b) => a.toString().localeCompare(b.toString()));
 
-  let selected: TempoResourceSelectOption | undefined = undefined;
+  const options: TempoResourceOption[] = (tempoResources ?? [])
+    .map((tempo) => ({
+      value: `${tempo.namespace}__${tempo.name}`,
+      children: `${tempo.namespace} / ${tempo.name}`,
+      tempo,
+    }))
+    .sort((a, b) => a.children.toString().localeCompare(b.children.toString()));
+
+  let selected: TempoResourceOption | undefined = undefined;
   if (tempo) {
     if (tempoResourcesLoading) {
       // Preselect the dropdown option without waiting until the list of TempoResources is loaded to prevent flickering.
       // To accomplish this, we'll create a slightly inaccurate TempoResourceSelectOption,
       // because the kind and the list of tenants is not known before the list of TempoResources is loaded.
-      selected = new TempoResourceSelectOption({
-        kind: 'TempoStack',
-        namespace: tempo.namespace,
-        name: tempo.name,
-        tenants: tempo.tenant ? [tempo.tenant] : undefined,
-      });
+      selected = {
+        value: `${tempo.namespace}__${tempo.name}`,
+        children: `${tempo.namespace} / ${tempo.name}`,
+        tempo: {
+          kind: 'TempoStack',
+          namespace: tempo.namespace,
+          name: tempo.name,
+          tenants: tempo.tenant ? [tempo.tenant] : undefined,
+        },
+      };
+      options.push(selected);
     } else {
       selected = options.find(
         (o) => o.tempo.namespace == tempo.namespace && o.tempo.name == tempo.name,
@@ -60,28 +53,17 @@ export const TempoInstanceDropdown = ({ tempo, setTempo }: TempoInstanceDropdown
     }
   }
 
-  const onToggle = () => {
-    setIsOpen(!isOpen);
-  };
+  const onSelect = (value?: string) => {
+    if (!value) return;
 
-  const onSelect = (_event: React.MouseEvent | React.ChangeEvent, value: SelectOptionObject) => {
-    const option = value as TempoResourceSelectOption;
-    setTempo({
-      namespace: option.tempo.namespace,
-      name: option.tempo.name,
-      tenant: option.tempo.tenants?.[0], // select first tenant by default, or undefined if no tenants
-    });
-    setIsOpen(false);
-  };
-
-  const onFilter = (_event: React.ChangeEvent<HTMLInputElement> | null, value: string) => {
-    return options
-      .filter((option) => {
-        return option.toString().includes(value);
-      })
-      .map((item, index) => {
-        return <SelectOption key={index} value={item}></SelectOption>;
+    const option = options.find((o) => o.value === value);
+    if (option && option.value !== selected?.value) {
+      setTempo({
+        namespace: option.tempo.namespace,
+        name: option.tempo.name,
+        tenant: option.tempo.tenants?.[0], // select first tenant by default, or undefined if no tenants
       });
+    }
   };
 
   return (
@@ -96,27 +78,15 @@ export const TempoInstanceDropdown = ({ tempo, setTempo }: TempoInstanceDropdown
             <HelpIcon />
           </Popover>
         </label>
-        <Select
+        <TypeaheadSelect
           id="tempoinstance-dropdown"
-          variant={SelectVariant.typeahead}
-          onFilter={onFilter}
-          onToggle={onToggle}
-          onSelect={onSelect}
-          selections={selected}
-          isOpen={isOpen}
-          placeholderText={t('Select a Tempo instance')}
-          typeAheadAriaLabel={t('Select a Tempo instance')}
           width={320}
-        >
-          {tempoResourcesLoading
-            ? [
-                <SelectOption isLoading key="custom-loading" value="loading">
-                  <Spinner size="lg" />
-                </SelectOption>,
-              ]
-            : // TODO: show resource icon in <SelectOption>
-              options.map((option, index) => <SelectOption key={index} value={option} />)}
-        </Select>
+          loading={tempoResourcesLoading}
+          placeholder={t('Select a Tempo instance')}
+          options={options}
+          selected={selected?.value}
+          setSelected={onSelect}
+        />
       </Stack>
       {selected?.tempo.tenants && selected.tempo.tenants.length > 0 && tempo && (
         <Stack>
@@ -124,9 +94,8 @@ export const TempoInstanceDropdown = ({ tempo, setTempo }: TempoInstanceDropdown
           <TypeaheadSelect
             id="tenant-dropdown"
             width={200}
-            label={t('Select a tenant')}
-            allowClear={false}
-            options={selected.tempo.tenants}
+            placeholder={t('Select a tenant')}
+            options={selected.tempo.tenants.map((t) => ({ value: t, children: t }))}
             selected={tempo.tenant}
             setSelected={(tenant) => setTempo({ ...tempo, tenant })}
           />
diff --git a/web/src/components/TypeaheadSelect.tsx b/web/src/components/TypeaheadSelect.tsx
index 254e22b..b4b54e5 100644
--- a/web/src/components/TypeaheadSelect.tsx
+++ b/web/src/components/TypeaheadSelect.tsx
@@ -1,72 +1,291 @@
-import React, { useState } from 'react';
-import { Select, SelectOption, SelectOptionObject, Spinner } from '@patternfly/react-core';
+import React from 'react';
+import {
+  Select,
+  SelectOption,
+  SelectList,
+  SelectOptionProps,
+  MenuToggle,
+  MenuToggleElement,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  Button,
+  Spinner,
+} from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import { useTranslation } from 'react-i18next';
 
 interface TypeaheadSelectProps {
-  id?: string;
+  id: string;
   width: number;
-  label: string;
-  isLoading?: boolean;
+  placeholder: string;
+  options: SelectOptionProps[];
+  selected?: string;
+  setSelected: (value?: string) => void;
   allowClear?: boolean;
-  options: string[];
-  selected: string | undefined;
-  setSelected: (value: string | undefined) => void;
+  loading?: boolean;
 }
 
-export function TypeaheadSelect({
-  id,
-  width,
-  label,
-  isLoading = false,
-  allowClear = true,
-  options,
-  selected,
-  setSelected,
-}: TypeaheadSelectProps) {
-  const [isOpen, setOpen] = useState(false);
-
-  function onFilter(_event: React.ChangeEvent<HTMLInputElement> | null, value: string) {
-    return options
-      .filter((option) => option.includes(value))
-      .map((item, i) => <SelectOption key={i} value={item}></SelectOption>);
-  }
-
-  function onSelect(
-    _event: React.MouseEvent | React.ChangeEvent,
-    value: string | SelectOptionObject,
-  ) {
-    setSelected(value.toString());
-    setOpen(false);
-  }
-
-  function onToggle() {
-    setOpen(!isOpen);
-  }
-
-  function onClear() {
-    setSelected(undefined);
-    setOpen(false);
-  }
+// adapted from https://v5-archive.patternfly.org/components/menus/select#typeahead
+export function TypeaheadSelect(props: TypeaheadSelectProps) {
+  const { selected, setSelected } = props;
+  const { t } = useTranslation('plugin__distributed-tracing-console-plugin');
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState<string>('');
+  const [filterValue, setFilterValue] = React.useState<string>('');
+  const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(props.options);
+  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
+  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
+  const textInputRef = React.useRef<HTMLInputElement>();
+
+  const NO_RESULTS = 'no results';
+
+  React.useEffect(() => {
+    let newSelectOptions: SelectOptionProps[] = props.options;
+
+    // Filter menu items based on the text input value when one exists
+    if (filterValue) {
+      newSelectOptions = props.options.filter((menuItem) =>
+        String(menuItem.children).toLowerCase().includes(filterValue.toLowerCase()),
+      );
+
+      // When no options are found after filtering, display 'No results found'
+      if (!newSelectOptions.length) {
+        newSelectOptions = [
+          {
+            isAriaDisabled: true,
+            children: t('No results found for {{value}}', { value: filterValue }),
+            value: NO_RESULTS,
+          },
+        ];
+      }
+
+      // Open the menu when the input value changes and the new value is not empty
+      if (!isOpen) {
+        setIsOpen(true);
+      }
+    }
+
+    setSelectOptions(newSelectOptions);
+  }, [t, props.options, filterValue, isOpen]);
+
+  React.useEffect(() => {
+    const option = props.options.find((o) => o.value === props.selected);
+    if (option) {
+      setInputValue(String(option.children));
+      setFilterValue('');
+    }
+  }, [props.selected, props.options]);
+
+  const createItemId = (value: string) => `${props.id}-item-${value.replace(' ', '-')}`;
+
+  const setActiveAndFocusedItem = (itemIndex: number) => {
+    setFocusedItemIndex(itemIndex);
+    const focusedItem = selectOptions[itemIndex];
+    setActiveItemId(createItemId(focusedItem.value));
+  };
+
+  const resetActiveAndFocusedItem = () => {
+    setFocusedItemIndex(null);
+    setActiveItemId(null);
+  };
+
+  const closeMenu = () => {
+    setIsOpen(false);
+    resetActiveAndFocusedItem();
+  };
+
+  const onInputClick = () => {
+    if (!isOpen) {
+      setIsOpen(true);
+    } else if (!inputValue) {
+      closeMenu();
+    }
+  };
+
+  const selectOption = (value: string | number, content: string | number) => {
+    setInputValue(String(content));
+    setFilterValue('');
+    setSelected(String(value));
+
+    closeMenu();
+  };
+
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined,
+  ) => {
+    if (value && value !== NO_RESULTS) {
+      const optionText = selectOptions.find((option) => option.value === value)?.children;
+      selectOption(value, optionText as string);
+    }
+  };
+
+  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+    setInputValue(value);
+    setFilterValue(value);
+
+    resetActiveAndFocusedItem();
+
+    if (value !== selected) {
+      setSelected('');
+    }
+  };
+
+  const handleMenuArrowKeys = (key: string) => {
+    let indexToFocus = 0;
+
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+
+    if (selectOptions.every((option) => option.isDisabled)) {
+      return;
+    }
+
+    if (key === 'ArrowUp') {
+      // When no index is set or at the first index, focus to the last, otherwise decrement focus index
+      if (focusedItemIndex === null || focusedItemIndex === 0) {
+        indexToFocus = selectOptions.length - 1;
+      } else {
+        indexToFocus = focusedItemIndex - 1;
+      }
+
+      // Skip disabled options
+      while (selectOptions[indexToFocus].isDisabled) {
+        indexToFocus--;
+        if (indexToFocus === -1) {
+          indexToFocus = selectOptions.length - 1;
+        }
+      }
+    }
+
+    if (key === 'ArrowDown') {
+      // When no index is set or at the last index, focus to the first, otherwise increment focus index
+      if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
+        indexToFocus = 0;
+      } else {
+        indexToFocus = focusedItemIndex + 1;
+      }
+
+      // Skip disabled options
+      while (selectOptions[indexToFocus].isDisabled) {
+        indexToFocus++;
+        if (indexToFocus === selectOptions.length) {
+          indexToFocus = 0;
+        }
+      }
+    }
+
+    setActiveAndFocusedItem(indexToFocus);
+  };
+
+  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
+
+    switch (event.key) {
+      case 'Enter':
+        if (
+          isOpen &&
+          focusedItem &&
+          focusedItem.value !== NO_RESULTS &&
+          !focusedItem.isAriaDisabled
+        ) {
+          selectOption(focusedItem.value, focusedItem.children as string);
+        }
+
+        if (!isOpen) {
+          setIsOpen(true);
+        }
+
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        event.preventDefault();
+        handleMenuArrowKeys(event.key);
+        break;
+    }
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+    textInputRef?.current?.focus();
+  };
+
+  const onClearButtonClick = () => {
+    setSelected('');
+    setInputValue('');
+    setFilterValue('');
+    resetActiveAndFocusedItem();
+    textInputRef?.current?.focus();
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      variant="typeahead"
+      aria-label="Typeahead menu toggle"
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={{ width: props.width }}
+    >
+      <TextInputGroup isPlain>
+        <TextInputGroupMain
+          value={inputValue}
+          onClick={onInputClick}
+          onChange={onTextInputChange}
+          onKeyDown={onInputKeyDown}
+          id={`${props.id}-input`}
+          autoComplete="off"
+          innerRef={textInputRef}
+          placeholder={props.placeholder}
+          {...(activeItemId && { 'aria-activedescendant': activeItemId })}
+          role="combobox"
+          isExpanded={isOpen}
+          aria-controls="select-typeahead-listbox"
+        />
+
+        {props.allowClear && (
+          <TextInputGroupUtilities {...(!inputValue ? { style: { display: 'none' } } : {})}>
+            <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value">
+              <TimesIcon aria-hidden />
+            </Button>
+          </TextInputGroupUtilities>
+        )}
+      </TextInputGroup>
+    </MenuToggle>
+  );
 
   return (
     <Select
-      id={id}
-      variant="typeahead"
-      width={width}
+      id={props.id}
       isOpen={isOpen}
-      selections={selected}
-      onFilter={onFilter}
+      selected={selected}
       onSelect={onSelect}
-      onToggle={onToggle}
-      onClear={allowClear ? onClear : undefined}
-      placeholderText={label}
+      onOpenChange={(isOpen) => {
+        !isOpen && closeMenu();
+      }}
+      toggle={toggle}
+      shouldFocusFirstItemOnOpen={false}
     >
-      {isLoading
-        ? [
-            <SelectOption isLoading key="custom-loading" value="loading">
-              <Spinner size="lg" />
-            </SelectOption>,
-          ]
-        : options.map((option, i) => <SelectOption key={i} value={option} />)}
+      <SelectList id={`${props.id}-listbox`}>
+        {props.loading ? (
+          <SelectOption isLoading key="loading" value="loading">
+            <Spinner size="lg" />
+          </SelectOption>
+        ) : (
+          selectOptions.map((option, index) => (
+            <SelectOption
+              key={option.value}
+              isFocused={focusedItemIndex === index}
+              className={option.className}
+              id={createItemId(option.value)}
+              {...option}
+              ref={null}
+            />
+          ))
+        )}
+      </SelectList>
     </Select>
   );
 }
diff --git a/web/src/pages/TracesPage/QueryEditor/QueryEditor.tsx b/web/src/pages/TracesPage/QueryEditor/QueryEditor.tsx
index cbc2b60..853fb39 100644
--- a/web/src/pages/TracesPage/QueryEditor/QueryEditor.tsx
+++ b/web/src/pages/TracesPage/QueryEditor/QueryEditor.tsx
@@ -80,7 +80,7 @@ export function QueryEditor({ tempo, query, limit, runQuery }: QueryEditorProps)
               : ''
           }
           validated={pendingLimitHasError ? 'error' : 'default'}
-          onChange={setPendingLimit}
+          onChange={(_evt, value) => setPendingLimit(value)}
           aria-label="max traces"
           size={5}
         />
diff --git a/web/src/pages/TracesPage/TraceTable.tsx b/web/src/pages/TracesPage/TraceTable.tsx
index 571e1a6..8fe44e0 100644
--- a/web/src/pages/TracesPage/TraceTable.tsx
+++ b/web/src/pages/TracesPage/TraceTable.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 import { TraceQueryPanelWrapper } from '../../components/PersesWrapper';
 import { TraceTable as PersesTraceTable } from '@perses-dev/panels-plugin';
 import {
-  Bullseye,
   Button,
   EmptyState,
+  EmptyStateActions,
   EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateHeader,
   EmptyStateIcon,
-  EmptyStatePrimary,
-  Title,
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
 import { useTranslation } from 'react-i18next';
@@ -24,22 +24,23 @@ export function TraceTable({ runQuery }: TraceTableProps) {
   const { t } = useTranslation('plugin__distributed-tracing-console-plugin');
 
   const noResults = (
-    <Bullseye>
-      <EmptyState>
-        <EmptyStateIcon icon={SearchIcon} />
-        <Title headingLevel="h2" size="lg">
-          {t('No results found')}
-        </Title>
-        <EmptyStateBody>
-          {t('No results match this query criteria. Clear all filters and try again.')}
-        </EmptyStateBody>
-        <EmptyStatePrimary>
+    <EmptyState>
+      <EmptyStateHeader
+        titleText={t('No results found')}
+        headingLevel="h4"
+        icon={<EmptyStateIcon icon={SearchIcon} />}
+      />
+      <EmptyStateBody>
+        {t('No results match this query criteria. Clear all filters and try again.')}
+      </EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>
           <Button variant="link" onClick={() => runQuery({ query: '{}' })}>
             {t('Clear all filters')}
           </Button>
-        </EmptyStatePrimary>
-      </EmptyState>
-    </Bullseye>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </EmptyState>
   );
 
   return (
diff --git a/web/src/pages/TracesPage/TracesPage.tsx b/web/src/pages/TracesPage/TracesPage.tsx
index 2baf3b5..ab0e567 100644
--- a/web/src/pages/TracesPage/TracesPage.tsx
+++ b/web/src/pages/TracesPage/TracesPage.tsx
@@ -2,17 +2,18 @@ import React, { useState } from 'react';
 import { useTempoResources } from '../../hooks/useTempoResources';
 import { QueryBrowser } from './QueryBrowser';
 import {
-  Bullseye,
   Button,
   Divider,
   Dropdown,
   DropdownItem,
-  DropdownToggle,
+  DropdownList,
   EmptyState,
+  EmptyStateActions,
   EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateHeader,
   EmptyStateIcon,
-  EmptyStatePrimary,
-  EmptyStateSecondaryActions,
+  MenuToggle,
   Page,
   PageSection,
   Stack,
@@ -33,7 +34,7 @@ const createTempoStackLink =
 const createTempoMonolithicLink =
   '/api-resource/all-namespaces/tempo.grafana.com~v1alpha1~TempoMonolithic/instances';
 const viewInstallationDocsLink =
-  'https://docs.openshift.com/container-platform/4.16/observability/distr_tracing/distr_tracing_tempo/distr-tracing-tempo-installing.html';
+  'https://docs.redhat.com/en/documentation/openshift_container_platform/latest/html/distributed_tracing/distributed-tracing-platform-tempo';
 
 export function TracesPage() {
   const { t } = useTranslation('plugin__distributed-tracing-console-plugin');
@@ -86,22 +87,25 @@ function TempoOperatorNotInstalledState() {
         <Title headingLevel="h1">{t('Traces')}</Title>
       </PageSection>
       <PageSection>
-        <Bullseye>
-          <EmptyState>
-            <EmptyStateIcon icon={WrenchIcon} />
-            <Title headingLevel="h2" size="lg">
-              {t("Tempo operator isn't installed yet")}
-            </Title>
-            <EmptyStateBody>
-              {t(
-                'To get started, install the Tempo operator and create a TempoStack or TempoMonolithic instance with multi-tenancy enabled.',
-              )}
-            </EmptyStateBody>
-            <Button component={(props) => <Link {...props} to={installOperatorLink} />}>
-              {t('Install Tempo operator')}
-            </Button>
-          </EmptyState>
-        </Bullseye>
+        <EmptyState>
+          <EmptyStateHeader
+            titleText={t("Tempo operator isn't installed yet")}
+            headingLevel="h4"
+            icon={<EmptyStateIcon icon={WrenchIcon} />}
+          />
+          <EmptyStateBody>
+            {t(
+              'To get started, install the Tempo operator and create a TempoStack or TempoMonolithic instance with multi-tenancy enabled.',
+            )}
+          </EmptyStateBody>
+          <EmptyStateFooter>
+            <EmptyStateActions>
+              <Button component={(props) => <Link {...props} to={installOperatorLink} />}>
+                {t('Install Tempo operator')}
+              </Button>
+            </EmptyStateActions>
+          </EmptyStateFooter>
+        </EmptyState>
       </PageSection>
     </>
   );
@@ -117,44 +121,44 @@ function NoTempoInstance() {
         <Title headingLevel="h1">{t('Traces')}</Title>
       </PageSection>
       <PageSection>
-        <Bullseye>
-          <EmptyState>
-            <EmptyStateIcon icon={PlusCircleIcon} />
-            <Title headingLevel="h2" size="lg">
-              {t('No Tempo instances yet')}
-            </Title>
-            <EmptyStateBody>
-              {t(
-                'To get started, create a TempoStack or TempoMonolithic instance with multi-tenancy enabled.',
-              )}
-            </EmptyStateBody>
-            <EmptyStatePrimary>
+        <EmptyState>
+          <EmptyStateHeader
+            titleText={t('No Tempo instances yet')}
+            headingLevel="h4"
+            icon={<EmptyStateIcon icon={PlusCircleIcon} />}
+          />
+          <EmptyStateBody>
+            {t(
+              'To get started, create a TempoStack or TempoMonolithic instance with multi-tenancy enabled.',
+            )}
+          </EmptyStateBody>
+          <EmptyStateFooter>
+            <EmptyStateActions>
               <Dropdown
                 isOpen={isOpen}
-                toggle={
-                  <DropdownToggle toggleVariant="primary" onToggle={setOpen}>
+                onOpenChange={setOpen}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    variant="primary"
+                    onClick={() => setOpen(!isOpen)}
+                    isExpanded={isOpen}
+                  >
                     {t('Create a Tempo instance')}
-                  </DropdownToggle>
-                }
-                dropdownItems={[
-                  <DropdownItem
-                    key="createTempoStackLink"
-                    component={
-                      <Link to={createTempoStackLink}>{t('Create a TempoStack instance')}</Link>
-                    }
-                  />,
-                  <DropdownItem
-                    key="createTempoMonolithicLink"
-                    component={
-                      <Link to={createTempoMonolithicLink}>
-                        {t('Create a TempoMonolithic instance')}
-                      </Link>
-                    }
-                  />,
-                ]}
-              />
-            </EmptyStatePrimary>
-            <EmptyStateSecondaryActions>
+                  </MenuToggle>
+                )}
+              >
+                <DropdownList>
+                  <DropdownItem key="createTempoStackLink" to={createTempoStackLink}>
+                    {t('Create a TempoStack instance')}
+                  </DropdownItem>
+                  <DropdownItem key="createTempoMonolithicLink" to={createTempoMonolithicLink}>
+                    {t('Create a TempoMonolithic instance')}
+                  </DropdownItem>
+                </DropdownList>
+              </Dropdown>
+            </EmptyStateActions>
+            <EmptyStateActions>
               <Button
                 variant="link"
                 component="a"
@@ -164,9 +168,9 @@ function NoTempoInstance() {
               >
                 {t('View documentation')}
               </Button>
-            </EmptyStateSecondaryActions>
-          </EmptyState>
-        </Bullseye>
+            </EmptyStateActions>
+          </EmptyStateFooter>
+        </EmptyState>
       </PageSection>
     </>
   );