@designcrowd/fe-shared-lib 1.0.0-test-publish

package/src/atoms/components/Icon/icons/upgrade-alt.vue

@@ -0,0 +1,7 @@
+<template>
+  <path
+    d="M14.9967 6.134a.2494.2494 0 00.003-.0296.2905.2905 0 00-.0006-.035.2433.2433 0 00-.015-.0633c-.002-.0057-.0025-.0117-.0051-.0173-.0019-.004-.0051-.0072-.0072-.0113-.0021-.004-.003-.0084-.0054-.0125l-2.3339-3.8519a.2457.2457 0 00-.0376-.0474l-.0007-.0005a.2284.2284 0 00-.0693-.0445c-.0032-.0014-.0053-.0043-.0089-.0058-.0025-.001-.0053-.0005-.0079-.0012A.2224.2224 0 0012.4348 2H3.5661a.2218.2218 0 00-.0724.0135c-.0025.0007-.0051.0002-.0074.0012-.0035.0012-.0056.004-.009.0055a.2314.2314 0 00-.0669.0422c-.0012.0012-.0028.0019-.004.0028a.2407.2407 0 00-.038.0477L1.0345 5.9648c-.0023.0038-.0032.0084-.0053.0125-.0021.004-.0054.0072-.0073.0113-.0025.0055-.003.0115-.0054.0173a.2433.2433 0 00-.0149.0636.197.197 0 00-.0014.0349.222.222 0 00.0117.0638.2486.2486 0 00.0105.0277c.002.0043.0028.0091.0051.0135.0038.007.0094.0122.0136.0187.0032.005.005.0106.009.0154l6.7657 8.6633c.0005.0008.001.0012.0014.0017l.0012.0017c.0007.001.0019.0012.0026.0022a.2305.2305 0 00.0688.0563.2394.2394 0 00.0208.0104A.2245.2245 0 008 15a.2292.2292 0 00.08-.0147c.004-.0014.0066-.0048.0105-.0065.012-.005.0213-.0132.032-.0202a.2271.2271 0 00.0481-.0392c.0033-.0037.0082-.0053.0112-.0092l6.7683-8.6667c.0037-.0048.0056-.0106.009-.0154.0045-.0065.0099-.0118.0136-.0187.0023-.0044.003-.0092.0051-.0135a.2319.2319 0 00.0105-.0277c.0033-.0113.0066-.0224.0084-.0342zM8.4906 2.4817h3.608l-1.1343 3.1405-2.4737-3.1405zm2.053 3.3704h-5.087L8 2.623l2.5437 3.229zm-5.5242-.209l-1.12-3.1614h3.6102L5.0194 5.6431zm5.6879.6905L7.959 13.9424 5.2637 6.3336h5.4436zm1.7803-3.5502l1.8594 3.069h-2.9678l1.1084-3.069zm-8.9773.0031l1.086 3.0656H1.653l1.8573-3.0656zm1.2566 3.547l2.5297 7.1414-5.577-7.1413h3.0473zm3.7925 7.3258l2.646-7.3257h3.075l-5.721 7.3257z"
+    stroke-width=".5"
+    fill-rule="nonzero"
+  />
+</template>

package/src/atoms/components/Icon/icons/upgrade.vue

