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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.esm.js CHANGED
@@ -6310,6 +6310,14 @@ var throttle = function throttle(delay, fn) {
6310
6310
  return fn.apply(void 0, arguments);
6311
6311
  };
6312
6312
  };
6313
+ var titleCaseWord = function titleCaseWord(word) {
6314
+ return word.charAt(0).toUpperCase() + word.slice(1);
6315
+ };
6316
+ var titleCaseString = function titleCaseString(string) {
6317
+ return string.split(" ").map(function (word, index, string) {
6318
+ return index === 0 || index === string.length - 1 || word.length > 3 ? titleCaseWord(word.toLowerCase()) : word;
6319
+ }).join(" ");
6320
+ };
6313
6321
 
6314
6322
  var general = /*#__PURE__*/Object.freeze({
6315
6323
  __proto__: null,
@@ -6327,7 +6335,9 @@ var general = /*#__PURE__*/Object.freeze({
6327
6335
  inputPlaceholderTextStyle: inputPlaceholderTextStyle,
6328
6336
  inputDisabledStyle: inputDisabledStyle,
6329
6337
  MOBILE_WIDTH: MOBILE_WIDTH,
6330
- throttle: throttle
6338
+ throttle: throttle,
6339
+ titleCaseWord: titleCaseWord,
6340
+ titleCaseString: titleCaseString
6331
6341
  });
6332
6342
 
6333
6343
  var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children", "variant"];
@@ -13813,33 +13823,6 @@ var GenericCard = function GenericCard() {
13813
13823
  }));
13814
13824
  };
13815
13825
 
13816
- var BankItemWrapper = styled.div.withConfig({
13817
- displayName: "PaymentIcon__BankItemWrapper",
13818
- componentId: "sc-1k0jl35-0"
13819
- })(["display:flex;justify-content:flex-start;align-items:center;"]);
13820
- var BankAccountText = styled.h4.withConfig({
13821
- displayName: "PaymentIcon__BankAccountText",
13822
- componentId: "sc-1k0jl35-1"
13823
- })(["color:", ";font-size:1rem;font-weight:400;line-height:1.5rem;text-align:left;margin-right:0.5rem;display:inline-block;"], CHARADE_GREY);
13824
- var CHECKING = "CHECKING";
13825
- var SAVINGS = "SAVINGS";
13826
-
13827
- var PaymentIcon = function PaymentIcon(_ref) {
13828
- var lastFour = _ref.lastFour,
13829
- accountType = _ref.accountType,
13830
- autoPay = _ref.autoPay;
13831
- return /*#__PURE__*/React.createElement(BankItemWrapper, null, /*#__PURE__*/React.createElement(Box, {
13832
- padding: "0.25rem 0 0 0",
13833
- extraStyles: "margin-right: 1rem;"
13834
- }, /*#__PURE__*/React.createElement(BankIcon, null)), /*#__PURE__*/React.createElement(Stack, {
13835
- childGap: "0"
13836
- }, accountType === CHECKING && /*#__PURE__*/React.createElement(BankAccountText, null, "Checking Account ending in ", lastFour), accountType === SAVINGS && /*#__PURE__*/React.createElement(BankAccountText, null, "Savings Account ending in ", lastFour), autoPay && /*#__PURE__*/React.createElement(Text$1, {
13837
- variant: "p",
13838
- color: REGENT_GREY,
13839
- extraStyles: "font-style: italic;"
13840
- }, "Autopay Enabled")));
13841
- };
13842
-
13843
13826
  var IconAdd = function IconAdd() {
13844
13827
  return /*#__PURE__*/React.createElement("svg", {
13845
13828
  xmlns: "http://www.w3.org/2000/svg",
@@ -16049,6 +16032,389 @@ var ProfileImage = function ProfileImage() {
16049
16032
  }));
16050
16033
  };
16051
16034
 
