grid and style adjustments - new rarity component for rarity symbol svgs

package-lock.json

@@ -99,6 +99,7 @@
       "resolved": "https://registry.npmjs.org/@azure-rest/core-client/-/core-client-2.5.1.tgz",
       "integrity": "sha512-EHaOXW0RYDKS5CFffnixdyRPak5ytiCtU7uXDcP/uiY+A6jFRwNGzzJBiznkCzvi5EYpY+YWinieqHb0oY916A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure/abort-controller": "^2.1.2",
         "@azure/core-auth": "^1.10.0",
@@ -116,6 +117,7 @@
       "resolved": "https://registry.npmjs.org/@azure/abort-controller/-/abort-controller-2.1.2.tgz",
       "integrity": "sha512-nBrLsEWm4J2u5LpAPjxADTlq3trDgVZZXHNKabeXZtpq3d3AbN/KGO82R87rdDz5/lYB024rtEf10/q0urNgsA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.6.2"
       },
@@ -128,6 +130,7 @@
       "resolved": "https://registry.npmjs.org/@azure/core-auth/-/core-auth-1.10.1.tgz",
       "integrity": "sha512-ykRMW8PjVAn+RS6ww5cmK9U2CyH9p4Q88YJwvUslfuMmN98w/2rdGRLPqJYObapBCdzBVeDgYWdJnFPFb7qzpg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure/abort-controller": "^2.1.2",
         "@azure/core-util": "^1.13.0",
@@ -161,6 +164,7 @@
       "resolved": "https://registry.npmjs.org/@azure/core-http-compat/-/core-http-compat-2.3.2.tgz",
       "integrity": "sha512-Tf6ltdKzOJEgxZeWLCjMxrxbodB/ZeCbzzA1A2qHbhzAjzjHoBVSUeSl/baT/oHAxhc4qdqVaDKnc2+iE932gw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure/abort-controller": "^2.1.2"
       },
@@ -177,6 +181,7 @@
       "resolved": "https://registry.npmjs.org/@azure/core-lro/-/core-lro-2.7.2.tgz",
       "integrity": "sha512-0YIpccoX8m/k00O7mDDMdJpbr6mf1yWo2dfmxt5A8XVZVVMz2SSKaEbMCeJRvgQ0IaSlqhjT47p4hVIRRy90xw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure/abort-controller": "^2.0.0",
         "@azure/core-util": "^1.2.0",
@@ -192,6 +197,7 @@
       "resolved": "https://registry.npmjs.org/@azure/core-paging/-/core-paging-1.6.2.tgz",
       "integrity": "sha512-YKWi9YuCU04B55h25cnOYZHxXYtEvQEbKST5vqRga7hWY9ydd3FZHdeQF8pyh+acWZvppw13M/LMGx0LABUVMA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.6.2"
       },
@@ -223,6 +229,7 @@
       "resolved": "https://registry.npmjs.org/@azure/core-tracing/-/core-tracing-1.3.1.tgz",
       "integrity": "sha512-9MWKevR7Hz8kNzzPLfX4EAtGM2b8mr50HPDBvio96bURP/9C+HjdH3sBlLSNNrvRAr5/k/svoH457gB5IKpmwQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.6.2"
       },
@@ -235,6 +242,7 @@
       "resolved": "https://registry.npmjs.org/@azure/core-util/-/core-util-1.13.1.tgz",
       "integrity": "sha512-XPArKLzsvl0Hf0CaGyKHUyVgF7oDnhKoP85Xv6M4StF/1AhfORhZudHtOyf2s+FcbuQ9dPRAjB8J2KvRRMUK2A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure/abort-controller": "^2.1.2",
         "@typespec/ts-http-runtime": "^0.3.0",
@@ -272,6 +280,7 @@
       "resolved": "https://registry.npmjs.org/@azure/keyvault-common/-/keyvault-common-2.0.0.tgz",
       "integrity": "sha512-wRLVaroQtOqfg60cxkzUkGKrKMsCP6uYXAOomOIysSMyt1/YM0eUn9LqieAWM8DLcU4+07Fio2YGpPeqUbpP9w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure/abort-controller": "^2.0.0",
         "@azure/core-auth": "^1.3.0",
@@ -291,6 +300,7 @@
       "resolved": "https://registry.npmjs.org/@azure/keyvault-keys/-/keyvault-keys-4.10.0.tgz",
       "integrity": "sha512-eDT7iXoBTRZ2n3fLiftuGJFD+yjkiB1GNqzU2KbY1TLYeXeSPVTVgn2eJ5vmRTZ11978jy2Kg2wI7xa9Tyr8ag==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure-rest/core-client": "^2.3.3",
         "@azure/abort-controller": "^2.1.2",