@@ -0,0 +1,9 @@
+<template>
+  <path
+    d="M14.9967 6.134a.2494.2494 0 00.003-.0296.2905.2905 0 00-.0006-.035.2433.2433 0 00-.015-.0633c-.002-.0057-.0025-.0117-.0051-.0173-.0019-.004-.0051-.0072-.0072-.0113-.0021-.004-.003-.0084-.0054-.0125l-2.3339-3.8519a.2457.2457 0 00-.0376-.0474l-.0007-.0005a.2284.2284 0 00-.0693-.0445c-.0032-.0014-.0053-.0043-.0089-.0058-.0025-.001-.0053-.0005-.0079-.0012A.2224.2224 0 0012.4348 2H3.5661a.2218.2218 0 00-.0724.0135c-.0025.0007-.0051.0002-.0074.0012-.0035.0012-.0056.004-.009.0055a.2314.2314 0 00-.0669.0422c-.0012.0012-.0028.0019-.004.0028a.2407.2407 0 00-.038.0477L1.0345 5.9648c-.0023.0038-.0032.0084-.0053.0125-.0021.004-.0054.0072-.0073.0113-.0025.0055-.003.0115-.0054.0173a.2433.2433 0 00-.0149.0636.197.197 0 00-.0014.0349.222.222 0 00.0117.0638.2486.2486 0 00.0105.0277c.002.0043.0028.0091.0051.0135.0038.007.0094.0122.0136.0187.0032.005.005.0106.009.0154l6.7657 8.6633c.0005.0008.001.0012.0014.0017l.0012.0017c.0007.001.0019.0012.0026.0022a.2305.2305 0 00.0688.0563.2394.2394 0 00.0208.0104A.2245.2245 0 008 15a.2292.2292 0 00.08-.0147c.004-.0014.0066-.0048.0105-.0065.012-.005.0213-.0132.032-.0202a.2271.2271 0 00.0481-.0392c.0033-.0037.0082-.0053.0112-.0092l6.7683-8.6667c.0037-.0048.0056-.0106.009-.0154.0045-.0065.0099-.0118.0136-.0187.0023-.0044.003-.0092.0051-.0135a.2319.2319 0 00.0105-.0277c.0033-.0113.0066-.0224.0084-.0342zM8.4906 2.4817h3.608l-1.1343 3.1405-2.4737-3.1405zm2.053 3.3704h-5.087L8 2.623l2.5437 3.229zm-5.5242-.209l-1.12-3.1614h3.6102L5.0194 5.6431zm5.6879.6905L7.959 13.9424 5.2637 6.3336h5.4436zm1.7803-3.5502l1.8594 3.069h-2.9678l1.1084-3.069zm-8.9773.0031l1.086 3.0656H1.653l1.8573-3.0656zm1.2566 3.547l2.5297 7.1414-5.577-7.1413h3.0473zm3.7925 7.3258l2.646-7.3257h3.075l-5.721 7.3257z"
+    stroke-width=".5"
+    fill-rule="nonzero"
+    fill="#0097D7"
+    stroke="#0097D7"
+  />
+</template>

package/src/atoms/components/Icon/icons/upload-arrow.vue

@@ -0,0 +1,6 @@
+<template>
+  <path
+    d="M8.58929 1.26673L12.0179 4.76844C12.3661 5.09673 12.3661 5.67123 12.0179 5.99951C11.6964 6.35515 11.1339 6.35515 10.8125 5.99951L8.85714 4.00244V9.74744C8.85714 10.2399 8.45536 10.6229 8 10.6229C7.51786 10.6229 7.14286 10.2399 7.14286 9.74744V4.00244L5.16071 5.99951C4.83929 6.35515 4.27679 6.35515 3.95536 5.99951C3.60714 5.67123 3.60714 5.09673 3.95536 4.76844L7.38393 1.26673C7.70536 0.911089 8.26786 0.911089 8.58929 1.26673ZM3.71429 10.6229V12.3737C3.71429 12.8661 4.08929 13.2491 4.57143 13.2491H11.4286C11.8839 13.2491 12.2857 12.8661 12.2857 12.3737V10.6229C12.2857 10.1578 12.6607 9.74744 13.1429 9.74744C13.5982 9.74744 14 10.1578 14 10.6229V12.3737C14 13.8236 12.8482 15 11.4286 15H4.57143C3.15179 15 2 13.8236 2 12.3737V10.6229C2 10.1578 2.375 9.74744 2.85714 9.74744C3.3125 9.74744 3.71429 10.1578 3.71429 10.6229Z"
+    fill="black"
+  />
+</template>

package/src/atoms/components/Icon/icons/upload.vue

@@ -0,0 +1,5 @@
+<template>
+  <path
+    d="M8 5.9582l2.3434 2.391-.7141.7L8.5 7.8966v4.5613h-1V7.896L6.3707 9.0491l-.7141-.7L8 5.9581zm-.2727-3.1249c2.2547 0 4.147 1.6809 4.5095 3.8938l.0052.037.1.0173c1.1863.2406 2.0936 1.2816 2.1547 2.5382l.0033.1355c0 1.4528-1.1316 2.6514-2.5482 2.7227l-.1336.0034h-.803v-1h.803c.9216 0 1.6818-.7757 1.6818-1.7261 0-.9124-.7006-1.6638-1.572-1.7224l-.1098-.0037h-.4969l-.0294-.4687c-.1206-1.9192-1.6862-3.427-3.5646-3.427-1.863 0-3.414 1.4627-3.5812 3.3535l-.0103.1502-.018.366-.3545.0931c-.745.1955-1.2633.8673-1.2633 1.659 0 .9124.7006 1.6637 1.572 1.7224l.1098.0037h.803v1h-.803c-1.4784 0-2.6818-1.2279-2.6818-2.7261 0-1.1077.6517-2.0756 1.6286-2.4954l.0374-.0157.0186-.1362c.3316-2.206 2.1643-3.8944 4.3835-3.9717l.1592-.0028z"
+  />
+</template>