16035
+ var RevenueManagementImage = function RevenueManagementImage() {
16036
+ return /*#__PURE__*/React.createElement("svg", {
16037
+ width: "179",
16038
+ height: "96",
16039
+ viewBox: "0 0 179 96",
16040
+ fill: "none",
16041
+ xmlns: "http://www.w3.org/2000/svg"
16042
+ }, /*#__PURE__*/React.createElement("path", {
16043
+ fillRule: "evenodd",
16044
+ clipRule: "evenodd",
16045
+ 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",
16046
+ fill: "#15749D",
16047
+ fillOpacity: "0.3"
16048
+ }), /*#__PURE__*/React.createElement("path", {
16049
+ fillRule: "evenodd",
16050
+ clipRule: "evenodd",
16051
+ 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",
16052
+ fill: "#15749D",
16053
+ fillOpacity: "0.3"
16054
+ }), /*#__PURE__*/React.createElement("path", {
16055
+ fillRule: "evenodd",
16056
+ clipRule: "evenodd",
16057
+ 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",
16058
+ fill: "#15749D",
16059
+ fillOpacity: "0.3"
16060
+ }), /*#__PURE__*/React.createElement("path", {
16061
+ 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",
16062
+ fill: "#15749D",
16063
+ fillOpacity: "0.3"
16064
+ }), /*#__PURE__*/React.createElement("path", {
16065
+ 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",
16066
+ fill: "white"
16067
+ }), /*#__PURE__*/React.createElement("path", {
16068
+ 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",
16069
+ fill: "#E5E7EC"
16070
+ }), /*#__PURE__*/React.createElement("path", {
16071
+ 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",
16072
+ fill: "#292A33"
16073
+ }), /*#__PURE__*/React.createElement("path", {
16074
+ 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",
16075
+ fill: "#292A33"
16076
+ }), /*#__PURE__*/React.createElement("path", {
16077
+ 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",
16078
+ fill: "#292A33"
16079
+ }), /*#__PURE__*/React.createElement("path", {
16080
+ fillRule: "evenodd",
16081
+ clipRule: "evenodd",
16082
+ 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",
16083
+ fill: "#292A33"
16084
+ }), /*#__PURE__*/React.createElement("path", {
16085
+ 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",
16086
+ fill: "#292A33"
16087
+ }), /*#__PURE__*/React.createElement("path", {
16088
+ 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",
16089
+ fill: "#292A33"
16090
+ }), /*#__PURE__*/React.createElement("path", {
16091
+ 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",
16092
+ fill: "#292A33"
16093
+ }), /*#__PURE__*/React.createElement("path", {
16094
+ 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",
16095
+ fill: "#292A33"
16096
+ }), /*#__PURE__*/React.createElement("path", {
16097
+ fillRule: "evenodd",
16098
+ clipRule: "evenodd",
16099
+ 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",
16100
+ fill: "#292A33"
16101
+ }), /*#__PURE__*/React.createElement("path", {
16102
+ 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",
16103
+ fill: "#E4F4FD"
16104
+ }), /*#__PURE__*/React.createElement("path", {
16105
+ fillRule: "evenodd",
16106
+ clipRule: "evenodd",
16107
+ 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",
16108
+ fill: "#292A33"
16109
+ }), /*#__PURE__*/React.createElement("path", {
16110
+ fillRule: "evenodd",
16111
+ clipRule: "evenodd",
16112
+ 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",
16113
+ fill: "#292A33"
16114
+ }), /*#__PURE__*/React.createElement("path", {
16115
+ 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",
16116
+ fill: "#E4F4FD"
16117
+ }), /*#__PURE__*/React.createElement("path", {
16118
+ fillRule: "evenodd",
16119
+ clipRule: "evenodd",
16120
+ 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",
16121
+ fill: "#292A33"
16122
+ }), /*#__PURE__*/React.createElement("path", {
16123
+ fillRule: "evenodd",
16124
+ clipRule: "evenodd",
16125
+ 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",
16126
+ fill: "#292A33"
16127
+ }), /*#__PURE__*/React.createElement("path", {
16128
+ fillRule: "evenodd",
16129
+ clipRule: "evenodd",
16130
+ 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",
16131
+ fill: "#292A33"
16132
+ }), /*#__PURE__*/React.createElement("path", {
16133
+ d: "M47.5393 30.1177H132.245V32H47.5393V30.1177Z",
16134
+ fill: "#292A33"
16135
+ }), /*#__PURE__*/React.createElement("g", {
16136
+ filter: "url(#filter0_d_2573_15404)"
16137
+ }, /*#__PURE__*/React.createElement("path", {
16138
+ 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",
16139
+ fill: "white"
16140
+ }), /*#__PURE__*/React.createElement("path", {
16141
+ 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",
16142
+ fill: "#959CA8"
16143
+ }), /*#__PURE__*/React.createElement("path", {
16144
+ 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",
16145
+ fill: "#959CA8"
16146
+ })), /*#__PURE__*/React.createElement("g", {
16147
+ filter: "url(#filter1_d_2573_15404)"
16148
+ }, /*#__PURE__*/React.createElement("path", {
16149
+ 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",
16150
+ fill: "white"
16151
+ }), /*#__PURE__*/React.createElement("path", {
16152
+ 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",
16153
+ fill: "#959CA8"
16154
+ }), /*#__PURE__*/React.createElement("path", {
16155
+ 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",
16156
+ fill: "#959CA8"
16157
+ }), /*#__PURE__*/React.createElement("path", {
16158
+ 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",
16159
+ fill: "#959CA8"
16160
+ }), /*#__PURE__*/React.createElement("path", {
16161
+ 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",
16162
+ fill: "#959CA8"
16163
+ })), /*#__PURE__*/React.createElement("g", {
16164
+ filter: "url(#filter2_d_2573_15404)"
16165
+ }, /*#__PURE__*/React.createElement("path", {
16166
+ 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",
16167
+ fill: "white"
16168
+ }), /*#__PURE__*/React.createElement("path", {
16169
+ 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",
16170
+ fill: "#959CA8"
16171
+ }), /*#__PURE__*/React.createElement("path", {
16172
+ 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",
16173
+ fill: "#959CA8"
16174
+ }), /*#__PURE__*/React.createElement("path", {
16175
+ 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",
16176
+ fill: "#959CA8"
16177
+ }), /*#__PURE__*/React.createElement("path", {
16178
+ 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",
16179
+ fill: "#959CA8"
16180
+ })), /*#__PURE__*/React.createElement("g", {
16181
+ filter: "url(#filter3_d_2573_15404)"
16182
+ }, /*#__PURE__*/React.createElement("path", {
16183
+ 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",
16184
+ fill: "white"
16185
+ }), /*#__PURE__*/React.createElement("path", {
16186
+ 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",
16187
+ fill: "#959CA8"
16188
+ }), /*#__PURE__*/React.createElement("path", {
16189
+ 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",
16190
+ fill: "#959CA8"
16191
+ }), /*#__PURE__*/React.createElement("path", {
16192
+ 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",
16193
+ fill: "#959CA8"
16194
+ }), /*#__PURE__*/React.createElement("path", {
16195
+ 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",
16196
+ fill: "#959CA8"
16197
+ })), /*#__PURE__*/React.createElement("path", {
16198
+ 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",
16199
+ fill: "#15749D"
16200
+ }), /*#__PURE__*/React.createElement("path", {
16201
+ 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",
16202
+ fill: "#15749D"
16203
+ }), /*#__PURE__*/React.createElement("path", {
16204
+ 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",
16205
+ fill: "#3B5BDB"
16206
+ }), /*#__PURE__*/React.createElement("path", {
16207
+ 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",
16208
+ fill: "#15749D"
16209
+ }), /*#__PURE__*/React.createElement("path", {
16210
+ fillRule: "evenodd",
16211
+ clipRule: "evenodd",
16212
+ 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",
16213
+ fill: "#15749D"
16214
+ }), /*#__PURE__*/React.createElement("path", {
16215
+ 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",
16216
+ fill: "#15749D"
16217
+ }), /*#__PURE__*/React.createElement("g", {
16218
+ filter: "url(#filter4_d_2573_15404)"
16219
+ }, /*#__PURE__*/React.createElement("path", {
16220
+ 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",
16221
+ fill: "#15749D"
16222
+ })), /*#__PURE__*/React.createElement("path", {
16223
+ fillRule: "evenodd",
16224
+ clipRule: "evenodd",
16225
+ 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",
16226
+ fill: "white"
16227
+ }), /*#__PURE__*/React.createElement("mask", {
16228
+ id: "mask0_2573_15404",
16229
+ style: {
16230
+ maskType: "alpha"
16231
+ },
16232
+ maskUnits: "userSpaceOnUse",
16233
+ x: "148",
16234
+ y: "42",
16235
+ width: "8",
16236
+ height: "7"
16237
+ }, /*#__PURE__*/React.createElement("path", {
16238
+ fillRule: "evenodd",
16239
+ clipRule: "evenodd",
16240
+ 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",
16241
+ fill: "white"
16242
+ })), /*#__PURE__*/React.createElement("g", {
16243
+ mask: "url(#mask0_2573_15404)"
16244
+ }, /*#__PURE__*/React.createElement("rect", {
16245
+ x: "146.677",
16246
+ y: "40.7842",
16247
+ width: "10.0392",
16248
+ height: "10.0392",
16249
+ fill: "white"
16250
+ })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
16251
+ id: "filter0_d_2573_15404",
16252
+ x: "16.8137",
16253
+ y: "28.8823",
16254
+ width: "35.7256",
16255
+ height: "18.1567",
16256
+ filterUnits: "userSpaceOnUse",
16257
+ colorInterpolationFilters: "sRGB"
16258
+ }, /*#__PURE__*/React.createElement("feFlood", {
16259
+ floodOpacity: "0",
16260
+ result: "BackgroundImageFix"
16261
+ }), /*#__PURE__*/React.createElement("feColorMatrix", {
16262
+ "in": "SourceAlpha",
16263
+ type: "matrix",
16264
+ values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
16265
+ result: "hardAlpha"
16266
+ }), /*#__PURE__*/React.createElement("feOffset", null), /*#__PURE__*/React.createElement("feGaussianBlur", {
16267
+ stdDeviation: "2.5"
16268
+ }), /*#__PURE__*/React.createElement("feComposite", {
16269
+ in2: "hardAlpha",
16270
+ operator: "out"
16271
+ }), /*#__PURE__*/React.createElement("feColorMatrix", {
16272
+ type: "matrix",
16273
+ values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
16274
+ }), /*#__PURE__*/React.createElement("feBlend", {
16275
+ mode: "normal",
16276
+ in2: "BackgroundImageFix",
16277
+ result: "effect1_dropShadow_2573_15404"
16278
+ }), /*#__PURE__*/React.createElement("feBlend", {
16279
+ mode: "normal",
16280
+ "in": "SourceGraphic",
16281
+ in2: "effect1_dropShadow_2573_15404",
16282
+ result: "shape"
16283
+ })), /*#__PURE__*/React.createElement("filter", {
16284
+ id: "filter1_d_2573_15404",
16285
+ x: "0.5",
16286
+ y: "35.7842",
16287
+ width: "60.8235",
16288
+ height: "18.1567",
16289
+ filterUnits: "userSpaceOnUse",
16290
+ colorInterpolationFilters: "sRGB"
16291
+ }, /*#__PURE__*/React.createElement("feFlood", {
16292
+ floodOpacity: "0",
16293
+ result: "BackgroundImageFix"
16294
+ }), /*#__PURE__*/React.createElement("feColorMatrix", {
16295
+ "in": "SourceAlpha",
16296
+ type: "matrix",
16297
+ values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
16298
+ result: "hardAlpha"
16299
+ }), /*#__PURE__*/React.createElement("feOffset", null), /*#__PURE__*/React.createElement("feGaussianBlur", {
16300
+ stdDeviation: "2.5"
16301
+ }), /*#__PURE__*/React.createElement("feComposite", {
16302
+ in2: "hardAlpha",
16303
+ operator: "out"
16304
+ }), /*#__PURE__*/React.createElement("feColorMatrix", {
16305
+ type: "matrix",
16306
+ values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
16307
+ }), /*#__PURE__*/React.createElement("feBlend", {
16308
+ mode: "normal",
16309
+ in2: "BackgroundImageFix",
16310
+ result: "effect1_dropShadow_2573_15404"
16311
+ }), /*#__PURE__*/React.createElement("feBlend", {
16312
+ mode: "normal",
16313
+ "in": "SourceGraphic",
16314
+ in2: "effect1_dropShadow_2573_15404",
16315
+ result: "shape"
16316
+ })), /*#__PURE__*/React.createElement("filter", {
16317
+ id: "filter2_d_2573_15404",
16318
+ x: "127.245",
16319
+ y: "22.6079",
16320
+ width: "46.3921",
16321
+ height: "18.1567",
16322
+ filterUnits: "userSpaceOnUse",
16323
+ colorInterpolationFilters: "sRGB"
16324
+ }, /*#__PURE__*/React.createElement("feFlood", {
16325
+ floodOpacity: "0",
16326
+ result: "BackgroundImageFix"
16327
+ }), /*#__PURE__*/React.createElement("feColorMatrix", {
16328
+ "in": "SourceAlpha",
16329
+ type: "matrix",
16330
+ values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
16331
+ result: "hardAlpha"
16332
+ }), /*#__PURE__*/React.createElement("feOffset", null), /*#__PURE__*/React.createElement("feGaussianBlur", {
16333
+ stdDeviation: "2.5"
16334
+ }), /*#__PURE__*/React.createElement("feComposite", {
16335
+ in2: "hardAlpha",
16336
+ operator: "out"
16337
+ }), /*#__PURE__*/React.createElement("feColorMatrix", {
16338
+ type: "matrix",
16339
+ values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
16340
+ }), /*#__PURE__*/React.createElement("feBlend", {
16341
+ mode: "normal",
16342
+ in2: "BackgroundImageFix",
16343
+ result: "effect1_dropShadow_2573_15404"
16344
+ }), /*#__PURE__*/React.createElement("feBlend", {
16345
+ mode: "normal",
16346
+ "in": "SourceGraphic",
16347
+ in2: "effect1_dropShadow_2573_15404",
16348
+ result: "shape"
16349
+ })), /*#__PURE__*/React.createElement("filter", {
16350
+ id: "filter3_d_2573_15404",
16351
+ x: "117.833",
16352
+ y: "29.5098",
16353
+ width: "60.8235",
16354
+ height: "18.1567",
16355
+ filterUnits: "userSpaceOnUse",
16356
+ colorInterpolationFilters: "sRGB"
16357
+ }, /*#__PURE__*/React.createElement("feFlood", {
16358
+ floodOpacity: "0",
16359
+ result: "BackgroundImageFix"
16360
+ }), /*#__PURE__*/React.createElement("feColorMatrix", {
16361
+ "in": "SourceAlpha",
16362
+ type: "matrix",
16363
+ values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
16364
+ result: "hardAlpha"
16365
+ }), /*#__PURE__*/React.createElement("feOffset", null), /*#__PURE__*/React.createElement("feGaussianBlur", {
16366
+ stdDeviation: "2.5"
16367
+ }), /*#__PURE__*/React.createElement("feComposite", {
16368
+ in2: "hardAlpha",
16369
+ operator: "out"
16370
+ }), /*#__PURE__*/React.createElement("feColorMatrix", {
16371
+ type: "matrix",
16372
+ values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
16373
+ }), /*#__PURE__*/React.createElement("feBlend", {
16374
+ mode: "normal",
16375
+ in2: "BackgroundImageFix",
16376
+ result: "effect1_dropShadow_2573_15404"
16377
+ }), /*#__PURE__*/React.createElement("feBlend", {
16378
+ mode: "normal",
16379
+ "in": "SourceGraphic",
16380
+ in2: "effect1_dropShadow_2573_15404",
16381
+ result: "shape"
16382
+ })), /*#__PURE__*/React.createElement("filter", {
16383
+ id: "filter4_d_2573_15404",
16384
+ x: "132.822",
16385
+ y: "26.9292",
16386
+ width: "37.7492",
16387
+ height: "37.7494",
16388
+ filterUnits: "userSpaceOnUse",
16389
+ colorInterpolationFilters: "sRGB"
16390
+ }, /*#__PURE__*/React.createElement("feFlood", {
16391
+ floodOpacity: "0",
16392
+ result: "BackgroundImageFix"
16393
+ }), /*#__PURE__*/React.createElement("feColorMatrix", {
16394
+ "in": "SourceAlpha",
16395
+ type: "matrix",
16396
+ values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
16397
+ result: "hardAlpha"
16398
+ }), /*#__PURE__*/React.createElement("feOffset", null), /*#__PURE__*/React.createElement("feGaussianBlur", {
16399
+ stdDeviation: "5.04515"
16400
+ }), /*#__PURE__*/React.createElement("feComposite", {
16401
+ in2: "hardAlpha",
16402
+ operator: "out"
16403
+ }), /*#__PURE__*/React.createElement("feColorMatrix", {
16404
+ type: "matrix",
16405
+ 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"
16406
+ }), /*#__PURE__*/React.createElement("feBlend", {
16407
+ mode: "normal",
16408
+ in2: "BackgroundImageFix",
16409
+ result: "effect1_dropShadow_2573_15404"
16410
+ }), /*#__PURE__*/React.createElement("feBlend", {
16411
+ mode: "normal",
16412
+ "in": "SourceGraphic",
16413
+ in2: "effect1_dropShadow_2573_15404",
16414
+ result: "shape"
16415
+ }))));
16416
+ };
16417
+
16052
16418
  var FindIconSmall = function FindIconSmall(_ref) {
16053
16419
  var themeValues = _ref.themeValues,
16054
16420
  _ref$iconIndex = _ref.iconIndex,
@@ -16091,6 +16457,33 @@ var FindIconSmall = function FindIconSmall(_ref) {
16091
16457
 
16092
16458
  var FindIconSmall$1 = themeComponent(FindIconSmall, "Icons", fallbackValues$2, "primary");
16093
16459
 
16460
+ var HistoryIconSmall = function HistoryIconSmall(_ref) {
16461
+ var themeValues = _ref.themeValues,
16462
+ _ref$iconIndex = _ref.iconIndex;
16463
+ return /*#__PURE__*/React.createElement("svg", {
16464
+ width: "20",
16465
+ height: "20",
16466
+ viewBox: "0 0 20 20",
16467
+ fill: "none",
16468
+ xmlns: "http://www.w3.org/2000/svg"
16469
+ }, /*#__PURE__*/React.createElement("path", {
16470
+ 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",
16471
+ fill: themeValues.singleIconColor
16472
+ }), /*#__PURE__*/React.createElement("path", {
16473
+ fillRule: "evenodd",
16474
+ clipRule: "evenodd",
16475
+ 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",
16476
+ fill: themeValues.singleIconColor
16477
+ }), /*#__PURE__*/React.createElement("path", {
16478
+ fillRule: "evenodd",
16479
+ clipRule: "evenodd",
16480
+ 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",
16481
+ fill: themeValues.singleIconColor
16482
+ }));
16483
+ };
16484
+
16485
+ var HistoryIconSmall$1 = themeComponent(HistoryIconSmall, "Icons", fallbackValues$2, "primary");
16486
+
16094
16487
  var color$2 = "#15749D";
16095
16488
  var hoverColor$1 = "#116285";
16096
16489
  var activeColor$1 = "#0E506D";
@@ -23190,6 +23583,40 @@ var creditCardFormat = createFormat(creditCardFormats, formatDelimiter);
23190
23583
  var expirationDateFormat = createFormat(expirationDateFormats, formatDelimiter);
23191
23584
  var phoneFormat = createFormat(phoneFormats, formatDelimiter);
23192
23585
  var moneyFormat = createFormat(moneyFormats, formatDelimiter);
23586
+ var renderCardStatus = function renderCardStatus(expirationStatus, expireDate) {
23587
+ var textAlign = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "right";
23588
+ var as = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "span";
23589
+ var ACTIVE = "ACTIVE";
23590
+ var EXPIRING_SOON = "EXPIRING_SOON";
23591
+ var EXPIRED = "EXPIRED";
23592
+ var textMargin = textAlign === "right" ? "auto" : "0";
23593
+
23594
+ switch (expirationStatus) {
23595
+ case ACTIVE:
23596
+ return /*#__PURE__*/React.createElement(Text$1, {
23597
+ as: as,
23598
+ variant: "pXS",
23599
+ color: ASH_GREY,
23600
+ extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
23601
+ }, "Exp Date ", expireDate);
23602
+
23603
+ case EXPIRING_SOON:
23604
+ return /*#__PURE__*/React.createElement(Text$1, {
23605
+ as: as,
23606
+ variant: "pXS",
23607
+ color: FIRE_YELLOW,
23608
+ extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
23609
+ }, "Expiring Soon ", expireDate);
23610
+
23611
+ case EXPIRED:
23612
+ return /*#__PURE__*/React.createElement(Text$1, {
23613
+ as: as,
23614
+ variant: "pXS",
23615
+ color: ASH_GREY,
23616
+ extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
23617
+ }, "Expired");
23618
+ }
23619
+ };
23193
23620
 
23194
23621
  var formats = /*#__PURE__*/Object.freeze({
23195
23622
  __proto__: null,
@@ -23201,7 +23628,8 @@ var formats = /*#__PURE__*/Object.freeze({
23201
23628
  creditCardFormat: creditCardFormat,
23202
23629
  expirationDateFormat: expirationDateFormat,
23203
23630
  phoneFormat: phoneFormat,
23204
- moneyFormat: moneyFormat
23631
+ moneyFormat: moneyFormat,
23632
+ renderCardStatus: renderCardStatus
23205
23633
  });
23206
23634
 
23207
23635
  var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
@@ -23894,9 +24322,50 @@ var fallbackValues$l = {
23894
24322
  autopayTextColor: autopayTextColor
23895
24323
  };
23896
24324
 
23897
- var ACTIVE = "ACTIVE";
23898
- var EXPIRING_SOON = "EXPIRING_SOON";
23899
- var EXPIRED = "EXPIRED";
24325
+ var BankItemWrapper = styled.div.withConfig({
24326
+ displayName: "FormattedBankAccount__BankItemWrapper",
24327
+ componentId: "sc-18hcgw4-0"
24328
+ })(["display:flex;justify-content:flex-start;align-items:center;"]);
24329
+ var BankAccountText = styled.h4.withConfig({
24330
+ displayName: "FormattedBankAccount__BankAccountText",
24331
+ componentId: "sc-18hcgw4-1"
24332
+ })(["color:", ";font-size:1rem;font-weight:400;line-height:1.5rem;text-align:left;margin-right:0.5rem;display:inline-block;"], function (_ref) {
24333
+ var color = _ref.color;
24334
+ return color;
24335
+ });
24336
+ var CHECKING = "CHECKING";
24337
+ var SAVINGS = "SAVINGS";
24338
+
24339
+ var FormattedBankAccount = function FormattedBankAccount(_ref2) {
24340
+ var lastFour = _ref2.lastFour,
24341
+ accountType = _ref2.accountType,
24342
+ autoPay = _ref2.autoPay,
24343
+ themeValues = _ref2.themeValues;
24344
+ return /*#__PURE__*/React.createElement(BankItemWrapper, null, /*#__PURE__*/React.createElement(Box, {
24345
+ padding: "0.25rem 0 0 0",
24346
+ extraStyles: "margin-right: 1rem;"
24347
+ }, /*#__PURE__*/React.createElement(BankIcon, null)), /*#__PURE__*/React.createElement(Stack, {
24348
+ childGap: "0"
24349
+ }, accountType === CHECKING && /*#__PURE__*/React.createElement(BankAccountText, {
24350
+ color: themeValues.textColor
24351
+ }, "Checking Account ending in ", lastFour), accountType === SAVINGS && /*#__PURE__*/React.createElement(BankAccountText, {
24352
+ color: themeValues.textColor
24353
+ }, "Savings Account ending in ", lastFour), autoPay && /*#__PURE__*/React.createElement(Text$1, {
24354
+ variant: "p",
24355
+ color: themeValues.autopayTextColor,
24356
+ extraStyles: "font-style: italic;"
24357
+ }, "Autopay Enabled")));
24358
+ };
24359
+
24360
+ var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$l);
24361
+
24362
+ var textColor$2 = "".concat(CHARADE_GREY);
24363
+ var autopayTextColor$1 = "".concat(REGENT_GREY);
24364
+ var fallbackValues$m = {
24365
+ textColor: textColor$2,
24366
+ autopayTextColor: autopayTextColor$1
24367
+ };
24368
+
23900
24369
  var CreditCardWrapper = styled.div.withConfig({
23901
24370
  displayName: "FormattedCreditCard__CreditCardWrapper",
23902
24371
  componentId: "sc-s0ta5l-0"
@@ -23912,32 +24381,6 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
23912
24381
  expireDate = _ref.expireDate,
23913
24382
  expirationStatus = _ref.expirationStatus,
23914
24383
  themeValues = _ref.themeValues;
23915
-
23916
- var renderCardStatus = function renderCardStatus() {
23917
- switch (expirationStatus) {
23918
- case ACTIVE:
23919
- return /*#__PURE__*/React.createElement(Paragraph$1, {
23920
- variant: "pXS",
23921
- color: ASH_GREY,
23922
- textAlign: "left"
23923
- }, "Exp Date ", expireDate);
23924
-
23925
- case EXPIRING_SOON:
23926
- return /*#__PURE__*/React.createElement(Paragraph$1, {
23927
- variant: "pXS",
23928
- color: FIRE_YELLOW,
23929
- textAlign: "left"
23930
- }, "Expiring Soon ", expireDate);
23931
-
23932
- case EXPIRED:
23933
- return /*#__PURE__*/React.createElement(Paragraph$1, {
23934
- variant: "pXS",
23935
- color: ASH_GREY,
23936
- textAlign: "left"
23937
- }, "Expired");
23938
- }
23939
- };
23940
-
23941
24384
  return /*#__PURE__*/React.createElement(CreditCardWrapper, null, /*#__PURE__*/React.createElement(CCIconWrapper, null, /*#__PURE__*/React.createElement(GenericCard, null)), /*#__PURE__*/React.createElement(Stack, {
23942
24385
  childGap: "0"
23943
24386
  }, /*#__PURE__*/React.createElement(Box, {
@@ -23948,14 +24391,14 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
23948
24391
  color: themeValues.textColor,
23949
24392
  textAlign: "left",
23950
24393
  extraStyles: "display: inline-block;"
23951
- }, "Card ending in ".concat(lastFour)), expireDate && /*#__PURE__*/React.createElement(Fragment$1, null, renderCardStatus())), autoPay && /*#__PURE__*/React.createElement(Text$1, {
24394
+ }, "Card ending in ".concat(lastFour)), expireDate && /*#__PURE__*/React.createElement(Fragment$1, null, renderCardStatus(expirationStatus, expireDate, "left", "p"))), autoPay && /*#__PURE__*/React.createElement(Text$1, {
23952
24395
  variant: "p",
23953
24396
  color: themeValues.autopayTextColor,
23954
24397
  extraStyles: "font-style: italic;"
23955
24398
  }, "Autopay Enabled")));
23956
24399
  };
23957
24400
 
23958
- var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$l);
24401
+ var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$m);
23959
24402
 