@@ -314,6 +324,7 @@
       "resolved": "https://registry.npmjs.org/@azure/logger/-/logger-1.3.0.tgz",
       "integrity": "sha512-fCqPIfOcLE+CGqGPd66c8bZpwAji98tZ4JI9i/mlTNTlsIWslCfpg48s/ypyLxZTump5sypjrKn2/kY7q8oAbA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typespec/ts-http-runtime": "^0.3.0",
         "tslib": "^2.6.2"
@@ -327,6 +338,7 @@
       "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-4.28.2.tgz",
       "integrity": "sha512-6vYUMvs6kJxJgxaCmHn/F8VxjLHNh7i9wzfwPGf8kyBJ8Gg2yvBXx175Uev8LdrD1F5C4o7qHa2CC4IrhGE1XQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure/msal-common": "15.14.2"
       },
@@ -339,6 +351,7 @@
       "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-15.14.2.tgz",
       "integrity": "sha512-n8RBJEUmd5QotoqbZfd+eGBkzuFI1KX6jw2b3WcpSyGjwmzoeI/Jb99opIBPHpb8y312NB+B6+FGi2ZVSR8yfA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -348,6 +361,7 @@
       "resolved": "https://registry.npmjs.org/@azure/msal-node/-/msal-node-3.8.7.tgz",
       "integrity": "sha512-a+Xnrae+uwLnlw68bplS1X4kuJ9F/7K6afuMFyRkNIskhjgDezl5Fhrx+1pmAlDmC0VaaAxjRQMp1OmcqVwkIg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure/msal-common": "15.14.2",
         "jsonwebtoken": "^9.0.0",
@@ -1324,7 +1338,8 @@
       "version": "5.7.0",
       "resolved": "https://registry.npmjs.org/@js-joda/core/-/core-5.7.0.tgz",
       "integrity": "sha512-WBu4ULVVxySLLzK1Ppq+OdfP+adRS4ntmDQT915rzDJ++i95gc2jZkM5B6LWEAwN3lGXpfie3yPABozdD3K3Vg==",
-      "license": "BSD-3-Clause"
+      "license": "BSD-3-Clause",
+      "peer": true
     },
     "node_modules/@js-temporal/polyfill": {
       "version": "0.5.1",
@@ -1646,7 +1661,6 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -2076,7 +2090,8 @@
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@tediousjs/connection-string/-/connection-string-0.5.0.tgz",
       "integrity": "sha512-7qSgZbincDDDFyRweCIEvZULFAw5iz/DeunhvuxpL31nfntX3P4Yd4HkHBRg9H8CdqY1e5WFN1PZIz/REL9MVQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/bootstrap": {
       "version": "5.2.10",
@@ -2153,7 +2168,6 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.2.1.tgz",
       "integrity": "sha512-CPrnr8voK8vC6eEtyRzvMpgp3VyVRhgclonE7qYi6P9sXwYb59ucfrnmFBTaP0yUi8Gk4yZg/LlTJULGxvTNsg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -2163,6 +2177,7 @@
       "resolved": "https://registry.npmjs.org/@types/readable-stream/-/readable-stream-4.0.23.tgz",
       "integrity": "sha512-wwXrtQvbMHxCbBgjHaMGEmImFTQxxpfMOR/ZoQnXxB1woqkUbdLGFDgauo00Py9IudiaqSeiBiulSV9i6XIPig==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/node": "*"
       }
@@ -2178,6 +2193,7 @@
       "resolved": "https://registry.npmjs.org/@typespec/ts-http-runtime/-/ts-http-runtime-0.3.3.tgz",
       "integrity": "sha512-91fp6CAAJSRtH5ja95T1FHSKa8aPW9/Zw6cta81jlZTUw/+Vq8jM/AfF/14h2b71wwR84JUTW/3Y8QPhDAawFA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "http-proxy-agent": "^7.0.0",
         "https-proxy-agent": "^7.0.0",
@@ -2198,6 +2214,7 @@
       "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
       "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "event-target-shim": "^5.0.0"
       },
@@ -2222,6 +2239,7 @@
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
       "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 14"
       }
@@ -2488,13 +2506,15 @@
           "url": "https://feross.org/support"
         }
       ],
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/bl": {
       "version": "6.1.6",
       "resolved": "https://registry.npmjs.org/bl/-/bl-6.1.6.tgz",
       "integrity": "sha512-jLsPgN/YSvPUg9UX0Kd73CXpm2Psg9FxMeCSXnk3WBO3CMT10JMwijubhGfHCnFu6TPn1ei3b975dxv7K2pWVg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/readable-stream": "^4.0.0",
         "buffer": "^6.0.3",
