@thecb/components 7.7.1-beta.1 → 7.7.1-beta.2

package/dist/index.cjs.js

@@ -6318,6 +6318,14 @@ var throttle = function throttle(delay, fn) {
     return fn.apply(void 0, arguments);
   };
 };
+var titleCaseWord = function titleCaseWord(word) {
+  return word.charAt(0).toUpperCase() + word.slice(1);
+};
+var titleCaseString = function titleCaseString(string) {
+  return string.split(" ").map(function (word, index, string) {
+    return index === 0 || index === string.length - 1 || word.length > 3 ? titleCaseWord(word.toLowerCase()) : word;
+  }).join(" ");
+};
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6335,7 +6343,9 @@ var general = /*#__PURE__*/Object.freeze({
   inputPlaceholderTextStyle: inputPlaceholderTextStyle,
   inputDisabledStyle: inputDisabledStyle,
   MOBILE_WIDTH: MOBILE_WIDTH,
-  throttle: throttle
+  throttle: throttle,
+  titleCaseWord: titleCaseWord,
+  titleCaseString: titleCaseString
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children", "variant"];
@@ -13821,33 +13831,6 @@ var GenericCard = function GenericCard() {
   }));
 };
 
-var BankItemWrapper = styled__default.div.withConfig({
-  displayName: "PaymentIcon__BankItemWrapper",
-  componentId: "sc-1k0jl35-0"
-})(["display:flex;justify-content:flex-start;align-items:center;"]);
-var BankAccountText = styled__default.h4.withConfig({
-  displayName: "PaymentIcon__BankAccountText",
-  componentId: "sc-1k0jl35-1"
-})(["color:", ";font-size:1rem;font-weight:400;line-height:1.5rem;text-align:left;margin-right:0.5rem;display:inline-block;"], CHARADE_GREY);
-var CHECKING = "CHECKING";
-var SAVINGS = "SAVINGS";
-
-var PaymentIcon = function PaymentIcon(_ref) {
-  var lastFour = _ref.lastFour,
-      accountType = _ref.accountType,
-      autoPay = _ref.autoPay;
-  return /*#__PURE__*/React__default.createElement(BankItemWrapper, null, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0.25rem 0 0 0",
-    extraStyles: "margin-right: 1rem;"
-  }, /*#__PURE__*/React__default.createElement(BankIcon, null)), /*#__PURE__*/React__default.createElement(Stack, {
-    childGap: "0"
-  }, accountType === CHECKING && /*#__PURE__*/React__default.createElement(BankAccountText, null, "Checking Account ending in ", lastFour), accountType === SAVINGS && /*#__PURE__*/React__default.createElement(BankAccountText, null, "Savings Account ending in ", lastFour), autoPay && /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: "p",
-    color: REGENT_GREY,
-    extraStyles: "font-style: italic;"
-  }, "Autopay Enabled")));
-};
-
 var IconAdd = function IconAdd() {
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -16057,6 +16040,389 @@ var ProfileImage = function ProfileImage() {
   }));
 };
 