23960
24403
  var Hamburger = styled.button.withConfig({
23961
24404
  displayName: "HamburgerButton__Hamburger",
@@ -24037,7 +24480,7 @@ var fontSize$8 = {
24037
24480
  h5: "1.375rem",
24038
24481
  h6: "1.25rem"
24039
24482
  };
24040
- var fallbackValues$m = {
24483
+ var fallbackValues$n = {
24041
24484
  fontFamily: fontFamily$5,
24042
24485
  fontSize: fontSize$8
24043
24486
  };
@@ -24079,7 +24522,7 @@ var Heading = function Heading(_ref) {
24079
24522
  }, rest), safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
24080
24523
  };
24081
24524
 
24082
- var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$m, "h1");
24525
+ var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$n, "h1");
24083
24526
 
24084
24527
  var Jumbo = function Jumbo(_ref) {
24085
24528
  var showButton = _ref.showButton,
@@ -24153,7 +24596,7 @@ var fontWeight$4 = {
24153
24596
  pL: "600",
24154
24597
  h6: "700"
24155
24598
  };
24156
- var fallbackValues$n = {
24599
+ var fallbackValues$o = {
24157
24600
  fontWeight: fontWeight$4
24158
24601
  };
24159
24602
 
@@ -24181,7 +24624,7 @@ var LabeledAmount = function LabeledAmount(_ref) {
24181
24624
  }, amount));
