refactor(renderCard): MUCH nicer + less package weight

.prettierignore

@@ -1 +0,0 @@
-src/utils/renderCard.tsx

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "app-router",
+  "name": "lanyard-profile-readme",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -10,8 +10,6 @@
   },
   "packageManager": "pnpm@9.11.0",
   "dependencies": {
-    "@emotion/css": "^11.13.4",
-    "@emotion/server": "^11.11.0",
     "@radix-ui/react-popover": "^1.1.2",
     "@types/escape-html": "^1.0.4",
     "class-variance-authority": "^0.7.0",
@@ -24,11 +22,9 @@
     "next": "15.0.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "sharp": "^0.33.5",
     "swr": "^2.2.5",
     "tailwind-merge": "^2.5.4",
-    "tailwindcss-animate": "^1.0.7",
-    "use-smooth-count": "^1.0.1"
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@types/node": "^20",

pnpm-lock.yaml

@@ -8,12 +8,6 @@ importers:
 
   .:
     dependencies:
-      '@emotion/css':
-        specifier: ^11.13.4
-        version: 11.13.4
-      '@emotion/server':
-        specifier: ^11.11.0
-        version: 11.11.0(@emotion/css@11.13.4)
       '@radix-ui/react-popover':
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -50,9 +44,6 @@ importers:
       react-dom:
         specifier: 18.3.1
         version: 18.3.1(react@18.3.1)
-      sharp:
-        specifier: ^0.33.5
-        version: 0.33.5
       swr:
         specifier: ^2.2.5
         version: 2.2.5(react@18.3.1)
@@ -62,9 +53,6 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.14)
-      use-smooth-count:
-        specifier: ^1.0.1
-        version: 1.0.1(react@18.3.1)
     devDependencies:
       '@types/node':
         specifier: ^20