@@ -2568,6 +2588,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "base64-js": "^1.3.1",
         "ieee754": "^1.2.1"
@@ -2577,13 +2598,15 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
       "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
-      "license": "BSD-3-Clause"
+      "license": "BSD-3-Clause",
+      "peer": true
     },
     "node_modules/bundle-name": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
       "integrity": "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "run-applescript": "^7.0.0"
       },
@@ -2883,6 +2906,7 @@
       "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.5.0.tgz",
       "integrity": "sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "bundle-name": "^4.1.0",
         "default-browser-id": "^5.0.0"
@@ -2899,6 +2923,7 @@
       "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.1.tgz",
       "integrity": "sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -2911,6 +2936,7 @@
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
       "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3276,6 +3302,7 @@
       "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
       "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "safe-buffer": "^5.0.1"
       }
@@ -3371,6 +3398,7 @@
       "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
       "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -3386,6 +3414,7 @@
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.8.x"
       }
@@ -3705,6 +3734,7 @@
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
       "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "agent-base": "^7.1.0",
         "debug": "^4.3.4"
@@ -3718,6 +3748,7 @@
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
       "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "agent-base": "^7.1.2",
         "debug": "4"
@@ -3760,7 +3791,8 @@
           "url": "https://feross.org/support"
         }
       ],
-      "license": "BSD-3-Clause"
+      "license": "BSD-3-Clause",
+      "peer": true
     },
     "node_modules/immutable": {
       "version": "5.1.4",
@@ -3782,7 +3814,8 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "license": "ISC"
+      "license": "ISC",
+      "peer": true
     },
     "node_modules/iron-webcrypto": {
       "version": "1.2.1",
@@ -3897,7 +3930,6 @@
       "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
       }
@@ -3906,7 +3938,8 @@
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/js-md4/-/js-md4-0.3.2.tgz",
       "integrity": "sha512-/GDnfQYsltsjRswQhN9fhv3EMw2sCpUdrdxyWDOUK7eyD++r3gRhzgiQgc/x4MAv2i1iuQ4lxO5mvqM3vj4bwA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/js-yaml": {
       "version": "4.1.1",
@@ -3932,6 +3965,7 @@
       "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz",
       "integrity": "sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "jws": "^4.0.1",
         "lodash.includes": "^4.3.0",
@@ -3954,6 +3988,7 @@
       "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
       "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "buffer-equal-constant-time": "^1.0.1",
         "ecdsa-sig-formatter": "1.0.11",
@@ -3965,6 +4000,7 @@
       "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz",
       "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "jwa": "^2.0.1",
         "safe-buffer": "^5.0.1"
@@ -3983,43 +4019,50 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
       "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.isboolean": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
       "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.isinteger": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
       "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.isnumber": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
       "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.isplainobject": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
       "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.isstring": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
       "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.once": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
       "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/long": {
       "version": "5.3.2",
@@ -4905,6 +4948,7 @@
       "resolved": "https://registry.npmjs.org/mssql/-/mssql-11.0.1.tgz",
       "integrity": "sha512-KlGNsugoT90enKlR8/G36H0kTxPthDhmtNUCwEHvgRza5Cjpjoj+P2X6eMpFUDN7pFrJZsKadL4x990G8RBE1w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@tediousjs/connection-string": "^0.5.0",
         "commander": "^11.0.0",
@@ -4925,6 +4969,7 @@
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -4937,6 +4982,7 @@
       "resolved": "https://registry.npmjs.org/tedious/-/tedious-18.6.2.tgz",
       "integrity": "sha512-g7jC56o3MzLkE3lHkaFe2ZdOVFBahq5bsB60/M4NYUbocw/MCrS89IOEQUFr+ba6pb8ZHczZ/VqCyYeYq0xBAg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure/core-auth": "^1.7.2",
         "@azure/identity": "^4.2.1",
@@ -4958,7 +5004,6 @@
       "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.16.3.tgz",
       "integrity": "sha512-+3XhQEt4FEFuvGV0JjIDj4eP2OT/oIj/54dYvqhblnSzlfcxVOuj+cd15Xz6hsG4HU1a+A5+BA9gm0618C4z7A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "aws-ssl-profiles": "^1.1.2",
         "denque": "^2.1.0",
@@ -5008,7 +5053,8 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/native-duplexpair/-/native-duplexpair-1.0.0.tgz",
       "integrity": "sha512-E7QQoM+3jvNtlmyfqRZ0/U75VFgCls+fSkbml2MpgWkWyz3ox8Y58gNhfuziuQYGNNQAbFZJQck55LHCnCK6CA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/neotraverse": {
       "version": "0.6.18",
@@ -5111,6 +5157,7 @@
       "resolved": "https://registry.npmjs.org/open/-/open-10.2.0.tgz",
       "integrity": "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "default-browser": "^5.2.1",
         "define-lazy-prop": "^3.0.0",
@@ -5269,6 +5316,7 @@
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
       "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.6.0"
       }
@@ -5307,6 +5355,7 @@
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.7.0.tgz",
       "integrity": "sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "abort-controller": "^3.0.0",
         "buffer": "^6.0.3",
@@ -5562,14 +5611,14 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
       "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/rollup": {
       "version": "4.57.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
       "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -5614,6 +5663,7 @@
       "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.1.0.tgz",
       "integrity": "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -5639,7 +5689,8 @@
           "url": "https://feross.org/support"
         }
       ],
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
@@ -5652,7 +5703,6 @@
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.97.3.tgz",
       "integrity": "sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -5824,7 +5874,8 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
       "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
-      "license": "BSD-3-Clause"
+      "license": "BSD-3-Clause",
+      "peer": true
     },
     "node_modules/sqlstring": {
       "version": "2.3.3",
@@ -5840,6 +5891,7 @@
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
       "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "safe-buffer": "~5.2.0"
       }