24182
24625
  };
24183
24626
 
24184
- var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$n, "default");
24627
+ var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$o, "default");
24185
24628
 
24186
24629
  var weightTitle = {
24187
24630
  "default": "600",
@@ -24191,7 +24634,7 @@ var paragraphVariant = {
24191
24634
  "default": "pL",
24192
24635
  small: "pS"
24193
24636
  };
24194
- var fallbackValues$o = {
24637
+ var fallbackValues$p = {
24195
24638
  weightTitle: weightTitle,
24196
24639
  paragraphVariant: paragraphVariant
24197
24640
  };
@@ -24220,10 +24663,10 @@ var LineItem = function LineItem(_ref) {
24220
24663
  }, amount));
24221
24664
  };
24222
24665
 
24223
- var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$o, "default");
24666
+ var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$p, "default");
24224
24667
 
24225
24668
  var color$8 = "#15749D";
24226
- var fallbackValues$p = {
24669
+ var fallbackValues$q = {
24227
24670
  color: color$8
24228
24671
  };
24229
24672
 
@@ -24262,7 +24705,7 @@ var Spinner$1 = function Spinner(_ref4) {
24262
24705
  })));
24263
24706
  };
24264
24707
 
24265
- var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$p);
24708
+ var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$q);
24266
24709
 
24267
24710
  var Loading = function Loading() {
24268
24711
  return /*#__PURE__*/React.createElement(Box, {
@@ -24528,7 +24971,7 @@ var height$1 = {
24528
24971
  "default": "3rem",
24529
24972
  large: "192px"
24530
24973
  };
24531
- var fallbackValues$q = {
24974
+ var fallbackValues$r = {
24532
24975
  color: color$9,
24533
24976
  height: height$1
24534
24977
  };
@@ -24637,12 +25080,12 @@ var Placeholder = function Placeholder(_ref2) {
24637
25080
  }, text)))))))))));
24638
25081
  };
24639
25082
 
24640
- var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$q, "default");
25083
+ var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$r, "default");
24641
25084
 
24642
25085
  var backgroundColor$4 = {
24643
25086
  "default": "".concat(WHITE)
24644
25087
  };
24645
- var fallbackValues$r = {
25088
+ var fallbackValues$s = {
24646
25089
  backgroundColor: backgroundColor$4
24647
25090
  };
24648
25091
 
@@ -24670,7 +25113,7 @@ var ProcessingFee = function ProcessingFee(_ref) {
24670
25113
  }));
24671
25114
  };
24672
25115
 
24673
- var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$r, "default");
25116
+ var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$s, "default");
24674
25117
 
24675
25118
 
24676
25119
 
@@ -24732,7 +25175,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref) {
24732
25175
 
24733
25176
  var activeColor$5 = "".concat(MATISSE_BLUE);
24734
25177
  var inactiveColor = "".concat(GREY_CHATEAU);
24735
- var fallbackValues$s = {
25178
+ var fallbackValues$t = {
24736
25179
  activeColor: activeColor$5,
24737
25180
  inactiveColor: inactiveColor
24738
25181
  };
@@ -24822,12 +25265,12 @@ var RadioButton$1 = function RadioButton(_ref2) {
24822
25265
  })));
24823
25266
  };
24824
25267
 
24825
- var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$s);
25268
+ var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$t);
24826
25269
 
24827
25270
  var border$2 = {
24828
25271
  "default": "1px solid #caced8"
24829
25272
  };
24830
- var fallbackValues$t = {
25273
+ var fallbackValues$u = {
24831
25274
  border: border$2
24832
25275
  };
24833
25276
 
@@ -24902,7 +25345,7 @@ var SearchableSelect = function SearchableSelect(_ref) {
24902
25345
  })))));
24903
25346
  };
24904
25347
 
24905
- var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$t, "default");
25348
+ var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$u, "default");
24906
25349
 
24907
25350
  var borderColor$2 = {
24908
25351
  "default": "".concat(GREY_CHATEAU)
@@ -24910,7 +25353,7 @@ var borderColor$2 = {
24910
25353
  var borderSize = {
24911
25354
  "default": "1px"
24912
25355
  };
24913
- var fallbackValues$u = {
25356
+ var fallbackValues$v = {
24914
25357
  borderColor: borderColor$2,
24915
25358
  borderSize: borderSize
24916
25359
  };
@@ -24927,7 +25370,7 @@ var SolidDivider = function SolidDivider(_ref) {
24927
25370
  });
24928
25371
  };
24929
25372
 
24930
- var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$u, "default");
25373
+ var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$v, "default");
24931
25374
 
24932
25375
  var placeHolderOptionUS = {
24933
25376
  text: "Please select state",
@@ -35511,7 +35954,7 @@ var offBackground = "".concat(REGENT_GREY);
35511
35954
  var labelStyles = "\n display: flex;\n justify-content: flex-start;\n align-items: center;\n";
35512
35955
  var rightLabelStyles = "\n ".concat(labelStyles, "\n flex-direction: row;\n");
35513
35956
  var leftLabelStyles = "\n ".concat(labelStyles, "\n flex-direction: row-reverse;\n");
35514
- var fallbackValues$v = {
35957
+ var fallbackValues$w = {
35515
35958
  onBackground: onBackground,
35516
35959
  disabledBackground: disabledBackground,
35517
35960
  white: white,
@@ -35687,7 +36130,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
35687
36130
  }, label))));
35688
36131
  };
35689
36132
 
35690
- var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$v);
36133
+ var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$w);
35691
36134
 
35692
36135
  var background$1 = "".concat(ATHENS_GREY);
35693
36136
  var white$1 = "".concat(WHITE);
@@ -35736,7 +36179,7 @@ var backgroundColor$5 = WHITE;
35736
36179
  var imageBackgroundColor = INFO_BLUE;
35737
36180
  var headerBackgroundColor = STORM_GREY;
35738
36181
  var headerColor = WHITE;