package/src/atoms/components/Icon/icons/user-accounts.vue

@@ -0,0 +1,5 @@
+<template>
+  <path
+    d="M8 2.75c.9429 0 1.7143.7875 1.7143 1.75v.875c0 .9625-.7714 1.75-1.7143 1.75s-1.7143-.7875-1.7143-1.75V4.5c0-.9625.7714-1.75 1.7143-1.75zM8 1C6.1143 1 4.5714 2.575 4.5714 4.5v.875c0 1.925 1.5429 3.5 3.4286 3.5s3.4286-1.575 3.4286-3.5V4.5C11.4286 2.575 9.8857 1 8 1zM8.8571 11.5c1.2858 0 2.4.7 3 1.75H4.2286c.6-1.05 1.7143-1.75 3-1.75H8.857zm0-1.75H7.143C4.3143 9.75 2 12.1125 2 15h12c0-2.8875-2.3143-5.25-5.1429-5.25z"
+  />
+</template>

package/src/atoms/components/Icon/icons/volume-muted.vue

@@ -0,0 +1,5 @@
+<template>
+  <path
+    d="M14.8504 12.7186C15.0249 12.8743 15.0468 13.0534 14.9159 13.2558L14.4795 13.8398C14.3341 14.0267 14.1741 14.0501 13.9996 13.9099L1.1496 3.28142C0.975067 3.1257 0.95325 2.94661 1.08415 2.74416L1.52048 2.16018C1.66592 1.9733 1.82591 1.94994 2.00045 2.0901L5.31656 4.8465L6.40739 3.67853C6.56738 3.50723 6.75646 3.4683 6.97462 3.56174C7.19279 3.65517 7.30187 3.82647 7.30187 4.07564V6.48165L9.02538 7.90656C8.99629 7.57953 8.85085 7.33815 8.58905 7.18243C8.45815 7.10456 8.37088 6.99555 8.32725 6.85539C8.29816 6.69967 8.3127 6.55951 8.37088 6.43493C8.4436 6.29477 8.55269 6.20133 8.69813 6.15462C8.84357 6.1079 8.97447 6.12347 9.09083 6.20133C9.39626 6.38821 9.63624 6.64516 9.81077 6.97219C9.99985 7.28365 10.0944 7.62625 10.0944 8C10.0944 8.20245 10.0508 8.42825 9.96349 8.67742L10.8362 9.40156C11.0398 8.96552 11.1416 8.49833 11.1416 8C11.1416 7.45495 11.018 6.94105 10.7707 6.45829C10.5234 5.97553 10.1889 5.58621 9.76714 5.29032C9.63624 5.21246 9.55625 5.10345 9.52716 4.96329C9.49807 4.80756 9.51989 4.66741 9.59261 4.54283C9.66533 4.40267 9.77441 4.31702 9.91986 4.28587C10.0653 4.25473 10.1962 4.27809 10.3126 4.35595C10.8943 4.74527 11.3525 5.26696 11.687 5.92102C12.0215 6.57508 12.1888 7.27586 12.1888 8.02336C12.1888 8.75528 12.0142 9.44828 11.6652 10.1023L12.4942 10.7798C12.9887 9.92325 13.236 8.99666 13.236 8C13.236 7.0812 13.0251 6.21691 12.6033 5.40712C12.1961 4.59733 11.6361 3.93548 10.9234 3.42158C10.7925 3.34372 10.7125 3.22692 10.6834 3.07119C10.6543 2.91546 10.6762 2.77531 10.7489 2.65072C10.8362 2.52614 10.9525 2.44828 11.098 2.41713C11.2434 2.37041 11.3743 2.39377 11.4907 2.48721C12.3633 3.09455 13.0469 3.88877 13.5414 4.86986C14.0359 5.85095 14.2832 6.89433 14.2832 8C14.2832 9.24583 13.9705 10.406 13.3451 11.4805L14.8504 12.7186ZM1.71683 6.31813C1.71683 6.11568 1.8041 5.95996 1.97863 5.85095L7.30187 10.2659V11.9244C7.30187 12.1735 7.19279 12.3448 6.97462 12.4383C6.75646 12.5317 6.56738 12.4928 6.40739 12.3215L4.46572 10.2425H2.24043C2.09498 10.2425 1.97136 10.188 1.86955 10.079C1.76774 9.96997 1.71683 9.8376 1.71683 9.68187V6.31813Z"
+  />
+</template>