@@ -5920,6 +5972,7 @@
       "resolved": "https://registry.npmjs.org/tarn/-/tarn-3.0.2.tgz",
       "integrity": "sha512-51LAVKUSZSVfI05vjPESNc5vwqqZpbXCsU+/+wxlOrUjk2SnFTt97v9ZgQrD4YmxYW1Px6w2KjaDitCfkvgxMQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=8.0.0"
       }
@@ -5929,6 +5982,7 @@
       "resolved": "https://registry.npmjs.org/tedious/-/tedious-19.2.1.tgz",
       "integrity": "sha512-pk1Q16Yl62iocuQB+RWbg6rFUFkIyzqOFQ6NfysCltRvQqKwfurgj8v/f2X+CKvDhSL4IJ0cCOfCHDg9PWEEYA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure/core-auth": "^1.7.2",
         "@azure/identity": "^4.2.1",
@@ -6039,7 +6093,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -6326,6 +6379,7 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -6377,7 +6431,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
       "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -6522,6 +6575,7 @@
       "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz",
       "integrity": "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "is-wsl": "^3.1.0"
       },
@@ -6591,7 +6645,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.0.1",
   "scripts": {
-    "dev": "astro dev",
+    "dev": "astro dev --host 0.0.0.0",
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro"

src/assets/css/main.scss

@@ -3,3 +3,29 @@
 .copy-small {
     font-size: 0.8rem;
 }
+
+.rarity-icon svg {
+  height: 16px;
+  width: auto;
+  display: inline-block;
+}
+
+.price-label {
+    color: hsl(122, 39%, 49%);
+}
+
+.price-label:nth-of-type(n+2) {
+    color: hsl(66, 70%, 54%);
+}
+
+.price-label:nth-of-type(n+3) {
+    color: hsl(54, 100%, 62%);
+}
+
+.price-label:nth-of-type(n+4) {
+    color: hsl(45, 100%, 51%);
+}
+
+.price-label:last-of-type {
+    color: hsl(36, 100%, 50%);
+}

src/components/RarityIcon.astro

@@ -0,0 +1,35 @@
+---
+import common from "/src/svg/rarity/common.svg?raw";
+import uncommon from "/src/svg/rarity/uncommon.svg?raw";
+import rare from "/src/svg/rarity/rare.svg?raw";
+import rareHolo from "/src/svg/rarity/rare_holo.svg?raw";
+import amazingRare from "/src/svg/rarity/amazing_rare.svg?raw";
+import illustrationRare from "/src/svg/rarity/illustration_rare.svg?raw";
+import megaAttackRare from "/src/svg/rarity/mega_attack_rare.svg?raw";
+import megaHyperRare from "/src/svg/rarity/mega_hyper_rare.svg?raw";
+import doubleRare from "/src/svg/rarity/double_rare.svg?raw";
+import promo from "/src/svg/rarity/promo.svg?raw";
+import specialIllusRare from "/src/svg/rarity/special_illustration_rare.svg?raw";
+import ultrarare from "/src/svg/rarity/rare_ultra.svg?raw";
+
+const { rarity } = Astro.props;
+
+const rarityMap = {
+  "Common": common,
+  "Uncommon": uncommon,
+  "Rare": rare,
+  "Holo Rare": rareHolo,
+  "Amazing Rare": amazingRare,
+  "Illustration Rare": illustrationRare,
+  "Mega Attack Rare": megaAttackRare,
+  "Mega Hyper Rare": megaHyperRare,
+  "Double Rare": doubleRare,
+  "Promo": promo,
+  "Special Illustration Rare": specialIllusRare,
+  "Ultra Rare": ultrarare, // Ultra Rare and Holo Rare use the same icon
+};
+
+const svg = rarityMap[rarity] ?? "";
+---
+
+<span class="rarity-icon h-100" set:html={svg}></span>

src/layouts/Layout.astro

@@ -6,7 +6,8 @@
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<link rel="icon" href="/favicon.ico" />
 		<meta name="generator" content={Astro.generator} />
-		<title>Astro Basics</title>
+		<link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" as="style" />
+		<title>Rigid's app thing</title>
 	</head>
 	<body>
 		<slot />

src/layouts/Main.astro

@@ -3,7 +3,7 @@ import '/src/assets/css/main.scss';
 ---
 
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

src/pages/pokemon.astro

@@ -1,45 +1,65 @@
 ---
 import Layout from '../layouts/Main.astro';
+import RarityIcon from "../components/RarityIcon.astro";
 
 //import { eq } from 'drizzle-orm';
 import { db } from '../db';
 //import * as schema from '../db/schema.ts';
 
-
 // Get some sample Pokemon data from the database
-//const pokemon = await db.select().from(schema.cards).where(eq(schema.cards.productLineName, "pokemon")).limit(16);
+//const pokemon = await db.select().from(schema.cards).where(eq(schema.cards.productLineName, "pokemon")).limit(256);
 const pokemon = await db.query.cards.findMany({
     where: { productLineName: "pokemon" },
-    limit: 16,
+    limit: 32,
     with: {
         prices: true,
     }
 });
+
+const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
 ---
 
 <Layout>
 <div class="container">
+    <h1 class="my-5">Rigid's app thing</h1>
     <div class="row">
-        <div class="col-12">
+        <div class="col-sm-12 col-md-2">
-            <h1>Pokemon</h1>
+            <div class="h5">Inventory management placeholder</div>
+        </div>
+        <div class="col-sm-12 col-md-10">
+                <div class="row g-4 row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4">
+            {pokemon.map((card) => (
+                <div class="col">
+                    <img src={`/cards/${card.productId}.jpg`} alt={card.productName} class="w-100 img-fluid rounded-4 mb-2" />
+                    <div class="row row-cols-2">
+                        <div class="col-auto h6">{card.productName}</div>
+                        <div class="col-auto ms-auto copy-small">{card.number}</div>
+                    </div>
+                    <div class="row justify-content-end">
+                        <div class="col-auto ms-auto">
+                            <RarityIcon rarity={card.rarityName} />
+                        </div>
+                    </div>
+                    <div class="row row-cols-5 gx-0 mt-1">
+                    {card.prices
+                        .slice()
+                        .sort((a, b) => order.indexOf(a.condition) - order.indexOf(b.condition))
+                        .filter((price, index, arr) =>
+                        arr.findIndex(p => p.condition === price.condition) === index
+                        )
+                        .map((price) => (
+                        <div class="col copy-small p price-label">
+                            {price.condition.split(' ').map((w) => w[0]).join('')}
+                            <br />${price.marketPrice}
+                        </div>
+                        ))}
+                    </div>
+                </div>
+            ))}
+
+        </div>
         </div>
     </div>
-    <div class="row gy-4 row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4">
+    
-        {pokemon.map((card) => (
-            <div class="col">
-                <img src={`/cards/${card.productId}.jpg`} alt={card.productName} class="img-fluid" />
-                <div class="row justify-content-between">
-                    <div class="col-auto"><strong>{card.productName}</strong></div>
-                    <div class="col-auto">{card.number}</div>
-                </div>
-                <div class="row">
-                    {card.prices.map((price) => (
-                        <div class="col-auto copy-small">{price.condition.split(' ').map((word) => word.charAt(0)).join('')}<br />{price.marketPrice}</div>
-                    ))}
-                </div>
-            </div>
-        ))}
-
-    </div>
 </div>
 </Layout>

src/svg/rarity/amazing_rare.svg

@@ -0,0 +1,17 @@
+<svg viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_294_2522)">
+<path d="M4.57699 12.3106C5.86593 11.5102 7.33275 12.6212 7.33275 12.6212C7.33275 12.6212 7.02213 11.5102 7.77744 11.1544L5.82213 6.7991L2.04425 11.3774C2.04425 11.3774 3.91062 11.0217 4.57699 12.3106Z" fill="#8F4A9B"/>
+<path d="M5.82211 6.80044L10.8889 8.31106C10.8889 8.31106 10.5332 7.2438 11.8221 6.80044C11.8221 6.80044 9.8668 5.64557 12 3.73407L5.82211 5.64557V6.80044Z" fill="#06A35B"/>
+<path d="M5.82211 5.64425L12 3.73274C12 3.73274 9.91061 4.17743 9.68893 2.57788C9.68893 2.57788 8.22211 2.44513 8.48893 0L5.82211 5.64425Z" fill="#F1E836"/>
+<path d="M5.82211 5.64425L8.48892 0C8.48892 0 7.02211 2.22212 5.82211 1.33274C5.82211 1.33274 5.33361 3.15531 3.02255 0.75531L4.91149 7.28894L5.82211 6.80044V5.64557V5.64425Z" fill="#DF071C"/>
+<path d="M3.02257 0.75531C3.02257 0.75531 3.68894 2.71062 1.06726 3.64381C1.06726 3.64381 2.08938 5.55531 0 5.64425L5.64292 8.08672L6.57743 6.4885L4.88363 3.64381L3.02257 0.75531Z" fill="#039ADB"/>
+<path d="M0 5.64426C0 5.64426 2.35487 7.77744 0.44469 8.97744C0.44469 8.97744 2.84469 9.06638 2.04425 11.3774L5.24469 7.51063L0 5.64426Z" fill="#DB4790"/>
+<path d="M5.82212 5.01903L4.9115 7.39115L6.08628 7.38717L7.77743 11.1544C7.77743 11.1544 9.33318 10.8876 9.99955 10.9765C9.99955 10.9765 9.37699 9.33186 11.6442 9.4208L10.8889 8.30974L6.93849 7.13097L5.82212 5.0177V5.01903Z" fill="#EA4A0B"/>
+<path d="M4.70176 8.25L4.1761 9.47257H2.60574L5.29512 3.81107H6.6876L9.36902 9.47124H7.78141L7.21327 8.24868H4.70176V8.25ZM6.26282 6.22169C6.1022 5.8739 6.02521 5.69602 5.91504 5.43186C5.80486 5.70399 5.77964 5.77169 5.5845 6.23761L5.2115 7.1031H6.6876L6.26282 6.22036V6.22169Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_294_2522">
+<rect width="12" height="12.6212" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/svg/rarity/common.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="5" cy="5" r="4.5" fill="#1F232D" stroke="white"/>
+</svg>