+var RevenueManagementImage = function RevenueManagementImage() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "179",
+    height: "96",
+    viewBox: "0 0 179 96",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M142.284 17.5583C139.832 17.3968 137.892 15.3563 137.892 12.8627C137.892 10.2637 139.999 8.15681 142.598 8.15681C143.492 8.15681 144.327 8.40592 145.039 8.8385C145.84 5.91385 148.517 3.76465 151.696 3.76465C155.307 3.76465 158.27 6.53709 158.573 10.0693C159.212 9.65335 159.975 9.41171 160.794 9.41171C163.047 9.41171 164.872 11.2377 164.872 13.4901C164.872 15.7426 163.047 17.5686 160.794 17.5686C160.688 17.5686 160.584 17.5646 160.48 17.5567V17.5686H151.696H142.598H142.284V17.5583Z",
+    fill: "#15749D",
+    fillOpacity: "0.3"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19.9314 64.6275C18.5453 64.6275 17.4216 63.5039 17.4216 62.1177C17.4216 60.7316 18.5453 59.6079 19.9314 59.6079C20.3208 59.6079 20.6895 59.6966 21.0184 59.8549C21.5697 58.9541 22.5627 58.353 23.6961 58.353C25.0923 58.353 26.2755 59.265 26.6824 60.5258C27.0041 60.341 27.377 60.2354 27.7746 60.2354C28.9874 60.2354 29.9707 61.2186 29.9707 62.4315C29.9707 63.6443 28.9874 64.6275 27.7746 64.6275H23.6961H19.9314Z",
+    fill: "#15749D",
+    fillOpacity: "0.3"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M60.4021 8.78431H53.1864H48.7254V8.77384C48.6447 8.78078 48.563 8.78431 48.4805 8.78431C46.9211 8.78431 45.657 7.52018 45.657 5.96078C45.657 4.40139 46.9211 3.13725 48.4805 3.13725C48.6454 3.13725 48.8069 3.15139 48.9641 3.1785C49.4907 1.34307 51.1817 0 53.1864 0C55.0545 0 56.6502 1.1663 57.2851 2.81047C57.4719 2.7321 57.677 2.68878 57.8923 2.68878C58.4432 2.68878 58.9278 2.97248 59.2076 3.40162C59.5704 3.232 59.9752 3.13725 60.4021 3.13725C61.9615 3.13725 63.2256 4.40139 63.2256 5.96078C63.2256 7.43768 62.0917 8.64973 60.6469 8.77384V8.78431H60.4021Z",
+    fill: "#15749D",
+    fillOpacity: "0.3"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M109.029 91.9217C109.029 94.1741 100.461 96.0001 89.8921 96.0001C79.3229 96.0001 70.7549 94.1741 70.7549 91.9217C70.7549 89.6692 79.3229 87.8433 89.8921 87.8433C100.461 87.8433 109.029 89.6692 109.029 91.9217Z",
+    fill: "#15749D",
+    fillOpacity: "0.3"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M49.4216 32H130.363V80.3137C130.363 81.0068 129.801 81.5686 129.108 81.5686H50.6765C49.9835 81.5686 49.4216 81.0068 49.4216 80.3137V32Z",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M47.5393 22.9333C47.5393 21.0102 49.0983 19.4512 51.0214 19.4512H128.763C130.686 19.4512 132.245 21.0102 132.245 22.9333V32.0002H47.5393V22.9333Z",
+    fill: "#E5E7EC"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M62.5982 25.7243C62.5982 26.4166 62.0363 26.9778 61.3433 26.9778C60.6502 26.9778 60.0884 26.4166 60.0884 25.7243C60.0884 25.0319 60.6502 24.4707 61.3433 24.4707C62.0363 24.4707 62.5982 25.0319 62.5982 25.7243Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M58.8335 25.7243C58.8335 26.4166 58.2717 26.9778 57.5786 26.9778C56.8856 26.9778 56.3237 26.4166 56.3237 25.7243C56.3237 25.0319 56.8856 24.4707 57.5786 24.4707C58.2717 24.4707 58.8335 25.0319 58.8335 25.7243Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M55.0686 25.7243C55.0686 26.4166 54.5068 26.9778 53.8137 26.9778C53.1207 26.9778 52.5588 26.4166 52.5588 25.7243C52.5588 25.0319 53.1207 24.4707 53.8137 24.4707C54.5068 24.4707 55.0686 25.0319 55.0686 25.7243Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M129.108 21.3335H50.6766C49.9835 21.3335 49.4217 21.8954 49.4217 22.5884V80.3139C49.4217 81.007 49.9835 81.5688 50.6766 81.5688H129.108C129.801 81.5688 130.363 81.007 130.363 80.3139V22.5884C130.363 21.8954 129.801 21.3335 129.108 21.3335ZM50.6766 19.4512C48.9439 19.4512 47.5393 20.8558 47.5393 22.5884V80.3139C47.5393 82.0466 48.9439 83.4512 50.6766 83.4512H129.108C130.841 83.4512 132.245 82.0466 132.245 80.3139V22.5884C132.245 20.8558 130.841 19.4512 129.108 19.4512H50.6766Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M157.343 75.9214C157.343 75.2283 157.905 74.6665 158.598 74.6665H169.265C169.958 74.6665 170.52 75.2283 170.52 75.9214C170.52 76.6145 169.958 77.1763 169.265 77.1763H158.598C157.905 77.1763 157.343 76.6145 157.343 75.9214Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M132.245 74.6665H152.83C153.529 74.6665 154.095 75.233 154.095 75.9318C154.095 76.6306 153.529 77.1971 152.83 77.1971H132.245V74.6665Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M29.9707 75.9214C29.9707 75.2283 30.5325 74.6665 31.2256 74.6665H47.5393V77.1763H31.2256C30.5325 77.1763 29.9707 76.6145 29.9707 75.9214Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M19.304 75.9214C19.304 75.2283 19.8658 74.6665 20.5589 74.6665H25.5785C26.2715 74.6665 26.8334 75.2283 26.8334 75.9214C26.8334 76.6145 26.2715 77.1763 25.5785 77.1763H20.5589C19.8658 77.1763 19.304 76.6145 19.304 75.9214Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M87.696 45.8038V51.4508H93.3431V45.8038C91.5455 45.0049 89.4936 45.0049 87.696 45.8038ZM90.5196 48.941C91.0394 48.941 91.4608 48.5197 91.4608 47.9999C91.4608 47.4801 91.0394 47.0587 90.5196 47.0587C89.9998 47.0587 89.5784 47.4801 89.5784 47.9999C89.5784 48.5197 89.9998 48.941 90.5196 48.941Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M112.794 50.5097C112.794 56.2275 108.159 60.8626 102.441 60.8626C96.7233 60.8626 92.0881 56.2275 92.0881 50.5097C92.0881 44.7919 96.7233 40.1567 102.441 40.1567C108.159 40.1567 112.794 44.7919 112.794 50.5097Z",
+    fill: "#E4F4FD"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M102.441 59.2798C107.285 59.2798 111.211 55.3533 111.211 50.5097C111.211 45.6661 107.285 41.7395 102.441 41.7395C97.5975 41.7395 93.6709 45.6661 93.6709 50.5097C93.6709 55.3533 97.5975 59.2798 102.441 59.2798ZM102.441 60.8626C108.159 60.8626 112.794 56.2275 112.794 50.5097C112.794 44.7919 108.159 40.1567 102.441 40.1567C96.7233 40.1567 92.0881 44.7919 92.0881 50.5097C92.0881 56.2275 96.7233 60.8626 102.441 60.8626Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M102.441 50.3601C101.355 50.3601 100.571 50.992 100.379 51.6677C100.259 52.0881 99.8213 52.3319 99.4009 52.2123C98.9805 52.0926 98.7367 51.6549 98.8563 51.2345C99.2787 49.7502 100.79 48.7773 102.441 48.7773C104.092 48.7773 105.603 49.7502 106.026 51.2345C106.145 51.6549 105.902 52.0926 105.481 52.2123C105.061 52.3319 104.623 52.0881 104.503 51.6677C104.311 50.992 103.528 50.3601 102.441 50.3601Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M88.951 50.5097C88.951 56.2275 84.3158 60.8626 78.5981 60.8626C72.8803 60.8626 68.2451 56.2275 68.2451 50.5097C68.2451 44.7919 72.8803 40.1567 78.5981 40.1567C84.3158 40.1567 88.951 44.7919 88.951 50.5097Z",
+    fill: "#E4F4FD"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M78.5981 59.2798C83.4417 59.2798 87.3682 55.3533 87.3682 50.5097C87.3682 45.6661 83.4417 41.7395 78.5981 41.7395C73.7544 41.7395 69.8279 45.6661 69.8279 50.5097C69.8279 55.3533 73.7544 59.2798 78.5981 59.2798ZM78.5981 60.8626C84.3158 60.8626 88.951 56.2275 88.951 50.5097C88.951 44.7919 84.3158 40.1567 78.5981 40.1567C72.8803 40.1567 68.2451 44.7919 68.2451 50.5097C68.2451 56.2275 72.8803 60.8626 78.5981 60.8626Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M78.598 50.3601C77.5115 50.3601 76.728 50.992 76.5357 51.6677C76.4161 52.0881 75.9783 52.3319 75.5579 52.2123C75.1375 52.0926 74.8937 51.6549 75.0133 51.2345C75.4357 49.7502 76.9472 48.7773 78.598 48.7773C80.2488 48.7773 81.7604 49.7502 82.1827 51.2345C82.3024 51.6549 82.0586 52.0926 81.6382 52.2123C81.2178 52.3319 80.78 52.0881 80.6604 51.6677C80.4681 50.992 79.6846 50.3601 78.598 50.3601Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M82.6764 64.4634C83.1135 64.4634 83.4678 64.8177 83.4678 65.2548C83.4678 66.2038 84.2372 66.9732 85.1862 66.9732H94.598C95.547 66.9732 96.3164 66.2038 96.3164 65.2548C96.3164 64.8177 96.6707 64.4634 97.1078 64.4634C97.5449 64.4634 97.8992 64.8177 97.8992 65.2548C97.8992 67.078 96.4212 68.556 94.598 68.556H85.1862C83.363 68.556 81.885 67.078 81.885 65.2548C81.885 64.8177 82.2393 64.4634 82.6764 64.4634Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M47.5393 30.1177H132.245V32H47.5393V30.1177Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    filter: "url(#filter0_d_2573_15404)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M21.8137 35.1372C21.8137 34.4442 22.3756 33.8823 23.0686 33.8823H47.5392V42.0392H23.0686C22.3756 42.0392 21.8137 41.4773 21.8137 40.7843V35.1372Z",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M40.0098 37.9607C40.0098 37.4409 40.4311 37.0195 40.9509 37.0195H47.5392V38.9019H40.9509C40.4311 38.9019 40.0098 38.4805 40.0098 37.9607Z",
+    fill: "#959CA8"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M24.9509 37.9607C24.9509 37.4409 25.3723 37.0195 25.8921 37.0195H36.5588C37.0786 37.0195 37.4999 37.4409 37.4999 37.9607C37.4999 38.4805 37.0786 38.9019 36.5588 38.9019H25.8921C25.3723 38.9019 24.9509 38.4805 24.9509 37.9607Z",
+    fill: "#959CA8"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    filter: "url(#filter1_d_2573_15404)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M5.5 42.0391C5.5 41.346 6.06184 40.7842 6.7549 40.7842H55.0686C55.7617 40.7842 56.3235 41.346 56.3235 42.0391V47.6861C56.3235 48.3792 55.7617 48.941 55.0686 48.941H6.7549C6.06184 48.941 5.5 48.3792 5.5 47.6861V42.0391Z",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M41.2646 44.8626C41.2646 44.3428 41.686 43.9214 42.2058 43.9214H52.245C52.7648 43.9214 53.1862 44.3428 53.1862 44.8626C53.1862 45.3824 52.7648 45.8037 52.245 45.8037H42.2058C41.686 45.8037 41.2646 45.3824 41.2646 44.8626Z",
+    fill: "#959CA8"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M25.5784 44.8626C25.5784 44.3428 25.9997 43.9214 26.5195 43.9214H37.8137C38.3335 43.9214 38.7548 44.3428 38.7548 44.8626C38.7548 45.3824 38.3335 45.8037 37.8137 45.8037H26.5195C25.9997 45.8037 25.5784 45.3824 25.5784 44.8626Z",
+    fill: "#959CA8"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M18.6765 44.8626C18.6765 44.3428 19.0979 43.9214 19.6177 43.9214H22.1275C22.6473 43.9214 23.0687 44.3428 23.0687 44.8626C23.0687 45.3824 22.6473 45.8037 22.1275 45.8037H19.6177C19.0979 45.8037 18.6765 45.3824 18.6765 44.8626Z",
+    fill: "#959CA8"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M8.63721 44.8626C8.63721 44.3428 9.05859 43.9214 9.57838 43.9214H15.2254C15.7452 43.9214 16.1666 44.3428 16.1666 44.8626C16.1666 45.3824 15.7452 45.8037 15.2254 45.8037H9.57838C9.05859 45.8037 8.63721 45.3824 8.63721 44.8626Z",
+    fill: "#959CA8"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    filter: "url(#filter2_d_2573_15404)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M132.245 27.6079H167.382C168.075 27.6079 168.637 28.1697 168.637 28.8628V34.5099C168.637 35.2029 168.075 35.7648 167.382 35.7648H132.245V27.6079Z",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M157.343 31.6863C157.343 31.1665 157.765 30.7451 158.284 30.7451H164.559C165.079 30.7451 165.5 31.1665 165.5 31.6863C165.5 32.2061 165.079 32.6275 164.559 32.6275H158.284C157.765 32.6275 157.343 32.2061 157.343 31.6863Z",
+    fill: "#959CA8"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M150.441 31.6863C150.441 31.1665 150.863 30.7451 151.382 30.7451H153.892C154.412 30.7451 154.833 31.1665 154.833 31.6863C154.833 32.2061 154.412 32.6275 153.892 32.6275H151.382C150.863 32.6275 150.441 32.2061 150.441 31.6863Z",
+    fill: "#959CA8"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M137.892 31.6863C137.892 31.1665 138.313 30.7451 138.833 30.7451H146.99C147.51 30.7451 147.931 31.1665 147.931 31.6863C147.931 32.2061 147.51 32.6275 146.99 32.6275H138.833C138.313 32.6275 137.892 32.2061 137.892 31.6863Z",
+    fill: "#959CA8"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M132.245 30.7451H134.441C134.961 30.7451 135.382 31.1665 135.382 31.6863C135.382 32.2061 134.961 32.6275 134.441 32.6275H132.245V30.7451Z",
+    fill: "#959CA8"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    filter: "url(#filter3_d_2573_15404)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M122.833 35.7647C122.833 35.0716 123.395 34.5098 124.088 34.5098H172.402C173.095 34.5098 173.657 35.0716 173.657 35.7647V41.4117C173.657 42.1048 173.095 42.6666 172.402 42.6666H124.088C123.395 42.6666 122.833 42.1048 122.833 41.4117V35.7647Z",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M159.225 38.5881C159.225 38.0684 159.647 37.647 160.167 37.647H169.578C170.098 37.647 170.519 38.0684 170.519 38.5881C170.519 39.1079 170.098 39.5293 169.578 39.5293H160.167C159.647 39.5293 159.225 39.1079 159.225 38.5881Z",
+    fill: "#959CA8"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M143.539 38.5891C143.539 38.0693 143.96 37.6479 144.48 37.6479H155.774C156.294 37.6479 156.716 38.0693 156.716 38.5891C156.716 39.1089 156.294 39.5303 155.774 39.5303H144.48C143.96 39.5303 143.539 39.1089 143.539 38.5891Z",
+    fill: "#959CA8"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M136.01 38.5891C136.01 38.0693 136.431 37.6479 136.951 37.6479H140.088C140.608 37.6479 141.029 38.0693 141.029 38.5891C141.029 39.1089 140.608 39.5303 140.088 39.5303H136.951C136.431 39.5303 136.01 39.1089 136.01 38.5891Z",
+    fill: "#959CA8"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M125.97 38.5891C125.97 38.0693 126.392 37.6479 126.912 37.6479H132.559C133.078 37.6479 133.5 38.0693 133.5 38.5891C133.5 39.1089 133.078 39.5303 132.559 39.5303H126.912C126.392 39.5303 125.97 39.1089 125.97 38.5891Z",
+    fill: "#959CA8"
+  })), /*#__PURE__*/React__default.createElement("path", {
+    d: "M85.8138 89.7252V83.4507H88.3236V91.2853C88.3236 91.8098 87.8984 92.235 87.3739 92.235H82.0491C81.356 92.235 80.7942 91.6732 80.7942 90.9801C80.7942 90.287 81.356 89.7252 82.0491 89.7252H85.8138Z",
+    fill: "#15749D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M91.4609 91.2853V83.4507H93.9707V89.7252H97.7354C98.4285 89.7252 98.9903 90.287 98.9903 90.9801C98.9903 91.6732 98.4285 92.235 97.7354 92.235H92.4106C91.8861 92.235 91.4609 91.8098 91.4609 91.2853Z",
+    fill: "#15749D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M132.245 62.7452V65.8824L140.19 70.4222C140.685 70.7055 141.31 70.6219 141.713 70.2182L152.324 59.6079H148.559L141.2 67.5796C141.1 67.688 140.939 67.7129 140.811 67.6398L132.245 62.7452Z",
+    fill: "#3B5BDB"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M145.422 58.353C145.422 57.66 145.983 57.0981 146.677 57.0981H156.716C157.409 57.0981 157.971 57.66 157.971 58.353C157.971 59.0461 157.409 59.6079 156.716 59.6079H146.677C145.983 59.6079 145.422 59.0461 145.422 58.353Z",
+    fill: "#15749D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M65.5753 47.93C66.1393 47.9988 66.5408 48.5117 66.4721 49.0757C66.4108 49.5788 66.3792 50.0915 66.3792 50.612C66.3792 52.5215 66.8047 54.329 67.5652 55.9474C67.8068 56.4617 67.5858 57.0744 67.0716 57.3161C66.5573 57.5577 65.9445 57.3368 65.7029 56.8225C64.8164 54.9361 64.3215 52.8304 64.3215 50.612C64.3215 50.0081 64.3582 49.4123 64.4296 48.8268C64.4983 48.2628 65.0112 47.8613 65.5753 47.93Z",
+    fill: "#15749D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M47.5393 66.5095V63.3722L46.2844 62.7448C52.2747 60.2933 65.7354 55.2154 65.7354 55.2154V52.0781L42.2512 61.8155C41.3742 62.1791 41.3309 63.4053 42.1801 63.8299L47.5393 66.5095Z",
+    fill: "#15749D"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    filter: "url(#filter4_d_2573_15404)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M142.912 39.5293C142.912 38.1432 144.036 37.0195 145.422 37.0195H157.971C159.357 37.0195 160.48 38.1432 160.48 39.5293V52.0784C160.48 53.4645 159.357 54.5882 157.971 54.5882H145.422C144.036 54.5882 142.912 53.4645 142.912 52.0784V39.5293Z",
+    fill: "#15749D"
+  })), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M152.597 43.0261C153.484 43.9134 153.568 45.2997 152.849 46.2816L154.965 48.3975C155.014 48.4468 155.014 48.5267 154.965 48.5759L154.597 48.9436C154.548 48.9929 154.468 48.9929 154.419 48.9436L152.303 46.8276C151.321 47.5468 149.934 47.4628 149.047 46.5755C148.067 45.5953 148.067 44.0062 149.047 43.0261C150.027 42.0459 151.616 42.0459 152.597 43.0261ZM152.051 46.0295C152.729 45.3509 152.729 44.2508 152.051 43.5722C151.372 42.8936 150.272 42.8936 149.593 43.5722C148.915 44.2508 148.915 45.3509 149.593 46.0295C150.272 46.708 151.372 46.708 152.051 46.0295Z",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask0_2573_15404",
+    style: {
+      maskType: "alpha"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "148",
+    y: "42",
+    width: "8",
+    height: "7"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M152.597 43.0261C153.484 43.9134 153.568 45.2997 152.849 46.2816L154.965 48.3975C155.014 48.4468 155.014 48.5267 154.965 48.5759L154.597 48.9436C154.548 48.9929 154.468 48.9929 154.419 48.9436L152.303 46.8276C151.321 47.5468 149.934 47.4628 149.047 46.5755C148.067 45.5953 148.067 44.0062 149.047 43.0261C150.027 42.0459 151.616 42.0459 152.597 43.0261ZM152.051 46.0295C152.729 45.3509 152.729 44.2508 152.051 43.5722C151.372 42.8936 150.272 42.8936 149.593 43.5722C148.915 44.2508 148.915 45.3509 149.593 46.0295C150.272 46.708 151.372 46.708 152.051 46.0295Z",
+    fill: "white"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#mask0_2573_15404)"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    x: "146.677",
+    y: "40.7842",
+    width: "10.0392",
+    height: "10.0392",
+    fill: "white"
+  })), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("filter", {
+    id: "filter0_d_2573_15404",
+    x: "16.8137",
+    y: "28.8823",
+    width: "35.7256",
+    height: "18.1567",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React__default.createElement("feFlood", {
+    floodOpacity: "0",
+    result: "BackgroundImageFix"
+  }), /*#__PURE__*/React__default.createElement("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"
+  }), /*#__PURE__*/React__default.createElement("feOffset", null), /*#__PURE__*/React__default.createElement("feGaussianBlur", {
+    stdDeviation: "2.5"
+  }), /*#__PURE__*/React__default.createElement("feComposite", {
+    in2: "hardAlpha",
+    operator: "out"
+  }), /*#__PURE__*/React__default.createElement("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"
+  }), /*#__PURE__*/React__default.createElement("feBlend", {
+    mode: "normal",
+    in2: "BackgroundImageFix",
+    result: "effect1_dropShadow_2573_15404"
+  }), /*#__PURE__*/React__default.createElement("feBlend", {
+    mode: "normal",
+    "in": "SourceGraphic",
+    in2: "effect1_dropShadow_2573_15404",
+    result: "shape"
+  })), /*#__PURE__*/React__default.createElement("filter", {
+    id: "filter1_d_2573_15404",
+    x: "0.5",
+    y: "35.7842",
+    width: "60.8235",
+    height: "18.1567",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React__default.createElement("feFlood", {
+    floodOpacity: "0",
+    result: "BackgroundImageFix"
+  }), /*#__PURE__*/React__default.createElement("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"
+  }), /*#__PURE__*/React__default.createElement("feOffset", null), /*#__PURE__*/React__default.createElement("feGaussianBlur", {
+    stdDeviation: "2.5"
+  }), /*#__PURE__*/React__default.createElement("feComposite", {
+    in2: "hardAlpha",
+    operator: "out"
+  }), /*#__PURE__*/React__default.createElement("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"
+  }), /*#__PURE__*/React__default.createElement("feBlend", {
+    mode: "normal",
+    in2: "BackgroundImageFix",
+    result: "effect1_dropShadow_2573_15404"
+  }), /*#__PURE__*/React__default.createElement("feBlend", {
+    mode: "normal",
+    "in": "SourceGraphic",
+    in2: "effect1_dropShadow_2573_15404",
+    result: "shape"
+  })), /*#__PURE__*/React__default.createElement("filter", {
+    id: "filter2_d_2573_15404",
+    x: "127.245",
+    y: "22.6079",
+    width: "46.3921",
+    height: "18.1567",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React__default.createElement("feFlood", {
+    floodOpacity: "0",
+    result: "BackgroundImageFix"
+  }), /*#__PURE__*/React__default.createElement("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"
+  }), /*#__PURE__*/React__default.createElement("feOffset", null), /*#__PURE__*/React__default.createElement("feGaussianBlur", {
+    stdDeviation: "2.5"
+  }), /*#__PURE__*/React__default.createElement("feComposite", {
+    in2: "hardAlpha",
+    operator: "out"
+  }), /*#__PURE__*/React__default.createElement("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"
+  }), /*#__PURE__*/React__default.createElement("feBlend", {
+    mode: "normal",
+    in2: "BackgroundImageFix",
+    result: "effect1_dropShadow_2573_15404"
+  }), /*#__PURE__*/React__default.createElement("feBlend", {
+    mode: "normal",
+    "in": "SourceGraphic",
+    in2: "effect1_dropShadow_2573_15404",
+    result: "shape"
+  })), /*#__PURE__*/React__default.createElement("filter", {
+    id: "filter3_d_2573_15404",
+    x: "117.833",
+    y: "29.5098",
+    width: "60.8235",
+    height: "18.1567",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React__default.createElement("feFlood", {
+    floodOpacity: "0",
+    result: "BackgroundImageFix"
+  }), /*#__PURE__*/React__default.createElement("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"
+  }), /*#__PURE__*/React__default.createElement("feOffset", null), /*#__PURE__*/React__default.createElement("feGaussianBlur", {
+    stdDeviation: "2.5"
+  }), /*#__PURE__*/React__default.createElement("feComposite", {
+    in2: "hardAlpha",
+    operator: "out"
+  }), /*#__PURE__*/React__default.createElement("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"
+  }), /*#__PURE__*/React__default.createElement("feBlend", {
+    mode: "normal",
+    in2: "BackgroundImageFix",
+    result: "effect1_dropShadow_2573_15404"
+  }), /*#__PURE__*/React__default.createElement("feBlend", {
+    mode: "normal",
+    "in": "SourceGraphic",
+    in2: "effect1_dropShadow_2573_15404",
+    result: "shape"
+  })), /*#__PURE__*/React__default.createElement("filter", {
+    id: "filter4_d_2573_15404",
+    x: "132.822",
+    y: "26.9292",
+    width: "37.7492",
+    height: "37.7494",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React__default.createElement("feFlood", {
+    floodOpacity: "0",
+    result: "BackgroundImageFix"
+  }), /*#__PURE__*/React__default.createElement("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"
+  }), /*#__PURE__*/React__default.createElement("feOffset", null), /*#__PURE__*/React__default.createElement("feGaussianBlur", {
+    stdDeviation: "5.04515"
+  }), /*#__PURE__*/React__default.createElement("feComposite", {
+    in2: "hardAlpha",
+    operator: "out"
+  }), /*#__PURE__*/React__default.createElement("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.5 0"
+  }), /*#__PURE__*/React__default.createElement("feBlend", {
+    mode: "normal",
+    in2: "BackgroundImageFix",
+    result: "effect1_dropShadow_2573_15404"
+  }), /*#__PURE__*/React__default.createElement("feBlend", {
+    mode: "normal",
+    "in": "SourceGraphic",
+    in2: "effect1_dropShadow_2573_15404",
+    result: "shape"
+  }))));
+};
+
 var FindIconSmall = function FindIconSmall(_ref) {
   var themeValues = _ref.themeValues,
       _ref$iconIndex = _ref.iconIndex,
@@ -16099,6 +16465,33 @@ var FindIconSmall = function FindIconSmall(_ref) {
 
 var FindIconSmall$1 = themeComponent(FindIconSmall, "Icons", fallbackValues$2, "primary");
 
+var HistoryIconSmall = function HistoryIconSmall(_ref) {
+  var themeValues = _ref.themeValues,
+      _ref$iconIndex = _ref.iconIndex;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M3.33337 8.33333C3.33337 7.8731 3.70647 7.5 4.16671 7.5H15.8334C16.2936 7.5 16.6667 7.8731 16.6667 8.33333V16.6667C16.6667 17.1269 16.2936 17.5 15.8334 17.5H4.16671C3.70647 17.5 3.33337 17.1269 3.33337 16.6667V8.33333Z",
+    fill: themeValues.singleIconColor
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.08337 4.75C4.66916 4.75 4.33337 5.08579 4.33337 5.5C4.33337 5.91421 4.66916 6.25 5.08337 6.25H14.9134C15.3276 6.25 15.6634 5.91421 15.6634 5.5C15.6634 5.08579 15.3276 4.75 14.9134 4.75H5.08337Z",
+    fill: themeValues.singleIconColor
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.03337 2.25C5.64677 2.25 5.33337 2.5634 5.33337 2.95C5.33337 3.3366 5.64678 3.65 6.03337 3.65H13.9634C14.35 3.65 14.6634 3.3366 14.6634 2.95C14.6634 2.5634 14.35 2.25 13.9634 2.25H6.03337Z",
+    fill: themeValues.singleIconColor
+  }));
+};
+
+var HistoryIconSmall$1 = themeComponent(HistoryIconSmall, "Icons", fallbackValues$2, "primary");
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -23198,6 +23591,40 @@ var creditCardFormat = createFormat(creditCardFormats, formatDelimiter);
 var expirationDateFormat = createFormat(expirationDateFormats, formatDelimiter);
 var phoneFormat = createFormat(phoneFormats, formatDelimiter);
 var moneyFormat = createFormat(moneyFormats, formatDelimiter);
