Merge branch 'main' into improve-docs

2026-03-01 12:44:17 +00:00 · 2025-04-17 02:56:27 +02:00 · 2025-04-17 02:56:27 +02:00 · 0e6f874bb3
commit 0e6f874bb3
parent 645b307ddb 7fdc41d679
59 changed files with 678 additions and 767 deletions
--- a/.github/workflows/deploy.docs.yml
+++ b/.github/workflows/deploy.docs.yml
@ -19,14 +19,26 @@ jobs:
        run: |
          npm install
          npm run build
-          npm link
        working-directory: ./

      - name: Build static files
        id: build
-        run: npm install && npm run docs:generate
+        run: npm run docs:generate
        working-directory: ./

+      - name: Generate coverage
+        id: coverage
+        run: npm run test:unit
+
+      - name: Create coverage badges
+        id: coverage-badge
+        uses: jaywcjlove/coverage-badges-cli@main
+        with:
+          style: flat
+          source: coverage/coverage-summary.json
+          output: docs/test-coverage.svg
+          jsonPath: total.lines.pct
+
      - name: Upload static files as artifact
        id: deployment
        uses: actions/upload-pages-artifact@v3.0.1
--- a/.github/workflows/test.unit.yml
+++ b/.github/workflows/test.unit.yml
@ -17,8 +17,6 @@ jobs:
            unit:
              - '.github/workflows/**/*'
              - '**/*'
-              - '!**/*.md'
-          predicate-quantifier: 'every'

  unit:
    if: needs.files-changed.outputs.unit == 'true'
--- a/README.md
+++ b/README.md
@ -1,4 +1,4 @@
-# Utopia UI [![npm version](https://img.shields.io/npm/v/utopia-ui.svg)](https://www.npmjs.com/package/utopia-ui)  ![Build Status](https://img.shields.io/github/actions/workflow/status/utopia-os/utopia-ui/test.build.yml?branch=main) [![Docs Coverage](https://utopia-os.org/utopia-ui/coverage.svg)](https://utopia-os.org/utopia-ui/) ![License](https://img.shields.io/github/license/utopia-os/utopia-ui)
+# Utopia UI [![npm version](https://img.shields.io/npm/v/utopia-ui.svg)](https://www.npmjs.com/package/utopia-ui)  ![Build Status](https://img.shields.io/github/actions/workflow/status/utopia-os/utopia-ui/test.build.yml?branch=main) ![Test Coverage](https://utopia-os.org/utopia-ui/test-coverage.svg) [![Docs Coverage](https://utopia-os.org/utopia-ui/coverage.svg)](https://utopia-os.org/utopia-ui/) ![License](https://img.shields.io/github/license/utopia-os/utopia-ui)

 **UI Framework for Real-Life-Networking-Apps**

@ -70,3 +70,7 @@ Tags, colors and clusters help to retain the overview.
 <a href="https://opencollective.com/utopia-project">
    <img width="300" src="https://opencollective.com/utopia-project/donate/button@2x.png?color=blue" />
 </a>
+
+---
+
+This project is tested with BrowserStack
--- a/examples/1-basic-map/README.md
+++ b/examples/1-basic-map/README.md
@ -8,6 +8,7 @@ We'll use **Vite** to create an empty React app named **"1-static-map"**:

 ```shell
 npm create vite@latest 1-static-map -- --template react-ts
+```

 Next, we navigate into our project folder and install the [utopia-ui](https://github.com/utopia-os/utopia-ui) package:  

@ -38,7 +39,8 @@ To see our **first map app**, we start the development server:

 ```shell
 npm run dev
+```

-Now, we can open the project in the browser and explore our interactive map! 😊  
+Now, we can open [localhost:5173](http://localhost:5173/) in the browser and explore our interactive map! 😊  

 ➡️ In [Example 2](../2-static-layers/), we'll add **static data** to our map.  
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "utopia-ui",
-  "version": "3.0.66",
+  "version": "3.0.80",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "utopia-ui",
-      "version": "3.0.66",
+      "version": "3.0.80",
      "license": "GPL-3.0-only",
      "dependencies": {
        "@heroicons/react": "^2.0.17",
@ -18,6 +18,7 @@
        "radash": "^12.1.0",
        "react-colorful": "^5.6.1",
        "react-image-crop": "^10.1.8",
+        "react-inlinesvg": "^4.2.0",
        "react-leaflet": "^4.2.1",
        "react-leaflet-cluster": "^2.1.0",
        "react-markdown": "^9.0.1",
@ -25,7 +26,6 @@
        "react-router-dom": "^6.16.0",
        "react-toastify": "^9.1.3",
        "remark-breaks": "^4.0.0",
-        "tw-elements": "^1.0.0",
        "yet-another-react-lightbox": "^3.21.7"
      },
      "devDependencies": {
@ -1052,6 +1052,7 @@
      "version": "8.0.2",
      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
      "license": "ISC",
      "dependencies": {
        "string-width": "^5.1.2",
@ -1069,6 +1070,7 @@
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=12"
@ -1081,6 +1083,7 @@
      "version": "6.2.1",
      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=12"
@ -1093,12 +1096,14 @@
      "version": "9.2.2",
      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/@isaacs/cliui/node_modules/string-width": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "eastasianwidth": "^0.2.0",
@ -1116,6 +1121,7 @@
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "ansi-regex": "^6.0.1"
@ -1131,6 +1137,7 @@
      "version": "8.1.0",
      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "ansi-styles": "^6.1.0",
@ -1158,6 +1165,7 @@
      "version": "0.3.8",
      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@jridgewell/set-array": "^1.2.1",
@ -1172,6 +1180,7 @@
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=6.0.0"
@ -1181,6 +1190,7 @@
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=6.0.0"
@ -1190,12 +1200,14 @@
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/@jridgewell/trace-mapping": {
      "version": "0.3.25",
      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@jridgewell/resolve-uri": "^3.1.0",
@ -1206,6 +1218,7 @@
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@nodelib/fs.stat": "2.0.5",
@ -1219,6 +1232,7 @@
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 8"
@ -1228,6 +1242,7 @@
      "version": "1.2.8",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@nodelib/fs.scandir": "2.1.5",
@ -1251,6 +1266,7 @@
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "engines": {
@ -1270,16 +1286,6 @@
        "url": "https://opencollective.com/unts"
      }
    },
-    "node_modules/@popperjs/core": {
-      "version": "2.11.8",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
-      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
    "node_modules/@react-leaflet/core": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
@ -2746,6 +2752,7 @@
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8"
@ -2755,6 +2762,7 @@
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "color-convert": "^2.0.1"
@ -2770,12 +2778,14 @@
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/anymatch": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
      "license": "ISC",
      "dependencies": {
        "normalize-path": "^3.0.0",
@ -2789,6 +2799,7 @@
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8.6"
@ -2822,6 +2833,7 @@
      "version": "5.0.2",
      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/argparse": {
@ -3177,6 +3189,7 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/base64-js": {
@ -3214,6 +3227,7 @@
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8"
@ -3258,6 +3272,7 @@
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "fill-range": "^7.1.1"
@ -3453,6 +3468,7 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 6"
@ -3583,21 +3599,6 @@
        "url": "https://github.com/sponsors/wooorm"
      }
    },
-    "node_modules/chart.js": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
-      "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==",
-      "license": "MIT"
-    },
-    "node_modules/chartjs-plugin-datalabels": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.2.0.tgz",
-      "integrity": "sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "chart.js": ">=3.0.0"
-      }
-    },
    "node_modules/check-error": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
@ -3622,6 +3623,7 @@
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "anymatch": "~3.1.2",
@ -3646,6 +3648,7 @@
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
      "license": "ISC",
      "dependencies": {
        "is-glob": "^4.0.1"
@ -3739,6 +3742,7 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "color-name": "~1.1.4"
@ -3751,6 +3755,7 @@
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/colord": {
@ -3871,6 +3876,7 @@
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "path-key": "^3.1.0",
@ -3960,6 +3966,7 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
      "license": "MIT",
      "bin": {
        "cssesc": "bin/cssesc"
@ -4086,12 +4093,6 @@
        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
      }
    },
-    "node_modules/custom-event-polyfill": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
-      "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==",
-      "license": "MIT"
-    },
    "node_modules/cypress": {
      "version": "14.0.3",
      "resolved": "https://registry.npmjs.org/cypress/-/cypress-14.0.3.tgz",
@ -4329,6 +4330,7 @@
      "version": "4.3.1",
      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@ -4388,15 +4390,6 @@
        "node": ">=6"
      }
    },
-    "node_modules/detect-autofill": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/detect-autofill/-/detect-autofill-1.1.4.tgz",
-      "integrity": "sha512-utCBQwCR/beSnADQmBC7C4tTueBBkYCl6WSpfGUkYKO/+MzPxqYGj6G4MvHzcKmH1gCTK+VunX2vaagvkRXPvA==",
-      "license": "MIT",
-      "dependencies": {
-        "custom-event-polyfill": "^1.0.7"
-      }
-    },
    "node_modules/devlop": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