@@ -103,94 +91,19 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
-  '@babel/code-frame@7.26.2':
-    resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/generator@7.26.2':
-    resolution: {integrity: sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-imports@7.25.9':
-    resolution: {integrity: sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-string-parser@7.25.9':
-    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-validator-identifier@7.25.9':
-    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/parser@7.26.2':
-    resolution: {integrity: sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
   '@babel/runtime@7.25.9':
     resolution: {integrity: sha512-4zpTHZ9Cm6L9L+uIqghQX8ZXg8HKFcjYO3qHoO8zTmRm6HQUJ8SSJ+KRvbMBZn0EGVlT4DRYeQ/6hjlyXBh+Kg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/template@7.25.9':
-    resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/traverse@7.25.9':
-    resolution: {integrity: sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/types@7.26.0':
-    resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
-    engines: {node: '>=6.9.0'}
-
   '@emnapi/runtime@1.3.1':
     resolution: {integrity: sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==}
 
-  '@emotion/babel-plugin@11.12.0':
-    resolution: {integrity: sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==}
-
-  '@emotion/cache@11.13.1':
-    resolution: {integrity: sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==}
-
-  '@emotion/css@11.13.4':
-    resolution: {integrity: sha512-CthbOD5EBw+iN0rfM96Tuv5kaZN4nxPyYDvGUs0bc7wZBBiU/0mse+l+0O9RshW2d+v5HH1cme+BAbLJ/3Folw==}
-
-  '@emotion/hash@0.9.2':
-    resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
-
   '@emotion/is-prop-valid@0.8.8':
     resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
 
   '@emotion/memoize@0.7.4':
     resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
 
-  '@emotion/memoize@0.9.0':
-    resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
-
-  '@emotion/serialize@1.3.2':
-    resolution: {integrity: sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==}
-
-  '@emotion/server@11.11.0':
-    resolution: {integrity: sha512-6q89fj2z8VBTx9w93kJ5n51hsmtYuFPtZgnc1L8VzRx9ti4EU6EyvF6Nn1H1x3vcCQCF7u2dB2lY4AYJwUW4PA==}
-    peerDependencies:
-      '@emotion/css': ^11.0.0-rc.0
-    peerDependenciesMeta:
-      '@emotion/css':
-        optional: true
-
-  '@emotion/sheet@1.4.0':
-    resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==}
-
-  '@emotion/unitless@0.10.0':
-    resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==}
-
-  '@emotion/utils@1.4.1':
-    resolution: {integrity: sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==}
-
-  '@emotion/weak-memoize@0.4.0':
-    resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
-
   '@eslint-community/eslint-utils@4.4.0':
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -842,9 +755,6 @@ packages:
   '@types/node@20.16.13':
     resolution: {integrity: sha512-GjQ7im10B0labo8ZGXDGROUl9k0BNyDgzfGpb4g/cl+4yYDWVKcozANF4FGr4/p0O/rAkQClM6Wiwkije++1Tg==}
 
-  '@types/parse-json@4.0.2':
-    resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
-
   '@types/prop-types@15.7.13':
     resolution: {integrity: sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==}
 
@@ -1010,10 +920,6 @@ packages:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
     engines: {node: '>= 0.4'}
 
-  babel-plugin-macros@3.1.0:
-    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
-    engines: {node: '>=10', npm: '>=6'}
-
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -1031,9 +937,6 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  buffer-from@0.1.2:
-    resolution: {integrity: sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg==}
-
   busboy@1.6.0:
     resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
     engines: {node: '>=10.16.0'}
@@ -1106,16 +1009,6 @@ packages:
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
-  convert-source-map@1.9.0:
-    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
-
-  core-util-is@1.0.3:
-    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
-
-  cosmiconfig@7.1.0:
-    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
-    engines: {node: '>=10'}
-
   cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -1200,9 +1093,6 @@ packages:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
 
-  duplexer2@0.1.4:
-    resolution: {integrity: sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==}
-
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
@@ -1216,9 +1106,6 @@ packages:
     resolution: {integrity: sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==}
     engines: {node: '>=10.13.0'}
 
-  error-ex@1.3.2:
-    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
-
   es-abstract@1.23.3:
     resolution: {integrity: sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==}
     engines: {node: '>= 0.4'}
@@ -1396,9 +1283,6 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
-  find-root@1.1.0:
-    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
-
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -1480,10 +1364,6 @@ packages:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     deprecated: Glob versions prior to v9 are no longer supported
 
-  globals@11.12.0:
-    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
-    engines: {node: '>=4'}
-
   globals@13.24.0:
     resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
     engines: {node: '>=8'}
@@ -1527,10 +1407,6 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
-  html-tokenize@2.0.1:
-    resolution: {integrity: sha512-QY6S+hZ0f5m1WT8WffYN+Hg+xm/w5I8XeUcAq/ZYP5wVC8xbKi4Whhru3FtrAebD5EhBW8rmFzkDI6eCAuFe2w==}
-    hasBin: true
-
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -1569,9 +1445,6 @@ packages:
     resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==}
     engines: {node: '>= 0.4'}
 
-  is-arrayish@0.2.1:
-    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
-
   is-arrayish@0.3.2:
     resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
 
@@ -1683,12 +1556,6 @@ packages:
     resolution: {integrity: sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==}
     engines: {node: '>= 0.4'}
 
-  isarray@0.0.1:
-    resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
-
-  isarray@1.0.0:
-    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
-
   isarray@2.0.5:
     resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
 
@@ -1713,17 +1580,9 @@ packages:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
 
-  jsesc@3.0.2:
-    resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
-    engines: {node: '>=6'}
-    hasBin: true
-
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
-  json-parse-even-better-errors@2.3.1:
-    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
-
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
@@ -1813,9 +1672,6 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  multipipe@1.0.2:
-    resolution: {integrity: sha512-6uiC9OvY71vzSGX8lZvSqscE7ft9nPupJ8fMjrCNRAUy2LREUW42UL+V/NTrogr6rFgRydUrCX4ZitfpSNkSCQ==}
-
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
@@ -1868,9 +1724,6 @@ packages:
     resolution: {integrity: sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==}
     engines: {node: '>= 0.4'}
 
-  object-keys@0.4.0:
-    resolution: {integrity: sha512-ncrLw+X55z7bkl5PnUvHwFK9FcGuFYo9gtjws2XtSzL+aZ8tm830P60WJ0dSmFVaSalWieW5MD7kEdnXda9yJw==}
-
   object-keys@1.1.1:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
@@ -1917,10 +1770,6 @@ packages:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
-  parse-json@5.2.0:
-    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
-    engines: {node: '>=8'}
-
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -1940,10 +1789,6 @@ packages:
     resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
     engines: {node: '>=16 || 14 >=14.18'}
 
-  path-type@4.0.0:
-    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
-    engines: {node: '>=8'}
-
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -2072,9 +1917,6 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
-  process-nextick-args@2.0.1:
-    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
-
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
@@ -2140,12 +1982,6 @@ packages:
   read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
 
-  readable-stream@1.0.34:
-    resolution: {integrity: sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==}
-
-  readable-stream@2.3.8:
-    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
-
   readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
@@ -2200,9 +2036,6 @@ packages:
     resolution: {integrity: sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==}
     engines: {node: '>=0.4'}
 
-  safe-buffer@5.1.2:
-    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
-
   safe-regex-test@1.0.3:
     resolution: {integrity: sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==}
     engines: {node: '>= 0.4'}
@@ -2254,10 +2087,6 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
-  source-map@0.5.7:
-    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
-    engines: {node: '>=0.10.0'}
-
   standard-as-callback@2.1.0:
     resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
 
@@ -2299,12 +2128,6 @@ packages:
     resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
     engines: {node: '>= 0.4'}
 
-  string_decoder@0.10.31:
-    resolution: {integrity: sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==}
-
-  string_decoder@1.1.1:
-    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
-
   strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -2334,9 +2157,6 @@ packages:
       babel-plugin-macros:
         optional: true
 
-  stylis@4.2.0:
-    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
-
   sucrase@3.35.0:
     resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -2382,12 +2202,6 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
-  through2@0.4.2:
-    resolution: {integrity: sha512-45Llu+EwHKtAZYTPPVn3XZHBgakWMN3rokhEv5hu596XP+cNgplMg+Gj+1nmAvj+L0K7+N49zBKx5rah5u0QIQ==}
-
-  through@2.3.8:
-    resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
-
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -2465,11 +2279,6 @@ packages:
       '@types/react':
         optional: true
 
-  use-smooth-count@1.0.1:
-    resolution: {integrity: sha512-IBYiH4qRUtQa62o8T+WK85beCwCmEhqRA4ch7FUaeR3rTppcxieIMe2ImC1sF4grmMfXTDVWqOA9ZGcl/VC37w==}
-    peerDependencies:
-      react: '>=16'
-
   use-sync-external-store@1.2.2:
     resolution: {integrity: sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==}
     peerDependencies:
@@ -2513,14 +2322,6 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
-  xtend@2.1.2:
-    resolution: {integrity: sha512-vMNKzr2rHP9Dp/e1NQFnLQlwlhp9L/LfvnsVdHxN1f+uggyVI3i08uD14GPvCToPkdsRfyPqIyYGmIk58V98ZQ==}
-    engines: {node: '>=0.4'}
-
-  yaml@1.10.2:
-    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
-    engines: {node: '>= 6'}
-
   yaml@2.6.0:
     resolution: {integrity: sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==}
     engines: {node: '>= 14'}
@@ -2534,103 +2335,15 @@ snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
 
-  '@babel/code-frame@7.26.2':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.25.9
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
-
-  '@babel/generator@7.26.2':
-    dependencies:
-      '@babel/parser': 7.26.2
-      '@babel/types': 7.26.0
-      '@jridgewell/gen-mapping': 0.3.5
-      '@jridgewell/trace-mapping': 0.3.25
-      jsesc: 3.0.2
-
-  '@babel/helper-module-imports@7.25.9':
-    dependencies:
-      '@babel/traverse': 7.25.9
-      '@babel/types': 7.26.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-string-parser@7.25.9': {}
-
-  '@babel/helper-validator-identifier@7.25.9': {}
-
-  '@babel/parser@7.26.2':
-    dependencies:
-      '@babel/types': 7.26.0
-
   '@babel/runtime@7.25.9':
     dependencies:
       regenerator-runtime: 0.14.1
 
-  '@babel/template@7.25.9':
-    dependencies:
-      '@babel/code-frame': 7.26.2
-      '@babel/parser': 7.26.2
-      '@babel/types': 7.26.0
-
-  '@babel/traverse@7.25.9':
-    dependencies:
-      '@babel/code-frame': 7.26.2
-      '@babel/generator': 7.26.2
-      '@babel/parser': 7.26.2
-      '@babel/template': 7.25.9
-      '@babel/types': 7.26.0
-      debug: 4.3.7
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/types@7.26.0':
-    dependencies:
-      '@babel/helper-string-parser': 7.25.9
-      '@babel/helper-validator-identifier': 7.25.9
-
   '@emnapi/runtime@1.3.1':
     dependencies:
       tslib: 2.8.0
     optional: true
 
-  '@emotion/babel-plugin@11.12.0':
-    dependencies:
-      '@babel/helper-module-imports': 7.25.9
-      '@babel/runtime': 7.25.9
-      '@emotion/hash': 0.9.2
-      '@emotion/memoize': 0.9.0
-      '@emotion/serialize': 1.3.2
-      babel-plugin-macros: 3.1.0
-      convert-source-map: 1.9.0
-      escape-string-regexp: 4.0.0
-      find-root: 1.1.0
-      source-map: 0.5.7
-      stylis: 4.2.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@emotion/cache@11.13.1':
-    dependencies:
-      '@emotion/memoize': 0.9.0
-      '@emotion/sheet': 1.4.0
-      '@emotion/utils': 1.4.1
-      '@emotion/weak-memoize': 0.4.0
-      stylis: 4.2.0
-
-  '@emotion/css@11.13.4':
-    dependencies:
-      '@emotion/babel-plugin': 11.12.0
-      '@emotion/cache': 11.13.1
-      '@emotion/serialize': 1.3.2
-      '@emotion/sheet': 1.4.0
-      '@emotion/utils': 1.4.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@emotion/hash@0.9.2': {}
-
   '@emotion/is-prop-valid@0.8.8':
     dependencies:
       '@emotion/memoize': 0.7.4
@@ -2639,33 +2352,6 @@ snapshots:
   '@emotion/memoize@0.7.4':
     optional: true
 
-  '@emotion/memoize@0.9.0': {}
-
-  '@emotion/serialize@1.3.2':
-    dependencies:
-      '@emotion/hash': 0.9.2
-      '@emotion/memoize': 0.9.0
-      '@emotion/unitless': 0.10.0
-      '@emotion/utils': 1.4.1
-      csstype: 3.1.3
-
-  '@emotion/server@11.11.0(@emotion/css@11.13.4)':
-    dependencies:
-      '@emotion/utils': 1.4.1
-      html-tokenize: 2.0.1
-      multipipe: 1.0.2
-      through: 2.3.8
-    optionalDependencies:
-      '@emotion/css': 11.13.4
-
-  '@emotion/sheet@1.4.0': {}
-
-  '@emotion/unitless@0.10.0': {}
-
-  '@emotion/utils@1.4.1': {}
-
-  '@emotion/weak-memoize@0.4.0': {}
-
   '@eslint-community/eslint-utils@4.4.0(eslint@8.57.1)':
     dependencies:
       eslint: 8.57.1
@@ -3222,8 +2908,6 @@ snapshots:
     dependencies:
       undici-types: 6.19.8
 
-  '@types/parse-json@4.0.2': {}
-
   '@types/prop-types@15.7.13': {}
 
   '@types/react-dom@18.3.1':
@@ -3435,12 +3119,6 @@ snapshots:
 
   axobject-query@4.1.0: {}
 
-  babel-plugin-macros@3.1.0:
-    dependencies:
-      '@babel/runtime': 7.25.9
-      cosmiconfig: 7.1.0
-      resolve: 1.22.8
-
   balanced-match@1.0.2: {}
 
   binary-extensions@2.3.0: {}
@@ -3458,8 +3136,6 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
-  buffer-from@0.1.2: {}
-
   busboy@1.6.0:
     dependencies:
       streamsearch: 1.1.0
@@ -3527,28 +3203,18 @@ snapshots:
     dependencies:
       color-name: 1.1.4
       simple-swizzle: 0.2.2
+    optional: true
 
   color@4.2.3:
     dependencies:
       color-convert: 2.0.1
       color-string: 1.9.1
+    optional: true
 
   commander@4.1.1: {}
 
   concat-map@0.0.1: {}
 
-  convert-source-map@1.9.0: {}
-
-  core-util-is@1.0.3: {}
-
-  cosmiconfig@7.1.0:
-    dependencies:
-      '@types/parse-json': 4.0.2
-      import-fresh: 3.3.0
-      parse-json: 5.2.0
-      path-type: 4.0.0
-      yaml: 1.10.2
-
   cross-spawn@7.0.3:
     dependencies:
       path-key: 3.1.1
@@ -3624,7 +3290,8 @@ snapshots:
 
   denque@2.1.0: {}
 
-  detect-libc@2.0.3: {}
+  detect-libc@2.0.3:
+    optional: true
 
   detect-node-es@1.1.0: {}
 
@@ -3640,10 +3307,6 @@ snapshots:
     dependencies:
       esutils: 2.0.3
 
-  duplexer2@0.1.4:
-    dependencies:
-      readable-stream: 2.3.8
-
   eastasianwidth@0.2.0: {}
 
   emoji-regex@8.0.0: {}
@@ -3655,10 +3318,6 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.2.1
 
-  error-ex@1.3.2:
-    dependencies:
-      is-arrayish: 0.2.1
-
   es-abstract@1.23.3:
     dependencies:
       array-buffer-byte-length: 1.0.1
@@ -3775,8 +3434,8 @@ snapshots:
       '@typescript-eslint/parser': 8.10.0(eslint@8.57.1)(typescript@5.6.3)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.0(eslint@8.57.1)
       eslint-plugin-react: 7.37.1(eslint@8.57.1)
       eslint-plugin-react-hooks: 5.0.0(eslint@8.57.1)
@@ -3795,37 +3454,37 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.3.7
       enhanced-resolve: 5.17.1
       eslint: 8.57.1
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
       fast-glob: 3.3.2
       get-tsconfig: 4.8.1
       is-bun-module: 1.2.1
       is-glob: 4.0.3
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
       - eslint-import-resolver-node
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 8.10.0(eslint@8.57.1)(typescript@5.6.3)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -3836,7 +3495,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.15.1
       is-glob: 4.0.3
@@ -4002,8 +3661,6 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
-  find-root@1.1.0: {}
-
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -4096,8 +3753,6 @@ snapshots:
       once: 1.4.0
       path-is-absolute: 1.0.1
 
-  globals@11.12.0: {}
-
   globals@13.24.0:
     dependencies:
       type-fest: 0.20.2
@@ -4135,14 +3790,6 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
-  html-tokenize@2.0.1:
-    dependencies:
-      buffer-from: 0.1.2
-      inherits: 2.0.4
-      minimist: 1.2.8
-      readable-stream: 1.0.34
-      through2: 0.4.2
-
   ignore@5.3.2: {}
 
   import-fresh@3.3.0:
@@ -4193,9 +3840,8 @@ snapshots:
       call-bind: 1.0.7
       get-intrinsic: 1.2.4
 
-  is-arrayish@0.2.1: {}
-
-  is-arrayish@0.3.2: {}
+  is-arrayish@0.3.2:
+    optional: true
 
   is-async-function@2.0.0:
     dependencies:
@@ -4294,10 +3940,6 @@ snapshots:
       call-bind: 1.0.7
       get-intrinsic: 1.2.4
 
-  isarray@0.0.1: {}
-
-  isarray@1.0.0: {}
-
   isarray@2.0.5: {}
 
   isexe@2.0.0: {}
@@ -4324,12 +3966,8 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
-  jsesc@3.0.2: {}
-
   json-buffer@3.0.1: {}
 
-  json-parse-even-better-errors@2.3.1: {}
-
   json-schema-traverse@0.4.1: {}
 
   json-stable-stringify-without-jsonify@1.0.1: {}
@@ -4407,11 +4045,6 @@ snapshots:
 
   ms@2.1.3: {}
 
-  multipipe@1.0.2:
-    dependencies:
-      duplexer2: 0.1.4
-      object-assign: 4.1.1
-
   mz@2.7.0:
     dependencies:
       any-promise: 1.3.0
@@ -4460,8 +4093,6 @@ snapshots:
       call-bind: 1.0.7
       define-properties: 1.2.1
 
-  object-keys@0.4.0: {}
-
   object-keys@1.1.1: {}
 
   object.assign@4.1.5:
@@ -4523,13 +4154,6 @@ snapshots:
     dependencies:
       callsites: 3.1.0
 
-  parse-json@5.2.0:
-    dependencies:
-      '@babel/code-frame': 7.26.2
-      error-ex: 1.3.2
-      json-parse-even-better-errors: 2.3.1
-      lines-and-columns: 1.2.4
-
   path-exists@4.0.0: {}
 
   path-is-absolute@1.0.1: {}
@@ -4543,8 +4167,6 @@ snapshots:
       lru-cache: 10.4.3
       minipass: 7.1.2
 
-  path-type@4.0.0: {}
-
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -4606,8 +4228,6 @@ snapshots:
 
   prettier@3.3.3: {}
 
-  process-nextick-args@2.0.1: {}
-
   prop-types@15.8.1:
     dependencies:
       loose-envify: 1.4.0
@@ -4673,23 +4293,6 @@ snapshots:
     dependencies:
       pify: 2.3.0
 
-  readable-stream@1.0.34:
-    dependencies:
-      core-util-is: 1.0.3
-      inherits: 2.0.4
-      isarray: 0.0.1
-      string_decoder: 0.10.31
-
-  readable-stream@2.3.8:
-    dependencies:
-      core-util-is: 1.0.3
-      inherits: 2.0.4
-      isarray: 1.0.0
-      process-nextick-args: 2.0.1
-      safe-buffer: 5.1.2
-      string_decoder: 1.1.1
-      util-deprecate: 1.0.2
-
   readdirp@3.6.0:
     dependencies:
       picomatch: 2.3.1
@@ -4752,8 +4355,6 @@ snapshots:
       has-symbols: 1.0.3
       isarray: 2.0.5
 
-  safe-buffer@5.1.2: {}
-
   safe-regex-test@1.0.3:
     dependencies:
       call-bind: 1.0.7
@@ -4809,6 +4410,7 @@ snapshots:
       '@img/sharp-wasm32': 0.33.5
       '@img/sharp-win32-ia32': 0.33.5
       '@img/sharp-win32-x64': 0.33.5
+    optional: true
 
   shebang-command@2.0.0:
     dependencies:
@@ -4828,11 +4430,10 @@ snapshots:
   simple-swizzle@0.2.2:
     dependencies:
       is-arrayish: 0.3.2
+    optional: true
 
   source-map-js@1.2.1: {}
 
-  source-map@0.5.7: {}
-
   standard-as-callback@2.1.0: {}
 
   stop-iteration-iterator@1.0.0:
@@ -4898,12 +4499,6 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.0.0
 
-  string_decoder@0.10.31: {}
-
-  string_decoder@1.1.1:
-    dependencies:
-      safe-buffer: 5.1.2
-
   strip-ansi@6.0.1:
     dependencies:
       ansi-regex: 5.0.1
@@ -4921,8 +4516,6 @@ snapshots:
       client-only: 0.0.1
       react: 18.3.1
 
-  stylis@4.2.0: {}
-
   sucrase@3.35.0:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5
@@ -4990,13 +4583,6 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
-  through2@0.4.2:
-    dependencies:
-      readable-stream: 1.0.34
-      xtend: 2.1.2
-
-  through@2.3.8: {}
-
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
@@ -5084,10 +4670,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
-  use-smooth-count@1.0.1(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-
   use-sync-external-store@1.2.2(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -5152,12 +4734,6 @@ snapshots:
 
   wrappy@1.0.2: {}
 
-  xtend@2.1.2:
-    dependencies:
-      object-keys: 0.4.0
-
-  yaml@1.10.2: {}
-
   yaml@2.6.0: {}
 
   yocto-queue@0.1.0: {}

src/app/layout.tsx

@@ -11,10 +11,10 @@ const poppins = Poppins({
 
 export const metadata: Metadata = {
   title: "Lanyard for GitHub Profile",
-  description: "Utilize Lanyard to display your Discord Presence in your GitHub Profile",
+  description: "Display your Discord Presence anywhere, using Lanyard",
   openGraph: {
     title: "Lanyard for GitHub Profile",
-    description: "Utilize Lanyard to display your Discord Presence in your GitHub Profile",
+    description: "Display your Discord Presence anywhere, using Lanyard",
   },
 };
 

src/app/page.tsx

@@ -1,18 +1,21 @@
 "use client";
 
-import React, { useState, useMemo, JSX, useRef, useEffect } from "react";
+import React, { useState, JSX, useRef, useEffect } from "react";
 import { motion } from "framer-motion";
 import useSWR from "swr";
 import { getUserCount } from "@/utils/actions";
 import { isSnowflake } from "@/utils/snowflake";
 import Link from "next/link";
-import { PARAMETERS } from "@/utils/parameters";
+import { PARAMETER_INFO } from "@/utils/parameters";
 import * as Icon from "lucide-react";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/popover";
 import { cn, filterLetters } from "@/lib/utils";
 
 export default function Home() {
-  const originUrl = process.env.NODE_ENV === "development" ? "http://localhost:3001" : "https://lanyard.cnrad.dev";
+  const ORIGIN_URL =
+    process.env.NODE_ENV === "development"
+      ? "https://ae78-128-119-202-198.ngrok-free.app"
+      : "https://lanyard.cnrad.dev";
 
   const [userId, setUserId] = useState("");
   const [userError, setUserError] = useState<string | JSX.Element>();
@@ -32,7 +35,7 @@ export default function Home() {
     if (userId.length > 0 && !isSnowflake(userId)) return setUserError("Invalid Discord ID");
   }
 
-  const url = `${originUrl}/api/${userId}${
+  const url = `${ORIGIN_URL}/api/${userId}${
     Object.keys(options).length > 0
       ? `?${Object.keys(options)
           .map(option => `${option}=${options[option]}`)
@@ -73,7 +76,18 @@ export default function Home() {
       <main className="flex min-h-screen max-w-[100vw] flex-col items-center">
         <div className="relative mt-16 flex w-[80%] max-w-[28rem] flex-col gap-2 rounded-md">
           <p className="text-left text-3xl font-semibold text-[#cecece]">🏷️ lanyard-profile-readme </p>
-          <p className="mb-2 text-sm text-[#aaabaf]">Uses Lanyard to display your Discord Presence anywhere.</p>
+          <p className="mb-2 text-sm text-[#aaabaf]">
+            Uses{" "}
+            <a
+              href="https://github.com/Phineas/lanyard"
+              target="_blank"
+              rel="noreferrer noopener"
+              className="text-white underline decoration-transparent underline-offset-2 transition-colors duration-150 ease-out hover:decoration-white"
+            >
+              Lanyard
+            </a>{" "}
+            to display your Discord Presence anywhere.
+          </p>
 
           <div className="flex h-[2.25rem] w-full flex-row gap-2">
             <input
@@ -110,7 +124,7 @@ export default function Home() {
             )}
           >
             <div className="grid-rows-auto mb-4 flex w-full flex-col gap-2.5 sm:grid sm:grid-cols-2">
-              {PARAMETERS.filter(item => item.type !== "boolean").map(item => {
+              {PARAMETER_INFO.filter(item => item.type !== "boolean").map(item => {
                 return (
                   <div key={item.parameter} className="flex flex-col gap-1.5">
                     <div className="flex items-center gap-2">
@@ -136,7 +150,7 @@ export default function Home() {
                           const filteredValue = encodeURIComponent(
                             filterLetters(
                               e.target.value,
-                              (PARAMETERS.find(p => p.parameter === item.parameter) as any).options.omit,
+                              (PARAMETER_INFO.find(p => p.parameter === item.parameter) as any).options.omit,
                             ),
                           );
 
@@ -188,7 +202,7 @@ export default function Home() {
 
             {/* Separated for easier styling/readability */}
             <div className="sm:grid-rows-auto flex flex-col gap-2 sm:grid sm:grid-cols-2">
-              {PARAMETERS.filter(item => item.type === "boolean").map(item => {
+              {PARAMETER_INFO.filter(item => item.type === "boolean").map(item => {
                 return (
                   <div key={item.parameter} className="flex flex-row items-start gap-2.5 text-sm">
                     <input
@@ -212,7 +226,7 @@ export default function Home() {
                     <p
                       className="text-gray-300"
                       style={{
-                        textDecoration: PARAMETERS.find(p => p.parameter === item.parameter)?.deprecated
+                        textDecoration: PARAMETER_INFO.find(p => p.parameter === item.parameter)?.deprecated
                           ? "line-through"
                           : "none",
                       }}

src/components/popover.tsx

@@ -2,7 +2,6 @@
 
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-
 import { cn } from "@/lib/utils";
 
 const Popover = PopoverPrimitive.Root;

src/utils/getFlags.ts

@@ -1,19 +0,0 @@
-export const getFlags = (flag: number): string[] => {
-    let flags: string[] = [];
-
-    // In the order they appear on profiles
-    if (flag & 1) flags.push("Discord_Employee"); // 1 << 0
-    if (flag & 262144) flags.push("Discord_Certified_Moderator"); // 1 << 18
-    if (flag & 2) flags.push("Partnered_Server_Owner"); // 1 << 1
-    if (flag & 4) flags.push("HypeSquad_Events"); // 1 << 2
-    if (flag & 64) flags.push("House_Bravery"); // 1 << 6
-    if (flag & 128) flags.push("House_Brilliance"); // 1 << 7
-    if (flag & 256) flags.push("House_Balance"); // 1 << 8
-    if (flag & 8) flags.push("Bug_Hunter_Level_1"); // 1 << 3
-    if (flag & 16384) flags.push("Bug_Hunter_Level_2"); // 1 << 14
-    if (flag & 4194304) flags.push("Active_Developer"); // 1 << 22
-    if (flag & 131072) flags.push("Early_Verified_Bot_Developer"); // 1 << 17
-    if (flag & 512) flags.push("Early_Supporter"); // 1 << 9
-
-    return flags;
-};

src/utils/helpers.ts

@@ -0,0 +1,26 @@
+import type { renderToStaticMarkup as _renderToStaticMarkup } from "react-dom/server";
+
+export let renderToStaticMarkup: typeof _renderToStaticMarkup;
+import("react-dom/server").then(module => {
+  renderToStaticMarkup = module.renderToStaticMarkup;
+});
+
+export const getFlags = (flag: number): string[] => {
+  let flags: string[] = [];
+
+  // In the order they appear on profiles
+  if (flag & 1) flags.push("Discord_Employee"); // 1 << 0
+  if (flag & 262144) flags.push("Discord_Certified_Moderator"); // 1 << 18
+  if (flag & 2) flags.push("Partnered_Server_Owner"); // 1 << 1
+  if (flag & 4) flags.push("HypeSquad_Events"); // 1 << 2
+  if (flag & 64) flags.push("House_Bravery"); // 1 << 6
+  if (flag & 128) flags.push("House_Brilliance"); // 1 << 7
+  if (flag & 256) flags.push("House_Balance"); // 1 << 8
+  if (flag & 8) flags.push("Bug_Hunter_Level_1"); // 1 << 3
+  if (flag & 16384) flags.push("Bug_Hunter_Level_2"); // 1 << 14
+  if (flag & 4194304) flags.push("Active_Developer"); // 1 << 22
+  if (flag & 131072) flags.push("Early_Verified_Bot_Developer"); // 1 << 17
+  if (flag & 512) flags.push("Early_Supporter"); // 1 << 9
+
+  return flags;
+};

src/utils/parameters.ts

@@ -19,7 +19,7 @@ export type Parameters = {
   idleMessage?: string;
 };
 
-export type IParameter = Array<
+export type IParameterInfo = Array<
   { deprecated?: boolean } & (
     | {
         parameter: string;
@@ -55,7 +55,7 @@ export type IParameter = Array<
   )
 >;
 
-export const PARAMETERS: IParameter = [
+export const PARAMETER_INFO: IParameterInfo = [
   {
     parameter: "theme",
     type: "list",
@@ -190,4 +190,4 @@ export const PARAMETERS: IParameter = [
     description: "Hides your discriminator. (DEPRECATED, RIP)",
     deprecated: true,
   },
-].sort((a, b) => b.type.localeCompare(a.type)) as IParameter;
+].sort((a, b) => b.type.localeCompare(a.type)) as IParameterInfo;

src/utils/renderCard.tsx

@@ -1,19 +1,10 @@
 "use server";
-// probably the messiest code i've ever written but it works so :)
 
 import { Badges } from "#/public/assets/badges/BadgesEncoded";
-import { getFlags } from "@/utils/getFlags";
+import { getFlags, renderToStaticMarkup } from "@/utils/helpers";
 import * as LanyardTypes from "@/utils/LanyardTypes";
 import { encodeBase64 } from "@/utils/toBase64";
-import escape from "escape-html";
-
-import createEmotion from '@emotion/css/create-instance'
-
-import createEmotionServer from '@emotion/server/create-instance'
-
-const key = 'render-card'
-const { css, cache } = createEmotion({ key })
-const { extractCritical } = createEmotionServer(cache)
+import { DetailedHTMLProps, HTMLAttributes } from "react";
 
 export type Parameters = {
   theme?: string;
@@ -36,12 +27,12 @@ export type Parameters = {
   idleMessage?: string;
 };
 
-const parseBool = (string: string | undefined): boolean => string === "true" ? true : false;
+const parseBool = (string: string | undefined): boolean => (string === "true" ? true : false);
 
 const parseAppId = (string: string | undefined): Array<string> => {
   if (string === undefined) return [];
   return string.split(",");
-}
+};
 
 const elapsedTime = (timestamp: any): string => {
   let startTime = timestamp;
@@ -62,7 +53,7 @@ const elapsedTime = (timestamp: any): string => {
   let secondsDifference = Math.floor(difference);
 
   return `${hoursDifference >= 1 ? ("0" + hoursDifference).slice(-2) + ":" : ""}${("0" + minutesDifference).slice(
-        -2
+    -2,
   )}:${("0" + secondsDifference).slice(-2)}`;
 };
 
@@ -111,27 +102,29 @@ async function renderCard(body: LanyardTypes.Root, params: Parameters): Promise<
     avatar = await encodeBase64(
       `https://cdn.discordapp.com/avatars/${data.discord_user.id}/${
         data.discord_user.avatar
-            }.${avatarExtension}?size=${avatarExtension === "gif" ? "64" : "256"}`
+      }.${avatarExtension}?size=${avatarExtension === "gif" ? "64" : "256"}`,
     );
   } else {
     avatar = await encodeBase64(
-            `https://cdn.discordapp.com/embed/avatars/${data.discord_user.discriminator === "0" 
-                ? ((Number(BigInt(data.discord_user.id) >> BigInt(22))) % 6) 
-                : Number(data.discord_user.discriminator) % 5}.png`
+      `https://cdn.discordapp.com/embed/avatars/${
+        data.discord_user.discriminator === "0"
+          ? Number(BigInt(data.discord_user.id) >> BigInt(22)) % 6
+          : Number(data.discord_user.discriminator) % 5
+      }.png`,
     );
   }
 
   let clanBadge: string;
   if (data.discord_user.clan) {
     clanBadge = await encodeBase64(
-            `https://cdn.discordapp.com/clan-badges/${data.discord_user.clan.identity_guild_id}/${data.discord_user.clan.badge}.png?size=16`
+      `https://cdn.discordapp.com/clan-badges/${data.discord_user.clan.identity_guild_id}/${data.discord_user.clan.badge}.png?size=16`,
     );
   }
 
   let avatarDecoration: string;
   if (data.discord_user.avatar_decoration_data) {
     avatarDecoration = await encodeBase64(
-            `https://cdn.discordapp.com/avatar-decoration-presets/${data.discord_user.avatar_decoration_data.asset}.png?size=64&passthrough=${params.animatedDecoration || "true"}`
+      `https://cdn.discordapp.com/avatar-decoration-presets/${data.discord_user.avatar_decoration_data.asset}.png?size=64&passthrough=${params.animatedDecoration || "true"}`,
     );
   }
 
@@ -172,7 +165,7 @@ async function renderCard(body: LanyardTypes.Root, params: Parameters): Promise<
     if (hideActivity === "whenNotUsed" && !activity && !data.listening_to_spotify) return "91";
     if (hideSpotify && data.listening_to_spotify) return "210";
     return "210";
-    }
+  };
 
   // Calculate height of main div element
   const divHeight = (): string => {
@@ -181,13 +174,17 @@ async function renderCard(body: LanyardTypes.Root, params: Parameters): Promise<
     if (hideActivity === "whenNotUsed" && !activity && !data.listening_to_spotify) return "81";
     if (hideSpotify && data.listening_to_spotify) return "200";
     return "200";
-    }
+  };
 
-    const renderSVG = `
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="410px" height="${svgHeight()}px">
+  const ForeignDiv = (props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & { xmlns: string }) => (
+    <div {...props}>{props.children}</div>
+  );
+
+  const renderedSVG = (
+    <svg xmlns="http://www.w3.org/2000/svg" width="410px" height={svgHeight()}>
       <defs>
         <style>
-                        .hover-opacity:hover {
+          {`.hover-opacity:hover {
                             opacity: 0.25;
                         }
 
@@ -195,402 +192,472 @@ async function renderCard(body: LanyardTypes.Root, params: Parameters): Promise<
                             transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
                             transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                             transition-duration: 200ms;
-                        }
+                        }`}
         </style>
-                    {{ emotion-css }}
       </defs>
-                <foreignObject x="0" y="0" width="410" height="${svgHeight()}">
-                    <div xmlns="http://www.w3.org/1999/xhtml" class="${css`
-                        position: absolute;
-                        width: 400px;
-                        height: ${divHeight()}px;
-                        inset: 0;
-                        background-color: #${backgroundColor};
-                        color: ${theme === "dark" ? "#fff" : "#000"};
-                        font-family:'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-                        font-size: 16px;
-                        display: flex;
-                        flex-direction: column;
-                        padding: 5px;
-                        border-radius: ${borderRadius};
-                    `}">
-                    
-                    ${
-                        hideProfile ? "" : `
-                        <div class="${css`
-                            width: 400px;
-                            height: 100px;
-                            inset: 0;
-                            display: flex;
-                            flex-direction: row;
-                            padding-bottom: 5px;
-                            ${hideActivity !== "false" && !activity && !data.listening_to_spotify ?
-                                ""
-                                : `border-bottom: solid 0.5px ${theme === "dark" ?
-                                    "hsl(0, 0%, 100%, 10%)"
-                                    : "hsl(0, 0%, 0%, 10%)"
-                                }`
-                            }`
-                        }">
-                            <div class="${css`
-                                display: flex;
-                                position: relative;
-                                flex-direction: row;
-                                height: 80px;
-                                width: 80px;
-                            `}">
-                                <img src="data:image/png;base64,${avatar}"
-                                class="${css`
-                                    border-radius: 50%;
-                                    width: 50px;
-                                    height: 50px;
-                                    position: relative;
-                                    top: 50%;
-                                    left: 50%;
-                                    transform: translate(-50%, -50%);
-                                `}"/>
-                                ${hideDecoration || !data.discord_user.avatar_decoration_data ? "" : `
-                                <img src="data:image/png;base64,${avatarDecoration!}"
-                                class="${css`
-                                    display: block;
-                                    width: 64px;
-                                    height: 64px;
-                                    position: absolute;
-                                    top: 50%;
-                                    left: 50%;
-                                    transform: translate(-50%, -50%);
-                                `} hover-opacity transition"/>
-                                `}
-                                <span class="${css`
-                                    position: absolute;
-                                    bottom: 14px;
-                                    right: 14px;
-                                    height: 13px;
-                                    width: 13px;
-                                    background-color: ${avatarBorderColor};
-                                    border-radius: 50%;
-                                    border: 3px solid #${backgroundColor};
-                                `}" />
-                            </div>
-                            <div class="${css`
-                                height: 80px;
-                                width: 260px;
-                                display: flex;
-                                flex-direction: column;
-                                justify-content: center;
-                            `}">
-                                <div class="${css`
-                                    display: flex;
-                                    flex-direction: row;
-                                    height: 25px;
-                                `}">
-                                    <h1 class="${css`
-                                        font-size: 1.15rem;
-                                        margin: 0 12px 0 0;
-                                        white-space: nowrap;
-                                    `}">
-                                        ${escape(showDisplayName ? data.discord_user.global_name : data.discord_user.username)}${
-                                            !hideDiscrim && !showDisplayName
-                                                ? `<span class="${css`color: ${theme === "dark" ? "#ccc" : "#666"}; font-weight: lighter;"`}">#${
-                                                    data.discord_user.discriminator
-                                                }</span>`
-                                                : ""
-                                        }
-                                    </h1>
-
-                                    ${hideClan || !data.discord_user.clan?.tag && !data.discord_user.clan?.badge ? "" : `
-                                        <span class="${css`
-                                            background-color: ${clanBackgroundColor};
-                                            border-radius: 0.375rem;
-                                            padding-left: 0.5rem; 
-                                            padding-right: 0.5rem;
-                                            margin-left: -6px;
-                                            margin-right: 12px;
-                                            display: flex;
-                                            align-items: center;
-                                            gap: 0.25rem;
-                                            font-size: 16px;
-                                            font-weight: 500;
-                                            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-                                            height: 100%;
-                                        `}">
-                                            <img src="data:image/png;base64,${clanBadge!}" />
-                                            <p class="${css`margin-bottom: 1.1rem`}">${escape(data.discord_user.clan!.tag)}</p>
-                                        </span>
-                                    `}
-
-                                    ${hideBadges ? "" : flags.map(v => `
-                                        <img src="data:image/png;base64,${Badges[v]}" class="${css`
-                                            width: auto;
-                                            height: 20px;
-                                            position: relative;
-                                            top: 50%;
-                                            transform: translate(0%, -50%);
-                                            margin-right: 7px;
-                                        `}" />`).join("")
-                                    }
-                                </div>
-                                ${showDisplayName ? 
-                                    `<h2 class="${css`
-                                        font-size: 0.95rem;
-                                        margin: 0;
-                                        white-space: nowrap;
-                                        font-weight: 400;
-                                    `}">
-                                        ${escape(data.discord_user.username)}
-                                    </h2>` 
-                                    : ``
-                                }
-                                ${
-                                    userStatus && !hideStatus ? `
-                                    <p class="${css`
-                                        font-size: 0.9rem;
-                                        margin: 0;
-                                        color: ${theme === "dark" ? "#aaa" : "#333"};
-                                        font-weight: 400;
-                                        overflow: hidden;
-                                        white-space: nowrap;
-                                        text-overflow: ellipsis;
-                                    `}">
-                                    ${
-                                        userStatus.emoji?.id ? `
-                                        <img src="data:image/png;base64,${await encodeBase64(
-                                            `https://cdn.discordapp.com/emojis/${userStatus.emoji.id}.${statusExtension}`
-                                        )}"
-                                        class="${css`
-                                            width: 15px;
-                                            height: 15px;
-                                            position: relative;
-                                            top: 10px;
-                                            transform: translate(0%, -50%);
-                                            margin: 0 2px 0 0;
-                                        `}" />` : ''
-                                    }
-                                    ${
-                                        userStatus.state && userStatus.emoji?.name && !userStatus.emoji.id 
-                                            ? `${userStatus.emoji.name} ${escape(userStatus.state)}` 
-                                            : userStatus.state 
-                                                ? escape(userStatus.state) 
-                                                : !userStatus.state && userStatus.emoji?.name && !userStatus.emoji.id 
-                                                    ? escape(userStatus.emoji.name) 
-                                                    : ''
-                                    }
-                                </p>` : ``
-                                }
-                            </div>
-                        </div>`
-                    }
-
-                        ${
-                            activity ? `
-                            <div class="${css`
-                                display: flex;
-                                flex-direction: row;
-                                height: 120px;
-                                margin-left: 15px;
-                                font-size: 0.75rem;
-                                padding-top: 18px;
-                            `}">
-                                <div class="${css`
-                                    margin-right: 15px;
-                                    width: auto;
-                                    height: auto;
-                                `}">
-                                    ${
-                                        activity.assets?.large_image ? `
-                                        <img src="data:image/png;base64,${await encodeBase64(
-                                        activity.assets.large_image.startsWith("mp:external/")
-                                            ? `https://media.discordapp.net/external/${activity.assets.large_image.replace("mp:external/", "")}` 
-                                            : `https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.large_image}.webp`
-                                    )}"
-                                        class="${css`
-                                            width: 80px;
-                                            height: 80px;
-                                            border: solid 0.5px #222;
-                                            border-radius: 10px;
-                                        `}"/>
-                                    ` : `
-                                    <img src="data:image/png;base64,${await encodeBase64(
-                                        `https://lanyard-profile-readme.vercel.app/assets/unknown.png`
-                                    )}" class="${css`
-                                        width: 70px;
-                                        height: 70px;
-                                        margin-top: 4px;
-                                        filter: invert(100);
-                                    `}"/>
-                                `}
-                                ${
-                                    activity.assets?.small_image ? `
-                                    <img src="data:image/png;base64,${await encodeBase64(
-                                        activity.assets.small_image.startsWith("mp:external/")
-                                            ? `https://media.discordapp.net/external/${activity.assets.small_image.replace("mp:external/", "")}`
-                                            : `https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.small_image}.webp`
-                                    )}"
-                                    class="${css`
-                                        width: 30px;
-                                        height: 30px;
-                                        border-radius: 50%;
-                                        margin-left: -26px;
-                                        margin-bottom: -8px;
-                                    `}"/>` : ``
-                                }
-                                </div>
-                                <div class="${css`
-                                    color: #999;
-                                    margin-top: ${
-                                        activity.timestamps?.start && !hideTimestamp
-                                            ? "-6px"
-                                            : "5px"
-                                    };
-                                    line-height: 1;
-                                    width: 279px;
-                                `}">
-                                    <p class="${css`
-                                        color: ${theme === "dark" ? "#fff" : "#000"};
-                                        font-size: 0.85rem;
-                                        font-weight: bold;
-                                        overflow: hidden;
-                                        white-space: nowrap;
-                                        text-overflow: ellipsis;
-                                        height: 15px;
-                                        margin: 7px 0;
-                                    `}">${escape(activity.name)}</p>
-                                        ${
-                                            activity.details
-                                                ? `
-                                            <p class="${css`
-                                                color: ${theme === "dark" ? "#ccc" : "#777"};
-                                                overflow: hidden;
-                                                white-space: nowrap;
-                                                font-size: 0.85rem;
-                                                text-overflow: ellipsis;
-                                                height: 15px;
-                                                margin: 7px 0;
-                                            `}">${escape(activity.details)}</p>`
-                                                : ``
-                                        }
-                                        ${
-                                            activity.state
-                                                ? `
-                                            <p class="${css`
-                                                color: ${theme === "dark" ? "#ccc" : "#777"};
-                                                overflow: hidden;
-                                                white-space: nowrap;
-                                                font-size: 0.85rem;
-                                                text-overflow: ellipsis;
-                                                height: 15px;
-                                                margin: 7px 0;
-                                            `}">${escape(activity.state)}${
-                                                    activity.party?.size
-                                                        ? ` (${activity.party.size[0]} of ${activity.party.size[1]})`
-                                                        : ""
-                                                }</p>` : ``
-                                        }
-                                        ${
-                                            activity.timestamps?.start && !hideTimestamp ? `
-                                            <p class="${css`
-                                                color: ${theme === "dark" ? "#ccc" : "#777"};
-                                                overflow: hidden;
-                                                white-space: nowrap;
-                                                font-size: 0.85rem;
-                                                text-overflow: ellipsis;
-                                                height: 15px;
-                                                margin: 7px 0;
-                                            `}">${elapsedTime(new Date(activity.timestamps.start).getTime())} elapsed</p>`
-                                                : ``
-                                        }
-                                </div>
-                            </div>
-                            ` : ``
-                        }
-
-            ${
-                data.listening_to_spotify && !activity && !hideSpotify && data.activities[Object.keys(data.activities).length - 1].type === 2
-                    ? `
-                <div class="${css`
-                    display: flex;
-                    flex-direction: row;
-                    height: 120px;
-                    margin-left: 15px;
-                    font-size: 0.8rem;
-                    padding-top: 18px;
-                `}">
+      <foreignObject x="0" y="0" width="410" height={svgHeight()}>
+        <ForeignDiv
+          xmlns="http://www.w3.org/1999/xhtml"
+          style={{
+            position: "absolute",
+            width: "400px",
+            height: `${divHeight()}px`,
+            inset: 0,
+            backgroundColor: `#${backgroundColor}`,
+            color: theme === "dark" ? "#fff" : "#000",
+            fontFamily: `'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`,
+            fontSize: "16px",
+            display: "flex",
+            flexDirection: "column",
+            padding: "5px",
+            borderRadius: borderRadius,
+          }}
+        >
+          {!hideProfile ? (
+            <div
+              style={{
+                width: "400px",
+                height: "100px",
+                inset: 0,
+                display: "flex",
+                flexDirection: "row",
+                paddingBottom: "5px",
+                borderBottom:
+                  hideActivity !== "false" && !activity && !data.listening_to_spotify
+                    ? ""
+                    : `solid 0.5px ${theme === "dark" ? "hsl(0, 0%, 100%, 10%)" : "hsl(0, 0%, 0%, 10%)"}`,
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  position: "relative",
+                  flexDirection: "row",
+                  height: "80px",
+                  width: "80px",
+                }}
+              >
                 <img
-                        src="${await (async () => {
-                            const album = await encodeBase64(data.spotify.album_art_url);
-                            if (album) return `data:image/png;base64,${album}`;
-                            return 'https://lanyard-profile-readme.vercel.app/assets/unknown.png';
-                        })()}"
-                        class="${css`
-                            ${data.spotify.album_art_url ? "border: solid 0.5px #222;" : "filter: invert(100);"}
-                            width: 80px;
-                            height: 80px;
-                            border-radius: 10px;
-                            margin-right: 15px;
-                        `}"
+                  src={`data:image/png;base64,${avatar}`}
+                  alt="User Avatar"
+                  style={{
+                    borderRadius: "50%",
+                    width: "50px",
+                    height: "50px",
+                    position: "relative",
+                    top: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                  }}
                 />
 
-                    <div class="${css`
-                        color: #999;
-                        margin-top: -3px;
-                        line-height: 1;
-                        width: 279px;
-                    `}">
-                        <p class="${css`font-size: 0.75rem; font-weight: bold; color: ${
-                            theme === "dark" ? "#1CB853" : "#0d943d"
-                        }; margin-bottom: 15px;`}">LISTENING TO SPOTIFY...</p>
-                        <p class="${css`
-                            height: 15px;
-                            color: ${theme === "dark" ? "#fff" : "#000"};
-                            font-weight: bold;
-                            font-size: 0.85rem;
-                            overflow: hidden;
-                            white-space: nowrap;
-                            text-overflow: ellipsis;
-                            margin: 7px 0;
-                        `}">${escape(data.spotify.song)}</p>
-                        <p class="${css`
-                            margin: 7px 0;
-                            height: 15px;
-                            overflow: hidden;
-                            white-space: nowrap;
-                            font-size: 0.85rem;
-                            text-overflow: ellipsis;
-                            color: ${theme === "dark" ? "#ccc" : "#777"};
-                        `}">By ${escape(data.spotify.artist)}</p>
-                    </div>
-                </div>
-            ` : ``
-            }
-            ${
-                !activity && (!data.listening_to_spotify || hideSpotify) && hideActivity === "false"
-                    ? `<div class="${css`
-                    display: flex;
-                    flex-direction: row;
-                    height: 150px;
-                    justify-content: center;
-                    align-items: center;
-                `}">
-                    <p class="${css`
-                        font-style: italic;
-                        font-size: 0.8rem;
-                        color: ${theme === "dark" ? "#aaa" : "#444"};
-                        height: auto;
-                        text-align: center;
-                    `}">
-                        ${escape(idleMessage)}
-                    </p>
-                </div>` : ``
-            }
+                {hideDecoration || !data.discord_user.avatar_decoration_data ? null : (
+                  <>
+                    <img
+                      src={`data:image/png;base64,${avatarDecoration!}`}
+                      alt="Avatar Decoration"
+                      style={{
+                        display: "block",
+                        width: "64px",
+                        height: "64px",
+                        position: "absolute",
+                        top: " 50%",
+                        left: "50%",
+                        transform: "translate(-50%, -50%)",
+                      }}
+                      className="hover-opacity transition"
+                    />
 
+                    <span
+                      style={{
+                        position: "absolute",
+                        bottom: "14px",
+                        right: "14px",
+                        height: "13px",
+                        width: "13px",
+                        backgroundColor: avatarBorderColor,
+                        borderRadius: "50%",
+                        border: `3px solid #${backgroundColor}`,
+                      }}
+                    />
+                  </>
+                )}
               </div>