package/src/atoms/components/Icon/icons/volume.vue

@@ -0,0 +1,5 @@
+<template>
+  <path
+    d="M7.27083 2.2076C7.48472 1.99371 7.7375 1.9451 8.02917 2.06177C8.32083 2.17844 8.46667 2.39232 8.46667 2.70344V12.5034C8.46667 12.8145 8.32083 13.0284 8.02917 13.1451C7.7375 13.2618 7.48472 13.2132 7.27083 12.9993L4.675 10.4034H1.7C1.50556 10.4034 1.34028 10.3354 1.20417 10.1993C1.06806 10.0632 1 9.89788 1 9.70343V5.50344C1 5.30899 1.06806 5.14371 1.20417 5.0076C1.34028 4.87149 1.50556 4.80344 1.7 4.80344H4.675L7.27083 2.2076ZM14.3292 5.0076C14.7764 5.80482 15 6.6701 15 7.60343C15 8.53677 14.7764 9.41177 14.3292 10.2284C13.9014 11.0257 13.2889 11.6673 12.4917 12.1534C12.3167 12.2701 12.1319 12.309 11.9375 12.2701C11.7625 12.2118 11.6264 12.1048 11.5292 11.9493C11.4319 11.7743 11.4028 11.5993 11.4417 11.4243C11.4806 11.2298 11.5875 11.0743 11.7625 10.9576C12.1319 10.7243 12.4528 10.4326 12.725 10.0826C13.0167 9.7326 13.2306 9.34371 13.3667 8.91593C13.5222 8.48816 13.6 8.05066 13.6 7.60343C13.6 7.15621 13.5222 6.71871 13.3667 6.29093C13.2306 5.86316 13.0167 5.47427 12.725 5.12427C12.4528 4.77427 12.1319 4.4826 11.7625 4.24927C11.5875 4.1326 11.4806 3.98677 11.4417 3.81177C11.4028 3.61732 11.4319 3.44232 11.5292 3.28677C11.6264 3.11177 11.7722 3.00482 11.9667 2.96594C12.1611 2.9076 12.3361 2.93677 12.4917 3.05344C13.2889 3.53955 13.9014 4.19094 14.3292 5.0076ZM10.8583 5.3576C11.2667 5.59094 11.5875 5.91177 11.8208 6.3201C12.0736 6.70899 12.2 7.13677 12.2 7.60343C12.2 8.0701 12.0736 8.5076 11.8208 8.91593C11.5875 9.30482 11.2667 9.61593 10.8583 9.84927C10.7028 9.94649 10.5278 9.96593 10.3333 9.9076C10.1389 9.84927 9.99306 9.74232 9.89583 9.58677C9.81806 9.41177 9.79861 9.23677 9.8375 9.06177C9.89583 8.86732 10.0125 8.72149 10.1875 8.62427C10.5958 8.39093 10.8 8.05066 10.8 7.60343C10.8 7.15621 10.5958 6.81593 10.1875 6.5826C10.0125 6.48538 9.89583 6.34927 9.8375 6.17427C9.79861 5.97982 9.81806 5.80482 9.89583 5.64927C9.99306 5.47427 10.1389 5.3576 10.3333 5.29927C10.5278 5.24094 10.7028 5.26038 10.8583 5.3576Z"
+  />
+</template>

package/src/atoms/components/Icon/icons/watchlist-filled.vue