+var renderCardStatus = function renderCardStatus(expirationStatus, expireDate) {
+  var textAlign = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "right";
+  var as = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "span";
+  var ACTIVE = "ACTIVE";
+  var EXPIRING_SOON = "EXPIRING_SOON";
+  var EXPIRED = "EXPIRED";
+  var textMargin = textAlign === "right" ? "auto" : "0";
+
+  switch (expirationStatus) {
+    case ACTIVE:
+      return /*#__PURE__*/React__default.createElement(Text$1, {
+        as: as,
+        variant: "pXS",
+        color: ASH_GREY,
+        extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
+      }, "Exp Date ", expireDate);
+
+    case EXPIRING_SOON:
+      return /*#__PURE__*/React__default.createElement(Text$1, {
+        as: as,
+        variant: "pXS",
+        color: FIRE_YELLOW,
+        extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
+      }, "Expiring Soon ", expireDate);
+
+    case EXPIRED:
+      return /*#__PURE__*/React__default.createElement(Text$1, {
+        as: as,
+        variant: "pXS",
+        color: ASH_GREY,
+        extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
+      }, "Expired");
+  }
+};
 
 var formats = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -23209,7 +23636,8 @@ var formats = /*#__PURE__*/Object.freeze({
   creditCardFormat: creditCardFormat,
   expirationDateFormat: expirationDateFormat,
   phoneFormat: phoneFormat,
-  moneyFormat: moneyFormat
+  moneyFormat: moneyFormat,
+  renderCardStatus: renderCardStatus
 });
 
 var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
