@unkn0wndo3s/nova-design-system 0.1.0 → 0.2.0

package/src/components/Icons/sort/svgs/sort-32-ascend.svg

@@ -1,4 +1,4 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.6667 22.92L12.6267 21.96C12.7182 21.8618 12.8286 21.783 12.9513 21.7283C13.0739 21.6736 13.2064 21.6443 13.3406 21.6419C13.4749 21.6395 13.6083 21.6642 13.7328 21.7145C13.8573 21.7648 13.9704 21.8397 14.0654 21.9346C14.1603 22.0296 14.2352 22.1427 14.2855 22.2672C14.3358 22.3917 14.3605 22.5251 14.3581 22.6594C14.3558 22.7936 14.3264 22.9261 14.2717 23.0487C14.2171 23.1714 14.1382 23.2818 14.04 23.3733L11.3733 26.04C11.1858 26.2273 10.9317 26.3325 10.6667 26.3325C10.4017 26.3325 10.1475 26.2273 9.96 26.04L7.29333 23.3733C7.19508 23.2818 7.11628 23.1714 7.06163 23.0487C7.00697 22.9261 6.97758 22.7936 6.97521 22.6594C6.97284 22.5251 6.99754 22.3917 7.04784 22.2672C7.09813 22.1427 7.17299 22.0296 7.26795 21.9346C7.36291 21.8397 7.47602 21.7648 7.60054 21.7145C7.72505 21.6642 7.85843 21.6395 7.9927 21.6419C8.12697 21.6443 8.25938 21.6736 8.38205 21.7283C8.50472 21.783 8.61512 21.8618 8.70667 21.96L9.66667 22.92V9.33334C9.66667 9.06812 9.77202 8.81377 9.95956 8.62623C10.1471 8.43869 10.4015 8.33334 10.6667 8.33334C10.9319 8.33334 11.1862 8.43869 11.3738 8.62623C11.5613 8.81377 11.6667 9.06812 11.6667 9.33334V22.92Z" fill="currentColor"/>
-<path d="M18.6667 10.3324C18.4017 10.3324 18.1475 10.2273 17.96 10.04C17.7727 9.85249 17.6675 9.59833 17.6675 9.33333C17.6675 9.06833 17.7727 8.81416 17.96 8.62666L20.6267 5.95999C20.8142 5.77273 21.0683 5.66754 21.3333 5.66754C21.5983 5.66754 21.8525 5.77273 22.04 5.95999L24.7067 8.62666C24.8049 8.71821 24.8837 8.82861 24.9384 8.95128C24.993 9.07394 25.0224 9.20636 25.0248 9.34063C25.0272 9.4749 25.0025 9.60827 24.9522 9.73279C24.9019 9.85731 24.827 9.97042 24.7321 10.0654C24.6371 10.1603 24.524 10.2352 24.3995 10.2855C24.2749 10.3358 24.1416 10.3605 24.0073 10.3581C23.873 10.3557 23.7406 10.3264 23.6179 10.2717C23.4953 10.217 23.3849 10.1382 23.2933 10.04L22.3333 9.07999V22.6667C22.3333 22.9319 22.228 23.1862 22.0404 23.3738C21.8529 23.5613 21.5986 23.6667 21.3333 23.6667C21.0681 23.6667 20.8138 23.5613 20.6262 23.3738C20.4387 23.1862 20.3333 22.9319 20.3333 22.6667V9.07999L19.3733 10.04C19.1858 10.2273 18.9317 10.3324 18.6667 10.3324Z" fill="#7F77DD"/>
-</svg>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6667 22.92L12.6267 21.96C12.7182 21.8618 12.8286 21.783 12.9513 21.7283C13.0739 21.6736 13.2064 21.6443 13.3406 21.6419C13.4749 21.6395 13.6083 21.6642 13.7328 21.7145C13.8573 21.7648 13.9704 21.8397 14.0654 21.9346C14.1603 22.0296 14.2352 22.1427 14.2855 22.2672C14.3358 22.3917 14.3605 22.5251 14.3581 22.6594C14.3558 22.7936 14.3264 22.9261 14.2717 23.0487C14.2171 23.1714 14.1382 23.2818 14.04 23.3733L11.3733 26.04C11.1858 26.2273 10.9317 26.3325 10.6667 26.3325C10.4017 26.3325 10.1475 26.2273 9.96 26.04L7.29333 23.3733C7.19508 23.2818 7.11628 23.1714 7.06163 23.0487C7.00697 22.9261 6.97758 22.7936 6.97521 22.6594C6.97284 22.5251 6.99754 22.3917 7.04784 22.2672C7.09813 22.1427 7.17299 22.0296 7.26795 21.9346C7.36291 21.8397 7.47602 21.7648 7.60054 21.7145C7.72505 21.6642 7.85843 21.6395 7.9927 21.6419C8.12697 21.6443 8.25938 21.6736 8.38205 21.7283C8.50472 21.783 8.61512 21.8618 8.70667 21.96L9.66667 22.92V9.33334C9.66667 9.06812 9.77202 8.81377 9.95956 8.62623C10.1471 8.43869 10.4015 8.33334 10.6667 8.33334C10.9319 8.33334 11.1862 8.43869 11.3738 8.62623C11.5613 8.81377 11.6667 9.06812 11.6667 9.33334V22.92Z" fill="currentColor"/>
+<path d="M18.6667 10.3324C18.4017 10.3324 18.1475 10.2273 17.96 10.04C17.7727 9.85249 17.6675 9.59833 17.6675 9.33333C17.6675 9.06833 17.7727 8.81416 17.96 8.62666L20.6267 5.95999C20.8142 5.77273 21.0683 5.66754 21.3333 5.66754C21.5983 5.66754 21.8525 5.77273 22.04 5.95999L24.7067 8.62666C24.8049 8.71821 24.8837 8.82861 24.9384 8.95128C24.993 9.07394 25.0224 9.20636 25.0248 9.34063C25.0272 9.4749 25.0025 9.60827 24.9522 9.73279C24.9019 9.85731 24.827 9.97042 24.7321 10.0654C24.6371 10.1603 24.524 10.2352 24.3995 10.2855C24.2749 10.3358 24.1416 10.3605 24.0073 10.3581C23.873 10.3557 23.7406 10.3264 23.6179 10.2717C23.4953 10.217 23.3849 10.1382 23.2933 10.04L22.3333 9.07999V22.6667C22.3333 22.9319 22.228 23.1862 22.0404 23.3738C21.8529 23.5613 21.5986 23.6667 21.3333 23.6667C21.0681 23.6667 20.8138 23.5613 20.6262 23.3738C20.4387 23.1862 20.3333 22.9319 20.3333 22.6667V9.07999L19.3733 10.04C19.1858 10.2273 18.9317 10.3324 18.6667 10.3324Z" fill="#7F77DD"/>
+</svg>