+              <div
+                style={{
+                  height: "80px",
+                  width: "260px",
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    height: "25px",
+                  }}
+                >
+                  <h1
+                    style={{
+                      fontSize: "1.15rem",
+                      margin: "0 12px 0 0",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    {showDisplayName && data.discord_user.global_name
+                      ? data.discord_user.global_name
+                      : data.discord_user.username}
+
+                    {!hideDiscrim && !showDisplayName ? (
+                      <span style={{ color: theme === "dark" ? "#ccc" : "#666", fontWeight: "lighter" }}>
+                        #{data.discord_user.discriminator}
+                      </span>
+                    ) : null}
+                  </h1>
+
+                  {hideClan || (!data.discord_user.clan?.tag && !data.discord_user.clan?.badge) ? null : (
+                    <span
+                      style={{
+                        backgroundColor: clanBackgroundColor,
+                        borderRadius: " 0.375rem",
+                        paddingLeft: "0.5rem",
+                        paddingRight: "0.5rem",
+                        marginLeft: "-6px",
+                        marginRight: "12px",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "0.25rem",
+                        fontSize: "16px",
+                        fontWeight: "500",
+                        fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`,
+                        height: "100%",
+                      }}
+                    >
+                      <img src={`data:image/png;base64,${clanBadge!}`} alt="Clan Badge" />
+                      <p style={{ marginBottom: "1.1rem" }}>{data.discord_user.clan!.tag}</p>
+                    </span>
+                  )}
+
+                  {!!hideBadges
+                    ? null
+                    : flags.map(v => (
+                        <img
+                          key={v}
+                          alt={v}
+                          src={`data:image/png;base64,${Badges[v]}`}
+                          style={{
+                            width: "auto",
+                            height: "20px",
+                            position: "relative",
+                            top: "50%",
+                            transform: "translate(0%, -50%)",
+                            marginRight: "7px",
+                          }}
+                        />
+                      ))}
+                </div>
+
+                {showDisplayName ? (
+                  <h2
+                    style={{
+                      fontSize: "0.95rem",
+                      margin: 0,
+                      whiteSpace: "nowrap",
+                      fontWeight: "400",
+                    }}
+                  >
+                    {data.discord_user.username}
+                  </h2>
+                ) : null}
+                {userStatus && !hideStatus ? (
+                  <p
+                    style={{
+                      fontSize: "0.9rem",
+                      margin: 0,
+                      color: theme === "dark" ? "#aaa" : "#333",
+                      fontWeight: 400,
+                      overflow: "hidden",
+                      whiteSpace: "nowrap",
+                      textOverflow: "ellipsis",
+                    }}
+                  >
+                    {userStatus.emoji?.id ? (
+                      <img
+                        src={`data:image/png;base64,${await encodeBase64(
+                          `https://cdn.discordapp.com/emojis/${userStatus.emoji.id}.${statusExtension}`,
+                        )}`}
+                        alt="User Status Emoji"
+                        style={{
+                          width: "15px",
+                          height: "15px",
+                          position: "relative",
+                          top: "10px",
+                          transform: "translate(0%, -50%)",
+                          margin: "0 2px 0 0",
+                        }}
+                      />
+                    ) : null}
+
+                    {userStatus.state && userStatus.emoji?.name && !userStatus.emoji.id
+                      ? `${userStatus.emoji.name} ${userStatus.state}`
+                      : userStatus.state
+                        ? userStatus.state
+                        : !userStatus.state && userStatus.emoji?.name && !userStatus.emoji.id
+                          ? userStatus.emoji.name
+                          : null}
+                  </p>
+                ) : null}
+              </div>
+            </div>
+          ) : null}
+
+          {activity ? (
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                height: "120px",
+                marginLeft: "15px",
+                fontSize: "0.75rem",
+                paddingTop: "18px",
+              }}
+            >
+              <div
+                style={{
+                  marginRight: "15px",
+                  width: "auto",
+                  height: "auto",
+                }}
+              >
+                {activity.assets?.large_image ? (
+                  <img
+                    src={`data:image/png;base64,${await encodeBase64(
+                      activity.assets.large_image.startsWith("mp:external/")
+                        ? `https://media.discordapp.net/external/${activity.assets.large_image.replace("mp:external/", "")}`
+                        : `https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.large_image}.webp`,
+                    )}`}
+                    alt="Activity Large Image"
+                    style={{
+                      width: "80px",
+                      height: "80px",
+                      border: "solid 0.5px #222",
+                      borderRadius: "10px",
+                    }}
+                  />
+                ) : (
+                  <img
+                    src={`data:image/png;base64,${await encodeBase64(
+                      `https://lanyard-profile-readme.vercel.app/assets/unknown.png`,
+                    )}`}
+                    alt="Unknown Icon"
+                    style={{
+                      width: "70px",
+                      height: "70px",
+                      marginTop: "4px",
+                      filter: "invert(100)",
+                    }}
+                  />
+                )}
+
+                {activity.assets?.small_image ? (
+                  <img
+                    src={`data:image/png;base64,${await encodeBase64(
+                      activity.assets.small_image.startsWith("mp:external/")
+                        ? `https://media.discordapp.net/external/${activity.assets.small_image.replace("mp:external/", "")}`
+                        : `https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.small_image}.webp`,
+                    )}`}
+                    alt="Activity Small Image"
+                    style={{
+                      width: "30px",
+                      height: "30px",
+                      borderRadius: "50%",
+                      marginLeft: "-26px",
+                      marginBottom: "-8px",
+                    }}
+                  />
+                ) : null}
+              </div>
+              <div
+                style={{
+                  color: "#999",
+                  marginTop: activity.timestamps?.start && !hideTimestamp ? "-6px" : "5px",
+                  lineHeight: "1",
+                  width: "279px",
+                }}
+              >
+                <p
+                  style={{
+                    color: theme === "dark" ? "#fff" : "#000",
+                    fontSize: "0.85rem",
+                    fontWeight: "bold",
+                    overflow: "hidden",
+                    whiteSpace: "nowrap",
+                    textOverflow: "ellipsis",
+                    height: "15px",
+                    margin: "7px 0",
+                  }}
+                >
+                  {activity.name}
+                </p>
+                {activity.details ? (
+                  <p
+                    style={{
+                      color: theme === "dark" ? "#ccc" : "#777",
+                      overflow: "hidden",
+                      whiteSpace: "nowrap",
+                      fontSize: "0.85rem",
+                      textOverflow: "ellipsis",
+                      height: "15px",
+                      margin: "7px 0",
+                    }}
+                  >
+                    {activity.details}
+                  </p>
+                ) : null}
+                {activity.state ? (
+                  <p
+                    style={{
+                      color: theme === "dark" ? "#ccc" : "#777",
+                      overflow: "hidden",
+                      whiteSpace: "nowrap",
+                      fontSize: "0.85rem",
+                      textOverflow: "ellipsis",
+                      height: "15px",
+                      margin: "7px 0",
+                    }}
+                  >
+                    {activity.state}
+                    {activity.party?.size ? ` (${activity.party.size[0]} of ${activity.party.size[1]})` : null}
+                  </p>
+                ) : null}
+                {activity.timestamps?.start && !hideTimestamp ? (
+                  <p
+                    style={{
+                      color: theme === "dark" ? "#ccc" : "#777",
+                      overflow: "hidden",
+                      whiteSpace: "nowrap",
+                      fontSize: "0.85rem",
+                      textOverflow: "ellipsis",
+                      height: "15px",
+                      margin: "7px 0",
+                    }}
+                  >
+                    {elapsedTime(new Date(activity.timestamps.start).getTime())} elapsed
+                  </p>
+                ) : null}
+              </div>
+            </div>
+          ) : null}
+          {data.listening_to_spotify &&
+          !activity &&
+          !hideSpotify &&
+          data.activities[Object.keys(data.activities).length - 1].type === 2 ? (
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                height: "120px",
+                marginLeft: "15px",
+                fontSize: "0.8rem",
+                paddingTop: "18px",
+              }}
+            >
+              <img
+                src={await (async () => {
+                  const album = await encodeBase64(data.spotify.album_art_url);
+                  if (album) return `data:image/png;base64,${album}`;
+                  return "https://lanyard-profile-readme.vercel.app/assets/unknown.png";
+                })()}
+                alt="Album Cover"
+                style={{
+                  border: data.spotify.album_art_url ? "border: solid 0.5px #222" : undefined,
+                  filter: !data.spotify.album_art_url ? "invert(100)" : undefined,
+                  width: "80px",
+                  height: "80px",
+                  borderRadius: "10px",
+                  marginRight: "15px",
+                }}
+              />
+
+              <div
+                style={{
+                  color: "#999",
+                  marginTop: "-3px",
+                  lineHeight: "1",
+                  width: "279px",
+                }}
+              >
+                <p
+                  style={{
+                    fontSize: "0.75rem",
+                    fontWeight: "bold",
+                    color: theme === "dark" ? "#1CB853" : "#0d943d",
+                    marginBottom: "15px",
+                  }}
+                >
+                  LISTENING TO SPOTIFY...
+                </p>
+                <p
+                  style={{
+                    height: "15px",
+                    color: theme === "dark" ? "#fff" : "#000",
+                    fontWeight: "bold",
+                    fontSize: "0.85rem",
+                    overflow: "hidden",
+                    whiteSpace: "nowrap",
+                    textOverflow: "ellipsis",
+                    margin: "7px 0",
+                  }}
+                >
+                  {data.spotify.song}
+                </p>
+                <p
+                  style={{
+                    margin: "7px 0",
+                    height: "15px",
+                    overflow: "hidden",
+                    whiteSpace: "nowrap",
+                    fontSize: "0.85rem",
+                    textOverflow: "ellipsis",
+                    color: theme === "dark" ? "#ccc" : "#777",
+                  }}
+                >
+                  By {data.spotify.artist}
+                </p>
+              </div>
+            </div>
+          ) : null}
+          {!activity && (!data.listening_to_spotify || hideSpotify) && hideActivity === "false" ? (
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                height: "150px",
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <p
+                style={{
+                  fontStyle: "italic",
+                  fontSize: "0.8rem",
+                  color: theme === "dark" ? "#aaa" : "#444",
+                  height: "auto",
+                  textAlign: "center",
+                }}
+              >
+                {idleMessage}
+              </p>
+            </div>
+          ) : null}
+        </ForeignDiv>
       </foreignObject>
     </svg>
-        `;
+  );
 
-        let emotion = extractCritical(renderSVG);
-
-        return renderSVG.replace("{{ emotion-css }}", `<style data-emotion="${key} ${emotion.ids.join(' ')}">${emotion.css}</style>`)
-};
+  return renderToStaticMarkup(renderedSVG);
+}
 
 export default renderCard;