@@ -23902,9 +24330,50 @@ var fallbackValues$l = {
   autopayTextColor: autopayTextColor
 };
 
-var ACTIVE = "ACTIVE";
-var EXPIRING_SOON = "EXPIRING_SOON";
-var EXPIRED = "EXPIRED";
+var BankItemWrapper = styled__default.div.withConfig({
+  displayName: "FormattedBankAccount__BankItemWrapper",
+  componentId: "sc-18hcgw4-0"
+})(["display:flex;justify-content:flex-start;align-items:center;"]);
+var BankAccountText = styled__default.h4.withConfig({
+  displayName: "FormattedBankAccount__BankAccountText",
+  componentId: "sc-18hcgw4-1"
+})(["color:", ";font-size:1rem;font-weight:400;line-height:1.5rem;text-align:left;margin-right:0.5rem;display:inline-block;"], function (_ref) {
+  var color = _ref.color;
+  return color;
+});
+var CHECKING = "CHECKING";
+var SAVINGS = "SAVINGS";
+
+var FormattedBankAccount = function FormattedBankAccount(_ref2) {
+  var lastFour = _ref2.lastFour,
+      accountType = _ref2.accountType,
+      autoPay = _ref2.autoPay,
+      themeValues = _ref2.themeValues;
+  return /*#__PURE__*/React__default.createElement(BankItemWrapper, null, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0.25rem 0 0 0",
+    extraStyles: "margin-right: 1rem;"
+  }, /*#__PURE__*/React__default.createElement(BankIcon, null)), /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "0"
+  }, accountType === CHECKING && /*#__PURE__*/React__default.createElement(BankAccountText, {
+    color: themeValues.textColor
+  }, "Checking Account ending in ", lastFour), accountType === SAVINGS && /*#__PURE__*/React__default.createElement(BankAccountText, {
+    color: themeValues.textColor
+  }, "Savings Account ending in ", lastFour), autoPay && /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: "p",
+    color: themeValues.autopayTextColor,
+    extraStyles: "font-style: italic;"
+  }, "Autopay Enabled")));
+};
+
+var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$l);
+
+var textColor$2 = "".concat(CHARADE_GREY);
+var autopayTextColor$1 = "".concat(REGENT_GREY);
+var fallbackValues$m = {
+  textColor: textColor$2,
+  autopayTextColor: autopayTextColor$1
+};
+
 var CreditCardWrapper = styled__default.div.withConfig({
   displayName: "FormattedCreditCard__CreditCardWrapper",
   componentId: "sc-s0ta5l-0"
@@ -23920,32 +24389,6 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
       expireDate = _ref.expireDate,
       expirationStatus = _ref.expirationStatus,
       themeValues = _ref.themeValues;
-
-  var renderCardStatus = function renderCardStatus() {
-    switch (expirationStatus) {
-      case ACTIVE:
-        return /*#__PURE__*/React__default.createElement(Paragraph$1, {
-          variant: "pXS",
-          color: ASH_GREY,
-          textAlign: "left"
-        }, "Exp Date ", expireDate);
-
-      case EXPIRING_SOON:
-        return /*#__PURE__*/React__default.createElement(Paragraph$1, {
-          variant: "pXS",
-          color: FIRE_YELLOW,
-          textAlign: "left"
-        }, "Expiring Soon ", expireDate);
-
-      case EXPIRED:
-        return /*#__PURE__*/React__default.createElement(Paragraph$1, {
-          variant: "pXS",
-          color: ASH_GREY,
-          textAlign: "left"
-        }, "Expired");
-    }
-  };
-
   return /*#__PURE__*/React__default.createElement(CreditCardWrapper, null, /*#__PURE__*/React__default.createElement(CCIconWrapper, null, /*#__PURE__*/React__default.createElement(GenericCard, null)), /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -23956,14 +24399,14 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
     color: themeValues.textColor,
     textAlign: "left",
     extraStyles: "display: inline-block;"
-  }, "Card ending in ".concat(lastFour)), expireDate && /*#__PURE__*/React__default.createElement(React.Fragment, null, renderCardStatus())), autoPay && /*#__PURE__*/React__default.createElement(Text$1, {
+  }, "Card ending in ".concat(lastFour)), expireDate && /*#__PURE__*/React__default.createElement(React.Fragment, null, renderCardStatus(expirationStatus, expireDate, "left", "p"))), autoPay && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "p",
     color: themeValues.autopayTextColor,
     extraStyles: "font-style: italic;"
   }, "Autopay Enabled")));
 };
 