package/src/components/Icons/sort/svgs/sort-32-default.svg

@@ -1,3 +1,3 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.96 10.04C18.1475 10.2273 18.4017 10.3324 18.6667 10.3324C18.9317 10.3324 19.1858 10.2273 19.3733 10.04L20.3333 9.07999V22.6667C20.3333 22.9319 20.4387 23.1862 20.6262 23.3738C20.8138 23.5613 21.0681 23.6667 21.3333 23.6667C21.5985 23.6667 21.8529 23.5613 22.0404 23.3738C22.228 23.1862 22.3333 22.9319 22.3333 22.6667V9.07999L23.2933 10.04C23.3849 10.1382 23.4953 10.217 23.6179 10.2717C23.7406 10.3264 23.873 10.3557 24.0073 10.3581C24.1416 10.3605 24.2749 10.3358 24.3995 10.2855C24.524 10.2352 24.6371 10.1603 24.732 10.0654C24.827 9.97042 24.9019 9.85731 24.9522 9.73279C25.0025 9.60827 25.0272 9.4749 25.0248 9.34063C25.0224 9.20636 24.993 9.07394 24.9384 8.95128C24.8837 8.82861 24.8049 8.71821 24.7067 8.62666L22.04 5.95999C21.8525 5.77273 21.5983 5.66754 21.3333 5.66754C21.0683 5.66754 20.8142 5.77273 20.6267 5.95999L17.96 8.62666C17.7727 8.81416 17.6675 9.06833 17.6675 9.33333C17.6675 9.59833 17.7727 9.85249 17.96 10.04ZM11.6667 22.92L12.6267 21.96C12.7182 21.8617 12.8286 21.7829 12.9513 21.7283C13.0739 21.6736 13.2064 21.6442 13.3406 21.6419C13.4749 21.6395 13.6083 21.6642 13.7328 21.7145C13.8573 21.7648 13.9704 21.8397 14.0654 21.9346C14.1603 22.0296 14.2352 22.1427 14.2855 22.2672C14.3358 22.3917 14.3605 22.5251 14.3581 22.6594C14.3558 22.7936 14.3264 22.926 14.2717 23.0487C14.2171 23.1714 14.1382 23.2818 14.04 23.3733L11.3733 26.04C11.1858 26.2273 10.9317 26.3324 10.6667 26.3324C10.4017 26.3324 10.1475 26.2273 9.96 26.04L7.29333 23.3733C7.19508 23.2818 7.11628 23.1714 7.06163 23.0487C7.00697 22.926 6.97758 22.7936 6.97521 22.6594C6.97284 22.5251 6.99754 22.3917 7.04784 22.2672C7.09813 22.1427 7.17299 22.0296 7.26795 21.9346C7.36291 21.8397 7.47602 21.7648 7.60054 21.7145C7.72505 21.6642 7.85843 21.6395 7.9927 21.6419C8.12697 21.6442 8.25938 21.6736 8.38205 21.7283C8.50472 21.7829 8.61512 21.8617 8.70667 21.96L9.66667 22.92V9.33333C9.66667 9.06811 9.77202 8.81376 9.95956 8.62622C10.1471 8.43868 10.4014 8.33333 10.6667 8.33333C10.9319 8.33333 11.1862 8.43868 11.3738 8.62622C11.5613 8.81376 11.6667 9.06811 11.6667 9.33333V22.92Z" fill="currentColor"/>
-</svg>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.96 10.04C18.1475 10.2273 18.4017 10.3324 18.6667 10.3324C18.9317 10.3324 19.1858 10.2273 19.3733 10.04L20.3333 9.07999V22.6667C20.3333 22.9319 20.4387 23.1862 20.6262 23.3738C20.8138 23.5613 21.0681 23.6667 21.3333 23.6667C21.5985 23.6667 21.8529 23.5613 22.0404 23.3738C22.228 23.1862 22.3333 22.9319 22.3333 22.6667V9.07999L23.2933 10.04C23.3849 10.1382 23.4953 10.217 23.6179 10.2717C23.7406 10.3264 23.873 10.3557 24.0073 10.3581C24.1416 10.3605 24.2749 10.3358 24.3995 10.2855C24.524 10.2352 24.6371 10.1603 24.732 10.0654C24.827 9.97042 24.9019 9.85731 24.9522 9.73279C25.0025 9.60827 25.0272 9.4749 25.0248 9.34063C25.0224 9.20636 24.993 9.07394 24.9384 8.95128C24.8837 8.82861 24.8049 8.71821 24.7067 8.62666L22.04 5.95999C21.8525 5.77273 21.5983 5.66754 21.3333 5.66754C21.0683 5.66754 20.8142 5.77273 20.6267 5.95999L17.96 8.62666C17.7727 8.81416 17.6675 9.06833 17.6675 9.33333C17.6675 9.59833 17.7727 9.85249 17.96 10.04ZM11.6667 22.92L12.6267 21.96C12.7182 21.8617 12.8286 21.7829 12.9513 21.7283C13.0739 21.6736 13.2064 21.6442 13.3406 21.6419C13.4749 21.6395 13.6083 21.6642 13.7328 21.7145C13.8573 21.7648 13.9704 21.8397 14.0654 21.9346C14.1603 22.0296 14.2352 22.1427 14.2855 22.2672C14.3358 22.3917 14.3605 22.5251 14.3581 22.6594C14.3558 22.7936 14.3264 22.926 14.2717 23.0487C14.2171 23.1714 14.1382 23.2818 14.04 23.3733L11.3733 26.04C11.1858 26.2273 10.9317 26.3324 10.6667 26.3324C10.4017 26.3324 10.1475 26.2273 9.96 26.04L7.29333 23.3733C7.19508 23.2818 7.11628 23.1714 7.06163 23.0487C7.00697 22.926 6.97758 22.7936 6.97521 22.6594C6.97284 22.5251 6.99754 22.3917 7.04784 22.2672C7.09813 22.1427 7.17299 22.0296 7.26795 21.9346C7.36291 21.8397 7.47602 21.7648 7.60054 21.7145C7.72505 21.6642 7.85843 21.6395 7.9927 21.6419C8.12697 21.6442 8.25938 21.6736 8.38205 21.7283C8.50472 21.7829 8.61512 21.8617 8.70667 21.96L9.66667 22.92V9.33333C9.66667 9.06811 9.77202 8.81376 9.95956 8.62622C10.1471 8.43868 10.4014 8.33333 10.6667 8.33333C10.9319 8.33333 11.1862 8.43868 11.3738 8.62622C11.5613 8.81376 11.6667 9.06811 11.6667 9.33333V22.92Z" fill="currentColor"/>
+</svg>

