diff --git a/packages/webapp/package.json b/packages/webapp/package.json
index fa3f329bbf..b0a90be701 100644
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@@ -155,11 +155,11 @@
     "sass": "^1.56.1",
     "storybook": "^8.2.8",
     "typescript": "^5.7.3",
-    "vite": "^4.5.5",
-    "vite-plugin-istanbul": "^4.0.0",
-    "vite-plugin-pwa": "^0.14.3",
-    "vite-plugin-svgr": "^2.4.0",
-    "vitest": "^0.34.5"
+    "vite": "^5.4.11",
+    "vite-plugin-istanbul": "^5.0.0",
+    "vite-plugin-pwa": "^0.21.1",
+    "vite-plugin-svgr": "^4.3.0",
+    "vitest": "^1.6.0"
   },
   "pnpm": {
     "overrides": {
diff --git a/packages/webapp/pnpm-lock.yaml b/packages/webapp/pnpm-lock.yaml
index 1c1cc26234..f791d1c936 100644
--- a/packages/webapp/pnpm-lock.yaml
+++ b/packages/webapp/pnpm-lock.yaml
@@ -252,7 +252,7 @@ importers:
         version: 1.6.22(react@18.3.1)
       '@mdx-js/rollup':
         specifier: ^2.3.0
-        version: 2.3.0(rollup@3.29.5)
+        version: 2.3.0(rollup@4.60.4)
       '@storybook/addon-a11y':
         specifier: ^8.2.8
         version: 8.6.14(storybook@8.6.14(prettier@3.6.2))
@@ -282,7 +282,7 @@ importers:
         version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.6.2))(typescript@5.9.3)
       '@storybook/react-vite':
         specifier: ^8.2.8
-        version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.5)(storybook@8.6.14(prettier@3.6.2))(typescript@5.9.3)(vite@4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))
+        version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.60.4)(storybook@8.6.14(prettier@3.6.2))(typescript@5.9.3)(vite@5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))
       '@storybook/test':
         specifier: ^8.2.8
         version: 8.6.14(storybook@8.6.14(prettier@3.6.2))
@@ -327,7 +327,7 @@ importers:
         version: 5.62.0(eslint@8.57.1)(typescript@5.9.3)
       '@vitejs/plugin-react':
         specifier: ^4.1.0
-        version: 4.7.0(vite@4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))
+        version: 4.7.0(vite@5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))
       babel-loader:
         specifier: ^8.3.0
         version: 8.4.1(@babel/core@7.28.5)(webpack@5.102.1(@swc/core@1.15.1)(esbuild@0.25.12))
@@ -383,20 +383,20 @@ importers:
         specifier: ^5.7.3
         version: 5.9.3
       vite:
-        specifier: ^4.5.5
-        version: 4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
+        specifier: ^5.4.11
+        version: 5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
       vite-plugin-istanbul:
-        specifier: ^4.0.0
-        version: 4.1.0(vite@4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))
+        specifier: ^5.0.0
+        version: 5.0.0(vite@5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))
       vite-plugin-pwa:
-        specifier: ^0.14.3
-        version: 0.14.7(vite@4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))(workbox-build@6.6.0(@types/babel__core@7.20.5))(workbox-window@6.6.0)
+        specifier: ^0.21.1
+        version: 0.21.2(vite@5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))(workbox-build@6.6.0(@types/babel__core@7.20.5))(workbox-window@6.6.0)
       vite-plugin-svgr:
-        specifier: ^2.4.0
-        version: 2.4.0(rollup@3.29.5)(vite@4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))
+        specifier: ^4.3.0
+        version: 4.5.0(rollup@4.60.4)(typescript@5.9.3)(vite@5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))
       vitest:
-        specifier: ^0.34.5
-        version: 0.34.6(happy-dom@15.11.7)(playwright@1.56.1)(sass@1.94.0)(terser@5.44.1)
+        specifier: ^1.6.0
+        version: 1.6.1(@types/node@24.10.1)(happy-dom@15.11.7)(sass@1.94.0)(terser@5.44.1)
 
 packages:
 
@@ -1064,14 +1064,20 @@ packages:
   '@emotion/weak-memoize@0.4.0':
     resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
 
+  '@esbuild/aix-ppc64@0.21.5':
+    resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [aix]
+
   '@esbuild/aix-ppc64@0.25.12':
     resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/android-arm64@0.18.20':
-    resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
+  '@esbuild/android-arm64@0.21.5':
+    resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [android]
@@ -1082,8 +1088,8 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm@0.18.20':
-    resolution: {integrity: sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==}
+  '@esbuild/android-arm@0.21.5':
+    resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [android]
@@ -1094,8 +1100,8 @@ packages:
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-x64@0.18.20':
-    resolution: {integrity: sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==}
+  '@esbuild/android-x64@0.21.5':
+    resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
@@ -1106,8 +1112,8 @@ packages:
     cpu: [x64]
     os: [android]
 
-  '@esbuild/darwin-arm64@0.18.20':
-    resolution: {integrity: sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==}
+  '@esbuild/darwin-arm64@0.21.5':
+    resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [darwin]
@@ -1118,8 +1124,8 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.18.20':
-    resolution: {integrity: sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==}
+  '@esbuild/darwin-x64@0.21.5':
+    resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [darwin]
@@ -1130,8 +1136,8 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/freebsd-arm64@0.18.20':
-    resolution: {integrity: sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==}
+  '@esbuild/freebsd-arm64@0.21.5':
+    resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [freebsd]
@@ -1142,8 +1148,8 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.18.20':
-    resolution: {integrity: sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==}
+  '@esbuild/freebsd-x64@0.21.5':
+    resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [freebsd]
@@ -1154,8 +1160,8 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/linux-arm64@0.18.20':
-    resolution: {integrity: sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==}
+  '@esbuild/linux-arm64@0.21.5':
+    resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [linux]
@@ -1166,8 +1172,8 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm@0.18.20':
-    resolution: {integrity: sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==}
+  '@esbuild/linux-arm@0.21.5':
+    resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [linux]
@@ -1178,8 +1184,8 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.18.20':
-    resolution: {integrity: sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==}
+  '@esbuild/linux-ia32@0.21.5':
+    resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [linux]
@@ -1190,8 +1196,8 @@ packages:
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.18.20':
-    resolution: {integrity: sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==}
+  '@esbuild/linux-loong64@0.21.5':
+    resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
     engines: {node: '>=12'}
     cpu: [loong64]
     os: [linux]
@@ -1202,8 +1208,8 @@ packages:
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.18.20':
-    resolution: {integrity: sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==}
+  '@esbuild/linux-mips64el@0.21.5':
+    resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
     engines: {node: '>=12'}
     cpu: [mips64el]
     os: [linux]
@@ -1214,8 +1220,8 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.18.20':
-    resolution: {integrity: sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==}
+  '@esbuild/linux-ppc64@0.21.5':
+    resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [linux]
@@ -1226,8 +1232,8 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.18.20':
-    resolution: {integrity: sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==}
+  '@esbuild/linux-riscv64@0.21.5':
+    resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
     engines: {node: '>=12'}
     cpu: [riscv64]
     os: [linux]
@@ -1238,8 +1244,8 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.18.20':
-    resolution: {integrity: sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==}
+  '@esbuild/linux-s390x@0.21.5':
+    resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
     engines: {node: '>=12'}
     cpu: [s390x]
     os: [linux]