-var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$l);
+var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$m);
 
 var Hamburger = styled__default.button.withConfig({
   displayName: "HamburgerButton__Hamburger",
@@ -24045,7 +24488,7 @@ var fontSize$8 = {
   h5: "1.375rem",
   h6: "1.25rem"
 };
-var fallbackValues$m = {
+var fallbackValues$n = {
   fontFamily: fontFamily$5,
   fontSize: fontSize$8
 };
@@ -24087,7 +24530,7 @@ var Heading = function Heading(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 };
 
-var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$m, "h1");
+var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$n, "h1");
 
 var Jumbo = function Jumbo(_ref) {
   var showButton = _ref.showButton,
@@ -24161,7 +24604,7 @@ var fontWeight$4 = {
   pL: "600",
   h6: "700"
 };
-var fallbackValues$n = {
+var fallbackValues$o = {
   fontWeight: fontWeight$4
 };
 
@@ -24189,7 +24632,7 @@ var LabeledAmount = function LabeledAmount(_ref) {
   }, amount));
 };
 
-var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$n, "default");
+var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$o, "default");
 
 var weightTitle = {
   "default": "600",
@@ -24199,7 +24642,7 @@ var paragraphVariant = {
   "default": "pL",
   small: "pS"
 };
-var fallbackValues$o = {
+var fallbackValues$p = {
   weightTitle: weightTitle,
   paragraphVariant: paragraphVariant
 };
@@ -24228,10 +24671,10 @@ var LineItem = function LineItem(_ref) {
   }, amount));
 };
 
-var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$o, "default");
+var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$p, "default");
 
 var color$8 = "#15749D";
-var fallbackValues$p = {
+var fallbackValues$q = {
   color: color$8
 };
 
@@ -24270,7 +24713,7 @@ var Spinner$1 = function Spinner(_ref4) {
   })));
 };
 
-var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$p);
+var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$q);
 
 var Loading = function Loading() {
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -24536,7 +24979,7 @@ var height$1 = {
   "default": "3rem",
   large: "192px"
 };
-var fallbackValues$q = {
+var fallbackValues$r = {
   color: color$9,
   height: height$1
 };
@@ -24645,12 +25088,12 @@ var Placeholder = function Placeholder(_ref2) {
   }, text)))))))))));
 };
 
-var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$q, "default");
+var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$r, "default");
 
 var backgroundColor$4 = {
   "default": "".concat(WHITE)
 };
-var fallbackValues$r = {
+var fallbackValues$s = {
   backgroundColor: backgroundColor$4
 };
 
@@ -24678,7 +25121,7 @@ var ProcessingFee = function ProcessingFee(_ref) {
   }));
 };
 
-var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$r, "default");
+var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$s, "default");
 
 
 
@@ -24740,7 +25183,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref) {
 
 var activeColor$5 = "".concat(MATISSE_BLUE);
 var inactiveColor = "".concat(GREY_CHATEAU);
-var fallbackValues$s = {
+var fallbackValues$t = {
   activeColor: activeColor$5,
   inactiveColor: inactiveColor
 };
@@ -24830,12 +25273,12 @@ var RadioButton$1 = function RadioButton(_ref2) {
   })));
 };
 
-var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$s);
+var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$t);
 
 var border$2 = {
   "default": "1px solid #caced8"
 };
-var fallbackValues$t = {
+var fallbackValues$u = {
   border: border$2
 };
 
@@ -24910,7 +25353,7 @@ var SearchableSelect = function SearchableSelect(_ref) {
   })))));
 };
 
-var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$t, "default");
+var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$u, "default");
 
 var borderColor$2 = {
   "default": "".concat(GREY_CHATEAU)
@@ -24918,7 +25361,7 @@ var borderColor$2 = {
 var borderSize = {
   "default": "1px"
 };
-var fallbackValues$u = {
+var fallbackValues$v = {
   borderColor: borderColor$2,
   borderSize: borderSize
 };
@@ -24935,7 +25378,7 @@ var SolidDivider = function SolidDivider(_ref) {
   });
 };
 
-var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$u, "default");
+var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$v, "default");
 
 var placeHolderOptionUS = {
   text: "Please select state",
@@ -35519,7 +35962,7 @@ var offBackground = "".concat(REGENT_GREY);
 var labelStyles = "\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n";
 var rightLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row;\n");
 var leftLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row-reverse;\n");
-var fallbackValues$v = {
+var fallbackValues$w = {
   onBackground: onBackground,
   disabledBackground: disabledBackground,
   white: white,
@@ -35695,7 +36138,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   }, label))));
 };
 
-var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$v);
+var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$w);
 
 var background$1 = "".concat(ATHENS_GREY);
 var white$1 = "".concat(WHITE);
@@ -35744,7 +36187,7 @@ var backgroundColor$5 = WHITE;
 var imageBackgroundColor = INFO_BLUE;
 var headerBackgroundColor = STORM_GREY;
 var headerColor = WHITE;
-var fallbackValues$w = {
+var fallbackValues$x = {
   backgroundColor: backgroundColor$5,
   imageBackgroundColor: imageBackgroundColor,
   headerBackgroundColor: headerBackgroundColor,
@@ -35767,11 +36210,11 @@ var CardImage = styled__default.img.withConfig({
 
 var titleColor = BRIGHT_GREY;
 var titleWeight = FONT_WEIGHT_BOLD;
-var textColor$2 = BRIGHT_GREY;
-var fallbackValues$x = {
+var textColor$3 = BRIGHT_GREY;
+var fallbackValues$y = {
   titleColor: titleColor,
   titleWeight: titleWeight,
-  textColor: textColor$2
+  textColor: textColor$3
 };
 
 var CardText = function CardText(_ref) {
@@ -35792,7 +36235,7 @@ var CardText = function CardText(_ref) {
     color: themeValues.textColor
   }, text))));
 };
-var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$x);
+var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$y);
 
 var CardHeader = function CardHeader(_ref) {
   var backgroundColor = _ref.backgroundColor,
@@ -35889,12 +36332,12 @@ var Card = function Card(_ref) {
   }), children)));
 };
 
-var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$w);
+var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$x);
 
 var fontFamily$6 = "Public Sans, sans-serif";
 var activeColor$6 = MATISSE_BLUE;
 var linkColor$3 = CHARADE_GREY;
-var fallbackValues$y = {
+var fallbackValues$z = {
   fontFamily: fontFamily$6,
   activeColor: activeColor$6,
   linkColor: linkColor$3
@@ -35927,7 +36370,7 @@ var NavTab = function NavTab(_ref) {
   }, label));
 };
 
-var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$y);
+var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$z);
 
 var NavTabs = function NavTabs(_ref) {
   var tabsConfig = _ref.tabsConfig,
@@ -37885,7 +38328,7 @@ AddressForm.mapStateToProps = mapStateToProps$1;
 AddressForm.mapDispatchToProps = mapDispatchToProps;
 
 var backgroundColor$6 = "#ebeffb";
-var fallbackValues$z = {
+var fallbackValues$A = {
   backgroundColor: backgroundColor$6
 };
 
@@ -37937,7 +38380,7 @@ var Banner = function Banner(_ref) {
   }, /*#__PURE__*/React__default.createElement(Image, null))));
 };
 
