@getmicdrop/svelte-components 5.10.0 → 5.10.3

package/dist/primitives/Icons/Back.svelte

@@ -11,18 +11,18 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-    <path
-        d="M12 19L5 12L12 5"
-        stroke={color}
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-    />
-    <path
-        d="M19 12H5"
-        stroke={color}
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-    />
+    <path
+        d="M12 19L5 12L12 5"
+        stroke={color}
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
+    <path
+        d="M19 12H5"
+        stroke={color}
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
 </svg>

package/dist/primitives/Icons/CheckCircle.svelte

@@ -11,10 +11,10 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-    <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M10 20C12.6522 20 15.1957 18.9464 17.0711 17.0711C18.9464 15.1957 20 12.6522 20 10C20 7.34784 18.9464 4.8043 17.0711 2.92893C15.1957 1.05357 12.6522 0 10 0C7.34784 0 4.8043 1.05357 2.92893 2.92893C1.05357 4.8043 0 7.34784 0 10C0 12.6522 1.05357 15.1957 2.92893 17.0711C4.8043 18.9464 7.34784 20 10 20ZM14.6338 8.38375C14.8614 8.148 14.9874 7.83224 14.9846 7.5045C14.9817 7.17675 14.8503 6.86324 14.6185 6.63148C14.3868 6.39972 14.0732 6.26826 13.7455 6.26541C13.4178 6.26256 13.102 6.38855 12.8663 6.61625L8.75 10.7325L7.13375 9.11625C6.898 8.88855 6.58224 8.76256 6.2545 8.76541C5.92675 8.76826 5.61324 8.89972 5.38148 9.13148C5.14972 9.36324 5.01826 9.67675 5.01541 10.0045C5.01256 10.3322 5.13855 10.648 5.36625 10.8837L7.86625 13.3838C8.10066 13.6181 8.41854 13.7497 8.75 13.7497C9.08146 13.7497 9.39934 13.6181 9.63375 13.3838L14.6338 8.38375Z"
-        fill={color}
-    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10 20C12.6522 20 15.1957 18.9464 17.0711 17.0711C18.9464 15.1957 20 12.6522 20 10C20 7.34784 18.9464 4.8043 17.0711 2.92893C15.1957 1.05357 12.6522 0 10 0C7.34784 0 4.8043 1.05357 2.92893 2.92893C1.05357 4.8043 0 7.34784 0 10C0 12.6522 1.05357 15.1957 2.92893 17.0711C4.8043 18.9464 7.34784 20 10 20ZM14.6338 8.38375C14.8614 8.148 14.9874 7.83224 14.9846 7.5045C14.9817 7.17675 14.8503 6.86324 14.6185 6.63148C14.3868 6.39972 14.0732 6.26826 13.7455 6.26541C13.4178 6.26256 13.102 6.38855 12.8663 6.61625L8.75 10.7325L7.13375 9.11625C6.898 8.88855 6.58224 8.76256 6.2545 8.76541C5.92675 8.76826 5.61324 8.89972 5.38148 9.13148C5.14972 9.36324 5.01826 9.67675 5.01541 10.0045C5.01256 10.3322 5.13855 10.648 5.36625 10.8837L7.86625 13.3838C8.10066 13.6181 8.41854 13.7497 8.75 13.7497C9.08146 13.7497 9.39934 13.6181 9.63375 13.3838L14.6338 8.38375Z"
+        fill={color}
+    />
 </svg>

package/dist/primitives/Icons/CheckCircleOutline.svelte

@@ -11,18 +11,18 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <path
-    d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666Z"
-    stroke={color}
-    stroke-width="1.33333"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M6 8.00008L7.33333 9.33341L10 6.66675"
-    stroke={color}
-    stroke-width="1.33333"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
+  <path
+    d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666Z"
+    stroke={color}
+    stroke-width="1.33333"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M6 8.00008L7.33333 9.33341L10 6.66675"
+    stroke={color}
+    stroke-width="1.33333"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/primitives/Icons/ChevronLeft.svelte