@@ -0,0 +1,14 @@
+<template>
+  <g fill="none" fill-rule="evenodd">
+    <path
+      d="M10.8 1.2625c2.3625 0 4.2 1.925 4.2 4.2 0 3.675-5.775 8.4875-6.475 9.0125-.2625.35-.7875.35-1.05.0875C6.775 13.95 1 9.1375 1 5.4625c0-2.3625 1.925-4.2 4.2-4.2 1.05 0 2.0125.4375 2.8 1.05.7875-.7 1.75-1.05 2.8-1.05zm0 2c-.576 0-1.0616.1807-1.4713.5448L8.0853 4.9126 6.7721 3.8912C6.2396 3.477 5.697 3.2625 5.2 3.2625c-1.2073 0-2.2.9786-2.2 2.2 0 .3947.1522.9247.4689 1.5548.4744.944 1.264 2.0113 2.2816 3.1283.594.6519 1.2322 1.2851 1.8945 1.8953.1137.1047.222.2033.3274.2982.1602-.1389.3352-.2939.5133-.456.709-.6454 1.4094-1.3451 2.0424-2.0595C12.095 8.0551 13 6.456 13 5.4625c0-1.2073-.9786-2.2-2.2-2.2z"
+      fill="#FFFFFF"
+      fill-rule="nonzero"
+    />
+    <path
+      d="M8.4857 11.883c.709-.6453 1.4094-1.345 2.0424-2.0594C12.095 8.0551 13 6.456 13 5.4625c0-1.2073-.9786-2.2-2.2-2.2-.576 0-1.0616.1807-1.4713.5448L8.0853 4.9126 6.7721 3.8912C6.2396 3.477 5.697 3.2625 5.2 3.2625c-1.2073 0-2.2.9786-2.2 2.2 0 .3947.1522.9247.4689 1.5548.4744.944 1.264 2.0113 2.2816 3.1283.594.6519 1.2322 1.2851 1.8945 1.8953.1137.1047.222.2033.3274.2982.1602-.1389.3352-.2939.5133-.456z"
+      fill="#F43F3C"
+      opacity=".6"
+    />
+  </g>
+</template>

package/src/atoms/components/Icon/icons/watchlist-hollow-alt.vue

@@ -0,0 +1,14 @@
+<template>
+  <g fill="none" fill-rule="evenodd">
+    <path
+      d="M10.8 1.2625c2.3625 0 4.2 1.925 4.2 4.2 0 3.675-5.775 8.4875-6.475 9.0125-.2625.35-.7875.35-1.05.0875C6.775 13.95 1 9.1375 1 5.4625c0-2.3625 1.925-4.2 4.2-4.2 1.05 0 2.0125.4375 2.8 1.05.7875-.7 1.75-1.05 2.8-1.05zm0 2c-.576 0-1.0616.1807-1.4713.5448L8.0853 4.9126 6.7721 3.8912C6.2396 3.477 5.697 3.2625 5.2 3.2625c-1.2073 0-2.2.9786-2.2 2.2 0 .3947.1522.9247.4689 1.5548.4744.944 1.264 2.0113 2.2816 3.1283.594.6519 1.2322 1.2851 1.8945 1.8953.1137.1047.222.2033.3274.2982.1602-.1389.3352-.2939.5133-.456.709-.6454 1.4094-1.3451 2.0424-2.0595C12.095 8.0551 13 6.456 13 5.4625c0-1.2073-.9786-2.2-2.2-2.2z"
+      fill="#FFFFFF"
+      fill-rule="nonzero"
+    />
+    <path
+      d="M8.4857 11.883c.709-.6453 1.4094-1.345 2.0424-2.0594C12.095 8.0551 13 6.456 13 5.4625c0-1.2073-.9786-2.2-2.2-2.2-.576 0-1.0616.1807-1.4713.5448L8.0853 4.9126 6.7721 3.8912C6.2396 3.477 5.697 3.2625 5.2 3.2625c-1.2073 0-2.2.9786-2.2 2.2 0 .3947.1522.9247.4689 1.5548.4744.944 1.264 2.0113 2.2816 3.1283.594.6519 1.2322 1.2851 1.8945 1.8953.1137.1047.222.2033.3274.2982.1602-.1389.3352-.2939.5133-.456z"
+      fill="#5D6D81"
+      opacity=".6"
+    />
+  </g>
+</template>

package/src/atoms/components/Icon/icons/watchlist-hollow.vue