package/src/components/Icons/sort/svgs/sort-32-descend.svg

@@ -1,4 +1,4 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path d="M20.3333 9.08L19.3733 10.04C19.2818 10.1382 19.1714 10.217 19.0487 10.2717C18.926 10.3264 18.7936 10.3557 18.6594 10.3581C18.5251 10.3605 18.3917 10.3358 18.2672 10.2855C18.1427 10.2352 18.0296 10.1603 17.9346 10.0654C17.8397 9.97042 17.7648 9.85731 17.7145 9.73279C17.6642 9.60828 17.6395 9.47491 17.6419 9.34063C17.6442 9.20636 17.6736 9.07394 17.7283 8.95128C17.7829 8.82861 17.8617 8.71821 17.96 8.62666L20.6267 5.96C20.8142 5.77273 21.0683 5.66754 21.3333 5.66754C21.5983 5.66754 21.8525 5.77273 22.04 5.96L24.7067 8.62666C24.8049 8.71821 24.8837 8.82861 24.9384 8.95128C24.993 9.07394 25.0224 9.20636 25.0248 9.34063C25.0272 9.47491 25.0025 9.60828 24.9522 9.73279C24.9019 9.85731 24.827 9.97042 24.732 10.0654C24.6371 10.1603 24.524 10.2352 24.3995 10.2855C24.2749 10.3358 24.1416 10.3605 24.0073 10.3581C23.873 10.3557 23.7406 10.3264 23.6179 10.2717C23.4953 10.217 23.3849 10.1382 23.2933 10.04L22.3333 9.08V22.6667C22.3333 22.9319 22.228 23.1862 22.0404 23.3738C21.8529 23.5613 21.5985 23.6667 21.3333 23.6667C21.0681 23.6667 20.8138 23.5613 20.6262 23.3738C20.4387 23.1862 20.3333 22.9319 20.3333 22.6667V9.08Z" fill="currentColor"/>
-<path d="M13.3333 21.6675C13.5983 21.6675 13.8525 21.7727 14.04 21.96C14.2273 22.1475 14.3325 22.4017 14.3325 22.6667C14.3325 22.9317 14.2273 23.1858 14.04 23.3733L11.3733 26.04C11.1858 26.2273 10.9317 26.3325 10.6667 26.3325C10.4017 26.3325 10.1475 26.2273 9.96 26.04L7.29333 23.3733C7.19508 23.2818 7.11628 23.1714 7.06162 23.0487C7.00697 22.926 6.97758 22.7936 6.97521 22.6594C6.97284 22.5251 6.99754 22.3917 7.04784 22.2672C7.09813 22.1427 7.17299 22.0296 7.26795 21.9346C7.36291 21.8397 7.47602 21.7648 7.60054 21.7145C7.72505 21.6642 7.85842 21.6395 7.9927 21.6419C8.12697 21.6442 8.25939 21.6736 8.38205 21.7283C8.50472 21.7829 8.61512 21.8617 8.70667 21.96L9.66667 22.92L9.66667 9.33333C9.66667 9.06811 9.77202 8.81376 9.95956 8.62622C10.1471 8.43869 10.4014 8.33333 10.6667 8.33333C10.9319 8.33333 11.1862 8.43869 11.3738 8.62622C11.5613 8.81376 11.6667 9.06811 11.6667 9.33333L11.6667 22.92L12.6267 21.96C12.8142 21.7727 13.0683 21.6675 13.3333 21.6675Z" fill="#7F77DD"/>
-</svg>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.3333 9.08L19.3733 10.04C19.2818 10.1382 19.1714 10.217 19.0487 10.2717C18.926 10.3264 18.7936 10.3557 18.6594 10.3581C18.5251 10.3605 18.3917 10.3358 18.2672 10.2855C18.1427 10.2352 18.0296 10.1603 17.9346 10.0654C17.8397 9.97042 17.7648 9.85731 17.7145 9.73279C17.6642 9.60828 17.6395 9.47491 17.6419 9.34063C17.6442 9.20636 17.6736 9.07394 17.7283 8.95128C17.7829 8.82861 17.8617 8.71821 17.96 8.62666L20.6267 5.96C20.8142 5.77273 21.0683 5.66754 21.3333 5.66754C21.5983 5.66754 21.8525 5.77273 22.04 5.96L24.7067 8.62666C24.8049 8.71821 24.8837 8.82861 24.9384 8.95128C24.993 9.07394 25.0224 9.20636 25.0248 9.34063C25.0272 9.47491 25.0025 9.60828 24.9522 9.73279C24.9019 9.85731 24.827 9.97042 24.732 10.0654C24.6371 10.1603 24.524 10.2352 24.3995 10.2855C24.2749 10.3358 24.1416 10.3605 24.0073 10.3581C23.873 10.3557 23.7406 10.3264 23.6179 10.2717C23.4953 10.217 23.3849 10.1382 23.2933 10.04L22.3333 9.08V22.6667C22.3333 22.9319 22.228 23.1862 22.0404 23.3738C21.8529 23.5613 21.5985 23.6667 21.3333 23.6667C21.0681 23.6667 20.8138 23.5613 20.6262 23.3738C20.4387 23.1862 20.3333 22.9319 20.3333 22.6667V9.08Z" fill="currentColor"/>
+<path d="M13.3333 21.6675C13.5983 21.6675 13.8525 21.7727 14.04 21.96C14.2273 22.1475 14.3325 22.4017 14.3325 22.6667C14.3325 22.9317 14.2273 23.1858 14.04 23.3733L11.3733 26.04C11.1858 26.2273 10.9317 26.3325 10.6667 26.3325C10.4017 26.3325 10.1475 26.2273 9.96 26.04L7.29333 23.3733C7.19508 23.2818 7.11628 23.1714 7.06162 23.0487C7.00697 22.926 6.97758 22.7936 6.97521 22.6594C6.97284 22.5251 6.99754 22.3917 7.04784 22.2672C7.09813 22.1427 7.17299 22.0296 7.26795 21.9346C7.36291 21.8397 7.47602 21.7648 7.60054 21.7145C7.72505 21.6642 7.85842 21.6395 7.9927 21.6419C8.12697 21.6442 8.25939 21.6736 8.38205 21.7283C8.50472 21.7829 8.61512 21.8617 8.70667 21.96L9.66667 22.92L9.66667 9.33333C9.66667 9.06811 9.77202 8.81376 9.95956 8.62622C10.1471 8.43869 10.4014 8.33333 10.6667 8.33333C10.9319 8.33333 11.1862 8.43869 11.3738 8.62622C11.5613 8.81376 11.6667 9.06811 11.6667 9.33333L11.6667 22.92L12.6267 21.96C12.8142 21.7727 13.0683 21.6675 13.3333 21.6675Z" fill="#7F77DD"/>
+</svg>