@@ -11,8 +11,8 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-    <path
-        d="M18.2847 25.7735C17.6953 25.7734 17.1301 25.5202 16.7134 25.0697L7.82356 15.4612C7.40691 15.0107 7.17285 14.3998 7.17285 13.7628C7.17285 13.1259 7.40691 12.515 7.82356 12.0645L16.7134 2.456C16.9184 2.22657 17.1636 2.04357 17.4348 1.91768C17.7059 1.79178 17.9976 1.72552 18.2927 1.72275C18.5878 1.71998 18.8804 1.78075 19.1536 1.90153C19.4267 2.02232 19.6748 2.20068 19.8835 2.42622C20.0922 2.65177 20.2572 2.91997 20.3689 3.21518C20.4807 3.5104 20.5369 3.82671 20.5344 4.14566C20.5318 4.46462 20.4705 4.77983 20.354 5.0729C20.2375 5.36597 20.0682 5.63103 19.8559 5.85262L12.5374 13.7628L19.8559 21.6731C20.1667 22.009 20.3783 22.437 20.464 22.9029C20.5497 23.3688 20.5057 23.8517 20.3375 24.2906C20.1693 24.7294 19.8845 25.1046 19.5192 25.3685C19.1538 25.6325 18.7242 25.7734 18.2847 25.7735Z"
-        fill={color}
-    />
+    <path
+        d="M18.2847 25.7735C17.6953 25.7734 17.1301 25.5202 16.7134 25.0697L7.82356 15.4612C7.40691 15.0107 7.17285 14.3998 7.17285 13.7628C7.17285 13.1259 7.40691 12.515 7.82356 12.0645L16.7134 2.456C16.9184 2.22657 17.1636 2.04357 17.4348 1.91768C17.7059 1.79178 17.9976 1.72552 18.2927 1.72275C18.5878 1.71998 18.8804 1.78075 19.1536 1.90153C19.4267 2.02232 19.6748 2.20068 19.8835 2.42622C20.0922 2.65177 20.2572 2.91997 20.3689 3.21518C20.4807 3.5104 20.5369 3.82671 20.5344 4.14566C20.5318 4.46462 20.4705 4.77983 20.354 5.0729C20.2375 5.36597 20.0682 5.63103 19.8559 5.85262L12.5374 13.7628L19.8559 21.6731C20.1667 22.009 20.3783 22.437 20.464 22.9029C20.5497 23.3688 20.5057 23.8517 20.3375 24.2906C20.1693 24.7294 19.8845 25.1046 19.5192 25.3685C19.1538 25.6325 18.7242 25.7734 18.2847 25.7735Z"
+        fill={color}
+    />
 </svg>    

package/dist/primitives/Icons/ChevronRight.svelte

@@ -11,8 +11,8 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-    <path
-        d="M9.26149 25.7735C8.822 25.7734 8.3924 25.6325 8.02701 25.3685C7.66161 25.1046 7.37682 24.7294 7.20865 24.2906C7.04048 23.8517 6.99647 23.3688 7.08218 22.9029C7.1679 22.437 7.37949 22.009 7.69021 21.6731L15.0088 13.7628L7.69021 5.85262C7.47794 5.63103 7.30863 5.36597 7.19215 5.0729C7.07568 4.77983 7.01437 4.46462 7.0118 4.14566C7.00924 3.82671 7.06547 3.5104 7.17722 3.21518C7.28897 2.91997 7.45399 2.65177 7.66266 2.42622C7.87134 2.20068 8.11948 2.02232 8.39261 1.90153C8.66574 1.78075 8.95839 1.71998 9.25349 1.72275C9.54859 1.72552 9.84022 1.79178 10.1114 1.91768C10.3825 2.04357 10.6278 2.22657 10.8328 2.456L19.7226 12.0645C20.1392 12.515 20.3733 13.1259 20.3733 13.7628C20.3733 14.3998 20.1392 15.0107 19.7226 15.4612L10.8328 25.0697C10.4161 25.5202 9.85087 25.7734 9.26149 25.7735Z"
-        fill={color}
-    />
+    <path
+        d="M9.26149 25.7735C8.822 25.7734 8.3924 25.6325 8.02701 25.3685C7.66161 25.1046 7.37682 24.7294 7.20865 24.2906C7.04048 23.8517 6.99647 23.3688 7.08218 22.9029C7.1679 22.437 7.37949 22.009 7.69021 21.6731L15.0088 13.7628L7.69021 5.85262C7.47794 5.63103 7.30863 5.36597 7.19215 5.0729C7.07568 4.77983 7.01437 4.46462 7.0118 4.14566C7.00924 3.82671 7.06547 3.5104 7.17722 3.21518C7.28897 2.91997 7.45399 2.65177 7.66266 2.42622C7.87134 2.20068 8.11948 2.02232 8.39261 1.90153C8.66574 1.78075 8.95839 1.71998 9.25349 1.72275C9.54859 1.72552 9.84022 1.79178 10.1114 1.91768C10.3825 2.04357 10.6278 2.22657 10.8328 2.456L19.7226 12.0645C20.1392 12.515 20.3733 13.1259 20.3733 13.7628C20.3733 14.3998 20.1392 15.0107 19.7226 15.4612L10.8328 25.0697C10.4161 25.5202 9.85087 25.7734 9.26149 25.7735Z"
+        fill={color}
+    />
 </svg>    