@@ -0,0 +1,6 @@
+<template>
+  <path
+    d="M8.8892 13.1483a1.4481 1.4481 0 00-.0707-.0662l.0707.0662zm-.4035-1.2652c.709-.6454 1.4094-1.3451 2.0424-2.0595C12.095 8.0551 13 6.456 13 5.4625c0-1.2073-.9786-2.2-2.2-2.2-.576 0-1.0616.1807-1.4713.5448L8.0853 4.9126 6.7721 3.8912C6.2396 3.477 5.697 3.2625 5.2 3.2625c-1.2073 0-2.2.9786-2.2 2.2 0 .3947.1522.9247.4689 1.5548.4744.944 1.264 2.0113 2.2816 3.1283.594.6519 1.2322 1.2851 1.8945 1.8953.1137.1047.222.2033.3274.2982.1602-.1389.3352-.2939.5133-.456zM7.475 14.5625C6.775 13.95 1 9.1375 1 5.4625c0-2.3625 1.925-4.2 4.2-4.2 1.05 0 2.0125.4375 2.8 1.05.7875-.7 1.75-1.05 2.8-1.05 2.3625 0 4.2 1.925 4.2 4.2 0 3.675-5.775 8.4875-6.475 9.0125-.2625.35-.7875.35-1.05.0875z"
+    fill-rule="nonzero"
+  />
+</template>

package/src/atoms/components/Icon/icons/website-filled.vue

@@ -0,0 +1,5 @@
+<template>
+  <path
+    d="M13.688 2c.364 0 .674.123.93.37.254.247.382.547.382.9v9.307c0 .353-.128.652-.383.899s-.565.37-.93.37H2.313c-.365 0-.675-.123-.93-.37a1.204 1.204 0 0 1-.383-.9V3.27c0-.352.128-.652.383-.899s.565-.37.93-.37h11.374ZM4.226 5.147a.823.823 0 0 0 .273-.609.743.743 0 0 0-.273-.581.79.79 0 0 0-.602-.265.879.879 0 0 0-.629.265.778.778 0 0 0-.246.581c0 .23.082.432.246.609a.93.93 0 0 0 .629.238c.237 0 .438-.08.602-.238Zm2.625 0a.823.823 0 0 0 .273-.609.743.743 0 0 0-.273-.581.79.79 0 0 0-.602-.265.879.879 0 0 0-.629.265.778.778 0 0 0-.246.581c0 .23.082.432.246.609a.93.93 0 0 0 .629.238c.237 0 .438-.08.602-.238Zm2.625 0a.823.823 0 0 0 .273-.609.743.743 0 0 0-.273-.581.79.79 0 0 0-.602-.265.879.879 0 0 0-.629.265.778.778 0 0 0-.246.581c0 .23.082.432.246.609a.93.93 0 0 0 .629.238c.237 0 .438-.08.602-.238Z"
+  />
+</template>

package/src/atoms/components/Icon/icons/website.vue

@@ -0,0 +1,6 @@
+<template>
+  <path
+    d="M12.6667 1.9167c1.1506 0 2.0833.9327 2.0833 2.0833v8c0 1.1506-.9327 2.0833-2.0833 2.0833H3.3333C2.1827 14.0833 1.25 13.1506 1.25 12V4c0-1.1506.9327-2.0833 2.0833-2.0833zm.5833 5.439H2.75V12c0 .29.2115.5305.4887.5757l.0946.0076h9.3334A.5833.5833 0 0013.25 12V7.3557zm-.5833-3.939H3.3333A.5833.5833 0 002.75 4v1.8557h10.5V4a.5835.5835 0 00-.4887-.5757l-.0946-.0076zM4 4a.6667.6667 0 110 1.3333A.6667.6667 0 014 4zm2 0a.6667.6667 0 110 1.3333A.6667.6667 0 016 4zm2 0a.6667.6667 0 110 1.3333A.6667.6667 0 018 4z"
+    fill-rule="nonzero"
+  />
+</template>

package/src/atoms/components/Icon/icons/wholesale.vue

@@ -0,0 +1,6 @@
+<template>
+  <path
+    fill-rule="nonzero"
+    d="M8.875 5.7778h3.15l-3.15 3.2-3.5-3.5556L1.2625 9.6l1.225 1.2444L5.375 7.9111l3.5 3.5556 4.375-4.4445v3.2H15V4H8.875z"
+  />
+</template>

package/src/atoms/components/Icon/icons/zoom.vue