35739
- var fallbackValues$w = {
36182
+ var fallbackValues$x = {
35740
36183
  backgroundColor: backgroundColor$5,
35741
36184
  imageBackgroundColor: imageBackgroundColor,
35742
36185
  headerBackgroundColor: headerBackgroundColor,
@@ -35759,11 +36202,11 @@ var CardImage = styled.img.withConfig({
35759
36202
 
35760
36203
  var titleColor = BRIGHT_GREY;
35761
36204
  var titleWeight = FONT_WEIGHT_BOLD;
35762
- var textColor$2 = BRIGHT_GREY;
35763
- var fallbackValues$x = {
36205
+ var textColor$3 = BRIGHT_GREY;
36206
+ var fallbackValues$y = {
35764
36207
  titleColor: titleColor,
35765
36208
  titleWeight: titleWeight,
35766
- textColor: textColor$2
36209
+ textColor: textColor$3
35767
36210
  };
35768
36211
 
35769
36212
  var CardText = function CardText(_ref) {
@@ -35784,7 +36227,7 @@ var CardText = function CardText(_ref) {
35784
36227
  color: themeValues.textColor
35785
36228
  }, text))));
35786
36229
  };
35787
- var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$x);
36230
+ var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$y);
35788
36231
 
35789
36232
  var CardHeader = function CardHeader(_ref) {
35790
36233
  var backgroundColor = _ref.backgroundColor,
@@ -35881,12 +36324,12 @@ var Card = function Card(_ref) {
35881
36324
  }), children)));
35882
36325
  };
35883
36326
 
35884
- var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$w);
36327
+ var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$x);
35885
36328
 
35886
36329
  var fontFamily$6 = "Public Sans, sans-serif";
35887
36330
  var activeColor$6 = MATISSE_BLUE;
35888
36331
  var linkColor$3 = CHARADE_GREY;
35889
- var fallbackValues$y = {
36332
+ var fallbackValues$z = {
35890
36333
  fontFamily: fontFamily$6,
35891
36334
  activeColor: activeColor$6,
35892
36335
  linkColor: linkColor$3
@@ -35919,7 +36362,7 @@ var NavTab = function NavTab(_ref) {
35919
36362
  }, label));
35920
36363
  };
35921
36364
 
35922
- var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$y);
36365
+ var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$z);
35923
36366
 
35924
36367
  var NavTabs = function NavTabs(_ref) {
35925
36368
  var tabsConfig = _ref.tabsConfig,
@@ -37877,7 +38320,7 @@ AddressForm.mapStateToProps = mapStateToProps$1;
37877
38320
  AddressForm.mapDispatchToProps = mapDispatchToProps;
37878
38321
 
37879
38322
  var backgroundColor$6 = "#ebeffb";
37880
- var fallbackValues$z = {
38323
+ var fallbackValues$A = {
37881
38324
  backgroundColor: backgroundColor$6
37882
38325
  };
37883
38326
 
@@ -37929,7 +38372,7 @@ var Banner = function Banner(_ref) {
37929
38372
  }, /*#__PURE__*/React.createElement(Image, null))));
37930
38373
  };
37931
38374
 
37932
- var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$z);
38375
+ var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$A);
37933
38376
 
37934
38377
  var ChangePasswordForm = function ChangePasswordForm(_ref) {
37935
38378
  var _newPasswordErrorMess;
@@ -38071,7 +38514,7 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
38071
38514
  var titleColor$1 = "#292A33";
38072
38515
  var headingBackgroundColor = "transparent";
38073
38516
  var bodyBackgroundColor = "transparent";
38074
- var fallbackValues$A = {
38517
+ var fallbackValues$B = {
38075
38518
  titleColor: titleColor$1,
38076
38519
  headingBackgroundColor: headingBackgroundColor,
38077
38520
  bodyBackgroundColor: bodyBackgroundColor
@@ -38198,7 +38641,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
38198
38641
  }, children))));
38199
38642
  };
38200
38643
 
38201
- var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$A);
38644
+ var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$B);
38202
38645
 
38203
38646
  var ClipboardIcon = function ClipboardIcon(_ref) {
38204
38647
  var themeValues = _ref.themeValues;
@@ -38459,8 +38902,8 @@ var EditableListItemControls = styled.div.withConfig({
38459
38902
  componentId: "sc-10ehkz7-1"
38460
38903
  })(["display:flex;justify-content:space-evenly;align-items:center;"]);
38461
38904
 
38462
- var ACTIVE$1 = "ACTIVE";
38463
- var EXPIRED$1 = "EXPIRED";
38905
+ var ACTIVE = "ACTIVE";
38906
+ var EXPIRED = "EXPIRED";
38464
38907
 
38465
38908
  var EditableList = function EditableList(_ref) {
38466
38909
  var _ref$title = _ref.title,
@@ -38517,13 +38960,13 @@ var EditableList = function EditableList(_ref) {
38517
38960
  modalOpen = _useState2[0],
38518
38961
  toggleModal = _useState2[1];
38519
38962
 
38520
- var expiredItem = (_item$expirationStatu = item === null || item === void 0 ? void 0 : item.expirationStatus) !== null && _item$expirationStatu !== void 0 ? _item$expirationStatu : ACTIVE$1;
38963
+ var expiredItem = (_item$expirationStatu = item === null || item === void 0 ? void 0 : item.expirationStatus) !== null && _item$expirationStatu !== void 0 ? _item$expirationStatu : ACTIVE;
38521
38964
  return /*#__PURE__*/React.createElement(EditableListItem, {
38522
38965
  listItemSize: !!item.id && autoPayMethods !== null && autoPayMethods !== void 0 && autoPayMethods.some(function (methodID) {
38523
38966
  return methodID === item.id;
38524
38967
  }) ? "big" : listItemSize,
38525
38968
  key: item.id || item,
38526
- disabled: expiredItem === EXPIRED$1
38969
+ disabled: expiredItem === EXPIRED
38527
38970
  }, /*#__PURE__*/React.createElement(Text$1, {
38528
38971
  variant: "p",
38529
38972
  color: CHARADE_GREY
@@ -38784,7 +39227,7 @@ EmailForm.mapDispatchToProps = mapDispatchToProps$3;
38784
39227
 
38785
39228
  var footerBackgroundColor = BRIGHT_GREY;
38786
39229
  var subfooterBackgroundColor = STORM_GREY;
38787
- var fallbackValues$B = {
39230
+ var fallbackValues$C = {
38788
39231
  footerBackgroundColor: footerBackgroundColor,
38789
39232
  subfooterBackgroundColor: subfooterBackgroundColor
38790
39233
  };
@@ -38816,7 +39259,7 @@ var FooterWithSubfooter = function FooterWithSubfooter(_ref) {
38816
39259
  }));
38817
39260
  };
38818
39261
 
38819
- var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$B);
39262
+ var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$C);
38820
39263
 
38821
39264
  var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
38822
39265
  var _EmailErrorMessages;
@@ -38866,10 +39309,10 @@ ForgotPasswordForm.reducer = reducer$4;
38866
39309
  ForgotPasswordForm.mapStateToProps = mapStateToProps$5;
38867
39310
  ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
38868
39311
 
38869
- var textColor$3 = "#ffffff";
39312
+ var textColor$4 = "#ffffff";
38870
39313
  var backgroundColor$7 = "#182848";
38871
- var fallbackValues$C = {
38872
- textColor: textColor$3,
39314
+ var fallbackValues$D = {
39315
+ textColor: textColor$4,
38873
39316
  backgroundColor: backgroundColor$7
38874
39317
  };
38875
39318
 
@@ -38925,7 +39368,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
38925
39368
  }), repeat( /*#__PURE__*/React.createElement(Box, null), boxesAfter))));
38926
39369
  };
38927
39370
 
38928
- var HighlightTabRow$1 = /*#__PURE__*/memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$C));
39371
+ var HighlightTabRow$1 = /*#__PURE__*/memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$D));
38929
39372
 
38930
39373
  var AccountBillIcon = function AccountBillIcon() {
38931
39374
  return /*#__PURE__*/React.createElement("svg", {
@@ -44077,7 +44520,7 @@ var backgroundColor$8 = {
44077
44520
  largeTitle: WHITE,
44078
44521
  small: WHITE
44079
44522
  };
44080
- var fallbackValues$D = {
44523
+ var fallbackValues$E = {
44081
44524
  fontSize: fontSize$9,
44082
44525
  fontWeight: fontWeight$5,
44083
44526
  fontColor: fontColor,
@@ -44136,7 +44579,7 @@ var Module = function Module(_ref) {
44136
44579
  }, children)));
44137
44580
  };
44138
44581
 
44139
- var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$D, "default"));
44582
+ var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$E, "default"));
44140
44583
 
44141
44584
  var backgroundColor$9 = {
44142
44585
  profile: "#3b414d",
@@ -44146,7 +44589,7 @@ var shadowColor = {
44146
44589
  profile: "#292A33",
44147
44590
  cms: "#292A33"
44148
44591
  };
44149
- var fallbackValues$E = {
44592
+ var fallbackValues$F = {
44150
44593
  backgroundColor: backgroundColor$9,
44151
44594
  shadowColor: shadowColor
44152
44595
  };
@@ -44187,7 +44630,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
44187
44630
  }, menuContent));
44188
44631
  };
44189
44632
 
44190
- var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$E, "profile");
44633
+ var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$F, "profile");
44191
44634
 
44192
44635
  var menu = posed.div({
44193
44636
  invisible: {
@@ -44243,7 +44686,11 @@ var NavMenuMobile = function NavMenuMobile(_ref) {
44243
44686
  }, menuContent));
44244
44687
  };
44245
44688
 
44246
- var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$E, "profile");
44689
+ var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$F, "profile");
44690
+
44691
+ var ACH_METHOD = "BANK_ACCOUNT";
44692
+ var CC_METHOD = "CREDIT_CARD";
44693
+ var CASH_METHOD = "CASH";
44247
44694
 