package/dist/primitives/Icons/Copy.svelte

@@ -11,18 +11,18 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <path
-    d="M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z"
-    stroke={color}
-    stroke-width="1.33333"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2"
-    stroke={color}
-    stroke-width="1.33333"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
+  <path
+    d="M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z"
+    stroke={color}
+    stroke-width="1.33333"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2"
+    stroke={color}
+    stroke-width="1.33333"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/primitives/Icons/Cross.svelte

@@ -11,8 +11,8 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <path
-    d="M7.0885 5.99961L11.1645 1.92359C11.2381 1.85256 11.2967 1.76758 11.3371 1.67363C11.3774 1.57968 11.3987 1.47863 11.3996 1.37638C11.4005 1.27413 11.381 1.17272 11.3423 1.07808C11.3035 0.983445 11.2464 0.897464 11.1741 0.825159C11.1018 0.752855 11.0158 0.695674 10.9211 0.656954C10.8265 0.618234 10.7251 0.59875 10.6228 0.599638C10.5206 0.600527 10.4195 0.621771 10.3256 0.662129C10.2316 0.702488 10.1467 0.761155 10.0756 0.834705L5.99961 4.91072L1.92359 0.834705C1.77835 0.694429 1.58383 0.616809 1.38192 0.618564C1.18001 0.620319 0.986864 0.701307 0.844085 0.844085C0.701307 0.986864 0.620319 1.18001 0.618564 1.38192C0.616809 1.58383 0.694429 1.77835 0.834705 1.92359L4.91072 5.99961L0.834705 10.0756C0.761155 10.1467 0.702488 10.2316 0.662129 10.3256C0.621771 10.4195 0.600527 10.5206 0.599638 10.6228C0.59875 10.7251 0.618234 10.8265 0.656954 10.9211C0.695674 11.0158 0.752855 11.1018 0.825159 11.1741C0.897464 11.2464 0.983445 11.3035 1.07808 11.3423C1.17272 11.381 1.27413 11.4005 1.37638 11.3996C1.47863 11.3987 1.57968 11.3774 1.67363 11.3371C1.76758 11.2967 1.85256 11.2381 1.92359 11.1645L5.99961 7.0885L10.0756 11.1645C10.2209 11.3048 10.4154 11.3824 10.6173 11.3807C10.8192 11.3789 11.0124 11.2979 11.1551 11.1551C11.2979 11.0124 11.3789 10.8192 11.3807 10.6173C11.3824 10.4154 11.3048 10.2209 11.1645 10.0756L7.0885 5.99961Z"
-    fill={color}
-  />
-</svg>
+  <path
+    d="M7.0885 5.99961L11.1645 1.92359C11.2381 1.85256 11.2967 1.76758 11.3371 1.67363C11.3774 1.57968 11.3987 1.47863 11.3996 1.37638C11.4005 1.27413 11.381 1.17272 11.3423 1.07808C11.3035 0.983445 11.2464 0.897464 11.1741 0.825159C11.1018 0.752855 11.0158 0.695674 10.9211 0.656954C10.8265 0.618234 10.7251 0.59875 10.6228 0.599638C10.5206 0.600527 10.4195 0.621771 10.3256 0.662129C10.2316 0.702488 10.1467 0.761155 10.0756 0.834705L5.99961 4.91072L1.92359 0.834705C1.77835 0.694429 1.58383 0.616809 1.38192 0.618564C1.18001 0.620319 0.986864 0.701307 0.844085 0.844085C0.701307 0.986864 0.620319 1.18001 0.618564 1.38192C0.616809 1.58383 0.694429 1.77835 0.834705 1.92359L4.91072 5.99961L0.834705 10.0756C0.761155 10.1467 0.702488 10.2316 0.662129 10.3256C0.621771 10.4195 0.600527 10.5206 0.599638 10.6228C0.59875 10.7251 0.618234 10.8265 0.656954 10.9211C0.695674 11.0158 0.752855 11.1018 0.825159 11.1741C0.897464 11.2464 0.983445 11.3035 1.07808 11.3423C1.17272 11.381 1.27413 11.4005 1.37638 11.3996C1.47863 11.3987 1.57968 11.3774 1.67363 11.3371C1.76758 11.2967 1.85256 11.2381 1.92359 11.1645L5.99961 7.0885L10.0756 11.1645C10.2209 11.3048 10.4154 11.3824 10.6173 11.3807C10.8192 11.3789 11.0124 11.2979 11.1551 11.1551C11.2979 11.0124 11.3789 10.8192 11.3807 10.6173C11.3824 10.4154 11.3048 10.2209 11.1645 10.0756L7.0885 5.99961Z"
+    fill={color}
+  />
+</svg>

