@thecb/components 2.2.0

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

@@ -0,0 +1,99 @@
+import React from "react";
+
+const PropertyLandIcon = () => (
+  <svg
+    width="81px"
+    height="81px"
+    viewBox="0 0 81 81"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <defs>
+      <circle id="land-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="land-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="land-Profile-/-Icons"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g id="Outlined" transform="translate(7.000000, -571.000000)">
+        <g
+          id="land-Potentail-future-property"
+          transform="translate(0.000000, 231.000000)"
+        >
+          <g
+            id="Profile-Obligation-Icon-/-Property---Land"
+            transform="translate(0.000000, 345.000000)"
+          >
+            <g id="Oval-Copy-6">
+              <use
+                fill="black"
+                fillOpacity="1"
+                filter="url(#land-filter-2)"
+                xlinkHref="#land-path-1"
+              ></use>
+              <use
+                fill="#FFFFFF"
+                fillRule="evenodd"
+                xlinkHref="#land-path-1"
+              ></use>
+            </g>
+            <path
+              d="M36.9999642,49.9999905 C37.3749633,49.9999905 37.6562127,49.8437408 37.8437122,49.5312416 C38.0312118,49.2187423 38.0416287,48.8958261 37.8749622,48.5624939 L37.8749622,48.5624939 L35.9999666,45.5000012 L35.9999666,44.0000048 L44.5624462,44.0000048 C44.8541125,44.0000048 45.1145279,43.927088 45.3436943,43.7812553 C45.5728608,43.6354226 45.7499434,43.4375061 45.8749431,43.1875067 C45.9999428,42.9375073 46.0416097,42.6770909 45.9999428,42.4062586 C45.9582759,42.1354262 45.8332762,41.8750098 45.6249437,41.6250104 L45.6249437,41.6250104 L40.6249556,36.0000238 L42.562451,36.0000238 C43.1874495,36.0000238 43.6249484,35.7291915 43.8749478,35.1875258 C44.1249472,34.6458601 44.0624474,34.1458613 43.6874483,33.6875294 L43.6874483,33.6875294 L38.7499601,28.0000429 L40.5624557,28.0000429 C40.854122,28.0000429 41.1249544,27.9271261 41.3749538,27.7812934 C41.6249532,27.6354608 41.8020358,27.4271273 41.9062025,27.1562949 C42.0103693,26.8854626 42.0416192,26.6146292 41.9999523,26.3437969 C41.9582854,26.0729645 41.8332857,25.8333811 41.6249532,25.6250486 L41.6249532,25.6250486 L34.7499696,18.312566 C34.5416371,18.1042335 34.2916377,18.0000668 33.9999714,18.0000668 C33.7083051,18.0000668 33.4583057,18.1042335 33.2499732,18.312566 L33.2499732,18.312566 L26.3749896,25.6250486 C26.1666571,25.8333811 26.0416573,26.0729645 25.9999905,26.3437969 C25.9583236,26.6146292 25.9895735,26.8854626 26.0937402,27.1562949 C26.197907,27.4271273 26.3749896,27.6354608 26.624989,27.7812934 C26.8749884,27.9271261 27.1458207,28.0000429 27.437487,28.0000429 L27.437487,28.0000429 L29.2499827,28.0000429 L24.3124945,33.6875294 C23.9374954,34.1458613 23.8749955,34.6458601 24.1249949,35.1875258 C24.3749943,35.7291915 24.8124933,36.0000238 25.4374918,36.0000238 L25.4374918,36.0000238 L27.3749872,36.0000238 L22.3749991,41.6250104 C22.1666666,41.8750098 22.0416669,42.1354262 22,42.4062586 C21.9583331,42.6770909 22,42.9375073 22.1249997,43.1875067 C22.2499994,43.4375061 22.427082,43.6354226 22.6562484,43.7812553 C22.8854149,43.927088 23.1458303,44.0000048 23.4374966,44.0000048 L23.4374966,44.0000048 L31.9999762,44.0000048 L31.9999762,45.5000012 L30.1249806,48.5624939 C29.958314,48.8958261 29.968731,49.2187423 30.1562306,49.5312416 C30.3437301,49.8437408 30.6249794,49.9999905 30.9999785,49.9999905 L30.9999785,49.9999905 L36.9999642,49.9999905 Z"
+              id="t"
+              fill="#292A33"
+              fillRule="nonzero"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export default PropertyLandIcon;

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

@@ -0,0 +1,99 @@
+import React from "react";
+
+const PropertyMotorcycleIcon = () => (
+  <svg
+    width="81px"
+    height="81px"
+    viewBox="0 0 81 81"
+    version="1.1"
+    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>
+  </svg>
+);
+
+export default PropertyMotorcycleIcon;

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

@@ -0,0 +1,94 @@
+import React from "react";
+
+const PropertyPersonalIcon = () => (
+  <svg
+    width="81px"
+    height="81px"
+    viewBox="0 0 81 81"
+    version="1.1"
+    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"
+      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>
+  </svg>
+);
+
+export default PropertyPersonalIcon;

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

@@ -0,0 +1,100 @@
+import React from "react";
+
+const PropertyStorefrontIcon = () => (
+  <svg
+    width="81px"
+    height="81px"
+    viewBox="0 0 81 81"
+    version="1.1"
+    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>
+  </svg>
+);
+
+export default PropertyStorefrontIcon;

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

@@ -0,0 +1,60 @@
+import AccountBillIcon from "./AccountBillIcon";
+import AccountGenericIcon from "./AccountGenericIcon";
+import AccountConstructionIcon from "./AccountConstructionIcon";
+import AccountDentalIcon from "./AccountDentalIcon";
+import AccountElectricIcon from "./AccountElectricIcon";
+import AccountGarbageIcon from "./AccountGarbageIcon";
+import AccountGasIcon from "./AccountGasIcon";
+import AccountMedicalIcon from "./AccountMedicalIcon";
+import AccountWaterIcon from "./AccountWaterIcon";
+import PropertyApartmentIcon from "./PropertyApartmentIcon";
+import PropertyBusinessIcon from "./PropertyBusinessIcon";
+import PropertyCarIcon from "./PropertyCarIcon";
+import PropertyCommercialVehicleIcon from "./PropertyCommercialVehicleIcon";
+import PropertyGarageIcon from "./PropertyGarageIcon";
+import PropertyLandIcon from "./PropertyLandIcon";
+import PropertyMotorcycleIcon from "./PropertyMotorcycleIcon";
+import PropertyStorefrontIcon from "./PropertyStorefrontIcon";
+import PropertyPersonalIcon from "./PropertyPersonalIcon";
+
+const ACCOUNTS_GENERIC_ICON = "ACCOUNTS_GENERIC";
+const ACCOUNTS_CONSTRUCTION_ICON = "ACCOUNTS_CONSTRUCTION";
+const ACCOUNTS_HEALTH_ICON = "ACCOUNTS_HEALTH";
+const ACCOUNTS_DENTAL_ICON = "ACCOUNTS_DENTAL";
+const ACCOUNTS_UTILITY_ELECTRIC_ICON = "ACCOUNTS_UTILITY_ELECTRIC";
+const ACCOUNTS_UTILITY_GAS_ICON = "ACCOUNTS_UTILITY_GAS";
+const ACCOUNTS_UTILITY_GARBAGE_ICON = "ACCOUNTS_UTILITY_GARBAGE";
+const ACCOUNTS_UTILITY_WATER_ICON = "ACCOUNTS_UTILITY_WATER";
+
+const PROPERTIES_PERSONAL_ICON = "PROPERTIES_PERSONAL";
+const PROPERTIES_GARAGE_ICON = "PROPERTIES_GARAGE";
+const PROPERTIES_BUSINESS_ICON = "PROPERTIES_BUSINESS";
+const PROPERTIES_STOREFRONT_ICON = "PROPERTIES_STOREFRONT";
+const PROPERTIES_APARTMENT_ICON = "PROPERTIES_APARTMENT";
+const PROPERTIES_LAND_ICON = "PROPERTIES_LAND";
+const PROPERTIES_CAR_ICON = "PROPERTIES_CAR";
+const PROPERTIES_MOTORCYCLE_ICON = "PROPERTIES_MOTORCYCLE";
+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
+};

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