package/src/components/Icons/stats/stats.astro

@@ -1,26 +1,26 @@
----
-import stats16 from './svgs/stats-16.svg?raw';
-import stats24 from './svgs/stats-24.svg?raw';
-import stats32 from './svgs/stats-32.svg?raw';
-
-export interface Props {
-  size:   16 | 24 | 32;
-  label?: string;
-  class?: string;
-}
-
-const { size = 24, label, class: className } = Astro.props;
-
-let raw: string;
-if      (size === 16) raw = stats16;
-else if (size === 24) raw = stats24;
-else if (size === 32) raw = stats32;
-else                  raw = '';
-
-const classes = ['nds-icon-stats', className].filter(Boolean).join(' ');
-const svg = raw
-  .replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
-  .replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
----
-
-<Fragment set:html={svg} />
+---
+import stats16 from './svgs/stats-16.svg?raw';
+import stats24 from './svgs/stats-24.svg?raw';
+import stats32 from './svgs/stats-32.svg?raw';
+
+export interface Props {
+  size:   16 | 24 | 32;
+  label?: string;
+  class?: string;
+}
+
+const { size = 24, label, class: className } = Astro.props;
+
+let raw: string;
+if      (size === 16) raw = stats16;
+else if (size === 24) raw = stats24;
+else if (size === 32) raw = stats32;
+else                  raw = '';
+
+const classes = ['nds-icon-stats', className].filter(Boolean).join(' ');
+const svg = raw
+  .replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
+  .replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
+---
+
+<Fragment set:html={svg} />

package/src/components/Icons/stats/svgs/stats-16.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.96 5.30933C12.9093 5.18719 12.8122 5.09013 12.6901 5.03941C12.63 5.0138 12.5655 5.00021 12.5001 4.99942H10.0009C9.8683 4.99942 9.74116 5.05208 9.64742 5.14582C9.55368 5.23957 9.50101 5.36671 9.50101 5.49928C9.50101 5.63185 9.55368 5.75899 9.64742 5.85273C9.74116 5.94647 9.8683 5.99913 10.0009 5.99913H11.2955L8.5013 8.79332L6.85678 7.1438C6.81031 7.09695 6.75503 7.05976 6.69412 7.03438C6.6332 7.00901 6.56787 6.99594 6.50188 6.99594C6.4359 6.99594 6.37056 7.00901 6.30965 7.03438C6.24874 7.05976 6.19345 7.09695 6.14699 7.1438L3.14786 10.1429C3.10101 10.1894 3.06382 10.2447 3.03844 10.3056C3.01307 10.3665 3 10.4318 3 10.4978C3 10.5638 3.01307 10.6291 3.03844 10.6901C3.06382 10.751 3.10101 10.8063 3.14786 10.8527C3.19432 10.8996 3.24961 10.9368 3.31052 10.9621C3.37143 10.9875 3.43677 11.0006 3.50275 11.0006C3.56874 11.0006 3.63407 10.9875 3.69499 10.9621C3.7559 10.9368 3.81118 10.8996 3.85765 10.8527L6.50188 8.20349L8.14641 9.85301C8.19287 9.89986 8.24816 9.93705 8.30907 9.96243C8.36998 9.9878 8.43532 10.0009 8.5013 10.0009C8.56729 10.0009 8.63262 9.9878 8.69354 9.96243C8.75445 9.93705 8.80973 9.89986 8.8562 9.85301L12.0003 6.70393V7.99855C12.0003 8.13112 12.053 8.25826 12.1467 8.352C12.2404 8.44574 12.3676 8.49841 12.5001 8.49841C12.6327 8.49841 12.7599 8.44574 12.8536 8.352C12.9473 8.25826 13 8.13112 13 7.99855V5.49928C12.9992 5.43396 12.9856 5.36942 12.96 5.30933Z" fill="#F4F2EF"/>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.96 5.30933C12.9093 5.18719 12.8122 5.09013 12.6901 5.03941C12.63 5.0138 12.5655 5.00021 12.5001 4.99942H10.0009C9.8683 4.99942 9.74116 5.05208 9.64742 5.14582C9.55368 5.23957 9.50101 5.36671 9.50101 5.49928C9.50101 5.63185 9.55368 5.75899 9.64742 5.85273C9.74116 5.94647 9.8683 5.99913 10.0009 5.99913H11.2955L8.5013 8.79332L6.85678 7.1438C6.81031 7.09695 6.75503 7.05976 6.69412 7.03438C6.6332 7.00901 6.56787 6.99594 6.50188 6.99594C6.4359 6.99594 6.37056 7.00901 6.30965 7.03438C6.24874 7.05976 6.19345 7.09695 6.14699 7.1438L3.14786 10.1429C3.10101 10.1894 3.06382 10.2447 3.03844 10.3056C3.01307 10.3665 3 10.4318 3 10.4978C3 10.5638 3.01307 10.6291 3.03844 10.6901C3.06382 10.751 3.10101 10.8063 3.14786 10.8527C3.19432 10.8996 3.24961 10.9368 3.31052 10.9621C3.37143 10.9875 3.43677 11.0006 3.50275 11.0006C3.56874 11.0006 3.63407 10.9875 3.69499 10.9621C3.7559 10.9368 3.81118 10.8996 3.85765 10.8527L6.50188 8.20349L8.14641 9.85301C8.19287 9.89986 8.24816 9.93705 8.30907 9.96243C8.36998 9.9878 8.43532 10.0009 8.5013 10.0009C8.56729 10.0009 8.63262 9.9878 8.69354 9.96243C8.75445 9.93705 8.80973 9.89986 8.8562 9.85301L12.0003 6.70393V7.99855C12.0003 8.13112 12.053 8.25826 12.1467 8.352C12.2404 8.44574 12.3676 8.49841 12.5001 8.49841C12.6327 8.49841 12.7599 8.44574 12.8536 8.352C12.9473 8.25826 13 8.13112 13 7.99855V5.49928C12.9992 5.43396 12.9856 5.36942 12.96 5.30933Z" fill="#F4F2EF"/>
+</svg>