package/dist/primitives/Icons/DownArrow.svelte

@@ -11,11 +11,11 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <path
-    d="M4 6L8 10L12 6"
-    stroke={color}
-    stroke-width="1.33333"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
+  <path
+    d="M4 6L8 10L12 6"
+    stroke={color}
+    stroke-width="1.33333"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/primitives/Icons/ErrorCircle.svelte

@@ -11,10 +11,10 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-    <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0ZM7.55055 5.78278C7.06239 5.29463 6.27094 5.29463 5.78278 5.78278C5.29463 6.27094 5.29463 7.06239 5.78278 7.55055L8.23223 10L5.78278 12.4495C5.29463 12.9376 5.29463 13.7291 5.78278 14.2172C6.27094 14.7054 7.06239 14.7054 7.55055 14.2172L10 11.7678L12.4495 14.2172C12.9376 14.7054 13.7291 14.7054 14.2172 14.2172C14.7054 13.7291 14.7054 12.9376 14.2172 12.4495L11.7678 10L14.2172 7.55055C14.7054 7.06239 14.7054 6.27094 14.2172 5.78278C13.7291 5.29463 12.9376 5.29463 12.4495 5.78278L10 8.23223L7.55055 5.78278Z"
-        fill={color}
-    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0ZM7.55055 5.78278C7.06239 5.29463 6.27094 5.29463 5.78278 5.78278C5.29463 6.27094 5.29463 7.06239 5.78278 7.55055L8.23223 10L5.78278 12.4495C5.29463 12.9376 5.29463 13.7291 5.78278 14.2172C6.27094 14.7054 7.06239 14.7054 7.55055 14.2172L10 11.7678L12.4495 14.2172C12.9376 14.7054 13.7291 14.7054 14.2172 14.2172C14.7054 13.7291 14.7054 12.9376 14.2172 12.4495L11.7678 10L14.2172 7.55055C14.7054 7.06239 14.7054 6.27094 14.2172 5.78278C13.7291 5.29463 12.9376 5.29463 12.4495 5.78278L10 8.23223L7.55055 5.78278Z"
+        fill={color}
+    />
 </svg>    

package/dist/primitives/Icons/FacebookIcon.svelte

@@ -11,5 +11,5 @@
   fill={color}
   xmlns="http://www.w3.org/2000/svg"
 >
-  <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
-</svg>
+  <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
+</svg>

package/dist/primitives/Icons/Home.svelte