44248
44695
  var IconsModule = function IconsModule(_ref) {
44249
44696
  var icon = _ref.icon,
@@ -44300,7 +44747,7 @@ var activeColor$7 = "#0E506D";
44300
44747
  var linkColor$4 = "#3176AA";
44301
44748
  var fontWeight$6 = FONT_WEIGHT_REGULAR;
44302
44749
  var modalLinkHoverFocus = "outline: none;\n cursor: pointer;\n text-decoration: underline;\n text-decoration-color: #317D4F;";
44303
- var fallbackValues$F = {
44750
+ var fallbackValues$G = {
44304
44751
  color: color$a,
44305
44752
  hoverColor: hoverColor$5,
44306
44753
  activeColor: activeColor$7,
@@ -44324,13 +44771,27 @@ var AutopayModal = function AutopayModal(_ref) {
44324
44771
  isPaymentPlan = _ref.isPaymentPlan,
44325
44772
  nextAutopayDate = _ref.nextAutopayDate,
44326
44773
  dueDate = _ref.dueDate,
44327
- inactive = _ref.inactive;
44328
- var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
44774
+ inactive = _ref.inactive,
44775
+ description = _ref.description,
44776
+ subDescription = _ref.subDescription,
44777
+ allowedPaymentInstruments = _ref.allowedPaymentInstruments;
44778
+
44779
+ var generateMethodNeededText = function generateMethodNeededText(planText, allowedPaymentInstruments) {
44780
+ var allowsCard = allowedPaymentInstruments.includes(CC_METHOD);
44781
+ var allowsACH = allowedPaymentInstruments.includes(ACH_METHOD);
44782
+ var methodRequired = allowsCard && !allowsACH ? "debit or credit card payment method" : !allowsCard && allowsACH ? "checking account payment method" : "payment method";
44783
+ return "To setup ".concat(planText, " you must have a saved ").concat(methodRequired, " and address in your profile. Do you want to save these now?");
44784
+ };
44785
+
44786
+ var plan = isPaymentPlan ? "your payment plan" : "autopay";
44787
+ var shortPlan = isPaymentPlan ? "Payment Plan" : "Autopay";
44788
+ var deactivateText = "deactivate ".concat(shortPlan, " for ").concat(description, ": ").concat(subDescription);
44789
+ var activateText = "Set Up ".concat(shortPlan, " for ").concat(description, ": ").concat(subDescription);
44329
44790
  var nextDate = dueDate || nextAutopayDate;
44330
44791
  var modalExtraProps = {
44331
- modalHeaderText: autoPayActive ? "Deactivate ".concat(planType) : "Set Up ".concat(planType),
44332
- 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?"),
44333
- continueButtonText: autoPayActive ? "Disable ".concat(planType) : "Add to Profile",
44792
+ modalHeaderText: autoPayActive ? titleCaseString(deactivateText) : titleCaseString(activateText),
44793
+ 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),
44794
+ continueButtonText: autoPayActive ? "Disable ".concat(shortPlan) : "Add to Profile",
44334
44795
  useDangerButton: autoPayActive,
44335
44796
  continueAction: autoPayActive ? function () {
44336
44797
  deactivatePaymentSchedule(isPaymentPlan ? paymentPlanSchedule : autoPaySchedule, isPaymentPlan);
@@ -44346,7 +44807,7 @@ var AutopayModal = function AutopayModal(_ref) {
44346
44807
  case "secondary":
44347
44808
  {
44348
44809
  return /*#__PURE__*/React.createElement(ButtonWithAction, {
44349
- text: autoPayActive ? "Turn off ".concat(planType) : "Set Up ".concat(planType),
44810
+ text: autoPayActive ? "Turn off ".concat(shortPlan) : "Set Up ".concat(shortPlan),
44350
44811
  variant: "secondary",
44351
44812
  action: function action() {
44352
44813
  toggleModal(true);
@@ -44359,7 +44820,7 @@ var AutopayModal = function AutopayModal(_ref) {
44359
44820
  case "tertiary":
44360
44821
  {
44361
44822
  return /*#__PURE__*/React.createElement(ButtonWithAction, {
44362
- text: autoPayActive ? "Manage ".concat(planType) : "Set Up ".concat(planType),
44823
+ text: autoPayActive ? "Manage ".concat(shortPlan) : "Set Up ".concat(shortPlan),
44363
44824
  variant: "tertiary",
44364
44825
  action: function action() {
44365
44826
  toggleModal(true);
@@ -44391,12 +44852,12 @@ var AutopayModal = function AutopayModal(_ref) {
44391
44852
  e.key === "Enter" && toggleModal(true);
44392
44853
  },
44393
44854
  tabIndex: "0",
44394
- dataQa: "".concat(planType, " On"),
44855
+ dataQa: "".concat(shortPlan, " On"),
44395
44856
  color: SEA_GREEN,
44396
44857
  weight: themeValues.fontWeight,
44397
44858
  hoverStyles: themeValues.modalLinkHoverFocus,
44398
44859
  extraStyles: "padding-left: 0.25rem;"
44399
- }, "".concat(planType, " ").concat(nextAutopayDate))));
44860
+ }, "".concat(shortPlan, " ").concat(nextAutopayDate))));
44400
44861
  }
44401
44862
  }
44402
44863
  };
@@ -44412,7 +44873,7 @@ var AutopayModal = function AutopayModal(_ref) {
44412
44873
  }, modalExtraProps), renderAutoPayControl());
44413
44874
  };
44414
44875
 
44415
- var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$F);
44876
+ var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$G);
44416
44877
 
44417
44878
  var AmountModule = function AmountModule(_ref) {
44418
44879
  var totalAmountDue = _ref.totalAmountDue,
@@ -44423,7 +44884,10 @@ var AmountModule = function AmountModule(_ref) {
44423
44884
  autoPaySchedule = _ref.autoPaySchedule,
44424
44885
  paymentPlanSchedule = _ref.paymentPlanSchedule,
44425
44886
  isPaymentPlan = _ref.isPaymentPlan,
44426
- nextAutopayDate = _ref.nextAutopayDate;
44887
+ nextAutopayDate = _ref.nextAutopayDate,
44888
+ description = _ref.description,
44889
+ subDescription = _ref.subDescription,
44890
+ allowedPaymentInstruments = _ref.allowedPaymentInstruments;
44427
44891
 
44428
44892
  var _useState = useState(false),
44429
44893
  _useState2 = _slicedToArray(_useState, 2),
@@ -44452,7 +44916,10 @@ var AmountModule = function AmountModule(_ref) {
44452
44916
  paymentPlanSchedule: paymentPlanSchedule,
44453
44917
  isPaymentPlan: isPaymentPlan,
44454
44918
  nextAutopayDate: nextAutopayDate,
44455
- controlType: "link"
44919
+ controlType: "link",
44920
+ description: description,
44921
+ subDescription: subDescription,
44922
+ allowedPaymentInstruments: allowedPaymentInstruments
44456
44923
  })));
44457
44924
  };
44458
44925
 
@@ -44471,7 +44938,10 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
44471
44938
  isPaymentPlan = _ref.isPaymentPlan,
44472
44939
  nextAutopayDate = _ref.nextAutopayDate,
44473
44940
  obligationAssocID = _ref.obligationAssocID,
44474
- dueDate = _ref.dueDate;
44941
+ dueDate = _ref.dueDate,
44942
+ description = _ref.description,
44943
+ subDescription = _ref.subDescription,
44944
+ allowedPaymentInstruments = _ref.allowedPaymentInstruments;
44475
44945
  var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
44476
44946
 
44477
44947
  var _useState = useState(false),
@@ -44527,7 +44997,10 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
44527
44997
  autoPaySchedule: autoPaySchedule,
44528
44998
  paymentPlanSchedule: paymentPlanSchedule,
44529
44999
  isPaymentPlan: isPaymentPlan,