@ -4414,6 +4407,7 @@
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
      "license": "Apache-2.0"
    },
    "node_modules/dir-glob": {
@ -4433,6 +4427,7 @@
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/doctrine": {
@ -4544,6 +4539,7 @@
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/ecc-jsbn": {
@ -4568,6 +4564,7 @@
      "version": "8.0.0",
      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/end-of-stream": {
@ -5661,6 +5658,7 @@
      "version": "3.3.3",
      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@nodelib/fs.stat": "^2.0.2",
@ -5677,6 +5675,7 @@
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
      "license": "ISC",
      "dependencies": {
        "is-glob": "^4.0.1"
@ -5710,6 +5709,7 @@
      "version": "1.19.0",
      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.0.tgz",
      "integrity": "sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA==",
+      "dev": true,
      "license": "ISC",
      "dependencies": {
        "reusify": "^1.0.4"
@ -5783,6 +5783,7 @@
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "to-regex-range": "^5.0.1"
@ -5870,6 +5871,7 @@
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "dev": true,
      "license": "ISC",
      "dependencies": {
        "cross-spawn": "^7.0.0",
@ -5886,6 +5888,7 @@
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
      "license": "ISC",
      "engines": {
        "node": ">=14"
@ -5960,6 +5963,7 @@
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
      "hasInstallScript": true,
      "license": "MIT",
      "optional": true,
@ -6160,6 +6164,7 @@
      "version": "6.0.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
      "license": "ISC",
      "dependencies": {
        "is-glob": "^4.0.3"
@ -6727,6 +6732,7 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "binary-extensions": "^2.0.0"
@ -6795,6 +6801,7 @@
      "version": "2.16.1",
      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "hasown": "^2.0.2"
@ -6855,6 +6862,7 @@
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@ -6880,6 +6888,7 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8"
@ -6908,6 +6917,7 @@
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "is-extglob": "^2.1.1"
@ -6967,6 +6977,7 @@
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.12.0"
@ -7200,6 +7211,7 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
      "license": "ISC"
    },
    "node_modules/isstream": {
@ -7285,6 +7297,7 @@
      "version": "3.4.3",
      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
      "license": "BlueOak-1.0.0",
      "dependencies": {
        "@isaacs/cliui": "^8.0.2"
@ -7300,6 +7313,7 @@
      "version": "1.21.7",
      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
      "license": "MIT",
      "bin": {
        "jiti": "bin/jiti.js"
@ -7510,6 +7524,7 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=10"
@ -7519,6 +7534,7 @@
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/linkify-it": {
@ -8061,6 +8077,7 @@
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 8"
@ -8512,6 +8529,7 @@
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "braces": "^3.0.3",
@ -8525,6 +8543,7 @@
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8.6"
@ -8601,6 +8620,7 @@
      "version": "7.1.2",
      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
      "license": "ISC",
      "engines": {
        "node": ">=16 || 14 >=14.17"
@ -8616,6 +8636,7 @@
      "version": "2.7.0",
      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "any-promise": "^1.0.0",
@ -8627,6 +8648,7 @@
      "version": "3.3.8",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+      "dev": true,
      "funding": [
        {
          "type": "github",
@ -8677,6 +8699,7 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@ -8735,6 +8758,7 @@
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@ -8744,6 +8768,7 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 6"
@ -9022,6 +9047,7 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
      "license": "BlueOak-1.0.0"
    },
    "node_modules/parent-module": {
@ -9105,6 +9131,7 @@
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8"
@ -9114,12 +9141,14 @@
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/path-scurry": {
      "version": "1.11.1",
      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
      "license": "BlueOak-1.0.0",
      "dependencies": {
        "lru-cache": "^10.2.0",
@ -9136,6 +9165,7 @@
      "version": "10.4.3",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
      "license": "ISC"
    },
    "node_modules/path-type": {
@ -9172,12 +9202,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/perfect-scrollbar": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.6.tgz",
-      "integrity": "sha512-rixgxw3SxyJbCaSpo1n35A/fwI1r2rdwMKOTCg/AcG+xOEyZcE8UHVjpZMFCVImzsFoCZeJTT+M/rdEIQYO2nw==",
-      "license": "MIT"
-    },
    "node_modules/performance-now": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@ -9189,6 +9213,7 @@
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
      "license": "ISC"
    },
    "node_modules/picomatch": {
@ -9208,6 +9233,7 @@
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@ -9217,6 +9243,7 @@
      "version": "4.0.6",
      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 6"
@ -9236,6 +9263,7 @@
      "version": "8.5.3",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+      "dev": true,
      "funding": [
        {
          "type": "opencollective",
@ -9383,6 +9411,7 @@
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "camelcase-css": "^2.0.1"
@ -9402,6 +9431,7 @@
      "version": "3.1.4",
      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "lilconfig": "^2.0.5",
@ -9431,6 +9461,7 @@
      "version": "1.10.2",
      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
      "license": "ISC",
      "engines": {
        "node": ">= 6"
@ -9874,6 +9905,7 @@
      "version": "6.1.2",
      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "cssesc": "^3.0.0",
@ -9920,6 +9952,7 @@
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/prelude-ls": {
@ -10110,6 +10143,7 @@
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
      "funding": [
        {
          "type": "github",
@ -10126,18 +10160,6 @@
      ],
      "license": "MIT"
    },
-    "node_modules/quick-lru": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
-      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
    "node_modules/radash": {
      "version": "12.1.0",
      "resolved": "https://registry.npmjs.org/radash/-/radash-12.1.0.tgz",
@ -10182,6 +10204,14 @@
        "react": "^18.3.1"
      }
    },
+    "node_modules/react-from-dom": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.7.5.tgz",
+      "integrity": "sha512-CO92PmMKo/23uYPm6OFvh5CtZbMgHs/Xn+o095Lz/TZj9t8DSDhGdSOMLxBxwWI4sr0MF17KUn9yJWc5Q00R/w==",
+      "peerDependencies": {
+        "react": "16.8 - 19"
+      }
+    },
    "node_modules/react-image-crop": {
      "version": "10.1.8",
      "resolved": "https://registry.npmjs.org/react-image-crop/-/react-image-crop-10.1.8.tgz",
@ -10191,6 +10221,17 @@
        "react": ">=16.13.1"
      }
    },
+    "node_modules/react-inlinesvg": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-4.2.0.tgz",
+      "integrity": "sha512-V59P6sFU7NACIbvoay9ikYKVFWyIIZFGd7w6YT1m+H7Ues0fOI6B6IftE6NPSYXXv7RHVmrncIyJeYurs3OJcA==",
+      "dependencies": {
+        "react-from-dom": "^0.7.5"
+      },
+      "peerDependencies": {
+        "react": "16.8 - 19"
+      }
+    },
    "node_modules/react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -10331,6 +10372,7 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "pify": "^2.3.0"
@ -10340,6 +10382,7 @@
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "picomatch": "^2.2.1"
@ -10352,6 +10395,7 @@
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8.6"
@ -10497,6 +10541,7 @@
      "version": "1.22.10",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "is-core-module": "^2.16.0",
@ -10551,6 +10596,7 @@
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "iojs": ">=1.0.0",
@ -10733,6 +10779,7 @@
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
      "funding": [
        {
          "type": "github",
@ -10937,6 +10984,7 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "shebang-regex": "^3.0.0"
@ -10949,6 +10997,7 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8"
@ -11094,6 +11143,7 @@
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
      "license": "BSD-3-Clause",
      "engines": {
        "node": ">=0.10.0"
@ -11175,6 +11225,7 @@
      "version": "4.2.3",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "emoji-regex": "^8.0.0",
@ -11190,6 +11241,7 @@
      "version": "4.2.3",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "emoji-regex": "^8.0.0",
@ -11316,6 +11368,7 @@
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "ansi-regex": "^5.0.1"
@ -11329,6 +11382,7 @@
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "ansi-regex": "^5.0.1"
@ -11420,6 +11474,7 @@
      "version": "3.35.0",
      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@jridgewell/gen-mapping": "^0.3.2",
@ -11442,6 +11497,7 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "balanced-match": "^1.0.0"
@ -11451,6 +11507,7 @@
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 6"
@ -11460,6 +11517,7 @@
      "version": "10.4.5",
      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
      "license": "ISC",
      "dependencies": {
        "foreground-child": "^3.1.0",
@ -11480,6 +11538,7 @@
      "version": "9.0.5",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
      "license": "ISC",
      "dependencies": {
        "brace-expansion": "^2.0.1"
@ -11508,6 +11567,7 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
@ -11742,6 +11802,7 @@
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "any-promise": "^1.0.0"
@ -11751,6 +11812,7 @@
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "thenify": ">= 3.1.0 < 4"
@ -11868,6 +11930,7 @@
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "is-number": "^7.0.0"
@ -11923,6 +11986,7 @@
      "version": "0.1.13",
      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
      "license": "Apache-2.0"
    },
    "node_modules/tsconfig-paths": {
@ -11994,99 +12058,6 @@
        "node": "*"
      }
    },
-    "node_modules/tw-elements": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/tw-elements/-/tw-elements-1.1.0.tgz",
-      "integrity": "sha512-IUr9YW2l99oTVZxuVjQg6rpuCpo6VZqbaKGYmZUNVVsoSVU/ljPpkJAY2Pn/morlXwKPhP9MTPNQMlWosqHL4w==",
-      "license": "AGPL",
-      "dependencies": {
-        "@popperjs/core": "^2.6.0",
-        "chart.js": "^3.7.1",
-        "chartjs-plugin-datalabels": "^2.0.0",
-        "deepmerge": "^4.2.2",
-        "detect-autofill": "^1.1.3",
-        "perfect-scrollbar": "^1.5.5",
-        "tailwindcss": "3.3.0"
-      }
-    },
-    "node_modules/tw-elements/node_modules/postcss-import": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
-      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/tw-elements/node_modules/postcss-nested": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
-      "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.10"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/tw-elements/node_modules/tailwindcss": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.0.tgz",
-      "integrity": "sha512-hOXlFx+YcklJ8kXiCAfk/FMyr4Pm9ck477G0m/us2344Vuj355IpoEDB5UmGAsSpTBmr+4ZhjzW04JuFXkb/fw==",
-      "license": "MIT",
-      "dependencies": {
-        "arg": "^5.0.2",
-        "chokidar": "^3.5.3",
-        "color-name": "^1.1.4",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.2.12",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.17.2",
-        "lilconfig": "^2.0.6",
-        "micromatch": "^4.0.5",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.0.0",
-        "postcss": "^8.0.9",
-        "postcss-import": "^14.1.0",
-        "postcss-js": "^4.0.0",
-        "postcss-load-config": "^3.1.4",
-        "postcss-nested": "6.0.0",
-        "postcss-selector-parser": "^6.0.11",
-        "postcss-value-parser": "^4.2.0",
-        "quick-lru": "^5.1.1",
-        "resolve": "^1.22.1",
-        "sucrase": "^3.29.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=12.13.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.9"
-      }
-    },
    "node_modules/tweetnacl": {
      "version": "0.14.5",
      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
@ -12470,6 +12441,7 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/uuid": {
@ -12770,6 +12742,7 @@
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
      "license": "ISC",
      "dependencies": {
        "isexe": "^2.0.0"
@ -12919,6 +12892,7 @@
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "ansi-styles": "^4.0.0",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "utopia-ui",
-  "version": "3.0.66",
+  "version": "3.0.81",
  "description": "Reuseable React Components to build mapping apps for real life communities and networks",
  "repository": "https://github.com/utopia-os/utopia-ui",
  "homepage": "https://utopia-os.org/",
@ -99,6 +99,7 @@
    "radash": "^12.1.0",
    "react-colorful": "^5.6.1",
    "react-image-crop": "^10.1.8",
+    "react-inlinesvg": "^4.2.0",
    "react-leaflet": "^4.2.1",
    "react-leaflet-cluster": "^2.1.0",
    "react-markdown": "^9.0.1",
@ -106,7 +107,6 @@
    "react-router-dom": "^6.16.0",
    "react-toastify": "^9.1.3",
    "remark-breaks": "^4.0.0",
-    "tw-elements": "^1.0.0",
    "yet-another-react-lightbox": "^3.21.7"
  },
  "imports": {
--- a/rollup.config.js
+++ b/rollup.config.js
@ -76,6 +76,7 @@ export default [
      'leaflet.locatecontrol/dist/L.Control.Locate.css',
      'yet-another-react-lightbox',
      'react-photo-album',
+      'react-inlinesvg',
    ],
  },
  {
--- a/src/Components/AppShell/AppShell.tsx
+++ b/src/Components/AppShell/AppShell.tsx
@ -13,17 +13,19 @@ export function AppShell({
  appName,
  children,
  assetsApi,
+  embedded,
 }: {
  appName: string
  children: React.ReactNode
  assetsApi: AssetsApi
+  embedded?: boolean
 }) {
  return (
    <ContextWrapper>
      <div className='tw-flex tw-flex-col tw-h-full'>
-        <SetAppState assetsApi={assetsApi} />
+        <SetAppState assetsApi={assetsApi} embedded={embedded} />
        <NavBar appName={appName}></NavBar>
-        <div id='app-content' className='tw-flex-grow'>
+        <div id='app-content' className='tw-flex'>
          {children}
        </div>
      </div>
--- a/src/Components/AppShell/Content.tsx
+++ b/src/Components/AppShell/Content.tsx
@ -1,3 +1,5 @@
+import { useAppState } from './hooks/useAppState'
+
 interface ContentProps {
  children?: React.ReactNode
 }
@ -6,8 +8,12 @@ interface ContentProps {
 * @category AppShell
 */
 export function Content({ children }: ContentProps) {
+  const appState = useAppState()
+
  return (
-    <div className='tw-flex tw-flex-col tw-w-full tw-h-full tw-bg-base-200 tw-relative'>
+    <div
+      className={`${appState.sideBarOpen && !appState.sideBarSlim ? 'tw-ml-48' : appState.sideBarOpen && appState.sideBarSlim ? 'tw-ml-14' : ''} tw-w-full tw-h-full tw-bg-base-100 tw-relative tw-transition-all tw-duration-300`}
+    >
      {children}
    </div>
  )
--- a/src/Components/AppShell/ContextWrapper.tsx
+++ b/src/Components/AppShell/ContextWrapper.tsx
@ -1,6 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useContext, createContext } from 'react'
-import { BrowserRouter as Router, useLocation } from 'react-router-dom'
+import { BrowserRouter as Router, useInRouterContext } from 'react-router-dom'
 import { ToastContainer } from 'react-toastify'

 import { QuestsProvider } from '#components/Gaming/hooks/useQuests'
@ -15,49 +15,40 @@ import { TagsProvider } from '#components/Map/hooks/useTags'

 import { AppStateProvider } from './hooks/useAppState'

+import type { CloseButtonProps } from 'react-toastify'
+
 // Helper context to determine if the ContextWrapper is already present.
 const ContextCheckContext = createContext(false)

+const CloseButton = ({ closeToast }: CloseButtonProps) => (
+  <button
+    className='tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw-absolute tw-right-2 tw-top-2 focus:tw-outline-none'
+    onClick={closeToast}
+  >
+    ✕
+  </button>
+)
+
 export const ContextWrapper = ({ children }: { children: React.ReactNode }) => {
  const isWrapped = useContext(ContextCheckContext)

-  // Check if we are already inside a Router
-  let location
-  try {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    location = useLocation()
-    // eslint-disable-next-line no-catch-all/no-catch-all
-  } catch (e) {
-    location = null
-  }
+  const isInsideRouter = useInRouterContext()

-  // Case 1: Only the Router is missing, but ContextWrapper is already provided
-  if (!location && isWrapped) {
-    return <Router>{children}</Router>
-  }
+  let returnValue = children

-  // Case 2: Neither Router nor ContextWrapper is present
-  if (!location && !isWrapped) {
-    return (
-      <Router>
-        <ContextCheckContext.Provider value={true}>
-          <Wrappers>{children}</Wrappers>
-        </ContextCheckContext.Provider>
-      </Router>
-    )
-  }
-
-  // Case 3: Only ContextWrapper is missing
-  if (location && !isWrapped) {
-    return (
+  if (!isWrapped) {
+    returnValue = (
      <ContextCheckContext.Provider value={true}>
-        <Wrappers>{children}</Wrappers>
+        <Wrappers>{returnValue}</Wrappers>
      </ContextCheckContext.Provider>
    )
  }

-  // Case 4: Both Router and ContextWrapper are already present
-  return children
+  if (!isInsideRouter) {
+    returnValue = <Router>{returnValue}</Router>
+  }
+
+  return returnValue
 }

 // eslint-disable-next-line react/prop-types
@ -87,6 +78,7 @@ export const Wrappers = ({ children }) => {
                            draggable
                            pauseOnHover
                            theme='light'
+                            closeButton={CloseButton}
                          />
                          {children}
                        </QuestsProvider>
--- a/src/Components/AppShell/NavBar.tsx
+++ b/src/Components/AppShell/NavBar.tsx
@ -2,12 +2,14 @@ import Bars3Icon from '@heroicons/react/16/solid/Bars3Icon'
 import EllipsisVerticalIcon from '@heroicons/react/16/solid/EllipsisVerticalIcon'
 import QuestionMarkIcon from '@heroicons/react/24/outline/QuestionMarkCircleIcon'
 import { useEffect, useRef, useState } from 'react'
-import { Link, useLocation } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import { toast } from 'react-toastify'

 import { useAuth } from '#components/Auth/useAuth'
 import { useItems } from '#components/Map/hooks/useItems'

+import { useAppState, useSetAppState } from './hooks/useAppState'
+
 import type { Item } from '#types/Item'

 export default function NavBar({ appName }: { appName: string }) {
@ -16,6 +18,13 @@ export default function NavBar({ appName }: { appName: string }) {
  const [userProfile, setUserProfile] = useState<Item>({} as Item)
  const items = useItems()

+  const appState = useAppState()
+  const setAppState = useSetAppState()
+
+  const toggleSidebar = () => {
+    setAppState({ sideBarOpen: !appState.sideBarOpen })
+  }
+
  useEffect(() => {
    const profile =
      user && items.find((i) => i.user_created?.id === user.id && i.layer?.userProfileLayer)
@ -24,22 +33,12 @@ export default function NavBar({ appName }: { appName: string }) {
      : setUserProfile({ id: crypto.randomUUID(), name: user?.first_name ?? '', text: '' })
  }, [user, items])

-  // useEffect(() => {}, [userProfile])
-
  const nameRef = useRef<HTMLHeadingElement>(null)
  const [nameWidth, setNameWidth] = useState<number>(0)
-  const location = useLocation()
-  const [showNav, setShowNav] = useState<boolean>(false)

  useEffect(() => {
-    showNav && nameRef.current && setNameWidth(nameRef.current.scrollWidth)
-  }, [nameRef, appName, showNav])
-
-  useEffect(() => {
-    const params = new URLSearchParams(location.search)
-    const embedded = params.get('embedded')
-    embedded !== 'true' && setShowNav(true)
-  }, [location])
+    !appState.embedded && nameRef.current && setNameWidth(nameRef.current.scrollWidth)
+  }, [nameRef, appName, appState.embedded])

  const onLogout = async () => {
    await toast.promise(logout(), {
@ -59,16 +58,15 @@ export default function NavBar({ appName }: { appName: string }) {
    })
  }

-  if (showNav) {
+  if (!appState.embedded) {
    return (
      <>
        <div className='tw-navbar tw-bg-base-100 tw-z-[9998] tw-shadow-xl tw-relative'>
          <button
            className='tw-btn tw-btn-square tw-btn-ghost'
-            data-te-sidenav-toggle-ref
-            data-te-target='#sidenav'
            aria-controls='#sidenav'
            aria-haspopup='true'
+            onClick={() => toggleSidebar()}
          >
            <Bars3Icon className='tw-inline-block tw-w-5 tw-h-5' />
          </button>
@ -103,7 +101,7 @@ export default function NavBar({ appName }: { appName: string }) {
                {userProfile.image && (
                  <div className='tw-avatar'>
                    <div className='tw-w-10 tw-rounded-full'>
-                      <img src={'https://api.utopia-lab.org/assets/' + userProfile.image} />
+                      <img src={appState.assetsApi.url + userProfile.image} />
                    </div>
                  </div>
                )}
--- a/src/Components/AppShell/SetAppState.tsx
+++ b/src/Components/AppShell/SetAppState.tsx
@ -4,13 +4,22 @@ import { useSetAppState } from './hooks/useAppState'

 import type { AssetsApi } from '#types/AssetsApi'

-export const SetAppState = ({ assetsApi }: { assetsApi: AssetsApi }) => {
+export const SetAppState = ({
+  assetsApi,
+  embedded,
+}: {
+  assetsApi: AssetsApi
+  embedded?: boolean
+}) => {
  const setAppState = useSetAppState()

  useEffect(() => {
    setAppState({ assetsApi })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [assetsApi])
+  }, [assetsApi, setAppState])
+
+  useEffect(() => {
+    setAppState({ embedded })
+  }, [embedded, setAppState])

  return <></>
 }
--- a/src/Components/AppShell/SideBar.tsx
+++ b/src/Components/AppShell/SideBar.tsx
@ -1,8 +1,7 @@
 import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon'
-import { useRef, useState, useEffect } from 'react'
 import { NavLink, useLocation } from 'react-router-dom'
-import { Sidenav, initTE } from 'tw-elements'

+import { useAppState, useSetAppState } from './hooks/useAppState'
 import SidebarSubmenu from './SidebarSubmenu'

 export interface Route {
@ -13,65 +12,36 @@ export interface Route {
  blank?: boolean
 }

-interface SidenavType extends HTMLElement {
-  toggleSlim(): void
-  toggle(): void
-}
-
 /**
 * @category AppShell
 */
 export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoutes?: Route[] }) {
-  // prevent react18 from calling useEffect twice
-  const init = useRef(false)
-
  const location = useLocation()

-  const [instance, setInstance] = useState<SidenavType>()
-  const [slim, setSlim] = useState<boolean>(false)
+  const params = new URLSearchParams(window.location.search)

-  const toggleSlim = () => {
-    setSlim(!slim)
-    instance?.toggleSlim()
+  const appState = useAppState()
+  const setAppState = useSetAppState()
+
+  const toggleSidebarOpen = () => {
+    setAppState({ sideBarOpen: !appState.sideBarOpen })
  }

-  useEffect(() => {
-    if (!init.current) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
-      initTE({ Sidenav })
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-      const instance = Sidenav.getInstance(document.getElementById('sidenav')) as SidenavType
-      setInstance(instance)
-      instance.toggleSlim()
-      init.current = true
-    }
-  }, [])
-
-  const [embedded, setEmbedded] = useState<boolean>(true)
-
-  useEffect(() => {
-    const params = new URLSearchParams(location.search)
-    const embedded = params.get('embedded')
-    embedded !== 'true' && setEmbedded(false)
-  }, [location])
-
-  const params = new URLSearchParams(window.location.search)
+  const toggleSidebarSlim = () => {
+    setAppState({ sideBarSlim: !appState.sideBarSlim })
+  }

  return (
    <nav
      id='sidenav'
-      className={`group tw-fixed tw-left-0 ${embedded ? 'tw-mt-0 tw-h-[100dvh]' : 'tw-mt-16 tw-h-[calc(100dvh-64px)]'} tw-top-0 tw-z-[10035]  tw--translate-x-full tw-overflow-hidden tw-shadow-xl data-[te-sidenav-slim='true']:tw-hidden data-[te-sidenav-slim-collapsed='true']:tw-w-[56px] data-[te-sidenav-slim='true']:tw-w-[56px] data-[te-sidenav-hidden='false']:tw-translate-x-0 dark:tw-bg-zinc-800 [&[data-te-sidenav-slim-collapsed='true'][data-te-sidenav-slim='false']]:tw-hidden [&[data-te-sidenav-slim-collapsed='true'][data-te-sidenav-slim='true']]:[display:unset]`}
-      data-te-sidenav-init
-      data-te-sidenav-hidden='true'
-      data-te-sidenav-mode='side'
-      data-te-sidenav-slim='true'
-      data-te-sidenav-content='#app-content'
-      data-te-sidenav-slim-collapsed='true'
-      data-te-sidenav-slim-width='56'
-      data-te-sidenav-width='180'
+      className={`${appState.sideBarOpen ? 'tw-translate-x-0' : '-tw-translate-x-full'}
+          ${appState.sideBarSlim ? 'tw-w-14' : 'tw-w-48'}
+          ${appState.embedded ? 'tw-mt-0 tw-h-[100dvh]' : 'tw-mt-16 tw-h-[calc(100dvh-64px)]'}
+          tw-fixed tw-left-0 tw-transition-all tw-duration-300 tw-top-0 tw-z-[10035] 
+          tw-overflow-hidden tw-shadow-xl dark:tw-bg-zinc-800`}
    >
      <div
-        className={`tw-flex tw-flex-col  ${embedded ? 'tw-h-full' : 'tw-h-[calc(100dvh-64px)]'}`}
+        className={`tw-flex tw-flex-col  ${appState.embedded ? 'tw-h-full' : 'tw-h-[calc(100dvh-64px)]'}`}
      >
        <ul
          className='tw-menu tw-w-full tw-bg-base-100 tw-text-base-content tw-p-0'
@ -92,12 +62,12 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
                      `${isActive ? 'tw-font-semibold  tw-bg-base-200 !tw-rounded-none' : 'tw-font-normal !tw-rounded-none'}`
                    }
                    onClick={() => {
-                      if (screen.width < 640 && !slim) instance?.toggle()
+                      if (screen.width < 640 && !appState.sideBarSlim) toggleSidebarOpen()
                    }}
                  >
                    {route.icon}
                    <span
-                      className="group-[&[data-te-sidenav-slim-collapsed='true']]:data-[te-sidenav-slim='false']:tw-hidden"
+                      className={`${appState.sideBarSlim ? 'tw-hidden' : ''}`}
                      data-te-sidenav-slim='false'
                    >
                      {route.name}
@ -140,12 +110,12 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
                          `${isActive ? 'tw-font-semibold  tw-bg-base-200 !tw-rounded-none' : 'tw-font-normal !tw-rounded-none'}`
                        }
                        onClick={() => {
-                          if (screen.width < 640 && !slim) instance?.toggle()
+                          if (screen.width < 640 && !appState.sideBarSlim) toggleSidebarOpen()
                        }}
                      >
                        {route.icon}
                        <span
-                          className="group-[&[data-te-sidenav-slim-collapsed='true']]:data-[te-sidenav-slim='false']:tw-hidden"
+                          className={`${appState.sideBarSlim ? 'tw-hidden' : ''}`}
                          data-te-sidenav-slim='false'
                        >
                          {route.name}
@ -167,9 +137,9 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
            <ChevronRightIcon
              className={
                'tw-w-5 tw-h-5 tw-mb-4 tw-mr-4  tw-cursor-pointer tw-float-right tw-delay-400 tw-duration-500 tw-transition-all ' +
-                (!slim ? 'tw-rotate-180' : '')
+                (!appState.sideBarSlim ? 'tw-rotate-180' : '')
              }
-              onClick={() => toggleSlim()}
+              onClick={() => toggleSidebarSlim()}
            />
          </div>
        </div>
--- a/src/Components/AppShell/SidebarSubmenu.tsx
+++ b/src/Components/AppShell/SidebarSubmenu.tsx
@ -32,13 +32,7 @@ function SidebarSubmenu({
    <div className='flex-col'>
      {/** Route header */}
      <div className='w-full' onClick={() => setIsExpanded(!isExpanded)}>
-        {icon}{' '}
-        <span
-          className="group-[&[data-te-sidenav-slim-collapsed='true']]:data-[te-sidenav-slim='false']:hidden"
-          data-te-sidenav-slim='false'
-        >
-          {name}{' '}
-        </span>
+        {icon} <span>{name} </span>
        <ChevronDownIcon
          className={
            'w-5 h-5 mt-1 float-right delay-400 duration-500 transition-all  ' +
@ -48,7 +42,7 @@ function SidebarSubmenu({
      </div>

      {/** Submenu list */}
-      <div className={' w-full data-[te-collapse-show]:!hidden ' + (isExpanded ? '' : 'hidden')}>
+      <div className={' w-full' + (isExpanded ? '' : 'hidden')}>
        <ul className={'menu menu-compact'}>
          {submenu?.map((m, k) => {
            return (
--- a/src/Components/AppShell/hooks/useAppState.tsx
+++ b/src/Components/AppShell/hooks/useAppState.tsx
@ -6,14 +6,18 @@ import type { AssetsApi } from '#types/AssetsApi'

 interface AppState {
  assetsApi: AssetsApi
-  userType: string
+  sideBarOpen: boolean
+  sideBarSlim: boolean
+  embedded: boolean
 }

 type UseAppManagerResult = ReturnType<typeof useAppManager>

 const initialAppState: AppState = {
  assetsApi: {} as AssetsApi,
-  userType: '',
+  sideBarOpen: false,
+  sideBarSlim: false,
+  embedded: false,
 }

 const AppContext = createContext<UseAppManagerResult>({
--- a/src/Components/AppShell/hooks/useAssets.tsx
+++ b/src/Components/AppShell/hooks/useAssets.tsx
@ -1,42 +0,0 @@
-/* eslint-disable react/prop-types */
-
-/* eslint-disable @typescript-eslint/no-empty-function */
-import { useCallback, useState, createContext, useContext } from 'react'
-
-import type { AssetsApi } from '#types/AssetsApi'
-
-type UseAssetManagerResult = ReturnType<typeof useAssetsManager>
-
-const AssetContext = createContext<UseAssetManagerResult>({
-  api: {} as AssetsApi,
-  setAssetsApi: () => {},
-})
-
-function useAssetsManager(): {
-  api: AssetsApi
-  setAssetsApi: (api: AssetsApi) => void
-} {
-  const [api, setApi] = useState<AssetsApi>({} as AssetsApi)
-
-  const setAssetsApi = useCallback((api: AssetsApi) => {
-    setApi(api)
-  }, [])
-
-  return { api, setAssetsApi }
-}
-
-export const AssetsProvider: React.FunctionComponent<{
-  children?: React.ReactNode
-}> = ({ children }) => (
-  <AssetContext.Provider value={useAssetsManager()}>{children}</AssetContext.Provider>
-)
-
-export const useAssetApi = (): AssetsApi => {
-  const { api } = useContext(AssetContext)
-  return api
-}
-
-export const useSetAssetApi = (): UseAssetManagerResult['setAssetsApi'] => {
-  const { setAssetsApi } = useContext(AssetContext)
-  return setAssetsApi
-}
--- a/src/Components/AppShell/index.tsx
+++ b/src/Components/AppShell/index.tsx
@ -1,3 +1,4 @@
 export * from './AppShell'
 export { SideBar } from './SideBar'
 export { Content } from './Content'
+export { default as SVG } from 'react-inlinesvg'
--- a/src/Components/Input/ComboBoxInput.tsx
+++ b/src/Components/Input/ComboBoxInput.tsx
@ -16,9 +16,10 @@ const ComboBoxInput = ({ id, options, value, onValueChange }: ComboBoxProps) =>
      id={id}
      className='tw-form-select tw-block tw-w-full tw-py-2 tw-px-4 tw-border tw-border-gray-300 rounded-md tw-shadow-sm tw-text-sm focus:tw-outline-none focus:tw-ring-indigo-500 focus:tw-border-indigo-500 sm:tw-text-sm'
      onChange={handleChange}
+      defaultValue={value}
    >
      {options.map((o) => (
-        <option value={o} key={o} selected={o === value}>
+        <option value={o} key={o}>
          {o}
        </option>
      ))}
--- a/src/Components/Map/Subcomponents/AddButton.tsx
+++ b/src/Components/Map/Subcomponents/AddButton.tsx
@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
+import SVG from 'react-inlinesvg'
+
 import PlusSVG from '#assets/plus.svg'
 import { useLayers } from '#components/Map/hooks/useLayers'
 import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
@ -31,7 +33,7 @@ export default function AddButton({
      {canAddItems() ? (
        <div className='tw-dropdown tw-dropdown-top tw-dropdown-end tw-dropdown-hover tw-z-500 tw-absolute tw-right-4 tw-bottom-4'>
          <label tabIndex={0} className='tw-z-500 tw-btn tw-btn-circle tw-shadow tw-bg-base-100'>
-            <img src={PlusSVG} alt='Layers' className='tw-h-5 tw-w-5' />
+            <SVG src={PlusSVG} className='tw-h-5 tw-w-5' />
          </label>
          <ul tabIndex={0} className='tw-dropdown-content tw-pr-1 tw-list-none'>
            {layers.map(
--- a/src/Components/Map/Subcomponents/Controls/FilterControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/FilterControl.tsx
@ -12,8 +12,8 @@ export function FilterControl() {
  const [open, setOpen] = useState(false)

  const groupTypes = [
-    { text: 'Regional Gruppe', value: 'wuerdekompass' },
-    { text: 'Themen Gruppe', value: 'themenkompass' },
+    { text: 'Regional Gruppe', value: 'Regional-Gruppe' },
+    { text: 'Themen Gruppe', value: 'Themen-Gruppe' },
    { text: 'liebevoll.jetzt', value: 'liebevoll.jetzt' },
  ]

--- a/src/Components/Map/Subcomponents/Controls/LayerControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/LayerControl.tsx
@ -1,4 +1,5 @@
 import { useState } from 'react'
+import SVG from 'react-inlinesvg'

 import LayerSVG from '#assets/layer.svg'
 import { useIsLayerVisible, useToggleVisibleLayer } from '#components/Map/hooks/useFilter'
@ -56,7 +57,7 @@ export function LayerControl() {
            setOpen(true)
          }}
        >
-          <img src={LayerSVG} alt='Layers' />
+          <SVG src={LayerSVG} />
        </div>
      )}
    </div>
--- a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx
@ -6,13 +6,13 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 import { control } from 'leaflet'
 import { useEffect, useRef, useState } from 'react'
+import SVG from 'react-inlinesvg'
 import { useMap, useMapEvents } from 'react-leaflet'

 import TargetSVG from '#assets/target.svg'

 // eslint-disable-next-line import/no-unassigned-import
 import 'leaflet.locatecontrol'
-import 'leaflet.locatecontrol/dist/L.Control.Locate.css'

 // Converts leaflet.locatecontrol to a React Component
 export const LocateControl = () => {
@ -59,9 +59,8 @@ export const LocateControl = () => {
          {loading ? (
            <span className='tw-loading tw-loading-spinner tw-loading-md tw-mt-1'></span>
          ) : (
-            <img
+            <SVG
              src={TargetSVG}
-              alt='x'
              className='tw-mt-1 tw-p-[1px]'
              style={{ fill: `${active ? '#fc8702' : 'currentColor'}` }}
            />
--- a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
@ -14,10 +14,12 @@ import FlagIcon from '@heroicons/react/24/outline/FlagIcon'
 import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon'
 import axios from 'axios'
 import { LatLng, LatLngBounds, marker } from 'leaflet'
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
+import SVG from 'react-inlinesvg'
 import { useMap, useMapEvents } from 'react-leaflet'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'

+import { useAppState } from '#components/AppShell/hooks/useAppState'
 import { useDebounce } from '#components/Map/hooks/useDebounce'
 import { useAddFilterTag } from '#components/Map/hooks/useFilter'
 import { useItems } from '#components/Map/hooks/useItems'
@ -47,6 +49,7 @@ export const SearchControl = () => {
  const items = useItems()
  const leafletRefs = useLeafletRefs()
  const addFilterTag = useAddFilterTag()
+  const appState = useAppState()

  useMapEvents({
    popupopen: () => {
@ -96,21 +99,13 @@ export const SearchControl = () => {
  }

  const searchInput = useRef<HTMLInputElement>(null)
-  const [embedded, setEmbedded] = useState<boolean>(true)
-
-  const location = useLocation()
-  useEffect(() => {
-    const params = new URLSearchParams(location.search)
-    const embedded = params.get('embedded')
-    embedded !== 'true' && setEmbedded(false)
-  }, [location])

  return (
    <>
      {!(windowDimensions.height < 500 && popupOpen && hideSuggestions) && (
        <div className='tw-w-[calc(100vw-2rem)] tw-max-w-[22rem] '>
          <div className='tw-flex tw-flex-row'>
-            {embedded && <SidebarControl />}
+            {appState.embedded && <SidebarControl />}
            <div className='tw-relative'>
              <input
                type='text'
@ -169,7 +164,7 @@ export const SearchControl = () => {
              {itemsResults.slice(0, 5).map((item) => (
                <div
                  key={item.id}
-                  className='tw-cursor-pointer hover:tw-font-bold'
+                  className='tw-cursor-pointer hover:tw-font-bold tw-flex tw-flex-row'
                  onClick={() => {
                    const marker = Object.entries(leafletRefs).find((r) => r[1].item === item)?.[1]
                      .marker
@ -182,18 +177,25 @@ export const SearchControl = () => {
                    }
                  }}
                >
-                  <div className='tw-flex tw-flex-row'>
-                    <img
-                      src={item.layer?.menuIcon}
-                      className='tw-text-current tw-w-5 tw-mr-2 tw-mt-0'
+                  {item.layer?.menuIcon ? (
+                    <SVG
+                      src={item.layer.menuIcon}
+                      className='tw-text-current tw-mr-2 tw-mt-0 tw-w-5'
+                      preProcessor={(code: string): string => {
+                        code = code.replace(/fill=".*?"/g, 'fill="currentColor"')
+                        code = code.replace(/stroke=".*?"/g, 'stroke="currentColor"')
+                        return code
+                      }}
                    />
-                    <div>
-                      <div className='tw-text-sm tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-max-w-[17rem]'>
-                        {item.name}
-                      </div>
-                      <div className='tw-text-xs tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-max-w-[17rem]'>
-                        {item.text}
-                      </div>
+                  ) : (
+                    <div className='tw-w-5' />
+                  )}
+                  <div>
+                    <div className='tw-text-sm tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-max-w-[17rem]'>
+                      {item.name}
+                    </div>
+                    <div className='tw-text-xs tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-max-w-[17rem]'>
+                      {item.text}
                    </div>
                  </div>
                </div>
@ -236,7 +238,7 @@ export const SearchControl = () => {
                    hide()
                  }}
                >
-                  <MagnifyingGlassIcon className='tw-text-current tw-mr-2 tw-mt-0 tw-w-4' />
+                  <MagnifyingGlassIcon className='tw-text-current tw-mr-2 tw-mt-0 tw-w-5' />
                  <div>
                    <div className='tw-text-sm tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-max-w-[17rem]'>
                      {geo?.properties.name ? geo?.properties.name : value}
--- a/src/Components/Map/Subcomponents/ItemFormPopup.tsx
+++ b/src/Components/Map/Subcomponents/ItemFormPopup.tsx
@ -83,18 +83,13 @@ export function ItemFormPopup(props: ItemFormPopupProps) {
        toast.error(error.toString())
      }
      if (success) {
-        // eslint-disable-next-line no-console
-        console.log(props.item)
-
        updateItem({ ...props.item, ...formItem })
        toast.success('Item updated')
      }
      setSpinner(false)
      map.closePopup()
    } else {
-      const item = items.find(
-        (i) => i.user_created?.id === user?.id && i.layer?.id === props.layer.id,
-      )
+      const item = items.find((i) => i.user_created?.id === user?.id && i.layer === props.layer)

      const uuid = crypto.randomUUID()
      let success = false
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
@ -12,7 +12,8 @@
 import EllipsisVerticalIcon from '@heroicons/react/16/solid/EllipsisVerticalIcon'
 import PencilIcon from '@heroicons/react/24/solid/PencilIcon'
 import TrashIcon from '@heroicons/react/24/solid/TrashIcon'
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
+import SVG from 'react-inlinesvg'
 import { useNavigate } from 'react-router-dom'

 import TargetDotSVG from '#assets/targetDot.svg'
@ -56,10 +57,6 @@ export function HeaderView({

  const [imageLoaded, setImageLoaded] = useState(false)

-  useEffect(() => {
-    setImageLoaded(false)
-  }, [item])
-
  const avatar =
    item.image &&
    appState.assetsApi.url + item.image + `${big ? '?width=160&heigth=160' : '?width=80&heigth=80'}`
@ -163,7 +160,7 @@ export function HeaderView({
                          className='!tw-text-base-content tw-cursor-pointer'
                          onClick={setPositionCallback}
                        >
-                          <img src={TargetDotSVG} alt='Position' className='tw-w-5 tw-h-5' />
+                          <SVG src={TargetDotSVG} className='tw-w-5 tw-h-5' />
                        </a>
                      </li>
                    )}
--- a/src/Components/Map/UtopiaMap.css
+++ b/src/Components/Map/UtopiaMap.css
@ -1,188 +0,0 @@
-.leaflet-container {
-    text-align: left;
-    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-position: 50% 80%; 
-  }
-  
-  input {
-    box-sizing: border-box;
-  }
-  
-  textarea {
-    box-sizing: border-box;
-  }
-  
-  .leaflet-control-attribution {
-    display: none;
-   }
-  
-  .leaflet-control-locate {
-    display: none;
-  }
-
-  .leaflet-data-marker {
-  
-    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAQCAYAAACcN8ZaAAAB3klEQVR42s3U4UdDURzG8czMXJnJ1Vwzc6VJZjaZJdlMlpQsKdmUFNOUspRSSqUolfQfr+fF98Vx5mwv9qbDx7LdznnO7/7Omej3+/+Ga0QMUYkhbvBgmhzCQxwxibIGrGEF8CQhU+LLtKQkQNqScUgjxRxTBIxbgfgD/BgnhM8kM5KTeclLQYqGkkMRBckzR8ic/mAgd5BAZplsUaqyIg2sDtHg2brUZJk5SmwopErJUWE8SpmTMhNvya60Zd/SNrR4bkeaskG4uiwRZk6yrJEYFibGAxn+scECHTmTnuVCzvmty3PHciB7bGKN6lQkzysPqIrHmpFhYbKUtckC1/Ioz4ZHuZdbuSLYiRxRpSZVWXZVxAzC0R4Ik5SQsu6w8yd5l2/5kg95I9SdXMoZQfYIUjeqEUrgOkXGPeN4TYRhxy8E+ZUf+eS7B7miIoeybVSjKDnm8u3+gH3pDTYwu1igATvs/pXqvBKiR4i2bNJfi1ZfUAnjgrOG8wY2quNzBKuU/ZS+uSFEl5O0xRGuUIlZCcw7xG5QPkeHYUSNV5WXGou2sC3rBC0LjenqCXGO0WEiTJa0Lr4KixdHBrDGuGGiRqCUpFk8pGIpQtCU7p4YPwxYxEMCk1aAMQZh8Ac8PfbIzYPJOwAAAABJRU5ErkJggg==') no-repeat;
-    background-position: 6px 32px;
-  }
-  
-  .crosshair-cursor-enabled {
-    cursor: crosshair;
-  }
-  
-  .leaflet-container {
-    cursor: inherit;
-  }
-  
-  .calendar-icon {
-    position: relative;
-    top: -35px;
-    left: 10px;
-    width: 13px;
-  }
-  
-  .user-icon {
-    position: relative;
-    top: -36px;
-    left: 10px;
-    width: 13px;
-  }
-
-  .circle-icon {
-    position: relative;
-    top: -33px;
-    left: 10px;
-    width: 13px;
-  }
-
-  .fire-icon {
-    position: relative;
-    top: -36px;
-    left: 10px;
-    width: 13px;
-  }
-
-  .tree-icon {
-    position: relative;
-    top: -38px;
-    left: 4px;
-    width: 24px;
-  }
-
-  .music-icon {
-    position: relative;
-    top: -35px;
-    left: 4px;
-    width: 24px;
-  }
-
-  .quest-icon {
-    position: relative;
-    top: -34px;
-    left: 4px;
-    width: 24px;
-  }
-
-  .drum-icon {
-    position: relative;
-    top: -38px;
-    left: 4px;
-    width: 24px;
-  }
-
-  
-  .compass-icon {
-    position: relative;
-    top: -36.5px;
-    left: 4px;
-    width: 24px;
-  }
-
-  .group-icon {
-    position: relative;
-    top: -37px;
-    left: 4px;
-    width: 24px;
-  }
-
-  .liebevoll-jetzt-icon{
-    position: relative;
-    top: -35px;
-    left: 4px;
-    width: 24px;
-  }
-
-  .staff-snake-icon {
-    position: relative;
-    top: -35px;
-    left: 4px;
-    width: 24px;
-  }
-
-  .flower-icon {
-    position: relative;
-    top: -35px;
-    left: 4px;
-    width: 24px;
-  }
-  
-  .network-icon {
-    position: relative;
-    top: -35px;
-    left: 4px;
-    width: 24px;
-  }
-
-  .shop-icon {
-    position: relative;
-    top: -34px;
-    left: 4px;
-    width: 24px;
-  }
-
-  .plant-icon {
-    position: relative;
-    top: -34px;
-    left: 4px;
-    width: 24px;
-  }
-
-  .circle-dot-icon {
-    position: relative;
-    top: -36px;
-    left: 4px;
-    width: 24px;
-  }
-  
-  .leaflet-popup-scrolled {
-    overflow-x: hidden;
-  }
-
-  .leaflet-popup-content-wrapper, .leaflet-popup-tip{
-    background-color: theme('colors.base-100');
-    color: theme('colors.base-content');
-
-  }
-
-  .leaflet-tooltip {
-    background-color: theme('colors.base-100');
-    color: theme('colors.base-content');
-    border-width: 0px;
-  }
-
-  .leaflet-tooltip {
-    border-radius: 1em;
-    transition: opacity 500ms;
-    transition-delay: 50ms;
-
-  }
-
-  .leaflet-tooltip-top::before {
-    border-top-color: theme('colors.base-100');
-  }
-
-  .marker-cluster span {
-    color: #000;
-  }
--- a/src/Components/Map/UtopiaMap.tsx
+++ b/src/Components/Map/UtopiaMap.tsx
@ -5,7 +5,6 @@ import { ContextWrapper } from '#components/AppShell/ContextWrapper'

 import { UtopiaMapInner } from './UtopiaMapInner'

-import 'react-toastify/dist/ReactToastify.css'
 import type { GeoJsonObject } from 'geojson'

 /**
--- a/src/Components/Map/UtopiaMapInner.tsx
+++ b/src/Components/Map/UtopiaMapInner.tsx
@ -8,11 +8,9 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { Children, cloneElement, isValidElement, useEffect, useRef, useState } from 'react'
 import { TileLayer, useMapEvents, GeoJSON, useMap } from 'react-leaflet'
-import 'leaflet/dist/leaflet.css'
 import MarkerClusterGroup from 'react-leaflet-cluster'
 import { Outlet, useLocation } from 'react-router-dom'
 import { toast } from 'react-toastify'
-import './UtopiaMap.css'

 import { containsUUID } from '#utils/ContainsUUID'

@ -83,10 +81,12 @@ export function UtopiaMapInner({
              <div>
                <TextView
                  itemId=''
-                  rawText={'Support us building free opensource maps and help us grow 🌱☀️'}
+                  rawText={
+                    'Support us building free opensource maps for communities and help us grow 🌱☀️'
+                  }
                />
                <a href='https://opencollective.com/utopia-project'>
-                  <div className='tw-btn tw-btn-sm tw-float-right'>Donate</div>
+                  <div className='tw-btn  tw-btn-sm tw-float-right tw-btn-primary'>Donate</div>
                </a>
              </div>
            </>,
@ -187,9 +187,7 @@ export function UtopiaMapInner({
  }

  return (
-    <div
-      className={`tw-h-full ${selectNewItemPosition != null ? 'crosshair-cursor-enabled' : undefined}`}
-    >
+    <div className={`tw-h-full ${selectNewItemPosition != null ? 'crosshair-cursor-enabled' : ''}`}>
      <Outlet />
      <Control position='topLeft' zIndex='1000' absolute>
        <SearchControl />
--- a/src/Components/Map/setItemLocation.tsx
+++ b/src/Components/Map/setItemLocation.tsx
@ -1,10 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
-import { useMap } from 'react-leaflet'
-
-export const setItemLocation = () => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const map = useMap()
-
-  return <div></div>
-}
--- a/src/Components/Profile/ProfileForm.tsx
+++ b/src/Components/Profile/ProfileForm.tsx
@ -5,7 +5,6 @@ import { useEffect, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'

-import { useAppState } from '#components/AppShell/hooks/useAppState'
 import { useAuth } from '#components/Auth/useAuth'
 import { useItems, useUpdateItem, useAddItem } from '#components/Map/hooks/useItems'
 import { useLayers } from '#components/Map/hooks/useLayers'
@ -62,7 +61,6 @@ export function ProfileForm() {
  const hasUserPermission = useHasUserPermission()
  const getItemTags = useGetItemTags()
  const items = useItems()
-  const appState = useAppState()

  const [urlParams, setUrlParams] = useState(new URLSearchParams(location.search))

@ -146,8 +144,12 @@ export function ProfileForm() {
  const [template, setTemplate] = useState<string>('')

  useEffect(() => {
-    setTemplate(item.layer?.itemType.template ?? appState.userType)
-  }, [appState.userType, item])
+    if (item.layer?.itemType.template) setTemplate(item.layer?.itemType.template)
+    else {
+      const userLayer = layers.find((l) => l.userProfileLayer === true)
+      if (userLayer) setTemplate(userLayer.itemType.template)
+    }
+  }, [item, layers])

  return (
    <>
--- a/src/Components/Profile/ProfileView.tsx
+++ b/src/Components/Profile/ProfileView.tsx
@ -12,9 +12,9 @@ import { useEffect, useState } from 'react'
 import { useMap } from 'react-leaflet'
 import { useLocation, useNavigate } from 'react-router-dom'

-import { useAppState } from '#components/AppShell/hooks/useAppState'
 import { useClusterRef } from '#components/Map/hooks/useClusterRef'
 import { useItems, useRemoveItem, useUpdateItem } from '#components/Map/hooks/useItems'
+import { useLayers } from '#components/Map/hooks/useLayers'
 import { useLeafletRefs } from '#components/Map/hooks/useLeafletRefs'
 import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
 import { useSelectPosition, useSetSelectPosition } from '#components/Map/hooks/useSelectPosition'
@ -57,7 +57,7 @@ export function ProfileView({ attestationApi }: { attestationApi?: ItemsApi<any>
  const setSelectPosition = useSetSelectPosition()
  const clusterRef = useClusterRef()
  const leafletRefs = useLeafletRefs()
-  const appState = useAppState()
+  const layers = useLayers()

  const [attestations, setAttestations] = useState<any[]>([])

@ -162,8 +162,12 @@ export function ProfileView({ attestationApi }: { attestationApi?: ItemsApi<any>
  }, [selectPosition])

  useEffect(() => {
-    setTemplate(item?.layer?.itemType.template ?? appState.userType)
-  }, [appState.userType, item])
+    if (item?.layer?.itemType.template) setTemplate(item.layer.itemType.template)
+    else {
+      const userLayer = layers.find((l) => l.userProfileLayer === true)
+      if (userLayer) setTemplate(userLayer.itemType.template)
+    }
+  }, [item, layers])

  return (
    <>
--- a/src/Components/Profile/Subcomponents/AvatarWidget.tsx
+++ b/src/Components/Profile/Subcomponents/AvatarWidget.tsx
@ -8,7 +8,6 @@ import { ReactCrop, centerCrop, makeAspectCrop } from 'react-image-crop'

 import UserSVG from '#assets/user.svg'
 import { useAppState } from '#components/AppShell/hooks/useAppState'
-import 'react-image-crop/dist/ReactCrop.css'
 import DialogModal from '#components/Templates/DialogModal'

 import type { Crop } from 'react-image-crop'
--- a/src/Components/Profile/Subcomponents/ColorPicker.tsx
+++ b/src/Components/Profile/Subcomponents/ColorPicker.tsx
@ -5,7 +5,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { HexColorPicker } from 'react-colorful'

-import './ColorPicker.css'
 import useClickOutside from '#components/Profile/hooks/useClickOutside'

 // eslint-disable-next-line react/prop-types
--- a/src/Components/Profile/Subcomponents/GalleryView.tsx
+++ b/src/Components/Profile/Subcomponents/GalleryView.tsx
@ -1,8 +1,6 @@
 import { useState } from 'react'
 import { RowsPhotoAlbum } from 'react-photo-album'
 import ReactLightbox from 'yet-another-react-lightbox'
-import 'yet-another-react-lightbox/styles.css'
-import 'react-photo-album/rows.css'

 import { useAppState } from '#components/AppShell/hooks/useAppState'

--- a/src/Components/Profile/Templates/TabsView.tsx
+++ b/src/Components/Profile/Templates/TabsView.tsx
@ -51,9 +51,7 @@ export const TabsView = ({
  const items = useItems()
  const appState = useAppState()
  const getUserProfile = (id: string) => {
-    return items.find(
-      (i) => i.user_created?.id === id && i.layer?.itemType.name === appState.userType,
-    )
+    return items.find((i) => i.user_created?.id === id && i.layer?.userProfileLayer)
  }

  useEffect(() => {
@ -152,29 +150,41 @@ export const TabsView = ({
                        </div>
                      </td>
                      <td>
-                        <Link to={'/item/' + getUserProfile(a.user_created.id)?.id}>
-                          <div className='flex items-center gap-3'>
-                            <div className='tw-avatar'>
-                              <div className='tw-mask tw-rounded-full h-8 w-8 tw-mr-2'>
-                                <img
-                                  src={
-                                    appState.assetsApi.url +
-                                    getUserProfile(a.user_created.id)?.image
-                                  }
-                                  alt='Avatar'
-                                />
+                        {getUserProfile(a.user_created.id) ? (
+                          <Link to={'/item/' + getUserProfile(a.user_created.id)?.id}>
+                            <div className='flex items-center gap-3'>
+                              <div className='tw-avatar'>
+                                <div className='tw-mask tw-rounded-full tw-h-8 tw-w-8 tw-mr-2'>
+                                  {getUserProfile(a.user_created.id)?.image && (
+                                    <img
+                                      src={
+                                        appState.assetsApi.url +
+                                        getUserProfile(a.user_created.id)?.image
+                                      }
+                                      alt='Avatar'
+                                    />
+                                  )}
+                                </div>
+                              </div>
+                              <div>
+                                <div className='font-bold'>
+                                  {getUserProfile(a.user_created.id)?.name ??
+                                    a.user_created.first_name}{' '}
+                                </div>
+                                <div className='tw-text-xs opacity-50 tw-text-zinc-500'>
+                                  {timeAgo(a.date_created)}
+                                </div>
                              </div>
                            </div>
-                            <div>
-                              <div className='font-bold'>
-                                {getUserProfile(a.user_created.id)?.name}
-                              </div>
-                              <div className='tw-text-xs opacity-50 tw-text-zinc-500'>
-                                {timeAgo(a.date_created)}
-                              </div>
+                          </Link>
+                        ) : (
+                          <div>
+                            <div className='font-bold'>{a.user_created.first_name} </div>
+                            <div className='tw-text-xs opacity-50 tw-text-zinc-500'>
+                              {timeAgo(a.date_created)}
                            </div>
                          </div>
-                        </Link>
+                        )}
                      </td>
                    </tr>
                  ))}
--- a/src/Components/Templates/DateUserInfo.tsx
+++ b/src/Components/Templates/DateUserInfo.tsx
@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
-/* eslint-disable @typescript-eslint/prefer-optional-chain */
 import { useState } from 'react'

 import { timeAgo } from '#utils/TimeAgo'
@ -18,7 +15,8 @@ export const DateUserInfo = ({ item }: { item: Item }) => {
        <p
          className={'tw-italic tw-min-h-[21px] !tw-my-0 tw-text-gray-500'}
          onClick={() => setInfoExpanded(false)}
-        >{`${item.date_updated && item.date_updated !== item.date_created ? 'updated' : 'posted'} ${item && item.user_created && item.user_created.first_name ? `by ${item.user_created.first_name}` : ''} ${item.date_updated ? timeAgo(item.date_updated) : timeAgo(item.date_created!)}`}</p>
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        >{`${item.date_updated && item.date_updated !== item.date_created ? 'updated' : 'posted'} ${item.user_created?.first_name ? `by ${item.user_created.first_name}` : ''} ${item.date_updated ? timeAgo(item.date_updated) : timeAgo(item.date_created!)}`}</p>
      ) : (
        <p
          className='!tw-my-0 tw-min-h-[21px] tw-font-bold tw-cursor-pointer tw-text-gray-500'
--- a/src/Components/Templates/EmojiPicker.tsx
+++ b/src/Components/Templates/EmojiPicker.tsx
@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
 import { useState } from 'react'

 interface Props {
@ -110,7 +109,7 @@ export const EmojiPicker = ({
              <button
                key={emoji}
                onClick={() => selectEmoji(emoji)}
-                className={`tw-cursor-pointer  tw-text-2xl tw-p-2 hover:tw-bg-base-200 tw-rounded-md ${emoji === selectedEmoji && 'tw-bg-base-300'}`}
+                className={`tw-cursor-pointer  tw-text-2xl tw-p-2 hover:tw-bg-base-200 tw-rounded-md ${emoji === selectedEmoji ? 'tw-bg-base-300' : ''}`}
              >
                {emoji}
              </button>
@ -121,7 +120,7 @@ export const EmojiPicker = ({
            {shapes.map((shape) => (
              <div
                key={shape}
-                className={`tw-cursor-pointer hover:tw-bg-base-200 tw-rounded-md tw-p-2 ${shape === selectedShape && 'tw-bg-base-300'}`}
+                className={`tw-cursor-pointer hover:tw-bg-base-200 tw-rounded-md tw-p-2 ${shape === selectedShape ? 'tw-bg-base-300' : ''}`}
                onClick={() => selectShape(shape)}
              >
                <div className={`tw-h-12 tw-mask tw-mask-${shape} tw-bg-neutral-content`}></div>
@ -133,7 +132,7 @@ export const EmojiPicker = ({
            {colors.map((color) => (
              <div
                key={color}
-                className={`tw-cursor-pointer hover:tw-bg-base-200 tw-rounded-md tw-p-2 tw-flex tw-justify-center tw-items-center  ${color === selectedColor && 'tw-bg-base-300'}`}
+                className={`tw-cursor-pointer hover:tw-bg-base-200 tw-rounded-md tw-p-2 tw-flex tw-justify-center tw-items-center  ${color === selectedColor ? 'tw-bg-base-300' : ''}`}
                onClick={() => selectColor(color)}
              >
                <div className={`tw-h-8 tw-w-8 tw-rounded-full tw-bg-[${color}]`}></div>
--- a/src/Components/Templates/ItemCard.tsx
+++ b/src/Components/Templates/ItemCard.tsx
@ -1,8 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useNavigate } from 'react-router-dom'

 import { StartEndView, TextView } from '#components/Map'
@ -22,7 +17,7 @@ export const ItemCard = ({
  i: Item
  loading: boolean
  url: string
-  deleteCallback: any
+  deleteCallback: (item: Item) => void
 }) => {
  const navigate = useNavigate()
  const windowDimensions = useWindowDimensions()
@ -34,8 +29,8 @@ export const ItemCard = ({
        // We could have an onClick callback instead
        const params = new URLSearchParams(window.location.search)
        if (windowDimensions.width < 786 && i.position)
-          navigate('/' + i.id + `${params ? `?${params}` : ''}`)
-        else navigate(url + i.id + `${params ? `?${params}` : ''}`)
+          navigate('/' + i.id + `${params.size > 0 ? `?${params.toString()}` : ''}`)
+        else navigate(url + i.id + `${params.size > 0 ? `?${params.toString()}` : ''}`)
      }}
    >
      <HeaderView
--- a/src/Components/Templates/MapOverlayPage.tsx
+++ b/src/Components/Templates/MapOverlayPage.tsx
@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
 import { DomEvent } from 'leaflet'
 import { createRef, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
@ -39,14 +38,14 @@ export function MapOverlayPage({
  }, [overlayRef, backdropRef])

  return (
-    <div className={`tw-absolute tw-h-full tw-w-full tw-m-auto ${backdrop && 'tw-z-[2000]'}`}>
+    <div className={`tw-absolute tw-h-full tw-w-full tw-m-auto ${backdrop ? 'tw-z-[2000]' : ''}`}>
      <div
        ref={backdropRef}
-        className={`${backdrop && 'tw-backdrop-brightness-75'} tw-h-full tw-w-full tw-grid tw-place-items-center tw-m-auto`}
+        className={`${backdrop ? 'tw-backdrop-brightness-75' : ''} tw-h-full tw-w-full tw-grid tw-place-items-center tw-m-auto`}
      >
        <div
          ref={overlayRef}
-          className={`${card && 'tw-card tw-card-body'} tw-shadow-xl tw-bg-base-100 tw-p-6 ${className && className} ${!backdrop && 'tw-z-[2000]'} tw-absolute tw-top-0 tw-bottom-0 tw-right-0 tw-left-0 tw-m-auto`}
+          className={`${card ? 'tw-card tw-card-body' : ''} tw-shadow-xl tw-bg-base-100 tw-p-6 ${className ?? ''} ${backdrop ? '' : 'tw-z-[2000]'} tw-absolute tw-top-0 tw-bottom-0 tw-right-0 tw-left-0 tw-m-auto`}
        >
          {children}
          <button
--- a/src/Components/Templates/OverlayItemsIndexPage.tsx
+++ b/src/Components/Templates/OverlayItemsIndexPage.tsx
@ -1,10 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/prefer-optional-chain */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
 import { useEffect, useRef, useState } from 'react'
 import { toast } from 'react-toastify'

@ -73,16 +72,16 @@ export const OverlayItemsIndexPage = ({

  const layer = layers.find((l) => l.name === layerName)

-  const submitNewItem = async (evt: any) => {
+  const submitNewItem = async (evt: React.FormEvent<HTMLFormElement>) => {
    evt.preventDefault()
    const formItem: Item = {} as Item
-    Array.from(evt.target).forEach((input: HTMLInputElement) => {
+    Array.from(evt.target as any).forEach((input: HTMLInputElement) => {
      if (input.name) {
        formItem[input.name] = input.value
      }
    })
    setLoading(true)
-    formItem.text &&
+    if (formItem.text) {
      formItem.text
        .toLocaleLowerCase()
        .match(hashTagRegex)
@ -92,6 +91,7 @@ export const OverlayItemsIndexPage = ({
          }
          return null
        })
+    }
    const uuid = crypto.randomUUID()
    let success = false
    try {
@ -109,7 +109,7 @@ export const OverlayItemsIndexPage = ({
    setAddItemPopupType('')
  }

-  const deleteItem = async (item) => {
+  const deleteItem = async (item: Item) => {
    setLoading(true)
    let success = false
    try {
--- a/src/Components/Templates/TagView.tsx
+++ b/src/Components/Templates/TagView.tsx
@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
-
 import { decodeTag } from '#utils/FormatTags'

 import type { Tag } from '#types/Tag'
@ -21,7 +19,7 @@ export const TagView = ({
    <div
      key={tag.name}
      onClick={onClick}
-      className={`tw-flex tw-items-center tw-flex-row tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-mt-3 tw-mr-4 tw-cursor-pointer tw-w-fit ${heighlight && 'tw-border-4 tw-border-base-200 tw-shadow-lg'}`}
+      className={`tw-flex tw-items-center tw-flex-row tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-mt-3 tw-mr-4 tw-cursor-pointer tw-w-fit ${heighlight ? 'tw-border-4 tw-border-base-200 tw-shadow-lg' : ''}`}
      style={{ backgroundColor: tag.color ? tag.color : '#666' }}
    >
      <b>{decodeTag(tag.name)}</b>
--- a/src/Components/Templates/TitleCard.tsx
+++ b/src/Components/Templates/TitleCard.tsx
@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import Subtitle from '#components/Typography/Subtitle'

 interface TitleCardProps {
@ -8,7 +6,7 @@ interface TitleCardProps {
  children?: React.ReactNode
  topMargin?: string
  className?: string
-  TopSideButtons?: any
+  TopSideButtons?: React.ReactNode
 }

 /**
@ -26,9 +24,9 @@ export function TitleCard({
    <div
      className={
        'tw-card tw-w-full tw-p-6 tw-bg-base-100 tw-shadow-xl tw-h-fit tw-mb-4 ' +
-        (className || '') +
+        (className ?? '') +
        ' ' +
-        (topMargin || 'tw-mt-6')
+        (topMargin ?? 'tw-mt-6')
      }
    >
      {!hideTitle && (
--- a/src/Components/Typography/ErrorText.tsx
+++ b/src/Components/Typography/ErrorText.tsx
@ -1,7 +1,4 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
-
-// eslint-disable-next-line react/prop-types
-function ErrorText({ styleClass, children }) {
+function ErrorText({ styleClass, children }: { styleClass: string; children: React.ReactNode }) {
  return <p className={`tw-text-center  tw-text-error ${styleClass}`}>{children}</p>
 }

--- a/src/Utils/RandomColor.ts
+++ b/src/Utils/RandomColor.ts
@ -1,8 +1,3 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
 const goldenRatioConjugate = 0.618033988749895

 export const randomColor = () => {
@ -53,7 +48,7 @@ function hsvToHex(h: number, s: number, v: number) {
  return rgbToHex(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255))
 }

-const rgbToHex = (r, g, b) =>
+const rgbToHex = (r: number, g: number, b: number) =>
  '#' +
  [r, g, b]
    .map((x) => {
--- a/src/Components/Profile/Subcomponents/ColorPicker.css
+++ b/src/Components/Profile/Subcomponents/ColorPicker.css
@ -1,20 +1,20 @@
 .picker {
    position: relative;
-  }
-  
-  .swatch {
+}
+
+.swatch {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
-  }
-  
-  .popover {
+}
+
+.popover {
    position: absolute;
    top: 0;
    left: 36px;
    border-radius: 9px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-  }
+}
--- a/src/assets/css/custom-file-upload.css
+++ b/src/assets/css/custom-file-upload.css
@ -0,0 +1,18 @@
+.custom-file-upload {
+    cursor: pointer;
+}
+
+input[type="file"] {
+    display: none;
+}
+
+.custom-file-upload:hover .button {
+    opacity: 0.8;
+}
+
+.custom-file-upload .button {
+    transition: .5s ease;
+    opacity: 0;
+    position: absolute;
+    transform: translate(8px, 8px);
+}
--- a/src/assets/css/leaflet.css
+++ b/src/assets/css/leaflet.css
@ -0,0 +1,51 @@
+.leaflet-control-attribution {
+    display: none;
+}
+
+.leaflet-control-locate {
+    display: none;
+}
+
+.leaflet-data-marker {
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAQCAYAAACcN8ZaAAAB3klEQVR42s3U4UdDURzG8czMXJnJ1Vwzc6VJZjaZJdlMlpQsKdmUFNOUspRSSqUolfQfr+fF98Vx5mwv9qbDx7LdznnO7/7Omej3+/+Ga0QMUYkhbvBgmhzCQxwxibIGrGEF8CQhU+LLtKQkQNqScUgjxRxTBIxbgfgD/BgnhM8kM5KTeclLQYqGkkMRBckzR8ic/mAgd5BAZplsUaqyIg2sDtHg2brUZJk5SmwopErJUWE8SpmTMhNvya60Zd/SNrR4bkeaskG4uiwRZk6yrJEYFibGAxn+scECHTmTnuVCzvmty3PHciB7bGKN6lQkzysPqIrHmpFhYbKUtckC1/Ioz4ZHuZdbuSLYiRxRpSZVWXZVxAzC0R4Ik5SQsu6w8yd5l2/5kg95I9SdXMoZQfYIUjeqEUrgOkXGPeN4TYRhxy8E+ZUf+eS7B7miIoeybVSjKDnm8u3+gH3pDTYwu1igATvs/pXqvBKiR4i2bNJfi1ZfUAnjgrOG8wY2quNzBKuU/ZS+uSFEl5O0xRGuUIlZCcw7xG5QPkeHYUSNV5WXGou2sC3rBC0LjenqCXGO0WEiTJa0Lr4KixdHBrDGuGGiRqCUpFk8pGIpQtCU7p4YPwxYxEMCk1aAMQZh8Ac8PfbIzYPJOwAAAABJRU5ErkJggg==') no-repeat;
+    background-position: 6px 32px;
+}
+
+.leaflet-container {
+    cursor: inherit;
+}
+
+.leaflet-popup-scrolled {
+    overflow-x: hidden;
+}
+
+.leaflet-popup-content-wrapper, .leaflet-popup-tip{
+    background-color: theme('colors.base-100');
+    color: theme('colors.base-content');
+
+}
+
+.leaflet-tooltip {
+    background-color: theme('colors.base-100');
+    color: theme('colors.base-content');
+    border-width: 0px;
+}
+
+.leaflet-tooltip {
+    border-radius: 1em;
+    transition: opacity 500ms;
+    transition-delay: 50ms;
+
+}
+
+.leaflet-tooltip-top::before {
+    border-top-color: theme('colors.base-100');
+}
+
+.leaflet-container {
+    text-align: left;
+    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-position: 50% 80%;
+}
--- a/src/assets/css/marker-icons.css
+++ b/src/assets/css/marker-icons.css
@ -0,0 +1,118 @@
+.calendar-icon {
+    position: relative;
+    top: -35px;
+    left: 10px;
+    width: 13px;
+}
+
+.user-icon {
+    position: relative;
+    top: -36px;
+    left: 10px;
+    width: 13px;
+}
+
+.circle-icon {
+    position: relative;
+    top: -33px;
+    left: 10px;
+    width: 13px;
+}
+
+.fire-icon {
+    position: relative;
+    top: -36px;
+    left: 10px;
+    width: 13px;
+}
+
+.tree-icon {
+    position: relative;
+    top: -38px;
+    left: 4px;
+    width: 24px;
+}
+
+.music-icon {
+    position: relative;
+    top: -35px;
+    left: 4px;
+    width: 24px;
+}
+
+.quest-icon {
+    position: relative;
+    top: -34px;
+    left: 4px;
+    width: 24px;
+}
+
+.drum-icon {
+    position: relative;
+    top: -38px;
+    left: 4px;
+    width: 24px;
+}
+
+.compass-icon {
+    position: relative;
+    top: -36.5px;
+    left: 4px;
+    width: 24px;
+}
+
+.group-icon {
+    position: relative;
+    top: -37px;
+    left: 4px;
+    width: 24px;
+}
+
+.liebevoll-jetzt-icon{
+    position: relative;
+    top: -35px;
+    left: 4px;
+    width: 24px;
+}
+
+.staff-snake-icon {
+    position: relative;
+    top: -35px;
+    left: 4px;
+    width: 24px;
+}
+
+.flower-icon {
+    position: relative;
+    top: -35px;
+    left: 4px;
+    width: 24px;
+}
+
+.network-icon {
+    position: relative;
+    top: -35px;
+    left: 4px;
+    width: 24px;
+}
+
+.shop-icon {
+    position: relative;
+    top: -34px;
+    left: 4px;
+    width: 24px;
+}
+
+.plant-icon {
+    position: relative;
+    top: -34px;
+    left: 4px;
+    width: 24px;
+}
+
+.circle-dot-icon {
+    position: relative;
+    top: -36px;
+    left: 4px;
+    width: 24px;
+}
--- a/src/assets/css/masonry.css
+++ b/src/assets/css/masonry.css
@ -0,0 +1,27 @@
+.masonry {
+    column-count: 1;
+    column-gap: 1.5rem;
+}
+
+.masonry-item {
+    break-inside: avoid;
+    margin-bottom: 1.5rem;
+}
+
+@media (min-width: 640px) {
+    .masonry {
+        column-count: 2;
+    }
+}
+
+@media (min-width: 1024px) {
+    .masonry {
+        column-count: 3;
+    }
+}
+
+@media (min-width: 1536px) {
+    .masonry {
+        column-count: 4;
+    }
+}
--- a/src/assets/css/misc.css
+++ b/src/assets/css/misc.css
@ -0,0 +1,23 @@
+.fade {
+    mask-image: linear-gradient(180deg, transparent, #000 1%, #000 99%, transparent);
+}
+
+.placeholder-center::placeholder {
+    text-align: center;
+}
+
+input {
+    box-sizing: border-box;
+}
+
+textarea {
+    box-sizing: border-box;
+}
+
+.crosshair-cursor-enabled {
+    cursor: crosshair;
+}
+
+.marker-cluster span {
+    color: #000;
+}
--- a/src/assets/css/tailwind.css
+++ b/src/assets/css/tailwind.css
@ -0,0 +1,24 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.tw-modal {
+    z-index: 1200 !important;
+}
+
+.tw-menu li a {
+    border-radius: 10px;
+}
+
+.tw-modal {
+    z-index: 1200 !important;
+    max-height: 100dvh;
+}
+
+.tw-modal-box {
+    max-height: calc(100dvh - 2em);
+}
+
+.tw-tab-content .container {
+    height: 100%;
+}
--- a/src/assets/css/toastify.css
+++ b/src/assets/css/toastify.css
@ -0,0 +1,26 @@
+:root {
+    --toastify-color-info: theme('colors.info');
+    --toastify-color-success: theme('colors.success');
+    --toastify-color-warning: theme('colors.warning');
+    --toastify-color-error: theme('colors.error');
+}
+
+.Toastify__toast {
+    border-radius: 1rem;
+    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    margin-left: 1rem;
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+    background-color: theme('colors.base-100');
+    color: theme('colors.base-content');
+}
+
+.Toastify__toast-container {
+    z-index: 2001 !important;
+}
+
+.Toastify__toast-container--top-right {
+    top: 4.75em !important;
+}
--- a/src/assets/target.svg
+++ b/src/assets/target.svg
@ -5,4 +5,4 @@
    xmlns='http://www.w3.org/2000/svg'
 >
  <path d='M30 14.75h-2.824c-0.608-5.219-4.707-9.318-9.874-9.921l-0.053-0.005v-2.824c0-0.69-0.56-1.25-1.25-1.25s-1.25 0.56-1.25 1.25v0 2.824c-5.219 0.608-9.318 4.707-9.921 9.874l-0.005 0.053h-2.824c-0.69 0-1.25 0.56-1.25 1.25s0.56 1.25 1.25 1.25v0h2.824c0.608 5.219 4.707 9.318 9.874 9.921l0.053 0.005v2.824c0 0.69 0.56 1.25 1.25 1.25s1.25-0.56 1.25-1.25v0-2.824c5.219-0.608 9.318-4.707 9.921-9.874l0.005-0.053h2.824c0.69 0 1.25-0.56 1.25-1.25s-0.56-1.25-1.25-1.25v0zM17.25 24.624v-2.624c0-0.69-0.56-1.25-1.25-1.25s-1.25 0.56-1.25 1.25v0 2.624c-3.821-0.57-6.803-3.553-7.368-7.326l-0.006-0.048h2.624c0.69 0 1.25-0.56 1.25-1.25s-0.56-1.25-1.25-1.25v0h-2.624c0.57-3.821 3.553-6.804 7.326-7.368l0.048-0.006v2.624c0 0.69 0.56 1.25 1.25 1.25s1.25-0.56 1.25-1.25v0-2.624c3.821 0.57 6.803 3.553 7.368 7.326l0.006 0.048h-2.624c-0.69 0-1.25 0.56-1.25 1.25s0.56 1.25 1.25 1.25v0h2.624c-0.571 3.821-3.553 6.803-7.326 7.368l-0.048 0.006z'></path>
-</svg>
+</svg>
--- a/src/css.tsx
+++ b/src/css.tsx
@ -0,0 +1,15 @@
+import 'leaflet/dist/leaflet.css'
+import 'leaflet.locatecontrol/dist/L.Control.Locate.css'
+import 'react-image-crop/dist/ReactCrop.css'
+import 'react-photo-album/rows.css'
+import 'react-toastify/dist/ReactToastify.css'
+import 'yet-another-react-lightbox/styles.css'
+
+import '#assets/css/tailwind.css'
+import '#assets/css/masonry.css'
+import '#assets/css/toastify.css'
+import '#assets/css/custom-file-upload.css'
+import '#assets/css/misc.css'
+import '#assets/css/marker-icons.css'
+import '#assets/css/leaflet.css'
+import '#assets/css/color-picker.css'
--- a/src/index.css
+++ b/src/index.css
@ -1,105 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-.fade {
-  mask-image: linear-gradient(180deg, transparent, #000 1%, #000 99%, transparent);
-}
-
-.tw-modal {
-  z-index: 1200 !important;
-}
-
-.tw-menu li a {
-  border-radius: 10px;
-}
-
-.tw-modal {
-  z-index: 1200 !important;
-  max-height: 100dvh;
-}
-
-.tw-modal-box {
-  max-height: calc(100dvh - 2em);
-}
-
-.Toastify__toast {
-  border-radius: 1rem;
-  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  margin-left: 1rem;
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-  background-color: theme('colors.base-100');
-  color: theme('colors.base-content');
-}
-
-.Toastify__toast-container {
-  z-index: 2001 !important;
-}
-
-.Toastify__toast-container--top-right {
-  top: 4.75em !important;
-}
-
-:root {
-
-  --toastify-color-info: theme('colors.info');
-  --toastify-color-success: theme('colors.success');
-  --toastify-color-warning: theme('colors.warning');
-  --toastify-color-error: theme('colors.error');
-
-}
-
-.placeholder-center::placeholder {
-  text-align: center;
-}
-
-.custom-file-upload {
-  cursor: pointer;
-}
-
-input[type="file"] {
-  display: none;
-}
-
-.custom-file-upload:hover .button {
-  opacity: 0.8;
-}
-
-.custom-file-upload .button {
-  transition: .5s ease;
-  opacity: 0;
-  position: absolute;
-  transform: translate(8px, 8px);
-
-}
-
-.tw-tab-content .container {
-  height: 100%;
-}
-
-.masonry {
-  column-count: 1;
-  column-gap: 1.5rem;
-}
-.masonry-item {
-  break-inside: avoid;
-  margin-bottom: 1.5rem;
-}
-@media (min-width: 640px) {
-  .masonry {
-      column-count: 2;
-  }
-}
-@media (min-width: 1024px) {
-  .masonry {
-      column-count: 3;
-  }
-}
-@media (min-width: 1536px) {
-  .masonry {
-      column-count: 4;
-  }
-}
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,4 +1,5 @@
-import './index.css'
+// eslint-disable-next-line import/no-unassigned-import
+import './css'

 export * from './Components/Map'
 export * from './Components/AppShell'
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -64,8 +64,8 @@ module.exports = {
      pulseGrow: 'pulseGrow 2s ease-in-out infinite',
    },
  },
-  // eslint-disable-next-line import/no-commonjs, import/extensions
-  plugins: [require('daisyui'), require('tw-elements/dist/plugin.cjs')],
+  // eslint-disable-next-line import/no-commonjs
+  plugins: [require('daisyui')],
  daisyui: {
    themes: [
      'light',
--- a/tsconfig.json
+++ b/tsconfig.json
@ -7,7 +7,7 @@
      "module": "esnext",
      "target": "ESNext",
      "lib": ["es6", "dom","es2015", "es2016", "es2017", "es2020"],
-      "sourceMap": true,
+      "sourceMap": false,
      "allowJs": false,
      "jsx": "react-jsx",
      "moduleResolution": "node",
--- a/vite.config.ts
+++ b/vite.config.ts
@ -13,10 +13,11 @@ export default defineConfig({
      all: true,
      include: ['src/**/*.{js,jsx,ts,tsx}'],
      exclude: [...configDefaults.exclude, 'src/**/*.cy.tsx'],
+      reporter: ['html', 'json-summary'],
      thresholds: {
        lines: 1,
-        functions: 59,
-        branches: 62,
+        functions: 56,
+        branches: 58,
        statements: 1,
      },
    },