@@ -11,18 +11,18 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <path
-    d="M12.5 18V11.3333C12.5 11.1123 12.4122 10.9004 12.2559 10.7441C12.0996 10.5878 11.8877 10.5 11.6667 10.5H8.33333C8.11232 10.5 7.90036 10.5878 7.74408 10.7441C7.5878 10.9004 7.5 11.1123 7.5 11.3333V18"
-    stroke={color}
-    stroke-width="1.66667"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M2.5 8.8342C2.49994 8.59176 2.55278 8.35222 2.65482 8.1323C2.75687 7.91238 2.90566 7.71737 3.09083 7.56087L8.92417 2.5617C9.22499 2.30746 9.60613 2.16797 10 2.16797C10.3939 2.16797 10.775 2.30746 11.0758 2.5617L16.9092 7.56087C17.0943 7.71737 17.2431 7.91238 17.3452 8.1323C17.4472 8.35222 17.5001 8.59176 17.5 8.8342V16.3342C17.5 16.7762 17.3244 17.2002 17.0118 17.5127C16.6993 17.8253 16.2754 18.0009 15.8333 18.0009H4.16667C3.72464 18.0009 3.30072 17.8253 2.98816 17.5127C2.67559 17.2002 2.5 16.7762 2.5 16.3342V8.8342Z"
-    stroke={color}
-    stroke-width="1.66667"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
+  <path
+    d="M12.5 18V11.3333C12.5 11.1123 12.4122 10.9004 12.2559 10.7441C12.0996 10.5878 11.8877 10.5 11.6667 10.5H8.33333C8.11232 10.5 7.90036 10.5878 7.74408 10.7441C7.5878 10.9004 7.5 11.1123 7.5 11.3333V18"
+    stroke={color}
+    stroke-width="1.66667"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M2.5 8.8342C2.49994 8.59176 2.55278 8.35222 2.65482 8.1323C2.75687 7.91238 2.90566 7.71737 3.09083 7.56087L8.92417 2.5617C9.22499 2.30746 9.60613 2.16797 10 2.16797C10.3939 2.16797 10.775 2.30746 11.0758 2.5617L16.9092 7.56087C17.0943 7.71737 17.2431 7.91238 17.3452 8.1323C17.4472 8.35222 17.5001 8.59176 17.5 8.8342V16.3342C17.5 16.7762 17.3244 17.2002 17.0118 17.5127C16.6993 17.8253 16.2754 18.0009 15.8333 18.0009H4.16667C3.72464 18.0009 3.30072 17.8253 2.98816 17.5127C2.67559 17.2002 2.5 16.7762 2.5 16.3342V8.8342Z"
+    stroke={color}
+    stroke-width="1.66667"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/primitives/Icons/Icon.spec.js