package/src/components/Icons/stats/svgs/stats-24.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path d="M20.928 7.15679C20.8367 6.93694 20.662 6.76223 20.4422 6.67093C20.334 6.62483 20.2178 6.60037 20.1003 6.59895H15.6016C15.3629 6.59895 15.1341 6.69375 14.9654 6.86248C14.7966 7.03121 14.7018 7.26007 14.7018 7.49869C14.7018 7.73732 14.7966 7.96617 14.9654 8.1349C15.1341 8.30364 15.3629 8.39843 15.6016 8.39843H17.9319L12.9023 13.428L9.94221 10.4588C9.85856 10.3745 9.75905 10.3076 9.64941 10.2619C9.53977 10.2162 9.42217 10.1927 9.30339 10.1927C9.18461 10.1927 9.06701 10.2162 8.95737 10.2619C8.84773 10.3076 8.74822 10.3745 8.66458 10.4588L3.26614 15.8573C3.18181 15.9409 3.11487 16.0404 3.0692 16.1501C3.02352 16.2597 3 16.3773 3 16.4961C3 16.6149 3.02352 16.7325 3.0692 16.8421C3.11487 16.9517 3.18181 17.0513 3.26614 17.1349C3.34978 17.2192 3.4493 17.2862 3.55894 17.3318C3.66858 17.3775 3.78618 17.401 3.90496 17.401C4.02373 17.401 4.14133 17.3775 4.25097 17.3318C4.36062 17.2862 4.46013 17.2192 4.54377 17.1349L9.30339 12.3663L12.2635 15.3354C12.3472 15.4198 12.4467 15.4867 12.5563 15.5324C12.666 15.578 12.7836 15.6016 12.9023 15.6016C13.0211 15.6016 13.1387 15.578 13.2484 15.5324C13.358 15.4867 13.4575 15.4198 13.5412 15.3354L19.2005 9.66706V11.9974C19.2005 12.236 19.2953 12.4649 19.464 12.6336C19.6328 12.8023 19.8616 12.8971 20.1003 12.8971C20.3389 12.8971 20.5677 12.8023 20.7365 12.6336C20.9052 12.4649 21 12.236 21 11.9974V7.49869C20.9986 7.38112 20.9741 7.26496 20.928 7.15679Z" fill="#F4F2EF"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.928 7.15679C20.8367 6.93694 20.662 6.76223 20.4422 6.67093C20.334 6.62483 20.2178 6.60037 20.1003 6.59895H15.6016C15.3629 6.59895 15.1341 6.69375 14.9654 6.86248C14.7966 7.03121 14.7018 7.26007 14.7018 7.49869C14.7018 7.73732 14.7966 7.96617 14.9654 8.1349C15.1341 8.30364 15.3629 8.39843 15.6016 8.39843H17.9319L12.9023 13.428L9.94221 10.4588C9.85856 10.3745 9.75905 10.3076 9.64941 10.2619C9.53977 10.2162 9.42217 10.1927 9.30339 10.1927C9.18461 10.1927 9.06701 10.2162 8.95737 10.2619C8.84773 10.3076 8.74822 10.3745 8.66458 10.4588L3.26614 15.8573C3.18181 15.9409 3.11487 16.0404 3.0692 16.1501C3.02352 16.2597 3 16.3773 3 16.4961C3 16.6149 3.02352 16.7325 3.0692 16.8421C3.11487 16.9517 3.18181 17.0513 3.26614 17.1349C3.34978 17.2192 3.4493 17.2862 3.55894 17.3318C3.66858 17.3775 3.78618 17.401 3.90496 17.401C4.02373 17.401 4.14133 17.3775 4.25097 17.3318C4.36062 17.2862 4.46013 17.2192 4.54377 17.1349L9.30339 12.3663L12.2635 15.3354C12.3472 15.4198 12.4467 15.4867 12.5563 15.5324C12.666 15.578 12.7836 15.6016 12.9023 15.6016C13.0211 15.6016 13.1387 15.578 13.2484 15.5324C13.358 15.4867 13.4575 15.4198 13.5412 15.3354L19.2005 9.66706V11.9974C19.2005 12.236 19.2953 12.4649 19.464 12.6336C19.6328 12.8023 19.8616 12.8971 20.1003 12.8971C20.3389 12.8971 20.5677 12.8023 20.7365 12.6336C20.9052 12.4649 21 12.236 21 11.9974V7.49869C20.9986 7.38112 20.9741 7.26496 20.928 7.15679Z" fill="#F4F2EF"/>
+</svg>

package/src/components/Icons/stats/svgs/stats-32.svg