-var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$z);
+var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$A);
 
 var ChangePasswordForm = function ChangePasswordForm(_ref) {
   var _newPasswordErrorMess;
@@ -38079,7 +38522,7 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
 var titleColor$1 = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
-var fallbackValues$A = {
+var fallbackValues$B = {
   titleColor: titleColor$1,
   headingBackgroundColor: headingBackgroundColor,
   bodyBackgroundColor: bodyBackgroundColor
@@ -38206,7 +38649,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   }, children))));
 };
 
-var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$A);
+var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$B);
 
 var ClipboardIcon = function ClipboardIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -38467,8 +38910,8 @@ var EditableListItemControls = styled__default.div.withConfig({
   componentId: "sc-10ehkz7-1"
 })(["display:flex;justify-content:space-evenly;align-items:center;"]);
 
-var ACTIVE$1 = "ACTIVE";
-var EXPIRED$1 = "EXPIRED";
+var ACTIVE = "ACTIVE";
+var EXPIRED = "EXPIRED";
 
 var EditableList = function EditableList(_ref) {
   var _ref$title = _ref.title,
@@ -38525,13 +38968,13 @@ var EditableList = function EditableList(_ref) {
         modalOpen = _useState2[0],
         toggleModal = _useState2[1];
 
-    var expiredItem = (_item$expirationStatu = item === null || item === void 0 ? void 0 : item.expirationStatus) !== null && _item$expirationStatu !== void 0 ? _item$expirationStatu : ACTIVE$1;
+    var expiredItem = (_item$expirationStatu = item === null || item === void 0 ? void 0 : item.expirationStatus) !== null && _item$expirationStatu !== void 0 ? _item$expirationStatu : ACTIVE;
     return /*#__PURE__*/React__default.createElement(EditableListItem, {
       listItemSize: !!item.id && autoPayMethods !== null && autoPayMethods !== void 0 && autoPayMethods.some(function (methodID) {
         return methodID === item.id;
       }) ? "big" : listItemSize,
       key: item.id || item,
-      disabled: expiredItem === EXPIRED$1
+      disabled: expiredItem === EXPIRED
     }, /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
       color: CHARADE_GREY
@@ -38792,7 +39235,7 @@ EmailForm.mapDispatchToProps = mapDispatchToProps$3;
 
 var footerBackgroundColor = BRIGHT_GREY;
 var subfooterBackgroundColor = STORM_GREY;
-var fallbackValues$B = {
+var fallbackValues$C = {
   footerBackgroundColor: footerBackgroundColor,
   subfooterBackgroundColor: subfooterBackgroundColor
 };
@@ -38824,7 +39267,7 @@ var FooterWithSubfooter = function FooterWithSubfooter(_ref) {
   }));
 };
 
-var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$B);
+var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$C);
 
 var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
   var _EmailErrorMessages;
@@ -38874,10 +39317,10 @@ ForgotPasswordForm.reducer = reducer$4;
 ForgotPasswordForm.mapStateToProps = mapStateToProps$5;
 ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
-var textColor$3 = "#ffffff";
+var textColor$4 = "#ffffff";
 var backgroundColor$7 = "#182848";
-var fallbackValues$C = {
-  textColor: textColor$3,
+var fallbackValues$D = {
+  textColor: textColor$4,
   backgroundColor: backgroundColor$7
 };
 
@@ -38933,7 +39376,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
   }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter))));
 };
 
-var HighlightTabRow$1 = /*#__PURE__*/React.memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$C));
+var HighlightTabRow$1 = /*#__PURE__*/React.memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$D));
 
 var AccountBillIcon = function AccountBillIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -44085,7 +44528,7 @@ var backgroundColor$8 = {
   largeTitle: WHITE,
   small: WHITE
 };
-var fallbackValues$D = {
+var fallbackValues$E = {
   fontSize: fontSize$9,
   fontWeight: fontWeight$5,
   fontColor: fontColor,
@@ -44144,7 +44587,7 @@ var Module = function Module(_ref) {
   }, children)));
 };
 
-var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$D, "default"));
+var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$E, "default"));
 
 var backgroundColor$9 = {
   profile: "#3b414d",
@@ -44154,7 +44597,7 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$E = {
+var fallbackValues$F = {
   backgroundColor: backgroundColor$9,
   shadowColor: shadowColor
 };
@@ -44195,7 +44638,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
   }, menuContent));
 };
 
-var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$E, "profile");
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$F, "profile");
 
 var menu = posed.div({
   invisible: {
@@ -44251,7 +44694,11 @@ var NavMenuMobile = function NavMenuMobile(_ref) {
   }, menuContent));
 };
 
-var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$E, "profile");
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$F, "profile");
+
+var ACH_METHOD = "BANK_ACCOUNT";
+var CC_METHOD = "CREDIT_CARD";
+var CASH_METHOD = "CASH";
 
 var IconsModule = function IconsModule(_ref) {
   var icon = _ref.icon,
@@ -44308,7 +44755,7 @@ var activeColor$7 = "#0E506D";
 var linkColor$4 = "#3176AA";
 var fontWeight$6 = FONT_WEIGHT_REGULAR;
 var modalLinkHoverFocus = "outline: none;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-color: #317D4F;";
-var fallbackValues$F = {
+var fallbackValues$G = {
   color: color$a,
   hoverColor: hoverColor$5,
   activeColor: activeColor$7,
@@ -44332,13 +44779,27 @@ var AutopayModal = function AutopayModal(_ref) {
       isPaymentPlan = _ref.isPaymentPlan,
       nextAutopayDate = _ref.nextAutopayDate,
       dueDate = _ref.dueDate,
-      inactive = _ref.inactive;
-  var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
+      inactive = _ref.inactive,
+      description = _ref.description,
+      subDescription = _ref.subDescription,
+      allowedPaymentInstruments = _ref.allowedPaymentInstruments;
+
+  var generateMethodNeededText = function generateMethodNeededText(planText, allowedPaymentInstruments) {
+    var allowsCard = allowedPaymentInstruments.includes(CC_METHOD);
+    var allowsACH = allowedPaymentInstruments.includes(ACH_METHOD);
+    var methodRequired = allowsCard && !allowsACH ? "debit or credit card payment method" : !allowsCard && allowsACH ? "checking account payment method" : "payment method";
+    return "To setup ".concat(planText, " you must have a saved ").concat(methodRequired, " and address in your profile. Do you want to save these now?");
+  };
+
+  var plan = isPaymentPlan ? "your payment plan" : "autopay";
+  var shortPlan = isPaymentPlan ? "Payment Plan" : "Autopay";
+  var deactivateText = "deactivate ".concat(shortPlan, " for ").concat(description, ": ").concat(subDescription);
+  var activateText = "Set Up ".concat(shortPlan, " for ").concat(description, ": ").concat(subDescription);
   var nextDate = dueDate || nextAutopayDate;
   var modalExtraProps = {
-    modalHeaderText: autoPayActive ? "Deactivate ".concat(planType) : "Set Up ".concat(planType),
-    modalBodyText: autoPayActive ? "Are you sure you want to deactivate ".concat(isPaymentPlan ? "your payment plan" : "autopay", "? ").concat(!inactive && nextDate ? "Your next payment will be due on ".concat(nextDate, ".") : "") : "To set up ".concat(isPaymentPlan ? "a payment plan" : "autopay", " you must save a payment method and address in your profile. Do you want to save these now?"),
-    continueButtonText: autoPayActive ? "Disable ".concat(planType) : "Add to Profile",
+    modalHeaderText: autoPayActive ? titleCaseString(deactivateText) : titleCaseString(activateText),
+    modalBodyText: autoPayActive ? "Are you sure you want to deactivate ".concat(plan, "? ").concat(!inactive && nextDate ? "Your next payment will be due on ".concat(nextDate, ".") : "") : generateMethodNeededText(plan, allowedPaymentInstruments),
+    continueButtonText: autoPayActive ? "Disable ".concat(shortPlan) : "Add to Profile",
     useDangerButton: autoPayActive,
     continueAction: autoPayActive ? function () {
       deactivatePaymentSchedule(isPaymentPlan ? paymentPlanSchedule : autoPaySchedule, isPaymentPlan);
@@ -44354,7 +44815,7 @@ var AutopayModal = function AutopayModal(_ref) {
       case "secondary":
         {
           return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-            text: autoPayActive ? "Turn off ".concat(planType) : "Set Up ".concat(planType),
+            text: autoPayActive ? "Turn off ".concat(shortPlan) : "Set Up ".concat(shortPlan),
             variant: "secondary",
             action: function action() {
               toggleModal(true);
@@ -44367,7 +44828,7 @@ var AutopayModal = function AutopayModal(_ref) {
       case "tertiary":
         {
           return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-            text: autoPayActive ? "Manage ".concat(planType) : "Set Up ".concat(planType),
+            text: autoPayActive ? "Manage ".concat(shortPlan) : "Set Up ".concat(shortPlan),
             variant: "tertiary",
             action: function action() {
               toggleModal(true);
@@ -44399,12 +44860,12 @@ var AutopayModal = function AutopayModal(_ref) {
               e.key === "Enter" && toggleModal(true);
             },
             tabIndex: "0",
-            dataQa: "".concat(planType, " On"),
+            dataQa: "".concat(shortPlan, " On"),
             color: SEA_GREEN,
             weight: themeValues.fontWeight,
             hoverStyles: themeValues.modalLinkHoverFocus,
             extraStyles: "padding-left: 0.25rem;"
-          }, "".concat(planType, " ").concat(nextAutopayDate))));
+          }, "".concat(shortPlan, " ").concat(nextAutopayDate))));
         }
     }
   };
@@ -44420,7 +44881,7 @@ var AutopayModal = function AutopayModal(_ref) {
   }, modalExtraProps), renderAutoPayControl());
 };
 