@@ -1,175 +1,175 @@
-import { render, screen } from "@testing-library/svelte";
-import { expect, describe, test } from "vitest";
-import Icon from "./Icon.svelte";
-
-describe("Icon Component Tests", () => {
-  test("Renders Home icon", () => {
-    const { container } = render(Icon, { props: { name: "Home" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Shows icon", () => {
-    const { container } = render(Icon, { props: { name: "Shows" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Availability icon", () => {
-    const { container } = render(Icon, { props: { name: "Availability" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Profile icon", () => {
-    const { container } = render(Icon, { props: { name: "Profile" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Payment icon", () => {
-    const { container } = render(Icon, { props: { name: "Payment" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Notification icon", () => {
-    const { container } = render(Icon, { props: { name: "Notification" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Signout icon", () => {
-    const { container } = render(Icon, { props: { name: "Signout" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ChevronLeft icon", () => {
-    const { container } = render(Icon, { props: { name: "ChevronLeft" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ChevronRight icon", () => {
-    const { container } = render(Icon, { props: { name: "ChevronRight" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders CheckCircle icon", () => {
-    const { container } = render(Icon, { props: { name: "CheckCircle" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ErrorCircle icon", () => {
-    const { container } = render(Icon, { props: { name: "ErrorCircle" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ArrowLeft icon", () => {
-    const { container } = render(Icon, { props: { name: "ArrowLeft" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Back icon", () => {
-    const { container } = render(Icon, { props: { name: "Back" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Shows error message for unknown icon", () => {
-    render(Icon, { props: { name: "UnknownIcon" } });
-    expect(screen.getByText('Icon "UnknownIcon" not found.')).toBeInTheDocument();
-  });
-
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import Icon from "./Icon.svelte";
+
+describe("Icon Component Tests", () => {
+  test("Renders Home icon", () => {
+    const { container } = render(Icon, { props: { name: "Home" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Shows icon", () => {
+    const { container } = render(Icon, { props: { name: "Shows" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Availability icon", () => {
+    const { container } = render(Icon, { props: { name: "Availability" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Profile icon", () => {
+    const { container } = render(Icon, { props: { name: "Profile" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Payment icon", () => {
+    const { container } = render(Icon, { props: { name: "Payment" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Notification icon", () => {
+    const { container } = render(Icon, { props: { name: "Notification" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Signout icon", () => {
+    const { container } = render(Icon, { props: { name: "Signout" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ChevronLeft icon", () => {
+    const { container } = render(Icon, { props: { name: "ChevronLeft" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ChevronRight icon", () => {
+    const { container } = render(Icon, { props: { name: "ChevronRight" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders CheckCircle icon", () => {
+    const { container } = render(Icon, { props: { name: "CheckCircle" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ErrorCircle icon", () => {
+    const { container } = render(Icon, { props: { name: "ErrorCircle" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ArrowLeft icon", () => {
+    const { container } = render(Icon, { props: { name: "ArrowLeft" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Back icon", () => {
+    const { container } = render(Icon, { props: { name: "Back" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Shows error message for unknown icon", () => {
+    render(Icon, { props: { name: "UnknownIcon" } });
+    expect(screen.getByText('Icon "UnknownIcon" not found.')).toBeInTheDocument();
+  });
+
   test("Default size is 24", () => {
     const { container } = render(Icon, { props: { name: "Home" } });
     const svg = container.querySelector("svg");
     // Check width or height attribute
     expect(svg).toHaveAttribute("width", "24");
   });
-
-  test("Accepts custom size prop", () => {
-    const { container } = render(Icon, { props: { name: "Home", size: "32" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveAttribute("width", "32");
-  });
-
-  test("Default color is currentColor", () => {
-    const { container } = render(Icon, { props: { name: "Home" } });
-    const svg = container.querySelector("svg");
-    // Color is typically applied to stroke or fill
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Accepts custom color prop", () => {
-    const { container } = render(Icon, { props: { name: "Home", color: "red" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders More icon", () => {
-    const { container } = render(Icon, { props: { name: "More" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Info icon", () => {
-    const { container } = render(Icon, { props: { name: "Info" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Message icon", () => {
-    const { container } = render(Icon, { props: { name: "Message" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Reload icon", () => {
-    const { container } = render(Icon, { props: { name: "Reload" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Copy icon", () => {
-    const { container } = render(Icon, { props: { name: "Copy" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Cross icon", () => {
-    const { container } = render(Icon, { props: { name: "Cross" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ArrowRight icon", () => {
-    const { container } = render(Icon, { props: { name: "ArrowRight" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders DownArrow icon", () => {
-    const { container } = render(Icon, { props: { name: "DownArrow" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders MoreHori icon", () => {
-    const { container } = render(Icon, { props: { name: "MoreHori" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders CheckCircleOutline icon", () => {
-    const { container } = render(Icon, { props: { name: "CheckCircleOutline" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-});
+
+  test("Accepts custom size prop", () => {
+    const { container } = render(Icon, { props: { name: "Home", size: "32" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveAttribute("width", "32");
+  });
+
+  test("Default color is currentColor", () => {
+    const { container } = render(Icon, { props: { name: "Home" } });
+    const svg = container.querySelector("svg");
+    // Color is typically applied to stroke or fill
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Accepts custom color prop", () => {
+    const { container } = render(Icon, { props: { name: "Home", color: "red" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders More icon", () => {
+    const { container } = render(Icon, { props: { name: "More" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Info icon", () => {
+    const { container } = render(Icon, { props: { name: "Info" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Message icon", () => {
+    const { container } = render(Icon, { props: { name: "Message" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Reload icon", () => {
+    const { container } = render(Icon, { props: { name: "Reload" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Copy icon", () => {
+    const { container } = render(Icon, { props: { name: "Copy" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Cross icon", () => {
+    const { container } = render(Icon, { props: { name: "Cross" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ArrowRight icon", () => {
+    const { container } = render(Icon, { props: { name: "ArrowRight" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders DownArrow icon", () => {
+    const { container } = render(Icon, { props: { name: "DownArrow" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders MoreHori icon", () => {
+    const { container } = render(Icon, { props: { name: "MoreHori" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders CheckCircleOutline icon", () => {
+    const { container } = render(Icon, { props: { name: "CheckCircleOutline" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+});