src/svg/rarity/double_rare.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.00021 0.579583L4.92688 2.51822L4.98809 2.64627L5.12942 2.65934L7.37109 2.86666L5.70607 4.23373L5.58558 4.33266L5.6214 4.48439L6.10131 6.51723L4.11848 5.45301L4.00027 5.38956L3.88205 5.453L1.8988 6.51722L2.3791 4.48444L2.41496 4.33266L2.29442 4.23371L0.629014 2.86665L2.87059 2.65934L3.01188 2.64627L3.0731 2.51826L4.00021 0.579583Z" fill="#1F232D" stroke="white" stroke-width="0.5"/>
+<path d="M12.0002 3.57958L12.9269 5.51822L12.9881 5.64627L13.1294 5.65934L15.3711 5.86666L13.7061 7.23373L13.5856 7.33266L13.6214 7.48439L14.1013 9.51723L12.1185 8.45301L12.0003 8.38956L11.882 8.453L9.8988 9.51722L10.3791 7.48444L10.415 7.33266L10.2944 7.23371L8.62901 5.86665L10.8706 5.65934L11.0119 5.64627L11.0731 5.51826L12.0002 3.57958Z" fill="#1F232D" stroke="white" stroke-width="0.5"/>
+</svg>

src/svg/rarity/illustration_rare.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.00035 1.21724L8.56088 4.6818L8.67978 4.94579L8.96793 4.97407L12.7977 5.34995L9.93478 7.8445L9.71062 8.03983L9.77518 8.33005L10.5931 12.007L7.24791 10.1016L7.00047 9.9607L6.75302 10.1016L3.40706 12.007L4.2257 8.33014L4.29034 8.03983L4.06607 7.84447L1.20247 5.34994L5.03207 4.97407L5.32016 4.94579L5.43909 4.68188L7.00035 1.21724Z" fill="#FDC401" stroke="white"/>
+</svg>