-var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$F);
+var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$G);
 
 var AmountModule = function AmountModule(_ref) {
   var totalAmountDue = _ref.totalAmountDue,
@@ -44431,7 +44892,10 @@ var AmountModule = function AmountModule(_ref) {
       autoPaySchedule = _ref.autoPaySchedule,
       paymentPlanSchedule = _ref.paymentPlanSchedule,
       isPaymentPlan = _ref.isPaymentPlan,
-      nextAutopayDate = _ref.nextAutopayDate;
+      nextAutopayDate = _ref.nextAutopayDate,
+      description = _ref.description,
+      subDescription = _ref.subDescription,
+      allowedPaymentInstruments = _ref.allowedPaymentInstruments;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -44460,7 +44924,10 @@ var AmountModule = function AmountModule(_ref) {
     paymentPlanSchedule: paymentPlanSchedule,
     isPaymentPlan: isPaymentPlan,
     nextAutopayDate: nextAutopayDate,
-    controlType: "link"
+    controlType: "link",
+    description: description,
+    subDescription: subDescription,
+    allowedPaymentInstruments: allowedPaymentInstruments
   })));
 };
 
@@ -44479,7 +44946,10 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
       isPaymentPlan = _ref.isPaymentPlan,
       nextAutopayDate = _ref.nextAutopayDate,
       obligationAssocID = _ref.obligationAssocID,
-      dueDate = _ref.dueDate;
+      dueDate = _ref.dueDate,
+      description = _ref.description,
+      subDescription = _ref.subDescription,
+      allowedPaymentInstruments = _ref.allowedPaymentInstruments;
   var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
 
   var _useState = React.useState(false),
@@ -44535,7 +45005,10 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     autoPaySchedule: autoPaySchedule,
     paymentPlanSchedule: paymentPlanSchedule,
     isPaymentPlan: isPaymentPlan,
-    nextAutopayDate: nextAutopayDate
+    nextAutopayDate: nextAutopayDate,
+    description: description,
+    subDescription: subDescription,
+    allowedPaymentInstruments: allowedPaymentInstruments
   }))), /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "16px" : "0"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
@@ -44575,7 +45048,10 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     paymentPlanSchedule: paymentPlanSchedule,
     isPaymentPlan: isPaymentPlan,
     nextAutopayDate: nextAutopayDate,
-    dueDate: dueDate
+    dueDate: dueDate,
+    description: description,
+    subDescription: subDescription,
+    allowedPaymentInstruments: allowedPaymentInstruments
   })), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
@@ -44665,7 +45141,10 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
       dueDate = _ref.dueDate,
       agencyName = _ref.agencyName,
       configType = _ref.configType,
-      actions = _ref.actions;
+      actions = _ref.actions,
+      description = _ref.description,
+      subDescription = _ref.subDescription,
+      allowedPaymentInstruments = _ref.allowedPaymentInstruments;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -44704,7 +45183,10 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
     obligationAssocID: obligationAssocID,
     dueDate: dueDate,
     controlType: "secondary",
-    inactive: true
+    inactive: true,
+    description: description,
+    subDescription: subDescription,
+    allowedPaymentInstruments: allowedPaymentInstruments
   })), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     extraStyles: "flex-grow: 1;"
@@ -44746,7 +45228,7 @@ var InactiveTitleModule = function InactiveTitleModule(_ref) {
 };
 
 var Obligation = function Obligation(_ref) {
-  var _firstObligation$cust, _firstObligation$desc, _firstObligation$subD;
+  var _obligations$, _firstObligation$cust;
 
   var config = _ref.config,
       obligations = _ref.obligations,
@@ -44781,7 +45263,13 @@ var Obligation = function Obligation(_ref) {
     The top level desc/subdesc for all obligations in a collection is the same
     (Collection accounts look different in the Account Details page)
   */
-  var firstObligation = obligations[0];
+  var firstObligation = (_obligations$ = obligations === null || obligations === void 0 ? void 0 : obligations[0]) !== null && _obligations$ !== void 0 ? _obligations$ : {};
+  var _firstObligation$allo = firstObligation.allowedPaymentInstruments,
+      allowedPaymentInstruments = _firstObligation$allo === void 0 ? [CASH_METHOD, CC_METHOD, ACH_METHOD] : _firstObligation$allo,
+      _firstObligation$desc = firstObligation.description,
+      description = _firstObligation$desc === void 0 ? "Account" : _firstObligation$desc,
+      _firstObligation$subD = firstObligation.subDescription,
+      subDescription = _firstObligation$subD === void 0 ? obligationAssocID : _firstObligation$subD;
   var customAttributes = (_firstObligation$cust = firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.customAttributes) !== null && _firstObligation$cust !== void 0 ? _firstObligation$cust : {};
   var boxShadowValue = "0px 2px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
   var activeObligation = /*#__PURE__*/React__default.createElement(Box, {
@@ -44789,7 +45277,7 @@ var Obligation = function Obligation(_ref) {
     borderRadius: "4px",
     boxShadow: boxShadowValue,
     as: "section",
-    "aria-label": "".concat((_firstObligation$desc = firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.description) !== null && _firstObligation$desc !== void 0 ? _firstObligation$desc : "account", " ").concat((_firstObligation$subD = firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.subDescription) !== null && _firstObligation$subD !== void 0 ? _firstObligation$subD : obligationAssocID),
+    "aria-label": "".concat(description, " - ").concat(subDescription),
     border: "1px solid ".concat(GRECIAN_GREY),
     borderWidthOverride: "1px 0 0 0"
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -44818,8 +45306,8 @@ var Obligation = function Obligation(_ref) {
     iconValue: config.iconValue,
     customAttributes: customAttributes
   }), /*#__PURE__*/React__default.createElement(TitleModule, {
-    title: firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.description,
-    subtitle: firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.subDescription,
+    title: description,
+    subtitle: subDescription,
     titleColor: BRIGHT_GREY,
     isMobile: isMobile
   }))), !isMobile && /*#__PURE__*/React__default.createElement(AmountModule, {
@@ -44833,7 +45321,10 @@ var Obligation = function Obligation(_ref) {
     autoPaySchedule: autoPaySchedule,
     paymentPlanSchedule: paymentPlanSchedule,
     isPaymentPlan: isPaymentPlan,
-    nextAutopayDate: nextAutopayDate
+    nextAutopayDate: nextAutopayDate,
+    description: description,
+    subDescription: subDescription,
+    allowedPaymentInstruments: allowedPaymentInstruments
   }))), !isMobile && /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -44848,7 +45339,10 @@ var Obligation = function Obligation(_ref) {
     isMobile: isMobile,
     isPaymentPlan: isPaymentPlan,
     nextAutopayDate: nextAutopayDate,
-    obligationAssocID: obligationAssocID
+    obligationAssocID: obligationAssocID,
+    description: description,
+    subDescription: subDescription,
+    allowedPaymentInstruments: allowedPaymentInstruments
   }))), isMobile && /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -44863,7 +45357,10 @@ var Obligation = function Obligation(_ref) {
     isMobile: isMobile,
     isPaymentPlan: isPaymentPlan,
     nextAutopayDate: nextAutopayDate,
-    obligationAssocID: obligationAssocID
+    obligationAssocID: obligationAssocID,
+    description: description,
+    subDescription: subDescription,
+    allowedPaymentInstruments: allowedPaymentInstruments
   }));
   var inactiveObligation = /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -44916,7 +45413,10 @@ var Obligation = function Obligation(_ref) {
     obligationAssocID: obligationAssocID,
     dueDate: dueDate,
     agencyName: agencyName,
-    configType: config.type
+    configType: config.type,
+    description: description,
+    subDescription: subDescription,
+    allowedPaymentInstruments: allowedPaymentInstruments
   }))), isMobile && /*#__PURE__*/React__default.createElement(InactiveControlsModule, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -44930,7 +45430,10 @@ var Obligation = function Obligation(_ref) {
     obligationAssocID: obligationAssocID,
     dueDate: dueDate,
     agencyName: agencyName,
-    configType: config.type
+    configType: config.type,
+    description: description,
+    subDescription: subDescription,
+    allowedPaymentInstruments: allowedPaymentInstruments
   }))));
   return inactive ? inactiveObligation : activeObligation;
 };
@@ -45232,7 +45735,7 @@ var labeledAmountTotal = {
   "default": "h6",
   small: "p"
 };
