@thecb/components 12.0.0-beta.0 → 12.0.0-beta.2

package/src/components/atoms/icons/GuidedCheckoutImage.js

@@ -3,35 +3,114 @@ import React from "react";
 const GuidedCheckoutImage = () => {
   return (
     <svg
-      width="186"
-      height="96"
-      viewBox="0 0 186 96"
+      width="184"
+      height="159"
+      viewBox="0 0 184 159"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <rect
-        x="48.6582"
-        y="12.7822"
-        width="86.9263"
-        height="65.0716"
-        rx="5"
-        fill="white"
-      />
-      <path
-        opacity="0.3"
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M157.658 6.96909C158.29 5.32214 159.882 4.15137 161.751 4.15137C163.788 4.15137 165.496 5.54154 165.991 7.42414C166.168 7.38839 166.352 7.36921 166.54 7.36921C168.076 7.36921 169.32 8.61442 169.32 10.1505C169.32 11.6866 168.076 12.9319 166.54 12.9319H154.54C153.004 12.9319 151.759 11.6866 151.759 10.1505C151.759 8.61442 153.004 7.36921 154.54 7.36921C154.946 7.36921 155.331 7.4586 155.679 7.61526C156.022 7.17907 156.554 6.89791 157.151 6.89791C157.327 6.89791 157.496 6.92359 157.658 6.96909ZM29.9007 45.3418C30.0511 43.7052 31.414 42.4238 33.0737 42.4238C34.5347 42.4238 35.765 43.4168 36.1417 44.7708C36.5175 44.4868 36.9822 44.3165 37.4875 44.3165C38.7303 44.3165 39.738 45.3343 39.738 46.5896C39.738 47.8451 38.7303 48.8629 37.4875 48.8629H28.783C27.721 48.8629 26.86 47.9932 26.86 46.9206C26.86 45.8478 27.721 44.9781 28.783 44.9781C29.2002 44.9781 29.5853 45.1138 29.9007 45.3418ZM27.3073 7.16256C25.3138 7.16256 23.6159 8.41138 22.9411 10.1681C22.7693 10.1196 22.5883 10.0922 22.4008 10.0922C21.7628 10.0922 21.1962 10.3921 20.8302 10.8574C20.459 10.6903 20.0486 10.5949 19.6151 10.5949C17.9772 10.5949 16.6494 11.9231 16.6494 13.5617C16.6494 15.2002 17.9772 16.5284 19.6151 16.5284H32.4158C34.0534 16.5284 35.3811 15.2002 35.3811 13.5617C35.3811 11.9231 34.0534 10.5949 32.4158 10.5949C32.2148 10.5949 32.019 10.6154 31.8294 10.6535C31.3019 8.64541 29.4803 7.16256 27.3073 7.16256ZM112.12 87.6601C112.12 85.2362 103.187 83.2712 92.1679 83.2712C81.149 83.2712 72.2157 85.2362 72.2157 87.6601C72.2157 90.084 81.149 92.049 92.1679 92.049C103.187 92.049 112.12 90.084 112.12 87.6601ZM171.486 29.0796C171.486 27.8253 170.469 26.8086 169.215 26.8086H145.438C145.347 26.8086 145.256 26.8141 145.165 26.8251C143.92 26.9761 143.033 28.1079 143.184 29.353L145.146 45.5311C145.284 46.6712 146.252 47.5287 147.401 47.5287H167.252C168.401 47.5287 169.369 46.6712 169.507 45.5311L171.469 29.353C171.48 29.2623 171.486 29.171 171.486 29.0796ZM133.401 12.7851L133.282 12.7822H51.0491C49.7687 12.7822 48.7236 13.7791 48.6615 15.0321L48.6585 15.1503V20.3601H135.672V15.1503C135.672 13.882 134.666 12.8467 133.401 12.7851Z"
-        fill="#3B5BDB"
-      />
-      <path
-        d="M89.5104 77.7962C90.2778 77.7962 90.9044 78.3932 90.9429 79.1439L90.9447 79.217V87.6425C90.9447 88.4027 90.3421 89.0235 89.5842 89.0615L89.5104 89.0634H84.0843C83.2921 89.0634 82.6499 88.4272 82.6499 87.6425C82.6499 86.8824 83.2526 86.2616 84.0104 86.2236L84.0843 86.2217L88.0759 86.2216L88.0761 79.217C88.0761 78.4568 88.6788 77.8361 89.4366 77.798L89.5104 77.7962ZM94.825 77.5318C95.5924 77.5318 96.219 78.1288 96.2574 78.8795L96.2593 78.9527L96.2589 86.2216L100.251 86.2218C101.019 86.2218 101.645 86.8188 101.684 87.5695L101.685 87.6427C101.685 88.4028 101.083 89.0236 100.325 89.0616L100.251 89.0635H94.825C94.0576 89.0635 93.431 88.4665 93.3926 87.7158L93.3907 87.6427V78.9527C93.3907 78.1679 94.0328 77.5318 94.825 77.5318ZM48.3193 58.0547C47.1765 59.0379 45.5982 60.3956 43.5845 62.1279L59.6704 65.8774C60.4641 64.8028 61.7449 64.1047 63.1907 64.1047C64.0309 64.1047 64.7119 64.7794 64.7119 65.6116C64.7119 66.4186 64.0715 67.0775 63.2666 67.1167L63.1907 67.1185C62.4628 67.1185 61.8703 67.7076 61.8703 68.4369C61.8703 69.1422 62.4239 69.7162 63.1184 69.7537L63.1907 69.7556H65.6733C66.5134 69.7556 67.1945 70.4303 67.1945 71.2625C67.1945 72.0696 66.5541 72.7284 65.7492 72.7676L65.6733 72.7695H63.1907C60.8966 72.7695 59.0179 71.0118 58.8414 68.7808L40.2249 64.4414C39.4805 64.2679 38.9937 63.5802 39.0573 62.8472C39.021 62.4108 39.1765 61.9645 39.5143 61.6406L39.5759 61.5847L48.0414 54.3022C48.6758 53.7565 48.8917 57.5624 48.3193 58.0547ZM163.601 50.3541C164.441 50.3541 165.123 51.0288 165.123 51.861C165.123 52.6681 164.482 53.3269 163.677 53.3661L163.601 53.3679L158.396 53.3677L146.317 66.1842C145.798 66.7342 144.954 66.8185 144.337 66.3933L144.272 66.3458C140.542 63.4754 137.745 61.3226 135.88 59.8874C135.492 59.5886 135.856 56.1092 136.515 56.5623L136.582 56.6113L145.041 63.1214L154.234 53.3677L151.051 53.3679C150.211 53.3679 149.53 52.6933 149.53 51.861C149.53 51.054 150.17 50.3951 150.975 50.356L151.051 50.3541H163.601ZM170.063 26.8086C170.903 26.8086 171.584 27.4833 171.584 28.3155C171.584 28.3756 171.58 28.4356 171.573 28.4953L169.425 46.2015C169.334 46.9588 168.685 47.5287 167.915 47.5287H146.737C145.967 47.5287 145.319 46.9588 145.227 46.2015L143.079 28.4953C142.979 27.669 143.574 26.9186 144.408 26.8194C144.468 26.8122 144.529 26.8086 144.59 26.8086H170.063ZM147.196 43.4878L147.412 45.2683L148.993 45.2683L147.196 43.4878ZM153.523 42.2217L150.447 45.2683H156.598L153.523 42.2217ZM161.129 42.2217L158.054 45.2683H164.204L161.129 42.2217ZM167.456 43.489L165.66 45.2683L167.24 45.2683L167.456 43.489ZM164.932 38.4548L161.667 41.6892L164.932 44.9236L167.603 42.2774L167.73 41.2271L164.932 38.4548ZM153.523 34.6878L150.258 37.9222L153.523 41.1567L155.676 39.0242C155.824 38.8771 156.065 38.8771 156.214 39.0242C156.351 39.16 156.361 39.3737 156.245 39.5215L156.214 39.557L154.061 41.6892L157.326 44.9236L160.591 41.6892L153.523 34.6878ZM149.72 38.4548L146.921 41.2276L147.048 42.2768L149.72 44.9236L152.985 41.6892L149.72 38.4548ZM157.326 30.9202L154.061 34.1547L161.129 41.1567L164.395 37.9222L161.117 34.6753L160.098 35.6903C159.95 35.8378 159.709 35.8383 159.56 35.6916C159.411 35.5448 159.411 35.3063 159.559 35.1588L160.579 34.1427L157.326 30.9202ZM149.72 30.9202L146.105 34.5004L146.806 40.2755L149.182 37.9216L148.136 36.8855L148.104 36.85C147.988 36.7022 147.999 36.4885 148.136 36.3527C148.27 36.2203 148.478 36.207 148.627 36.313L148.674 36.3527L149.72 37.3891L152.985 34.1547L149.72 30.9202ZM164.911 30.8986L161.653 34.141L164.932 37.3891L165.793 36.5365C165.942 36.3894 166.182 36.3894 166.331 36.5365C166.468 36.6723 166.479 36.886 166.363 37.0338L166.331 37.0693L165.47 37.9216L167.846 40.2749L168.546 34.4998L164.911 30.8986ZM155.838 29.0688H151.209L151.399 29.2573L150.258 30.3871L153.523 33.6215L156.788 30.3871L155.648 29.2573L155.838 29.0688ZM163.444 29.0688H158.814L159.005 29.2573L157.864 30.3871L161.116 33.6085L164.373 30.3661L163.254 29.2573L163.444 29.0688ZM148.231 29.0688L145.447 29.069L145.99 33.5494L149.182 30.3877L148.041 29.2573L148.231 29.0688ZM169.205 29.069L166.593 29.0692C166.593 29.1652 166.556 29.2612 166.483 29.3347L165.447 30.365L168.661 33.5489L169.205 29.069ZM150.513 29.0688H148.927L149.72 29.8545L150.513 29.0688ZM158.119 29.0688H156.533L157.326 29.8545L158.119 29.0688ZM165.676 29.0688H164.139L164.91 29.8318L165.676 29.0688Z"
-        fill="#3B5BDB"
-      />
-      <path
-        d="M132.372 11.7393C134.772 11.7393 136.73 13.6217 136.789 15.9719L136.791 16.0824L136.79 72.3274L143.659 72.2195C144.319 72.2092 144.863 72.7308 144.873 73.3847C144.884 74.016 144.393 74.5397 143.765 74.5844L143.697 74.5873L136.79 74.6954L136.791 74.8305C136.791 77.195 134.87 79.1138 132.484 79.1723L132.372 79.1736H51.8381C49.4378 79.1736 47.4805 77.2912 47.4208 74.941L47.4194 74.8305L47.4194 74.5938L35.0075 74.7057C34.3474 74.7117 33.8074 74.1864 33.8014 73.5325C33.7956 72.9011 34.2898 72.3807 34.918 72.3402L34.9858 72.3377L47.4194 72.2257L47.4194 66.1561L49.7013 66.5329V74.8305C49.7013 75.9509 50.6103 76.8686 51.754 76.9117L51.8381 76.9133H132.372C133.526 76.9133 134.463 76.0221 134.507 74.9121L134.509 74.8305L134.508 21.1882H49.7008L49.7013 63.5861L47.4194 63.2093V16.0824C47.4194 13.7179 49.3398 11.7991 51.7259 11.7406L51.8381 11.7393H132.372ZM160.689 72.2195C161.349 72.2118 161.89 72.7357 161.898 73.3896C161.905 74.021 161.413 74.5427 160.784 74.5848L160.717 74.5874L150.482 74.7057C149.822 74.7133 149.281 74.1894 149.273 73.5355C149.265 72.9042 149.758 72.3825 150.386 72.3404L150.454 72.3378L160.689 72.2195ZM28.2594 72.2197C28.9194 72.2047 29.4666 72.7225 29.4818 73.3763C29.4964 74.0075 29.0096 74.5347 28.382 74.5838L28.3142 74.5872L23.1075 74.7055C22.4475 74.7205 21.9002 74.2026 21.8851 73.5489C21.8705 72.9177 22.3573 72.3905 22.9849 72.3414L23.0527 72.338L28.2594 72.2197ZM99.0101 51.6069C99.5383 51.6069 99.9664 52.031 99.9664 52.5542C99.9664 54.3368 98.5343 55.7877 96.7477 55.8399L96.6481 55.8414H87.5851C85.7524 55.8414 84.2667 54.3698 84.2667 52.5542C84.2667 52.031 84.6949 51.6069 85.223 51.6069C85.73 51.6069 86.1449 51.9978 86.1772 52.4919L86.1793 52.5542C86.1793 53.2986 86.7686 53.9064 87.5104 53.9449L87.5851 53.9468H96.6481C97.3995 53.9468 98.0131 53.363 98.0519 52.6282L98.0538 52.5542C98.0538 52.031 98.482 51.6069 99.0101 51.6069ZM83.2558 36.9091C84.8477 36.9091 86.2424 37.9324 86.7856 39.4308C86.964 39.9232 86.7058 40.4657 86.2087 40.6425C85.7316 40.8123 85.2078 40.5833 85.0087 40.1291L84.9856 40.0711C84.709 39.3083 84.0213 38.8037 83.2558 38.8037C82.4903 38.8037 81.8026 39.3083 81.5265 40.0709C81.3481 40.5633 80.8006 40.8193 80.3034 40.6426C79.8063 40.466 79.5479 39.9236 79.7263 39.4311C80.2689 37.9326 81.6637 36.9091 83.2558 36.9091ZM101.489 36.9146C103.23 36.9146 104.785 37.9008 105.409 39.3896C105.611 39.87 105.381 40.4212 104.896 40.6207C104.431 40.812 103.901 40.6109 103.68 40.1711L103.653 40.1123C103.329 39.3398 102.475 38.7982 101.489 38.7982C100.536 38.7982 99.7074 39.3032 99.3597 40.0333L99.3244 40.1123C99.1229 40.5927 98.5665 40.8203 98.0816 40.6207C97.5967 40.4212 97.3669 39.87 97.5684 39.3896C98.1928 37.9009 99.748 36.9146 101.489 36.9146ZM158.093 21.1575C158.72 21.1575 159.228 21.6658 159.228 22.293L159.228 26.8082L171.596 26.8084C172.537 26.8084 173.3 27.571 173.3 28.5116V28.8724C173.3 29.8131 172.537 30.5757 171.596 30.5757H143.058C142.117 30.5757 141.354 29.8131 141.354 28.8724V28.5116C141.354 27.571 142.117 26.8084 143.058 26.8084L155.425 26.8082L155.425 22.293C155.425 21.6658 155.934 21.1575 156.561 21.1575H158.093ZM132.372 13.9996H51.8381C50.6833 13.9996 49.7468 14.8907 49.7029 16.0008L49.7013 16.0824L49.7008 19.7677H134.508L134.509 16.0824C134.509 14.9621 133.6 14.0443 132.456 14.0012L132.372 13.9996ZM55.8307 15.6237L55.9131 15.6272C56.3734 15.6662 56.7412 16.0285 56.7829 16.4846L56.7868 16.5712L56.7833 16.6529C56.7439 17.109 56.3775 17.4728 55.9179 17.514L55.8307 17.5179L55.7482 17.5144C55.2586 17.473 54.8743 17.0666 54.8743 16.5712C54.8743 16.0475 55.3025 15.6237 55.8307 15.6237ZM52.4837 15.6237L52.5661 15.6272C53.0266 15.6662 53.3942 16.0285 53.4358 16.4846L53.4398 16.5712L53.4362 16.6529C53.3969 17.109 53.0308 17.4728 52.5709 17.514L52.4837 17.5179L52.4012 17.5144C51.9119 17.473 51.5276 17.0666 51.5276 16.5712C51.5276 16.0475 51.9558 15.6237 52.4837 15.6237ZM59.1774 15.6237L59.2598 15.6272C59.72 15.6662 60.0878 16.0285 60.1295 16.4846L60.1335 16.5712L60.13 16.6529C60.0905 17.109 59.7242 17.4728 59.2646 17.514L59.1774 17.5179L59.0949 17.5144C58.6053 17.473 58.2213 17.0666 58.2213 16.5712C58.2213 16.0475 58.6491 15.6237 59.1774 15.6237Z"
-        fill="#3B414D"
-      />
+      <g id="Illustration - Cart">
+        <path
+          d="M0 4C0 1.79086 1.79086 0 4 0H184V159H4C1.79086 159 0 157.209 0 155V4Z"
+          fill="#D9DAF9"
+        />
+        <path
+          d="M92.2989 117.448C102.365 117.448 110.525 119.187 110.525 121.332C110.525 123.478 102.365 125.217 92.2989 125.217C82.2323 125.217 74.0714 123.478 74.0714 121.332C74.0715 119.187 82.2324 117.448 92.2989 117.448ZM29.251 89.3598C30.5807 89.3599 31.7073 90.2294 32.0948 91.4301C32.4011 91.2542 32.7563 91.1528 33.1348 91.1528C34.29 91.1528 35.2266 92.0894 35.2266 93.2446C35.2266 94.3997 34.29 95.3364 33.1348 95.3364H25.6651C24.3449 95.3364 23.2745 94.2659 23.2745 92.9457C23.2745 91.6256 24.3449 90.5551 25.6651 90.5551C26.0359 90.5551 26.3871 90.6398 26.7003 90.7905C27.2254 89.9326 28.1715 89.3598 29.251 89.3598ZM151.164 37.3686C154.603 37.3688 157.425 40.0094 157.713 43.3735C158.322 42.9773 159.049 42.7465 159.829 42.7465C161.974 42.7466 163.713 44.486 163.713 46.6313C163.713 48.7766 161.974 50.5159 159.829 50.5161C159.729 50.5161 159.629 50.5118 159.53 50.5043V50.5161H142.199V50.5063C139.863 50.3525 138.016 48.4086 138.016 46.0336C138.016 43.5583 140.023 41.5513 142.498 41.5512C143.349 41.5512 144.145 41.7886 144.823 42.2006C145.587 39.4152 148.136 37.3686 151.164 37.3686ZM73.3389 25.7827C75.118 25.7828 76.6376 26.8936 77.2422 28.4594C77.4201 28.3848 77.6154 28.3432 77.8204 28.3432C78.3451 28.3432 78.8068 28.6142 79.0733 29.0229C79.4188 28.8613 79.8044 28.7709 80.211 28.7709C81.6962 28.7709 82.9005 29.9752 82.9005 31.4604C82.9002 32.8668 81.8202 34.0208 80.4444 34.1391V34.1489H69.0899V34.1391C69.0131 34.1457 68.935 34.1489 68.8565 34.1489C67.3714 34.1489 66.1673 32.9454 66.1671 31.4604C66.1671 29.9752 67.3713 28.7709 68.8565 28.7709C69.0133 28.7709 69.167 28.7842 69.3165 28.81C69.818 27.0619 71.4296 25.7827 73.3389 25.7827Z"
+          fill="#A99DD2"
+        />
+        <path
+          d="M53.7528 64.2609H130.845V110.277C130.845 110.937 130.31 111.472 129.65 111.472H54.948C54.2879 111.472 53.7528 110.937 53.7528 110.277V64.2609Z"
+          fill="white"
+        />
+        <path
+          d="M51.96 55.6252C51.96 53.7935 53.4449 52.3087 55.2765 52.3087H129.321C131.153 52.3087 132.638 53.7935 132.638 55.6252V64.2609H51.96V55.6252Z"
+          fill="#E5E7EC"
+        />
+        <path
+          d="M66.3027 58.2835C66.3027 58.9429 65.7676 59.4774 65.1075 59.4774C64.4474 59.4774 63.9122 58.9429 63.9122 58.2835C63.9122 57.6241 64.4474 57.0895 65.1075 57.0895C65.7676 57.0895 66.3027 57.6241 66.3027 58.2835Z"
+          fill="#292A33"
+        />
+        <path
+          d="M62.717 58.2835C62.717 58.9429 62.1819 59.4774 61.5218 59.4774C60.8617 59.4774 60.3266 58.9429 60.3266 58.2835C60.3266 57.6241 60.8617 57.0895 61.5218 57.0895C62.1819 57.0895 62.717 57.6241 62.717 58.2835Z"
+          fill="#292A33"
+        />
+        <path
+          d="M59.1313 58.2835C59.1313 58.9429 58.5962 59.4774 57.9361 59.4774C57.276 59.4774 56.7409 58.9429 56.7409 58.2835C56.7409 57.6241 57.276 57.0895 57.9361 57.0895C58.5962 57.0895 59.1313 57.6241 59.1313 58.2835Z"
+          fill="#292A33"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M129.65 54.1015H54.9481C54.2879 54.1015 53.7528 54.6366 53.7528 55.2967V110.277C53.7528 110.937 54.2879 111.472 54.948 111.472H129.65C130.31 111.472 130.845 110.937 130.845 110.277V55.2967C130.845 54.6366 130.31 54.1015 129.65 54.1015ZM54.9481 52.3087C53.2978 52.3087 51.96 53.6465 51.96 55.2967V110.277C51.96 111.927 53.2978 113.265 54.948 113.265H129.65C131.3 113.265 132.638 111.927 132.638 110.277V55.2967C132.638 53.6465 131.3 52.3087 129.65 52.3087H54.9481Z"
+          fill="#292A33"
+        />
+        <path
+          d="M156.542 106.094C156.542 105.434 157.077 104.899 157.737 104.899H167.897C168.557 104.899 169.092 105.434 169.092 106.094C169.092 106.754 168.557 107.289 167.897 107.289H157.737C157.077 107.289 156.542 106.754 156.542 106.094Z"
+          fill="#292A33"
+        />
+        <path
+          d="M132.638 104.899H152.244C152.909 104.899 153.449 105.438 153.449 106.104C153.449 106.77 152.909 107.309 152.244 107.309H132.638V104.899Z"
+          fill="#292A33"
+        />
+        <path
+          d="M35.2269 106.094C35.2269 105.434 35.762 104.899 36.4221 104.899H51.96V107.289H36.4221C35.762 107.289 35.2269 106.754 35.2269 106.094Z"
+          fill="#292A33"
+        />
+        <path
+          d="M25.0675 106.094C25.0675 105.434 25.6026 104.899 26.2627 104.899H31.0436C31.7037 104.899 32.2388 105.434 32.2388 106.094C32.2388 106.754 31.7037 107.289 31.0436 107.289H26.2627C25.6026 107.289 25.0675 106.754 25.0675 106.094Z"
+          fill="#292A33"
+        />
+        <path
+          d="M51.9601 62.4676H132.638V64.2604H51.9601V62.4676Z"
+          fill="#292A33"
+        />
+        <path
+          d="M90.8047 120.727C90.8047 121.226 90.3999 121.632 89.9004 121.632H84.8291C84.1691 121.632 83.6339 121.097 83.6338 120.437C83.6338 119.777 84.169 119.242 84.8291 119.242H88.4141V113.265H90.8047V120.727ZM96.1836 119.242H99.7686C100.429 119.242 100.964 119.777 100.964 120.437C100.964 121.097 100.429 121.632 99.7686 121.632H94.6973C94.1978 121.632 93.793 121.226 93.793 120.727V113.265H96.1836V119.242ZM141.655 100.661C141.271 101.046 140.676 101.126 140.204 100.856L132.638 96.5316V93.5433L140.796 98.2054C140.918 98.275 141.072 98.251 141.167 98.1478L148.176 90.556H146.383C145.723 90.556 145.188 90.0206 145.188 89.3607C145.188 88.7006 145.723 88.1653 146.383 88.1653H155.944C156.604 88.1653 157.14 88.7006 157.14 89.3607C157.139 90.0206 156.604 90.556 155.944 90.556H151.761L141.655 100.661Z"
+          fill="#6145F7"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M101.263 79.9553C100.228 79.9553 99.4816 80.5571 99.2985 81.2006C99.1846 81.601 98.7676 81.8333 98.3672 81.7193C97.9668 81.6054 97.7346 81.1884 97.8486 80.7881C98.2508 79.3743 99.6905 78.4478 101.263 78.4478C102.835 78.4478 104.275 79.3743 104.677 80.7881C104.791 81.1884 104.559 81.6054 104.158 81.7193C103.758 81.8333 103.341 81.601 103.227 81.2006C103.044 80.5571 102.298 79.9553 101.263 79.9553Z"
+          fill="#292A33"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M84.5299 79.9553C83.495 79.9553 82.7487 80.5571 82.5656 81.2006C82.4517 81.601 82.0347 81.8333 81.6343 81.7193C81.2339 81.6054 81.0017 81.1884 81.1156 80.7881C81.5179 79.3743 82.9576 78.4478 84.5299 78.4478C86.1022 78.4478 87.5418 79.3743 87.9441 80.7881C88.058 81.1884 87.8258 81.6054 87.4254 81.7193C87.025 81.8333 86.6081 81.601 86.4941 81.2006C86.311 80.5571 85.5647 79.9553 84.5299 79.9553Z"
+          fill="#292A33"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M85.4261 90.4004C85.8424 90.4004 86.1799 90.7379 86.1799 91.1541C86.1799 92.0581 86.9127 92.7908 87.8166 92.7908H96.7807C97.6847 92.7908 98.4174 92.0581 98.4174 91.1541C98.4174 90.7379 98.7549 90.4004 99.1712 90.4004C99.5875 90.4004 99.9249 90.7379 99.9249 91.1541C99.9249 92.8906 98.5172 94.2984 96.7807 94.2984H87.8166C86.0801 94.2984 84.6724 92.8906 84.6724 91.1541C84.6724 90.7379 85.0098 90.4004 85.4261 90.4004Z"
+          fill="#292A33"
+        />
+        <path
+          d="M51.9593 96.5307V93.5426L41.5712 101.457C40.7439 102.088 41.0607 103.401 42.0844 103.584L62.7163 107.288V104.897L44.7879 101.909L51.9593 96.5307Z"
+          fill="#6145F7"
+        />
+        <path
+          d="M65.7042 101.909H66.8995C67.5596 101.909 68.0947 102.444 68.0947 103.104C68.0947 103.765 67.5596 104.3 66.8995 104.3H66.3018C65.3117 104.3 64.509 105.102 64.509 106.092C64.509 107.083 65.3117 107.885 66.3018 107.885H68.6923C69.3524 107.885 69.8875 108.42 69.8875 109.081C69.8875 109.741 69.3524 110.276 68.6923 110.276H65.7042C63.7239 110.276 62.1186 108.67 62.1186 106.69V105.495C62.1186 103.515 63.7239 101.909 65.7042 101.909Z"
+          fill="#6145F7"
+        />
+        <path
+          d="M25.8391 56.536C29.2503 56.5361 32.0497 59.1416 32.3489 62.4657C33.032 61.9232 33.897 61.5985 34.8381 61.5985C37.047 61.5985 38.8379 63.3841 38.8381 65.5868C38.8381 67.7897 37.0471 69.576 34.8381 69.576C34.7868 69.576 34.7357 69.5741 34.6848 69.5721V69.576H16.8391V69.5741C16.8138 69.5745 16.7884 69.576 16.7629 69.576C14.1718 69.576 12.0708 67.4813 12.0706 64.8973C12.0706 62.3132 14.1716 60.2177 16.7629 60.2177C17.8215 60.2177 18.7983 60.5674 19.5833 61.1571C20.3985 58.4825 22.8907 56.536 25.8391 56.536Z"
+          fill="#A99DD2"
+        />
+        <path
+          d="M161.517 66.3366C162.711 66.3366 163.678 67.304 163.678 68.4974C163.678 68.5844 163.673 68.6712 163.662 68.7576L161.795 84.1507C161.664 85.2355 160.743 86.0513 159.65 86.0513H140.761C139.669 86.0513 138.748 85.2355 138.616 84.1507L136.749 68.7576C136.605 67.5729 137.449 66.496 138.634 66.3523C138.72 66.3419 138.807 66.3366 138.894 66.3366H161.517Z"
+          fill="#B4B3F4"
+        />
+        <path
+          d="M162.324 66.3367C163.124 66.3367 163.772 66.9786 163.772 67.7705C163.772 67.8276 163.768 67.8848 163.761 67.9415L161.718 84.7886C161.63 85.5091 161.013 86.0513 160.281 86.0513H140.131C139.398 86.0513 138.781 85.5091 138.694 84.7886L136.65 67.9415C136.555 67.1553 137.121 66.4414 137.915 66.3469C137.972 66.3401 138.029 66.3367 138.087 66.3367H162.324ZM140.567 82.2066L140.772 83.9006L142.276 83.9006L140.567 82.2066ZM146.587 81.0019L143.66 83.9006H149.513L146.587 81.0019ZM153.824 81.0019L150.898 83.9006H156.75L153.824 81.0019ZM159.844 82.2076L158.135 83.9006L159.639 83.9006L159.844 82.2076ZM157.443 77.4177L154.336 80.4952L157.442 83.5727L159.984 81.0549L160.105 80.0555L157.443 77.4177ZM146.587 73.8335L143.481 76.911L146.587 79.9885L148.635 77.9595C148.777 77.8195 149.006 77.8195 149.147 77.9595C149.278 78.0887 149.288 78.2921 149.177 78.4327L149.147 78.4664L147.098 80.4952L150.205 83.5727L153.312 80.4952L146.587 73.8335ZM142.969 77.4177L140.306 80.056L140.427 81.0543L142.968 83.5727L146.075 80.4952L142.969 77.4177ZM150.206 70.2488L147.099 73.3263L153.824 79.9885L156.931 76.911L153.812 73.8216L152.843 74.7874C152.702 74.9277 152.473 74.9283 152.331 74.7886C152.19 74.649 152.189 74.422 152.33 74.2817L153.301 73.3149L150.206 70.2488ZM142.968 70.2488L139.529 73.6553L140.196 79.1501L142.457 76.9105L141.461 75.9246L141.431 75.8908C141.321 75.7502 141.331 75.5469 141.461 75.4177C141.589 75.2917 141.787 75.2791 141.928 75.3799L141.973 75.4177L142.968 76.4038L146.075 73.3263L142.968 70.2488ZM157.422 70.2282L154.323 73.3133L157.443 76.4038L158.262 75.5926C158.403 75.4526 158.632 75.4526 158.774 75.5926C158.904 75.7218 158.914 75.9251 158.804 76.0657L158.774 76.0995L157.954 76.9105L160.215 79.1496L160.881 73.6547L157.422 70.2282ZM148.789 68.4872H144.385L144.566 68.6666L143.481 69.7415L146.587 72.819L149.694 69.7415L148.608 68.6666L148.789 68.4872ZM156.026 68.4872H151.622L151.803 68.6666L150.717 69.7415L153.811 72.8066L156.911 69.7215L155.845 68.6666L156.026 68.4872ZM141.552 68.4872L138.903 68.4874L139.42 72.7504L142.457 69.7421L141.371 68.6666L141.552 68.4872ZM161.508 68.4874L159.023 68.4876C159.023 68.5789 158.988 68.6703 158.918 68.7402L157.933 69.7205L160.991 72.7499L161.508 68.4874ZM143.723 68.4872H142.214L142.968 69.2348L143.723 68.4872ZM150.96 68.4872H149.451L150.205 69.2348L150.96 68.4872ZM158.15 68.4872H156.688L157.421 69.2132L158.15 68.4872Z"
+          fill="#6145F7"
+        />
+        <path
+          d="M150.935 60.96C151.531 60.96 152.015 61.4437 152.015 62.0404L152.015 66.3365L163.783 66.3367C164.678 66.3367 165.403 67.0622 165.403 67.9573V68.3006C165.403 69.1956 164.678 69.9212 163.783 69.9212H136.629C135.734 69.9212 135.008 69.1956 135.008 68.3006V67.9573C135.008 67.0622 135.734 66.3367 136.629 66.3367L148.396 66.3365L148.396 62.0404C148.396 61.4437 148.88 60.96 149.477 60.96H150.935Z"
+          fill="#292A33"
+        />
+      </g>
     </svg>
   );
 };