@@ -1,3 +1,3 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path d="M28.896 9.00426C28.7642 8.6867 28.5118 8.43434 28.1942 8.30246C28.038 8.23587 27.8702 8.20055 27.7004 8.19849H21.2023C20.8576 8.19849 20.527 8.33542 20.2833 8.57915C20.0396 8.82287 19.9026 9.15344 19.9026 9.49812C19.9026 9.8428 20.0396 10.1734 20.2833 10.4171C20.527 10.6608 20.8576 10.7977 21.2023 10.7977H24.5683L17.3034 18.0626L13.0276 13.7739C12.9068 13.6521 12.7631 13.5554 12.6047 13.4894C12.4463 13.4234 12.2765 13.3895 12.1049 13.3895C11.9333 13.3895 11.7635 13.4234 11.6051 13.4894C11.4467 13.5554 11.303 13.6521 11.1822 13.7739L3.38443 21.5716C3.26261 21.6924 3.16593 21.8362 3.09995 21.9945C3.03397 22.1529 3 22.3228 3 22.4943C3 22.6659 3.03397 22.8358 3.09995 22.9942C3.16593 23.1525 3.26261 23.2963 3.38443 23.4171C3.50524 23.5389 3.64898 23.6356 3.80735 23.7016C3.96573 23.7675 4.13559 23.8015 4.30716 23.8015C4.47872 23.8015 4.64859 23.7675 4.80696 23.7016C4.96533 23.6356 5.10907 23.5389 5.22989 23.4171L12.1049 16.5291L16.3807 20.8178C16.5015 20.9396 16.6452 21.0363 16.8036 21.1023C16.962 21.1683 17.1318 21.2023 17.3034 21.2023C17.475 21.2023 17.6448 21.1683 17.8032 21.1023C17.9616 21.0363 18.1053 20.9396 18.2261 20.8178L26.4008 12.6302V15.9962C26.4008 16.3409 26.5377 16.6715 26.7814 16.9152C27.0251 17.1589 27.3557 17.2959 27.7004 17.2959C28.0451 17.2959 28.3756 17.1589 28.6194 16.9152C28.8631 16.6715 29 16.3409 29 15.9962V9.49812C28.9979 9.32829 28.9626 9.1605 28.896 9.00426Z" fill="#F4F2EF"/>
-</svg>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.896 9.00426C28.7642 8.6867 28.5118 8.43434 28.1942 8.30246C28.038 8.23587 27.8702 8.20055 27.7004 8.19849H21.2023C20.8576 8.19849 20.527 8.33542 20.2833 8.57915C20.0396 8.82287 19.9026 9.15344 19.9026 9.49812C19.9026 9.8428 20.0396 10.1734 20.2833 10.4171C20.527 10.6608 20.8576 10.7977 21.2023 10.7977H24.5683L17.3034 18.0626L13.0276 13.7739C12.9068 13.6521 12.7631 13.5554 12.6047 13.4894C12.4463 13.4234 12.2765 13.3895 12.1049 13.3895C11.9333 13.3895 11.7635 13.4234 11.6051 13.4894C11.4467 13.5554 11.303 13.6521 11.1822 13.7739L3.38443 21.5716C3.26261 21.6924 3.16593 21.8362 3.09995 21.9945C3.03397 22.1529 3 22.3228 3 22.4943C3 22.6659 3.03397 22.8358 3.09995 22.9942C3.16593 23.1525 3.26261 23.2963 3.38443 23.4171C3.50524 23.5389 3.64898 23.6356 3.80735 23.7016C3.96573 23.7675 4.13559 23.8015 4.30716 23.8015C4.47872 23.8015 4.64859 23.7675 4.80696 23.7016C4.96533 23.6356 5.10907 23.5389 5.22989 23.4171L12.1049 16.5291L16.3807 20.8178C16.5015 20.9396 16.6452 21.0363 16.8036 21.1023C16.962 21.1683 17.1318 21.2023 17.3034 21.2023C17.475 21.2023 17.6448 21.1683 17.8032 21.1023C17.9616 21.0363 18.1053 20.9396 18.2261 20.8178L26.4008 12.6302V15.9962C26.4008 16.3409 26.5377 16.6715 26.7814 16.9152C27.0251 17.1589 27.3557 17.2959 27.7004 17.2959C28.0451 17.2959 28.3756 17.1589 28.6194 16.9152C28.8631 16.6715 29 16.3409 29 15.9962V9.49812C28.9979 9.32829 28.9626 9.1605 28.896 9.00426Z" fill="#F4F2EF"/>
+</svg>

package/src/components/Icons/upload/svgs/upload-16.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 6.66667V12.6667M6 8.66667L8 6.66667L10 8.66667M11.6667 10C12.6793 10 13.3333 9.17933 13.3333 8.16667C13.3333 7.76575 13.2018 7.37589 12.9591 7.05681C12.7164 6.73772 12.3757 6.50701 11.9893 6.4C11.9299 5.65231 11.62 4.94651 11.1098 4.39673C10.5996 3.84695 9.91885 3.48531 9.17767 3.37029C8.43649 3.25526 7.67817 3.39357 7.02533 3.76286C6.37248 4.13215 5.86326 4.71082 5.58 5.40533C4.98362 5.24002 4.34599 5.31838 3.80738 5.62319C3.26878 5.928 2.87332 6.43428 2.708 7.03067C2.54268 7.62705 2.62105 8.26468 2.92586 8.80328C3.23067 9.34189 3.73695 9.73735 4.33333 9.90267" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 6.66667V12.6667M6 8.66667L8 6.66667L10 8.66667M11.6667 10C12.6793 10 13.3333 9.17933 13.3333 8.16667C13.3333 7.76575 13.2018 7.37589 12.9591 7.05681C12.7164 6.73772 12.3757 6.50701 11.9893 6.4C11.9299 5.65231 11.62 4.94651 11.1098 4.39673C10.5996 3.84695 9.91885 3.48531 9.17767 3.37029C8.43649 3.25526 7.67817 3.39357 7.02533 3.76286C6.37248 4.13215 5.86326 4.71082 5.58 5.40533C4.98362 5.24002 4.34599 5.31838 3.80738 5.62319C3.26878 5.928 2.87332 6.43428 2.708 7.03067C2.54268 7.62705 2.62105 8.26468 2.92586 8.80328C3.23067 9.34189 3.73695 9.73735 4.33333 9.90267" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/Icons/upload/svgs/upload-24.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 10V19M9 13L12 10L15 13M17.5 15C19.019 15 20 13.769 20 12.25C19.9999 11.6486 19.8028 11.0638 19.4387 10.5852C19.0745 10.1066 18.5636 9.76051 17.984 9.6C17.8948 8.47846 17.43 7.41977 16.6647 6.59509C15.8994 5.77042 14.8783 5.22796 13.7665 5.05543C12.6547 4.88289 11.5173 5.09036 10.538 5.64429C9.55872 6.19822 8.79489 7.06624 8.37 8.108C7.47543 7.86002 6.51898 7.97757 5.71107 8.43478C4.90317 8.892 4.30998 9.65143 4.062 10.546C3.81402 11.4406 3.93157 12.397 4.38878 13.2049C4.846 14.0128 5.60543 14.606 6.5 14.854" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 10V19M9 13L12 10L15 13M17.5 15C19.019 15 20 13.769 20 12.25C19.9999 11.6486 19.8028 11.0638 19.4387 10.5852C19.0745 10.1066 18.5636 9.76051 17.984 9.6C17.8948 8.47846 17.43 7.41977 16.6647 6.59509C15.8994 5.77042 14.8783 5.22796 13.7665 5.05543C12.6547 4.88289 11.5173 5.09036 10.538 5.64429C9.55872 6.19822 8.79489 7.06624 8.37 8.108C7.47543 7.86002 6.51898 7.97757 5.71107 8.43478C4.90317 8.892 4.30998 9.65143 4.062 10.546C3.81402 11.4406 3.93157 12.397 4.38878 13.2049C4.846 14.0128 5.60543 14.606 6.5 14.854" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/Icons/upload/svgs/upload-32.svg

