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

package/dist/index.cjs.js

@@ -6318,6 +6318,47 @@ 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 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";
+
+  switch (expirationStatus) {
+    case ACTIVE:
+      return /*#__PURE__*/React__default.createElement(Text$1, {
+        as: as,
+        variant: "pXS",
+        color: ASH_GREY,
+        extraStyles: "text-align: ".concat(textAlign, ";")
+      }, "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, ";")
+      }, "Expiring Soon ", expireDate);
+
+    case EXPIRED:
+      return /*#__PURE__*/React__default.createElement(Text$1, {
+        as: as,
+        variant: "pXS",
+        color: ASH_GREY,
+        extraStyles: "text-align: ".concat(textAlign, ";")
+      }, "Expired");
+  }
+};
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6335,7 +6376,10 @@ var general = /*#__PURE__*/Object.freeze({
   inputPlaceholderTextStyle: inputPlaceholderTextStyle,
   inputDisabledStyle: inputDisabledStyle,
   MOBILE_WIDTH: MOBILE_WIDTH,
-  throttle: throttle
+  throttle: throttle,
+  titleCaseWord: titleCaseWord,
+  titleCaseString: titleCaseString,
+  renderCardStatus: renderCardStatus
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children", "variant"];
@@ -13821,33 +13865,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",
@@ -24285,9 +24302,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"
@@ -24303,32 +24361,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, {
@@ -24339,14 +24371,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",
@@ -24428,7 +24460,7 @@ var fontSize$8 = {
   h5: "1.375rem",
   h6: "1.25rem"
 };
-var fallbackValues$m = {
+var fallbackValues$n = {
   fontFamily: fontFamily$5,
   fontSize: fontSize$8
 };
@@ -24470,7 +24502,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,
@@ -24544,7 +24576,7 @@ var fontWeight$4 = {
   pL: "600",
   h6: "700"
 };
-var fallbackValues$n = {
+var fallbackValues$o = {
   fontWeight: fontWeight$4
 };
 
@@ -24572,7 +24604,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",
@@ -24582,7 +24614,7 @@ var paragraphVariant = {
   "default": "pL",
   small: "pS"
 };
-var fallbackValues$o = {
+var fallbackValues$p = {
   weightTitle: weightTitle,
   paragraphVariant: paragraphVariant
 };
@@ -24611,10 +24643,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
 };
 
@@ -24653,7 +24685,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, {
@@ -24919,7 +24951,7 @@ var height$1 = {
   "default": "3rem",
   large: "192px"
 };
-var fallbackValues$q = {
+var fallbackValues$r = {
   color: color$9,
   height: height$1
 };
@@ -25028,12 +25060,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
 };
 
@@ -25061,7 +25093,7 @@ var ProcessingFee = function ProcessingFee(_ref) {
   }));
 };
 
-var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$r, "default");
+var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$s, "default");
 
 
 
@@ -25123,7 +25155,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
 };
@@ -25213,12 +25245,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
 };
 
@@ -25293,7 +25325,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)
@@ -25301,7 +25333,7 @@ var borderColor$2 = {
 var borderSize = {
   "default": "1px"
 };
-var fallbackValues$u = {
+var fallbackValues$v = {
   borderColor: borderColor$2,
   borderSize: borderSize
 };
@@ -25318,7 +25350,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",
@@ -35902,7 +35934,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,
@@ -36078,7 +36110,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);
@@ -36127,7 +36159,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,
@@ -36150,11 +36182,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) {
@@ -36175,7 +36207,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,
@@ -36272,12 +36304,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
@@ -36310,7 +36342,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,
@@ -38268,7 +38300,7 @@ AddressForm.mapStateToProps = mapStateToProps$1;
 AddressForm.mapDispatchToProps = mapDispatchToProps;
 
 var backgroundColor$6 = "#ebeffb";
-var fallbackValues$z = {
+var fallbackValues$A = {
   backgroundColor: backgroundColor$6
 };
 
@@ -38320,7 +38352,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;
@@ -38462,7 +38494,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
@@ -38589,7 +38621,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;
@@ -38850,8 +38882,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,
@@ -38908,13 +38940,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
@@ -39175,7 +39207,7 @@ EmailForm.mapDispatchToProps = mapDispatchToProps$3;
 
 var footerBackgroundColor = BRIGHT_GREY;
 var subfooterBackgroundColor = STORM_GREY;
-var fallbackValues$B = {
+var fallbackValues$C = {
   footerBackgroundColor: footerBackgroundColor,
   subfooterBackgroundColor: subfooterBackgroundColor
 };
@@ -39207,7 +39239,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;
@@ -39257,10 +39289,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
 };
 
@@ -39316,7 +39348,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", {
@@ -44468,7 +44500,7 @@ var backgroundColor$8 = {
   largeTitle: WHITE,
   small: WHITE
 };
-var fallbackValues$D = {
+var fallbackValues$E = {
   fontSize: fontSize$9,
   fontWeight: fontWeight$5,
   fontColor: fontColor,
@@ -44527,7 +44559,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",
@@ -44537,7 +44569,7 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$E = {
+var fallbackValues$F = {
   backgroundColor: backgroundColor$9,
   shadowColor: shadowColor
 };
@@ -44578,7 +44610,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: {
@@ -44634,7 +44666,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,
@@ -44691,7 +44727,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,
@@ -44715,13 +44751,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);
@@ -44737,7 +44787,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);
@@ -44750,7 +44800,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);
@@ -44782,12 +44832,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))));
         }
     }
   };