@@ -0,0 +1,11 @@
+<template>
+  <g fill-rule="evenodd">
+    <path
+      d="M7.125 1c3.3827 0 6.125 2.7423 6.125 6.125s-2.7423 6.125-6.125 6.125S1 10.5077 1 7.125 3.7423 1 7.125 1zm0 1.75c-2.4162 0-4.375 1.9588-4.375 4.375S4.7088 11.5 7.125 11.5 11.5 9.5412 11.5 7.125 9.5412 2.75 7.125 2.75z"
+    />
+    <path
+      d="M7.125 4.9375a.4375.4375 0 01.4375.4375v1.3125H8.875a.4376.4376 0 01.4305.3589l.007.0786a.4375.4375 0 01-.4375.4375H7.5625V8.875a.4376.4376 0 01-.3589.4305l-.0786.007a.4375.4375 0 01-.4375-.4375V7.5625H5.375a.4376.4376 0 01-.4305-.3589l-.007-.0786a.4375.4375 0 01.4375-.4375h1.3125V5.375a.4376.4376 0 01.3589-.4305zM10.419 11.5367l2.7943 2.7943a.7903.7903 0 101.1177-1.1177l-2.7943-2.7943a.7903.7903 0 10-1.1177 1.1177z"
+      fill-rule="nonzero"
+    />
+  </g>
+</template>

package/src/atoms/components/Loader/Loader.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <svg class="tw-animate-spin" width="30" height="30" xmlns="http://www.w3.org/2000/svg">
+      <g transform="translate(3 3)" stroke="#5D6D81" fill="none" fill-rule="evenodd">
+        <path
+          d="M24 12c0 6.6-5.4 12-12 12-4.8134 0-8.9885-2.8722-10.8962-6.9873M0 12C0 5.4 5.4 0 12 0c4.68 0 8.76 2.64 10.68 6.6"
+          stroke-width="1.92"
+        />
+        <path stroke-width="1.8462" d="M.0923 24l.923-7.1077 7.1078.923" />
+        <path stroke-width="1.92" d="M24 0l-1.0166 6.72-7.6234-.911" />
+        <circle stroke-width="1.8462" cx="12" cy="12" r="3" />
+      </g>
+    </svg>
+  </div>
+</template>

package/src/atoms/components/Masonry/Masonry.stories.js

@@ -0,0 +1,48 @@
+import Masonry from './Masonry.vue';
+import data from './fixtures';
+
+export default {
+  title: 'Components/Masonry',
+  component: Masonry,
+};
+
+export const Sample = () => {
+  return {
+    components: {
+      Masonry,
+    },
+    data() {
+      return {
+        items: data.page1,
+      };
+    },
+    template: `
+      <div>
+        Sample  
+        <Masonry :items="items" :gap="22">
+          <template #item="{item}">
+            <figure class="tw-w-full tw-m-0 tw-p-0">
+              <img :src="item.imageUrl" class="tw-w-full" />
+            </figure>
+          </template>
+        </Masonry>
+        <div><button @click.stop="addOneItem">Add one item</button></div>
+        <div><button @click.stop="add16Items">Add next 16 item</button></div>
+      </div>
+      `,
+    methods: {
+      getRandomInt(max) {
+        return Math.floor(Math.random() * max);
+      },
+      addOneItem() {
+        const randomIndex = this.getRandomInt(data.page2.length - 1);
+        this.items.push(data.page2[randomIndex]);
+      },
+      add16Items() {
+        data.page2.forEach((e) => {
+          this.items.push(e);
+        });
+      },
+    },
+  };
+};

package/src/atoms/components/Masonry/Masonry.vue

@@ -0,0 +1,48 @@
+<template>
+  <vue-masonry-wall :items="items" :options="options">
+    <template #default="{ item }">
+      <slot name="item" :item="item" />
+    </template>
+  </vue-masonry-wall>
+</template>
+
+<script>
+import VueMasonryWall from '../../thirdparty-components/VueMasonryWall/VueMasonryWall.vue';
+
+export default {
+  components: {
+    VueMasonryWall,
+  },
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    gap: {
+      type: Number,
+      required: false,
+      default: 22,
+    },
+    columnWidth: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+  },
+  computed: {
+    options() {
+      const options = {};
+
+      if (this.gap) {
+        options.padding = this.gap;
+      }
+
+      if (this.columnWidth) {
+        options.width = this.columnWidth;
+      }
+
+      return options;
+    },
+  },
+};
+</script>