@@ -1,3 +1,3 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16 13.3333V25.3333M12 17.3333L16 13.3333L20 17.3333M23.3333 20C25.3587 20 26.6667 18.3587 26.6667 16.3333C26.6666 15.5315 26.4037 14.7518 25.9182 14.1136C25.4327 13.4754 24.7514 13.014 23.9787 12.8C23.8598 11.3046 23.24 9.89302 22.2196 8.79346C21.1992 7.69389 19.8377 6.97062 18.3553 6.74057C16.873 6.51052 15.3563 6.78714 14.0507 7.52572C12.745 8.26429 11.7265 9.42165 11.16 10.8107C9.96723 10.48 8.69197 10.6368 7.61477 11.2464C6.53756 11.856 5.74664 12.8686 5.416 14.0613C5.08536 15.2541 5.24209 16.5294 5.85171 17.6066C6.46133 18.6838 7.4739 19.4747 8.66667 19.8053" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 13.3333V25.3333M12 17.3333L16 13.3333L20 17.3333M23.3333 20C25.3587 20 26.6667 18.3587 26.6667 16.3333C26.6666 15.5315 26.4037 14.7518 25.9182 14.1136C25.4327 13.4754 24.7514 13.014 23.9787 12.8C23.8598 11.3046 23.24 9.89302 22.2196 8.79346C21.1992 7.69389 19.8377 6.97062 18.3553 6.74057C16.873 6.51052 15.3563 6.78714 14.0507 7.52572C12.745 8.26429 11.7265 9.42165 11.16 10.8107C9.96723 10.48 8.69197 10.6368 7.61477 11.2464C6.53756 11.856 5.74664 12.8686 5.416 14.0613C5.08536 15.2541 5.24209 16.5294 5.85171 17.6066C6.46133 18.6838 7.4739 19.4747 8.66667 19.8053" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/Icons/upload/upload.astro

@@ -1,27 +1,27 @@
----
-import upload16  from './svgs/upload-16.svg?raw';
-import upload24  from './svgs/upload-24.svg?raw';
-import upload32  from './svgs/upload-32.svg?raw';
-
-export interface Props {
-  size:        16 | 24 | 32;
-  label?:       string;
-  class?:       string;
-}
-
-const { size = 24, label, class: className } = Astro.props;
-
-let raw: string;
-if      (size === 16 )  raw = upload16;
-else if (size === 24 )  raw = upload24;
-else if (size === 32 )  raw = upload32;
-else                   raw = ''; // Fallback to a blank string if no match is found, though this should not happen due to the type constraints on size.
-
-
-const classes = ['nds-icon-upload', className].filter(Boolean).join(' ');
-const svg = raw
-  .replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
-  .replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
----
-
-<Fragment set:html={svg} />
+---
+import upload16  from './svgs/upload-16.svg?raw';
+import upload24  from './svgs/upload-24.svg?raw';
+import upload32  from './svgs/upload-32.svg?raw';
+
+export interface Props {
+  size:        16 | 24 | 32;
+  label?:       string;
+  class?:       string;
+}
+
+const { size = 24, label, class: className } = Astro.props;
+
+let raw: string;
+if      (size === 16 )  raw = upload16;
+else if (size === 24 )  raw = upload24;
+else if (size === 32 )  raw = upload32;
+else                   raw = ''; // Fallback to a blank string if no match is found, though this should not happen due to the type constraints on size.
+
+
+const classes = ['nds-icon-upload', className].filter(Boolean).join(' ');
+const svg = raw
+  .replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
+  .replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
+---
+
+<Fragment set:html={svg} />

package/src/components/Link/_link.scss