src/svg/rarity/mega_attack_rare.svg

@@ -0,0 +1,16 @@
+<svg viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.00026 0L5.15244 2.4104L8 2.67376L5.86471 4.42695L6.47215 7L4.00026 5.67329L1.52785 7L2.1358 4.42695L0 2.67376L2.84756 2.4104L4.00026 0Z" fill="url(#paint0_linear_5284_2043)"/>
+<path d="M12.0003 3L13.1524 5.4104L16 5.67376L13.8647 7.42695L14.4722 10L12.0003 8.67329L9.52785 10L10.1358 7.42695L8 5.67376L10.8476 5.4104L12.0003 3Z" fill="url(#paint1_linear_5284_2043)"/>
+<defs>
+<linearGradient id="paint0_linear_5284_2043" x1="0" y1="0" x2="6.16262" y2="7.32472" gradientUnits="userSpaceOnUse">
+<stop offset="0.203125" stop-color="#D83A92"/>
+<stop offset="0.505208" stop-color="#F2A1C6"/>
+<stop offset="0.822917" stop-color="#D83A92"/>
+</linearGradient>
+<linearGradient id="paint1_linear_5284_2043" x1="8" y1="3" x2="14.1626" y2="10.3247" gradientUnits="userSpaceOnUse">
+<stop offset="0.203125" stop-color="#2A9568"/>
+<stop offset="0.505208" stop-color="#86D499"/>
+<stop offset="0.822917" stop-color="#2A9568"/>
+</linearGradient>
+</defs>
+</svg>

src/svg/rarity/mega_hyper_rare.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.6364 7.38298L12 1L8.36364 7.38298L2 11.2128L8.36364 14.617L12 21L15.6364 14.617L22 11.2128L15.6364 7.38298Z" fill="#FFFF19" stroke="black"/>
+<path d="M13.8182 9.19149L12 6L10.1818 9.19149L7 11.1064L10.1818 12.8085L12 16L13.8182 12.8085L17 11.1064L13.8182 9.19149Z" fill="black"/>
+</svg>

src/svg/rarity/rare.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.00035 1.21724L8.56088 4.6818L8.67978 4.94579L8.96793 4.97407L12.7977 5.34995L9.93478 7.8445L9.71062 8.03983L9.77518 8.33005L10.5931 12.007L7.24791 10.1016L7.00047 9.9607L6.75302 10.1016L3.40706 12.007L4.2257 8.33014L4.29034 8.03983L4.06607 7.84447L1.20247 5.34994L5.03207 4.97407L5.32016 4.94579L5.43909 4.68188L7.00035 1.21724Z" fill="#1F232D" stroke="white"/>
+</svg>

src/svg/rarity/rare_holo.svg

@@ -0,0 +1,11 @@
+<svg viewBox="0 0 23 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.00045 0L9.01677 4.47646L14 4.96555L10.2632 8.22148L11.3263 13L7.00045 10.5361L2.67373 13L3.73765 8.22148L0 4.96555L4.98323 4.47646L7.00045 0Z" fill="url(#paint0_linear_295_2571)"/>
+<path d="M17 11V2H18.6537V5.6123H21.3497V2H23V11H21.3497V7.3833H18.6537V11H17Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_295_2571" x1="0" y1="0" x2="11.5419" y2="12.9269" gradientUnits="userSpaceOnUse">
+<stop offset="0.203125" stop-color="#BFBFBF"/>
+<stop offset="0.505208" stop-color="white"/>
+<stop offset="0.822917" stop-color="#798194"/>
+</linearGradient>
+</defs>
+</svg>

src/svg/rarity/rare_holo_lv.x.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.00045 0L9.01677 4.47646L14 4.96555L10.2632 8.22148L11.3263 13L7.00045 10.5361L2.67373 13L3.73765 8.22148L0 4.96555L4.98323 4.47646L7.00045 0Z" fill="url(#paint0_linear_295_2611)"/>
+<defs>
+<linearGradient id="paint0_linear_295_2611" x1="0" y1="0" x2="11.5419" y2="12.9269" gradientUnits="userSpaceOnUse">
+<stop offset="0.203125" stop-color="#BFBFBF"/>
+<stop offset="0.505208" stop-color="white"/>
+<stop offset="0.822917" stop-color="#798194"/>
+</linearGradient>
+</defs>
+</svg>

src/svg/rarity/rare_holo_vmax.svg

@@ -0,0 +1,11 @@
+<svg viewBox="0 0 24 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.00045 0L9.01677 4.47646L14 4.96555L10.2632 8.22148L11.3263 13L7.00045 10.5361L2.67373 13L3.73765 8.22148L0 4.96555L4.98323 4.47646L7.00045 0Z" fill="url(#paint0_linear_295_2573)"/>
+<path d="M19.0971 3L20.4635 5.84326H20.5219L21.9029 3H23.9269L21.6691 7.5L24 12H21.9248L20.5219 9.12598H20.4635L19.0605 12H17L19.3199 7.5L17.0585 3H19.0971Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_295_2573" x1="0" y1="0" x2="11.5419" y2="12.9269" gradientUnits="userSpaceOnUse">
+<stop offset="0.203125" stop-color="#BFBFBF"/>
+<stop offset="0.505208" stop-color="white"/>
+<stop offset="0.822917" stop-color="#798194"/>
+</linearGradient>
+</defs>
+</svg>

src/svg/rarity/rare_ultra.svg

@@ -0,0 +1,11 @@
+<svg viewBox="0 0 23 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.00045 0L9.01677 4.47646L14 4.96555L10.2632 8.22148L11.3263 13L7.00045 10.5361L2.67373 13L3.73765 8.22148L0 4.96555L4.98323 4.47646L7.00045 0Z" fill="url(#paint0_linear_295_2574)"/>
+<path d="M21.2897 3H23V8.7324C23 9.39489 22.8742 9.97204 22.6226 10.4638C22.371 10.9527 22.0202 11.3317 21.5701 11.6008C21.12 11.8669 20.5972 12 20.0017 12C19.3993 12 18.8731 11.8669 18.423 11.6008C17.9729 11.3317 17.6232 10.9527 17.3739 10.4638C17.1246 9.97204 17 9.39489 17 8.7324V3H18.7138V8.54581C18.7138 8.85246 18.7669 9.12584 18.8731 9.36596C18.9815 9.60608 19.1327 9.79412 19.3266 9.93009C19.5205 10.0661 19.7455 10.134 20.0017 10.134C20.2579 10.134 20.4818 10.0661 20.6734 9.93009C20.8673 9.79412 21.0185 9.60608 21.1269 9.36596C21.2354 9.12584 21.2897 8.85246 21.2897 8.54581V3Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_295_2574" x1="0" y1="0" x2="11.5419" y2="12.9269" gradientUnits="userSpaceOnUse">
+<stop offset="0.203125" stop-color="#BFBFBF"/>
+<stop offset="0.505208" stop-color="white"/>
+<stop offset="0.822917" stop-color="#798194"/>
+</linearGradient>
+</defs>
+</svg>

src/svg/rarity/special_illustration_rare.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.00021 0.579583L4.92688 2.51822L4.98809 2.64627L5.12942 2.65934L7.37109 2.86666L5.70607 4.23373L5.58558 4.33266L5.6214 4.48439L6.10131 6.51723L4.11848 5.45301L4.00027 5.38956L3.88205 5.453L1.8988 6.51722L2.3791 4.48444L2.41496 4.33266L2.29442 4.23371L0.629014 2.86665L2.87059 2.65934L3.01188 2.64627L3.0731 2.51826L4.00021 0.579583Z" fill="#FDC401" stroke="white" stroke-width="0.5"/>
+<path d="M12.0002 3.57958L12.9269 5.51822L12.9881 5.64627L13.1294 5.65934L15.3711 5.86666L13.7061 7.23373L13.5856 7.33266L13.6214 7.48439L14.1013 9.51723L12.1185 8.45301L12.0003 8.38956L11.882 8.453L9.8988 9.51722L10.3791 7.48444L10.415 7.33266L10.2944 7.23371L8.62901 5.86665L10.8706 5.65934L11.0119 5.64627L11.0731 5.51826L12.0002 3.57958Z" fill="#FDC401" stroke="white" stroke-width="0.5"/>
+</svg>

src/svg/rarity/ultra_rare.svg

@@ -0,0 +1,16 @@
+<svg viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.00026 0L5.15244 2.4104L8 2.67376L5.86471 4.42695L6.47215 7L4.00026 5.67329L1.52785 7L2.1358 4.42695L0 2.67376L2.84756 2.4104L4.00026 0Z" fill="url(#paint0_linear_294_2531)"/>
+<path d="M12.0003 3L13.1524 5.4104L16 5.67376L13.8647 7.42695L14.4722 10L12.0003 8.67329L9.52785 10L10.1358 7.42695L8 5.67376L10.8476 5.4104L12.0003 3Z" fill="url(#paint1_linear_294_2531)"/>
+<defs>
+<linearGradient id="paint0_linear_294_2531" x1="0" y1="0" x2="6.16262" y2="7.32472" gradientUnits="userSpaceOnUse">
+<stop offset="0.203125" stop-color="#BFBFBF"/>
+<stop offset="0.505208" stop-color="white"/>
+<stop offset="0.822917" stop-color="#798194"/>
+</linearGradient>
+<linearGradient id="paint1_linear_294_2531" x1="8" y1="3" x2="14.1626" y2="10.3247" gradientUnits="userSpaceOnUse">
+<stop offset="0.203125" stop-color="#BFBFBF"/>
+<stop offset="0.505208" stop-color="white"/>
+<stop offset="0.822917" stop-color="#798194"/>
+</linearGradient>
+</defs>
+</svg>

src/svg/rarity/uncommon.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="7.07104" y="0.707107" width="9" height="9" transform="rotate(45 7.07104 0.707107)" fill="#1F232D" stroke="white"/>
+</svg>