44530
- nextAutopayDate: nextAutopayDate
45000
+ nextAutopayDate: nextAutopayDate,
45001
+ description: description,
45002
+ subDescription: subDescription,
45003
+ allowedPaymentInstruments: allowedPaymentInstruments
44531
45004
  }))), /*#__PURE__*/React.createElement(Box, {
44532
45005
  padding: isMobile ? "16px" : "0"
44533
45006
  }, /*#__PURE__*/React.createElement(Cluster, {
@@ -44567,7 +45040,10 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
44567
45040
  paymentPlanSchedule: paymentPlanSchedule,
44568
45041
  isPaymentPlan: isPaymentPlan,
44569
45042
  nextAutopayDate: nextAutopayDate,
44570
- dueDate: dueDate
45043
+ dueDate: dueDate,
45044
+ description: description,
45045
+ subDescription: subDescription,
45046
+ allowedPaymentInstruments: allowedPaymentInstruments
44571
45047
  })), !isMobile && /*#__PURE__*/React.createElement(Box, {
44572
45048
  padding: "0"
44573
45049
  }, /*#__PURE__*/React.createElement(ButtonWithAction, {
@@ -44657,7 +45133,10 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
44657
45133
  dueDate = _ref.dueDate,
44658
45134
  agencyName = _ref.agencyName,
44659
45135
  configType = _ref.configType,
44660
- actions = _ref.actions;
45136
+ actions = _ref.actions,
45137
+ description = _ref.description,
45138
+ subDescription = _ref.subDescription,
45139
+ allowedPaymentInstruments = _ref.allowedPaymentInstruments;
44661
45140
 
44662
45141
  var _useState = useState(false),
44663
45142
  _useState2 = _slicedToArray(_useState, 2),
@@ -44696,7 +45175,10 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
44696
45175
  obligationAssocID: obligationAssocID,
44697
45176
  dueDate: dueDate,
44698
45177
  controlType: "secondary",
44699
- inactive: true
45178
+ inactive: true,
45179
+ description: description,
45180
+ subDescription: subDescription,
45181
+ allowedPaymentInstruments: allowedPaymentInstruments
44700
45182
  })), /*#__PURE__*/React.createElement(Box, {
44701
45183
  padding: "0",
44702
45184
  extraStyles: "flex-grow: 1;"
@@ -44738,7 +45220,7 @@ var InactiveTitleModule = function InactiveTitleModule(_ref) {
44738
45220
  };
44739
45221
 
44740
45222
  var Obligation = function Obligation(_ref) {
44741
- var _firstObligation$cust, _firstObligation$desc, _firstObligation$subD;
45223
+ var _obligations$, _firstObligation$cust;
44742
45224
 
44743
45225
  var config = _ref.config,
44744
45226
  obligations = _ref.obligations,
@@ -44773,7 +45255,13 @@ var Obligation = function Obligation(_ref) {
44773
45255
  The top level desc/subdesc for all obligations in a collection is the same
44774
45256
  (Collection accounts look different in the Account Details page)
44775
45257
  */
44776
- var firstObligation = obligations[0];
45258
+ var firstObligation = (_obligations$ = obligations === null || obligations === void 0 ? void 0 : obligations[0]) !== null && _obligations$ !== void 0 ? _obligations$ : {};
45259
+ var _firstObligation$allo = firstObligation.allowedPaymentInstruments,
45260
+ allowedPaymentInstruments = _firstObligation$allo === void 0 ? [CASH_METHOD, CC_METHOD, ACH_METHOD] : _firstObligation$allo,
45261
+ _firstObligation$desc = firstObligation.description,
45262
+ description = _firstObligation$desc === void 0 ? "Account" : _firstObligation$desc,
45263
+ _firstObligation$subD = firstObligation.subDescription,
45264
+ subDescription = _firstObligation$subD === void 0 ? obligationAssocID : _firstObligation$subD;
44777
45265
  var customAttributes = (_firstObligation$cust = firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.customAttributes) !== null && _firstObligation$cust !== void 0 ? _firstObligation$cust : {};
44778
45266
  var boxShadowValue = "0px 2px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
44779
45267
  var activeObligation = /*#__PURE__*/React.createElement(Box, {
@@ -44781,7 +45269,7 @@ var Obligation = function Obligation(_ref) {
44781
45269
  borderRadius: "4px",
44782
45270
  boxShadow: boxShadowValue,
44783
45271
  as: "section",
44784
- "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),
45272
+ "aria-label": "".concat(description, " - ").concat(subDescription),
44785
45273
  border: "1px solid ".concat(GRECIAN_GREY),
44786
45274
  borderWidthOverride: "1px 0 0 0"
44787
45275
  }, /*#__PURE__*/React.createElement(Box, {
@@ -44810,8 +45298,8 @@ var Obligation = function Obligation(_ref) {
44810
45298
  iconValue: config.iconValue,
44811
45299
  customAttributes: customAttributes
44812
45300
  }), /*#__PURE__*/React.createElement(TitleModule, {
44813
- title: firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.description,
44814
- subtitle: firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.subDescription,
45301
+ title: description,
45302
+ subtitle: subDescription,
44815
45303
  titleColor: BRIGHT_GREY,
44816
45304
  isMobile: isMobile
44817
45305
  }))), !isMobile && /*#__PURE__*/React.createElement(AmountModule, {
@@ -44825,7 +45313,10 @@ var Obligation = function Obligation(_ref) {
44825
45313
  autoPaySchedule: autoPaySchedule,
44826
45314
  paymentPlanSchedule: paymentPlanSchedule,
44827
45315
  isPaymentPlan: isPaymentPlan,
44828
- nextAutopayDate: nextAutopayDate
45316
+ nextAutopayDate: nextAutopayDate,
45317
+ description: description,
45318
+ subDescription: subDescription,
45319
+ allowedPaymentInstruments: allowedPaymentInstruments
44829
45320
  }))), !isMobile && /*#__PURE__*/React.createElement(PaymentDetailsActions, {
44830
45321
  obligations: obligations,
44831
45322
  autoPayEnabled: autoPayEnabled,
@@ -44840,7 +45331,10 @@ var Obligation = function Obligation(_ref) {
44840
45331
  isMobile: isMobile,
44841
45332
  isPaymentPlan: isPaymentPlan,
44842
45333
  nextAutopayDate: nextAutopayDate,
44843
- obligationAssocID: obligationAssocID
45334
+ obligationAssocID: obligationAssocID,
45335
+ description: description,
45336
+ subDescription: subDescription,
45337
+ allowedPaymentInstruments: allowedPaymentInstruments
44844
45338
  }))), isMobile && /*#__PURE__*/React.createElement(PaymentDetailsActions, {
44845
45339
  obligations: obligations,
44846
45340
  autoPayEnabled: autoPayEnabled,
@@ -44855,7 +45349,10 @@ var Obligation = function Obligation(_ref) {
44855
45349
  isMobile: isMobile,
44856
45350
  isPaymentPlan: isPaymentPlan,
44857
45351
  nextAutopayDate: nextAutopayDate,
44858
- obligationAssocID: obligationAssocID
45352
+ obligationAssocID: obligationAssocID,
45353
+ description: description,
45354
+ subDescription: subDescription,
45355
+ allowedPaymentInstruments: allowedPaymentInstruments
44859
45356
  }));
44860
45357
  var inactiveObligation = /*#__PURE__*/React.createElement(Box, {
44861
45358
  padding: "0",
@@ -44908,7 +45405,10 @@ var Obligation = function Obligation(_ref) {
44908
45405
  obligationAssocID: obligationAssocID,
44909
45406
  dueDate: dueDate,
44910
45407
  agencyName: agencyName,
44911
- configType: config.type
45408
+ configType: config.type,
45409
+ description: description,
45410
+ subDescription: subDescription,
45411
+ allowedPaymentInstruments: allowedPaymentInstruments
44912
45412
  }))), isMobile && /*#__PURE__*/React.createElement(InactiveControlsModule, {
44913
45413
  obligations: obligations,
44914
45414
  autoPayEnabled: autoPayEnabled,
@@ -44922,7 +45422,10 @@ var Obligation = function Obligation(_ref) {
44922
45422
  obligationAssocID: obligationAssocID,
44923
45423
  dueDate: dueDate,
44924
45424
  agencyName: agencyName,
44925
- configType: config.type
45425
+ configType: config.type,
45426
+ description: description,
45427
+ subDescription: subDescription,
45428
+ allowedPaymentInstruments: allowedPaymentInstruments
44926
45429
  }))));
44927
45430
  return inactive ? inactiveObligation : activeObligation;
44928
45431
  };
@@ -45224,7 +45727,7 @@ var labeledAmountTotal = {
45224
45727
  "default": "h6",
45225
45728
  small: "p"
45226
45729
  };
45227
- var fallbackValues$G = {
45730
+ var fallbackValues$H = {
45228
45731
  backgroundColor: backgroundColor$a,
45229
45732
  lineItem: lineItem,
45230
45733
  labeledAmountSubtotal: labeledAmountSubtotal,
@@ -45475,7 +45978,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
45475
45978
  });
45476
45979
  };
45477
45980
 
45478
- var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$G, "default");
45981
+ var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$H, "default");
45479
45982
 
45480
45983
  var linkColor$5 = {
45481
45984
  "default": "#3176AA"
@@ -45492,7 +45995,7 @@ var fontWeight$7 = {
45492
45995
  var modalLinkHoverFocus$1 = {
45493
45996
  "default": "outline: none; text-decoration: underline;"
45494
45997
  };
45495
- var fallbackValues$H = {
45998
+ var fallbackValues$I = {
45496
45999
  linkColor: linkColor$5,
45497
46000
  fontSize: fontSize$a,
45498
46001
  lineHeight: lineHeight$4,
@@ -45551,7 +46054,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
45551
46054
  }, link));
45552
46055
  };
45553
46056
 
45554
- var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$H, "default");
46057
+ var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$I, "default");
45555
46058
 