@@ -44803,7 +44853,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,
@@ -44814,7 +44864,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),
@@ -44843,7 +44896,10 @@ var AmountModule = function AmountModule(_ref) {
     paymentPlanSchedule: paymentPlanSchedule,
     isPaymentPlan: isPaymentPlan,
     nextAutopayDate: nextAutopayDate,
-    controlType: "link"
+    controlType: "link",
+    description: description,
+    subDescription: subDescription,
+    allowedPaymentInstruments: allowedPaymentInstruments
   })));
 };
 
@@ -44862,7 +44918,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),
@@ -44918,7 +44977,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, {
@@ -44958,7 +45020,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, {
@@ -45048,7 +45113,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),
@@ -45087,7 +45155,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;"
@@ -45129,7 +45200,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,
@@ -45164,7 +45235,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, {
@@ -45172,7 +45249,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, {
@@ -45201,8 +45278,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, {
@@ -45216,7 +45293,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,
@@ -45231,7 +45311,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,
@@ -45246,7 +45329,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",
@@ -45299,7 +45385,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,
@@ -45313,7 +45402,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;
 };
@@ -45615,7 +45707,7 @@ var labeledAmountTotal = {
   "default": "h6",
   small: "p"
 };
-var fallbackValues$G = {
+var fallbackValues$H = {
   backgroundColor: backgroundColor$a,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
@@ -45866,7 +45958,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"
@@ -45883,7 +45975,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,
@@ -45942,7 +46034,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;
@@ -46538,7 +46630,7 @@ var RadioGroup = function RadioGroup(_ref) {
       groupName: groupName,
       setValue: setValue,
       handleChange: handleChange,
-      "aria-invalid": field.dirty && field.hasErrors || field.hasErrors
+      "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors
     }));
   })));
 };
@@ -46548,7 +46640,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,
@@ -46565,7 +46657,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
@@ -46578,10 +46671,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,
@@ -46604,34 +46693,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,
@@ -46685,13 +46746,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",
@@ -46706,7 +46767,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),
@@ -46751,7 +46812,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, rightTitleContent))), /*#__PURE__*/React__default.createElement(AnimatePresence, {
       initial: false
     }, openSection === section.id && /*#__PURE__*/React__default.createElement(Motion, {
       key: "content-".concat(section.id),
@@ -46767,7 +46828,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;
@@ -47064,7 +47125,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
@@ -47143,12 +47204,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
@@ -47204,7 +47265,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",
@@ -47235,7 +47296,7 @@ var modalLinkHoverFocus$2 = {
   "default": standardInteractionStyles,
   footer: standardInteractionStyles
 };
-var fallbackValues$L = {
+var fallbackValues$M = {
   backgroundColor: backgroundColor$b,
   linkColor: linkColor$6,
   border: border$3,
@@ -47297,7 +47358,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,
@@ -47372,7 +47433,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,
@@ -47419,7 +47480,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,
@@ -47474,7 +47535,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
 };
 
 var pageBackground = "#FBFCFD";
-var fallbackValues$N = {
+var fallbackValues$O = {
   pageBackground: pageBackground
 };
 
@@ -47521,7 +47582,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,
@@ -47563,7 +47624,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,
@@ -47608,7 +47669,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,
@@ -47662,7 +47723,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,
@@ -47733,7 +47794,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;
@@ -47800,6 +47861,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;
@@ -47841,7 +47903,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;