@@ -1250,8 +1256,8 @@ packages:
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-x64@0.18.20':
-    resolution: {integrity: sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==}
+  '@esbuild/linux-x64@0.21.5':
+    resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [linux]
@@ -1268,8 +1274,8 @@ packages:
     cpu: [arm64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.18.20':
-    resolution: {integrity: sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==}
+  '@esbuild/netbsd-x64@0.21.5':
+    resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
@@ -1286,8 +1292,8 @@ packages:
     cpu: [arm64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.18.20':
-    resolution: {integrity: sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==}
+  '@esbuild/openbsd-x64@0.21.5':
+    resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
@@ -1304,8 +1310,8 @@ packages:
     cpu: [arm64]
     os: [openharmony]
 
-  '@esbuild/sunos-x64@0.18.20':
-    resolution: {integrity: sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==}
+  '@esbuild/sunos-x64@0.21.5':
+    resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [sunos]
@@ -1316,8 +1322,8 @@ packages:
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/win32-arm64@0.18.20':
-    resolution: {integrity: sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==}
+  '@esbuild/win32-arm64@0.21.5':
+    resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [win32]
@@ -1328,8 +1334,8 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.18.20':
-    resolution: {integrity: sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==}
+  '@esbuild/win32-ia32@0.21.5':
+    resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [win32]
@@ -1340,8 +1346,8 @@ packages:
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-x64@0.18.20':
-    resolution: {integrity: sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==}
+  '@esbuild/win32-x64@0.21.5':
+    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [win32]
@@ -1930,15 +1936,6 @@ packages:
     peerDependencies:
       rollup: ^1.20.0 || ^2.0.0
 
-  '@rollup/plugin-replace@5.0.7':
-    resolution: {integrity: sha512-PqxSfuorkHz/SPpyngLyg5GCEkOcee9M1bkxiVDr41Pd61mqP1PLOoDPbpl44SB2mQGKwV/In74gqQmGITOhEQ==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
   '@rollup/pluginutils@3.1.0':
     resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
     engines: {node: '>= 8.0.0'}
@@ -1954,6 +1951,131 @@ packages:
       rollup:
         optional: true
 
+  '@rollup/rollup-android-arm-eabi@4.60.4':
+    resolution: {integrity: sha512-F5QXMSiFebS9hKZj02XhWLLnRpJ3B3AROP0tWbFBSj+6kCbg5m9j5JoHKd4mmSVy5mS/IMQloYgYxCuJC0fxEQ==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.60.4':
+    resolution: {integrity: sha512-GxxTKApUpzRhof7poWvCJHRF51C67u1R7D6DiluBE8wKU1u5GWE8t+v81JvJYtbawoBFX1hLv5Ei4eVjkWokaw==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.60.4':
+    resolution: {integrity: sha512-tua0TaJxMOB1R0V0RS1jFZ/RpURFDJIOR2A6jWwQeawuFyS4gBW+rntLRaQd0EQ4bd6Vp44Z2rXW+YYDBsj6IA==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.60.4':
+    resolution: {integrity: sha512-CSKq7MsP+5PFIcydhAiR1K0UhEI1A2jWXVKHPCBZ151yOutENwvnPocgVHkivu2kviURtCEB6zUQw0vs8RrhMg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.60.4':
+    resolution: {integrity: sha512-+O8OkVdyvXMtJEciu2wS/pzm1IxntEEQx3z5TAVy4l32G0etZn+RsA48ARRrFm6Ri8fvqPQfgrvNxSjKAbnd3g==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.60.4':
+    resolution: {integrity: sha512-Iw3oMskH3AfNuhU0MSN7vNbdi4me/NiYo2azqPz/Le16zHSa+3RRmliCMWWQmh4lcndccU40xcJuTYJZxNo/lw==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.60.4':
+    resolution: {integrity: sha512-EIPRXTVQpHyF8WOo219AD2yEltPehLTcTMz2fn6JsatLYSzQf00hj3rulF+yauOlF9/FtM2WpkT/hJh/KJFGhA==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.60.4':
+    resolution: {integrity: sha512-J3Yh9PzzF1Ovah2At+lHiGQdsYgArxBbXv/zHfSyaiFQEqvNv7DcW98pCrmdjCZBrqBiKrKKe2V+aaSGWuBe/w==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-gnu@4.60.4':
+    resolution: {integrity: sha512-BFDEZMYfUvLn37ONE1yMBojPxnMlTFsdyNoqncT0qFq1mAfllL+ATMMJd8TeuVMiX84s1KbcxcZbXInmcO2mRg==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-musl@4.60.4':
+    resolution: {integrity: sha512-pc9EYOSlOgdQ2uPl1o9PF6/kLSgaUosia7gOuS8mB69IxJvlclko1MECXysjs5ryez1/5zjYqx3+xYU0TU6R1A==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-gnu@4.60.4':
+    resolution: {integrity: sha512-NxnomyxYerDh5n4iLrNa+sH+Z+U4BMEE46V2PgQ/hoB909i8gV1M5wPojWg9fk1jWpO3IQnOs20K4wyZuFLEFQ==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-musl@4.60.4':
+    resolution: {integrity: sha512-nbJnQ8a3z1mtmrwImCYhc6BGpThAyYVRQxw9uKSKG4wR6aAYno9sVjJ0zaZcW9BPJX1GbrDPf+SvdWjgTuDmnw==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.60.4':
+    resolution: {integrity: sha512-2EU6acNrQLd8tYvo/LXW535wupT3m6fo7HKo6lr7ktQoItxTyOL1ZCR/GfGCuXl2vR+zmfI6eRXkSemafv+iVg==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-musl@4.60.4':
+    resolution: {integrity: sha512-WeBtoMuaMxiiIrO2IYP3xs6GMWkJP2C0EoT8beTLkUPmzV1i/UcOSVw1d5r9KBODtHKilG5yFxsGRnBbK3wJ4A==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.60.4':
+    resolution: {integrity: sha512-FJHFfqpKUI3A10WrWKiFbBZ7yVbGT4q4B5o1qKFFojqpaYoh9LrQgqWCmmcxQzVSXYtyB5bzkXrYzlHTs21MYA==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-musl@4.60.4':
+    resolution: {integrity: sha512-mcEl6CUT5IAUmQf1m9FYSmVqCJlpQ8r8eyftFUHG8i9OhY7BkBXSUdnLH5DOf0wCOjcP9v/QO93zpmF1SptCCw==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.60.4':
+    resolution: {integrity: sha512-ynt3JxVd2w2buzoKDWIyiV1pJW93xlQic1THVLXilz429oijRpSHivZAgp65KBu+cMcgf1eVVjdnTLvPxgCuoQ==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-gnu@4.60.4':
+    resolution: {integrity: sha512-Boiz5+MsaROEWDf+GGEwF8VMHGhlUoQMtIPjOgA5fv4osupqTVnJteQNKJwUcnUog2G55jYXH7KZFFiJe0TEzQ==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-musl@4.60.4':
+    resolution: {integrity: sha512-+qfSY27qIrFfI/Hom04KYFw3GKZSGU4lXus51wsb5EuySfFlWRwjkKWoE9emgRw/ukoT4Udsj4W/+xxG8VbPKg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-openbsd-x64@4.60.4':
+    resolution: {integrity: sha512-VpTfOPHgVXEBeeR8hZ2O0F3aSso+JDWqTWmTmzcQKted54IAdUVbxE+j/MVxUsKa8L20HJhv3vUezVPoquqWjA==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.60.4':
+    resolution: {integrity: sha512-IPOsh5aRYuLv/nkU51X10Bf75Bsf6+gZdx1X+QP5QM6lIJFHHqbHLG0uJn/hWthzo13UAc2umiUorqZy3axoZg==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.60.4':
+    resolution: {integrity: sha512-4QzE9E81OohJ/HKzHhsqU+zcYYojVOXlFMs1DdyMT6qXl/niOH7AVElmmEdUNHHS/oRkc++d5k6Vy85zFs0DEw==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.60.4':
+    resolution: {integrity: sha512-zTPgT1YuHHcd+Tmx7h8aml0FWFVelV5N54oHow9SLj+GfoDy/huQ+UV396N/C7KpMDMiPspRktzM1/0r1usYEA==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.60.4':
+    resolution: {integrity: sha512-DRS4G7mi9lJxqEDezIkKCaUIKCrLUUDCUaCsTPCi/rtqaC6D/jjwslMQyiDU50Ka0JKpeXeRBFBAXwArY52vBw==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.60.4':
+    resolution: {integrity: sha512-QVTUovf40zgTqlFVrKA1uXMVvU2QWEFWfAH8Wdc48IxLvrJMQVMBRjuQyUpzZCDkakImib9eVazbWlC6ksWtJw==}
+    cpu: [x64]
+    os: [win32]
+
   '@rooks/use-mutation-observer@4.11.2':
     resolution: {integrity: sha512-vpsdrZdr6TkB1zZJcHx+fR1YC/pHs2BaqcuYiEGjBVbwY5xcC49+h0hAUtQKHth3oJqXfIX/Ng8S7s5HFHdM/A==}
     peerDependencies:
@@ -2225,9 +2347,9 @@ packages:
   '@surma/rollup-plugin-off-main-thread@2.2.3':
     resolution: {integrity: sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==}
 
-  '@svgr/babel-plugin-add-jsx-attribute@6.5.1':
-    resolution: {integrity: sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ==}
-    engines: {node: '>=10'}
+  '@svgr/babel-plugin-add-jsx-attribute@8.0.0':
+    resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==}
+    engines: {node: '>=14'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
@@ -2243,55 +2365,55 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@svgr/babel-plugin-replace-jsx-attribute-value@6.5.1':
-    resolution: {integrity: sha512-8DPaVVE3fd5JKuIC29dqyMB54sA6mfgki2H2+swh+zNJoynC8pMPzOkidqHOSc6Wj032fhl8Z0TVn1GiPpAiJg==}
-    engines: {node: '>=10'}
+  '@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0':
+    resolution: {integrity: sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==}
+    engines: {node: '>=14'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@svgr/babel-plugin-svg-dynamic-title@6.5.1':
-    resolution: {integrity: sha512-FwOEi0Il72iAzlkaHrlemVurgSQRDFbk0OC8dSvD5fSBPHltNh7JtLsxmZUhjYBZo2PpcU/RJvvi6Q0l7O7ogw==}
-    engines: {node: '>=10'}
+  '@svgr/babel-plugin-svg-dynamic-title@8.0.0':
+    resolution: {integrity: sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==}
+    engines: {node: '>=14'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@svgr/babel-plugin-svg-em-dimensions@6.5.1':
-    resolution: {integrity: sha512-gWGsiwjb4tw+ITOJ86ndY/DZZ6cuXMNE/SjcDRg+HLuCmwpcjOktwRF9WgAiycTqJD/QXqL2f8IzE2Rzh7aVXA==}
-    engines: {node: '>=10'}
+  '@svgr/babel-plugin-svg-em-dimensions@8.0.0':
+    resolution: {integrity: sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==}
+    engines: {node: '>=14'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@svgr/babel-plugin-transform-react-native-svg@6.5.1':
-    resolution: {integrity: sha512-2jT3nTayyYP7kI6aGutkyfJ7UMGtuguD72OjeGLwVNyfPRBD8zQthlvL+fAbAKk5n9ZNcvFkp/b1lZ7VsYqVJg==}
-    engines: {node: '>=10'}
+  '@svgr/babel-plugin-transform-react-native-svg@8.1.0':
+    resolution: {integrity: sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==}
+    engines: {node: '>=14'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@svgr/babel-plugin-transform-svg-component@6.5.1':
-    resolution: {integrity: sha512-a1p6LF5Jt33O3rZoVRBqdxL350oge54iZWHNI6LJB5tQ7EelvD/Mb1mfBiZNAan0dt4i3VArkFRjA4iObuNykQ==}
+  '@svgr/babel-plugin-transform-svg-component@8.0.0':
+    resolution: {integrity: sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==}
     engines: {node: '>=12'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@svgr/babel-preset@6.5.1':
-    resolution: {integrity: sha512-6127fvO/FF2oi5EzSQOAjo1LE3OtNVh11R+/8FXa+mHx1ptAaS4cknIjnUA7e6j6fwGGJ17NzaTJFUwOV2zwCw==}
-    engines: {node: '>=10'}
+  '@svgr/babel-preset@8.1.0':
+    resolution: {integrity: sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==}
+    engines: {node: '>=14'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@svgr/core@6.5.1':
-    resolution: {integrity: sha512-/xdLSWxK5QkqG524ONSjvg3V/FkNyCv538OIBdQqPNaAta3AsXj/Bd2FbvR87yMbXO2hFSWiAe/Q6IkVPDw+mw==}
-    engines: {node: '>=10'}
+  '@svgr/core@8.1.0':
+    resolution: {integrity: sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==}
+    engines: {node: '>=14'}
 
-  '@svgr/hast-util-to-babel-ast@6.5.1':
-    resolution: {integrity: sha512-1hnUxxjd83EAxbL4a0JDJoD3Dao3hmjvyvyEV8PzWmLK3B9m9NPlW7GKjFyoWE8nM7HnXzPcmmSyOW8yOddSXw==}
-    engines: {node: '>=10'}
+  '@svgr/hast-util-to-babel-ast@8.0.0':
+    resolution: {integrity: sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==}
+    engines: {node: '>=14'}
 
-  '@svgr/plugin-jsx@6.5.1':
-    resolution: {integrity: sha512-+UdQxI3jgtSjCykNSlEMuy1jSRQlGC7pqBCPvkG/2dATdWo082zHTTK3uhnAju2/6XpE6B5mZ3z4Z8Ns01S8Gw==}
-    engines: {node: '>=10'}
+  '@svgr/plugin-jsx@8.1.0':
+    resolution: {integrity: sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==}
+    engines: {node: '>=14'}
     peerDependencies:
-      '@svgr/core': ^6.0.0
+      '@svgr/core': '*'
 
   '@swc/core-darwin-arm64@1.15.1':
     resolution: {integrity: sha512-vEPrVxegWIjKEz+1VCVuKRY89jhokhSmQ/YXBWLnmLj9cI08G61RTZJvdsIcjYUjjTu7NgZlYVK+b2y0fbh11g==}
@@ -2444,14 +2566,6 @@ packages:
   '@types/cacheable-request@6.0.3':
     resolution: {integrity: sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==}
 
-  '@types/chai-subset@1.3.6':
-    resolution: {integrity: sha512-m8lERkkQj+uek18hXOZuec3W/fCRTrU4hrnXjH3qhHy96ytuPaPiWGgu7sJb7tZxZonO75vYAjCvpe/e4VUwRw==}
-    peerDependencies:
-      '@types/chai': <5.2.0
-
-  '@types/chai@4.3.20':
-    resolution: {integrity: sha512-/pC9HAB5I/xMlc5FP77qjCnI16ChlJfW0tGa0IUcFn38VJrTV6DeZ60NU5KZBtaOZqjdpwTWohz5HU1RrhiYxQ==}
-
   '@types/d3-array@3.2.2':
     resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
 
@@ -2753,8 +2867,8 @@ packages:
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
 
-  '@vitest/expect@0.34.6':
-    resolution: {integrity: sha512-QUzKpUQRc1qC7qdGo7rMK3AkETI7w18gTCUrsNnyjjJKYiuUB9+TQK3QnR1unhCnWRC0AbKv2omLGQDF/mIjOw==}
+  '@vitest/expect@1.6.1':
+    resolution: {integrity: sha512-jXL+9+ZNIJKruofqXuuTClf44eSpcHlgj3CiuNihUF3Ioujtmc0zIa3UJOW5RjDK1YLBJZnWBlPuqhYycLioog==}
 
   '@vitest/expect@2.0.5':
     resolution: {integrity: sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==}
@@ -2765,20 +2879,20 @@ packages:
   '@vitest/pretty-format@2.1.9':
     resolution: {integrity: sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==}
 
-  '@vitest/runner@0.34.6':
-    resolution: {integrity: sha512-1CUQgtJSLF47NnhN+F9X2ycxUP0kLHQ/JWvNHbeBfwW8CzEGgeskzNnHDyv1ieKTltuR6sdIHV+nmR6kPxQqzQ==}
+  '@vitest/runner@1.6.1':
+    resolution: {integrity: sha512-3nSnYXkVkf3mXFfE7vVyPmi3Sazhb/2cfZGGs0JRzFsPFvAMBEcrweV1V1GsrstdXeKCTXlJbvnQwGWgEIHmOA==}
 
-  '@vitest/snapshot@0.34.6':
-    resolution: {integrity: sha512-B3OZqYn6k4VaN011D+ve+AA4whM4QkcwcrwaKwAbyyvS/NB1hCWjFIBQxAQQSQir9/RtyAAGuq+4RJmbn2dH4w==}
+  '@vitest/snapshot@1.6.1':
+    resolution: {integrity: sha512-WvidQuWAzU2p95u8GAKlRMqMyN1yOJkGHnx3M1PL9Raf7AQ1kwLKg04ADlCa3+OXUZE7BceOhVZiuWAbzCKcUQ==}
 
-  '@vitest/spy@0.34.6':
-    resolution: {integrity: sha512-xaCvneSaeBw/cz8ySmF7ZwGvL0lBjfvqc1LpQ/vcdHEvpLn3Ff1vAvjw+CoGn0802l++5L/pxb7whwcWAw+DUQ==}
+  '@vitest/spy@1.6.1':
+    resolution: {integrity: sha512-MGcMmpGkZebsMZhbQKkAf9CX5zGvjkBTqf8Zx3ApYWXr3wG+QvEu2eXWfnIIWYSJExIp4V9FCKDEeygzkYrXMw==}
 
   '@vitest/spy@2.0.5':
     resolution: {integrity: sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==}
 
-  '@vitest/utils@0.34.6':
-    resolution: {integrity: sha512-IG5aDD8S6zlvloDsnzHw0Ut5xczlF+kv2BOTo+iXfPr54Yhi5qbVOgGB1hZaVq4iJ4C/MZ2J0y15IlsV/ZcI0A==}
+  '@vitest/utils@1.6.1':
+    resolution: {integrity: sha512-jOrrUvXM4Av9ZWiG1EajNto0u96kWAhJ1LmPmJhXXQx/32MecEKd10pOLYgS2BQx1TgkGhloPU1ArDW2vvaY6g==}
 
   '@vitest/utils@2.0.5':
     resolution: {integrity: sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==}
@@ -3437,6 +3551,15 @@ packages:
     resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
     engines: {node: '>=10'}
 
+  cosmiconfig@8.3.6:
+    resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   create-jest@29.7.0:
     resolution: {integrity: sha512-Adz2bdH0Vq3F53KEMJOoftQFutWCukm6J24wbPWRO4k1kMY7gS7ds/uoJkNuV8wDCtWWnuwGcJwpWcih+zEW1Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -3785,6 +3908,9 @@ packages:
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
+  dot-case@3.0.4:
+    resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -3908,8 +4034,8 @@ packages:
     peerDependencies:
       esbuild: '>=0.12 <1'
 
-  esbuild@0.18.20:
-    resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==}
+  esbuild@0.21.5:
+    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
     engines: {node: '>=12'}
     hasBin: true
 
@@ -4060,6 +4186,10 @@ packages:
     resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
     engines: {node: '>=10'}
 
+  execa@8.0.1:
+    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
+    engines: {node: '>=16.17'}
+
   exit@0.1.2:
     resolution: {integrity: sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==}
     engines: {node: '>= 0.8.0'}
@@ -4111,6 +4241,15 @@ packages:
   fb-watchman@2.0.2:
     resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==}
 
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
   file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -4287,6 +4426,10 @@ packages:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
     engines: {node: '>=10'}
 
+  get-stream@8.0.1:
+    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
+    engines: {node: '>=16'}
+
   get-symbol-description@1.1.0:
     resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
     engines: {node: '>= 0.4'}
@@ -4465,6 +4608,10 @@ packages:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
 
+  human-signals@5.0.0:
+    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
+    engines: {node: '>=16.17.0'}
+
   hyphenate-style-name@1.1.0:
     resolution: {integrity: sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==}
 
@@ -4747,6 +4894,10 @@ packages:
     resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
     engines: {node: '>=8'}
 
+  is-stream@3.0.0:
+    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   is-string@1.1.1:
     resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
     engines: {node: '>= 0.4'}
@@ -5030,6 +5181,9 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
+  js-tokens@9.0.1:
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
+
   js-yaml@3.14.1:
     resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
     hasBin: true
@@ -5201,8 +5355,8 @@ packages:
     resolution: {integrity: sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==}
     engines: {node: '>=8.9.0'}
 
-  local-pkg@0.4.3:
-    resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
+  local-pkg@0.5.1:
+    resolution: {integrity: sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==}
     engines: {node: '>=14'}
 
   locate-path@5.0.0:
@@ -5259,6 +5413,9 @@ packages:
   loupe@3.2.1:
     resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
 
+  lower-case@2.0.2:
+    resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
+
   lowercase-keys@2.0.0:
     resolution: {integrity: sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==}
     engines: {node: '>=8'}
@@ -5575,6 +5732,10 @@ packages:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
 
+  mimic-fn@4.0.0:
+    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
+    engines: {node: '>=12'}
+
   mimic-response@1.0.1:
     resolution: {integrity: sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==}
     engines: {node: '>=4'}
@@ -5652,6 +5813,9 @@ packages:
   next-tick@1.1.0:
     resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
 
+  no-case@3.0.4:
+    resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
+
   node-addon-api@7.1.1:
     resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
 
@@ -5708,6 +5872,10 @@ packages:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
 
+  npm-run-path@5.3.0:
+    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
@@ -5751,6 +5919,10 @@ packages:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
 
+  onetime@6.0.0:
+    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
+    engines: {node: '>=12'}
+
   open@8.4.2:
     resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
     engines: {node: '>=12'}
@@ -5782,9 +5954,9 @@ packages:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
 
-  p-limit@4.0.0:
-    resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+  p-limit@5.0.0:
+    resolution: {integrity: sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==}
+    engines: {node: '>=18'}
 
   p-locate@4.1.0:
     resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
@@ -5855,6 +6027,10 @@ packages:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
+  path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
@@ -5902,6 +6078,10 @@ packages:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
+  picomatch@4.0.4:
+    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
+    engines: {node: '>=12'}
+
   pidtree@0.5.0:
     resolution: {integrity: sha512-9nxspIM7OpZuhBxPg73Zvyq7j1QMPMPsGKTqRc2XOaFQauDvoNz9fM1Wdkjmeo7l9GXOZiRs97sPkuayl39wjA==}
     engines: {node: '>=0.10'}
@@ -6411,9 +6591,9 @@ packages:
     engines: {node: '>=10.0.0'}
     hasBin: true
 
-  rollup@3.29.5:
-    resolution: {integrity: sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==}
-    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
+  rollup@4.60.4:
+    resolution: {integrity: sha512-WHeFSbZYsPu3+bLoNRUuAO+wavNlocOPf3wSHTP7hcFKVnJeWsYlCDbr3mTS14FCizf9ccIxXA8sGL8zKeQN3g==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
   rrule@2.7.2:
@@ -6568,6 +6748,9 @@ packages:
     resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
     engines: {node: '>=12'}
 
+  snake-case@3.0.4:
+    resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
+
   sort-keys@4.2.0:
     resolution: {integrity: sha512-aUYIEU/UviqPgc8mHR6IW1EGxkAXpeRETYcrzg8cLAvUPZcpAlleSXHV2mY7G12GphSH6Gzv+4MMVSSkbdteHg==}
     engines: {node: '>=8'}
@@ -6724,6 +6907,10 @@ packages:
     resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
     engines: {node: '>=6'}
 
+  strip-final-newline@3.0.0:
+    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
+    engines: {node: '>=12'}
+
   strip-indent@3.0.0:
     resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
     engines: {node: '>=8'}
@@ -6736,8 +6923,8 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
-  strip-literal@1.3.0:
-    resolution: {integrity: sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==}
+  strip-literal@2.1.1:
+    resolution: {integrity: sha512-631UJ6O00eNGfMiWG78ck80dfBab8X6IVFB51jZK5Icd7XAs60Z5y7QdSd/wGIklnWvRbUNloVzhOKKmutxQ6Q==}
 
   style-to-object@0.4.4:
     resolution: {integrity: sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==}
@@ -6860,8 +7047,12 @@ packages:
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
-  tinypool@0.7.0:
-    resolution: {integrity: sha512-zSYNUlYSMhJ6Zdou4cJwo/p7w5nmAH17GRfU/ui3ctvjXFErXXkruT4MWW6poDeXgCaIBlGLrfU6TbTXxyGMww==}
+  tinyglobby@0.2.16:
+    resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==}
+    engines: {node: '>=12.0.0'}
+
+  tinypool@0.8.4:
+    resolution: {integrity: sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==}
     engines: {node: '>=14.0.0'}
 
   tinyrainbow@1.2.0:
@@ -7204,37 +7395,43 @@ packages:
     resolution: {integrity: sha512-LII3bXRFBZLlezoG5FfZVcXflZgWP/4dCwKtxd5ky9+LOtM4CS3bIRQsmR1KMnMW07jpE8fqR2lcxPZ+8sJIcw==}
     engines: {node: '>= 0.10'}
 
-  vite-node@0.34.6:
-    resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==}
-    engines: {node: '>=v14.18.0'}
+  vite-node@1.6.1:
+    resolution: {integrity: sha512-YAXkfvGtuTzwWbDSACdJSg4A4DZiAqckWe90Zapc/sEX3XvHcw1NdurM/6od8J207tSDqNbSsgdCacBgvJKFuA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
 
-  vite-plugin-istanbul@4.1.0:
-    resolution: {integrity: sha512-d8FRxaswOUYlGqCCNv2BTbt9pyqt7J4RPgab3WmMf+T2TflLlCmC7S26zDRfL9Ve4JSHrcf5bdzt+E0n9CrPvA==}
+  vite-plugin-istanbul@5.0.0:
+    resolution: {integrity: sha512-Tg9zDmm/u4SdEDFbEWHBz7mmFe7jhLRmArA2XCmw5yydEFCARU9r4TxqFFnBFWCL63D9A7XA7VELulOO5T5o/g==}
     peerDependencies:
       vite: '>=2.9.1 <= 5'
 
-  vite-plugin-pwa@0.14.7:
-    resolution: {integrity: sha512-dNJaf0fYOWncmjxv9HiSa2xrSjipjff7IkYE5oIUJ2x5HKu3cXgA8LRgzOwTc5MhwyFYRSU0xyN0Phbx3NsQYw==}
+  vite-plugin-pwa@0.21.2:
+    resolution: {integrity: sha512-vFhH6Waw8itNu37hWUJxL50q+CBbNcMVzsKaYHQVrfxTt3ihk3PeLO22SbiP1UNWzcEPaTQv+YVxe4G0KOjAkg==}
+    engines: {node: '>=16.0.0'}
     peerDependencies:
-      vite: ^3.1.0 || ^4.0.0
-      workbox-build: ^6.5.4
-      workbox-window: ^6.5.4
+      '@vite-pwa/assets-generator': ^0.2.6
+      vite: ^3.1.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
+      workbox-build: ^7.3.0
+      workbox-window: ^7.3.0
+    peerDependenciesMeta:
+      '@vite-pwa/assets-generator':
+        optional: true
 
-  vite-plugin-svgr@2.4.0:
-    resolution: {integrity: sha512-q+mJJol6ThvqkkJvvVFEndI4EaKIjSI0I3jNFgSoC9fXAz1M7kYTVUin8fhUsFojFDKZ9VHKtX6NXNaOLpbsHA==}
+  vite-plugin-svgr@4.5.0:
+    resolution: {integrity: sha512-W+uoSpmVkSmNOGPSsDCWVW/DDAyv+9fap9AZXBvWiQqrboJ08j2vh0tFxTD/LjwqwAd3yYSVJgm54S/1GhbdnA==}
     peerDependencies:
-      vite: ^2.6.0 || 3 || 4
+      vite: '>=2.6.0'
 
-  vite@4.5.14:
-    resolution: {integrity: sha512-+v57oAaoYNnO3hIu5Z/tJRZjq5aHM2zDve9YZ8HngVHbhk66RStobhb1sqPMIPEleV6cNKYK4eGrAbE9Ulbl2g==}
-    engines: {node: ^14.18.0 || >=16.0.0}
+  vite@5.4.21:
+    resolution: {integrity: sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
-      '@types/node': '>= 14'
+      '@types/node': ^18.0.0 || >=20.0.0
       less: '*'
       lightningcss: ^1.21.0
       sass: '*'
+      sass-embedded: '*'
       stylus: '*'
       sugarss: '*'
       terser: ^5.4.0
@@ -7247,6 +7444,8 @@ packages:
         optional: true
       sass:
         optional: true
+      sass-embedded:
+        optional: true
       stylus:
         optional: true
       sugarss:
@@ -7254,22 +7453,22 @@ packages:
       terser:
         optional: true
 
-  vitest@0.34.6:
-    resolution: {integrity: sha512-+5CALsOvbNKnS+ZHMXtuUC7nL8/7F1F2DnHGjSsszX8zCjWSSviphCb/NuS9Nzf4Q03KyyDRBAXhF/8lffME4Q==}
-    engines: {node: '>=v14.18.0'}
+  vitest@1.6.1:
+    resolution: {integrity: sha512-Ljb1cnSJSivGN0LqXd/zmDbWEM0RNNg2t1QW/XUhYl/qPqyu7CsqeWtqQXHVaJsecLPuDoak2oJcZN2QoRIOag==}
+    engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
-      '@vitest/browser': '*'
-      '@vitest/ui': '*'
+      '@types/node': ^18.0.0 || >=20.0.0
+      '@vitest/browser': 1.6.1
+      '@vitest/ui': 1.6.1
       happy-dom: '*'
       jsdom: '*'
-      playwright: '*'
-      safaridriver: '*'
-      webdriverio: '*'
     peerDependenciesMeta:
       '@edge-runtime/vm':
         optional: true
+      '@types/node':
+        optional: true
       '@vitest/browser':
         optional: true
       '@vitest/ui':
@@ -7278,12 +7477,6 @@ packages:
         optional: true
       jsdom:
         optional: true
-      playwright:
-        optional: true
-      safaridriver:
-        optional: true
-      webdriverio:
-        optional: true
 
   void-elements@3.1.0:
     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
@@ -8409,100 +8602,103 @@ snapshots:
 
   '@emotion/weak-memoize@0.4.0': {}
 
+  '@esbuild/aix-ppc64@0.21.5':
+    optional: true
+
   '@esbuild/aix-ppc64@0.25.12':
     optional: true
 
-  '@esbuild/android-arm64@0.18.20':
+  '@esbuild/android-arm64@0.21.5':
     optional: true
 
   '@esbuild/android-arm64@0.25.12':
     optional: true
 
-  '@esbuild/android-arm@0.18.20':
+  '@esbuild/android-arm@0.21.5':
     optional: true
 
   '@esbuild/android-arm@0.25.12':
     optional: true
 
-  '@esbuild/android-x64@0.18.20':
+  '@esbuild/android-x64@0.21.5':
     optional: true
 
   '@esbuild/android-x64@0.25.12':
     optional: true
 
-  '@esbuild/darwin-arm64@0.18.20':
+  '@esbuild/darwin-arm64@0.21.5':
     optional: true
 
   '@esbuild/darwin-arm64@0.25.12':
     optional: true
 
-  '@esbuild/darwin-x64@0.18.20':
+  '@esbuild/darwin-x64@0.21.5':
     optional: true
 
   '@esbuild/darwin-x64@0.25.12':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.18.20':
+  '@esbuild/freebsd-arm64@0.21.5':
     optional: true
 
   '@esbuild/freebsd-arm64@0.25.12':
     optional: true
 
-  '@esbuild/freebsd-x64@0.18.20':
+  '@esbuild/freebsd-x64@0.21.5':
     optional: true
 
   '@esbuild/freebsd-x64@0.25.12':
     optional: true
 
-  '@esbuild/linux-arm64@0.18.20':
+  '@esbuild/linux-arm64@0.21.5':
     optional: true
 
   '@esbuild/linux-arm64@0.25.12':
     optional: true
 
-  '@esbuild/linux-arm@0.18.20':
+  '@esbuild/linux-arm@0.21.5':
     optional: true
 
   '@esbuild/linux-arm@0.25.12':
     optional: true
 
-  '@esbuild/linux-ia32@0.18.20':
+  '@esbuild/linux-ia32@0.21.5':
     optional: true
 
   '@esbuild/linux-ia32@0.25.12':
     optional: true
 
-  '@esbuild/linux-loong64@0.18.20':
+  '@esbuild/linux-loong64@0.21.5':
     optional: true
 
   '@esbuild/linux-loong64@0.25.12':
     optional: true
 
-  '@esbuild/linux-mips64el@0.18.20':
+  '@esbuild/linux-mips64el@0.21.5':
     optional: true
 
   '@esbuild/linux-mips64el@0.25.12':
     optional: true
 
-  '@esbuild/linux-ppc64@0.18.20':
+  '@esbuild/linux-ppc64@0.21.5':
     optional: true
 
   '@esbuild/linux-ppc64@0.25.12':
     optional: true
 
-  '@esbuild/linux-riscv64@0.18.20':
+  '@esbuild/linux-riscv64@0.21.5':
     optional: true
 
   '@esbuild/linux-riscv64@0.25.12':
     optional: true
 
-  '@esbuild/linux-s390x@0.18.20':
+  '@esbuild/linux-s390x@0.21.5':
     optional: true
 
   '@esbuild/linux-s390x@0.25.12':
     optional: true
 
-  '@esbuild/linux-x64@0.18.20':
+  '@esbuild/linux-x64@0.21.5':
     optional: true
 
   '@esbuild/linux-x64@0.25.12':
@@ -8511,7 +8707,7 @@ snapshots:
   '@esbuild/netbsd-arm64@0.25.12':
     optional: true
 
-  '@esbuild/netbsd-x64@0.18.20':
+  '@esbuild/netbsd-x64@0.21.5':
     optional: true
 
   '@esbuild/netbsd-x64@0.25.12':
@@ -8520,7 +8716,7 @@ snapshots:
   '@esbuild/openbsd-arm64@0.25.12':
     optional: true
 
-  '@esbuild/openbsd-x64@0.18.20':
+  '@esbuild/openbsd-x64@0.21.5':
     optional: true
 
   '@esbuild/openbsd-x64@0.25.12':
@@ -8529,25 +8725,25 @@ snapshots:
   '@esbuild/openharmony-arm64@0.25.12':
     optional: true
 
-  '@esbuild/sunos-x64@0.18.20':
+  '@esbuild/sunos-x64@0.21.5':
     optional: true
 
   '@esbuild/sunos-x64@0.25.12':
     optional: true
 
-  '@esbuild/win32-arm64@0.18.20':
+  '@esbuild/win32-arm64@0.21.5':
     optional: true
 
   '@esbuild/win32-arm64@0.25.12':
     optional: true
 
-  '@esbuild/win32-ia32@0.18.20':
+  '@esbuild/win32-ia32@0.21.5':
     optional: true
 
   '@esbuild/win32-ia32@0.25.12':
     optional: true
 
-  '@esbuild/win32-x64@0.18.20':
+  '@esbuild/win32-x64@0.21.5':
     optional: true
 
   '@esbuild/win32-x64@0.25.12':
@@ -8827,12 +9023,12 @@ snapshots:
       '@types/yargs': 17.0.34
       chalk: 4.1.2
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.5.0(typescript@5.9.3)(vite@4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))':
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.5.0(typescript@5.9.3)(vite@5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))':
     dependencies:
       glob: 10.4.5
       magic-string: 0.27.0
       react-docgen-typescript: 2.4.0(typescript@5.9.3)
-      vite: 4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
+      vite: 5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
     optionalDependencies:
       typescript: 5.9.3
 
@@ -8896,11 +9092,11 @@ snapshots:
       '@types/react': 18.3.26
       react: 18.3.1
 
-  '@mdx-js/rollup@2.3.0(rollup@3.29.5)':
+  '@mdx-js/rollup@2.3.0(rollup@4.60.4)':
     dependencies:
       '@mdx-js/mdx': 2.3.0
-      '@rollup/pluginutils': 5.3.0(rollup@3.29.5)
-      rollup: 3.29.5
+      '@rollup/pluginutils': 5.3.0(rollup@4.60.4)
+      rollup: 4.60.4
       source-map: 0.7.6
       vfile: 5.3.7
     transitivePeerDependencies:
@@ -9280,13 +9476,6 @@ snapshots:
       magic-string: 0.25.9
       rollup: 2.79.2
 
-  '@rollup/plugin-replace@5.0.7(rollup@3.29.5)':
-    dependencies:
-      '@rollup/pluginutils': 5.3.0(rollup@3.29.5)
-      magic-string: 0.30.21
-    optionalDependencies:
-      rollup: 3.29.5
-
   '@rollup/pluginutils@3.1.0(rollup@2.79.2)':
     dependencies:
       '@types/estree': 0.0.39
@@ -9294,13 +9483,88 @@ snapshots:
       picomatch: 2.3.1
       rollup: 2.79.2
 
-  '@rollup/pluginutils@5.3.0(rollup@3.29.5)':
+  '@rollup/pluginutils@5.3.0(rollup@4.60.4)':
     dependencies:
       '@types/estree': 1.0.8
       estree-walker: 2.0.2
       picomatch: 4.0.3
     optionalDependencies:
-      rollup: 3.29.5
+      rollup: 4.60.4
+
+  '@rollup/rollup-android-arm-eabi@4.60.4':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.60.4':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.60.4':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.60.4':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.60.4':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-musl@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-musl@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.60.4':
+    optional: true
+
+  '@rollup/rollup-openbsd-x64@4.60.4':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.60.4':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.60.4':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.60.4':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.60.4':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.60.4':
+    optional: true
 
   '@rooks/use-mutation-observer@4.11.2(react@18.3.1)':
     dependencies:
@@ -9505,13 +9769,13 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@storybook/builder-vite@8.6.14(storybook@8.6.14(prettier@3.6.2))(vite@4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))':
+  '@storybook/builder-vite@8.6.14(storybook@8.6.14(prettier@3.6.2))(vite@5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))':
     dependencies:
       '@storybook/csf-plugin': 8.6.14(storybook@8.6.14(prettier@3.6.2))
       browser-assert: 1.2.1
       storybook: 8.6.14(prettier@3.6.2)
       ts-dedent: 2.2.0
-      vite: 4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
+      vite: 5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
 
   '@storybook/components@8.6.14(storybook@8.6.14(prettier@3.6.2))':
     dependencies:
@@ -9586,11 +9850,11 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
       storybook: 8.6.14(prettier@3.6.2)
 
-  '@storybook/react-vite@8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.5)(storybook@8.6.14(prettier@3.6.2))(typescript@5.9.3)(vite@4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))':
+  '@storybook/react-vite@8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.60.4)(storybook@8.6.14(prettier@3.6.2))(typescript@5.9.3)(vite@5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))':
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.5.0(typescript@5.9.3)(vite@4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))
-      '@rollup/pluginutils': 5.3.0(rollup@3.29.5)
-      '@storybook/builder-vite': 8.6.14(storybook@8.6.14(prettier@3.6.2))(vite@4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.5.0(typescript@5.9.3)(vite@5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))
+      '@rollup/pluginutils': 5.3.0(rollup@4.60.4)
+      '@storybook/builder-vite': 8.6.14(storybook@8.6.14(prettier@3.6.2))(vite@5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))
       '@storybook/react': 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.6.2))(typescript@5.9.3)
       find-up: 5.0.0
       magic-string: 0.30.21
@@ -9600,7 +9864,7 @@ snapshots:
       resolve: 1.22.11
       storybook: 8.6.14(prettier@3.6.2)
       tsconfig-paths: 4.2.0
-      vite: 4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
+      vite: 5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
     optionalDependencies:
       '@storybook/test': 8.6.14(storybook@8.6.14(prettier@3.6.2))
     transitivePeerDependencies:
@@ -9679,7 +9943,7 @@ snapshots:
       magic-string: 0.25.9
       string.prototype.matchall: 4.0.12
 
-  '@svgr/babel-plugin-add-jsx-attribute@6.5.1(@babel/core@7.28.5)':
+  '@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.28.5)':
     dependencies:
       '@babel/core': 7.28.5
 
@@ -9691,59 +9955,60 @@ snapshots:
     dependencies:
       '@babel/core': 7.28.5
 
-  '@svgr/babel-plugin-replace-jsx-attribute-value@6.5.1(@babel/core@7.28.5)':
+  '@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0(@babel/core@7.28.5)':
     dependencies:
       '@babel/core': 7.28.5
 
-  '@svgr/babel-plugin-svg-dynamic-title@6.5.1(@babel/core@7.28.5)':
+  '@svgr/babel-plugin-svg-dynamic-title@8.0.0(@babel/core@7.28.5)':
     dependencies:
       '@babel/core': 7.28.5
 
-  '@svgr/babel-plugin-svg-em-dimensions@6.5.1(@babel/core@7.28.5)':
+  '@svgr/babel-plugin-svg-em-dimensions@8.0.0(@babel/core@7.28.5)':
     dependencies:
       '@babel/core': 7.28.5
 
-  '@svgr/babel-plugin-transform-react-native-svg@6.5.1(@babel/core@7.28.5)':
+  '@svgr/babel-plugin-transform-react-native-svg@8.1.0(@babel/core@7.28.5)':
     dependencies:
       '@babel/core': 7.28.5
 
-  '@svgr/babel-plugin-transform-svg-component@6.5.1(@babel/core@7.28.5)':
+  '@svgr/babel-plugin-transform-svg-component@8.0.0(@babel/core@7.28.5)':
     dependencies:
       '@babel/core': 7.28.5
 
-  '@svgr/babel-preset@6.5.1(@babel/core@7.28.5)':
+  '@svgr/babel-preset@8.1.0(@babel/core@7.28.5)':
     dependencies:
       '@babel/core': 7.28.5
-      '@svgr/babel-plugin-add-jsx-attribute': 6.5.1(@babel/core@7.28.5)
+      '@svgr/babel-plugin-add-jsx-attribute': 8.0.0(@babel/core@7.28.5)
       '@svgr/babel-plugin-remove-jsx-attribute': 8.0.0(@babel/core@7.28.5)
       '@svgr/babel-plugin-remove-jsx-empty-expression': 8.0.0(@babel/core@7.28.5)
-      '@svgr/babel-plugin-replace-jsx-attribute-value': 6.5.1(@babel/core@7.28.5)
-      '@svgr/babel-plugin-svg-dynamic-title': 6.5.1(@babel/core@7.28.5)
-      '@svgr/babel-plugin-svg-em-dimensions': 6.5.1(@babel/core@7.28.5)
-      '@svgr/babel-plugin-transform-react-native-svg': 6.5.1(@babel/core@7.28.5)
-      '@svgr/babel-plugin-transform-svg-component': 6.5.1(@babel/core@7.28.5)
+      '@svgr/babel-plugin-replace-jsx-attribute-value': 8.0.0(@babel/core@7.28.5)
+      '@svgr/babel-plugin-svg-dynamic-title': 8.0.0(@babel/core@7.28.5)
+      '@svgr/babel-plugin-svg-em-dimensions': 8.0.0(@babel/core@7.28.5)
+      '@svgr/babel-plugin-transform-react-native-svg': 8.1.0(@babel/core@7.28.5)
+      '@svgr/babel-plugin-transform-svg-component': 8.0.0(@babel/core@7.28.5)
 
-  '@svgr/core@6.5.1':
+  '@svgr/core@8.1.0(typescript@5.9.3)':
     dependencies:
       '@babel/core': 7.28.5
-      '@svgr/babel-preset': 6.5.1(@babel/core@7.28.5)
-      '@svgr/plugin-jsx': 6.5.1(@svgr/core@6.5.1)
+      '@svgr/babel-preset': 8.1.0(@babel/core@7.28.5)
       camelcase: 6.3.0
-      cosmiconfig: 7.1.0
+      cosmiconfig: 8.3.6(typescript@5.9.3)
+      snake-case: 3.0.4
     transitivePeerDependencies:
       - supports-color
+      - typescript
 
-  '@svgr/hast-util-to-babel-ast@6.5.1':
+  '@svgr/hast-util-to-babel-ast@8.0.0':
     dependencies:
       '@babel/types': 7.28.5
       entities: 4.5.0
 
-  '@svgr/plugin-jsx@6.5.1(@svgr/core@6.5.1)':
+  '@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0(typescript@5.9.3))':
     dependencies:
       '@babel/core': 7.28.5
-      '@svgr/babel-preset': 6.5.1(@babel/core@7.28.5)
-      '@svgr/core': 6.5.1
-      '@svgr/hast-util-to-babel-ast': 6.5.1
+      '@svgr/babel-preset': 8.1.0(@babel/core@7.28.5)
+      '@svgr/core': 8.1.0(typescript@5.9.3)
+      '@svgr/hast-util-to-babel-ast': 8.0.0
       svg-parser: 2.0.4
     transitivePeerDependencies:
       - supports-color
@@ -9944,12 +10209,6 @@ snapshots:
       '@types/node': 24.10.1
       '@types/responselike': 1.0.3
 
-  '@types/chai-subset@1.3.6(@types/chai@4.3.20)':
-    dependencies:
-      '@types/chai': 4.3.20
-
-  '@types/chai@4.3.20': {}
-
   '@types/d3-array@3.2.2': {}
 
   '@types/d3-axis@3.0.6':
@@ -10290,7 +10549,7 @@ snapshots:
 
   '@ungap/structured-clone@1.3.0': {}
 
-  '@vitejs/plugin-react@4.7.0(vite@4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))':
+  '@vitejs/plugin-react@4.7.0(vite@5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))':
     dependencies:
       '@babel/core': 7.28.5
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5)
@@ -10298,14 +10557,14 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.27
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
-      vite: 4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
+      vite: 5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/expect@0.34.6':
+  '@vitest/expect@1.6.1':
     dependencies:
-      '@vitest/spy': 0.34.6
-      '@vitest/utils': 0.34.6
+      '@vitest/spy': 1.6.1
+      '@vitest/utils': 1.6.1
       chai: 4.5.0
 
   '@vitest/expect@2.0.5':
@@ -10323,19 +10582,19 @@ snapshots:
     dependencies:
       tinyrainbow: 1.2.0
 
-  '@vitest/runner@0.34.6':
+  '@vitest/runner@1.6.1':
     dependencies:
-      '@vitest/utils': 0.34.6
-      p-limit: 4.0.0
+      '@vitest/utils': 1.6.1
+      p-limit: 5.0.0
       pathe: 1.1.2
 
-  '@vitest/snapshot@0.34.6':
+  '@vitest/snapshot@1.6.1':
     dependencies:
       magic-string: 0.30.21
       pathe: 1.1.2
       pretty-format: 29.7.0
 
-  '@vitest/spy@0.34.6':
+  '@vitest/spy@1.6.1':
     dependencies:
       tinyspy: 2.2.1
 
@@ -10343,9 +10602,10 @@ snapshots:
     dependencies:
       tinyspy: 3.0.2
 
-  '@vitest/utils@0.34.6':
+  '@vitest/utils@1.6.1':
     dependencies:
       diff-sequences: 29.6.3
+      estree-walker: 3.0.3
       loupe: 2.3.7
       pretty-format: 29.7.0
 
@@ -11085,6 +11345,15 @@ snapshots:
       path-type: 4.0.0
       yaml: 1.10.2
 
+  cosmiconfig@8.3.6(typescript@5.9.3):
+    dependencies:
+      import-fresh: 3.3.1
+      js-yaml: 4.1.1
+      parse-json: 5.2.0
+      path-type: 4.0.0
+    optionalDependencies:
+      typescript: 5.9.3
+
   create-jest@29.7.0(@types/node@24.10.1)(babel-plugin-macros@3.1.0):
     dependencies:
       '@jest/types': 29.6.3
@@ -11459,6 +11728,11 @@ snapshots:
       domelementtype: 2.3.0
       domhandler: 5.0.3
 
+  dot-case@3.0.4:
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.8.1
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -11650,30 +11924,31 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  esbuild@0.18.20:
+  esbuild@0.21.5:
     optionalDependencies:
-      '@esbuild/android-arm': 0.18.20
-      '@esbuild/android-arm64': 0.18.20
-      '@esbuild/android-x64': 0.18.20
-      '@esbuild/darwin-arm64': 0.18.20
-      '@esbuild/darwin-x64': 0.18.20
-      '@esbuild/freebsd-arm64': 0.18.20
-      '@esbuild/freebsd-x64': 0.18.20
-      '@esbuild/linux-arm': 0.18.20
-      '@esbuild/linux-arm64': 0.18.20
-      '@esbuild/linux-ia32': 0.18.20
-      '@esbuild/linux-loong64': 0.18.20
-      '@esbuild/linux-mips64el': 0.18.20
-      '@esbuild/linux-ppc64': 0.18.20
-      '@esbuild/linux-riscv64': 0.18.20
-      '@esbuild/linux-s390x': 0.18.20
-      '@esbuild/linux-x64': 0.18.20
-      '@esbuild/netbsd-x64': 0.18.20
-      '@esbuild/openbsd-x64': 0.18.20
-      '@esbuild/sunos-x64': 0.18.20
-      '@esbuild/win32-arm64': 0.18.20
-      '@esbuild/win32-ia32': 0.18.20
-      '@esbuild/win32-x64': 0.18.20
+      '@esbuild/aix-ppc64': 0.21.5
+      '@esbuild/android-arm': 0.21.5
+      '@esbuild/android-arm64': 0.21.5
+      '@esbuild/android-x64': 0.21.5
+      '@esbuild/darwin-arm64': 0.21.5
+      '@esbuild/darwin-x64': 0.21.5
+      '@esbuild/freebsd-arm64': 0.21.5
+      '@esbuild/freebsd-x64': 0.21.5
+      '@esbuild/linux-arm': 0.21.5
+      '@esbuild/linux-arm64': 0.21.5
+      '@esbuild/linux-ia32': 0.21.5
+      '@esbuild/linux-loong64': 0.21.5
+      '@esbuild/linux-mips64el': 0.21.5
+      '@esbuild/linux-ppc64': 0.21.5
+      '@esbuild/linux-riscv64': 0.21.5
+      '@esbuild/linux-s390x': 0.21.5
+      '@esbuild/linux-x64': 0.21.5
+      '@esbuild/netbsd-x64': 0.21.5
+      '@esbuild/openbsd-x64': 0.21.5
+      '@esbuild/sunos-x64': 0.21.5
+      '@esbuild/win32-arm64': 0.21.5
+      '@esbuild/win32-ia32': 0.21.5
+      '@esbuild/win32-x64': 0.21.5
 
   esbuild@0.25.12:
     optionalDependencies:
@@ -11900,6 +12175,18 @@ snapshots:
       signal-exit: 3.0.7
       strip-final-newline: 2.0.0
 
+  execa@8.0.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      get-stream: 8.0.1
+      human-signals: 5.0.0
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.3.0
+      onetime: 6.0.0
+      signal-exit: 4.1.0
+      strip-final-newline: 3.0.0
+
   exit@0.1.2: {}
 
   expand-tilde@1.2.2:
@@ -11950,6 +12237,10 @@ snapshots:
     dependencies:
       bser: 2.1.1
 
+  fdir@6.5.0(picomatch@4.0.4):
+    optionalDependencies:
+      picomatch: 4.0.4
+
   file-entry-cache@6.0.1:
     dependencies:
       flat-cache: 3.2.0
@@ -12156,6 +12447,8 @@ snapshots:
 
   get-stream@6.0.1: {}
 
+  get-stream@8.0.1: {}
+
   get-symbol-description@1.1.0:
     dependencies:
       call-bound: 1.0.4
@@ -12410,6 +12703,8 @@ snapshots:
 
   human-signals@2.1.0: {}
 
+  human-signals@5.0.0: {}
+
   hyphenate-style-name@1.1.0: {}
 
   i18next-browser-languagedetector@8.2.0:
@@ -12685,6 +12980,8 @@ snapshots:
 
   is-stream@2.0.1: {}
 
+  is-stream@3.0.0: {}
+
   is-string@1.1.1:
     dependencies:
       call-bound: 1.0.4
@@ -13207,6 +13504,8 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
+  js-tokens@9.0.1: {}
+
   js-yaml@3.14.1:
     dependencies:
       argparse: 1.0.10
@@ -13404,7 +13703,10 @@ snapshots:
       emojis-list: 3.0.0
       json5: 2.2.3
 
-  local-pkg@0.4.3: {}
+  local-pkg@0.5.1:
+    dependencies:
+      mlly: 1.8.0
+      pkg-types: 1.3.1
 
   locate-path@5.0.0:
     dependencies:
@@ -13451,6 +13753,10 @@ snapshots:
 
   loupe@3.2.1: {}
 
+  lower-case@2.0.2:
+    dependencies:
+      tslib: 2.8.1
+
   lowercase-keys@2.0.0: {}
 
   lru-cache@10.4.3: {}
@@ -14134,6 +14440,8 @@ snapshots:
 
   mimic-fn@2.1.0: {}
 
+  mimic-fn@4.0.0: {}
+
   mimic-response@1.0.1: {}
 
   mimic-response@3.1.0: {}
@@ -14190,6 +14498,11 @@ snapshots:
 
   next-tick@1.1.0: {}
 
+  no-case@3.0.4:
+    dependencies:
+      lower-case: 2.0.2
+      tslib: 2.8.1
+
   node-addon-api@7.1.1:
     optional: true
 
@@ -14237,6 +14550,10 @@ snapshots:
     dependencies:
       path-key: 3.1.1
 
+  npm-run-path@5.3.0:
+    dependencies:
+      path-key: 4.0.0
+
   nth-check@2.1.1:
     dependencies:
       boolbase: 1.0.0
@@ -14317,6 +14634,10 @@ snapshots:
     dependencies:
       mimic-fn: 2.1.0
 
+  onetime@6.0.0:
+    dependencies:
+      mimic-fn: 4.0.0
+
   open@8.4.2:
     dependencies:
       define-lazy-prop: 2.0.0
@@ -14354,7 +14675,7 @@ snapshots:
     dependencies:
       yocto-queue: 0.1.0
 
-  p-limit@4.0.0:
+  p-limit@5.0.0:
     dependencies:
       yocto-queue: 1.2.2
 
@@ -14434,6 +14755,8 @@ snapshots:
 
   path-key@3.1.1: {}
 
+  path-key@4.0.0: {}
+
   path-parse@1.0.7: {}
 
   path-posix@1.0.0: {}
@@ -14471,6 +14794,8 @@ snapshots:
 
   picomatch@4.0.3: {}
 
+  picomatch@4.0.4: {}
+
   pidtree@0.5.0: {}
 
   pirates@4.0.7: {}
@@ -15060,8 +15385,35 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
-  rollup@3.29.5:
+  rollup@4.60.4:
+    dependencies:
+      '@types/estree': 1.0.8
     optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.60.4
+      '@rollup/rollup-android-arm64': 4.60.4
+      '@rollup/rollup-darwin-arm64': 4.60.4
+      '@rollup/rollup-darwin-x64': 4.60.4
+      '@rollup/rollup-freebsd-arm64': 4.60.4
+      '@rollup/rollup-freebsd-x64': 4.60.4
+      '@rollup/rollup-linux-arm-gnueabihf': 4.60.4
+      '@rollup/rollup-linux-arm-musleabihf': 4.60.4
+      '@rollup/rollup-linux-arm64-gnu': 4.60.4
+      '@rollup/rollup-linux-arm64-musl': 4.60.4
+      '@rollup/rollup-linux-loong64-gnu': 4.60.4
+      '@rollup/rollup-linux-loong64-musl': 4.60.4
+      '@rollup/rollup-linux-ppc64-gnu': 4.60.4
+      '@rollup/rollup-linux-ppc64-musl': 4.60.4
+      '@rollup/rollup-linux-riscv64-gnu': 4.60.4
+      '@rollup/rollup-linux-riscv64-musl': 4.60.4
+      '@rollup/rollup-linux-s390x-gnu': 4.60.4
+      '@rollup/rollup-linux-x64-gnu': 4.60.4
+      '@rollup/rollup-linux-x64-musl': 4.60.4
+      '@rollup/rollup-openbsd-x64': 4.60.4
+      '@rollup/rollup-openharmony-arm64': 4.60.4
+      '@rollup/rollup-win32-arm64-msvc': 4.60.4
+      '@rollup/rollup-win32-ia32-msvc': 4.60.4
+      '@rollup/rollup-win32-x64-gnu': 4.60.4
+      '@rollup/rollup-win32-x64-msvc': 4.60.4
       fsevents: 2.3.3
 
   rrule@2.7.2:
@@ -15241,6 +15593,11 @@ snapshots:
       ansi-styles: 6.2.3
       is-fullwidth-code-point: 4.0.0
 
+  snake-case@3.0.4:
+    dependencies:
+      dot-case: 3.0.4
+      tslib: 2.8.1
+
   sort-keys@4.2.0:
     dependencies:
       is-plain-obj: 2.1.0
@@ -15423,6 +15780,8 @@ snapshots:
 
   strip-final-newline@2.0.0: {}
 
+  strip-final-newline@3.0.0: {}
+
   strip-indent@3.0.0:
     dependencies:
       min-indent: 1.0.1
@@ -15431,9 +15790,9 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
-  strip-literal@1.3.0:
+  strip-literal@2.1.1:
     dependencies:
-      acorn: 8.15.0
+      js-tokens: 9.0.1
 
   style-to-object@0.4.4:
     dependencies:
@@ -15549,7 +15908,12 @@ snapshots:
 
   tinybench@2.9.0: {}
 
-  tinypool@0.7.0: {}
+  tinyglobby@0.2.16:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+
+  tinypool@0.8.4: {}
 
   tinyrainbow@1.2.0: {}
 
@@ -15943,100 +16307,98 @@ snapshots:
       remove-trailing-separator: 1.1.0
       replace-ext: 1.0.1
 
-  vite-node@0.34.6(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1):
+  vite-node@1.6.1(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3(supports-color@9.4.0)
-      mlly: 1.8.0
       pathe: 1.1.2
       picocolors: 1.1.1
-      vite: 4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
+      vite: 5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
     transitivePeerDependencies:
       - '@types/node'
       - less
       - lightningcss
       - sass
+      - sass-embedded
       - stylus
       - sugarss
       - supports-color
       - terser
 
-  vite-plugin-istanbul@4.1.0(vite@4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)):
+  vite-plugin-istanbul@5.0.0(vite@5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)):
     dependencies:
       '@istanbuljs/load-nyc-config': 1.1.0
+      espree: 9.6.1
       istanbul-lib-instrument: 5.2.1
       picocolors: 1.1.1
       test-exclude: 6.0.0
-      vite: 4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
+      vite: 5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-pwa@0.14.7(vite@4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))(workbox-build@6.6.0(@types/babel__core@7.20.5))(workbox-window@6.6.0):
+  vite-plugin-pwa@0.21.2(vite@5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1))(workbox-build@6.6.0(@types/babel__core@7.20.5))(workbox-window@6.6.0):
     dependencies:
-      '@rollup/plugin-replace': 5.0.7(rollup@3.29.5)
       debug: 4.4.3(supports-color@9.4.0)
-      fast-glob: 3.3.3
       pretty-bytes: 6.1.1
-      rollup: 3.29.5
-      vite: 4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
+      tinyglobby: 0.2.16
+      vite: 5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
       workbox-build: 6.6.0(@types/babel__core@7.20.5)
       workbox-window: 6.6.0
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-svgr@2.4.0(rollup@3.29.5)(vite@4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)):
+  vite-plugin-svgr@4.5.0(rollup@4.60.4)(typescript@5.9.3)(vite@5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)):
     dependencies:
-      '@rollup/pluginutils': 5.3.0(rollup@3.29.5)
-      '@svgr/core': 6.5.1
-      vite: 4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
+      '@rollup/pluginutils': 5.3.0(rollup@4.60.4)
+      '@svgr/core': 8.1.0(typescript@5.9.3)
+      '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.9.3))
+      vite: 5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
     transitivePeerDependencies:
       - rollup
       - supports-color
+      - typescript
 
-  vite@4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1):
+  vite@5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1):
     dependencies:
-      esbuild: 0.18.20
+      esbuild: 0.21.5
       postcss: 8.5.6
-      rollup: 3.29.5
+      rollup: 4.60.4
     optionalDependencies:
       '@types/node': 24.10.1
       fsevents: 2.3.3
       sass: 1.94.0
       terser: 5.44.1
 
-  vitest@0.34.6(happy-dom@15.11.7)(playwright@1.56.1)(sass@1.94.0)(terser@5.44.1):
+  vitest@1.6.1(@types/node@24.10.1)(happy-dom@15.11.7)(sass@1.94.0)(terser@5.44.1):
     dependencies:
-      '@types/chai': 4.3.20
-      '@types/chai-subset': 1.3.6(@types/chai@4.3.20)
-      '@types/node': 24.10.1
-      '@vitest/expect': 0.34.6
-      '@vitest/runner': 0.34.6
-      '@vitest/snapshot': 0.34.6
-      '@vitest/spy': 0.34.6
-      '@vitest/utils': 0.34.6
-      acorn: 8.15.0
+      '@vitest/expect': 1.6.1
+      '@vitest/runner': 1.6.1
+      '@vitest/snapshot': 1.6.1
+      '@vitest/spy': 1.6.1
+      '@vitest/utils': 1.6.1
       acorn-walk: 8.3.4
-      cac: 6.7.14
       chai: 4.5.0
       debug: 4.4.3(supports-color@9.4.0)
-      local-pkg: 0.4.3
+      execa: 8.0.1
+      local-pkg: 0.5.1
       magic-string: 0.30.21
       pathe: 1.1.2
       picocolors: 1.1.1
       std-env: 3.10.0
-      strip-literal: 1.3.0
+      strip-literal: 2.1.1
       tinybench: 2.9.0
-      tinypool: 0.7.0
-      vite: 4.5.14(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
-      vite-node: 0.34.6(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
+      tinypool: 0.8.4
+      vite: 5.4.21(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
+      vite-node: 1.6.1(@types/node@24.10.1)(sass@1.94.0)(terser@5.44.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
+      '@types/node': 24.10.1
       happy-dom: 15.11.7
-      playwright: 1.56.1
     transitivePeerDependencies:
       - less
       - lightningcss
       - sass
+      - sass-embedded
       - stylus
       - sugarss
       - supports-color
diff --git a/packages/webapp/src/components/AddSensors/Partners.tsx b/packages/webapp/src/components/AddSensors/Partners.tsx
index fef004c967..a7a201dfec 100644
--- a/packages/webapp/src/components/AddSensors/Partners.tsx
+++ b/packages/webapp/src/components/AddSensors/Partners.tsx
@@ -22,7 +22,7 @@ import Input, { getInputErrors } from '../Form/Input';
 import InputBaseLabel from '../Form/InputBase/InputBaseLabel';
 import { Main } from '../Typography';
 import { PARTNERS } from '../../containers/AddSensors/constants';
-import { ReactComponent as ExternalLinkIcon } from '../../assets/images/icon_external_link.svg';
+import ExternalLinkIcon from '../../assets/images/icon_external_link.svg?react';
 import { AddSensorsFormFields, FarmAddonField, PARTNER } from '../../containers/AddSensors/types';
 import styles from './styles.module.scss';
 import { AddonPartner } from '../../types';
diff --git a/packages/webapp/src/components/Animals/AddAnimalsSummaryCard/index.tsx b/packages/webapp/src/components/Animals/AddAnimalsSummaryCard/index.tsx
index 7b75626069..17b462a4b8 100644
--- a/packages/webapp/src/components/Animals/AddAnimalsSummaryCard/index.tsx
+++ b/packages/webapp/src/components/Animals/AddAnimalsSummaryCard/index.tsx
@@ -16,8 +16,8 @@
 import { useTranslation } from 'react-i18next';
 import styles from './styles.module.scss';
 import { Title, Main } from '../../Typography';
-import { ReactComponent as RelaxedFarmer } from '../../../assets/images/animals/relaxed-farmer.svg';
-import { ReactComponent as ChevronRight } from '../../../assets/images/buttons/chevron-right.svg';
+import RelaxedFarmer from '../../../assets/images/animals/relaxed-farmer.svg?react';
+import ChevronRight from '../../../assets/images/buttons/chevron-right.svg?react';
 import Button from '../../Form/Button';
 import { IconSummary } from './IconSummary';
 import { AnimalSummary, BatchSummary } from './types';
diff --git a/packages/webapp/src/components/Animals/RemoveAnimalsModal/index.tsx b/packages/webapp/src/components/Animals/RemoveAnimalsModal/index.tsx
index 471107a2a5..16ade80d71 100644
--- a/packages/webapp/src/components/Animals/RemoveAnimalsModal/index.tsx
+++ b/packages/webapp/src/components/Animals/RemoveAnimalsModal/index.tsx
@@ -21,8 +21,8 @@ import { Controller, useForm, SubmitHandler } from 'react-hook-form';
 import { useTheme, useMediaQuery } from '@mui/material';
 import clsx from 'clsx';
 import Input, { getInputErrors } from '../../Form/Input';
-import { ReactComponent as WarningIcon } from '../../../assets/images/warning.svg';
-import { ReactComponent as CheckIcon } from '../../../assets/images/check-circle.svg';
+import WarningIcon from '../../../assets/images/warning.svg?react';
+import CheckIcon from '../../../assets/images/check-circle.svg?react';
 import { useTranslation } from 'react-i18next';
 import { getLocalDateInYYYYDDMM } from '../../../util/date';
 import { useGetAnimalRemovalReasonsQuery } from '../../../store/api/apiSlice';
diff --git a/packages/webapp/src/components/Button/ClearFiltersButton/index.tsx b/packages/webapp/src/components/Button/ClearFiltersButton/index.tsx
index bb9987a9e5..9dab957f13 100644
--- a/packages/webapp/src/components/Button/ClearFiltersButton/index.tsx
+++ b/packages/webapp/src/components/Button/ClearFiltersButton/index.tsx
@@ -15,7 +15,7 @@
 
 import { useTranslation } from 'react-i18next';
 import TextButton from '../../Form/Button/TextButton';
-import { ReactComponent as ClearFilterIcon } from '../../../assets/images/clear-filters.svg';
+import ClearFilterIcon from '../../../assets/images/clear-filters.svg?react';
 import styles from './styles.module.scss';
 
 export enum ClearFiltersButtonType {
diff --git a/packages/webapp/src/components/Card/NewReleaseCard/NewReleaseCard.jsx b/packages/webapp/src/components/Card/NewReleaseCard/NewReleaseCard.jsx
index 7c9eaa9bd1..51ba2c3696 100644
--- a/packages/webapp/src/components/Card/NewReleaseCard/NewReleaseCard.jsx
+++ b/packages/webapp/src/components/Card/NewReleaseCard/NewReleaseCard.jsx
@@ -1,5 +1,5 @@
 import Card from '../index';
-import { ReactComponent as Star } from '../../../assets/images/signUp/new_feature.svg';
+import Star from '../../../assets/images/signUp/new_feature.svg?react';
 import { Semibold, Text } from '../../Typography';
 import typography from '../../Typography/typography.module.scss';
 import styles from './styles.module.scss';
diff --git a/packages/webapp/src/components/Card/NotificationCard/NotificationCard.jsx b/packages/webapp/src/components/Card/NotificationCard/NotificationCard.jsx
index d32fa88f98..631ce61170 100644
--- a/packages/webapp/src/components/Card/NotificationCard/NotificationCard.jsx
+++ b/packages/webapp/src/components/Card/NotificationCard/NotificationCard.jsx
@@ -4,7 +4,7 @@ import cardStyles from '../card.module.scss';
 import styles from './styles.module.scss';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
-import { ReactComponent as AlertIcon } from '../../../assets/images/alert.svg';
+import AlertIcon from '../../../assets/images/alert.svg?react';
 import getTaskTypeIcon from '../../util/getTaskTypeIcon';
 import getNotificationTypeIcon from '../../util/getNotificationTypeIcon';
 import { getLanguageFromLocalStorage } from '../../../util/getLanguageFromLocalStorage';
diff --git a/packages/webapp/src/components/CardWithStatus/ManagementPlanCard/ManagementPlanCard.jsx b/packages/webapp/src/components/CardWithStatus/ManagementPlanCard/ManagementPlanCard.jsx
index 7543d6f2cd..b5ab758c1f 100644
--- a/packages/webapp/src/components/CardWithStatus/ManagementPlanCard/ManagementPlanCard.jsx
+++ b/packages/webapp/src/components/CardWithStatus/ManagementPlanCard/ManagementPlanCard.jsx
@@ -1,6 +1,6 @@
 import { CardWithStatus } from '../index';
 import styles from './styles.module.scss';
-import { ReactComponent as CalendarIcon } from '../../../assets/images/task/Calendar.svg';
+import CalendarIcon from '../../../assets/images/task/Calendar.svg?react';
 import clsx from 'clsx';
 import React from 'react';
 import { getManagementPlanCardDate } from '../../../util/moment';
diff --git a/packages/webapp/src/components/CardWithStatus/StatusLabel/index.tsx b/packages/webapp/src/components/CardWithStatus/StatusLabel/index.tsx
index c0270cd184..e30731af20 100644
--- a/packages/webapp/src/components/CardWithStatus/StatusLabel/index.tsx
+++ b/packages/webapp/src/components/CardWithStatus/StatusLabel/index.tsx
@@ -16,7 +16,7 @@
 import { makeStyles } from '@mui/styles';
 import { colors } from '../../../assets/theme';
 import { Link } from 'react-router-dom';
-import { ReactComponent as ExternalLinkIcon } from '../../../assets/images/icon_external_link.svg';
+import ExternalLinkIcon from '../../../assets/images/icon_external_link.svg?react';
 import styles from './styles.module.scss';
 import clsx from 'clsx';
 import { HTMLAttributes } from 'react';
diff --git a/packages/webapp/src/components/CardWithStatus/TaskCard/TaskCard.jsx b/packages/webapp/src/components/CardWithStatus/TaskCard/TaskCard.jsx
index 052081f44c..174764eac4 100644
--- a/packages/webapp/src/components/CardWithStatus/TaskCard/TaskCard.jsx
+++ b/packages/webapp/src/components/CardWithStatus/TaskCard/TaskCard.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import { ReactComponent as CalendarIcon } from '../../../assets/images/task/Calendar.svg';
-import { ReactComponent as UnassignedIcon } from '../../../assets/images/task/Unassigned.svg';
+import CalendarIcon from '../../../assets/images/task/Calendar.svg?react';
+import UnassignedIcon from '../../../assets/images/task/Unassigned.svg?react';
 import styles from './styles.module.scss';
 
 import getTaskTypeIcon from '../../util/getTaskTypeIcon';
diff --git a/packages/webapp/src/components/CertificationSurvey/RegisteredCertifierNoQuestions/index.jsx b/packages/webapp/src/components/CertificationSurvey/RegisteredCertifierNoQuestions/index.jsx
index 282af0c096..52a9982cb5 100644
--- a/packages/webapp/src/components/CertificationSurvey/RegisteredCertifierNoQuestions/index.jsx
+++ b/packages/webapp/src/components/CertificationSurvey/RegisteredCertifierNoQuestions/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Main, Semibold } from '../../Typography';
 import { colors } from '../../../assets/theme';
-import { ReactComponent as PostSurveySplash } from '../../../assets/images/certification/CompleteSurveySplash.svg';
+import PostSurveySplash from '../../../assets/images/certification/CompleteSurveySplash.svg?react';
 
 const RegisteredCertifierNoQuestionsSurvey = ({ email }) => {
   const { t } = useTranslation();
diff --git a/packages/webapp/src/components/CertificationSurvey/RegisteredCertifierQuestions/index.jsx b/packages/webapp/src/components/CertificationSurvey/RegisteredCertifierQuestions/index.jsx
index e00712a07e..676e3093dd 100644
--- a/packages/webapp/src/components/CertificationSurvey/RegisteredCertifierQuestions/index.jsx
+++ b/packages/webapp/src/components/CertificationSurvey/RegisteredCertifierQuestions/index.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Info, Main, Semibold } from '../../Typography';
 import { colors } from '../../../assets/theme';
-import { ReactComponent as PostSurveySplash } from '../../../assets/images/certification/CompleteSurveySplash.svg';
+import PostSurveySplash from '../../../assets/images/certification/CompleteSurveySplash.svg?react';
 const surveyGroupId = import.meta.env.VITE_SURVEY_GROUP_ID;
 
 const RegisteredCertifierQuestionsSurvey = ({
diff --git a/packages/webapp/src/components/ChooseFarm/ChooseFarmMenu/ChooseFarmMenuItem/index.jsx b/packages/webapp/src/components/ChooseFarm/ChooseFarmMenu/ChooseFarmMenuItem/index.jsx
index 7fabcb0763..97ae5d44d9 100644
--- a/packages/webapp/src/components/ChooseFarm/ChooseFarmMenu/ChooseFarmMenuItem/index.jsx
+++ b/packages/webapp/src/components/ChooseFarm/ChooseFarmMenu/ChooseFarmMenuItem/index.jsx
@@ -3,7 +3,7 @@ import styles from './chooseFarmMenuItem.module.scss';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import Card from '../../../Card';
-import { ReactComponent as EmailIcon } from '../../../../assets/images/chooseFarm/emailIcon.svg';
+import EmailIcon from '../../../../assets/images/chooseFarm/emailIcon.svg?react';
 
 const ChooseFarmMenuItem = ({
   color = 'secondary',
diff --git a/packages/webapp/src/components/Crop/CropHeader.jsx b/packages/webapp/src/components/Crop/CropHeader.jsx
index 970be436ea..4b6956135e 100644
--- a/packages/webapp/src/components/Crop/CropHeader.jsx
+++ b/packages/webapp/src/components/Crop/CropHeader.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Label, Text, Title } from '../Typography';
-import { ReactComponent as Back } from '../../assets/images/managementPlans/back.svg';
+import Back from '../../assets/images/managementPlans/back.svg?react';
 import { useTranslation } from 'react-i18next';
 import styles from './styles.module.scss';
 import clsx from 'clsx';
diff --git a/packages/webapp/src/components/Crop/Detail.jsx b/packages/webapp/src/components/Crop/Detail.jsx
index 5842a1fa14..82579ab116 100644
--- a/packages/webapp/src/components/Crop/Detail.jsx
+++ b/packages/webapp/src/components/Crop/Detail.jsx
@@ -3,7 +3,7 @@ import RouterTab from '../RouterTab';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import Button from '../Form/Button';
-import { ReactComponent as Leaf } from '../../assets/images/signUp/leaf.svg';
+import Leaf from '../../assets/images/signUp/leaf.svg?react';
 import { Main, Title } from '../Typography';
 import { useForm } from 'react-hook-form';
 import RadioGroup from '../Form/RadioGroup';
diff --git a/packages/webapp/src/components/Crop/ManagementDetail/ManagementPlanTasks.jsx b/packages/webapp/src/components/Crop/ManagementDetail/ManagementPlanTasks.jsx
index 1dc1719d54..e1ead80667 100644
--- a/packages/webapp/src/components/Crop/ManagementDetail/ManagementPlanTasks.jsx
+++ b/packages/webapp/src/components/Crop/ManagementDetail/ManagementPlanTasks.jsx
@@ -11,7 +11,7 @@ import IncompleteTaskModal from '../../Modals/IncompleteTaskModal';
 import RouterTab from '../../RouterTab';
 import DeleteBox from '../../Task/TaskReadOnly/DeleteBox';
 import { FiAlertTriangle } from 'react-icons/fi';
-import { ReactComponent as TrashIcon } from '../../../assets/images/document/trash.svg';
+import TrashIcon from '../../../assets/images/document/trash.svg?react';
 import { BsThreeDotsVertical } from 'react-icons/bs';
 import { ClickAwayListener } from '@mui/base/ClickAwayListener';
 import navStyles from '@navStyles';
diff --git a/packages/webapp/src/components/Crop/PlantingLocation/index.jsx b/packages/webapp/src/components/Crop/PlantingLocation/index.jsx
index 7816fb9b6f..909e0415c8 100644
--- a/packages/webapp/src/components/Crop/PlantingLocation/index.jsx
+++ b/packages/webapp/src/components/Crop/PlantingLocation/index.jsx
@@ -6,8 +6,8 @@ import LocationPicker from '../../LocationPicker/SingleLocationPicker';
 import { useTranslation } from 'react-i18next';
 import Layout from '../../Layout';
 import MultiStepPageTitle from '../../PageTitle/MultiStepPageTitle';
-import { ReactComponent as Cross } from '../../../assets/images/map/cross.svg';
-import { ReactComponent as LocationPin } from '../../../assets/images/map/location.svg';
+import Cross from '../../../assets/images/map/cross.svg?react';
+import LocationPin from '../../../assets/images/map/location.svg?react';
 import Checkbox from '../../Form/Checkbox';
 import { useForm } from 'react-hook-form';
 import { cloneObject } from '../../../util';
diff --git a/packages/webapp/src/components/Crop/PlantingMethod/PurePlantingMethod.jsx b/packages/webapp/src/components/Crop/PlantingMethod/PurePlantingMethod.jsx
index d7c106c456..5cb6ceb31a 100644
--- a/packages/webapp/src/components/Crop/PlantingMethod/PurePlantingMethod.jsx
+++ b/packages/webapp/src/components/Crop/PlantingMethod/PurePlantingMethod.jsx
@@ -4,11 +4,11 @@ import { useTranslation } from 'react-i18next';
 import { Main } from '../../Typography';
 import RadioGroup from '../../Form/RadioGroup';
 import styles from './styles.module.scss';
-import { ReactComponent as Individual } from '../../../assets/images/plantingMethod/Individual.svg';
-import { ReactComponent as Rows } from '../../../assets/images/plantingMethod/Rows.svg';
+import Individual from '../../../assets/images/plantingMethod/Individual.svg?react';
+import Rows from '../../../assets/images/plantingMethod/Rows.svg?react';
 
-import { ReactComponent as Beds } from '../../../assets/images/plantingMethod/Beds.svg';
-import { ReactComponent as Monocrop } from '../../../assets/images/plantingMethod/Monocrop.svg';
+import Beds from '../../../assets/images/plantingMethod/Beds.svg?react';
+import Monocrop from '../../../assets/images/plantingMethod/Monocrop.svg?react';
 import { DO_CDN_URL } from '../../../util/constants';
 import ImageModal from '../../Modals/ImageModal';
 
diff --git a/packages/webapp/src/components/CropTile/ManagementPlanTile/index.jsx b/packages/webapp/src/components/CropTile/ManagementPlanTile/index.jsx
index 99e12d87d2..ca5dac8932 100644
--- a/packages/webapp/src/components/CropTile/ManagementPlanTile/index.jsx
+++ b/packages/webapp/src/components/CropTile/ManagementPlanTile/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from '../styles.module.scss';
 import clsx from 'clsx';
-import { ReactComponent as CalendarIcon } from '../../../assets/images/managementPlans/calendar.svg';
+import CalendarIcon from '../../../assets/images/managementPlans/calendar.svg?react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import PureCropTile from '../index';
@@ -15,7 +15,7 @@ const cropStatus = {
 };
 
 const isActive = (status) => status === cropStatus.active;
-const isPast = (status) => (status === cropStatus.completed) || (status === cropStatus.abandoned);
+const isPast = (status) => status === cropStatus.completed || status === cropStatus.abandoned;
 const isPlanned = (status) => status === cropStatus.planned;
 
 export default function PureManagementPlanTile({
@@ -28,12 +28,8 @@ export default function PureManagementPlanTile({
   date,
 }) {
   const { t } = useTranslation();
-  const {
-    crop_variety_name,
-    crop_translation_key,
-    crop_variety_photo_url,
-    start_date,
-  } = managementPlan;
+  const { crop_variety_name, crop_translation_key, crop_variety_photo_url, start_date } =
+    managementPlan;
   const displayDate = date || start_date;
 
   const notes =
diff --git a/packages/webapp/src/components/CustomSignUp/index.jsx b/packages/webapp/src/components/CustomSignUp/index.jsx
index 2195a76412..408db6a5f6 100644
--- a/packages/webapp/src/components/CustomSignUp/index.jsx
+++ b/packages/webapp/src/components/CustomSignUp/index.jsx
@@ -1,6 +1,6 @@
 import styles from './styles.module.scss';
-import { ReactComponent as Logo } from '../../assets/images/signUp/logo.svg';
-import { ReactComponent as LineBreak } from '../../assets/images/signUp/lineBreak.svg';
+import Logo from '../../assets/images/signUp/logo.svg?react';
+import LineBreak from '../../assets/images/signUp/lineBreak.svg?react';
 import Button from '../Form/Button';
 import Input from '../Form/Input';
 import React from 'react';
diff --git a/packages/webapp/src/components/DateRangeSelector/DateRangeInput.jsx b/packages/webapp/src/components/DateRangeSelector/DateRangeInput.jsx
index 04ac0fd375..06b2845df2 100644
--- a/packages/webapp/src/components/DateRangeSelector/DateRangeInput.jsx
+++ b/packages/webapp/src/components/DateRangeSelector/DateRangeInput.jsx
@@ -17,7 +17,7 @@ import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ReactComponent as Calendar } from '../../assets/images/dateInput/calendar.svg';
+import Calendar from '../../assets/images/dateInput/calendar.svg?react';
 import { FROM_DATE, TO_DATE } from '../Form/DateRangePicker';
 import ReactSelect from '../Form/ReactSelect';
 import CustomDateRangeSelector from './CustomDateRangeSelector';
diff --git a/packages/webapp/src/components/ErrorHandler/PureReactErrorFallback/index.tsx b/packages/webapp/src/components/ErrorHandler/PureReactErrorFallback/index.tsx
index bf788e2e4b..5faaeafde0 100644
--- a/packages/webapp/src/components/ErrorHandler/PureReactErrorFallback/index.tsx
+++ b/packages/webapp/src/components/ErrorHandler/PureReactErrorFallback/index.tsx
@@ -19,13 +19,13 @@ import { useMediaQuery } from '@mui/material';
 import styles from './styles.module.scss';
 import { Title, Main } from '../../Typography';
 import TextButton from '../../Form/Button/TextButton';
-import { ReactComponent as Background } from '../../../assets/images/errorFallback/background.svg';
-import { ReactComponent as MobileBackground } from '../../../assets/images/errorFallback/background_mobile.svg';
-import { ReactComponent as FarmerDesktop } from '../../../assets/images/errorFallback/farmer_desktop.svg';
-import { ReactComponent as FarmerMobile } from '../../../assets/images/errorFallback/farmer_mobile.svg';
-import { ReactComponent as RefreshIcon } from '../../../assets/images/errorFallback/refresh.svg';
-import { ReactComponent as LogoutIcon } from '../../../assets/images/errorFallback/logout.svg';
-import { ReactComponent as Logo } from '../../../assets/images/nav/logo-large.svg';
+import Background from '../../../assets/images/errorFallback/background.svg?react';
+import MobileBackground from '../../../assets/images/errorFallback/background_mobile.svg?react';
+import FarmerDesktop from '../../../assets/images/errorFallback/farmer_desktop.svg?react';
+import FarmerMobile from '../../../assets/images/errorFallback/farmer_mobile.svg?react';
+import RefreshIcon from '../../../assets/images/errorFallback/refresh.svg?react';
+import LogoutIcon from '../../../assets/images/errorFallback/logout.svg?react';
+import Logo from '../../../assets/images/nav/logo-large.svg?react';
 import { SUPPORT_EMAIL } from '../../../util/constants';
 
 interface PureReactErrorFallbackProps {
diff --git a/packages/webapp/src/components/Expandable/InlineRemove.tsx b/packages/webapp/src/components/Expandable/InlineRemove.tsx
index 5b4ecac2ba..c0e38b4943 100644
--- a/packages/webapp/src/components/Expandable/InlineRemove.tsx
+++ b/packages/webapp/src/components/Expandable/InlineRemove.tsx
@@ -18,7 +18,7 @@ import { useTranslation } from 'react-i18next';
 import TextButton from '../Form/Button/TextButton';
 import { IconLink, Main } from '../Typography';
 import Icon from '../Icons';
-import { ReactComponent as TrashIcon } from '../../assets/images/animals/trash_icon_new.svg';
+import TrashIcon from '../../assets/images/animals/trash_icon_new.svg?react';
 import styles from './styles.module.scss';
 
 export interface InlineWarningProps {
diff --git a/packages/webapp/src/components/Expandable/MainContent.tsx b/packages/webapp/src/components/Expandable/MainContent.tsx
index 5b7fbb6655..8c5a8dd35d 100644
--- a/packages/webapp/src/components/Expandable/MainContent.tsx
+++ b/packages/webapp/src/components/Expandable/MainContent.tsx
@@ -17,8 +17,8 @@ import { ReactNode, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaCheck } from 'react-icons/fa';
 import { InlineWarning as InlineRemoveWarning, RemoveLink } from './InlineRemove';
-import { ReactComponent as CircledCheckIcon } from '../../assets/images/check-circle.svg';
-import { ReactComponent as WarningIcon } from '../../assets/images/warning.svg';
+import CircledCheckIcon from '../../assets/images/check-circle.svg?react';
+import WarningIcon from '../../assets/images/warning.svg?react';
 import styles from './styles.module.scss';
 
 export enum IconType {
diff --git a/packages/webapp/src/components/ExpiredTokenScreen/index.jsx b/packages/webapp/src/components/ExpiredTokenScreen/index.jsx
index be521a2a5d..9d3a4d5ed5 100644
--- a/packages/webapp/src/components/ExpiredTokenScreen/index.jsx
+++ b/packages/webapp/src/components/ExpiredTokenScreen/index.jsx
@@ -1,5 +1,5 @@
 import Layout from '../Layout';
-import { ReactComponent } from '../../assets/images/expiredToken/expiredToken.svg';
+import ReactComponent from '../../assets/images/expiredToken/expiredToken.svg?react';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
diff --git a/packages/webapp/src/components/FarmNotes/FarmNoteForm/index.tsx b/packages/webapp/src/components/FarmNotes/FarmNoteForm/index.tsx
index 5e6c187ddc..f5fdb00553 100644
--- a/packages/webapp/src/components/FarmNotes/FarmNoteForm/index.tsx
+++ b/packages/webapp/src/components/FarmNotes/FarmNoteForm/index.tsx
@@ -24,7 +24,7 @@ import ImageUploadCapture from '../../ImageUploadCapture';
 import { getInputErrors } from '../../Form/Input';
 import { Error } from '../../Typography';
 import { hookFormMaxCharsValidation } from '../../Form/hookformValidationUtils';
-import { ReactComponent as LockIcon } from '../../../assets/images/icon-privacy.svg';
+import LockIcon from '../../../assets/images/icon-privacy.svg?react';
 import styles from './styles.module.scss';
 
 export const FARM_NOTE_FIELDS = {
diff --git a/packages/webapp/src/components/FarmNotes/FarmNoteItem/index.tsx b/packages/webapp/src/components/FarmNotes/FarmNoteItem/index.tsx
index 998f6965ec..e818f60b65 100644
--- a/packages/webapp/src/components/FarmNotes/FarmNoteItem/index.tsx
+++ b/packages/webapp/src/components/FarmNotes/FarmNoteItem/index.tsx
@@ -18,11 +18,11 @@ import { useTranslation } from 'react-i18next';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import SearchIcon from '@mui/icons-material/Search';
-import { ReactComponent as CalendarIcon } from '../../../assets/images/task/Calendar.svg';
-import { ReactComponent as EditIcon } from '../../../assets/images/edit-02.svg';
-import { ReactComponent as TrashIcon } from '../../../assets/images/trash-03.svg';
-import { ReactComponent as LockIcon } from '../../../assets/images/icon-privacy.svg';
-import { ReactComponent as PhotoIcon } from '../../../assets/images/imageCapture/photo-btn.svg';
+import CalendarIcon from '../../../assets/images/task/Calendar.svg?react';
+import EditIcon from '../../../assets/images/edit-02.svg?react';
+import TrashIcon from '../../../assets/images/trash-03.svg?react';
+import LockIcon from '../../../assets/images/icon-privacy.svg?react';
+import PhotoIcon from '../../../assets/images/imageCapture/photo-btn.svg?react';
 import TextButton from '../../Form/Button/TextButton';
 import Button from '../../Form/Button';
 import useMediaWithAuthentication from '../../../containers/hooks/useMediaWithAuthentication';
diff --git a/packages/webapp/src/components/FarmNotes/FarmNoteList/index.tsx b/packages/webapp/src/components/FarmNotes/FarmNoteList/index.tsx
index eac2e6a0d1..4dcc2d3cb2 100644
--- a/packages/webapp/src/components/FarmNotes/FarmNoteList/index.tsx
+++ b/packages/webapp/src/components/FarmNotes/FarmNoteList/index.tsx
@@ -18,7 +18,7 @@ import { useTranslation } from 'react-i18next';
 import useExpandable from '../../Expandable/useExpandableItem';
 import FarmNoteItem from '../FarmNoteItem';
 import Button from '../../Form/Button';
-import { ReactComponent as PlusCircleIcon } from '../../../assets/images/plus-circle.svg';
+import PlusCircleIcon from '../../../assets/images/plus-circle.svg?react';
 import { FarmNote } from '../../../store/api/types';
 import styles from './styles.module.scss';
 
diff --git a/packages/webapp/src/components/FarmNotes/FarmNotesFloatingButton/index.tsx b/packages/webapp/src/components/FarmNotes/FarmNotesFloatingButton/index.tsx
index 7ef70afe98..46f906c580 100644
--- a/packages/webapp/src/components/FarmNotes/FarmNotesFloatingButton/index.tsx
+++ b/packages/webapp/src/components/FarmNotes/FarmNotesFloatingButton/index.tsx
@@ -14,7 +14,7 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { ReactComponent as MessageTextSquareIcon } from '../../../assets/images/message-text-square-02.svg';
+import MessageTextSquareIcon from '../../../assets/images/message-text-square-02.svg?react';
 import styles from './styles.module.scss';
 
 interface FarmNotesFloatingButtonProps {
diff --git a/packages/webapp/src/components/FarmSwitchOutro/index.jsx b/packages/webapp/src/components/FarmSwitchOutro/index.jsx
index 891f5ed06d..14b3d8176c 100644
--- a/packages/webapp/src/components/FarmSwitchOutro/index.jsx
+++ b/packages/webapp/src/components/FarmSwitchOutro/index.jsx
@@ -1,5 +1,5 @@
 import styles from './styles.module.scss';
-import { ReactComponent as OutroImg } from '../../assets/images/farm-switch-outro/outro.svg';
+import OutroImg from '../../assets/images/farm-switch-outro/outro.svg?react';
 import Button from '../Form/Button';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/packages/webapp/src/components/FilePicker/index.tsx b/packages/webapp/src/components/FilePicker/index.tsx
index 176cc612af..dbe077a7ea 100644
--- a/packages/webapp/src/components/FilePicker/index.tsx
+++ b/packages/webapp/src/components/FilePicker/index.tsx
@@ -15,7 +15,7 @@
 
 import styles from './styles.module.scss';
 import { ContainerWithIcon } from '../ContainerWithIcon/ContainerWithIcon';
-import { ReactComponent as TrashIcon } from '../../assets/images/document/trash.svg';
+import TrashIcon from '../../assets/images/document/trash.svg?react';
 import { FilePickerFunctions } from './useFilePickerUpload';
 import { mediaEnum } from '../../containers/MediaWithAuthentication/constants';
 import CertifierSelectionMenuItem from '../OrganicCertifierSurvey/CertifierSelection/CertifierSelectionMenu/CertiferSelectionMenuItem';
diff --git a/packages/webapp/src/components/Finances/AddExpense/ExpenseItemInputs.jsx b/packages/webapp/src/components/Finances/AddExpense/ExpenseItemInputs.jsx
index fc8f2d0882..5db2e9a68b 100644
--- a/packages/webapp/src/components/Finances/AddExpense/ExpenseItemInputs.jsx
+++ b/packages/webapp/src/components/Finances/AddExpense/ExpenseItemInputs.jsx
@@ -16,7 +16,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { IconLink } from '../../Typography';
-import { ReactComponent as TrashIcon } from '../../../assets/images/document/trash.svg';
+import TrashIcon from '../../../assets/images/document/trash.svg?react';
 import Input from '../../Form/Input';
 import { DATE, NOTE, VALUE } from './constants';
 import styles from './styles.module.scss';
diff --git a/packages/webapp/src/components/Finances/FinanceGroup/GroupItem/index.jsx b/packages/webapp/src/components/Finances/FinanceGroup/GroupItem/index.jsx
index 5aec171004..64e55185a5 100644
--- a/packages/webapp/src/components/Finances/FinanceGroup/GroupItem/index.jsx
+++ b/packages/webapp/src/components/Finances/FinanceGroup/GroupItem/index.jsx
@@ -4,7 +4,7 @@ import styles from '../styles.module.scss';
 import clsx from 'clsx';
 import { BsChevronRight } from 'react-icons/bs';
 import { Text } from '../../../Typography';
-import { ReactComponent as CalendarIcon } from '../../../../assets/images/managementPlans/calendar.svg';
+import CalendarIcon from '../../../../assets/images/managementPlans/calendar.svg?react';
 import grabCurrencySymbol from '../../../../util/grabCurrencySymbol';
 
 const FinanceItem = ({ title, subtitle, amount, isPlan, onClickForward }) => {
diff --git a/packages/webapp/src/components/Finances/PureExpenseDetail/index.jsx b/packages/webapp/src/components/Finances/PureExpenseDetail/index.jsx
index aa4c9e5e2c..2fa520b295 100644
--- a/packages/webapp/src/components/Finances/PureExpenseDetail/index.jsx
+++ b/packages/webapp/src/components/Finances/PureExpenseDetail/index.jsx
@@ -23,7 +23,7 @@ import Button from '../../Form/Button';
 import PropTypes from 'prop-types';
 import { IconLink } from '../../Typography';
 import DeleteBox from '../../Task/TaskReadOnly/DeleteBox';
-import { ReactComponent as TrashIcon } from '../../../assets/images/document/trash.svg';
+import TrashIcon from '../../../assets/images/document/trash.svg?react';
 import { hookFormMaxCharsValidation } from '../../Form/hookformValidationUtils';
 import { useCurrencySymbol } from '../../../containers/hooks/useCurrencySymbol';
 import ReactSelect from '../../Form/ReactSelect';
diff --git a/packages/webapp/src/components/Finances/PureFinanceTypeSelection/CantFindCustomType/index.tsx b/packages/webapp/src/components/Finances/PureFinanceTypeSelection/CantFindCustomType/index.tsx
index bdf10fd6f4..346e65b48e 100644
--- a/packages/webapp/src/components/Finances/PureFinanceTypeSelection/CantFindCustomType/index.tsx
+++ b/packages/webapp/src/components/Finances/PureFinanceTypeSelection/CantFindCustomType/index.tsx
@@ -17,9 +17,9 @@ import { useTranslation, Trans } from 'react-i18next';
 import styles from './styles.module.scss';
 import { IconLink, Semibold, Text } from '../../../Typography';
 import TextButton from '../../../Form/Button/TextButton';
-import { ReactComponent as Edit } from '../../../../assets/images/edit.svg';
-import { ReactComponent as UncheckedEnabled } from '../../../../assets/images/unchecked-enabled.svg';
-import { ReactComponent as CheckedEnabled } from '../../../../assets/images/checked-enabled.svg';
+import Edit from '../../../../assets/images/edit.svg?react';
+import UncheckedEnabled from '../../../../assets/images/unchecked-enabled.svg?react';
+import CheckedEnabled from '../../../../assets/images/checked-enabled.svg?react';
 
 // Handlers for when when 'miscelleneous' can be selected using this component (e.g. in Expense Types)
 interface MiscellaneousConfig {
diff --git a/packages/webapp/src/components/Form/Button/SmallButton.tsx b/packages/webapp/src/components/Form/Button/SmallButton.tsx
index 8985a64154..2422aacc23 100644
--- a/packages/webapp/src/components/Form/Button/SmallButton.tsx
+++ b/packages/webapp/src/components/Form/Button/SmallButton.tsx
@@ -16,7 +16,7 @@ import { ReactNode } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { TFunction } from 'i18next';
-import { ReactComponent as XIcon } from '../../../assets/images/x-icon.svg';
+import XIcon from '../../../assets/images/x-icon.svg?react';
 import styles from './button.module.scss';
 
 type Variant = 'remove';
diff --git a/packages/webapp/src/components/Form/Checkbox/index.tsx b/packages/webapp/src/components/Form/Checkbox/index.tsx
index 23711fa47c..f4539aa564 100644
--- a/packages/webapp/src/components/Form/Checkbox/index.tsx
+++ b/packages/webapp/src/components/Form/Checkbox/index.tsx
@@ -18,9 +18,9 @@ import styles from './checkbox.module.scss';
 import { UseFormRegisterReturn } from 'react-hook-form';
 import clsx from 'clsx';
 import { Error, Main } from '../../Typography';
-import { ReactComponent as PartiallyChecked } from '../../../assets/images/partially-checked.svg';
-import { ReactComponent as UncheckedEnabled } from '../../../assets/images/unchecked-enabled.svg';
-import { ReactComponent as CheckedEnabled } from '../../../assets/images/checked-enabled.svg';
+import PartiallyChecked from '../../../assets/images/partially-checked.svg?react';
+import UncheckedEnabled from '../../../assets/images/unchecked-enabled.svg?react';
+import CheckedEnabled from '../../../assets/images/checked-enabled.svg?react';
 
 interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
   name?: string;
diff --git a/packages/webapp/src/components/Form/CompositionInputs/NumberInputWithSelect.tsx b/packages/webapp/src/components/Form/CompositionInputs/NumberInputWithSelect.tsx
index 92345927d4..302d3b919e 100644
--- a/packages/webapp/src/components/Form/CompositionInputs/NumberInputWithSelect.tsx
+++ b/packages/webapp/src/components/Form/CompositionInputs/NumberInputWithSelect.tsx
@@ -20,7 +20,7 @@ import useReactSelectStyles from '../Unit/useReactSelectStyles';
 import useNumberInput from '../NumberInput/useNumberInput';
 import InputBase from '../InputBase';
 import { styles as reactSelectDefaultStyles } from '../ReactSelect';
-import { ReactComponent as RatioOptionIcon } from '../../../assets/images/ratio-option.svg';
+import RatioOptionIcon from '../../../assets/images/ratio-option.svg?react';
 import styles from './styles.module.scss';
 
 export type Option = { value: string; label: string };
diff --git a/packages/webapp/src/components/Form/ContextForm/HeaderWithBackAndClose.tsx b/packages/webapp/src/components/Form/ContextForm/HeaderWithBackAndClose.tsx
index cfef89dfc5..cd3e7a1949 100644
--- a/packages/webapp/src/components/Form/ContextForm/HeaderWithBackAndClose.tsx
+++ b/packages/webapp/src/components/Form/ContextForm/HeaderWithBackAndClose.tsx
@@ -16,7 +16,7 @@
 import { ReactNode } from 'react';
 import Icon from '../../Icons';
 import TextButton from '../Button/TextButton';
-import { ReactComponent as XIcon } from '../../../assets/images/x-icon.svg';
+import XIcon from '../../../assets/images/x-icon.svg?react';
 import styles from './styles.module.scss';
 
 interface HeaderWithBackAndCloseProps {
diff --git a/packages/webapp/src/components/Form/EntityAssociationToggle/index.tsx b/packages/webapp/src/components/Form/EntityAssociationToggle/index.tsx
index b2c4155e5e..c6ff7e3f62 100644
--- a/packages/webapp/src/components/Form/EntityAssociationToggle/index.tsx
+++ b/packages/webapp/src/components/Form/EntityAssociationToggle/index.tsx
@@ -17,8 +17,8 @@ import clsx from 'clsx';
 import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import InputBaseLabel from '../InputBase/InputBaseLabel';
-import { ReactComponent as CropIcon } from '../../../assets/images/nav/crops.svg';
-import { ReactComponent as AnimalIcon } from '../../../assets/images/nav/animals.svg';
+import CropIcon from '../../../assets/images/nav/crops.svg?react';
+import AnimalIcon from '../../../assets/images/nav/animals.svg?react';
 import { EntityType } from '../../../containers/Finances/types';
 import styles from './styles.module.scss';
 
diff --git a/packages/webapp/src/components/Form/FormNavigationButtons/index.tsx b/packages/webapp/src/components/Form/FormNavigationButtons/index.tsx
index 6ec56de92c..20f96a9147 100644
--- a/packages/webapp/src/components/Form/FormNavigationButtons/index.tsx
+++ b/packages/webapp/src/components/Form/FormNavigationButtons/index.tsx
@@ -18,7 +18,7 @@ import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import Button from '../Button';
 import styles from './styles.module.scss';
-import { ReactComponent as ChevronRight } from '../../../assets/images/buttons/chevron-right.svg';
+import ChevronRight from '../../../assets/images/buttons/chevron-right.svg?react';
 
 export interface FormNavigationButtonsProps {
   isFirstStep?: boolean;
diff --git a/packages/webapp/src/components/Form/Input/index.tsx b/packages/webapp/src/components/Form/Input/index.tsx
index 407fa72683..a50fefbcf5 100644
--- a/packages/webapp/src/components/Form/Input/index.tsx
+++ b/packages/webapp/src/components/Form/Input/index.tsx
@@ -35,8 +35,8 @@ import {
   MdKeyboardArrowUp,
   MdKeyboardArrowDown,
 } from 'react-icons/md';
-import { ReactComponent as SearchIcon } from '../../../assets/images/search.svg';
-import { ReactComponent as SearchClearIcon } from '../../../assets/images/search-close.svg';
+import SearchIcon from '../../../assets/images/search.svg?react';
+import SearchClearIcon from '../../../assets/images/search-close.svg?react';
 import TextButton from '../Button/TextButton';
 import useElementWidth from '../../hooks/useElementWidth';
 
diff --git a/packages/webapp/src/components/Form/InputBase/InputBaseLabel/index.tsx b/packages/webapp/src/components/Form/InputBase/InputBaseLabel/index.tsx
index c5a6149c25..179c7446ad 100644
--- a/packages/webapp/src/components/Form/InputBase/InputBaseLabel/index.tsx
+++ b/packages/webapp/src/components/Form/InputBase/InputBaseLabel/index.tsx
@@ -17,7 +17,7 @@ import { useTranslation } from 'react-i18next';
 import { ReactNode } from 'react';
 import clsx from 'clsx';
 import Infoi from '../../../Tooltip/Infoi';
-import { ReactComponent as Leaf } from '../../../../assets/images/signUp/leaf.svg';
+import Leaf from '../../../../assets/images/signUp/leaf.svg?react';
 import { Label } from '../../../Typography';
 import styles from './styles.module.scss';
 
diff --git a/packages/webapp/src/components/Form/NumberInput/NumberInputStepper.tsx b/packages/webapp/src/components/Form/NumberInput/NumberInputStepper.tsx
index 115dc09b41..86a723b236 100644
--- a/packages/webapp/src/components/Form/NumberInput/NumberInputStepper.tsx
+++ b/packages/webapp/src/components/Form/NumberInput/NumberInputStepper.tsx
@@ -14,8 +14,8 @@
  */
 
 import styles from './stepper.module.scss';
-import { ReactComponent as IncrementIcon } from '../../../assets/images/chevron-up.svg';
-import { ReactComponent as DecrementIcon } from '../../../assets/images/chevron-down-2.svg';
+import IncrementIcon from '../../../assets/images/chevron-up.svg?react';
+import DecrementIcon from '../../../assets/images/chevron-down-2.svg?react';
 import { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
 import clsx from 'clsx';
 
diff --git a/packages/webapp/src/components/Form/ReactSelect/CheckboxMultiSelect/index.tsx b/packages/webapp/src/components/Form/ReactSelect/CheckboxMultiSelect/index.tsx
index 4e184d177a..fe40540dd4 100644
--- a/packages/webapp/src/components/Form/ReactSelect/CheckboxMultiSelect/index.tsx
+++ b/packages/webapp/src/components/Form/ReactSelect/CheckboxMultiSelect/index.tsx
@@ -26,7 +26,7 @@ import Select, {
 } from 'react-select';
 import clsx from 'clsx';
 import styles from './styles.module.scss';
-import { ReactComponent as XCircle } from '../../../../assets/images/x-circle.svg';
+import XCircle from '../../../../assets/images/x-circle.svg?react';
 import TextButton from '../../Button/TextButton';
 import Checkbox from '../../Checkbox';
 
diff --git a/packages/webapp/src/components/Form/ReactSelect/components.tsx b/packages/webapp/src/components/Form/ReactSelect/components.tsx
index 070228346c..b11a788bfa 100644
--- a/packages/webapp/src/components/Form/ReactSelect/components.tsx
+++ b/packages/webapp/src/components/Form/ReactSelect/components.tsx
@@ -24,7 +24,7 @@ import {
 } from 'react-select';
 import { colors } from '../../../assets/theme';
 import { BsX } from 'react-icons/bs';
-import { ReactComponent as SearchIcon } from '../../../assets/images/search.svg';
+import SearchIcon from '../../../assets/images/search.svg?react';
 
 function ClearIndicator<
   Option = unknown,
diff --git a/packages/webapp/src/components/Form/SexDetails/SexDetailsCountInput/index.tsx b/packages/webapp/src/components/Form/SexDetails/SexDetailsCountInput/index.tsx
index 5c39790168..e6a81342b2 100644
--- a/packages/webapp/src/components/Form/SexDetails/SexDetailsCountInput/index.tsx
+++ b/packages/webapp/src/components/Form/SexDetails/SexDetailsCountInput/index.tsx
@@ -17,8 +17,8 @@ import InputBase from '../../InputBase';
 import { NumberInputStepperButton } from '../../NumberInput/NumberInputStepper';
 import useNumberInput from '../../NumberInput/useNumberInput';
 import styles from './styles.module.scss';
-import { ReactComponent as PlusSquareIcon } from '../../../../assets/images/plus-square.svg';
-import { ReactComponent as MinusSquareIcon } from '../../../../assets/images/minus-square.svg';
+import PlusSquareIcon from '../../../../assets/images/plus-square.svg?react';
+import MinusSquareIcon from '../../../../assets/images/minus-square.svg?react';
 
 type SexDetailsCountInputProps = {
   label: string;
diff --git a/packages/webapp/src/components/Form/SexDetails/index.tsx b/packages/webapp/src/components/Form/SexDetails/index.tsx
index 1bbc2da848..3e7ab9eb98 100644
--- a/packages/webapp/src/components/Form/SexDetails/index.tsx
+++ b/packages/webapp/src/components/Form/SexDetails/index.tsx
@@ -17,7 +17,7 @@ import { useMemo, useState } from 'react';
 import SexDetailsPopover, { Details } from './SexDetailsPopover';
 import InputBase from '../InputBase';
 import styles from './styles.module.scss';
-import { ReactComponent as ChevronDown } from '../../../assets/images/chevron-down-2.svg';
+import ChevronDown from '../../../assets/images/chevron-down-2.svg?react';
 import { useTranslation } from 'react-i18next';
 import TextButton from '../Button/TextButton';
 
diff --git a/packages/webapp/src/components/Forms/GeneralRevenue/index.jsx b/packages/webapp/src/components/Forms/GeneralRevenue/index.jsx
index 90d55f1d49..d715ce6add 100644
--- a/packages/webapp/src/components/Forms/GeneralRevenue/index.jsx
+++ b/packages/webapp/src/components/Forms/GeneralRevenue/index.jsx
@@ -22,7 +22,7 @@ import InputAutoSize from '../../Form/InputAutoSize';
 import PageTitle from '../../PageTitle/v2';
 import ReactSelect from '../../Form/ReactSelect';
 import { IconLink } from '../../Typography';
-import { ReactComponent as TrashIcon } from '../../../assets/images/document/trash.svg';
+import TrashIcon from '../../../assets/images/document/trash.svg?react';
 import DeleteBox from '../../Task/TaskReadOnly/DeleteBox';
 import { getLocalDateInYYYYDDMM } from '../../../util/date';
 import { hookFormMaxCharsValidation } from '../../Form/hookformValidationUtils';
diff --git a/packages/webapp/src/components/Icons/DocumentIcon/index.jsx b/packages/webapp/src/components/Icons/DocumentIcon/index.jsx
index 05370c3cab..abd0bfb2ab 100644
--- a/packages/webapp/src/components/Icons/DocumentIcon/index.jsx
+++ b/packages/webapp/src/components/Icons/DocumentIcon/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './styles.module.scss';
 import PropTypes from 'prop-types';
-import { ReactComponent as DocumentFrame } from '../../../assets/images/document/document.svg';
+import DocumentFrame from '../../../assets/images/document/document.svg?react';
 
 export const DocumentIcon = ({ extensionName, ...props }) => {
   return (
diff --git a/packages/webapp/src/components/Icons/icons.tsx b/packages/webapp/src/components/Icons/icons.tsx
index da92ed6146..ee6b9676df 100644
--- a/packages/webapp/src/components/Icons/icons.tsx
+++ b/packages/webapp/src/components/Icons/icons.tsx
@@ -16,72 +16,72 @@
 import { FunctionComponent } from 'react';
 
 // Finances Carousel
-import { ReactComponent as ExpenseIcon } from '../../assets/images/finance/Expense-icn.svg';
-import { ReactComponent as CropIcon } from '../../assets/images/finance/Crop-icn.svg';
-import { ReactComponent as ProfitLossIcon } from '../../assets/images/finance/Profit-loss-icn.svg';
+import ExpenseIcon from '../../assets/images/finance/Expense-icn.svg?react';
+import CropIcon from '../../assets/images/finance/Crop-icn.svg?react';
+import ProfitLossIcon from '../../assets/images/finance/Profit-loss-icn.svg?react';
 
 // Revenue types
-import { ReactComponent as CropSaleIcon } from '../../assets/images/finance/Crop-sale-icn.svg';
-import { ReactComponent as CustomTypeIcon } from '../../assets/images/finance/Custom-revenue.svg';
+import CropSaleIcon from '../../assets/images/finance/Crop-sale-icn.svg?react';
+import CustomTypeIcon from '../../assets/images/finance/Custom-revenue.svg?react';
 
 // Expense types
-import { ReactComponent as EquipIcon } from '../../assets/images/finance/Equipment-icn.svg';
-import { ReactComponent as SoilAmendmentIcon } from '../../assets/images/finance/Soil-amendment-icn.svg';
-import { ReactComponent as PestIcon } from '../../assets/images/finance/Pest-icn.svg';
-import { ReactComponent as FuelIcon } from '../../assets/images/finance/Fuel-icn.svg';
-import { ReactComponent as MachineIcon } from '../../assets/images/finance/Machinery-icn.svg';
-import { ReactComponent as SeedIcon } from '../../assets/images/finance/Seeds-icn.svg';
-import { ReactComponent as OtherIcon } from '../../assets/images/finance/Custom-expense.svg';
-import { ReactComponent as LandIcon } from '../../assets/images/finance/Land-icn.svg';
-import { ReactComponent as MiscellaneousIcon } from '../../assets/images/finance/Miscellaneous-icn.svg';
-import { ReactComponent as UtilitiesIcon } from '../../assets/images/finance/Utilities-icn.svg';
-import { ReactComponent as LabourIcon } from '../../assets/images/finance/Labour-icn.svg';
-import { ReactComponent as InfrastructureIcon } from '../../assets/images/finance/Infrastructure-icn.svg';
-import { ReactComponent as TransportationIcon } from '../../assets/images/finance/Transportation-icn.svg';
-import { ReactComponent as ServicesIcon } from '../../assets/images/finance/Services-icn.svg';
+import EquipIcon from '../../assets/images/finance/Equipment-icn.svg?react';
+import SoilAmendmentIcon from '../../assets/images/finance/Soil-amendment-icn.svg?react';
+import PestIcon from '../../assets/images/finance/Pest-icn.svg?react';
+import FuelIcon from '../../assets/images/finance/Fuel-icn.svg?react';
+import MachineIcon from '../../assets/images/finance/Machinery-icn.svg?react';
+import SeedIcon from '../../assets/images/finance/Seeds-icn.svg?react';
+import OtherIcon from '../../assets/images/finance/Custom-expense.svg?react';
+import LandIcon from '../../assets/images/finance/Land-icn.svg?react';
+import MiscellaneousIcon from '../../assets/images/finance/Miscellaneous-icn.svg?react';
+import UtilitiesIcon from '../../assets/images/finance/Utilities-icn.svg?react';
+import LabourIcon from '../../assets/images/finance/Labour-icn.svg?react';
+import InfrastructureIcon from '../../assets/images/finance/Infrastructure-icn.svg?react';
+import TransportationIcon from '../../assets/images/finance/Transportation-icn.svg?react';
+import ServicesIcon from '../../assets/images/finance/Services-icn.svg?react';
 
 // Animal Inventory
-import { ReactComponent as CattleIcon } from '../../assets/images/animals/cattle-icon.svg';
-import { ReactComponent as ChickenIcon } from '../../assets/images/animals/chicken-icon.svg';
-import { ReactComponent as PigIcon } from '../../assets/images/animals/pig-icon.svg';
-import { ReactComponent as BatchIcon } from '../../assets/images/animals/batch.svg';
-import { ReactComponent as BatchIconGreen } from '../../assets/images/animals/batch-green.svg';
-import { ReactComponent as CustomAnimalIcon } from '../../assets/images/animals/custom-animal-icon.svg';
-import { ReactComponent as AlpacaIcon } from '../../assets/images/animals/alpaca-icon.svg';
-import { ReactComponent as GoatIcon } from '../../assets/images/animals/goat-icon.svg';
-import { ReactComponent as RabbitIcon } from '../../assets/images/animals/rabbit-icon.svg';
-import { ReactComponent as SheepIcon } from '../../assets/images/animals/sheep-icon.svg';
-import { ReactComponent as LocationIcon } from '../../assets/images/location.svg';
-import { ReactComponent as RemovedAnimalIcon } from '../../assets/images/animals/removed-animal-icon.svg';
+import CattleIcon from '../../assets/images/animals/cattle-icon.svg?react';
+import ChickenIcon from '../../assets/images/animals/chicken-icon.svg?react';
+import PigIcon from '../../assets/images/animals/pig-icon.svg?react';
+import BatchIcon from '../../assets/images/animals/batch.svg?react';
+import BatchIconGreen from '../../assets/images/animals/batch-green.svg?react';
+import CustomAnimalIcon from '../../assets/images/animals/custom-animal-icon.svg?react';
+import AlpacaIcon from '../../assets/images/animals/alpaca-icon.svg?react';
+import GoatIcon from '../../assets/images/animals/goat-icon.svg?react';
+import RabbitIcon from '../../assets/images/animals/rabbit-icon.svg?react';
+import SheepIcon from '../../assets/images/animals/sheep-icon.svg?react';
+import LocationIcon from '../../assets/images/location.svg?react';
+import RemovedAnimalIcon from '../../assets/images/animals/removed-animal-icon.svg?react';
 
 // Animal Inventory KPI
-import { ReactComponent as AddAnimalIcon } from '../../assets/images/animals/add-animal.svg';
-import { ReactComponent as TaskCreationIcon } from '../../assets/images/create-task.svg';
-import { ReactComponent as CloneIcon } from '../../assets/images/clone.svg';
-import { ReactComponent as RemoveAnimalIcon } from '../../assets/images/animals/remove-animal.svg';
+import AddAnimalIcon from '../../assets/images/animals/add-animal.svg?react';
+import TaskCreationIcon from '../../assets/images/create-task.svg?react';
+import CloneIcon from '../../assets/images/clone.svg?react';
+import RemoveAnimalIcon from '../../assets/images/animals/remove-animal.svg?react';
 
 // Tasks
-import { ReactComponent as SoilAmendmentTask } from '../../assets/images/task/SoilAmendment.svg';
+import SoilAmendmentTask from '../../assets/images/task/SoilAmendment.svg?react';
 
 // System
-import { ReactComponent as ExternalLinkIcon } from '../../assets/images/icon_external_link.svg';
-import { ReactComponent as MoreHorizontalIcon } from '../../assets/images/more-horizontal.svg';
-import { ReactComponent as PlusCircleIcon } from '../../assets/images/plus-circle.svg';
-import { ReactComponent as TrashIcon } from '../../assets/images/animals/trash_icon_new.svg';
-import { ReactComponent as EditIcon } from '../../assets/images/edit.svg';
-import { ReactComponent as ChevronLeft } from '../../assets/images/buttons/chevron-left.svg';
-import { ReactComponent as ClockFast } from '../../assets/images/clock-fast.svg';
-import { ReactComponent as Ruler } from '../../assets/images/ruler.svg';
+import ExternalLinkIcon from '../../assets/images/icon_external_link.svg?react';
+import MoreHorizontalIcon from '../../assets/images/more-horizontal.svg?react';
+import PlusCircleIcon from '../../assets/images/plus-circle.svg?react';
+import TrashIcon from '../../assets/images/animals/trash_icon_new.svg?react';
+import EditIcon from '../../assets/images/edit.svg?react';
+import ChevronLeft from '../../assets/images/buttons/chevron-left.svg?react';
+import ClockFast from '../../assets/images/clock-fast.svg?react';
+import Ruler from '../../assets/images/ruler.svg?react';
 
 // Input
-import { ReactComponent as LockedIcon } from '../../assets/images/lock-03.svg';
-import { ReactComponent as CalendarIcon } from '../../assets/images/task/Calendar.svg';
+import LockedIcon from '../../assets/images/lock-03.svg?react';
+import CalendarIcon from '../../assets/images/task/Calendar.svg?react';
 
 // Devices
-import { ReactComponent as SensorIcon } from '../../assets/images/map/signal-01.svg';
+import SensorIcon from '../../assets/images/map/signal-01.svg?react';
 
 // Irrigation Prescription
-import { ReactComponent as Dot } from '../../assets/images/dot.svg';
+import Dot from '../../assets/images/dot.svg?react';
 
 // Animal type: icon map
 const animalTypeIcons = {
diff --git a/packages/webapp/src/components/ImageLightbox/index.tsx b/packages/webapp/src/components/ImageLightbox/index.tsx
index 490d7b465c..5a87677915 100644
--- a/packages/webapp/src/components/ImageLightbox/index.tsx
+++ b/packages/webapp/src/components/ImageLightbox/index.tsx
@@ -17,7 +17,7 @@ import Dialog from '@mui/material/Dialog';
 import { useTranslation } from 'react-i18next';
 import styles from './styles.module.scss';
 import TextButton from '../Form/Button/TextButton';
-import { ReactComponent as CloseIcon } from '../../assets/images/lightbox-close-x-icon.svg';
+import CloseIcon from '../../assets/images/lightbox-close-x-icon.svg?react';
 import getDeviceType from '../../util/getDeviceType';
 
 export type ImageLightboxProps = {
diff --git a/packages/webapp/src/components/ImagePicker/index.tsx b/packages/webapp/src/components/ImagePicker/index.tsx
index 6584d0bad7..791c31041a 100644
--- a/packages/webapp/src/components/ImagePicker/index.tsx
+++ b/packages/webapp/src/components/ImagePicker/index.tsx
@@ -21,9 +21,9 @@ import { AddLink } from '../Typography';
 import PureFilePickerWrapper from '../Form/FilePickerWrapper';
 import TextButton from '../Form/Button/TextButton';
 import InputBaseLabel from '../Form/InputBase/InputBaseLabel';
-import { ReactComponent as CameraIcon } from '../../assets/images/farm-profile/camera.svg';
-import { ReactComponent as TrashIcon } from '../../assets/images/farm-profile/trash.svg';
-import { ReactComponent as EditIcon } from '../../assets/images/farm-profile/edit.svg';
+import CameraIcon from '../../assets/images/farm-profile/camera.svg?react';
+import TrashIcon from '../../assets/images/farm-profile/trash.svg?react';
+import EditIcon from '../../assets/images/farm-profile/edit.svg?react';
 import { enqueueErrorSnackbar } from '../../containers/Snackbar/snackbarSlice';
 import { isImageFile } from '../../util/validation';
 import styles from './styles.module.scss';
diff --git a/packages/webapp/src/components/ImageUploadCapture/index.tsx b/packages/webapp/src/components/ImageUploadCapture/index.tsx
index 135047f340..9464046ccd 100644
--- a/packages/webapp/src/components/ImageUploadCapture/index.tsx
+++ b/packages/webapp/src/components/ImageUploadCapture/index.tsx
@@ -21,10 +21,10 @@ import PureFilePickerWrapper from '../Form/FilePickerWrapper';
 import TextButton from '../Form/Button/TextButton';
 import InputBaseLabel from '../Form/InputBase/InputBaseLabel';
 import FileSizeExceedModal from '../Modals/FileSizeExceedModal';
-import { ReactComponent as PhotoLibraryIcon } from '../../assets/images/imageCapture/photo-btn.svg';
-import { ReactComponent as CameraIcon } from '../../assets/images/imageCapture/camera-btn.svg';
-import { ReactComponent as TrashIcon } from '../../assets/images/trash-03.svg';
-import { ReactComponent as EditIcon } from '../../assets/images/edit-02.svg';
+import PhotoLibraryIcon from '../../assets/images/imageCapture/photo-btn.svg?react';
+import CameraIcon from '../../assets/images/imageCapture/camera-btn.svg?react';
+import TrashIcon from '../../assets/images/trash-03.svg?react';
+import EditIcon from '../../assets/images/edit-02.svg?react';
 import { enqueueErrorSnackbar } from '../../containers/Snackbar/snackbarSlice';
 import getDeviceType from '../../util/getDeviceType';
 import { isImageFile } from '../../util/validation';
diff --git a/packages/webapp/src/components/Inputs/DateTime/index.tsx b/packages/webapp/src/components/Inputs/DateTime/index.tsx
index e91dbe023e..5c0d88cf09 100644
--- a/packages/webapp/src/components/Inputs/DateTime/index.tsx
+++ b/packages/webapp/src/components/Inputs/DateTime/index.tsx
@@ -21,8 +21,8 @@ import { TimePicker as MuiXTimePicker } from '@mui/x-date-pickers/TimePicker';
 import clsx from 'clsx';
 import styles from './styles.module.scss';
 import InputBaseLabel, { InputBaseLabelProps } from '../../Form/InputBase/InputBaseLabel';
-import { ReactComponent as Calendar } from '../../../assets/images/dateInput/calendar.svg';
-import { ReactComponent as Clock } from '../../../assets/images/dateInput/clock.svg';
+import Calendar from '../../../assets/images/dateInput/calendar.svg?react';
+import Clock from '../../../assets/images/dateInput/clock.svg?react';
 import { getLocaleDateTimeFormats } from './utils';
 
 interface DateTimePickerProps extends InputBaseLabelProps {
diff --git a/packages/webapp/src/components/InviteSignup/index.jsx b/packages/webapp/src/components/InviteSignup/index.jsx
index 4f0dc2ea70..4733ae6100 100644
--- a/packages/webapp/src/components/InviteSignup/index.jsx
+++ b/packages/webapp/src/components/InviteSignup/index.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { Error, Main, Semibold, Title } from '../Typography';
 import { useTranslation } from 'react-i18next';
 import Card from '../Card';
-import { ReactComponent as GoogleLogo } from '../../assets/images/inviteSignUp/google-logo.svg';
+import GoogleLogo from '../../assets/images/inviteSignUp/google-logo.svg?react';
 import styles from './styles.module.scss';
 
 const cardStyle = {
diff --git a/packages/webapp/src/components/IrrigationPrescriptionKPI/util.tsx b/packages/webapp/src/components/IrrigationPrescriptionKPI/util.tsx
index de129a084c..53726d2eae 100644
--- a/packages/webapp/src/components/IrrigationPrescriptionKPI/util.tsx
+++ b/packages/webapp/src/components/IrrigationPrescriptionKPI/util.tsx
@@ -16,8 +16,8 @@
 import { ReactElement } from 'react';
 import { TFunction } from 'i18next';
 import { LabelSize } from '../Tile/DescriptionList';
-import { ReactComponent as WindIcon } from '../../assets/images/weather/wind.svg';
-import { ReactComponent as RainfallIcon } from '../../assets/images/weather/droplets.svg';
+import WindIcon from '../../assets/images/weather/wind.svg?react';
+import RainfallIcon from '../../assets/images/weather/droplets.svg?react';
 import ThemometerWarmIcon from '../../assets/images/weather/thermometer-warm.svg';
 import WeatherIcon from '../WeatherBoard/WeatherIcon';
 import PivotIcon from '../../assets/images/irrigation/pivot-icon.svg';
diff --git a/packages/webapp/src/components/JoinFarmSuccessScreen/index.jsx b/packages/webapp/src/components/JoinFarmSuccessScreen/index.jsx
index 5154da83db..6215127997 100644
--- a/packages/webapp/src/components/JoinFarmSuccessScreen/index.jsx
+++ b/packages/webapp/src/components/JoinFarmSuccessScreen/index.jsx
@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Main, Title } from '../Typography';
-import { ReactComponent } from '../../assets/images/outro/outro.svg';
+import ReactComponent from '../../assets/images/outro/outro.svg?react';
 
 export default function PureJoinFarmSuccessScreen({ onClick, farm_name, showSpotLight }) {
   const { t } = useTranslation(['translation', 'common']);
diff --git a/packages/webapp/src/components/List/ListItems/IconDescription/IconDescriptionListItem.jsx b/packages/webapp/src/components/List/ListItems/IconDescription/IconDescriptionListItem.jsx
index 71964e5c10..3878e3025d 100644
--- a/packages/webapp/src/components/List/ListItems/IconDescription/IconDescriptionListItem.jsx
+++ b/packages/webapp/src/components/List/ListItems/IconDescription/IconDescriptionListItem.jsx
@@ -16,8 +16,8 @@ import React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import styles from './styles.module.scss';
-import { ReactComponent as UncheckedEnabled } from '../../../../assets/images/unchecked-enabled.svg';
-import { ReactComponent as CheckedEnabled } from '../../../../assets/images/checked-enabled.svg';
+import UncheckedEnabled from '../../../../assets/images/unchecked-enabled.svg?react';
+import CheckedEnabled from '../../../../assets/images/checked-enabled.svg?react';
 import { BsChevronRight } from 'react-icons/bs';
 import Icon from '../../../Icons';
 
diff --git a/packages/webapp/src/components/List/ListItems/IconDescription/SensorListItem.tsx b/packages/webapp/src/components/List/ListItems/IconDescription/SensorListItem.tsx
index b8b4d29f7f..26389354cb 100644
--- a/packages/webapp/src/components/List/ListItems/IconDescription/SensorListItem.tsx
+++ b/packages/webapp/src/components/List/ListItems/IconDescription/SensorListItem.tsx
@@ -14,8 +14,8 @@
  */
 import React from 'react';
 import clsx from 'clsx';
-import { ReactComponent as UncheckedEnabled } from '../../../../assets/images/unchecked-enabled.svg';
-import { ReactComponent as CheckedEnabled } from '../../../../assets/images/checked-enabled.svg';
+import UncheckedEnabled from '../../../../assets/images/unchecked-enabled.svg?react';
+import CheckedEnabled from '../../../../assets/images/checked-enabled.svg?react';
 import { BsChevronRight } from 'react-icons/bs';
 import Icon, { IconName } from '../../../Icons';
 import styles from './styles.module.scss';
diff --git a/packages/webapp/src/components/Loading/Loading.jsx b/packages/webapp/src/components/Loading/Loading.jsx
index e6fd1fdb38..2cf0a7b8eb 100644
--- a/packages/webapp/src/components/Loading/Loading.jsx
+++ b/packages/webapp/src/components/Loading/Loading.jsx
@@ -1,4 +1,4 @@
-import { ReactComponent as LoadingAnimation } from '../../assets/images/signUp/animated_loading_farm.svg';
+import LoadingAnimation from '../../assets/images/signUp/animated_loading_farm.svg?react';
 import { colors } from '../../assets/theme';
 
 export function Loading({ children = <LoadingAnimation />, style = {}, ...props }) {
diff --git a/packages/webapp/src/components/LocationIrrigation/index.tsx b/packages/webapp/src/components/LocationIrrigation/index.tsx
index 50fe56a6b7..2102f29007 100644
--- a/packages/webapp/src/components/LocationIrrigation/index.tsx
+++ b/packages/webapp/src/components/LocationIrrigation/index.tsx
@@ -18,7 +18,7 @@ import PageTitle from '../PageTitle/v2';
 import RouterTab from '../RouterTab';
 import { useTranslation } from 'react-i18next';
 import styles from './styles.module.scss';
-import { ReactComponent as ExternalLinkIcon } from '../../assets/images/icon_external_link-01.svg';
+import ExternalLinkIcon from '../../assets/images/icon_external_link-01.svg?react';
 import { getLocalizedDateString } from '../../util/moment';
 import { Variant } from '../RouterTab/Tab';
 import Table from '../Table';
diff --git a/packages/webapp/src/components/Logs/HarvestUseType/index.jsx b/packages/webapp/src/components/Logs/HarvestUseType/index.jsx
index bf004876b3..38673a7ca4 100644
--- a/packages/webapp/src/components/Logs/HarvestUseType/index.jsx
+++ b/packages/webapp/src/components/Logs/HarvestUseType/index.jsx
@@ -5,15 +5,15 @@ import Button from '../../Form/Button';
 import styles from './styles.module.scss';
 import { useTranslation } from 'react-i18next';
 
-import { ReactComponent as Sales } from '../../../assets/images/log/v2/Sales.svg';
-import { ReactComponent as SelfConsumption } from '../../../assets/images/log/v2/SelfConsumption.svg';
-import { ReactComponent as AnimalFeed } from '../../../assets/images/log/v2/AnimalFeed.svg';
-import { ReactComponent as Compost } from '../../../assets/images/log/v2/Compost.svg';
-import { ReactComponent as NotSure } from '../../../assets/images/log/v2/NotSure.svg';
-import { ReactComponent as Gift } from '../../../assets/images/log/v2/Gift.svg';
-import { ReactComponent as Exchange } from '../../../assets/images/log/v2/Exchange.svg';
-import { ReactComponent as Seed } from '../../../assets/images/log/v2/Seed.svg';
-import { ReactComponent as Custom } from '../../../assets/images/log/v2/Custom.svg';
+import Sales from '../../../assets/images/log/v2/Sales.svg?react';
+import SelfConsumption from '../../../assets/images/log/v2/SelfConsumption.svg?react';
+import AnimalFeed from '../../../assets/images/log/v2/AnimalFeed.svg?react';
+import Compost from '../../../assets/images/log/v2/Compost.svg?react';
+import NotSure from '../../../assets/images/log/v2/NotSure.svg?react';
+import Gift from '../../../assets/images/log/v2/Gift.svg?react';
+import Exchange from '../../../assets/images/log/v2/Exchange.svg?react';
+import Seed from '../../../assets/images/log/v2/Seed.svg?react';
+import Custom from '../../../assets/images/log/v2/Custom.svg?react';
 import clsx from 'clsx';
 
 export default function PureHarvestUseType({
@@ -120,6 +120,7 @@ function UseTypeMatrix({ useTypes, onClick, selectedUseTypes }) {
           : svgDict.Other;
         return (
           <div
+            key={type.harvest_use_type_id}
             className={clsx(
               styles.matrixItem,
               selectedUseTypes.includes(type.harvest_use_type_id) && styles.selectedMatrixItem,
diff --git a/packages/webapp/src/components/Map/CustomCompass/index.jsx b/packages/webapp/src/components/Map/CustomCompass/index.jsx
index 94d3156825..850e9a2167 100644
--- a/packages/webapp/src/components/Map/CustomCompass/index.jsx
+++ b/packages/webapp/src/components/Map/CustomCompass/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './styles.module.scss';
-import { ReactComponent as NorthLogo } from '../../../assets/images/map/North_Icon.svg';
+import NorthLogo from '../../../assets/images/map/North_Icon.svg?react';
 
 export default function CustomCompass({ className, style, onClick }) {
   return (
diff --git a/packages/webapp/src/components/Map/CustomZoom/index.jsx b/packages/webapp/src/components/Map/CustomZoom/index.jsx
index 2a9749af05..4d026036e2 100644
--- a/packages/webapp/src/components/Map/CustomZoom/index.jsx
+++ b/packages/webapp/src/components/Map/CustomZoom/index.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './styles.module.scss';
-import { ReactComponent as ZoomInLogo } from '../../../assets/images/map/zoomIn.svg';
-import { ReactComponent as ZoomOutLogo } from '../../../assets/images/map/zoomOut.svg';
+import ZoomInLogo from '../../../assets/images/map/zoomIn.svg?react';
+import ZoomOutLogo from '../../../assets/images/map/zoomOut.svg?react';
 
 export default function CustomZoom({ className, style, onClickZoomIn, onClickZoomOut }) {
   return (
diff --git a/packages/webapp/src/components/Map/DrawingManager/index.jsx b/packages/webapp/src/components/Map/DrawingManager/index.jsx
index 4305f2b230..1f717d1264 100644
--- a/packages/webapp/src/components/Map/DrawingManager/index.jsx
+++ b/packages/webapp/src/components/Map/DrawingManager/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './styles.module.scss';
 import { useTranslation } from 'react-i18next';
-import { ReactComponent as BackIcon } from '../../../assets/images/map/back.svg';
+import BackIcon from '../../../assets/images/map/back.svg?react';
 import clsx from 'clsx';
 import PureWarningBox from '../../WarningBox';
 import Button from '../../Form/Button';
diff --git a/packages/webapp/src/components/Map/Footer/MapNavigationButtons.tsx b/packages/webapp/src/components/Map/Footer/MapNavigationButtons.tsx
index 7d91565535..a5e26fe199 100644
--- a/packages/webapp/src/components/Map/Footer/MapNavigationButtons.tsx
+++ b/packages/webapp/src/components/Map/Footer/MapNavigationButtons.tsx
@@ -17,9 +17,9 @@ import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
 import Button from '../../Form/Button';
 import styles from './styles.module.scss';
-import { ReactComponent as AddLogo } from '../../../assets/images/map/addSkew.svg';
-import { ReactComponent as FilterLogo } from '../../../assets/images/map/filter-funnel.svg';
-import { ReactComponent as ExportLogo } from '../../../assets/images/map/download.svg';
+import AddLogo from '../../../assets/images/map/addSkew.svg?react';
+import FilterLogo from '../../../assets/images/map/filter-funnel.svg?react';
+import ExportLogo from '../../../assets/images/map/download.svg?react';
 
 export interface MapNavigationButtonsProps {
   isAdmin?: boolean;
diff --git a/packages/webapp/src/components/Map/LocationMapping/index.jsx b/packages/webapp/src/components/Map/LocationMapping/index.jsx
index 9123e006fa..197bedc597 100644
--- a/packages/webapp/src/components/Map/LocationMapping/index.jsx
+++ b/packages/webapp/src/components/Map/LocationMapping/index.jsx
@@ -1,21 +1,21 @@
 import { locationEnum } from '../../../containers/Map/constants';
-import { ReactComponent as Gate } from '../../../assets/images/farmMapFilter/Gate.svg';
-import { ReactComponent as WaterValve } from '../../../assets/images/farmMapFilter/WaterValve.svg';
-import { ReactComponent as SoilSampleLocation } from '../../../assets/images/farmMapFilter/SoilSampleLocation.svg';
-import { ReactComponent as Sensor } from '../../../assets/images/farmMapFilter/Sensor.svg';
-import { ReactComponent as SensorArray } from '../../../assets/images/farmMapFilter/SensorArray.svg';
-import { ReactComponent as BufferZone } from '../../../assets/images/farmMapFilter/BufferZone.svg';
-import { ReactComponent as Watercourse } from '../../../assets/images/farmMapFilter/Creek.svg';
-import { ReactComponent as Fence } from '../../../assets/images/farmMapFilter/Fence.svg';
-import { ReactComponent as Barn } from '../../../assets/images/farmMapFilter/Barn.svg';
-import { ReactComponent as CeremonialArea } from '../../../assets/images/farmMapFilter/CA.svg';
-import { ReactComponent as FarmSiteBoundary } from '../../../assets/images/farmMapFilter/FSB.svg';
-import { ReactComponent as Field } from '../../../assets/images/farmMapFilter/Field.svg';
-import { ReactComponent as Garden } from '../../../assets/images/farmMapFilter/Garden.svg';
-import { ReactComponent as Greenhouse } from '../../../assets/images/farmMapFilter/Greenhouse.svg';
-import { ReactComponent as SurfaceWater } from '../../../assets/images/farmMapFilter/SurfaceWater.svg';
-import { ReactComponent as NaturalArea } from '../../../assets/images/farmMapFilter/NA.svg';
-import { ReactComponent as Residence } from '../../../assets/images/farmMapFilter/Residence.svg';
+import Gate from '../../../assets/images/farmMapFilter/Gate.svg?react';
+import WaterValve from '../../../assets/images/farmMapFilter/WaterValve.svg?react';
+import SoilSampleLocation from '../../../assets/images/farmMapFilter/SoilSampleLocation.svg?react';
+import Sensor from '../../../assets/images/farmMapFilter/Sensor.svg?react';
+import SensorArray from '../../../assets/images/farmMapFilter/SensorArray.svg?react';
+import BufferZone from '../../../assets/images/farmMapFilter/BufferZone.svg?react';
+import Watercourse from '../../../assets/images/farmMapFilter/Creek.svg?react';
+import Fence from '../../../assets/images/farmMapFilter/Fence.svg?react';
+import Barn from '../../../assets/images/farmMapFilter/Barn.svg?react';
+import CeremonialArea from '../../../assets/images/farmMapFilter/CA.svg?react';
+import FarmSiteBoundary from '../../../assets/images/farmMapFilter/FSB.svg?react';
+import Field from '../../../assets/images/farmMapFilter/Field.svg?react';
+import Garden from '../../../assets/images/farmMapFilter/Garden.svg?react';
+import Greenhouse from '../../../assets/images/farmMapFilter/Greenhouse.svg?react';
+import SurfaceWater from '../../../assets/images/farmMapFilter/SurfaceWater.svg?react';
+import NaturalArea from '../../../assets/images/farmMapFilter/NA.svg?react';
+import Residence from '../../../assets/images/farmMapFilter/Residence.svg?react';
 
 export const pointImgDict = [
   {
diff --git a/packages/webapp/src/components/Map/Modals/AdjustArea/index.jsx b/packages/webapp/src/components/Map/Modals/AdjustArea/index.jsx
index 61cc4c5b5c..ff205d24c9 100644
--- a/packages/webapp/src/components/Map/Modals/AdjustArea/index.jsx
+++ b/packages/webapp/src/components/Map/Modals/AdjustArea/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import MapTutorialModal from '../../../Modals/MapTutorialModal';
 import PropTypes from 'prop-types';
-// import { ReactComponent as AdjustAreaImg } from '../../../../assets/images/map/adjustArea.svg';
+// import AdjustAreaImg from '../../../../assets/images/map/adjustArea.svg?react';
 import gif from '../../../../assets/images/map/adjustArea.gif';
 import styles from './styles.module.scss';
 
diff --git a/packages/webapp/src/components/Map/Modals/AdjustLine/index.jsx b/packages/webapp/src/components/Map/Modals/AdjustLine/index.jsx
index 21f2e7f6e7..0b757fd98d 100644
--- a/packages/webapp/src/components/Map/Modals/AdjustLine/index.jsx
+++ b/packages/webapp/src/components/Map/Modals/AdjustLine/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import MapTutorialModal from '../../../Modals/MapTutorialModal';
 import PropTypes from 'prop-types';
-// import { ReactComponent as AdjustAreaImg } from '../../../../assets/images/map/adjustArea.svg';
+// import AdjustAreaImg from '../../../../assets/images/map/adjustArea.svg?react';
 import gif from '../../../../assets/images/map/adjustLine.gif';
 import styles from './styles.module.scss';
 
diff --git a/packages/webapp/src/components/MapDrawer/index.jsx b/packages/webapp/src/components/MapDrawer/index.jsx
index 35ba13a316..891382c5ae 100644
--- a/packages/webapp/src/components/MapDrawer/index.jsx
+++ b/packages/webapp/src/components/MapDrawer/index.jsx
@@ -2,25 +2,25 @@ import { useMemo } from 'react';
 import clsx from 'clsx';
 import List from '@mui/material/List';
 import { Label, Underlined } from '../Typography';
-import { ReactComponent as MapBackground } from '../../assets/images/farmMapFilter/MapBackground.svg';
-import { ReactComponent as LabelIcon } from '../../assets/images/farmMapFilter/Label.svg';
-import { ReactComponent as Barn } from '../../assets/images/farmMapFilter/Barn.svg';
-import { ReactComponent as CeremonialArea } from '../../assets/images/farmMapFilter/CA.svg';
-import { ReactComponent as FarmSiteBoundary } from '../../assets/images/farmMapFilter/FSB.svg';
-import { ReactComponent as Field } from '../../assets/images/farmMapFilter/Field.svg';
-import { ReactComponent as Garden } from '../../assets/images/farmMapFilter/Garden.svg';
-import { ReactComponent as Greenhouse } from '../../assets/images/farmMapFilter/Greenhouse.svg';
-import { ReactComponent as SurfaceWater } from '../../assets/images/farmMapFilter/SurfaceWater.svg';
-import { ReactComponent as NaturalArea } from '../../assets/images/farmMapFilter/NA.svg';
-import { ReactComponent as Residence } from '../../assets/images/farmMapFilter/Residence.svg';
-import { ReactComponent as BufferZone } from '../../assets/images/farmMapFilter/BufferZone.svg';
-import { ReactComponent as Watercourse } from '../../assets/images/farmMapFilter/Creek.svg';
-import { ReactComponent as Fence } from '../../assets/images/farmMapFilter/Fence.svg';
-import { ReactComponent as Gate } from '../../assets/images/farmMapFilter/Gate.svg';
-import { ReactComponent as SoilSampleLocation } from '../../assets/images/farmMapFilter/SoilSampleLocation.svg';
-import { ReactComponent as WaterValve } from '../../assets/images/farmMapFilter/WaterValve.svg';
-import { ReactComponent as Sensor } from '../../assets/images/farmMapFilter/Sensor.svg';
-import { ReactComponent as SensorArray } from '../../assets/images/farmMapFilter/SensorArray.svg';
+import MapBackground from '../../assets/images/farmMapFilter/MapBackground.svg?react';
+import LabelIcon from '../../assets/images/farmMapFilter/Label.svg?react';
+import Barn from '../../assets/images/farmMapFilter/Barn.svg?react';
+import CeremonialArea from '../../assets/images/farmMapFilter/CA.svg?react';
+import FarmSiteBoundary from '../../assets/images/farmMapFilter/FSB.svg?react';
+import Field from '../../assets/images/farmMapFilter/Field.svg?react';
+import Garden from '../../assets/images/farmMapFilter/Garden.svg?react';
+import Greenhouse from '../../assets/images/farmMapFilter/Greenhouse.svg?react';
+import SurfaceWater from '../../assets/images/farmMapFilter/SurfaceWater.svg?react';
+import NaturalArea from '../../assets/images/farmMapFilter/NA.svg?react';
+import Residence from '../../assets/images/farmMapFilter/Residence.svg?react';
+import BufferZone from '../../assets/images/farmMapFilter/BufferZone.svg?react';
+import Watercourse from '../../assets/images/farmMapFilter/Creek.svg?react';
+import Fence from '../../assets/images/farmMapFilter/Fence.svg?react';
+import Gate from '../../assets/images/farmMapFilter/Gate.svg?react';
+import SoilSampleLocation from '../../assets/images/farmMapFilter/SoilSampleLocation.svg?react';
+import WaterValve from '../../assets/images/farmMapFilter/WaterValve.svg?react';
+import Sensor from '../../assets/images/farmMapFilter/Sensor.svg?react';
+import SensorArray from '../../assets/images/farmMapFilter/SensorArray.svg?react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import { locationEnum } from '../../containers/Map/constants';
diff --git a/packages/webapp/src/components/MarketDirectory/InfoForm/index.tsx b/packages/webapp/src/components/MarketDirectory/InfoForm/index.tsx
index 4a9f2804e1..b2174fbb02 100644
--- a/packages/webapp/src/components/MarketDirectory/InfoForm/index.tsx
+++ b/packages/webapp/src/components/MarketDirectory/InfoForm/index.tsx
@@ -38,9 +38,9 @@ import {
   hookFormMinValidation,
 } from '../../Form/hookformValidationUtils';
 import ImagePicker from '../../ImagePicker';
-import { ReactComponent as InstagramIcon } from '../../../assets/images/socials/instagram.svg';
-import { ReactComponent as FacebookIcon } from '../../../assets/images/socials/facebook.svg';
-import { ReactComponent as XIcon } from '../../../assets/images/socials/x.svg';
+import InstagramIcon from '../../../assets/images/socials/instagram.svg?react';
+import FacebookIcon from '../../../assets/images/socials/facebook.svg?react';
+import XIcon from '../../../assets/images/socials/x.svg?react';
 import PrivateBadge from '../../SimpleBadges/PrivateBadge';
 import type { GetOnFileUpload } from '../../ImagePicker/useImagePickerUpload';
 import {
diff --git a/packages/webapp/src/components/MarketDirectoryTile/index.tsx b/packages/webapp/src/components/MarketDirectoryTile/index.tsx
index 1d88028982..c2042565f9 100644
--- a/packages/webapp/src/components/MarketDirectoryTile/index.tsx
+++ b/packages/webapp/src/components/MarketDirectoryTile/index.tsx
@@ -16,10 +16,10 @@
 import { ReactNode } from 'react';
 import clsx from 'clsx';
 import { useTranslation, Trans } from 'react-i18next';
-import { ReactComponent as CheckIcon } from '../../assets/images/check-circle2.svg';
+import CheckIcon from '../../assets/images/check-circle2.svg?react';
 import Switch from '../Form/Switch';
 import Button from '../Form/Button';
-import { ReactComponent as MessageSquareIcon } from '../../assets/images/message-square-02.svg';
+import MessageSquareIcon from '../../assets/images/message-square-02.svg?react';
 import styles from './styles.module.scss';
 
 export interface PureMarketDirectoryTileProps {
diff --git a/packages/webapp/src/components/Modals/BiodiversityLoadingModal/BiodiversityLoadingModal.jsx b/packages/webapp/src/components/Modals/BiodiversityLoadingModal/BiodiversityLoadingModal.jsx
index b566bc8ca7..a4a817ea62 100644
--- a/packages/webapp/src/components/Modals/BiodiversityLoadingModal/BiodiversityLoadingModal.jsx
+++ b/packages/webapp/src/components/Modals/BiodiversityLoadingModal/BiodiversityLoadingModal.jsx
@@ -18,7 +18,7 @@ import ModalComponent from '../ModalComponent/v2';
 import Button from '../../Form/Button';
 import styles from './styles.module.scss';
 import { useTranslation } from 'react-i18next';
-import { ReactComponent as HazardIcon } from '../../../assets/images/warning.svg';
+import HazardIcon from '../../../assets/images/warning.svg?react';
 
 const BiodiversityLoadingModal = ({ dismissModal, loadingError }) => {
   const { t } = useTranslation();
diff --git a/packages/webapp/src/components/Modals/CertificationsModal/index.jsx b/packages/webapp/src/components/Modals/CertificationsModal/index.jsx
index 6f8e97bc60..23ffe00bbe 100644
--- a/packages/webapp/src/components/Modals/CertificationsModal/index.jsx
+++ b/packages/webapp/src/components/Modals/CertificationsModal/index.jsx
@@ -1,4 +1,4 @@
-import { ReactComponent as NewFeatureIcon } from '../../../assets/images/home/new-feature.svg';
+import NewFeatureIcon from '../../../assets/images/home/new-feature.svg?react';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import ModalComponent from '../ModalComponent/v2';
diff --git a/packages/webapp/src/components/Modals/ExportMapModal/index.jsx b/packages/webapp/src/components/Modals/ExportMapModal/index.jsx
index bce61e8c4b..1169376e4e 100644
--- a/packages/webapp/src/components/Modals/ExportMapModal/index.jsx
+++ b/packages/webapp/src/components/Modals/ExportMapModal/index.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Modal } from '../';
-import { ReactComponent as DownloadIcon } from '../../../assets/images/map/download.svg';
+import DownloadIcon from '../../../assets/images/map/download.svg?react';
 import { AiOutlineMail } from 'react-icons/ai';
 import styles from './styles.module.scss';
 import { Main, Title } from '../../Typography';
diff --git a/packages/webapp/src/components/Modals/PreparingExportModal/index.jsx b/packages/webapp/src/components/Modals/PreparingExportModal/index.jsx
index 5387273d87..2accf9f098 100644
--- a/packages/webapp/src/components/Modals/PreparingExportModal/index.jsx
+++ b/packages/webapp/src/components/Modals/PreparingExportModal/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import ModalComponent from '../ModalComponent/v2';
 import styles from './styles.module.scss';
-import { ReactComponent as Email } from '../../../assets/images/export/email/Email.svg';
+import Email from '../../../assets/images/export/email/Email.svg?react';
 
 export default function PreparingExportModal({ dismissModal }) {
   const { t } = useTranslation();
diff --git a/packages/webapp/src/components/Modals/QuickAssignModal/index.jsx b/packages/webapp/src/components/Modals/QuickAssignModal/index.jsx
index 6051be8355..a68b8db62b 100644
--- a/packages/webapp/src/components/Modals/QuickAssignModal/index.jsx
+++ b/packages/webapp/src/components/Modals/QuickAssignModal/index.jsx
@@ -4,7 +4,7 @@ import ModalComponent from '../ModalComponent/v2';
 import styles from './styles.module.scss';
 import Button from '../../Form/Button';
 import Checkbox from '../../Form/Checkbox';
-import { ReactComponent as Person } from '../../../assets/images/task/Person.svg';
+import Person from '../../../assets/images/task/Person.svg?react';
 import { tasksSelector } from '../../../containers/taskSlice';
 import { useSelector } from 'react-redux';
 import AssignTask from '../../Task/AssignTask';
diff --git a/packages/webapp/src/components/Modals/RequestConfirmationModal/index.jsx b/packages/webapp/src/components/Modals/RequestConfirmationModal/index.jsx
index e9fd816a5f..213102f558 100644
--- a/packages/webapp/src/components/Modals/RequestConfirmationModal/index.jsx
+++ b/packages/webapp/src/components/Modals/RequestConfirmationModal/index.jsx
@@ -1,4 +1,4 @@
-import { ReactComponent as Success } from '../../../assets/images/requestConfirmation/success.svg';
+import Success from '../../../assets/images/requestConfirmation/success.svg?react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Modal, ModalComponent } from '../';
diff --git a/packages/webapp/src/components/Modals/ResetPassword/index.jsx b/packages/webapp/src/components/Modals/ResetPassword/index.jsx
index a35904c8bb..37031359f5 100644
--- a/packages/webapp/src/components/Modals/ResetPassword/index.jsx
+++ b/packages/webapp/src/components/Modals/ResetPassword/index.jsx
@@ -1,4 +1,4 @@
-import { ReactComponent as MailIconImg } from '../../../assets/images/resetPassword/mail-icon.svg';
+import MailIconImg from '../../../assets/images/resetPassword/mail-icon.svg?react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Modal, ModalComponent } from '../';
diff --git a/packages/webapp/src/components/Modals/ResetPasswordSuccess/index.jsx b/packages/webapp/src/components/Modals/ResetPasswordSuccess/index.jsx
index f1352f4fd1..6f8470ab64 100644
--- a/packages/webapp/src/components/Modals/ResetPasswordSuccess/index.jsx
+++ b/packages/webapp/src/components/Modals/ResetPasswordSuccess/index.jsx
@@ -1,4 +1,4 @@
-import { ReactComponent as Success } from '../../../assets/images/resetPassword/success.svg';
+import Success from '../../../assets/images/resetPassword/success.svg?react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Modal, ModalComponent } from '../';
diff --git a/packages/webapp/src/components/Modals/UpdateTaskDateModal/index.jsx b/packages/webapp/src/components/Modals/UpdateTaskDateModal/index.jsx
index e5f562e83d..920f74f9ec 100644
--- a/packages/webapp/src/components/Modals/UpdateTaskDateModal/index.jsx
+++ b/packages/webapp/src/components/Modals/UpdateTaskDateModal/index.jsx
@@ -4,7 +4,7 @@ import ModalComponent from '../ModalComponent/v2';
 import styles from './styles.module.scss';
 import Button from '../../Form/Button';
 import Input from '../../Form/Input';
-import { ReactComponent as CalendarIcon } from '../../../assets/images/task/CalendarIcon.svg';
+import CalendarIcon from '../../../assets/images/task/CalendarIcon.svg?react';
 import { getDateInputFormat } from '../../../util/moment';
 import PropTypes from 'prop-types';
 
diff --git a/packages/webapp/src/components/Modals/WaterUsageCalculatorModal/index.jsx b/packages/webapp/src/components/Modals/WaterUsageCalculatorModal/index.jsx
index 7aaf4d449c..5ec3d65cd3 100644
--- a/packages/webapp/src/components/Modals/WaterUsageCalculatorModal/index.jsx
+++ b/packages/webapp/src/components/Modals/WaterUsageCalculatorModal/index.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import ModalComponent from '../ModalComponent/v2';
-import { ReactComponent as Calculator } from '../../../assets/images/task/Calculator.svg';
+import Calculator from '../../../assets/images/task/Calculator.svg?react';
 import styles from '../QuickAssignModal/styles.module.scss';
 import Button from '../../Form/Button';
 import PropTypes from 'prop-types';
diff --git a/packages/webapp/src/components/Navigation/Alert.jsx b/packages/webapp/src/components/Navigation/Alert.jsx
index b14dac55c5..77cf14d64a 100644
--- a/packages/webapp/src/components/Navigation/Alert.jsx
+++ b/packages/webapp/src/components/Navigation/Alert.jsx
@@ -1,7 +1,7 @@
 import { makeStyles } from '@mui/styles';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { ReactComponent as AlertIcon } from '../../assets/images/alert.svg';
+import AlertIcon from '../../assets/images/alert.svg?react';
 
 export default function PureAlert({ alertCount }) {
   const useStyles = makeStyles({
diff --git a/packages/webapp/src/components/Navigation/ListOption/index.jsx b/packages/webapp/src/components/Navigation/ListOption/index.jsx
index 2a98ca7aed..9fad97d78c 100644
--- a/packages/webapp/src/components/Navigation/ListOption/index.jsx
+++ b/packages/webapp/src/components/Navigation/ListOption/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './listOption.module.scss';
-import { ReactComponent as LaunchIcon } from '../../../../assets/images/icon_launch.svg';
+import LaunchIcon from '../../../../assets/images/icon_launch.svg?react';
 
 export default function ListOption({
   iconText,
diff --git a/packages/webapp/src/components/Navigation/SideMenu/index.jsx b/packages/webapp/src/components/Navigation/SideMenu/index.jsx
index c03bb3d20a..74b03da0ae 100644
--- a/packages/webapp/src/components/Navigation/SideMenu/index.jsx
+++ b/packages/webapp/src/components/Navigation/SideMenu/index.jsx
@@ -15,15 +15,15 @@ import { matchPath } from 'react-router-dom';
 import { FiEye } from 'react-icons/fi';
 
 import useExpandable from '../../Expandable/useExpandableItem';
-import { ReactComponent as Logo } from '../../../assets/images/middle_logo.svg';
-import { ReactComponent as LogoOffline } from '../../../assets/images/middle_logo-offline.svg';
+import Logo from '../../../assets/images/middle_logo.svg?react';
+import LogoOffline from '../../../assets/images/middle_logo-offline.svg?react';
 import {
   useGetMenuItems,
   offlineDisabledPageKeys,
   offlineViewOnlyPageKeys,
 } from '../../../hooks/useGetMenuItems';
 import Drawer from '../../Drawer';
-import { ReactComponent as CollapseMenuIcon } from '../../../assets/images/nav/collapse-menu.svg';
+import CollapseMenuIcon from '../../../assets/images/nav/collapse-menu.svg?react';
 import styles from './styles.module.scss';
 import { getLanguageFromLocalStorage } from '../../../util/getLanguageFromLocalStorage';
 import { useIsOffline } from '../../../containers/hooks/useOfflineDetector/useIsOffline';
diff --git a/packages/webapp/src/components/Navigation/TopMenu/TopMenu.jsx b/packages/webapp/src/components/Navigation/TopMenu/TopMenu.jsx
index 9575fd7ca5..0ab8eba9e4 100644
--- a/packages/webapp/src/components/Navigation/TopMenu/TopMenu.jsx
+++ b/packages/webapp/src/components/Navigation/TopMenu/TopMenu.jsx
@@ -1,17 +1,17 @@
 import { useRef, useState } from 'react';
 import { logout } from '../../../util/jwt';
-import { ReactComponent as LogoutIcon } from '../../../assets/images/navbar/logout.svg';
-import { ReactComponent as MyInfoIcon } from '../../../assets/images/navbar/my-info.svg';
-import { ReactComponent as VideoIcon } from '../../../assets/images/navbar/play-square.svg';
-import { ReactComponent as SwitchFarmIcon } from '../../../assets/images/navbar/switch-farm.svg';
-import { ReactComponent as LaunchIcon } from '../../../assets/images/icon_launch.svg';
-import { ReactComponent as CloseX } from '../../../assets/images/close-x.svg';
-import { ReactComponent as NotificationIcon } from '../../../assets/images/notif.svg';
+import LogoutIcon from '../../../assets/images/navbar/logout.svg?react';
+import MyInfoIcon from '../../../assets/images/navbar/my-info.svg?react';
+import VideoIcon from '../../../assets/images/navbar/play-square.svg?react';
+import SwitchFarmIcon from '../../../assets/images/navbar/switch-farm.svg?react';
+import LaunchIcon from '../../../assets/images/icon_launch.svg?react';
+import CloseX from '../../../assets/images/close-x.svg?react';
+import NotificationIcon from '../../../assets/images/notif.svg?react';
 // TODO: use profile picture stored in db
-import { ReactComponent as ProfilePicture } from '../../../assets/images/navbar/defaultpfp.svg';
-import { ReactComponent as IconLogo } from '../../../assets/images/navbar/nav-logo.svg';
-import { ReactComponent as IconLogoOffline } from '../../../assets/images/navbar/nav-logo-offline.svg';
-import { ReactComponent as WordsLogo } from '../../../assets/images/middle_logo.svg';
+import ProfilePicture from '../../../assets/images/navbar/defaultpfp.svg?react';
+import IconLogo from '../../../assets/images/navbar/nav-logo.svg?react';
+import IconLogoOffline from '../../../assets/images/navbar/nav-logo-offline.svg?react';
+import WordsLogo from '../../../assets/images/middle_logo.svg?react';
 import { BiMenu } from 'react-icons/bi';
 import {
   AppBar,
diff --git a/packages/webapp/src/components/Outro/index.jsx b/packages/webapp/src/components/Outro/index.jsx
index 5fc9b7381b..726994801c 100644
--- a/packages/webapp/src/components/Outro/index.jsx
+++ b/packages/webapp/src/components/Outro/index.jsx
@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Main } from '../Typography';
-import { ReactComponent } from '../../assets/images/outro/outro.svg';
+import ReactComponent from '../../assets/images/outro/outro.svg?react';
 import PageTitle from '../PageTitle/v2';
 
 export default function PureOutroSplash({ onContinue, onGoBack, toShowSpotlight }) {
@@ -12,7 +12,7 @@ export default function PureOutroSplash({ onContinue, onGoBack, toShowSpotlight
   return (
     <Layout
       buttonGroup={
-        <Button data-cy='outro-finish' onClick={onContinue} fullLength>
+        <Button data-cy="outro-finish" onClick={onContinue} fullLength>
           {t('common:FINISH')}
         </Button>
       }
diff --git a/packages/webapp/src/components/PageTitle/index.jsx b/packages/webapp/src/components/PageTitle/index.jsx
index 1147f45319..6e4aeda1c0 100644
--- a/packages/webapp/src/components/PageTitle/index.jsx
+++ b/packages/webapp/src/components/PageTitle/index.jsx
@@ -17,7 +17,7 @@ import React, { Component } from 'react';
 import styles from './styles.module.scss';
 import history from '../../history';
 import InfoBoxComponent from '../InfoBoxComponent';
-import { ReactComponent as GreyHeaderChevron } from '../../assets/images/header-chevron-left.svg';
+import GreyHeaderChevron from '../../assets/images/header-chevron-left.svg?react';
 
 // takes 2 props
 // title - String
diff --git a/packages/webapp/src/components/PageTitle/v2/index.jsx b/packages/webapp/src/components/PageTitle/v2/index.jsx
index dfacc4cd97..8f0d4fda97 100644
--- a/packages/webapp/src/components/PageTitle/v2/index.jsx
+++ b/packages/webapp/src/components/PageTitle/v2/index.jsx
@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import styles from './styles.module.scss';
 import PropTypes from 'prop-types';
 import { CancelButton } from '../CancelButton';
-import { ReactComponent as GreyHeaderChevron } from '../../../assets/images/header-chevron-left.svg';
+import GreyHeaderChevron from '../../../assets/images/header-chevron-left.svg?react';
 
 function PageTitle({ title, onGoBack, onCancel, style, label, classNames = {}, subtext }) {
   const [showConfirmCancelModal, setShowConfirmCancelModal] = useState(false);
diff --git a/packages/webapp/src/components/PopupFilter/PureCollapsingSearch/index.jsx b/packages/webapp/src/components/PopupFilter/PureCollapsingSearch/index.jsx
index 3079093a04..01f933c8dd 100644
--- a/packages/webapp/src/components/PopupFilter/PureCollapsingSearch/index.jsx
+++ b/packages/webapp/src/components/PopupFilter/PureCollapsingSearch/index.jsx
@@ -17,7 +17,7 @@ import { useState, useRef, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import styles from './styles.module.scss';
-import { ReactComponent as SearchIcon } from '../../../assets/images/search.svg';
+import SearchIcon from '../../../assets/images/search.svg?react';
 import Input from '../../Form/Input';
 import TextButton from '../../Form/Button/TextButton';
 import { Modal } from '../../Modals';
diff --git a/packages/webapp/src/components/PopupFilter/PureTaskDropdownFilter/index.jsx b/packages/webapp/src/components/PopupFilter/PureTaskDropdownFilter/index.jsx
index 91062616d6..6b271277a1 100644
--- a/packages/webapp/src/components/PopupFilter/PureTaskDropdownFilter/index.jsx
+++ b/packages/webapp/src/components/PopupFilter/PureTaskDropdownFilter/index.jsx
@@ -7,8 +7,8 @@ import styles from './styles.module.scss';
 import { BsChevronDown } from 'react-icons/bs';
 import { Main, Semibold } from '../../Typography';
 import Radio from '../../Form/Radio';
-import { ReactComponent as CalendarDown } from '../../../assets/images/taskFilter/CalendarDown.svg';
-import { ReactComponent as CalendarUp } from '../../../assets/images/taskFilter/CalendarUp.svg';
+import CalendarDown from '../../../assets/images/taskFilter/CalendarDown.svg?react';
+import CalendarUp from '../../../assets/images/taskFilter/CalendarUp.svg?react';
 import clsx from 'clsx';
 import PageBreak from '../../PageBreak';
 import { ClickAwayListener } from '@mui/base/ClickAwayListener';
diff --git a/packages/webapp/src/components/Profile/FarmSettings/Addons/index.tsx b/packages/webapp/src/components/Profile/FarmSettings/Addons/index.tsx
index 12d85a15e5..391bebc1d6 100644
--- a/packages/webapp/src/components/Profile/FarmSettings/Addons/index.tsx
+++ b/packages/webapp/src/components/Profile/FarmSettings/Addons/index.tsx
@@ -18,8 +18,8 @@ import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Main, Semibold } from '../../../Typography';
 import { PARTNERS } from '../../../../containers/AddSensors/constants';
-import { ReactComponent as ExternalLinkIcon } from '../../../../assets/images/icon_external_link.svg';
-import { ReactComponent as BrokenLinkIcon } from '../../../../assets/images/link-broken.svg';
+import ExternalLinkIcon from '../../../../assets/images/icon_external_link.svg?react';
+import BrokenLinkIcon from '../../../../assets/images/link-broken.svg?react';
 import styles from './styles.module.scss';
 import { Partner } from '../../../AddSensors/Partners';
 import Button from '../../../Form/Button';
diff --git a/packages/webapp/src/components/PureSnackbar/index.jsx b/packages/webapp/src/components/PureSnackbar/index.jsx
index 5267e856ee..855623af72 100644
--- a/packages/webapp/src/components/PureSnackbar/index.jsx
+++ b/packages/webapp/src/components/PureSnackbar/index.jsx
@@ -1,8 +1,8 @@
 import React, { forwardRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import styles from './styles.module.scss';
-import { ReactComponent as Cross } from '../../assets/images/map/cross.svg';
-import { ReactComponent as Checkmark } from '../../assets/images/map/checkmark.svg';
+import Cross from '../../assets/images/map/cross.svg?react';
+import Checkmark from '../../assets/images/map/checkmark.svg?react';
 import clsx from 'clsx';
 import ProgressBar from '../Map/ProgressBar';
 import { VscWarning } from 'react-icons/vsc';
diff --git a/packages/webapp/src/components/Rating/index.jsx b/packages/webapp/src/components/Rating/index.jsx
index d41fe318a9..673735981f 100644
--- a/packages/webapp/src/components/Rating/index.jsx
+++ b/packages/webapp/src/components/Rating/index.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import styles from './styles.module.scss';
 import clsx from 'clsx';
-import { ReactComponent as RatingStar } from '../../assets/images/rating/Star.svg';
+import RatingStar from '../../assets/images/rating/Star.svg?react';
 import { Label } from '../Typography';
 import { useTranslation } from 'react-i18next';
 
diff --git a/packages/webapp/src/components/ReleaseBadge/index.jsx b/packages/webapp/src/components/ReleaseBadge/index.jsx
index 15319ce6c6..0f7cfa098e 100644
--- a/packages/webapp/src/components/ReleaseBadge/index.jsx
+++ b/packages/webapp/src/components/ReleaseBadge/index.jsx
@@ -20,9 +20,9 @@ import { useTranslation } from 'react-i18next';
 import styles from './styles.module.scss';
 import { Semibold, Text } from '../Typography';
 import TextButton from '../Form/Button/TextButton';
-import { ReactComponent as Close } from '../../assets/images/release/x-circle.svg';
-import { ReactComponent as NewBubble } from '../../assets/images/release/new-bubble.svg';
-import { ReactComponent as ChevronRight } from '../../assets/images/release/chevron-right-dk-red.svg';
+import Close from '../../assets/images/release/x-circle.svg?react';
+import NewBubble from '../../assets/images/release/new-bubble.svg?react';
+import ChevronRight from '../../assets/images/release/chevron-right-dk-red.svg?react';
 
 const ReleaseBadge = ({ releaseNotesLink, className = '' }) => {
   const { t } = useTranslation();
diff --git a/packages/webapp/src/components/Sensor/v2/EsciSensorList/index.tsx b/packages/webapp/src/components/Sensor/v2/EsciSensorList/index.tsx
index cf8d0cc14f..067f12deda 100644
--- a/packages/webapp/src/components/Sensor/v2/EsciSensorList/index.tsx
+++ b/packages/webapp/src/components/Sensor/v2/EsciSensorList/index.tsx
@@ -33,8 +33,8 @@ import {
 } from '../../../../containers/SensorList/useGroupedSensors';
 import SensorTable, { SensorTableVariant } from '../SensorTable';
 import OverviewStats, { OverviewStatsProps } from '../../../OverviewStats';
-import { ReactComponent as SensorIcon } from '../../../../assets/images/map/signal-01.svg';
-import { ReactComponent as SensorArrayIcon } from '../../../../assets/images/farmMapFilter/SensorArray.svg';
+import SensorIcon from '../../../../assets/images/map/signal-01.svg?react';
+import SensorArrayIcon from '../../../../assets/images/farmMapFilter/SensorArray.svg?react';
 import { Location, UserFarm } from '../../../../types';
 import { toTranslationKey } from '../../../../util';
 import styles from './styles.module.scss';
diff --git a/packages/webapp/src/components/Sensor/v2/SensorTable/index.tsx b/packages/webapp/src/components/Sensor/v2/SensorTable/index.tsx
index 640e7814e1..470179c8a2 100644
--- a/packages/webapp/src/components/Sensor/v2/SensorTable/index.tsx
+++ b/packages/webapp/src/components/Sensor/v2/SensorTable/index.tsx
@@ -17,7 +17,7 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import Table from '../../../Table';
 import Cell from '../../../Table/Cell';
-import { ReactComponent as SensorIcon } from '../../../../assets/images/map/signal-01.svg';
+import SensorIcon from '../../../../assets/images/map/signal-01.svg?react';
 import { Alignment, CellKind, TableKind, type TableV2Column } from '../../../Table/types';
 import { type SensorInSimpleTableFormat } from '../../../../containers/AddSensors/types';
 import styles from './styles.module.scss';
diff --git a/packages/webapp/src/components/StatusIndicatorPill/index.tsx b/packages/webapp/src/components/StatusIndicatorPill/index.tsx
index a0a2a4f3a0..1b48daf9c7 100644
--- a/packages/webapp/src/components/StatusIndicatorPill/index.tsx
+++ b/packages/webapp/src/components/StatusIndicatorPill/index.tsx
@@ -16,7 +16,7 @@
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { Tooltip } from '@mui/material';
-import { ReactComponent as StatusIndicatorDot } from '../../assets/images/status-indicator-dot.svg';
+import StatusIndicatorDot from '../../assets/images/status-indicator-dot.svg?react';
 import styles from './styles.module.scss';
 import { Semibold, Main } from '../Typography';
 
diff --git a/packages/webapp/src/components/StepperProgressBar/index.tsx b/packages/webapp/src/components/StepperProgressBar/index.tsx
index 3f4110669c..84d915c3df 100644
--- a/packages/webapp/src/components/StepperProgressBar/index.tsx
+++ b/packages/webapp/src/components/StepperProgressBar/index.tsx
@@ -21,12 +21,12 @@ import StepLabel from '@mui/material/StepLabel';
 import StepConnector from '@mui/material/StepConnector';
 import type { StepIconProps } from '@mui/material/StepIcon';
 import styles from './styles.module.scss';
-import { ReactComponent as DoneLight } from '../../assets/images/stepper/done-light.svg';
-import { ReactComponent as ActiveLight } from '../../assets/images/stepper/active-light.svg';
-import { ReactComponent as DefaultLight } from '../../assets/images/stepper/disabled-light.svg';
-import { ReactComponent as DoneDark } from '../../assets/images/stepper/done-dark.svg';
-import { ReactComponent as ActiveDark } from '../../assets/images/stepper/active-dark.svg';
-import { ReactComponent as DefaultDark } from '../../assets/images/stepper/disabled-dark.svg';
+import DoneLight from '../../assets/images/stepper/done-light.svg?react';
+import ActiveLight from '../../assets/images/stepper/active-light.svg?react';
+import DefaultLight from '../../assets/images/stepper/disabled-light.svg?react';
+import DoneDark from '../../assets/images/stepper/done-dark.svg?react';
+import ActiveDark from '../../assets/images/stepper/active-dark.svg?react';
+import DefaultDark from '../../assets/images/stepper/disabled-dark.svg?react';
 
 export type StepperProgressBarProps = {
   steps: string[];
diff --git a/packages/webapp/src/components/Table/Header/TableHead.jsx b/packages/webapp/src/components/Table/Header/TableHead.jsx
index 0994f01b39..5f6f28fcaf 100644
--- a/packages/webapp/src/components/Table/Header/TableHead.jsx
+++ b/packages/webapp/src/components/Table/Header/TableHead.jsx
@@ -19,8 +19,8 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import clsx from 'clsx';
-import { ReactComponent as UnfoldCircle } from '../../../assets/images/unfold-circle.svg';
-import { ReactComponent as ArrowDownCircle } from '../../../assets/images/arrow-down-circle.svg';
+import UnfoldCircle from '../../../assets/images/unfold-circle.svg?react';
+import ArrowDownCircle from '../../../assets/images/arrow-down-circle.svg?react';
 import styles from '../styles.module.scss';
 
 export default function EnhancedTableHead({
diff --git a/packages/webapp/src/components/Task/AddProduct/index.jsx b/packages/webapp/src/components/Task/AddProduct/index.jsx
index 2307403d94..3b5227f907 100644
--- a/packages/webapp/src/components/Task/AddProduct/index.jsx
+++ b/packages/webapp/src/components/Task/AddProduct/index.jsx
@@ -1,6 +1,6 @@
 import { CreatableSelect } from '../../Form/ReactSelect';
 import { useEffect, useMemo, useState } from 'react';
-import { ReactComponent as Leaf } from '../../../assets/images/farmMapFilter/Leaf.svg';
+import Leaf from '../../../assets/images/farmMapFilter/Leaf.svg?react';
 import { useTranslation } from 'react-i18next';
 import Input, { getInputErrors } from '../../Form/Input';
 import RadioGroup from '../../Form/RadioGroup';
diff --git a/packages/webapp/src/components/Task/AddSoilAmendmentProducts/QuantityApplicationRate/index.tsx b/packages/webapp/src/components/Task/AddSoilAmendmentProducts/QuantityApplicationRate/index.tsx
index 893fcb355b..0f0394ecb8 100644
--- a/packages/webapp/src/components/Task/AddSoilAmendmentProducts/QuantityApplicationRate/index.tsx
+++ b/packages/webapp/src/components/Task/AddSoilAmendmentProducts/QuantityApplicationRate/index.tsx
@@ -20,7 +20,7 @@ import { useTranslation } from 'react-i18next';
 import { Collapse } from '@mui/material';
 import styles from './styles.module.scss';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowUp';
-import { ReactComponent as SwapIcon } from '../../../../assets/images/swap.svg';
+import SwapIcon from '../../../../assets/images/swap.svg?react';
 import TextButton from '../../../Form/Button/TextButton';
 import Switch from '../../../Form/Switch';
 import Unit from '../../../Form/Unit';
diff --git a/packages/webapp/src/components/Task/AddSoilAmendmentProducts/index.tsx b/packages/webapp/src/components/Task/AddSoilAmendmentProducts/index.tsx
index 39b5451687..8bc743febc 100644
--- a/packages/webapp/src/components/Task/AddSoilAmendmentProducts/index.tsx
+++ b/packages/webapp/src/components/Task/AddSoilAmendmentProducts/index.tsx
@@ -21,7 +21,7 @@ import TextButton from '../../Form/Button/TextButton';
 import { Label } from '../../Typography';
 import { type ProductId, TASK_PRODUCT_FIELD_NAMES } from './types';
 import type { SoilAmendmentProduct } from '../../../store/api/types';
-import { ReactComponent as PlusCircleIcon } from '../../../assets/images/plus-circle.svg';
+import PlusCircleIcon from '../../../assets/images/plus-circle.svg?react';
 import styles from './styles.module.scss';
 import { FlattenedInternalArea } from '../../../hooks/location/types';
 
diff --git a/packages/webapp/src/components/Task/PureTaskTypeSelection/PureManageCustomTasks.jsx b/packages/webapp/src/components/Task/PureTaskTypeSelection/PureManageCustomTasks.jsx
index ce375cb912..d9c682479c 100644
--- a/packages/webapp/src/components/Task/PureTaskTypeSelection/PureManageCustomTasks.jsx
+++ b/packages/webapp/src/components/Task/PureTaskTypeSelection/PureManageCustomTasks.jsx
@@ -6,7 +6,7 @@ import PageTitle from '../../PageTitle/v2';
 import { AddLink } from '../../Typography';
 import styles from './styles.module.scss';
 import clsx from 'clsx';
-import { ReactComponent as CustomTask } from '../../../assets/images/task/Custom.svg';
+import CustomTask from '../../../assets/images/task/Custom.svg?react';
 
 export const PureManageCustomTasks = ({
   handleGoBack,
@@ -53,25 +53,25 @@ export const PureManageCustomTasks = ({
           {customTasks
             .sort((firstEl, secondEl) => firstEl.task_name.localeCompare(secondEl.task_name))
             .map(({ task_translation_key, task_type_id, task_name }) => {
-            return (
-              <div
-                onClick={() => {
-                  onTileClick(task_type_id);
-                }}
-                key={task_type_id}
-              >
+              return (
                 <div
-                  className={clsx(
-                    styles.typeContainer,
-                    selected_task_type === task_type_id && styles.typeContainerSelected,
-                  )}
+                  onClick={() => {
+                    onTileClick(task_type_id);
+                  }}
+                  key={task_type_id}
                 >
-                  <CustomTask />
-                  <div className={styles.taskTypeLabelContainer}>{task_name}</div>
+                  <div
+                    className={clsx(
+                      styles.typeContainer,
+                      selected_task_type === task_type_id && styles.typeContainerSelected,
+                    )}
+                  >
+                    <CustomTask />
+                    <div className={styles.taskTypeLabelContainer}>{task_name}</div>
+                  </div>
                 </div>
-              </div>
-            );
-          })}
+              );
+            })}
         </div>
       </Form>
     </>
diff --git a/packages/webapp/src/components/Task/PureTaskTypeSelection/PureTaskTypeSelection.jsx b/packages/webapp/src/components/Task/PureTaskTypeSelection/PureTaskTypeSelection.jsx
index 8107e480e1..c87198931f 100644
--- a/packages/webapp/src/components/Task/PureTaskTypeSelection/PureTaskTypeSelection.jsx
+++ b/packages/webapp/src/components/Task/PureTaskTypeSelection/PureTaskTypeSelection.jsx
@@ -4,25 +4,25 @@ import Form from '../../Form';
 import MultiStepPageTitle from '../../PageTitle/MultiStepPageTitle';
 import { Main } from '../../Typography';
 import styles from './styles.module.scss';
-import { ReactComponent as CollectSoilSample } from '../../../assets/images/task/CollectSoilSample.svg';
-import { ReactComponent as Transport } from '../../../assets/images/task/Transport.svg';
-import { ReactComponent as Clean } from '../../../assets/images/task/Clean.svg';
-import { ReactComponent as Fertilize } from '../../../assets/images/task/Fertilize.svg';
-import { ReactComponent as FieldWork } from '../../../assets/images/task/FieldWork.svg';
-import { ReactComponent as Harvest } from '../../../assets/images/task/Harvest.svg';
-import { ReactComponent as Irrigation } from '../../../assets/images/task/Irrigation.svg';
-import { ReactComponent as Maintenance } from '../../../assets/images/task/Maintenance.svg';
-import { ReactComponent as PestControl } from '../../../assets/images/task/PestControl.svg';
-import { ReactComponent as Plant } from '../../../assets/images/task/Plant.svg';
-import { ReactComponent as RecordSoilSample } from '../../../assets/images/task/RecordSoilSample.svg';
-import { ReactComponent as Sales } from '../../../assets/images/task/Sales.svg';
-import { ReactComponent as Scout } from '../../../assets/images/task/Scout.svg';
-import { ReactComponent as SocialEvent } from '../../../assets/images/task/SocialEvent.svg';
-import { ReactComponent as SoilAmendment } from '../../../assets/images/task/SoilAmendment.svg';
-import { ReactComponent as Transplant } from '../../../assets/images/task/Transplant.svg';
-import { ReactComponent as WashAndPack } from '../../../assets/images/task/WashAndPack.svg';
-import { ReactComponent as Movement } from '../../../assets/images/task/Movement.svg';
-import { ReactComponent as CustomTask } from '../../../assets/images/task/Custom.svg';
+import CollectSoilSample from '../../../assets/images/task/CollectSoilSample.svg?react';
+import Transport from '../../../assets/images/task/Transport.svg?react';
+import Clean from '../../../assets/images/task/Clean.svg?react';
+import Fertilize from '../../../assets/images/task/Fertilize.svg?react';
+import FieldWork from '../../../assets/images/task/FieldWork.svg?react';
+import Harvest from '../../../assets/images/task/Harvest.svg?react';
+import Irrigation from '../../../assets/images/task/Irrigation.svg?react';
+import Maintenance from '../../../assets/images/task/Maintenance.svg?react';
+import PestControl from '../../../assets/images/task/PestControl.svg?react';
+import Plant from '../../../assets/images/task/Plant.svg?react';
+import RecordSoilSample from '../../../assets/images/task/RecordSoilSample.svg?react';
+import Sales from '../../../assets/images/task/Sales.svg?react';
+import Scout from '../../../assets/images/task/Scout.svg?react';
+import SocialEvent from '../../../assets/images/task/SocialEvent.svg?react';
+import SoilAmendment from '../../../assets/images/task/SoilAmendment.svg?react';
+import Transplant from '../../../assets/images/task/Transplant.svg?react';
+import WashAndPack from '../../../assets/images/task/WashAndPack.svg?react';
+import Movement from '../../../assets/images/task/Movement.svg?react';
+import CustomTask from '../../../assets/images/task/Custom.svg?react';
 import { useForm } from 'react-hook-form';
 import clsx from 'clsx';
 import { PlantingTaskModal } from '../../Modals/PlantingTaskModal';
diff --git a/packages/webapp/src/components/Task/TaskReadOnly/TransplantLocationLabel/TransplantLocationLabel.jsx b/packages/webapp/src/components/Task/TaskReadOnly/TransplantLocationLabel/TransplantLocationLabel.jsx
index d13a75db78..d691a421fb 100644
--- a/packages/webapp/src/components/Task/TaskReadOnly/TransplantLocationLabel/TransplantLocationLabel.jsx
+++ b/packages/webapp/src/components/Task/TaskReadOnly/TransplantLocationLabel/TransplantLocationLabel.jsx
@@ -1,6 +1,6 @@
 import { colors } from '../../../../assets/theme';
 import styles from './styles.module.scss';
-import { ReactComponent as MapPin } from '../../../../assets/images/map/map_pin.svg';
+import MapPin from '../../../../assets/images/map/map_pin.svg?react';
 import { Label } from '../../../Typography';
 import { useTranslation } from 'react-i18next';
 
diff --git a/packages/webapp/src/components/Task/TaskReadOnly/index.jsx b/packages/webapp/src/components/Task/TaskReadOnly/index.jsx
index ad77aee940..116f63afbe 100644
--- a/packages/webapp/src/components/Task/TaskReadOnly/index.jsx
+++ b/packages/webapp/src/components/Task/TaskReadOnly/index.jsx
@@ -46,7 +46,7 @@ import { isTaskType } from '../../../containers/Task/useIsTaskType';
 import ReactSelect from '../../Form/ReactSelect';
 import { BiPencil } from 'react-icons/bi';
 import { FiAlertTriangle } from 'react-icons/fi';
-import { ReactComponent as TrashIcon } from '../../../assets/images/document/trash.svg';
+import TrashIcon from '../../../assets/images/document/trash.svg?react';
 import TaskQuickAssignModal from '../../Modals/QuickAssignModal';
 import EditTaskWageModal from '../../Modals/EditTaskWageModal';
 import { getDateInputFormat } from '../../../util/moment';
diff --git a/packages/webapp/src/components/TileDashboard/MoreComponent/index.tsx b/packages/webapp/src/components/TileDashboard/MoreComponent/index.tsx
index 7578f5568a..caf8fa5512 100644
--- a/packages/webapp/src/components/TileDashboard/MoreComponent/index.tsx
+++ b/packages/webapp/src/components/TileDashboard/MoreComponent/index.tsx
@@ -19,7 +19,7 @@ import clsx from 'clsx';
 import { ClickAwayListener } from '@mui/material';
 import styles from './styles.module.scss';
 import { DashboardTile } from '../DashboardTile';
-import { ReactComponent as ChevronDown } from '../../../assets/images/animals/chevron-down.svg';
+import ChevronDown from '../../../assets/images/animals/chevron-down.svg?react';
 import TextButton from '../../Form/Button/TextButton';
 import { TypeCountTile, FilterId } from '..';
 
diff --git a/packages/webapp/src/components/Typography/index.tsx b/packages/webapp/src/components/Typography/index.tsx
index 9480b98347..e47a3700a3 100644
--- a/packages/webapp/src/components/Typography/index.tsx
+++ b/packages/webapp/src/components/Typography/index.tsx
@@ -3,10 +3,10 @@ import styles from './typography.module.scss';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import Infoi from '../Tooltip/Infoi';
-import { ReactComponent as Leaf } from '../../assets/images/farmMapFilter/Leaf.svg';
-import { ReactComponent as Pencil } from '../../assets/images/managementPlans/pencil.svg';
+import Leaf from '../../assets/images/farmMapFilter/Leaf.svg?react';
+import Pencil from '../../assets/images/managementPlans/pencil.svg?react';
 import { useTranslation } from 'react-i18next';
-import { ReactComponent as ExternalLinkIcon } from '../../assets/images/icon_external_link.svg';
+import ExternalLinkIcon from '../../assets/images/icon_external_link.svg?react';
 
 type TypographyProps = {
   style?: object;
diff --git a/packages/webapp/src/components/WelcomeScreen/index.jsx b/packages/webapp/src/components/WelcomeScreen/index.jsx
index cbcff89dbf..34e87c0f5a 100644
--- a/packages/webapp/src/components/WelcomeScreen/index.jsx
+++ b/packages/webapp/src/components/WelcomeScreen/index.jsx
@@ -1,13 +1,13 @@
 import Layout from '../Layout';
 import Button from '../Form/Button';
-import { ReactComponent as SignupEnglish } from '../../assets/images/signUp/signup_english.svg';
-import { ReactComponent as SignupSpanish } from '../../assets/images/signUp/signup_spanish.svg';
-import { ReactComponent as SignupPortuguese } from '../../assets/images/signUp/signup_portuguese.svg';
-import { ReactComponent as SignupFrench } from '../../assets/images/signUp/signup_french.svg';
-import { ReactComponent as SignupGerman } from '../../assets/images/signUp/signup_german.svg';
-import { ReactComponent as SignupHindi } from '../../assets/images/signUp/signup_hindi.svg';
-import { ReactComponent as SignupPunjabi } from '../../assets/images/signUp/signup_punjabi.svg';
-import { ReactComponent as SignupMalayalam } from '../../assets/images/signUp/signup_malayalam.svg';
+import SignupEnglish from '../../assets/images/signUp/signup_english.svg?react';
+import SignupSpanish from '../../assets/images/signUp/signup_spanish.svg?react';
+import SignupPortuguese from '../../assets/images/signUp/signup_portuguese.svg?react';
+import SignupFrench from '../../assets/images/signUp/signup_french.svg?react';
+import SignupGerman from '../../assets/images/signUp/signup_german.svg?react';
+import SignupHindi from '../../assets/images/signUp/signup_hindi.svg?react';
+import SignupPunjabi from '../../assets/images/signUp/signup_punjabi.svg?react';
+import SignupMalayalam from '../../assets/images/signUp/signup_malayalam.svg?react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { getLanguageFromLocalStorage } from '../../util/getLanguageFromLocalStorage';
diff --git a/packages/webapp/src/components/util/getNotificationTypeIcon.js b/packages/webapp/src/components/util/getNotificationTypeIcon.js
index 8b4ee52576..86a901c65a 100644
--- a/packages/webapp/src/components/util/getNotificationTypeIcon.js
+++ b/packages/webapp/src/components/util/getNotificationTypeIcon.js
@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-import { ReactComponent as NotificationPivotIcon } from '../../assets/images/irrigation/notification-pivot-icon.svg';
+import NotificationPivotIcon from '../../assets/images/irrigation/notification-pivot-icon.svg?react';
 
 /**
  * Provides the appropriate icon for a specified notification type.
diff --git a/packages/webapp/src/components/util/getTaskTypeIcon.js b/packages/webapp/src/components/util/getTaskTypeIcon.js
index 392270ca15..e927810581 100644
--- a/packages/webapp/src/components/util/getTaskTypeIcon.js
+++ b/packages/webapp/src/components/util/getTaskTypeIcon.js
@@ -1,19 +1,19 @@
-import { ReactComponent as CustomIcon } from '../../assets/images/task/Custom.svg';
-import { ReactComponent as RecordSoilSample } from '../../assets/images/task/RecordSoilSample.svg';
-import { ReactComponent as Sales } from '../../assets/images/task/Sales.svg';
-import { ReactComponent as Scout } from '../../assets/images/task/Scout.svg';
-import { ReactComponent as WashAndPack } from '../../assets/images/task/WashAndPack.svg';
-import { ReactComponent as Transplant } from '../../assets/images/task/Transplant.svg';
-import { ReactComponent as Harvest } from '../../assets/images/task/Harvest.svg';
-import { ReactComponent as PestControl } from '../../assets/images/task/PestControl.svg';
-import { ReactComponent as Irrigate } from '../../assets/images/task/Irrigate.svg';
-import { ReactComponent as Transport } from '../../assets/images/task/Transport.svg';
-import { ReactComponent as FieldWork } from '../../assets/images/task/FieldWork.svg';
-import { ReactComponent as Plant } from '../../assets/images/task/Plant.svg';
-import { ReactComponent as SocialEvent } from '../../assets/images/task/SocialEvent.svg';
-import { ReactComponent as Clean } from '../../assets/images/task/Clean.svg';
-import { ReactComponent as SoilAmendment } from '../../assets/images/task/SoilAmendment.svg';
-import { ReactComponent as Movement } from '../../assets/images/task/Movement.svg';
+import CustomIcon from '../../assets/images/task/Custom.svg?react';
+import RecordSoilSample from '../../assets/images/task/RecordSoilSample.svg?react';
+import Sales from '../../assets/images/task/Sales.svg?react';
+import Scout from '../../assets/images/task/Scout.svg?react';
+import WashAndPack from '../../assets/images/task/WashAndPack.svg?react';
+import Transplant from '../../assets/images/task/Transplant.svg?react';
+import Harvest from '../../assets/images/task/Harvest.svg?react';
+import PestControl from '../../assets/images/task/PestControl.svg?react';
+import Irrigate from '../../assets/images/task/Irrigate.svg?react';
+import Transport from '../../assets/images/task/Transport.svg?react';
+import FieldWork from '../../assets/images/task/FieldWork.svg?react';
+import Plant from '../../assets/images/task/Plant.svg?react';
+import SocialEvent from '../../assets/images/task/SocialEvent.svg?react';
+import Clean from '../../assets/images/task/Clean.svg?react';
+import SoilAmendment from '../../assets/images/task/SoilAmendment.svg?react';
+import Movement from '../../assets/images/task/Movement.svg?react';
 
 /**
  * Provides the appropriate icon for a specified task type.
diff --git a/packages/webapp/src/containers/AddFarm/index.jsx b/packages/webapp/src/containers/AddFarm/index.jsx
index 6eb6f14753..67e13b6ffd 100644
--- a/packages/webapp/src/containers/AddFarm/index.jsx
+++ b/packages/webapp/src/containers/AddFarm/index.jsx
@@ -12,9 +12,9 @@ import {
 import { useGoogleMapsLoader } from '../../hooks/useGoogleMapsLoader';
 import PureAddFarm from '../../components/AddFarm';
 import { patchFarm, postFarm } from './saga';
-import { ReactComponent as MapPin } from '../../assets/images/signUp/map_pin.svg';
-import { ReactComponent as MapErrorPin } from '../../assets/images/signUp/map_error_pin.svg';
-import { ReactComponent as LoadingAnimation } from '../../assets/images/signUp/animated_loading_farm.svg';
+import MapPin from '../../assets/images/signUp/map_pin.svg?react';
+import MapErrorPin from '../../assets/images/signUp/map_error_pin.svg?react';
+import LoadingAnimation from '../../assets/images/signUp/animated_loading_farm.svg?react';
 import { useTranslation } from 'react-i18next';
 import { getLanguageFromLocalStorage } from '../../util/getLanguageFromLocalStorage';
 import { useThrottle } from '../hooks/useThrottle';
diff --git a/packages/webapp/src/containers/Crop/AddManagementPlan/PlantingLocation/TransplantSpotlight.jsx b/packages/webapp/src/containers/Crop/AddManagementPlan/PlantingLocation/TransplantSpotlight.jsx
index 415dc69cb5..3022335ce3 100644
--- a/packages/webapp/src/containers/Crop/AddManagementPlan/PlantingLocation/TransplantSpotlight.jsx
+++ b/packages/webapp/src/containers/Crop/AddManagementPlan/PlantingLocation/TransplantSpotlight.jsx
@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { showedSpotlightSelector } from '../../../showedSpotlightSlice';
 import { setSpotlightToShown } from '../../../Map/saga';
 import React from 'react';
-import { ReactComponent as PlantIcon } from '../../../../assets/images/managementPlans/plant.svg';
+import PlantIcon from '../../../../assets/images/managementPlans/plant.svg?react';
 import { TourProviderWrapper } from '../../../../components/TourProviderWrapper/TourProviderWrapper';
 
 export default function TransplantSpotlight({ is_seed }) {
@@ -26,23 +26,24 @@ export default function TransplantSpotlight({ is_seed }) {
   // this is an unused variable, but it is required for the translation to work
   const spotlightText = t('MANAGEMENT_PLAN.TRANSPLANT_SPOTLIGHT.BODY.TEXT');
 
-  return <TourProviderWrapper
-    steps={[
-      {
-        title: t('MANAGEMENT_PLAN.TRANSPLANT_SPOTLIGHT.TITLE.TEXT', { fill: titleFill }),
-        contents: [
-          <Trans i18nKey={'MANAGEMENT_PLAN.TRANSPLANT_SPOTLIGHT.BODY.TEXT'}>
-            Please indicate where this crop will be initially
-            <strong>{{ fill: bodyFill }}</strong>. We’ll ask about where you’ll transplant it
-            to later.
-          </Trans>,
-        ],
-        position: 'center',
-        icon: <PlantIcon />,
-      },
-    ]}
-    open={showSpotlight}
-    onFinish={onFinish}
-  />;
-
+  return (
+    <TourProviderWrapper
+      steps={[
+        {
+          title: t('MANAGEMENT_PLAN.TRANSPLANT_SPOTLIGHT.TITLE.TEXT', { fill: titleFill }),
+          contents: [
+            <Trans key="body" i18nKey={'MANAGEMENT_PLAN.TRANSPLANT_SPOTLIGHT.BODY.TEXT'}>
+              Please indicate where this crop will be initially
+              <strong>{{ fill: bodyFill }}</strong>. We’ll ask about where you’ll transplant it to
+              later.
+            </Trans>,
+          ],
+          position: 'center',
+          icon: <PlantIcon />,
+        },
+      ]}
+      open={showSpotlight}
+      onFinish={onFinish}
+    />
+  );
 }
diff --git a/packages/webapp/src/containers/Documents/DocumentTile/index.jsx b/packages/webapp/src/containers/Documents/DocumentTile/index.jsx
index f958743fee..e63b611018 100644
--- a/packages/webapp/src/containers/Documents/DocumentTile/index.jsx
+++ b/packages/webapp/src/containers/Documents/DocumentTile/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './styles.module.scss';
 import clsx from 'clsx';
-import { ReactComponent as CalendarIcon } from '../../../assets/images/managementPlans/calendar.svg';
+import CalendarIcon from '../../../assets/images/managementPlans/calendar.svg?react';
 import PropTypes from 'prop-types';
 import { MediaWithAuthentication } from '../../../containers/MediaWithAuthentication';
 import { mediaEnum } from '../../../containers/MediaWithAuthentication/constants';
diff --git a/packages/webapp/src/containers/ErrorHandler/UnknownRecord/UnknownRecord.jsx b/packages/webapp/src/containers/ErrorHandler/UnknownRecord/UnknownRecord.jsx
index 873949cc51..730f49dff9 100644
--- a/packages/webapp/src/containers/ErrorHandler/UnknownRecord/UnknownRecord.jsx
+++ b/packages/webapp/src/containers/ErrorHandler/UnknownRecord/UnknownRecord.jsx
@@ -18,10 +18,10 @@ import { useTranslation } from 'react-i18next';
 import Layout from '../../../components/Layout';
 import Button from '../../../components/Form/Button';
 import PageTitle from '../../../components/PageTitle/v2';
-import { ReactComponent as DoesNotExistSplash } from '../../../assets/images/does-not-exist.svg';
+import DoesNotExistSplash from '../../../assets/images/does-not-exist.svg?react';
 import { Title } from '../../../components/Typography';
 import { makeStyles } from '@mui/styles';
-import { ReactComponent as Sunglasses } from '../../../assets/images/miscs/smiling-face-with-sunglasses-emoji.svg';
+import Sunglasses from '../../../assets/images/miscs/smiling-face-with-sunglasses-emoji.svg?react';
 
 const useStyles = makeStyles((theme) => ({
   line: {
diff --git a/packages/webapp/src/containers/FarmNotes/index.tsx b/packages/webapp/src/containers/FarmNotes/index.tsx
index d9f599168c..19751a1205 100644
--- a/packages/webapp/src/containers/FarmNotes/index.tsx
+++ b/packages/webapp/src/containers/FarmNotes/index.tsx
@@ -24,7 +24,7 @@ import {
   useMarkFarmNotesReadMutation,
 } from '../../store/api/farmNotesReadApi';
 import type { FarmNote } from '../../store/api/types';
-import { ReactComponent as MessageTextSquareIcon } from '../../assets/images/message-text-square-02.svg';
+import MessageTextSquareIcon from '../../assets/images/message-text-square-02.svg?react';
 import FarmNoteFormContainer from './FarmNoteForm';
 import FarmNoteList from '../../components/FarmNotes/FarmNoteList/';
 import Spinner from '../../components/Spinner';
diff --git a/packages/webapp/src/containers/FeedbackSurvey/index.jsx b/packages/webapp/src/containers/FeedbackSurvey/index.jsx
index bb42714b12..bb9014318f 100644
--- a/packages/webapp/src/containers/FeedbackSurvey/index.jsx
+++ b/packages/webapp/src/containers/FeedbackSurvey/index.jsx
@@ -16,7 +16,7 @@
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
 import TextButton from '../../components/Form/Button/TextButton';
-import { ReactComponent as SendIcon } from '../../assets/images/send-icon.svg';
+import SendIcon from '../../assets/images/send-icon.svg?react';
 import styles from './styles.module.scss';
 import Drawer, { DesktopDrawerVariants } from '../../components/Drawer';
 import HelpRequest from '../Help';
diff --git a/packages/webapp/src/containers/Finances/Report/index.jsx b/packages/webapp/src/containers/Finances/Report/index.jsx
index 34452d9b0c..d36f831ede 100644
--- a/packages/webapp/src/containers/Finances/Report/index.jsx
+++ b/packages/webapp/src/containers/Finances/Report/index.jsx
@@ -16,7 +16,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import { ReactComponent as ReportIcon } from '../../../assets/images/finance/Report-icn.svg';
+import ReportIcon from '../../../assets/images/finance/Report-icn.svg?react';
 import Drawer from '../../../components/Drawer';
 import FinancesDateRangeSelector from '../../../components/Finances/DateRangeSelector';
 import Button from '../../../components/Form/Button';
diff --git a/packages/webapp/src/containers/MediaWithAuthentication/index.jsx b/packages/webapp/src/containers/MediaWithAuthentication/index.jsx
index 5a08521570..9331663844 100644
--- a/packages/webapp/src/containers/MediaWithAuthentication/index.jsx
+++ b/packages/webapp/src/containers/MediaWithAuthentication/index.jsx
@@ -1,4 +1,4 @@
-import { ReactComponent as Download } from '../../assets/images/farmMapFilter/Download.svg';
+import Download from '../../assets/images/farmMapFilter/Download.svg?react';
 import useMediaWithAuthentication from '../hooks/useMediaWithAuthentication';
 import { mediaEnum } from './constants';
 
diff --git a/packages/webapp/src/containers/OfflineIndicator/index.jsx b/packages/webapp/src/containers/OfflineIndicator/index.jsx
index 9264b6cd57..e521797393 100644
--- a/packages/webapp/src/containers/OfflineIndicator/index.jsx
+++ b/packages/webapp/src/containers/OfflineIndicator/index.jsx
@@ -20,7 +20,7 @@ import { useIsOffline } from '../hooks/useOfflineDetector/useIsOffline';
 import { useOfflineReadiness } from '../../hooks/useOfflineReadiness/useOfflineReadiness';
 import styles from './styles.module.scss';
 import Badge from '../../components/Badge';
-import { ReactComponent as RefreshIcon } from '../../assets/images/refresh-cw.svg';
+import RefreshIcon from '../../assets/images/refresh-cw.svg?react';
 
 function TransitionDown(props) {
   return <Slide {...props} direction="down" />;
diff --git a/packages/webapp/src/containers/ProductInventory/ProductForm/index.tsx b/packages/webapp/src/containers/ProductInventory/ProductForm/index.tsx
index 68b06b7984..7508a226bb 100644
--- a/packages/webapp/src/containers/ProductInventory/ProductForm/index.tsx
+++ b/packages/webapp/src/containers/ProductInventory/ProductForm/index.tsx
@@ -23,9 +23,9 @@ import Drawer, { DesktopDrawerVariants } from '../../../components/Drawer';
 import InFormButtons from '../../../components/Form/InFormButtons';
 import TextButton from '../../../components/Form/Button/TextButton';
 import SoilAmendmentProductForm from './SoilAmendmentProductForm';
-import { ReactComponent as EditIcon } from '../../../assets/images/edit.svg';
-import { ReactComponent as CopyIcon } from '../../../assets/images/copy-01.svg';
-import { ReactComponent as TrashIcon } from '../../../assets/images/animals/trash_icon_new.svg';
+import EditIcon from '../../../assets/images/edit.svg?react';
+import CopyIcon from '../../../assets/images/copy-01.svg?react';
+import TrashIcon from '../../../assets/images/animals/trash_icon_new.svg?react';
 import useSaveProduct, { type SoilAmendmentProductFormAllFields } from './useSaveProduct';
 import useRemoveProduct, { ModalType } from './useRemoveProduct';
 import RemoveProductConfirmationModal from '../../../components/Modals/RemoveProductConfirmationModal';
diff --git a/packages/webapp/src/containers/ProductInventory/index.tsx b/packages/webapp/src/containers/ProductInventory/index.tsx
index 62ce00495c..a5d6107e24 100644
--- a/packages/webapp/src/containers/ProductInventory/index.tsx
+++ b/packages/webapp/src/containers/ProductInventory/index.tsx
@@ -20,7 +20,7 @@ import { useTheme } from '@mui/styles';
 import { useMediaQuery } from '@mui/material';
 import animalInventoryStyles from '../Animals/Inventory/styles.module.scss';
 import styles from './styles.module.scss';
-import { ReactComponent as BookIcon } from '../../assets/images/book-closed.svg';
+import BookIcon from '../../assets/images/book-closed.svg?react';
 import useSearchFilter from '../../containers/hooks/useSearchFilter';
 import PureProductInventory from '../../components/ProductInventory';
 import { getProducts } from '../Task/saga';
diff --git a/packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/DataSummary/index.tsx b/packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/DataSummary/index.tsx
index 7dec2089be..3888be376e 100644
--- a/packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/DataSummary/index.tsx
+++ b/packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/DataSummary/index.tsx
@@ -18,8 +18,8 @@ import { Collapse } from '@mui/material';
 import useExpandable from '../../../../../components/Expandable/useExpandableItem';
 import TextButton from '../../../../../components/Form/Button/TextButton';
 import PrivateBadge from '../../../../../components/SimpleBadges/PrivateBadge';
-import { ReactComponent as PlusSquareIcon } from '../../../../../assets/images/plus-square.svg';
-import { ReactComponent as MinusSquareIcon } from '../../../../../assets/images/minus-square.svg';
+import PlusSquareIcon from '../../../../../assets/images/plus-square.svg?react';
+import MinusSquareIcon from '../../../../../assets/images/minus-square.svg?react';
 import { MarketDirectoryInfo } from '../../../../../store/api/types';
 import styles from './styles.module.scss';
 
diff --git a/packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/index.tsx b/packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/index.tsx
index 8b410b1179..0db8b71a23 100644
--- a/packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/index.tsx
+++ b/packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/index.tsx
@@ -25,8 +25,8 @@ import RouterTab from '../../../../components/RouterTab';
 import { Variant as TabVariants } from '../../../../components/RouterTab/Tab';
 import ExpandableItem from '../../../../components/Expandable/ExpandableItem';
 import useExpandable from '../../../../components/Expandable/useExpandableItem';
-import { ReactComponent as CheckComplete } from '../../../../assets/images/check-complete.svg';
-import { ReactComponent as CheckIncomplete } from '../../../../assets/images/check-incomplete.svg';
+import CheckComplete from '../../../../assets/images/check-complete.svg?react';
+import CheckIncomplete from '../../../../assets/images/check-incomplete.svg?react';
 import MarketDirectoryInfoForm from './InfoForm';
 import MarketDirectoryConsent from './Consent';
 import { useGetMarketDirectoryInfoQuery } from '../../../../store/api/marketDirectoryInfoApi';
diff --git a/packages/webapp/src/containers/SensorReadings/v2/index.tsx b/packages/webapp/src/containers/SensorReadings/v2/index.tsx
index fd654b7423..96710cac6c 100644
--- a/packages/webapp/src/containers/SensorReadings/v2/index.tsx
+++ b/packages/webapp/src/containers/SensorReadings/v2/index.tsx
@@ -23,7 +23,7 @@ import SensorsDateRangeSelector from '../../../components/Sensor/v2/SensorsDateR
 import LatestReadings from './LatestReadings';
 import Charts, { ChartsProps } from './Charts';
 import { StatusIndicatorPill } from '../../../components/StatusIndicatorPill';
-import { ReactComponent as SensorIcon } from '../../../assets/images/map/signal-01.svg';
+import SensorIcon from '../../../assets/images/map/signal-01.svg?react';
 import useSensorsDateRange from '../../../components/Sensor/v2/SensorsDateRange/useSensorsDateRange';
 import ManageESciSection from '../../../components/ManageESciSection';
 import { useGetSensorsQuery } from '../../../store/api/apiSlice';
diff --git a/packages/webapp/src/containers/Spotlights/BetaSpotlight.tsx b/packages/webapp/src/containers/Spotlights/BetaSpotlight.tsx
index 20fbb94570..669fa84b2f 100644
--- a/packages/webapp/src/containers/Spotlights/BetaSpotlight.tsx
+++ b/packages/webapp/src/containers/Spotlights/BetaSpotlight.tsx
@@ -20,7 +20,7 @@ import { setSpotlightToShown } from '../Map/saga';
 import { showedSpotlightSelector } from '../showedSpotlightSlice';
 import { Trans } from 'react-i18next';
 import Badge from '../../components/Badge';
-import { ReactComponent as SendIcon } from '../../assets/images/send-icon.svg';
+import SendIcon from '../../assets/images/send-icon.svg?react';
 import styles from './styles.module.scss';
 import { BETA_BADGE_LINK } from '../../util/constants';
 import { ReactElement } from 'react';
diff --git a/packages/webapp/src/hooks/useGetMenuItems.jsx b/packages/webapp/src/hooks/useGetMenuItems.jsx
index d75b88222b..d8a888fad4 100644
--- a/packages/webapp/src/hooks/useGetMenuItems.jsx
+++ b/packages/webapp/src/hooks/useGetMenuItems.jsx
@@ -13,17 +13,17 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-import { ReactComponent as MapIcon } from '../assets/images/nav/map.svg';
-import { ReactComponent as TasksIcon } from '../assets/images/nav/tasks.svg';
-import { ReactComponent as CropsIcon } from '../assets/images/nav/crops.svg';
-import { ReactComponent as AnimalsIcon } from '../assets/images/nav/animals.svg';
-import { ReactComponent as FinancesIcon } from '../assets/images/nav/finances.svg';
-import { ReactComponent as InsightsIcon } from '../assets/images/nav/insights.svg';
-import { ReactComponent as DocumentsIcon } from '../assets/images/nav/documents.svg';
-import { ReactComponent as FarmSettingsIcon } from '../assets/images/nav/farmSettings.svg';
-import { ReactComponent as PeopleIcon } from '../assets/images/nav/people.svg';
-import { ReactComponent as CertificationsIcon } from '../assets/images/nav/certifications.svg';
-import { ReactComponent as InventoryIcon } from '../assets/images/nav/package.svg';
+import MapIcon from '../assets/images/nav/map.svg?react';
+import TasksIcon from '../assets/images/nav/tasks.svg?react';
+import CropsIcon from '../assets/images/nav/crops.svg?react';
+import AnimalsIcon from '../assets/images/nav/animals.svg?react';
+import FinancesIcon from '../assets/images/nav/finances.svg?react';
+import InsightsIcon from '../assets/images/nav/insights.svg?react';
+import DocumentsIcon from '../assets/images/nav/documents.svg?react';
+import FarmSettingsIcon from '../assets/images/nav/farmSettings.svg?react';
+import PeopleIcon from '../assets/images/nav/people.svg?react';
+import CertificationsIcon from '../assets/images/nav/certifications.svg?react';
+import InventoryIcon from '../assets/images/nav/package.svg?react';
 import { useTranslation } from 'react-i18next';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
diff --git a/packages/webapp/src/stories/Button/Button.stories.jsx b/packages/webapp/src/stories/Button/Button.stories.jsx
index 8810108352..58ad071276 100644
--- a/packages/webapp/src/stories/Button/Button.stories.jsx
+++ b/packages/webapp/src/stories/Button/Button.stories.jsx
@@ -1,6 +1,6 @@
 import Button from '../../components/Form/Button';
 import { componentDecorators } from '../Pages/config/Decorators';
-import { ReactComponent as EditIcon } from '../../assets/images/edit.svg';
+import EditIcon from '../../assets/images/edit.svg?react';
 
 export default {
   title: 'Components/Button',
diff --git a/packages/webapp/src/stories/ContainerWithIcon/ContainerWithIcon.stories.jsx b/packages/webapp/src/stories/ContainerWithIcon/ContainerWithIcon.stories.jsx
index 3a178ac393..8bcbe818db 100644
--- a/packages/webapp/src/stories/ContainerWithIcon/ContainerWithIcon.stories.jsx
+++ b/packages/webapp/src/stories/ContainerWithIcon/ContainerWithIcon.stories.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { ContainerWithIcon } from '../../components/ContainerWithIcon/ContainerWithIcon';
 import { componentDecorators } from '../Pages/config/Decorators';
-import { ReactComponent as TrashIcon } from '../../assets/images/document/trash.svg';
+import TrashIcon from '../../assets/images/document/trash.svg?react';
 
 export default {
   title: 'Components/ContainerWithIcon',
diff --git a/packages/webapp/src/stories/Form/DateTimeInputs/DateInput.stories.tsx b/packages/webapp/src/stories/Form/DateTimeInputs/DateInput.stories.tsx
index 3a1b081713..b9e226d164 100644
--- a/packages/webapp/src/stories/Form/DateTimeInputs/DateInput.stories.tsx
+++ b/packages/webapp/src/stories/Form/DateTimeInputs/DateInput.stories.tsx
@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-import { Meta, StoryObj } from '@storybook/react/*';
+import { Meta, StoryObj } from '@storybook/react';
 import styles from './styles.module.scss';
 import { DateInput } from '../../../components/Inputs/DateTime';
 import { componentDecorators } from '../../Pages/config/Decorators';
diff --git a/packages/webapp/src/stories/Form/DateTimeInputs/TimeInput.stories.tsx b/packages/webapp/src/stories/Form/DateTimeInputs/TimeInput.stories.tsx
index 79e422453a..7d8ecdb7bd 100644
--- a/packages/webapp/src/stories/Form/DateTimeInputs/TimeInput.stories.tsx
+++ b/packages/webapp/src/stories/Form/DateTimeInputs/TimeInput.stories.tsx
@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-import { Meta, StoryObj } from '@storybook/react/*';
+import { Meta, StoryObj } from '@storybook/react';
 import styles from './styles.module.scss';
 import { TimeInput } from '../../../components/Inputs/DateTime';
 import { componentDecorators } from '../../Pages/config/Decorators';
diff --git a/packages/webapp/src/stories/IrrigationPrescription/IrrigationPrescriptionMapView.stories.tsx b/packages/webapp/src/stories/IrrigationPrescription/IrrigationPrescriptionMapView.stories.tsx
index bde8f7d7c7..4366283f7b 100644
--- a/packages/webapp/src/stories/IrrigationPrescription/IrrigationPrescriptionMapView.stories.tsx
+++ b/packages/webapp/src/stories/IrrigationPrescription/IrrigationPrescriptionMapView.stories.tsx
@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-import { Meta, StoryObj } from '@storybook/react/*';
+import { Meta, StoryObj } from '@storybook/react';
 import PureIrrigationPrescriptionMapView from '../../components/IrrigationPrescription/IrrigationPrescriptionMapView';
 import styles from './styles.module.scss';
 import { mockField, mockPivot, mockVriZones, mockVriZonesFive } from './mockData';
diff --git a/packages/webapp/src/stories/IrrigationPrescription/PureIrrigationPrescription.stories.tsx b/packages/webapp/src/stories/IrrigationPrescription/PureIrrigationPrescription.stories.tsx
index f0bafa261c..403f856678 100644
--- a/packages/webapp/src/stories/IrrigationPrescription/PureIrrigationPrescription.stories.tsx
+++ b/packages/webapp/src/stories/IrrigationPrescription/PureIrrigationPrescription.stories.tsx
@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-import { Meta, StoryObj } from '@storybook/react/*';
+import { Meta, StoryObj } from '@storybook/react';
 import PureIrrigationPrescription from '../../components/IrrigationPrescription/';
 import { mockField, mockPivot, mockUriData, mockVriZones, mockVriZonesFive } from './mockData';
 import decorators from '../Pages/config/Decorators';
diff --git a/packages/webapp/src/stories/Modal/FileSizeExceedModal.stories.tsx b/packages/webapp/src/stories/Modal/FileSizeExceedModal.stories.tsx
index 6faf14371b..267683e283 100644
--- a/packages/webapp/src/stories/Modal/FileSizeExceedModal.stories.tsx
+++ b/packages/webapp/src/stories/Modal/FileSizeExceedModal.stories.tsx
@@ -1,7 +1,7 @@
 import FileSizeExceedModal from '../../components/Modals/FileSizeExceedModal';
 import { componentDecorators } from '../Pages/config/Decorators';
 import { chromaticSmallScreen } from '../Pages/config/chromatic';
-import type { Meta, StoryObj } from '@storybook/react/*';
+import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof FileSizeExceedModal> = {
   title: 'Components/Modals/FileSizeExceedModal',
diff --git a/packages/webapp/src/stories/Modal/ModalComponentV2.stories.jsx b/packages/webapp/src/stories/Modal/ModalComponentV2.stories.jsx
index 8e45c899b6..ba6713298c 100644
--- a/packages/webapp/src/stories/Modal/ModalComponentV2.stories.jsx
+++ b/packages/webapp/src/stories/Modal/ModalComponentV2.stories.jsx
@@ -4,7 +4,7 @@ import { componentDecorators } from '../Pages/config/Decorators';
 import { Label } from '../../components/Typography';
 import Button from '../../components/Form/Button';
 import { chromaticSmallScreen } from '../Pages/config/chromatic';
-import { ReactComponent as Email } from '../../assets/images/export/email/Email.svg';
+import Email from '../../assets/images/export/email/Email.svg?react';
 
 export default {
   title: 'Components/Modals/ModalComponentV2',
diff --git a/packages/webapp/src/stories/Modal/ModalComponentV3.stories.tsx b/packages/webapp/src/stories/Modal/ModalComponentV3.stories.tsx
index 05ae848c78..04eab92870 100644
--- a/packages/webapp/src/stories/Modal/ModalComponentV3.stories.tsx
+++ b/packages/webapp/src/stories/Modal/ModalComponentV3.stories.tsx
@@ -13,12 +13,12 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-import { Meta, StoryObj } from '@storybook/react/*';
+import { Meta, StoryObj } from '@storybook/react';
 import { componentDecorators } from '../Pages/config/Decorators';
 import ModalComponent, { ModalComponentProps } from '../../components/Modals/ModalComponent/v3';
 import { Label } from '../../components/Typography';
 import Button from '../../components/Form/Button';
-import { ReactComponent as Email } from '../../assets/images/export/email/Email.svg';
+import Email from '../../assets/images/export/email/Email.svg?react';
 
 export default {
   title: 'Components/Modals/ModalComponentV3',
diff --git a/packages/webapp/src/stories/OverviewStats/OverviewStats.stories.tsx b/packages/webapp/src/stories/OverviewStats/OverviewStats.stories.tsx
index becacd160a..5bd0616411 100644
--- a/packages/webapp/src/stories/OverviewStats/OverviewStats.stories.tsx
+++ b/packages/webapp/src/stories/OverviewStats/OverviewStats.stories.tsx
@@ -16,8 +16,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 import OverviewStats, { OverviewStatsProps } from '../../components/OverviewStats';
 import { componentDecorators } from '../Pages/config/Decorators';
-import { ReactComponent as SensorIcon } from '../../assets/images/map/signal-01.svg';
-import { ReactComponent as SensorArrayIcon } from '../../assets/images/farmMapFilter/SensorArray.svg';
+import SensorIcon from '../../assets/images/map/signal-01.svg?react';
+import SensorArrayIcon from '../../assets/images/farmMapFilter/SensorArray.svg?react';
 import styles from './styles.module.scss';
 
 // https://storybook.js.org/docs/writing-stories/typescript
diff --git a/packages/webapp/src/stories/Pages/Map/DrawerMenuItem/DrawerMenuItem.stories.jsx b/packages/webapp/src/stories/Pages/Map/DrawerMenuItem/DrawerMenuItem.stories.jsx
index f6b12db2b1..03a3008770 100644
--- a/packages/webapp/src/stories/Pages/Map/DrawerMenuItem/DrawerMenuItem.stories.jsx
+++ b/packages/webapp/src/stories/Pages/Map/DrawerMenuItem/DrawerMenuItem.stories.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { componentDecoratorsGreyBackground } from '../../config/Decorators';
 import MapDrawerMenuItem from '../../../../components/MapDrawer/MapDrawerMenuItem';
-import { ReactComponent as MapBackground } from '../../../../assets/images/farmMapFilter/MapBackground.svg';
+import MapBackground from '../../../../assets/images/farmMapFilter/MapBackground.svg?react';
 
 export default {
   title: 'Components/Map/MapDrawerMenuItem',
diff --git a/packages/webapp/src/stories/Tab/Tab.stories.jsx b/packages/webapp/src/stories/Tab/Tab.stories.jsx
index c1b3a45d66..fd569bde9b 100644
--- a/packages/webapp/src/stories/Tab/Tab.stories.jsx
+++ b/packages/webapp/src/stories/Tab/Tab.stories.jsx
@@ -17,7 +17,7 @@ import { useState } from 'react';
 import clsx from 'clsx';
 import Tab from '../../components/RouterTab/Tab';
 import { componentDecorators } from '../Pages/config/Decorators';
-import { ReactComponent as TasksIcon } from '../../assets/images/nav/tasks.svg';
+import TasksIcon from '../../assets/images/nav/tasks.svg?react';
 import styles from './styles.module.scss';
 
 export default {
diff --git a/packages/webapp/src/stories/Tile/DescriptionList/DescriptionList.stories.tsx b/packages/webapp/src/stories/Tile/DescriptionList/DescriptionList.stories.tsx
index 7d63260d90..10aefd1258 100644
--- a/packages/webapp/src/stories/Tile/DescriptionList/DescriptionList.stories.tsx
+++ b/packages/webapp/src/stories/Tile/DescriptionList/DescriptionList.stories.tsx
@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-import { Meta, StoryObj } from '@storybook/react/*';
+import { Meta, StoryObj } from '@storybook/react';
 import DescriptionList, { LabelSize } from '../../../components/Tile/DescriptionList';
 import { iPData, backgroundIconData, dataWithIconData, mockTextData } from './mockData';
 import weatherKPIStyle from '../../../containers/SensorReadings/v2/styles.module.scss';
diff --git a/packages/webapp/src/stories/Tile/DescriptionList/mockData.tsx b/packages/webapp/src/stories/Tile/DescriptionList/mockData.tsx
index a113cf15fa..64dd44c7b8 100644
--- a/packages/webapp/src/stories/Tile/DescriptionList/mockData.tsx
+++ b/packages/webapp/src/stories/Tile/DescriptionList/mockData.tsx
@@ -15,9 +15,9 @@
 
 import { IconAndText } from '../../../components/IrrigationPrescriptionKPI/util';
 import { LabelSize } from '../../../components/Tile/DescriptionList';
-import { ReactComponent as WindIcon } from '../../../assets/images/weather/wind.svg';
-import { ReactComponent as RainfallIcon } from '../../../assets/images/weather/droplets.svg';
-import { ReactComponent as ThemometerWarmIcon } from '../../../assets/images/weather/thermometer-warm.svg';
+import WindIcon from '../../../assets/images/weather/wind.svg?react';
+import RainfallIcon from '../../../assets/images/weather/droplets.svg?react';
+import ThemometerWarmIcon from '../../../assets/images/weather/thermometer-warm.svg?react';
 import WeatherIcon from '../../../components/WeatherBoard/WeatherIcon';
 import PivotIcon from '../../../assets/images/irrigation/pivot-icon.svg';
 import ClockIcon from '../../../assets/images/clock-stopwatch.svg';
diff --git a/packages/webapp/src/stories/Tile/IconLabelTile.stories.jsx b/packages/webapp/src/stories/Tile/IconLabelTile.stories.jsx
index 6ce198273a..fc27446959 100644
--- a/packages/webapp/src/stories/Tile/IconLabelTile.stories.jsx
+++ b/packages/webapp/src/stories/Tile/IconLabelTile.stories.jsx
@@ -15,7 +15,7 @@
 import React from 'react';
 import IconLabelTile from '../../components/Tile/IconLabelTile';
 import { componentDecorators } from '../Pages/config/Decorators';
-import { ReactComponent as SoilAmendment } from '../../assets/images/task/SoilAmendment.svg';
+import SoilAmendment from '../../assets/images/task/SoilAmendment.svg?react';
 
 export default {
   title: 'Components/Tile/IconLabelTile',
diff --git a/packages/webapp/src/stories/Tile/Tiles.stories.jsx b/packages/webapp/src/stories/Tile/Tiles.stories.jsx
index 93c9e9431e..f3423adbd1 100644
--- a/packages/webapp/src/stories/Tile/Tiles.stories.jsx
+++ b/packages/webapp/src/stories/Tile/Tiles.stories.jsx
@@ -19,7 +19,7 @@ import { componentDecorators } from '../Pages/config/Decorators';
 import Tiles from '../../components/Tile/Tiles';
 import IconLabelTile from '../../components/Tile/IconLabelTile';
 import { tileTypes } from '../../components/Tile/constants';
-import { ReactComponent as SoilAmendment } from '../../assets/images/task/SoilAmendment.svg';
+import SoilAmendment from '../../assets/images/task/SoilAmendment.svg?react';
 
 export default {
   title: 'Components/Tile/Tiles',
diff --git a/packages/webapp/src/stories/TileDashboard/subcomponents/DashboardTile.stories.tsx b/packages/webapp/src/stories/TileDashboard/subcomponents/DashboardTile.stories.tsx
index d6e1109a7e..bcc5ffacd5 100644
--- a/packages/webapp/src/stories/TileDashboard/subcomponents/DashboardTile.stories.tsx
+++ b/packages/webapp/src/stories/TileDashboard/subcomponents/DashboardTile.stories.tsx
@@ -16,7 +16,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { componentDecorators } from '../../Pages/config/Decorators';
 import { DashboardTile } from '../../../components/TileDashboard/DashboardTile';
-import { ReactComponent as CattleIcon } from '../../../assets/images/animals/cattle-icon.svg';
+import CattleIcon from '../../../assets/images/animals/cattle-icon.svg?react';
 
 // https://storybook.js.org/docs/writing-stories/typescript
 const meta: Meta<typeof DashboardTile> = {
diff --git a/packages/webapp/tsconfig.json b/packages/webapp/tsconfig.json
index 1fd4b8b5e4..83da268c3f 100644
--- a/packages/webapp/tsconfig.json
+++ b/packages/webapp/tsconfig.json
@@ -11,7 +11,7 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
diff --git a/packages/webapp/tsconfig.node.json b/packages/webapp/tsconfig.node.json
index 9d31e2aed9..16dfedc6a6 100644
--- a/packages/webapp/tsconfig.node.json
+++ b/packages/webapp/tsconfig.node.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "composite": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "Bundler",
     "allowSyntheticDefaultImports": true
   },
   "include": ["vite.config.ts"]
diff --git a/packages/webapp/vite.config.ts b/packages/webapp/vite.config.ts
index 07ce647efc..88bb603be0 100644
--- a/packages/webapp/vite.config.ts
+++ b/packages/webapp/vite.config.ts
@@ -11,9 +11,7 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       scss: {
-        // see https://sass-lang.com/d/legacy-js-api
-        // api: 'modern-compiler' requires Vite 5.4+
-        silenceDeprecations: ['legacy-js-api'],
+        api: 'modern-compiler',
       },
     },
   },