@@ -0,0 +1,3 @@
+import Obligation from "./Obligation";
+
+export default Obligation;

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

@@ -0,0 +1,36 @@
+import React from "react";
+import Text from "../../../atoms/text";
+import AmountCallout from "../../../atoms/amount-callout";
+import { Box, Stack } from "../../../atoms/layouts";
+import {
+  FONT_WEIGHT_SEMIBOLD,
+  FONT_WEIGHT_REGULAR
+} from "../../../../constants/style_constants";
+import { REGENT_GREY } from "../../../../constants/colors";
+import { displayCurrency } from "../../../../util/general";
+
+const AmountModule = ({ totalAmountDue, autoPayEnabled, isMobile }) => (
+  <Box padding="0 0.25rem 0 0">
+    <Stack childGap="0">
+      <Text variant="pS" weight={FONT_WEIGHT_SEMIBOLD}>
+        {isMobile ? "Total Due" : "Total Amount Due"}
+      </Text>
+      <AmountCallout
+        amount={displayCurrency(totalAmountDue)}
+        textAlign="right"
+      />
+      {autoPayEnabled && (
+        <Text
+          variant="p"
+          weight={FONT_WEIGHT_REGULAR}
+          color={REGENT_GREY}
+          extraStyles={`font-style: italic`}
+        >
+          {isMobile ? "Autopay On" : "Autopay Enabled"}
+        </Text>
+      )}
+    </Stack>
+  </Box>
+);
+
+export default AmountModule;

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { iconsMap } from "../icons";
+import { Box, Cluster } from "../../../atoms/layouts";
+
+const IconsModule = ({
+  icon,
+  iconDefault,
+  configIconMap,
+  iconValue,
+  customAttributes
+}) => {
+  let Icon;
+  if (typeof icon === "object") {
+    const iconID = customAttributes?.[iconValue];
+    const iconMapValue = configIconMap?.[iconID] ?? iconDefault;
+    Icon = iconsMap[iconMapValue];
+  } else {
+    Icon = iconsMap[icon];
+  }
+  return (
+    <Box padding="0 1rem 0 0">
+      <Cluster justify="center" align="center">
+        <Icon />
+      </Cluster>
+    </Box>
+  );
+};
+
+export default IconsModule;

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

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { Box, Cluster } from "../../../atoms/layouts";
+import ButtonWithAction from "../../../atoms/button-with-action";
+import { GHOST_GREY } from "../../../../constants/colors";
+
+const PaymentDetailsActions = ({ isMobile, obligations, config, actions }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const { obligationSlug } = config;
+  const { createPaymentFromProfile, setDetailedObligation } = actions;
+  const detailsSlug =
+    config.type === "ACCOUNT"
+      ? `/profile/accounts/details/${obligationSlug}`
+      : `/profile/properties/details/${obligationSlug}`;
+  const handleClick = obligations => {
+    setIsLoading(true);
+    createPaymentFromProfile(obligations, config);
+  };
+  const handleDetailsClick = () => {
+    setDetailedObligation(obligations, config, detailsSlug);
+  };
+  return (
+    <Box
+      padding="16px 0 0"
+      minWidth="100%"
+      borderSize="1px"
+      borderColor={GHOST_GREY}
+      borderWidthOverride="1px 0 0 0"
+      key={`${obligations[0].id}-actions`}
+    >
+      <Cluster
+        justify={isMobile ? "center" : "flex-end"}
+        align="center"
+        childGap="0"
+      >
+        <Box
+          padding={isMobile ? "0 8px 0 0" : "8px"}
+          extraStyles={isMobile && `flex-grow: 1;`}
+        >
+          <ButtonWithAction
+            variant={isMobile ? "smallSecondary" : "secondary"}
+            text={
+              config.type === "ACCOUNT" ? "Account Details" : "Property Details"
+            }
+            action={handleDetailsClick}
+            dataQa="Account Details"
+            extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+          />
+        </Box>
+        <Box
+          padding={isMobile ? "0 0 0 8px" : "8px"}
+          extraStyles={isMobile && `flex-grow: 1;`}
+        >
+          <ButtonWithAction
+            isLoading={isLoading}
+            action={() => handleClick(obligations)}
+            text="Make Payment"
+            variant={isMobile ? "smallPrimary" : "primary"}
+            dataQa="Make Payment"
+            extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+          />
+        </Box>
+      </Cluster>
+    </Box>
+  );
+};
+
+export default PaymentDetailsActions;

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { Box, Stack } from "../../../atoms/layouts";
+import Heading from "../../../atoms/heading";
+import Text from "../../../atoms/text";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../../constants/style_constants";
+
+const TitleModule = ({ title, subtitle, titleColor, subtitleColor }) => (
+  <Box padding="0">
+    <Stack childGap="0">
+      <Heading
+        variant="h6"
+        weight={FONT_WEIGHT_SEMIBOLD}
+        color={titleColor}
+        aria-level="2"
+      >
+        {title}
+      </Heading>
+      <Text variant="pS" color={subtitleColor} aria-level="3">
+        {subtitle}
+      </Text>
+    </Stack>
+  </Box>
+);
+
+export default TitleModule;

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

@@ -0,0 +1,6 @@
+import IconModule from "./IconModule";
+import TitleModule from "./TitleModule";
+import AmountModule from "./AmountModule";
+import PaymentDetailsActions from "./PaymentDetailsActions";
+
+export { IconModule, TitleModule, AmountModule, PaymentDetailsActions };