45556
46059
  var PaymentFormACH = function PaymentFormACH(_ref) {
45557
46060
  var _routingNumberErrors, _accountNumberErrors;
@@ -46157,7 +46660,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
46157
46660
  var bodyBackgroundColor$1 = "#eeeeee";
46158
46661
  var borderColor$3 = "".concat(GREY_CHATEAU);
46159
46662
  var focusStyles = "outline: none;";
46160
- var fallbackValues$I = {
46663
+ var fallbackValues$J = {
46161
46664
  headingBackgroundColor: headingBackgroundColor$1,
46162
46665
  headingDisabledColor: headingDisabledColor,
46163
46666
  bodyBackgroundColor: bodyBackgroundColor$1,
@@ -46174,7 +46677,8 @@ var fallbackValues$I = {
46174
46677
  hideRadioButton: boolean, (keeps section displayed but hides radio and disables open/close function),
46175
46678
  hidden: boolean, (hides section entirely)
46176
46679
  dataQa: string,
46177
- content: <React Component(s)> e.g.: <Box><Stack>cool content stuff</Stack></Box> (any collection of components will work)
46680
+ content: <React Component(s)> e.g.: <Box><Stack>cool content stuff</Stack></Box> (any collection of components will work),
46681
+ 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)
46178
46682
  }
46179
46683
 
46180
46684
  Also takes an "openSection" which should equal the id of the section that should be open
@@ -46187,10 +46691,6 @@ var fallbackValues$I = {
46187
46691
 
46188
46692
  */
46189
46693
 
46190
- var ACTIVE$2 = "ACTIVE";
46191
- var EXPIRING_SOON$1 = "EXPIRING_SOON";
46192
- var EXPIRED$2 = "EXPIRED";
46193
-
46194
46694
  var RadioSection = function RadioSection(_ref) {
46195
46695
  var themeValues = _ref.themeValues,
46196
46696
  isMobile = _ref.isMobile,
@@ -46213,34 +46713,6 @@ var RadioSection = function RadioSection(_ref) {
46213
46713
  }
46214
46714
  };
46215
46715
 
46216
- var renderCardStatus = function renderCardStatus(item) {
46217
- var expirationStatus = item.expirationStatus,
46218
- expireDate = item.expireDate;
46219
-
46220
- switch (expirationStatus) {
46221
- case ACTIVE$2:
46222
- return /*#__PURE__*/React.createElement(Text$1, {
46223
- variant: "pXS",
46224
- color: ASH_GREY,
46225
- extraStyles: "text-align: right;"
46226
- }, "Exp Date ", expireDate);
46227
-
46228
- case EXPIRING_SOON$1:
46229
- return /*#__PURE__*/React.createElement(Text$1, {
46230
- variant: "pXS",
46231
- color: FIRE_YELLOW,
46232
- extraStyles: "text-align: right;"
46233
- }, "Expiring Soon ", expireDate);
46234
-
46235
- case EXPIRED$2:
46236
- return /*#__PURE__*/React.createElement(Text$1, {
46237
- variant: "pXS",
46238
- color: ASH_GREY,
46239
- extraStyles: "text-align: right;"
46240
- }, "Expired");
46241
- }
46242
- };
46243
-
46244
46716
  var wrapper = {
46245
46717
  open: {
46246
46718
  height: openHeight,
@@ -46294,13 +46766,13 @@ var RadioSection = function RadioSection(_ref) {
46294
46766
  return /*#__PURE__*/React.createElement(Motion, {
46295
46767
  tabIndex: section.hideRadioButton || section.disabled ? "-1" : "0",
46296
46768
  onKeyDown: function onKeyDown(e) {
46297
- return handleKeyDown(section.id, e);
46769
+ return !section.disabled && handleKeyDown(section.id, e);
46298
46770
  },
46299
46771
  onFocus: function onFocus() {
46300
- return setFocused(section.id);
46772
+ return !section.disabled && setFocused(section.id);
46301
46773
  },
46302
46774
  onBlur: function onBlur() {
46303
- return setFocused(null);
46775
+ return !section.disabled && setFocused(null);
46304
46776
  },
46305
46777
  hoverStyles: themeValues.focusStyles,
46306
46778
  animate: openSection === section.id ? "open" : "closed",
@@ -46315,7 +46787,7 @@ var RadioSection = function RadioSection(_ref) {
46315
46787
  onClick: isMobile && supportsTouch || section.disabled ? noop : function () {
46316
46788
  return toggleOpenSection(section.id);
46317
46789
  },
46318
- onTouchEnd: isMobile && supportsTouch || !section.disabled ? function () {
46790
+ onTouchEnd: isMobile && supportsTouch && !section.disabled ? function () {
46319
46791
  return toggleOpenSection(section.id);
46320
46792
  } : noop,
46321
46793
  key: "header-".concat(section.id),
@@ -46360,7 +46832,7 @@ var RadioSection = function RadioSection(_ref) {
46360
46832
  isMobile: isMobile,
46361
46833
  alt: icon.altText
46362
46834
  });
46363
- })), section.shouldDisplayCardExpiration && /*#__PURE__*/React.createElement(Fragment$1, null, renderCardStatus(section)))), /*#__PURE__*/React.createElement(AnimatePresence, {
46835
+ })), section.rightTitleContent && /*#__PURE__*/React.createElement(Fragment$1, null, section.rightTitleContent))), /*#__PURE__*/React.createElement(AnimatePresence, {
46364
46836
  initial: false
46365
46837
  }, openSection === section.id && /*#__PURE__*/React.createElement(Motion, {
46366
46838
  key: "content-".concat(section.id),
@@ -46376,7 +46848,7 @@ var RadioSection = function RadioSection(_ref) {
46376
46848
  })));
46377
46849
  };
46378
46850
 
46379
- var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$I);
46851
+ var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$J);
46380
46852
 
46381
46853
  var RegistrationForm = function RegistrationForm(_ref) {
46382
46854
  var _emailErrorMessages, _passwordErrorMessage;
@@ -46673,7 +47145,7 @@ var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
46673
47145
  var activeTabBackground = "#FFFFFF";
46674
47146
  var activeTabAccent = "#15749D";
46675
47147
  var activeTabHover = "#B8D5E1";
46676
- var fallbackValues$J = {
47148
+ var fallbackValues$K = {
46677
47149
  activeTabBackground: activeTabBackground,
46678
47150
  activeTabAccent: activeTabAccent,
46679
47151
  activeTabHover: activeTabHover
@@ -46752,12 +47224,12 @@ var Tabs = function Tabs(_ref) {
46752
47224
  }))));
46753
47225
  };
46754
47226
 
46755
- var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$J);
47227
+ var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$K);
46756
47228
 
46757
47229
  var activeTabBackground$1 = "#FFFFFF";
46758
47230
  var activeTabAccent$1 = "#15749D";
46759
47231
  var activeTabHover$1 = "#B8D5E1";
46760
- var fallbackValues$K = {
47232
+ var fallbackValues$L = {
46761
47233
  activeTabBackground: activeTabBackground$1,
46762
47234
  activeTabAccent: activeTabAccent$1,
46763
47235
  activeTabHover: activeTabHover$1
@@ -46813,7 +47285,7 @@ var TabSidebar = function TabSidebar(_ref) {
46813
47285
  })));
46814
47286
  };
46815
47287
 
46816
- var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$K);
47288
+ var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$L);
46817
47289
 
46818
47290
  var backgroundColor$b = {
46819
47291
  "default": "#ffffff",
@@ -46844,7 +47316,7 @@ var modalLinkHoverFocus$2 = {
46844
47316
  "default": standardInteractionStyles,
46845
47317
  footer: standardInteractionStyles
46846
47318
  };
46847
- var fallbackValues$L = {
47319
+ var fallbackValues$M = {
46848
47320
  backgroundColor: backgroundColor$b,
46849
47321
  linkColor: linkColor$6,
46850
47322
  border: border$3,
@@ -46906,7 +47378,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
46906
47378
  }, link));
46907
47379
  };
46908
47380
 
46909
- var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$L, "default");
47381
+ var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$M, "default");
46910
47382
 
46911
47383
  var TermsAndConditions = function TermsAndConditions(_ref) {
46912
47384
  var onCheck = _ref.onCheck,
@@ -46981,7 +47453,7 @@ var fontColor$1 = WHITE;
46981
47453
  var textAlign$1 = "left";
46982
47454
  var headerBackgroundColor$1 = BRIGHT_GREY;
46983
47455
  var imageBackgroundColor$1 = MATISSE_BLUE;
46984
- var fallbackValues$M = {
47456
+ var fallbackValues$N = {
46985
47457
  fontWeight: fontWeight$9,
46986
47458
  fontColor: fontColor$1,
46987
47459
  textAlign: textAlign$1,
@@ -47028,7 +47500,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
47028
47500
  })))));
47029
47501
  };
47030
47502
 
47031
- var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$M));
47503
+ var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$N));
47032
47504
 
47033
47505
  var WorkflowTile = function WorkflowTile(_ref) {
47034
47506
  var _ref$workflowName = _ref.workflowName,
@@ -47083,7 +47555,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
47083
47555
  };
47084
47556
 
47085
47557
  var pageBackground = "#FBFCFD";
47086
- var fallbackValues$N = {
47558
+ var fallbackValues$O = {
47087
47559
  pageBackground: pageBackground
47088
47560
  };
47089
47561
 
@@ -47130,7 +47602,7 @@ var CenterSingle = function CenterSingle(_ref) {
47130
47602
  })));
47131
47603
  };
47132
47604
 
47133
- var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$N));
47605
+ var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$O));
47134
47606
 
47135
47607
  var CenterStack = function CenterStack(_ref) {
47136
47608
  var header = _ref.header,
@@ -47172,7 +47644,7 @@ var CenterStack = function CenterStack(_ref) {
47172
47644
  })));
47173
47645
  };
47174
47646
 
47175
- var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$N));
47647
+ var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$O));
47176
47648
 
47177
47649
  var CenterSingle$2 = function CenterSingle(_ref) {
47178
47650
  var header = _ref.header,
@@ -47217,7 +47689,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
47217
47689
  })));
47218
47690
  };
47219
47691
 
47220
- var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$N));
47692
+ var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$O));
47221
47693
 
47222
47694
  var SidebarSingleContent = function SidebarSingleContent(_ref) {
47223
47695
  var header = _ref.header,
@@ -47271,7 +47743,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
47271
47743
  })));
47272
47744
  };
47273
47745
 
47274
- var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$N));
47746
+ var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$O));
47275
47747
 
47276
47748
  var SidebarStackContent = function SidebarStackContent(_ref) {
47277
47749
  var header = _ref.header,
@@ -47342,7 +47814,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
47342
47814
  })));
47343
47815
  };
47344
47816
 
47345
- var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$N));
47817
+ var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$O));
47346
47818
 
47347
- export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, AutopayOnIcon, BankIcon, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackReversalIcon, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, IconAdd, IconQuitLarge, Imposter, InternalLink, Jumbo$1 as Jumbo, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentIcon, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, Popover$1 as Popover, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, Switcher, TabSidebar$1 as TabSidebar, TableListItem, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, cardRegistry, index$5 as constants, createPartialAmountFormState, index$4 as util, withWindowSize };
47819
+ export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, AutopayOnIcon, BankIcon, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackReversalIcon, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, Imposter, InternalLink, Jumbo$1 as Jumbo, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, Popover$1 as Popover, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RevenueManagementImage, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, Switcher, TabSidebar$1 as TabSidebar, TableListItem, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, cardRegistry, index$5 as constants, createPartialAmountFormState, index$4 as util, withWindowSize };
47348
47820
  //# sourceMappingURL=index.esm.js.map