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

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

@@ -0,0 +1,27 @@
+import React from "react";
+
+const ReversalNeededIcon = () => (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="16" cy="16" r="16" fill="#D11053" />
+    <path
+      d="M14.4167 14.2222H13.5833C13.4453 14.2222 13.3333 14.1103 13.3333 13.9722V11.6667C13.3333 11.1144 13.781 10.6667 14.3333 10.6667H23C23.5523 10.6667 24 11.1144 24 11.6667V20.3333C24 20.8856 23.5523 21.3333 23 21.3333H14.3333C13.781 21.3333 13.3333 20.8856 13.3333 20.3333V18.0278C13.3333 17.8897 13.4453 17.7778 13.5833 17.7778H14.4167C14.5547 17.7778 14.6667 17.8897 14.6667 18.0278V20H22.6667V11.8518H14.6667V13.9722C14.6667 14.1103 14.5547 14.2222 14.4167 14.2222Z"
+      fill="white"
+    />
+    <path
+      d="M9.8706 11.4627L5.51011 15.8232C5.41248 15.9209 5.41248 16.0791 5.51011 16.1768L9.8706 20.5373C9.96823 20.6349 10.1265 20.6349 10.2242 20.5373L10.8134 19.948C10.911 19.8504 10.911 19.6921 10.8134 19.5945L7.39573 16.1768C7.2981 16.0791 7.2981 15.9209 7.39573 15.8232L10.8134 12.4055C10.911 12.3079 10.911 12.1496 10.8134 12.052L10.2242 11.4627C10.1265 11.3651 9.96823 11.3651 9.8706 11.4627Z"
+      fill="white"
+    />
+    <path
+      d="M6.66667 15.5833C6.66667 15.4453 6.7786 15.3333 6.91667 15.3333L18.4167 15.3333C18.5547 15.3333 18.6667 15.4453 18.6667 15.5833L18.6667 16.4167C18.6667 16.5547 18.5547 16.6667 18.4167 16.6667L6.91667 16.6667C6.7786 16.6667 6.66667 16.5547 6.66667 16.4167L6.66667 15.5833Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export default ReversalNeededIcon;

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

@@ -1,7 +1,8 @@
 import React from "react";
+import { CHARADE_GREY } from "../../../constants/colors";
 
-const SearchIcon = () => (
-  <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1">
+const SearchIcon = ({ color = CHARADE_GREY, size = "22px" }) => (
+  <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} version="1.1">
     <g
       id="Debt-Search"
       stroke="none"
@@ -12,7 +13,7 @@ const SearchIcon = () => (
       <g
         id="Debt-Search---Expanded"
         transform="translate(-155.000000, -258.000000)"
-        stroke="#292A33"
+        stroke={color}
         strokeWidth="2"
       >
         <g id="debt-search" transform="translate(132.000000, 189.000000)">

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

@@ -0,0 +1,21 @@
+import React from "react";
+
+const ShortageIcon = () => (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="16" cy="16" r="16" fill="#D11053" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.3333 9.83331C11.3333 9.55717 11.5572 9.33331 11.8333 9.33331H20.1667C20.4428 9.33331 20.6667 9.55717 20.6667 9.83331V10.8333C20.6667 11.1095 20.4428 11.3333 20.1667 11.3333H17V21.3709L20.8319 17.539C21.0272 17.3437 21.3437 17.3437 21.539 17.539L22.2461 18.2461C22.4414 18.4414 22.4414 18.7579 22.2461 18.9532L16.3535 24.8458C16.1583 25.041 15.8417 25.041 15.6464 24.8458L9.75388 18.9532C9.55862 18.7579 9.55862 18.4414 9.75388 18.2461L10.461 17.539C10.6563 17.3437 10.9728 17.3437 11.1681 17.539L15 21.3709V11.3333H11.8333C11.5572 11.3333 11.3333 11.1095 11.3333 10.8333V9.83331Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export default ShortageIcon;

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

@@ -3,367 +3,136 @@ import React from "react";
 const StandardCheckoutImage = () => {
   return (
     <svg
-      width="191"
-      height="96"
-      viewBox="0 0 191 96"
+      width="184"
+      height="170"
+      viewBox="0 0 184 170"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12.9545 28.1101C12.9276 28.1105 12.9007 28.1107 12.8736 28.1107C10.1502 28.1107 7.94238 25.909 7.94238 23.1931C7.94238 20.4771 10.1502 18.2754 12.8736 18.2754C13.9861 18.2754 15.0124 18.6427 15.8375 19.2624C16.6943 16.4514 19.3141 14.4058 22.4129 14.4058C25.9975 14.4058 28.9411 17.1431 29.2564 20.636C29.9741 20.0667 30.8828 19.7265 31.8711 19.7265C34.1928 19.7265 36.0748 21.6034 36.0748 23.9186C36.0748 26.2338 34.1928 28.1107 31.8711 28.1107C31.817 28.1107 31.7631 28.1097 31.7095 28.1077V28.111H12.9545V28.1101Z"
-        fill="#B6C3F1"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M17.5877 59.7212C17.5746 59.7214 17.5614 59.7215 17.5482 59.7215C16.2186 59.7215 15.1406 58.6466 15.1406 57.3206C15.1406 55.9945 16.2186 54.9196 17.5482 54.9196C18.0914 54.9196 18.5925 55.0989 18.9953 55.4014C19.4136 54.029 20.6927 53.0303 22.2056 53.0303C23.9559 53.0303 25.3931 54.3669 25.5469 56.0724C25.8973 55.7944 26.341 55.6283 26.8235 55.6283C27.957 55.6283 28.8759 56.5447 28.8759 57.6751C28.8759 58.8054 27.957 59.7218 26.8235 59.7218C26.7971 59.7218 26.7708 59.7213 26.7446 59.7203V59.7217H17.5877V59.7212Z"
-        fill="#B6C3F1"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M151.253 16.466C151.171 16.4729 151.088 16.4765 151.004 16.4765C149.405 16.4765 148.108 15.1835 148.108 13.5885C148.108 11.9935 149.405 10.7005 151.004 10.7005C151.199 10.7005 151.39 10.7197 151.574 10.7563C152.095 8.82294 153.865 7.3999 155.969 7.3999C157.928 7.3999 159.598 8.63467 160.239 10.3665C160.449 10.2635 160.684 10.2057 160.933 10.2057C161.519 10.2057 162.029 10.5246 162.3 10.9978C162.686 10.8074 163.121 10.7005 163.581 10.7005C165.181 10.7005 166.477 11.9935 166.477 13.5885C166.477 15.1835 165.181 16.4765 163.581 16.4765C163.554 16.4765 163.526 16.4761 163.499 16.4753V16.4765H151.253V16.466Z"
-        fill="#B6C3F1"
-      />
-      <ellipse
-        cx="91.9267"
-        cy="87.1911"
-        rx="19.5273"
-        ry="4.12571"
-        fill="#B6C3F1"
-      />
-      <path
-        d="M49.2305 21.9741H134.621V70.2083C134.621 73.9369 131.598 76.9595 127.87 76.9595H55.9817C52.2531 76.9595 49.2305 73.9369 49.2305 70.2083V21.9741Z"
-        fill="white"
-      />
-      <path
-        d="M47.5762 21.9738C47.5762 16.4312 52.0694 11.938 57.612 11.938H126.24C131.783 11.938 136.276 16.4312 136.276 21.9738V21.9738H47.5762V21.9738Z"
-        fill="#B6C3F1"
-      />
-      <ellipse
-        cx="62.0555"
-        cy="16.956"
-        rx="1.24102"
-        ry="1.23771"
-        fill="#292A33"
-      />
-      <ellipse
-        cx="57.9188"
-        cy="16.956"
-        rx="1.24102"
-        ry="1.23771"
-        fill="#292A33"
-      />
-      <ellipse
-        cx="53.782"
-        cy="16.956"
-        rx="1.24102"
-        ry="1.23771"
-        fill="#292A33"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M131.359 14.1685H52.4938C51.0124 14.1685 49.8115 15.3668 49.8115 16.8451V73.7024C49.8115 75.1807 51.0124 76.379 52.4938 76.379H131.359C132.84 76.379 134.041 75.1807 134.041 73.7024V16.8451C134.041 15.3668 132.84 14.1685 131.359 14.1685ZM52.4938 11.938C49.7779 11.938 47.5762 14.135 47.5762 16.8451V73.7024C47.5762 76.4125 49.7779 78.6095 52.4938 78.6095H131.359C134.075 78.6095 136.276 76.4125 136.276 73.7024V16.8451C136.276 14.135 134.075 11.938 131.359 11.938H52.4938Z"
-        fill="#292A33"
-      />
-      <rect
-        x="163.085"
-        y="70.0283"
-        width="12.5769"
-        height="2.64072"
-        rx="1.32036"
-        fill="#292A33"
-      />
-      <path
-        d="M136.276 70.0283H157.793C158.522 70.0283 159.113 70.6195 159.113 71.3487V71.3487C159.113 72.0779 158.522 72.669 157.793 72.669H136.276V70.0283Z"
-        fill="#292A33"
-      />
-      <path
-        d="M29.373 71.3487C29.373 70.6195 29.9642 70.0283 30.6934 70.0283H47.5764V72.669H30.6934C29.9642 72.669 29.373 72.0779 29.373 71.3487V71.3487Z"
-        fill="#292A33"
-      />
-      <rect
-        x="17.9541"
-        y="70.0283"
-        width="8.10877"
-        height="2.64072"
-        rx="1.32036"
-        fill="#292A33"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M104.197 37.9328C103.47 37.9328 102.811 38.4623 102.629 39.2477C102.503 39.7935 101.957 40.134 101.41 40.0082C100.863 39.8824 100.522 39.3379 100.648 38.7921C101.024 37.1661 102.444 35.9043 104.197 35.9043C105.951 35.9043 107.37 37.1661 107.746 38.7921C107.872 39.3379 107.531 39.8824 106.984 40.0082C106.437 40.134 105.891 39.7935 105.765 39.2477C105.584 38.4623 104.924 37.9328 104.197 37.9328Z"
-        fill="#292A33"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M82.5253 37.9328C81.7984 37.9328 81.1387 38.4623 80.9573 39.2477C80.8312 39.7935 80.2856 40.134 79.7386 40.0082C79.1916 39.8824 78.8503 39.3379 78.9764 38.7921C79.3519 37.1661 80.7718 35.9043 82.5253 35.9043C84.2788 35.9043 85.6986 37.1661 86.0741 38.7921C86.2002 39.3379 85.859 39.8824 85.312 40.0082C84.765 40.134 84.2193 39.7935 84.0933 39.2477C83.9119 38.4623 83.2521 37.9328 82.5253 37.9328Z"
-        fill="#292A33"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M86.8895 50.9126C87.4508 50.9126 87.9059 51.3667 87.9059 51.9268C87.9059 52.7759 88.5957 53.4642 89.4466 53.4642H97.275C98.1259 53.4642 98.8157 52.7759 98.8157 51.9268C98.8157 51.3667 99.2708 50.9126 99.8321 50.9126C100.393 50.9126 100.849 51.3667 100.849 51.9268C100.849 53.8962 99.2486 55.4927 97.275 55.4927H89.4466C87.473 55.4927 85.873 53.8962 85.873 51.9268C85.873 51.3667 86.3281 50.9126 86.8895 50.9126Z"
-        fill="#292A33"
-      />
-      <rect
-        x="47.5762"
-        y="20.3237"
-        width="88.7001"
-        height="1.65045"
-        fill="#292A33"
-      />
-      <g filter="url(#filter0_d_2902_16320)">
+      <g id="Illustration - Standard Checkout">
         <path
-          d="M136.276 20.1899H169.341C171.826 20.1899 173.842 22.205 173.842 24.6907V24.9307C173.842 27.4165 171.826 29.4315 169.341 29.4315H136.276V20.1899Z"
+          d="M0 4C0 1.79086 1.79086 0 4 0H184V191H4C1.79086 191 0 189.209 0 187V4Z"
+          fill="#D9DAF9"
+        />
+        <path
+          d="M92.2989 133.448C102.365 133.448 110.525 135.187 110.525 137.332C110.525 139.478 102.365 141.217 92.2989 141.217C82.2323 141.217 74.0714 139.478 74.0714 137.332C74.0715 135.187 82.2324 133.448 92.2989 133.448ZM29.251 105.36C30.5807 105.36 31.7073 106.229 32.0948 107.43C32.4011 107.254 32.7563 107.153 33.1348 107.153C34.29 107.153 35.2266 108.089 35.2266 109.245C35.2266 110.4 34.29 111.336 33.1348 111.336H25.6651C24.3449 111.336 23.2745 110.266 23.2745 108.946C23.2745 107.626 24.3449 106.555 25.6651 106.555C26.0359 106.555 26.3871 106.64 26.7003 106.79C27.2254 105.933 28.1715 105.36 29.251 105.36ZM151.164 53.3686C154.603 53.3688 157.425 56.0094 157.713 59.3735C158.322 58.9773 159.049 58.7465 159.829 58.7465C161.974 58.7466 163.713 60.486 163.713 62.6313C163.713 64.7766 161.974 66.5159 159.829 66.5161C159.729 66.5161 159.629 66.5118 159.53 66.5043V66.5161H142.199V66.5063C139.863 66.3525 138.016 64.4086 138.016 62.0336C138.016 59.5583 140.023 57.5513 142.498 57.5512C143.349 57.5512 144.145 57.7886 144.823 58.2006C145.587 55.4152 148.136 53.3686 151.164 53.3686ZM73.3389 41.7827C75.118 41.7828 76.6376 42.8936 77.2422 44.4594C77.4201 44.3848 77.6154 44.3432 77.8204 44.3432C78.3451 44.3432 78.8068 44.6142 79.0733 45.0229C79.4188 44.8613 79.8044 44.7709 80.211 44.7709C81.6962 44.7709 82.9005 45.9752 82.9005 47.4604C82.9002 48.8668 81.8202 50.0208 80.4444 50.1391V50.1489H69.0899V50.1391C69.0131 50.1457 68.935 50.1489 68.8565 50.1489C67.3714 50.1489 66.1673 48.9454 66.1671 47.4604C66.1671 45.9752 67.3713 44.7709 68.8565 44.7709C69.0133 44.7709 69.167 44.7842 69.3165 44.81C69.818 43.0619 71.4296 41.7827 73.3389 41.7827Z"
+          fill="#A99DD2"
+        />
+        <path
+          d="M53.7528 80.2609H130.845V126.277C130.845 126.937 130.31 127.472 129.65 127.472H54.948C54.2879 127.472 53.7528 126.937 53.7528 126.277V80.2609Z"
           fill="white"
         />
-        <rect
-          x="162.754"
-          y="23.8208"
-          width="7.44684"
-          height="1.98054"
-          rx="0.99027"
-          fill="#959CA8"
+        <path
+          d="M51.96 71.6252C51.96 69.7935 53.4449 68.3087 55.2765 68.3087H129.321C131.153 68.3087 132.638 69.7935 132.638 71.6252V80.2609H51.96V71.6252Z"
+          fill="#E5E7EC"
         />
-        <rect
-          x="155.638"
-          y="23.8208"
-          width="4.46811"
-          height="1.98054"
-          rx="0.99027"
-          fill="#959CA8"
+        <path
+          d="M66.3027 74.2835C66.3027 74.9429 65.7676 75.4774 65.1075 75.4774C64.4474 75.4774 63.9122 74.9429 63.9122 74.2835C63.9122 73.6241 64.4474 73.0895 65.1075 73.0895C65.7676 73.0895 66.3027 73.6241 66.3027 74.2835Z"
+          fill="#292A33"
         />
-        <rect
-          x="142.399"
-          y="23.8208"
-          width="10.591"
-          height="1.98054"
-          rx="0.99027"
-          fill="#959CA8"
+        <path
+          d="M62.717 74.2835C62.717 74.9429 62.1819 75.4774 61.5218 75.4774C60.8617 75.4774 60.3266 74.9429 60.3266 74.2835C60.3266 73.6241 60.8617 73.0895 61.5218 73.0895C62.1819 73.0895 62.717 73.6241 62.717 74.2835Z"
+          fill="#292A33"
         />
         <path
-          d="M136.276 23.8208H138.761C139.308 23.8208 139.752 24.2642 139.752 24.8111V24.8111C139.752 25.358 139.308 25.8013 138.761 25.8013H136.276V23.8208Z"
-          fill="#959CA8"
+          d="M59.1313 74.2835C59.1313 74.9429 58.5962 75.4774 57.9361 75.4774C57.276 75.4774 56.7409 74.9429 56.7409 74.2835C56.7409 73.6241 57.276 73.0895 57.9361 73.0895C58.5962 73.0895 59.1313 73.6241 59.1313 74.2835Z"
+          fill="#292A33"
         />
-      </g>
-      <g filter="url(#filter1_d_2902_16320)">
-        <rect
-          x="126.347"
-          y="28.1108"
-          width="53.2862"
-          height="9.2416"
-          rx="4.5008"
-          fill="white"
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M129.65 70.1015H54.9481C54.2879 70.1015 53.7528 70.6366 53.7528 71.2967V126.277C53.7528 126.937 54.2879 127.472 54.948 127.472H129.65C130.31 127.472 130.845 126.937 130.845 126.277V71.2967C130.845 70.6366 130.31 70.1015 129.65 70.1015ZM54.9481 68.3087C53.2978 68.3087 51.96 69.6465 51.96 71.2967V126.277C51.96 127.927 53.2978 129.265 54.948 129.265H129.65C131.3 129.265 132.638 127.927 132.638 126.277V71.2967C132.638 69.6465 131.3 68.3087 129.65 68.3087H54.9481Z"
+          fill="#292A33"
         />
-        <rect
-          x="164.739"
-          y="31.7417"
-          width="11.253"
-          height="1.98054"
-          rx="0.99027"
-          fill="#959CA8"
+        <path
+          d="M156.542 122.094C156.542 121.434 157.077 120.899 157.737 120.899H167.897C168.557 120.899 169.092 121.434 169.092 122.094C169.092 122.754 168.557 123.289 167.897 123.289H157.737C157.077 123.289 156.542 122.754 156.542 122.094Z"
+          fill="#292A33"
         />
-        <rect
-          x="148.19"
-          y="31.7417"
-          width="13.9008"
-          height="1.98054"
-          rx="0.99027"
-          fill="#959CA8"
+        <path
+          d="M132.638 120.899H152.244C152.909 120.899 153.449 121.438 153.449 122.104C153.449 122.77 152.909 123.309 152.244 123.309H132.638V120.899Z"
+          fill="#292A33"
         />
-        <rect
-          x="140.744"
-          y="31.7417"
-          width="4.79907"
-          height="1.98054"
-          rx="0.99027"
-          fill="#959CA8"
+        <path
+          d="M35.2269 122.094C35.2269 121.434 35.762 120.899 36.4221 120.899H51.96V123.289H36.4221C35.762 123.289 35.2269 122.754 35.2269 122.094Z"
+          fill="#292A33"
         />
-        <rect
-          x="129.987"
-          y="31.7417"
-          width="8.10878"
-          height="1.98054"
-          rx="0.99027"
-          fill="#959CA8"
+        <path
+          d="M25.0675 122.094C25.0675 121.434 25.6026 120.899 26.2627 120.899H31.0436C31.7037 120.899 32.2388 121.434 32.2388 122.094C32.2388 122.754 31.7037 123.289 31.0436 123.289H26.2627C25.6026 123.289 25.0675 122.754 25.0675 122.094Z"
+          fill="#292A33"
         />
-      </g>
-      <path
-        d="M88.2848 85.5411V78.6099H90.9325V84.8059C90.9325 86.6702 89.4212 88.1815 87.5569 88.1815H84.3095C83.5803 88.1815 82.9893 87.5904 82.9893 86.8613C82.9893 86.1321 83.5803 85.5411 84.3095 85.5411H88.2848Z"
-        fill="#3B5BDB"
-      />
-      <path
-        d="M93.5801 84.8059V78.6099H96.2278V85.5411H100.203C100.932 85.5411 101.523 86.1321 101.523 86.8613C101.523 87.5904 100.932 88.1815 100.203 88.1815H96.9557C95.0914 88.1815 93.5801 86.6702 93.5801 84.8059Z"
-        fill="#3B5BDB"
-      />
-      <path
-        d="M136.275 57.4861V60.7867L144.526 65.2615C145.226 65.6411 146.093 65.5128 146.653 64.9468L157.292 54.1855H153.651L145.62 62.5146C145.478 62.6628 145.252 62.6943 145.074 62.5909L136.275 57.4861Z"
-        fill="#3B5BDB"
-      />
-      <path
-        d="M150.011 52.8653C150.011 52.1361 150.603 51.5449 151.334 51.5449H162.257C162.988 51.5449 163.581 52.1361 163.581 52.8653V52.8653C163.581 53.5945 162.988 54.1856 162.257 54.1856H151.334C150.603 54.1856 150.011 53.5945 150.011 52.8653V52.8653Z"
-        fill="#3B5BDB"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M66.0598 63.1006C66.8563 63.1974 67.4234 63.9203 67.3264 64.7151C67.2642 65.225 67.232 65.7448 67.232 66.2726C67.232 68.2087 67.6641 70.0401 68.4359 71.6798C68.777 72.4045 68.4648 73.268 67.7385 73.6084C67.0122 73.9489 66.1468 73.6373 65.8057 72.9125C64.8561 70.8952 64.3262 68.6436 64.3262 66.2726C64.3262 65.6273 64.3654 64.9905 64.4418 64.3645C64.5389 63.5697 65.2632 63.0038 66.0598 63.1006Z"
-        fill="#3B5BDB"
-      />
-      <path
-        d="M47.5758 54.6778V57.8819L45.9209 58.594C52.1818 61.3531 66.1101 67.4944 66.1101 67.4944V70.5205L42.8235 60.2201C41.5667 59.6641 41.5203 57.7668 42.7481 57.1404L47.5758 54.6778Z"
-        fill="#3B5BDB"
-      />
-      <g filter="url(#filter2_d_2902_16320)">
-        <rect
-          x="147.529"
-          y="30.5864"
-          width="18.5343"
-          height="18.4832"
-          rx="8.439"
-          fill="#3B5BDB"
+        <path
+          d="M51.9601 78.4676H132.638V80.2604H51.9601V78.4676Z"
+          fill="#292A33"
         />
-      </g>
-      <path
-        d="M157.607 45.072V44.0848C159.069 43.8917 159.983 43.0534 159.983 41.8511C159.983 40.6543 159.386 39.7829 157.946 39.4354L156.67 39.121C155.811 38.8949 155.559 38.6633 155.559 38.2C155.559 37.6209 156.095 37.2238 156.966 37.2238C157.809 37.2238 158.127 37.654 158.226 38.3599L159.841 38.3324C159.857 37.1907 159.02 36.2421 157.64 35.9994V34.9019H156.254V35.9939C154.841 36.209 153.834 37.0859 153.845 38.3875C153.861 39.6119 154.639 40.3234 155.849 40.5716L157.147 40.8528C157.919 41.0293 158.286 41.272 158.286 41.8621C158.286 42.4302 157.722 42.8549 156.933 42.8549C156.057 42.8549 155.444 42.4688 155.274 41.7408L153.609 41.7739C153.757 43.1692 154.726 43.9193 156.227 44.0903V45.072H157.607Z"
-        fill="white"
-      />
-      <mask
-        id="mask0_2902_16320"
-        style={{ maskType: "alpha" }}
-        maskUnits="userSpaceOnUse"
-        x="153"
-        y="34"
-        width="7"
-        height="12"
-      >
         <path
-          d="M157.607 45.072V44.0848C159.069 43.8917 159.983 43.0534 159.983 41.8511C159.983 40.6543 159.386 39.7829 157.946 39.4354L156.67 39.121C155.811 38.8949 155.559 38.6633 155.559 38.2C155.559 37.6209 156.095 37.2238 156.966 37.2238C157.809 37.2238 158.127 37.654 158.226 38.3599L159.841 38.3324C159.857 37.1907 159.02 36.2421 157.64 35.9994V34.9019H156.254V35.9939C154.841 36.209 153.834 37.0859 153.845 38.3875C153.861 39.6119 154.639 40.3234 155.849 40.5716L157.147 40.8528C157.919 41.0293 158.286 41.272 158.286 41.8621C158.286 42.4302 157.722 42.8549 156.933 42.8549C156.057 42.8549 155.444 42.4688 155.274 41.7408L153.609 41.7739C153.757 43.1692 154.726 43.9193 156.227 44.0903V45.072H157.607Z"
-          fill="white"
+          d="M90.8047 136.727C90.8047 137.226 90.3999 137.632 89.9004 137.632H84.8291C84.1691 137.632 83.6339 137.097 83.6338 136.437C83.6338 135.777 84.169 135.242 84.8291 135.242H88.4141V129.265H90.8047V136.727ZM96.1836 135.242H99.7686C100.429 135.242 100.964 135.777 100.964 136.437C100.964 137.097 100.429 137.632 99.7686 137.632H94.6973C94.1978 137.632 93.793 137.226 93.793 136.727V129.265H96.1836V135.242ZM141.655 116.661C141.271 117.046 140.676 117.126 140.204 116.856L132.638 112.532V109.543L140.796 114.205C140.918 114.275 141.072 114.251 141.167 114.148L148.176 106.556H146.383C145.723 106.556 145.188 106.021 145.188 105.361C145.188 104.701 145.723 104.165 146.383 104.165H155.944C156.604 104.165 157.14 104.701 157.14 105.361C157.139 106.021 156.604 106.556 155.944 106.556H151.761L141.655 116.661Z"
+          fill="#6145F7"
         />
-      </mask>
-      <g mask="url(#mask0_2902_16320)">
         <rect
-          x="149.147"
-          y="32.2002"
-          width="15.2974"
-          height="15.2552"
+          x="141.975"
+          y="83.9315"
+          width="17.635"
+          height="17.5863"
+          rx="8.439"
+          fill="#6145F7"
+        />
+        <path
+          d="M151.726 88.0383V89.0822C153.038 89.3131 153.835 90.2159 153.819 91.3019L152.283 91.3283C152.189 90.6567 151.886 90.2473 151.084 90.2473C150.256 90.2474 149.745 90.6253 149.745 91.176C149.745 91.6167 149.985 91.8378 150.803 92.0529L152.017 92.3517C153.387 92.6823 153.955 93.5118 153.955 94.6506C153.955 95.7943 153.085 96.5919 151.694 96.7756V97.715H150.381V96.7805C148.953 96.6177 148.031 95.9039 147.891 94.5764L149.475 94.5451C149.636 95.2377 150.219 95.6055 151.053 95.6057C151.803 95.6057 152.34 95.2008 152.34 94.6603C152.34 94.0993 151.991 93.8682 151.257 93.7004L150.021 93.4328C148.87 93.1966 148.13 92.5196 148.114 91.3547C148.104 90.1163 149.063 89.282 150.407 89.0773V88.0383H151.726Z"
           fill="white"
         />
-      </g>
-      <defs>
-        <filter
-          id="filter0_d_2902_16320"
-          x="125.125"
-          y="9.03863"
-          width="59.8681"
-          height="31.5443"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset />
-          <feGaussianBlur stdDeviation="5.57566" />
-          <feComposite in2="hardAlpha" operator="out" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="BackgroundImageFix"
-            result="effect1_dropShadow_2902_16320"
-          />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_2902_16320"
-            result="shape"
-          />
-        </filter>
-        <filter
-          id="filter1_d_2902_16320"
-          x="115.195"
-          y="16.9595"
-          width="75.5888"
-          height="31.5443"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
+        <mask
+          id="mask0_9355_281"
+          maskUnits="userSpaceOnUse"
+          x="147"
+          y="88"
+          width="7"
+          height="10"
         >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset />
-          <feGaussianBlur stdDeviation="5.57566" />
-          <feComposite in2="hardAlpha" operator="out" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="BackgroundImageFix"
-            result="effect1_dropShadow_2902_16320"
-          />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_2902_16320"
-            result="shape"
-          />
-        </filter>
-        <filter
-          id="filter2_d_2902_16320"
-          x="132.529"
-          y="15.5864"
-          width="48.5342"
-          height="48.4834"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset />
-          <feGaussianBlur stdDeviation="7.5" />
-          <feComposite in2="hardAlpha" operator="out" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.0823529 0 0 0 0 0.454902 0 0 0 0 0.615686 0 0 0 0.2 0"
+          <path
+            d="M151.726 88.0383V89.0822C153.038 89.3131 153.835 90.2159 153.819 91.3019L152.283 91.3283C152.189 90.6567 151.886 90.2473 151.084 90.2473C150.256 90.2474 149.745 90.6253 149.745 91.176C149.745 91.6167 149.985 91.8378 150.803 92.0529L152.017 92.3517C153.387 92.6823 153.955 93.5118 153.955 94.6506C153.955 95.7943 153.085 96.5919 151.694 96.7756V97.715H150.381V96.7805C148.953 96.6177 148.031 95.9039 147.891 94.5764L149.475 94.5451C149.636 95.2377 150.219 95.6055 151.053 95.6057C151.803 95.6057 152.34 95.2008 152.34 94.6603C152.34 94.0993 151.991 93.8682 151.257 93.7004L150.021 93.4328C148.87 93.1966 148.13 92.5196 148.114 91.3547C148.104 90.1163 149.063 89.282 150.407 89.0773V88.0383H151.726Z"
+            fill="white"
           />
-          <feBlend
-            mode="normal"
-            in2="BackgroundImageFix"
-            result="effect1_dropShadow_2902_16320"
+        </mask>
+        <g mask="url(#mask0_9355_281)">
+          <rect
+            x="143.645"
+            y="85.4679"
+            width="14.5552"
+            height="14.515"
+            fill="white"
           />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_2902_16320"
-            result="shape"
-          />
-        </filter>
-      </defs>
+        </g>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M101.263 95.9553C100.228 95.9553 99.4816 96.5571 99.2985 97.2006C99.1846 97.601 98.7676 97.8333 98.3672 97.7193C97.9668 97.6054 97.7346 97.1884 97.8486 96.7881C98.2508 95.3743 99.6905 94.4478 101.263 94.4478C102.835 94.4478 104.275 95.3743 104.677 96.7881C104.791 97.1884 104.559 97.6054 104.158 97.7193C103.758 97.8333 103.341 97.601 103.227 97.2006C103.044 96.5571 102.298 95.9553 101.263 95.9553Z"
+          fill="#292A33"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M84.5299 95.9553C83.495 95.9553 82.7487 96.5571 82.5656 97.2006C82.4517 97.601 82.0347 97.8333 81.6343 97.7193C81.2339 97.6054 81.0017 97.1884 81.1156 96.7881C81.5179 95.3743 82.9576 94.4478 84.5299 94.4478C86.1022 94.4478 87.5418 95.3743 87.9441 96.7881C88.058 97.1884 87.8258 97.6054 87.4254 97.7193C87.025 97.8333 86.6081 97.601 86.4941 97.2006C86.311 96.5571 85.5647 95.9553 84.5299 95.9553Z"
+          fill="#292A33"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M85.4261 106.4C85.8424 106.4 86.1799 106.738 86.1799 107.154C86.1799 108.058 86.9127 108.791 87.8166 108.791H96.7807C97.6847 108.791 98.4174 108.058 98.4174 107.154C98.4174 106.738 98.7549 106.4 99.1712 106.4C99.5875 106.4 99.9249 106.738 99.9249 107.154C99.9249 108.891 98.5172 110.298 96.7807 110.298H87.8166C86.0801 110.298 84.6724 108.891 84.6724 107.154C84.6724 106.738 85.0098 106.4 85.4261 106.4Z"
+          fill="#292A33"
+        />
+        <path
+          d="M51.9593 112.531V109.543L41.5712 117.457C40.7439 118.088 41.0607 119.401 42.0844 119.584L62.7163 123.288V120.897L44.7879 117.909L51.9593 112.531Z"
+          fill="#6145F7"
+        />
+        <path
+          d="M65.7042 117.909H66.8995C67.5596 117.909 68.0947 118.444 68.0947 119.104C68.0947 119.765 67.5596 120.3 66.8995 120.3H66.3018C65.3117 120.3 64.509 121.102 64.509 122.092C64.509 123.083 65.3117 123.885 66.3018 123.885H68.6923C69.3524 123.885 69.8875 124.42 69.8875 125.081C69.8875 125.741 69.3524 126.276 68.6923 126.276H65.7042C63.7239 126.276 62.1186 124.67 62.1186 122.69V121.495C62.1186 119.515 63.7239 117.909 65.7042 117.909Z"
+          fill="#6145F7"
+        />
+        <path
+          d="M25.8391 72.536C29.2503 72.5361 32.0497 75.1416 32.3489 78.4657C33.032 77.9232 33.897 77.5985 34.8381 77.5985C37.047 77.5985 38.8379 79.3841 38.8381 81.5868C38.8381 83.7897 37.0471 85.576 34.8381 85.576C34.7868 85.576 34.7357 85.5741 34.6848 85.5721V85.576H16.8391V85.5741C16.8138 85.5745 16.7884 85.576 16.7629 85.576C14.1718 85.576 12.0708 83.4813 12.0706 80.8973C12.0706 78.3132 14.1716 76.2177 16.7629 76.2177C17.8215 76.2177 18.7983 76.5674 19.5833 77.1571C20.3985 74.4825 22.8907 72.536 25.8391 72.536Z"
+          fill="#A99DD2"
+        />
+      </g>
     </svg>
   );
 };

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

@@ -1,6 +1,7 @@
 import React from "react";
+import { SEA_GREEN } from "../../../constants/colors";
 
-const SuccessfulIconMedium = ({ iconIndex = 0 }) => {
+const SuccessfulIconMedium = ({ iconIndex = 0, fill = SEA_GREEN }) => {
   const mask0ID = `SuccessfulIconMedium-mask0-${iconIndex}`;
   const mask1ID = `SuccessfulIconMedium-mask1-${iconIndex}`;
   return (
@@ -11,7 +12,7 @@ const SuccessfulIconMedium = ({ iconIndex = 0 }) => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle cx="12" cy="12" r="12" fill="#317D4F" />
+      <circle cx="12" cy="12" r="12" fill={fill} />
       <mask
         id={mask0ID}
         style={{ maskType: "luminance" }}

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

@@ -0,0 +1,40 @@
+import React from "react";
+
+const VisaLargeIcon = () => {
+  return (
+    <svg
+      width="36"
+      height="24"
+      viewBox="0 0 36 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Visa"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M34.858 24H1.14296C0.511437 24 0 23.4738 0 22.8252V1.17485C0 0.5262 0.511437 0 1.14296 0H34.858C35.4897 0 36 0.5262 36 1.17485V22.8252C36 23.4738 35.4897 24 34.858 24Z"
+        fill="#F6F6F9"
+      />
+      <g clipPath="url(#clip0_visa_large)">
+        <path
+          d="M15.1125 7.63715L11.9703 15.1338H9.92036L8.37411 9.15114C8.28024 8.78265 8.19861 8.64765 7.91312 8.4924C7.44699 8.23952 6.67725 7.99227 6 7.85502L6.04601 7.63715H9.34586C9.71649 7.63715 10.0446 7.91715 10.1401 8.40152L10.9567 12.7395L13.0749 7.63702H15.1125V7.63715ZM23.1447 12.6864C23.153 10.7078 20.4087 10.5988 20.4276 9.71489C20.4335 9.44589 20.6895 9.15989 21.2502 9.08689C21.528 9.05052 22.2936 9.02277 23.162 9.42239L23.5026 7.83266C23.0361 7.66328 22.4357 7.50027 21.6887 7.50027C19.7718 7.50027 18.4229 8.51927 18.4115 9.97839C18.399 11.0576 19.3743 11.6599 20.109 12.0185C20.8649 12.3858 21.1185 12.6218 21.1157 12.9503C21.1103 13.4531 20.5128 13.6751 19.9545 13.6839C18.9797 13.6989 18.414 13.4201 17.9633 13.2105L17.6117 14.8529C17.9648 15.0608 18.9012 15.2421 19.7684 15.2513C21.8057 15.2513 23.1384 14.2449 23.1447 12.6864ZM28.2065 15.134H30L28.4345 7.63715H26.779C26.4066 7.63715 26.0927 7.85389 25.9536 8.18715L23.0436 15.1338H25.0799L25.4841 14.0141H27.9723L28.2065 15.1338V15.134ZM26.0426 12.4778L27.0633 9.66302L27.6507 12.4778H26.0426ZM17.8833 7.63715L16.2797 15.1338H14.3405L15.9447 7.63715H17.8833Z"
+          fill="#1434CB"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_visa_large">
+          <rect
+            width="24"
+            height="7.75097"
+            fill="white"
+            transform="translate(6 7.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default VisaLargeIcon;