-var fallbackValues$G = {
+var fallbackValues$H = {
   backgroundColor: backgroundColor$a,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
@@ -45483,7 +45986,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
   });
 };
 
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$G, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$H, "default");
 
 var linkColor$5 = {
   "default": "#3176AA"
@@ -45500,7 +46003,7 @@ var fontWeight$7 = {
 var modalLinkHoverFocus$1 = {
   "default": "outline: none; text-decoration: underline;"
 };
-var fallbackValues$H = {
+var fallbackValues$I = {
   linkColor: linkColor$5,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
@@ -45559,7 +46062,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
   }, link));
 };
 
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$H, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$I, "default");
 
 var PaymentFormACH = function PaymentFormACH(_ref) {
   var _routingNumberErrors, _accountNumberErrors;
@@ -46165,7 +46668,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$3 = "".concat(GREY_CHATEAU);
 var focusStyles = "outline: none;";
-var fallbackValues$I = {
+var fallbackValues$J = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -46182,7 +46685,8 @@ var fallbackValues$I = {
       hideRadioButton: boolean, (keeps section displayed but hides radio and disables open/close function),
       hidden: boolean, (hides section entirely)
       dataQa: string,
-      content: <React Component(s)> e.g.: <Box><Stack>cool content stuff</Stack></Box> (any collection of components will work)
+      content: <React Component(s)> e.g.: <Box><Stack>cool content stuff</Stack></Box> (any collection of components will work),
+      rightTitleContent: <React Component(s)> (rendered on the very right of the title section, use to supplement "rightIcons" with text, as in expired CC status, or render other custom content)
     }
   
   Also takes an "openSection" which should equal the id of the section that should be open
@@ -46195,10 +46699,6 @@ var fallbackValues$I = {
 
 */
 
-var ACTIVE$2 = "ACTIVE";
-var EXPIRING_SOON$1 = "EXPIRING_SOON";
-var EXPIRED$2 = "EXPIRED";
-
 var RadioSection = function RadioSection(_ref) {
   var themeValues = _ref.themeValues,
       isMobile = _ref.isMobile,
@@ -46221,34 +46721,6 @@ var RadioSection = function RadioSection(_ref) {
     }
   };
 
-  var renderCardStatus = function renderCardStatus(item) {
-    var expirationStatus = item.expirationStatus,
-        expireDate = item.expireDate;
-
-    switch (expirationStatus) {
-      case ACTIVE$2:
-        return /*#__PURE__*/React__default.createElement(Text$1, {
-          variant: "pXS",
-          color: ASH_GREY,
-          extraStyles: "text-align: right;"
-        }, "Exp Date ", expireDate);
-
-      case EXPIRING_SOON$1:
-        return /*#__PURE__*/React__default.createElement(Text$1, {
-          variant: "pXS",
-          color: FIRE_YELLOW,
-          extraStyles: "text-align: right;"
-        }, "Expiring Soon ", expireDate);
-
-      case EXPIRED$2:
-        return /*#__PURE__*/React__default.createElement(Text$1, {
-          variant: "pXS",
-          color: ASH_GREY,
-          extraStyles: "text-align: right;"
-        }, "Expired");
-    }
-  };
-
   var wrapper = {
     open: {
       height: openHeight,
@@ -46302,13 +46774,13 @@ var RadioSection = function RadioSection(_ref) {
     return /*#__PURE__*/React__default.createElement(Motion, {
       tabIndex: section.hideRadioButton || section.disabled ? "-1" : "0",
       onKeyDown: function onKeyDown(e) {
-        return handleKeyDown(section.id, e);
+        return !section.disabled && handleKeyDown(section.id, e);
       },
       onFocus: function onFocus() {
-        return setFocused(section.id);
+        return !section.disabled && setFocused(section.id);
       },
       onBlur: function onBlur() {
-        return setFocused(null);
+        return !section.disabled && setFocused(null);
       },
       hoverStyles: themeValues.focusStyles,
       animate: openSection === section.id ? "open" : "closed",
@@ -46323,7 +46795,7 @@ var RadioSection = function RadioSection(_ref) {
       onClick: isMobile && supportsTouch || section.disabled ? noop : function () {
         return toggleOpenSection(section.id);
       },
-      onTouchEnd: isMobile && supportsTouch || !section.disabled ? function () {
+      onTouchEnd: isMobile && supportsTouch && !section.disabled ? function () {
         return toggleOpenSection(section.id);
       } : noop,
       key: "header-".concat(section.id),
@@ -46368,7 +46840,7 @@ var RadioSection = function RadioSection(_ref) {
         isMobile: isMobile,
         alt: icon.altText
       });
-    })), section.shouldDisplayCardExpiration && /*#__PURE__*/React__default.createElement(React.Fragment, null, renderCardStatus(section)))), /*#__PURE__*/React__default.createElement(AnimatePresence, {
+    })), section.rightTitleContent && /*#__PURE__*/React__default.createElement(React.Fragment, null, section.rightTitleContent))), /*#__PURE__*/React__default.createElement(AnimatePresence, {
       initial: false
     }, openSection === section.id && /*#__PURE__*/React__default.createElement(Motion, {
       key: "content-".concat(section.id),
@@ -46384,7 +46856,7 @@ var RadioSection = function RadioSection(_ref) {
   })));
 };
 
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$I);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$J);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var _emailErrorMessages, _passwordErrorMessage;
@@ -46681,7 +47153,7 @@ var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$J = {
+var fallbackValues$K = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -46760,12 +47232,12 @@ var Tabs = function Tabs(_ref) {
   }))));
 };
 
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$J);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$K);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$K = {
+var fallbackValues$L = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -46821,7 +47293,7 @@ var TabSidebar = function TabSidebar(_ref) {
   })));
 };
 
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$K);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$L);
 
 var backgroundColor$b = {
   "default": "#ffffff",
@@ -46852,7 +47324,7 @@ var modalLinkHoverFocus$2 = {
   "default": standardInteractionStyles,
   footer: standardInteractionStyles
 };
-var fallbackValues$L = {
+var fallbackValues$M = {
   backgroundColor: backgroundColor$b,
   linkColor: linkColor$6,
   border: border$3,
@@ -46914,7 +47386,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
   }, link));
 };
 
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$L, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$M, "default");
 
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var onCheck = _ref.onCheck,
@@ -46989,7 +47461,7 @@ var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
-var fallbackValues$M = {
+var fallbackValues$N = {
   fontWeight: fontWeight$9,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
@@ -47036,7 +47508,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
   })))));
 };
 
-var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$M));
+var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$N));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -47091,7 +47563,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
 };
 
 var pageBackground = "#FBFCFD";
-var fallbackValues$N = {
+var fallbackValues$O = {
   pageBackground: pageBackground
 };
 
@@ -47138,7 +47610,7 @@ var CenterSingle = function CenterSingle(_ref) {
   })));
 };
 
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$N));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$O));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -47180,7 +47652,7 @@ var CenterStack = function CenterStack(_ref) {
   })));
 };
 
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$N));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$O));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -47225,7 +47697,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
   })));
 };
 
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$N));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$O));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -47279,7 +47751,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   })));
 };
 
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$N));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$O));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -47350,7 +47822,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   })));
 };
 
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$N));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$O));
 
 exports.AccountNumberImage = AccountNumberImage;
 exports.AccountsAddIcon = AccountsAddIcon$1;
@@ -47417,6 +47889,7 @@ exports.FormInputColumn = FormInputColumn;
 exports.FormInputRow = FormInputRow;
 exports.FormSelect = FormSelect$1;
 exports.FormattedAddress = FormattedAddress$1;
+exports.FormattedBankAccount = FormattedBankAccount$1;
 exports.FormattedCreditCard = FormattedCreditCard$1;
 exports.Frame = Frame;
 exports.GenericCard = GenericCard;
@@ -47427,6 +47900,7 @@ exports.GuidedCheckoutImage = GuidedCheckoutImage;
 exports.HamburgerButton = HamburgerButton;
 exports.Heading = Heading$1;
 exports.HighlightTabRow = HighlightTabRow$1;
+exports.HistoryIconSmall = HistoryIconSmall$1;
 exports.IconAdd = IconAdd;
 exports.IconQuitLarge = IconQuitLarge;
 exports.Imposter = Imposter;
@@ -47458,7 +47932,6 @@ exports.PaymentButtonBar = PaymentButtonBar;
 exports.PaymentDetails = PaymentDetails$1;
 exports.PaymentFormACH = PaymentFormACH;
 exports.PaymentFormCard = PaymentFormCard$1;
-exports.PaymentIcon = PaymentIcon;
 exports.PaymentMethodAddIcon = PaymentMethodAddIcon$1;
 exports.PaymentMethodIcon = PaymentMethodIcon$1;
 exports.PaymentSearchIcon = PaymentSearchIcon;
@@ -47488,6 +47961,7 @@ exports.ResetConfirmationForm = ResetConfirmationForm$1;
 exports.ResetPasswordForm = ResetPasswordForm;
 exports.ResetPasswordIcon = ResetPasswordIcon;
 exports.ResetPasswordSuccess = ResetPasswordSuccess;
+exports.RevenueManagementImage = RevenueManagementImage;
 exports.RoutingNumberImage = RoutingNumberImage;
 exports.SearchIcon = SearchIcon;
 exports.SearchableSelect = SearchableSelect$1;