package/src/components/atoms/icons/IconAdd.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-const IconAdd = ({ strokeWidth = 1 }) => (
+const IconAdd = ({ stroke = "none", strokeWidth = 1 }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
@@ -15,7 +15,7 @@ const IconAdd = ({ strokeWidth = 1 }) => (
         d="M7.91666623 4.78508747L4.78508747 4.78508747 4.78508747 7.91666623 3.74122788 7.91666623 3.74122788 4.78508747 0.609649123 4.78508747 0.609649123 3.74122788 3.74122788 3.74122788 3.74122788 0.609649123 4.78508747 0.609649123 4.78508747 3.74122788 7.91666623 3.74122788z"
       ></path>
     </defs>
-    <g fill="none" fillRule="evenodd" stroke="none" strokeWidth={strokeWidth}>
+    <g fill="none" fillRule="evenodd" stroke={stroke} strokeWidth={strokeWidth}>
       <g transform="translate(-407 -563)">
         <g transform="translate(408 562)">
           <g transform="translate(0 2)">

package/src/components/atoms/icons/Icons.mdx

@@ -0,0 +1,40 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as IconsStories from './Icons.stories.js';
+
+<Meta of={IconsStories} />
+
+<Title />
+
+The icons folder contains a variety of components which render SVGs, ranging from simple icons to large graphics.
+
+## Theming
+
+Some of the icon components are themeable through the `themeValues` object prop. The properties used from the `themeValues` vary between components.
+
+### Variants
+
+Some icons support variants from themes, including `info`, `success`, and `error`.
+
+## Props
+
+Many icon components make use of additional props:
+
+<Controls />
+
+## Additional Props
+
+The following components will pass along _all_ other props to their wrapping elements via the spread operator: `EmptyCartIconV2`, `CloseIcon`, `MultiCartIcon`.
+
+## IconAdd Styling
+
+`IconAdd` needs color values set in CSS in order to display:
+
+```
+.fill { fill: #000 }
+.stroke { stroke: #000 }
+```
+
+## ExternalLinkIcon
+
+`ExternalLinkIcon` must be passed a value for `linkColor` in order to be visible.

package/src/components/atoms/icons/Icons.stories.js

@@ -0,0 +1,343 @@
+import React from "react";
+import * as icons from "./index";
+import styled from "styled-components";
+import { MANATEE_GREY } from "../../../constants/colors";
+
+const meta = {
+  title: "Atoms/Icons",
+  component: icons.AccountsIcon,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    ariaLabel: undefined,
+    color: undefined,
+    colorOverride: undefined,
+    fill: undefined,
+    height: undefined,
+    iconFill: undefined,
+    iconHeight: undefined,
+    iconIndex: undefined,
+    iconWidth: undefined,
+    labelledBy: undefined,
+    linkColor: undefined,
+    strokeWidth: undefined,
+    text: undefined,
+    title: undefined,
+    titleID: undefined
+  },
+  argTypes: {
+    ariaLabel: {
+      description: "Sets the `aria-label` value on the `PencilIcon` icon",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "Edit" }
+      }
+    },
+    color: {
+      description:
+        "Sets a color (usually for a `fill` attribute) on one or many elements within a component. The default value for this prop varies by component. Used in the following componenets: `ArrowDownCircleIconSmall`, `ArrowLeftCircleIconMedium`, `ArrowLeftCircleIconSmall`, `ArrowRightCircleIconSmall`, `ArrowUpCircleIconSmall`, `AutopayOnIcon`, `ChargebackIconMedium`, `ChargebackIconSmall`, `ChargebackReversalIconMedium`, `ChargebackReversalIconSmall`, `RefundIconMedium`, `RefundIconSmall`, `XCircleIconMedium`, `XCircleIconSmall`, `AutopayIcon`, `ArrowRightIcon`, `PlusCircleIcon`, `WarningIconXS`, `EmptyCartIconV2`",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: `varies` }
+      }
+    },
+    colorOverride: {
+      description:
+        "Overrides the theme values for some element's fill attribute in the `WalletIconSmall` component",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    fill: {
+      description:
+        "Sets the fill attribute in the following components: `AutopayIcon`, `IconQuitLarge`, `PendingIcon`",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: `varies` }
+      }
+    },
+    height: {
+      description:
+        "Sets the `height` value in the `style` attribute for the `EmptyCartIconV2` component",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "auto" }
+      }
+    },
+    iconFill: {
+      description:
+        "Sets the fill attribute in the following components: `ChevronIcon`, `TrashIcon`, `TrashIconV2`, `CloseIcon`, `MultiCartIcon`",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: `varies` }
+      }
+    },
+    iconHeight: {
+      description:
+        "Sets the height of the `CloseIcon` and `MultiCartIcon` icons",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: `varies` }
+      }
+    },
+    iconIndex: {
+      description:
+        "Used to create a unique id for a variety of elements in the following components: `BankIconLarge`, `SuccessfulIconMedium`, `SuccessfulIconSmall`, `WarningIconXS`, `XCircleIconSmall`, `XCircleIconMedium`, `RefundIconSmall`, `RefundIconMedium`, `ChargebackReversalIconSmall`, `ChargebackReversalIconMedium`, `ChargebackIconSmall`, `ChargebackIconMedium`, `AutopayOnIcon`, `ArrowUpCircleIconSmall`, `ArrowRightCircleIconSmall`, `ArrowLeftCircleIconSmall`, `ArrowLeftCircleIconMedium`, `ArrowDownCircleIconSmall`, `WalletIconSmall`, `FindIconSmall`",
+      table: {
+        type: { summary: "string | number" },
+        defaultValue: { summary: 0 }
+      }
+    },
+    iconWidth: {
+      description:
+        "Sets the width of the `CloseIcon` and `MultiCartIcon` icons",
+      table: {
+        type: { summary: "string | number" },
+        defaultValue: { summary: `varies` }
+      }
+    },
+    labelledBy: {
+      description:
+        "Sets the `aria-labelledby` value in the following components: `ArrowRightIcon`, `PlusCircleIcon`",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    linkColor: {
+      description:
+        "Sets the fill attribute on multiple elements in the `ExternalLinkIcon` component",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    strokeWidth: {
+      description: "Set the stroke width on the circle in `IconAdd`",
+      table: {
+        type: { summary: "string | number" },
+        defaultValue: { summary: 1 }
+      }
+    },
+    text: {
+      description:
+        "Used to create a unique id for a `<mask />` element in `ExternalLinkIcon`",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    title: {
+      description:
+        "Sets the text of the `<title />` element in the `WarningIconXS` component",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    titleID: {
+      description:
+        "Used to build a unique id for the `<title />` element in the `WarningIconXS` component, which is matched with the `aria-labelledby` value",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "warning-icon-title" }
+      }
+    }
+  }
+};
+
+const StyledIconList = styled.ul`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 2em;
+  list-style: none;
+
+  li {
+    padding-bottom: 2em;
+    text-align: center;
+    width: 100%;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid ${MANATEE_GREY};
+    }
+  }
+
+  .icon-name {
+    margin-top: 1em;
+    font-family: monospace
+    font-size: 2em;
+  }
+
+  // for the IconAdd component
+  .fill { fill: ${MANATEE_GREY} }
+  .stroke { stroke: ${MANATEE_GREY} }
+`;
+
+const IconList = ({ iconNames }) => (
+  <StyledIconList>
+    {iconNames.map(icon => {
+      const IconComponent = icons[icon];
+      if (!IconComponent) {
+        console.warn(`No icon found for ${icon}`);
+      }
+      return (
+        IconComponent && (
+          <li key={icon} style={{ textAlign: "center", paddingBottom: "2em" }}>
+            <IconComponent linkColor={MANATEE_GREY} />
+            <div className="icon-name">{icon}</div>
+          </li>
+        )
+      );
+    })}
+  </StyledIconList>
+);
+
+const genericIcons = [
+  "DuplicateIcon",
+  "CalendarIcon",
+  "PendingIcon",
+  "StatusUnknownIcon",
+  "FailedIcon",
+  "ErroredIcon",
+  "SuccessfulIcon",
+  "SuccessfulIconMedium",
+  "SuccessfulIconSmall",
+  "VoidedIcon",
+  "XCircleIconMedium",
+  "XCircleIconSmall",
+  "ProfileIconSmall",
+  "SearchIcon",
+  "FindIconSmall",
+  "PencilIcon",
+  "AccountsIconSmall",
+  "TrashIcon",
+  "TrashIconV2",
+  "SettingsIconSmall",
+  "ShoppingCartIcon",
+  "PlusCircleIcon",
+  "IconAdd",
+  "ExternalLinkIcon",
+  "AutopayIcon",
+  "AutopayOnIcon",
+  "CloseIcon",
+  "IconQuitLarge",
+  "WarningIconXS",
+  "KebabMenuIcon",
+  "MultiCartIcon",
+  "EmptyCartIconV2",
+  "CheckmarkIcon"
+];
+
+const arrowIcons = [
+  "AchReturnIcon",
+  "RejectedIcon",
+  "RejectedVelocityIcon",
+  "ArrowDownCircleIconSmall",
+  "ArrowLeftCircleIconMedium",
+  "ArrowLeftCircleIconSmall",
+  "ArrowRightCircleIconSmall",
+  "ArrowUpCircleIconSmall",
+  "ArrowRightIcon",
+  "ChevronIcon",
+  "CarrotIcon"
+];
+
+const paymentIcons = [
+  "BankIcon",
+  "BankIconLarge",
+  "CashIcon",
+  "ChargebackIcon",
+  "ChargebackIconMedium",
+  "ChargebackIconSmall",
+  "ChargebackReversalIcon",
+  "ChargebackReversalIconMedium",
+  "ChargebackReversalIconSmall",
+  "CheckIcon",
+  "GenericCard",
+  "GenericCardLarge",
+  "PaymentMethodAddIcon",
+  "PaymentMethodIcon",
+  "PaymentsIconSmall",
+  "RefundIcon",
+  "RefundIconMedium",
+  "RefundIconSmall",
+  "VisaSmallIcon",
+  "AmExSmallIcon",
+  "BankGenericSmallIcon",
+  "CashSmallIcon",
+  "DiscoverSmallIcon",
+  "GenericSmallIcon",
+  "MasterCardSmallIcon",
+  "WireSmallIcon"
+];
+
+const checkIcons = ["RoutingNumberImage", "AccountNumberImage"];
+
+const accountIcons = [
+  "AccountsAddIcon",
+  "AccountsIcon",
+  "DisabledAccountsAddIcon",
+  "DisabledPaymentMethodsAddIcon",
+  "ForgotPasswordIcon",
+  "GoToEmailIcon",
+  "ResetPasswordIcon",
+  "VerifiedEmailIcon"
+];
+
+const mascotIcons = [
+  "CustomerSearchIcon",
+  "EmptyCartIcon",
+  "GenericErrorIcon",
+  "NoCustomerResultsIcon",
+  "NoPaymentResultsIcon",
+  "NotFoundIcon",
+  "PaymentSearchIcon",
+  "PeriscopeFailedIcon",
+  "ProfileIcon",
+  "TimeoutImage",
+  "WalletIcon",
+  "GuidedCheckoutImage",
+  "KioskImage",
+  "CashieringImage",
+  "RevenueManagementImage",
+  "ProfileImage",
+  "StandardCheckoutImage",
+  "WalletBannerIcon",
+  "PaydotImage"
+];
+
+export const GenericIcons = () => <IconList iconNames={genericIcons} />;
+
+export const ArrowIcons = () => <IconList iconNames={arrowIcons} />;
+
+export const PaymentIcons = () => <IconList iconNames={paymentIcons} />;
+
+export const CheckIcons = () => <IconList iconNames={checkIcons} />;
+
+export const AccountIcons = () => <IconList iconNames={accountIcons} />;
+
+export const MascotIcons = () => <IconList iconNames={mascotIcons} />;
+
+export const OtherIcons = {
+  render: () => {
+    const groupedIcons = [
+      ...checkIcons,
+      ...mascotIcons,
+      ...arrowIcons,
+      ...genericIcons,
+      ...accountIcons,
+      ...paymentIcons
+    ];
+    const otherIcons = Object.keys(icons).filter(
+      icon => !groupedIcons.includes(icon)
+    );
+
+    return <IconList iconNames={otherIcons} />;
+  }
+};
+
+export default meta;