@thecb/components 10.6.8-beta.0 → 10.6.9-beta.0

package/src/components/molecules/obligation/icons/PropertyMotorcycleIcon.js

@@ -2,97 +2,20 @@ import React from "react";
 
 const PropertyMotorcycleIcon = () => (
   <svg
-    width="51px"
-    height="51px"
-    viewBox="0 0 81 81"
-    version="1.1"
+    width="48"
+    height="48"
+    viewBox="0 0 48 48"
+    fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
   >
-    <defs>
-      <circle id="motorcycle-path-1" cx="33.5" cy="33.5" r="33.5"></circle>
-      <filter
-        x="-17.2%"
-        y="-14.2%"
-        width="134.3%"
-        height="134.3%"
-        filterUnits="objectBoundingBox"
-        id="motorcycle-filter-2"
-      >
-        <feOffset
-          dx="0"
-          dy="-4"
-          in="SourceAlpha"
-          result="shadowOffsetOuter1"
-        ></feOffset>
-        <feColorMatrix
-          values="0 0 0 0 0.964705882   0 0 0 0 0.964705882   0 0 0 0 0.976470588  0 0 0 1 0"
-          type="matrix"
-          in="shadowOffsetOuter1"
-          result="shadowMatrixOuter1"
-        ></feColorMatrix>
-        <feOffset
-          dx="0"
-          dy="2"
-          in="SourceAlpha"
-          result="shadowOffsetOuter2"
-        ></feOffset>
-        <feGaussianBlur
-          stdDeviation="3.5"
-          in="shadowOffsetOuter2"
-          result="shadowBlurOuter2"
-        ></feGaussianBlur>
-        <feColorMatrix
-          values="0 0 0 0 0.161570617   0 0 0 0 0.163300979   0 0 0 0 0.199501812  0 0 0 0.3 0"
-          type="matrix"
-          in="shadowBlurOuter2"
-          result="shadowMatrixOuter2"
-        ></feColorMatrix>
-        <feMerge>
-          <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
-          <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
-        </feMerge>
-      </filter>
-    </defs>
-    <g
-      id="motorcycle-Profile-/-Icons"
-      stroke="none"
-      strokeWidth="1"
-      fill="none"
-      fillRule="evenodd"
-    >
-      <g id="Outlined" transform="translate(7.000000, -801.000000)">
-        <g
-          id="Potentail-future-property"
-          transform="translate(0.000000, 231.000000)"
-        >
-          <g
-            id="motorcycle-Profile-Obligation-Icon-/-Property---Motorcycle"
-            transform="translate(0.000000, 575.000000)"
-          >
-            <g id="Oval-Copy-6">
-              <use
-                fill="black"
-                fillOpacity="1"
-                filter="url(#motorcycle-filter-2)"
-                xlinkHref="#motorcycle-path-1"
-              ></use>
-              <use
-                fill="#FFFFFF"
-                fillRule="evenodd"
-                xlinkHref="#motorcycle-path-1"
-              ></use>
-            </g>
-            <path
-              d="M45.9686738,46 C47.4061704,46 48.7499171,45.6458339 49.9999142,44.9375025 C51.2499112,44.2291712 52.2290758,43.2500066 52.9374072,42.0000095 C53.6457385,40.7500125 53.9999046,39.4062657 53.9999046,37.9687691 C53.9999046,36.5312726 53.6353225,35.2083587 52.9061572,34.0000286 C52.176992,32.7916985 51.2082443,31.8229508 49.9999142,31.0937855 C48.791584,30.3646203 47.4790872,30.0000381 46.0624236,30.0000381 C45.1457588,30.0000381 44.2707608,30.1458708 43.4374298,30.4375371 L43.4374298,30.4375371 L41.3749347,27.0000453 L46.4999225,27.0000453 C46.9165885,27.0000453 47.2707537,26.8542126 47.56242,26.5625463 C47.8540863,26.2708801 47.9999189,25.9167149 47.9999189,25.5000572 L47.9999189,25.5000572 L47.9999189,23.5000572 C47.9999189,23.0833877 47.8540863,22.7292225 47.56242,22.4375562 C47.2707537,22.1458899 46.9165885,22.0000572 46.4999225,22.0000572 L46.4999225,22.0000572 L43.6874292,22.0000572 C43.2290973,22.0000572 42.8540982,22.1667238 42.5624319,22.5000572 L42.5624319,22.5000572 L40.1874376,25.1250498 L38.8124408,22.7500554 C38.5207746,22.2500566 38.0832756,22.0000572 37.499944,22.0000572 L37.499944,22.0000572 L32.4999559,22.0000572 C32.2082896,22.0000572 31.9687072,22.093807 31.7812076,22.2813065 C31.5937081,22.4688061 31.4999583,22.7083885 31.4999583,23.0000572 L31.4999583,23.0000572 L31.4999583,24.0000572 C31.4999583,24.2917187 31.5937081,24.5313012 31.7812076,24.7188007 C31.9687072,24.9063003 32.2082896,25.0000572 32.4999559,25.0000572 L32.4999559,25.0000572 L36.6249461,25.0000572 L37.8749431,27.0000453 L28.249966,27.0000453 C27.6249675,26.2083802 26.8749693,25.6042156 25.9999714,25.1875496 C24.9583069,24.7292177 23.6249771,24.5000572 21.9999809,24.5000572 L21.9999809,24.5000572 L18.5624891,24.5000572 C18.1041572,24.5000572 17.7291581,24.6458839 17.4374918,24.9375502 C17.1458255,25.2292165 16.9999928,25.5833817 16.9999928,26.0000572 C16.9999928,26.4167137 17.1458255,26.7708789 17.4374918,27.0625452 C17.7291581,27.3542114 18.0833233,27.5000441 18.4999893,27.5000441 L18.4999893,27.5000441 L21.9999809,27.5000441 C23.3333108,27.5000441 24.3333084,28.0208759 24.9999738,29.0625404 L24.9999738,29.0625404 L24.2499756,30.3125374 C23.4166445,30.062538 22.5624796,29.9583713 21.6874817,30.0000381 C20.3124849,30.041705 19.041655,30.4167041 17.8749908,31.1250355 C16.7083266,31.8333668 15.7812458,32.7812815 15.0937474,33.9687787 C14.406249,35.1562759 14.0416669,36.4375228 14,37.8125195 C13.9583331,39.2708491 14.2916663,40.6354298 14.9999976,41.9062598 C15.7083289,43.1770897 16.6874936,44.1770874 17.9374906,44.9062526 C19.1874876,45.6354179 20.5416514,46 21.9999809,46 C23.8333096,46 25.4687227,45.4375013 26.9062192,44.312504 C28.3437158,43.1875067 29.2916305,41.7500101 29.7499624,40.0000143 L29.7499624,40.0000143 L34.9999499,40.0000143 C35.4166159,40.0000143 35.7811981,39.8437647 36.0936973,39.5312654 C36.4061966,39.2187662 36.5416132,38.854184 36.4999464,38.437518 C36.4582795,36.9375216 36.7395288,35.500025 37.3436943,34.1250283 C37.9478599,32.7500316 38.8332738,31.5833674 39.999938,30.6250367 L39.999938,30.6250367 L40.8124361,31.9375335 C39.9374382,32.6875317 39.2499398,33.5937796 38.749941,34.656277 C38.2499422,35.7187745 37.9999428,36.8541888 37.9999428,38.0625189 C37.9999428,39.4791825 38.3541089,40.7916794 39.0624402,42.0000095 C39.7707716,43.2083397 40.7395193,44.1770874 41.9686833,44.9062526 C43.1978474,45.6354179 44.5311772,46 45.9686738,46 Z M21.9999809,43.0000072 C20.6249842,43.0000072 19.447904,42.5104253 18.4687393,41.5312607 C17.4895747,40.552096 16.9999928,39.3750158 16.9999928,38.0000191 C16.9999928,36.6250224 17.4895747,35.4479421 18.4687393,34.4687775 C19.447904,33.4896128 20.6249842,33.000031 21.9999809,33.000031 C22.2499803,33.000031 22.4999797,33.020864 22.7499791,33.0625308 L22.7499791,33.0625308 L20.1874852,37.7500197 C19.895819,38.2500185 19.895819,38.7500173 20.1874852,39.2500161 C20.4791515,39.7500149 20.9166505,40.0000143 21.4999821,40.0000143 L21.4999821,40.0000143 L26.56247,40.0000143 C26.1874709,40.9166791 25.5833054,41.6458434 24.7499744,42.1875091 C23.9166433,42.7291748 22.9999785,43.0000072 21.9999809,43.0000072 Z M46.2499231,43.0000072 C44.8332595,43.08334 43.6040964,42.625008 42.5624319,41.6250104 C41.5207674,40.6250128 40.9999356,39.4166827 40.9999356,38.0000191 C40.9999356,36.6666892 41.4582675,35.520858 42.3749323,34.5625273 L42.3749323,34.5625273 L45.4999249,39.6875151 C45.6249246,39.9375145 45.8228411,40.0937641 46.0936735,40.1562639 C46.3645059,40.2187638 46.6040893,40.1875139 46.8124218,40.0625142 L46.8124218,40.0625142 L47.6874197,39.5000155 C47.9374191,39.3750158 48.0936687,39.1770993 48.1561686,38.9062669 C48.2186684,38.6354345 48.1874185,38.3958511 48.0624188,38.1875186 L48.0624188,38.1875186 L44.9999356,33.1250307 C45.3332583,33.0416979 45.6665915,33.000031 45.9999237,33.000031 C47.4165873,33.000031 48.6249174,33.5208628 49.6249151,34.5625273 C50.6249127,35.6041918 51.0832446,36.8333549 50.9999118,38.2500185 C50.916579,39.5416824 50.4269962,40.6354298 49.5311653,41.5312607 C48.6353344,42.4270915 47.541587,42.9166743 46.2499231,43.0000072 Z"
-              id="m"
-              fill="#292A33"
-              fillRule="nonzero"
-            ></path>
-          </g>
-        </g>
-      </g>
-    </g>
+    <path
+      d="M0 18C0 9.51472 0 5.27208 2.63604 2.63604C5.27208 0 9.51472 0 18 0H30C38.4853 0 42.7279 0 45.364 2.63604C48 5.27208 48 9.51472 48 18V30C48 38.4853 48 42.7279 45.364 45.364C42.7279 48 38.4853 48 30 48H18C9.51472 48 5.27208 48 2.63604 45.364C0 42.7279 0 38.4853 0 30V18Z"
+      fill="#3B5BDB"
+    />
+    <path
+      d="M32.7935 32.11C33.8183 32.11 34.7763 31.8575 35.6675 31.3525C36.5586 30.8475 37.2567 30.1495 37.7617 29.2583C38.2666 28.3672 38.5191 27.4092 38.5191 26.3844C38.5191 25.3596 38.2592 24.4164 37.7394 23.555C37.2196 22.6936 36.5289 22.0029 35.6675 21.4831C34.806 20.9633 33.8703 20.7033 32.8604 20.7033C32.2069 20.7033 31.5831 20.8073 30.989 21.0152L29.5186 18.5646H33.1723C33.4693 18.5646 33.7218 18.4606 33.9297 18.2527C34.1377 18.0447 34.2416 17.7923 34.2416 17.4952V16.0694C34.2416 15.7723 34.1377 15.5198 33.9297 15.3119C33.7218 15.104 33.4693 15 33.1723 15H31.1672C30.8404 15 30.5731 15.1188 30.3652 15.3565L28.672 17.2279L27.6917 15.5347C27.4838 15.1782 27.1719 15 26.756 15H23.1914C22.9835 15 22.8127 15.0668 22.679 15.2005C22.5454 15.3342 22.4785 15.505 22.4785 15.7129V16.4258C22.4785 16.6338 22.5454 16.8046 22.679 16.9382C22.8127 17.0719 22.9835 17.1388 23.1914 17.1388H26.1322L27.0234 18.5646H20.1615C19.716 18.0002 19.1813 17.5695 18.5575 17.2724C17.8149 16.9457 16.8643 16.7823 15.7058 16.7823H13.2552C12.9284 16.7823 12.6611 16.8863 12.4531 17.0942C12.2452 17.3021 12.1412 17.5546 12.1412 17.8517C12.1412 18.1487 12.2452 18.4012 12.4531 18.6091C12.6611 18.8171 12.9136 18.921 13.2106 18.921H15.7058C16.6564 18.921 17.3693 19.2924 17.8446 20.035L17.3099 20.9261C16.7158 20.7479 16.1068 20.6736 15.483 20.7033C14.5028 20.733 13.5968 21.0004 12.765 21.5054C11.9333 22.0103 11.2724 22.6861 10.7822 23.5327C10.2921 24.3793 10.0322 25.2927 10.0025 26.273C9.97277 27.3127 10.2104 28.2855 10.7154 29.1915C11.2204 30.0975 11.9184 30.8104 12.8096 31.3302C13.7007 31.8501 14.6661 32.11 15.7058 32.11C17.0128 32.11 18.1787 31.709 19.2036 30.907C20.2284 30.1049 20.9042 29.0801 21.2309 27.8325H24.9737C25.2708 27.8325 25.5307 27.7211 25.7535 27.4983C25.9763 27.2755 26.0728 27.0156 26.0431 26.7186C26.0134 25.6492 26.2139 24.6244 26.6446 23.6441C27.0753 22.6639 27.7066 21.8321 28.5383 21.1489L29.1176 22.0846C28.4937 22.6193 28.0036 23.2654 27.6472 24.0229C27.2907 24.7803 27.1125 25.5898 27.1125 26.4512C27.1125 27.4612 27.365 28.3969 27.8699 29.2583C28.3749 30.1198 29.0656 30.8104 29.9419 31.3302C30.8182 31.8501 31.7687 32.11 32.7935 32.11ZM15.7058 29.9713C14.7255 29.9713 13.8864 29.6222 13.1883 28.9242C12.4903 28.2261 12.1412 27.3869 12.1412 26.4067C12.1412 25.4264 12.4903 24.5872 13.1883 23.8892C13.8864 23.1911 14.7255 22.8421 15.7058 22.8421C15.884 22.8421 16.0623 22.8569 16.2405 22.8866L14.4136 26.2284C14.2057 26.5849 14.2057 26.9414 14.4136 27.2978C14.6216 27.6543 14.9335 27.8325 15.3494 27.8325H18.9585C18.6911 28.486 18.2604 29.0058 17.6663 29.392C17.0722 29.7782 16.4187 29.9713 15.7058 29.9713ZM32.994 29.9713C31.9841 30.0307 31.1078 29.7039 30.3652 28.991C29.6225 28.2781 29.2512 27.4166 29.2512 26.4067C29.2512 25.4561 29.578 24.6392 30.2315 23.956L32.4593 27.6097C32.5485 27.7879 32.6896 27.8993 32.8826 27.9439C33.0757 27.9885 33.2465 27.9662 33.3951 27.8771L34.0189 27.476C34.1971 27.3869 34.3085 27.2458 34.353 27.0527C34.3976 26.8597 34.3753 26.6889 34.2862 26.5403L32.1029 22.9312C32.3405 22.8718 32.5782 22.8421 32.8158 22.8421C33.8258 22.8421 34.6872 23.2134 35.4001 23.956C36.113 24.6986 36.4398 25.5749 36.3804 26.5849C36.321 27.5057 35.9719 28.2855 35.3333 28.9242C34.6946 29.5628 33.9149 29.9118 32.994 29.9713Z"
+      fill="#FEFEFE"
+    />
   </svg>
 );
 