@@ -1,30 +1,30 @@
-@use '../../styles/tokens/typography' as *;
-
-.link { 
-  text-decoration: none;
-  color: var(--nds-primary);
-  @include text-base;
-    &:hover {
-        color: var(--nds-text);
-        opacity: 0.25;
-    }
-    &:active {
-        color: var(--nds-text);
-        opacity: 0.25;
-    }
-  &__container {
-    width: fit-content;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-bottom: var(--nds-border-width-medium) dashed var(--nds-secondary);
-    &:hover {
-      background-color: var(--nds-secondary);
-      border-bottom: var(--nds-border-width-medium) dashed var(--nds-accent);
-    }
-    &:active {
-      background-color: var(--nds-primary);
-      border-bottom: var(--nds-border-width-medium) dashed var(--nds-secondary);
-    }
-  }
+@use '../../styles/tokens/typography' as *;
+
+.link { 
+  text-decoration: none;
+  color: var(--nds-primary);
+  @include text-base;
+    &:hover {
+        color: var(--nds-text);
+        opacity: 0.25;
+    }
+    &:active {
+        color: var(--nds-text);
+        opacity: 0.25;
+    }
+  &__container {
+    width: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: var(--nds-border-width-medium) dashed var(--nds-secondary);
+    &:hover {
+      background-color: var(--nds-secondary);
+      border-bottom: var(--nds-border-width-medium) dashed var(--nds-accent);
+    }
+    &:active {
+      background-color: var(--nds-primary);
+      border-bottom: var(--nds-border-width-medium) dashed var(--nds-secondary);
+    }
+  }
 }

package/src/components/Link/link.astro

@@ -1,16 +1,16 @@
----
-export interface Props {
-  url:        string;
-  blank?:      boolean;
-}
-const { url, blank } = Astro.props;
----
-<div class='link__container'>
-  <a href={url} class='link' { ...(blank && { target: '_blank', rel: 'noopener noreferrer' }) }>
-    <slot/>
-  </a>
-</div>
-
-<style lang="scss">
-@use './link';
+---
+export interface Props {
+  url:        string;
+  blank?:      boolean;
+}
+const { url, blank } = Astro.props;
+---
+<div class='link__container'>
+  <a href={url} class='link' { ...(blank && { target: '_blank', rel: 'noopener noreferrer' }) }>
+    <slot/>
+  </a>
+</div>
+
+<style lang="scss">
+@use './link';
 </style>

package/src/components/ListItem/_listItem.scss

@@ -1,21 +1,70 @@
-@use '../../styles/tokens/typography' as *;
-
-.list-item {
-  width: 350px;
-  display: flex;
-  align-items: center;
-  gap: var(--nds-spacing-md);
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--nds-spacing-md);
-  }
-
-  &__subTitle {
-    @include text-base;
-  }
-
-  &__title {
-    @include text-xl;
-  }
+@use '../../styles/tokens/typography' as *;
+
+.list-item {
+  width: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--nds-spacing-md);
+  border-radius: var(--nds-radius-sm);
+  background: var(--nds-background, #040B0B);
+  flex-shrink: 0;
+  position: relative;
+  cursor: pointer;
+  &:hover {
+    background: color-mix(in srgb, var(--nds-secondary) 25%, transparent);
+  }
+
+  &:active {
+    background: color-mix(in srgb, var(--nds-accent) 25%, transparent);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-radius: var(--nds-radius-md);
+    border-color: transparent;
+    background:
+      linear-gradient(var(--nds-background, #040B0B), var(--nds-background, #040B0B)) padding-box,
+      linear-gradient(
+        135deg,
+        transparent 0%,
+        transparent 20%,
+        rgba(245, 250, 250, 0.08) 50%,
+        rgba(245, 250, 250, 0.28) 100%
+      ) border-box;
+    -webkit-mask:
+      linear-gradient(#fff 0 0) padding-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: destination-out;
+    mask-composite: exclude;
+    pointer-events: none;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: -1px;
+    width: 1px;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nds-spacing-md);
+  }
+
+  &__subTitle {
+    @include text-base;
+  }
+
+  &__title {
+    @include text-xl;
+  }
 }

package/src/components/ListItem/listItem.astro

@@ -1,15 +1,15 @@
----
-import Arrow2 from "../Icons/Arrow2/Arrow2.astro"
----
-<div class='list-item'>
-  <div class='list-item__content'>
-    <slot/>
-  </div>
-  <Arrow2 
-  size={24}
-  orientation='right' />
-</div>
-
-<style lang="scss">
-@use './listItem';
+---
+import Arrow2 from "../Icons/Arrow2/Arrow2.astro"
+---
+<div class='list-item'>
+  <div class='list-item__content'>
+    <slot/>
+  </div>
+  <Arrow2 
+  size={24}
+  orientation='right' />
+</div>
+
+<style lang="scss">
+@use './listItem';
 </style>

package/src/components/ListItem/listItemSubtitle.astro

@@ -1,7 +1,7 @@
-<div class='list-item__subTitle'>
-    <slot/>
-</div>
-
-<style lang="scss">
-@use './listItem';
+<div class='list-item__subTitle'>
+    <slot/>
+</div>
+
+<style lang="scss">
+@use './listItem';
 </style>

package/src/components/ListItem/listItemTitle.astro

@@ -1,7 +1,7 @@
-<div class='list-item__title'>
-    <slot/>
-</div>
-
-<style lang="scss">
-@use './listItem';
+<div class='list-item__title'>
+    <slot/>
+</div>
+
+<style lang="scss">
+@use './listItem';
 </style>

package/src/components/Notifications/_notification.scss

@@ -1,61 +1,61 @@
-@use '../../styles/tokens/typography' as *;
-
-.notification {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--nds-spacing-sm) var(--nds-spacing-xs) ;
-  border-radius: var(--nds-radius-md);
-  @include text-sm;
-  &__error {
-    background-color: var(--nds-error-low);
-    &__close {
-      background: transparent;
-      border: none;
-      color: var(--nds-error-medium);
-      cursor: pointer;
-    }
-    &__content {
-      color: var(--nds-error-high);
-    }
-  }
-  
-  &__success {
-    background-color: var(--nds-success-low);
-    &__close {
-      background: transparent;
-      border: none;
-      color: var(--nds-success-medium);
-      cursor: pointer;
-    }
-    &__content {
-      color: var(--nds-success-high);
-    }
-  }
-  
-  &__warning {
-    background-color: var(--nds-warning-low);
-    &__close {
-      background: transparent;
-      border: none;
-      color: var(--nds-warning-medium);
-      cursor: pointer;
-    }
-    &__content {
-      color: var(--nds-warning-high);
-    }
-  }
-  
-  &__info {
-    background-color: var(--nds-info-low);
-    &__close {
-      background: transparent;
-      border: none;
-      color: var(--nds-info-medium);
-      cursor: pointer;
-    }
-    &__content {
-      color: var(--nds-info-high);
-    }
-  }
-}
+@use '../../styles/tokens/typography' as *;
+
+.notification {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--nds-spacing-sm) var(--nds-spacing-xs) ;
+  border-radius: var(--nds-radius-md);
+  @include text-sm;
+  &__error {
+    background-color: var(--nds-error-low);
+    &__close {
+      background: transparent;
+      border: none;
+      color: var(--nds-error-medium);
+      cursor: pointer;
+    }
+    &__content {
+      color: var(--nds-error-high);
+    }
+  }
+  
+  &__success {
+    background-color: var(--nds-success-low);
+    &__close {
+      background: transparent;
+      border: none;
+      color: var(--nds-success-medium);
+      cursor: pointer;
+    }
+    &__content {
+      color: var(--nds-success-high);
+    }
+  }
+  
+  &__warning {
+    background-color: var(--nds-warning-low);
+    &__close {
+      background: transparent;
+      border: none;
+      color: var(--nds-warning-medium);
+      cursor: pointer;
+    }
+    &__content {
+      color: var(--nds-warning-high);
+    }
+  }
+  
+  &__info {
+    background-color: var(--nds-info-low);
+    &__close {
+      background: transparent;
+      border: none;
+      color: var(--nds-info-medium);
+      cursor: pointer;
+    }
+    &__content {
+      color: var(--nds-info-high);
+    }
+  }
+}