package/src/components/molecules/obligation/icons/PropertyPersonalIcon.js

@@ -1,93 +1,23 @@
 import React from "react";
 
-const PropertyPersonalIcon = () => (
+const PropertyBusinessIcon = () => (
   <svg
-    width="51px"
-    height="51px"
-    viewBox="0 0 81 81"
-    version="1.1"
+    width="48"
+    height="48"
+    viewBox="0 0 48 48"
+    fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
   >
-    <defs>
-      <circle
-        id="property-personal-path-1"
-        cx="33.5"
-        cy="33.5"
-        r="33.5"
-      ></circle>
-      <filter
-        x="-17.2%"
-        y="-14.2%"
-        width="134.3%"
-        height="134.3%"
-        filterUnits="objectBoundingBox"
-        id="property-personal-filter-2"
-      >
-        <feOffset
-          dx="0"
-          dy="-4"
-          in="SourceAlpha"
-          result="shadowOffsetOuter1"
-        ></feOffset>
-        <feColorMatrix
-          values="0 0 0 0 0.964705882   0 0 0 0 0.964705882   0 0 0 0 0.976470588  0 0 0 1 0"
-          type="matrix"
-          in="shadowOffsetOuter1"
-          result="shadowMatrixOuter1"
-        ></feColorMatrix>
-        <feOffset
-          dx="0"
-          dy="2"
-          in="SourceAlpha"
-          result="shadowOffsetOuter2"
-        ></feOffset>
-        <feGaussianBlur
-          stdDeviation="3.5"
-          in="shadowOffsetOuter2"
-          result="shadowBlurOuter2"
-        ></feGaussianBlur>
-        <feColorMatrix
-          values="0 0 0 0 0.161570617   0 0 0 0 0.163300979   0 0 0 0 0.199501812  0 0 0 0.3 0"
-          type="matrix"
-          in="shadowBlurOuter2"
-          result="shadowMatrixOuter2"
-        ></feColorMatrix>
-        <feMerge>
-          <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
-          <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
-        </feMerge>
-      </filter>
-    </defs>
-    <g
-      id="PropertyPersonal"
-      stroke="none"
-      strokeWidth="1"
-      fill="none"
+    <path
+      d="M0 18C0 9.51472 0 5.27208 2.63604 2.63604C5.27208 0 9.51472 0 18 0H30C38.4853 0 42.7279 0 45.364 2.63604C48 5.27208 48 9.51472 48 18V30C48 38.4853 48 42.7279 45.364 45.364C42.7279 48 38.4853 48 30 48H18C9.51472 48 5.27208 48 2.63604 45.364C0 42.7279 0 38.4853 0 30V18Z"
+      fill="#3B5BDB"
+    />
+    <path
       fillRule="evenodd"
-    >
-      <g id="PropertyPersonalIcon" transform="translate(7.000000, 5.000000)">
-        <g id="Oval">
-          <use
-            fill="black"
-            fillOpacity="1"
-            filter="url(#property-personal-filter-2)"
-            xlinkHref="#property-personal-path-1"
-          ></use>
-          <use
-            fill="#FFFFFF"
-            fillRule="evenodd"
-            xlinkHref="#property-personal-path-1"
-          ></use>
-        </g>
-        <path
-          d="M49.7499195,37.0000215 C49.9582521,37.0000215 50.1249186,36.9166886 50.2499183,36.7500221 L50.2499183,36.7500221 L51.8124146,34.8125267 C51.9374143,34.6458601 51.9894972,34.4583605 51.9686642,34.250028 C51.9478313,34.0416955 51.8749145,33.8750289 51.7499148,33.7500292 L51.7499148,33.7500292 L46.4999273,29.4375395 L46.4999273,20.7500602 C46.4999273,20.5417277 46.4270105,20.3646441 46.2811778,20.2188115 C46.1353451,20.0729788 45.9582616,20.000062 45.7499291,20.000062 L45.7499291,20.000062 L42.2499374,20.000062 C42.0416049,20.000062 41.8645213,20.0729788 41.7186887,20.2188115 C41.572856,20.3646441 41.4999392,20.5417277 41.4999392,20.7500602 L41.4999392,20.7500602 L41.4999392,25.3125493 L35.9374525,20.6875603 C35.3541208,20.2292284 34.7082884,20.000062 33.9999571,20.000062 C33.2916258,20.000062 32.6666272,20.2292284 32.1249616,20.6875603 L32.1249616,20.6875603 L16.2499994,33.7500292 C16.1249997,33.8750289 16.0520829,34.0416955 16.0312499,34.250028 C16.010417,34.4583605 16.0624999,34.6458601 16.1874996,34.8125267 L16.1874996,34.8125267 L17.7499958,36.7500221 C17.8749955,36.9166886 18.0416621,37.0000215 18.2499946,37.0000215 C18.4583272,37.0000215 18.6458267,36.9375216 18.8124933,36.8125219 L18.8124933,36.8125219 L33.4999583,24.7500507 C33.6666249,24.625051 33.8332905,24.5625511 33.9999571,24.5625511 C34.1666237,24.5625511 34.3332893,24.625051 34.4999559,24.7500507 L34.4999559,24.7500507 L49.1874209,36.8125219 C49.3540875,36.9375216 49.541587,37.0000215 49.7499195,37.0000215 Z M30.249966,47.9999952 C30.4582985,47.9999952 30.6353821,47.9270784 30.7812148,47.7812458 C30.9270474,47.6354131 30.9999642,47.4583295 30.9999642,47.249997 L30.9999642,47.249997 L30.9999642,40.2500137 C30.9999642,40.0416812 31.072881,39.8645976 31.2187137,39.718765 C31.3645464,39.5729323 31.5416299,39.5000155 31.7499624,39.5000155 L31.7499624,39.5000155 L36.2499517,39.5000155 C36.4582842,39.5000155 36.6353678,39.5729323 36.7812005,39.718765 C36.9270331,39.8645976 36.9999499,40.0416812 36.9999499,40.2500137 L36.9999499,40.2500137 L36.9999499,47.249997 C36.9999499,47.4583295 37.0728667,47.6354131 37.2186994,47.7812458 C37.3645321,47.9270784 37.5416156,47.9999952 37.7499481,47.9999952 L37.7499481,47.9999952 L44.9999309,47.9999952 C45.4165968,47.9999952 45.770762,47.8541626 46.0624283,47.5624963 C46.3540946,47.27083 46.4999273,46.9166648 46.4999273,46.4999988 L46.4999273,46.4999988 L46.4999273,37.5625201 C46.4999273,37.3125207 46.4165945,37.1041882 46.2499279,36.9375216 L46.2499279,36.9375216 L34.4999559,27.3125446 C34.3332893,27.1875449 34.1666237,27.125045 33.9999571,27.125045 C33.8332905,27.125045 33.6666249,27.1875449 33.4999583,27.3125446 L33.4999583,27.3125446 L21.7499863,36.9375216 C21.5833197,37.1041882 21.4999869,37.3125207 21.4999869,37.5625201 L21.4999869,37.5625201 L21.4999869,46.4999988 C21.4999869,46.9166648 21.6458196,47.27083 21.9374858,47.5624963 C22.2291521,47.8541626 22.5833173,47.9999952 22.9999869,47.9999952 L22.9999869,47.9999952 L30.249966,47.9999952 Z"
-          id="h"
-          fill="#292A33"
-          fillRule="nonzero"
-        ></path>
-      </g>
-    </g>
+      clipRule="evenodd"
+      d="M36.1674 26.0625C36.0736 26.1875 35.9486 26.25 35.7924 26.25C35.6361 26.25 35.4955 26.2031 35.3705 26.1093L24.3549 17.0625C24.2299 16.9687 24.1049 16.9219 23.9799 16.9219C23.8549 16.9219 23.7299 16.9687 23.6049 17.0625L12.5893 26.1093C12.4643 26.2031 12.3237 26.25 12.1674 26.25C12.0112 26.25 11.8862 26.1875 11.7924 26.0625L10.6205 24.6093C10.5268 24.4843 10.4877 24.3437 10.5033 24.1875C10.519 24.0312 10.5737 23.9062 10.6674 23.8125L22.5736 14.0156C22.9799 13.6719 23.4486 13.5 23.9799 13.5C24.5111 13.5 24.9955 13.6719 25.433 14.0156L29.6049 17.4844V14.0625C29.6049 13.9062 29.6596 13.7734 29.7689 13.664C29.8783 13.5547 30.0111 13.5 30.1674 13.5H32.7924C32.9486 13.5 33.0814 13.5547 33.1908 13.664C33.3002 13.7734 33.3549 13.9062 33.3549 14.0625V20.5781L37.2924 23.8125C37.3861 23.9062 37.4408 24.0312 37.4564 24.1875C37.472 24.3437 37.433 24.4843 37.3392 24.6093L36.1674 26.0625ZM21.5658 34.3359C21.4565 34.4453 21.3236 34.4999 21.1674 34.4999H15.7299C15.4174 34.4999 15.1518 34.3906 14.933 34.1718C14.7143 33.9531 14.6049 33.6874 14.6049 33.375V26.6718C14.6049 26.4843 14.6674 26.3281 14.7924 26.2031L23.6049 18.9844C23.7299 18.8906 23.8549 18.8437 23.9799 18.8437C24.1049 18.8437 24.2299 18.8906 24.3549 18.9844L33.1674 26.2031C33.2924 26.3281 33.3549 26.4843 33.3549 26.6718V33.375C33.3549 33.6874 33.2455 33.9531 33.0267 34.1718C32.808 34.3906 32.5424 34.4999 32.2299 34.4999H26.7924C26.6361 34.4999 26.5033 34.4453 26.3939 34.3359C26.2846 34.2265 26.2299 34.0937 26.2299 33.9374V28.6875C26.2299 28.5312 26.1752 28.3984 26.0658 28.289C25.9565 28.1797 25.8236 28.125 25.6674 28.125H22.2924C22.1361 28.125 22.0033 28.1797 21.894 28.289C21.7846 28.3984 21.7299 28.5312 21.7299 28.6875V33.9374C21.7299 34.0937 21.6752 34.2265 21.5658 34.3359Z"
+      fill="#FEFEFE"
+    />
   </svg>
 );
 

package/src/components/molecules/obligation/icons/PropertyStorefrontIcon.js

@@ -2,98 +2,20 @@ import React from "react";
 
 const PropertyStorefrontIcon = () => (
   <svg
-    width="51px"
-    height="51px"
-    viewBox="0 0 81 81"
-    version="1.1"
+    width="48"
+    height="48"
+    viewBox="0 0 48 48"
+    fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
   >
-    <title>Profile Obligation Icon / Property - Storefront</title>
-    <defs>
-      <circle id="storefront-path-1" cx="33.5" cy="33.5" r="33.5"></circle>
-      <filter
-        x="-17.2%"
-        y="-14.2%"
-        width="134.3%"
-        height="134.3%"
-        filterUnits="objectBoundingBox"
-        id="storefront-filter-2"
-      >
-        <feOffset
-          dx="0"
-          dy="-4"
-          in="SourceAlpha"
-          result="shadowOffsetOuter1"
-        ></feOffset>
-        <feColorMatrix
-          values="0 0 0 0 0.964705882   0 0 0 0 0.964705882   0 0 0 0 0.976470588  0 0 0 1 0"
-          type="matrix"
-          in="shadowOffsetOuter1"
-          result="shadowMatrixOuter1"
-        ></feColorMatrix>
-        <feOffset
-          dx="0"
-          dy="2"
-          in="SourceAlpha"
-          result="shadowOffsetOuter2"
-        ></feOffset>
-        <feGaussianBlur
-          stdDeviation="3.5"
-          in="shadowOffsetOuter2"
-          result="shadowBlurOuter2"
-        ></feGaussianBlur>
-        <feColorMatrix
-          values="0 0 0 0 0.161570617   0 0 0 0 0.163300979   0 0 0 0 0.199501812  0 0 0 0.3 0"
-          type="matrix"
-          in="shadowBlurOuter2"
-          result="shadowMatrixOuter2"
-        ></feColorMatrix>
-        <feMerge>
-          <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
-          <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
-        </feMerge>
-      </filter>
-    </defs>
-    <g
-      id="storefront-Profile-/-Icons"
-      stroke="none"
-      strokeWidth="1"
-      fill="none"
-      fillRule="evenodd"
-    >
-      <g id="Outlined" transform="translate(7.000000, -341.000000)">
-        <g
-          id="Potentail-future-property"
-          transform="translate(0.000000, 231.000000)"
-        >
-          <g
-            id="storefront-Profile-Obligation-Icon-/-Property---Storefront"
-            transform="translate(0.000000, 115.000000)"
-          >
-            <g id="Oval-Copy-4">
-              <use
-                fill="black"
-                fillOpacity="1"
-                filter="url(#storefront-filter-2)"
-                xlinkHref="#storefront-path-1"
-              ></use>
-              <use
-                fill="#FFFFFF"
-                fillRule="evenodd"
-                xlinkHref="#storefront-path-1"
-              ></use>
-            </g>
-            <path
-              d="M51.9999094,30.0000381 C52.4999082,30.0000381 52.9374072,29.8333716 53.3124063,29.5000393 C53.6874054,29.1667071 53.9061549,28.7604581 53.9686547,28.2812922 C54.0311546,27.8021264 53.9374048,27.3333775 53.6874054,26.8750456 L53.6874054,26.8750456 L48.3124182,18.8750647 C47.9374191,18.291733 47.3957534,18.0000668 46.6874221,18.0000668 L46.6874221,18.0000668 L21.3124826,18.0000668 C20.6041512,18.0000668 20.0624855,18.291733 19.6874864,18.8750647 L19.6874864,18.8750647 L14.3749991,26.8750456 C14.0833328,27.3333775 13.9687501,27.8021264 14.0312499,28.2812922 C14.0937498,28.7604581 14.3124993,29.1667071 14.6874984,29.5000393 C15.0624975,29.8333716 15.4999964,30.0000381 15.9999952,30.0000381 L15.9999952,30.0000381 L51.9999094,30.0000381 Z M35.9999475,49.9999905 C36.5416132,49.9999905 37.0103621,49.802074 37.4061942,49.4062419 C37.8020263,49.0104098 37.9999428,48.5416609 37.9999428,47.9999952 L37.9999428,47.9999952 L37.9999428,32.0000334 L33.9999523,32.0000334 L33.9999523,42.0000095 L21.9999905,42.0000095 L21.9999905,32.0000334 L17.9999905,32.0000334 L17.9999905,47.9999952 C17.9999905,48.5416609 18.197907,49.0104098 18.593739,49.4062419 C18.9895711,49.802074 19.45832,49.9999905 19.9999905,49.9999905 L19.9999905,49.9999905 L35.9999475,49.9999905 Z M48.9999237,49.9999905 C49.2915828,49.9999905 49.5311653,49.9062407 49.7186648,49.7187411 C49.9061644,49.5312416 49.9999237,49.2916591 49.9999237,48.9999928 L49.9999237,48.9999928 L49.9999237,32.0000334 L45.9999237,32.0000334 L45.9999237,48.9999928 C45.9999237,49.2916591 46.0936735,49.5312416 46.281173,49.7187411 C46.4686726,49.9062407 46.708255,49.9999905 46.9999237,49.9999905 L46.9999237,49.9999905 L48.9999237,49.9999905 Z"
-              id="s"
-              fill="#292A33"
-              fillRule="nonzero"
-            ></path>
-          </g>
-        </g>
-      </g>
-    </g>
+    <path
+      d="M0 18C0 9.51472 0 5.27208 2.63604 2.63604C5.27208 0 9.51472 0 18 0H30C38.4853 0 42.7279 0 45.364 2.63604C48 5.27208 48 9.51472 48 18V30C48 38.4853 48 42.7279 45.364 45.364C42.7279 48 38.4853 48 30 48H18C9.51472 48 5.27208 48 2.63604 45.364C0 42.7279 0 38.4853 0 30V18Z"
+      fill="#3B5BDB"
+    />
+    <path
+      d="M36.5244 20.7878C36.8705 20.7878 37.1734 20.6724 37.4329 20.4417C37.6925 20.2109 37.8439 19.9297 37.8872 19.5981C37.9305 19.2664 37.8656 18.9419 37.6925 18.6247L33.972 13.0872C33.7124 12.6834 33.3375 12.4815 32.8472 12.4815H15.2829C14.7926 12.4815 14.4177 12.6834 14.1581 13.0872L10.4809 18.6247C10.279 18.9419 10.1997 19.2664 10.243 19.5981C10.2862 19.9297 10.4376 20.2109 10.6972 20.4417C10.9568 20.6724 11.2596 20.7878 11.6057 20.7878H36.5244ZM25.4495 34.6315C25.8244 34.6315 26.1488 34.4945 26.4228 34.2205C26.6968 33.9465 26.8338 33.6221 26.8338 33.2471V22.1721H24.0651V29.094H15.7588V22.1721H12.9901V33.2471C12.9901 33.6221 13.1271 33.9465 13.4011 34.2205C13.6751 34.4945 13.9995 34.6315 14.3745 34.6315H25.4495ZM34.4479 34.6315C34.6498 34.6315 34.8156 34.5666 34.9454 34.4368C35.0752 34.307 35.1401 34.1412 35.1401 33.9393V22.1721H32.3713V33.9393C32.3713 34.1412 32.4362 34.307 32.566 34.4368C32.6958 34.5666 32.8616 34.6315 33.0635 34.6315H34.4479Z"
+      fill="#FEFEFE"
+    />
   </svg>
 );
 

package/src/components/molecules/obligation/icons/index.js

@@ -1,3 +1,5 @@
+import React from "react";
+
 import AccountBillIcon from "./AccountBillIcon";
 import AccountGenericIcon from "./AccountGenericIcon";
 import AccountConstructionIcon from "./AccountConstructionIcon";
@@ -39,22 +41,42 @@ const PROPERTIES_COMMERCIAL_AUTO_ICON = "PROPERTIES_COMMERCIAL_AUTO";
 const MISC_BILL_ICON = "MISC_SINGLE_BILL";
 
 export const iconsMap = {
-  [ACCOUNTS_GENERIC_ICON]: AccountGenericIcon,
-  [ACCOUNTS_CONSTRUCTION_ICON]: AccountConstructionIcon,
-  [ACCOUNTS_HEALTH_ICON]: AccountMedicalIcon,
-  [ACCOUNTS_DENTAL_ICON]: AccountDentalIcon,
-  [ACCOUNTS_UTILITY_ELECTRIC_ICON]: AccountElectricIcon,
-  [ACCOUNTS_UTILITY_GARBAGE_ICON]: AccountGarbageIcon,
-  [ACCOUNTS_UTILITY_GAS_ICON]: AccountGasIcon,
-  [ACCOUNTS_UTILITY_WATER_ICON]: AccountWaterIcon,
-  [PROPERTIES_PERSONAL_ICON]: PropertyPersonalIcon,
-  [PROPERTIES_GARAGE_ICON]: PropertyGarageIcon,
-  [PROPERTIES_BUSINESS_ICON]: PropertyBusinessIcon,
-  [PROPERTIES_STOREFRONT_ICON]: PropertyStorefrontIcon,
-  [PROPERTIES_APARTMENT_ICON]: PropertyApartmentIcon,
-  [PROPERTIES_LAND_ICON]: PropertyLandIcon,
-  [PROPERTIES_CAR_ICON]: PropertyCarIcon,
-  [PROPERTIES_MOTORCYCLE_ICON]: PropertyMotorcycleIcon,
-  [PROPERTIES_COMMERCIAL_AUTO_ICON]: PropertyCommercialVehicleIcon,
-  [MISC_BILL_ICON]: AccountBillIcon
+  [ACCOUNTS_GENERIC_ICON]: ({ color }) => <AccountGenericIcon color={color} />,
+  [ACCOUNTS_CONSTRUCTION_ICON]: ({ color }) => (
+    <AccountConstructionIcon color={color} />
+  ),
+  [ACCOUNTS_HEALTH_ICON]: ({ color }) => <AccountMedicalIcon color={color} />,
+  [ACCOUNTS_DENTAL_ICON]: ({ color }) => <AccountDentalIcon color={color} />,
+  [ACCOUNTS_UTILITY_ELECTRIC_ICON]: ({ color }) => (
+    <AccountElectricIcon color={color} />
+  ),
+  [ACCOUNTS_UTILITY_GARBAGE_ICON]: ({ color }) => (
+    <AccountGarbageIcon color={color} />
+  ),
+  [ACCOUNTS_UTILITY_GAS_ICON]: ({ color }) => <AccountGasIcon color={color} />,
+  [ACCOUNTS_UTILITY_WATER_ICON]: ({ color }) => (
+    <AccountWaterIcon color={color} />
+  ),
+  [PROPERTIES_PERSONAL_ICON]: ({ color }) => (
+    <PropertyPersonalIcon color={color} />
+  ),
+  [PROPERTIES_GARAGE_ICON]: ({ color }) => <PropertyGarageIcon color={color} />,
+  [PROPERTIES_BUSINESS_ICON]: ({ color }) => (
+    <PropertyBusinessIcon color={color} />
+  ),
+  [PROPERTIES_STOREFRONT_ICON]: ({ color }) => (
+    <PropertyStorefrontIcon color={color} />
+  ),
+  [PROPERTIES_APARTMENT_ICON]: ({ color }) => (
+    <PropertyApartmentIcon color={color} />
+  ),
+  [PROPERTIES_LAND_ICON]: ({ color }) => <PropertyLandIcon color={color} />,
+  [PROPERTIES_CAR_ICON]: ({ color }) => <PropertyCarIcon color={color} />,
+  [PROPERTIES_MOTORCYCLE_ICON]: ({ color }) => (
+    <PropertyMotorcycleIcon color={color} />
+  ),
+  [PROPERTIES_COMMERCIAL_AUTO_ICON]: ({ color }) => (
+    <PropertyCommercialVehicleIcon color={color} />
+  ),
+  [MISC_BILL_ICON]: ({ color }) => <AccountBillIcon color={color} />
 };

package/src/components/molecules/obligation/modules/IconModule.js

@@ -1,13 +1,18 @@
 import React from "react";
 import { iconsMap } from "../icons";
 import { Box, Cluster } from "../../../atoms/layouts";
+import { themeComponent } from "../../../../util/themeUtils";
+import { fallbackValues } from "../../../atoms/icons/Icons.theme";
+
+// Uses the theme values (singleIconColor) for the other icons, located in /atoms/icons
 
 const IconsModule = ({
   icon,
   iconDefault,
   configIconMap,
   iconValue,
-  customAttributes
+  customAttributes,
+  themeValues
 }) => {
   let Icon;
   if (typeof icon === "object") {
@@ -20,10 +25,10 @@ const IconsModule = ({
   return (
     <Box padding="0 1rem 0 0">
       <Cluster justify="center" align="center">
-        <Icon />
+        <Icon color={themeValues.singleIconColor} />
       </Cluster>
     </Box>
   );
 };
 
-export default IconsModule;
+export default themeComponent(IconsModule, "Icon", fallbackValues, "primary");

package/src/components/molecules/reset-confirmation-form/ResetConfirmatForm.theme.js

@@ -0,0 +1,9 @@
+import { colors } from "../../../constants";
+
+const { GRECIAN_GREY } = colors;
+
+const bannerBackgroundColor = GRECIAN_GREY;
+
+export const fallbackValues = {
+  bannerBackgroundColor
+};

package/src/components/molecules/reset-confirmation-form/ResetConfirmationForm.js

@@ -3,14 +3,22 @@ import { ThemeContext } from "styled-components";
 import Heading from "../../atoms/heading";
 import Paragraph from "../../atoms/paragraph";
 import { Box, Cluster } from "../../atoms/layouts";
-import { GRECIAN_GREY, CHARADE_GREY, WHITE } from "../../../constants/colors";
+import { CHARADE_GREY, WHITE } from "../../../constants/colors";
 import ButtonWithLink from "../../atoms/button-with-link";
 import { ForgotPasswordIcon } from "../../atoms/icons";
 import withWindowSize from "../../withWindowSize";
 import { FormContainer, FormInputColumn } from "../../atoms/form-layouts";
+import { fallbackValues } from "./ResetConfirmatForm.theme";
+import { createThemeValues } from "../../../util/themeUtils";
 
 const ResetConfirmationForm = () => {
-  const { isMobile } = useContext(ThemeContext);
+  const themeContext = useContext(ThemeContext);
+  const themeValues = createThemeValues(
+    themeContext,
+    fallbackValues,
+    "ResetConfirmationForm"
+  );
+  const { isMobile } = themeContext;
 
   return (
     <Box
@@ -20,7 +28,11 @@ const ResetConfirmationForm = () => {
       background={WHITE}
       boxShadow="0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
     >
-      <Box background={GRECIAN_GREY} minWidth="100%" padding="0.5rem">
+      <Box
+        background={themeValues.bannerBackgroundColor}
+        minWidth="100%"
+        padding="0.5rem"
+      >
         <Cluster justify="center" align="center">
           <ForgotPasswordIcon />
         </Cluster>

package/src/components/molecules/reset-password-success/ResetPasswordSuccess.js

@@ -3,14 +3,22 @@ import { ThemeContext } from "styled-components";
 import Heading from "../../atoms/heading";
 import Paragraph from "../../atoms/paragraph";
 import { Box, Cluster } from "../../atoms/layouts";
-import { GRECIAN_GREY, CHARADE_GREY, WHITE } from "../../../constants/colors";
+import { CHARADE_GREY, WHITE } from "../../../constants/colors";
 import ButtonWithLink from "../../atoms/button-with-link";
 import { ForgotPasswordIcon } from "../../atoms/icons";
 import withWindowSize from "../../withWindowSize";
 import { FormContainer, FormInputColumn } from "../../atoms/form-layouts";
+import { fallbackValues } from "./ResetPasswordSuccess.theme";
+import { createThemeValues } from "../../../util/themeUtils";
 
 const ResetConfirmationForm = () => {
-  const { isMobile } = useContext(ThemeContext);
+  const themeContext = useContext(ThemeContext);
+  const themeValues = createThemeValues(
+    themeContext,
+    fallbackValues,
+    "ResetPasswordSuccess"
+  );
+  const { isMobile } = themeContext;
 
   return (
     <Box
@@ -20,7 +28,11 @@ const ResetConfirmationForm = () => {
       background={WHITE}
       boxShadow="0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
     >
-      <Box background={GRECIAN_GREY} minWidth="100%" padding="0.5rem">
+      <Box
+        background={themeValues.bannerBackgroundColor}
+        minWidth="100%"
+        padding="0.5rem"
+      >
         <Cluster justify="center" align="center">
           <ForgotPasswordIcon />
         </Cluster>

package/src/components/molecules/reset-password-success/ResetPasswordSuccess.theme.js

@@ -0,0 +1,9 @@
+import { colors } from "../../../constants";
+
+const { GRECIAN_GREY } = colors;
+
+const bannerBackgroundColor = GRECIAN_GREY;
+
+export const fallbackValues = {
+  bannerBackgroundColor
+};