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

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,32 @@ 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
+ return /*#__PURE__*/React.createElement("svg", {
16463
+ width: "20",
16464
+ height: "20",
16465
+ viewBox: "0 0 20 20",
16466
+ fill: "none",
16467
+ xmlns: "http://www.w3.org/2000/svg"
16468
+ }, /*#__PURE__*/React.createElement("path", {
16469
+ 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",
16470
+ fill: themeValues.singleIconColor
16471
+ }), /*#__PURE__*/React.createElement("path", {
16472
+ fillRule: "evenodd",
16473
+ clipRule: "evenodd",
16474
+ 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",
16475
+ fill: themeValues.singleIconColor
16476
+ }), /*#__PURE__*/React.createElement("path", {
16477
+ fillRule: "evenodd",
16478
+ clipRule: "evenodd",
16479
+ 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",
16480
+ fill: themeValues.singleIconColor
16481
+ }));
16482
+ };
16483
+
16484
+ var HistoryIconSmall$1 = themeComponent(HistoryIconSmall, "Icons", fallbackValues$2, "primary");
16485
+
16094
16486
  var color$2 = "#15749D";
16095
16487
  var hoverColor$1 = "#116285";
16096
16488
  var activeColor$1 = "#0E506D";
@@ -23190,6 +23582,40 @@ var creditCardFormat = createFormat(creditCardFormats, formatDelimiter);
23190
23582
  var expirationDateFormat = createFormat(expirationDateFormats, formatDelimiter);
23191
23583
  var phoneFormat = createFormat(phoneFormats, formatDelimiter);
23192
23584
  var moneyFormat = createFormat(moneyFormats, formatDelimiter);
23585
+ var renderCardStatus = function renderCardStatus(expirationStatus, expireDate) {
23586
+ var textAlign = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "right";
23587
+ var as = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "span";
23588
+ var ACTIVE = "ACTIVE";
23589
+ var EXPIRING_SOON = "EXPIRING_SOON";
23590
+ var EXPIRED = "EXPIRED";
23591
+ var textMargin = textAlign === "right" ? "auto" : "0";
23592
+
23593
+ switch (expirationStatus) {
23594
+ case ACTIVE:
23595
+ return /*#__PURE__*/React.createElement(Text$1, {
23596
+ as: as,
23597
+ variant: "pXS",
23598
+ color: ASH_GREY,
23599
+ extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
23600
+ }, "Exp Date ", expireDate);
23601
+
23602
+ case EXPIRING_SOON:
23603
+ return /*#__PURE__*/React.createElement(Text$1, {
23604
+ as: as,
23605
+ variant: "pXS",
23606
+ color: FIRE_YELLOW,
23607
+ extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
23608
+ }, "Expiring Soon ", expireDate);
23609
+
23610
+ case EXPIRED:
23611
+ return /*#__PURE__*/React.createElement(Text$1, {
23612
+ as: as,
23613
+ variant: "pXS",
23614
+ color: ASH_GREY,
23615
+ extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
23616
+ }, "Expired");
23617
+ }
23618
+ };
23193
23619
 
23194
23620
  var formats = /*#__PURE__*/Object.freeze({
23195
23621
  __proto__: null,
@@ -23201,7 +23627,8 @@ var formats = /*#__PURE__*/Object.freeze({
23201
23627
  creditCardFormat: creditCardFormat,
23202
23628
  expirationDateFormat: expirationDateFormat,
23203
23629
  phoneFormat: phoneFormat,
23204
- moneyFormat: moneyFormat
23630
+ moneyFormat: moneyFormat,
23631
+ renderCardStatus: renderCardStatus
23205
23632
  });
23206
23633
 
23207
23634
  var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
@@ -23894,9 +24321,50 @@ var fallbackValues$l = {
23894
24321
  autopayTextColor: autopayTextColor
23895
24322
  };
23896
24323
 
23897
- var ACTIVE = "ACTIVE";
23898
- var EXPIRING_SOON = "EXPIRING_SOON";
23899
- var EXPIRED = "EXPIRED";
24324
+ var BankItemWrapper = styled.div.withConfig({
24325
+ displayName: "FormattedBankAccount__BankItemWrapper",
24326
+ componentId: "sc-18hcgw4-0"
24327
+ })(["display:flex;justify-content:flex-start;align-items:center;"]);
24328
+ var BankAccountText = styled.h4.withConfig({
24329
+ displayName: "FormattedBankAccount__BankAccountText",
24330
+ componentId: "sc-18hcgw4-1"
24331
+ })(["color:", ";font-size:1rem;font-weight:400;line-height:1.5rem;text-align:left;margin-right:0.5rem;display:inline-block;"], function (_ref) {
24332
+ var color = _ref.color;
24333
+ return color;
24334
+ });
24335
+ var CHECKING = "CHECKING";
24336
+ var SAVINGS = "SAVINGS";
24337
+
24338
+ var FormattedBankAccount = function FormattedBankAccount(_ref2) {
24339
+ var lastFour = _ref2.lastFour,
24340
+ accountType = _ref2.accountType,
24341
+ autoPay = _ref2.autoPay,
24342
+ themeValues = _ref2.themeValues;
24343
+ return /*#__PURE__*/React.createElement(BankItemWrapper, null, /*#__PURE__*/React.createElement(Box, {
24344
+ padding: "0.25rem 0 0 0",
24345
+ extraStyles: "margin-right: 1rem;"
24346
+ }, /*#__PURE__*/React.createElement(BankIcon, null)), /*#__PURE__*/React.createElement(Stack, {
24347
+ childGap: "0"
24348
+ }, accountType === CHECKING && /*#__PURE__*/React.createElement(BankAccountText, {
24349
+ color: themeValues.textColor
24350
+ }, "Checking Account ending in ", lastFour), accountType === SAVINGS && /*#__PURE__*/React.createElement(BankAccountText, {
24351
+ color: themeValues.textColor
24352
+ }, "Savings Account ending in ", lastFour), autoPay && /*#__PURE__*/React.createElement(Text$1, {
24353
+ variant: "p",
24354
+ color: themeValues.autopayTextColor,
24355
+ extraStyles: "font-style: italic;"
24356
+ }, "Autopay Enabled")));
24357
+ };
24358
+
24359
+ var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$l);
24360
+
24361
+ var textColor$2 = "".concat(CHARADE_GREY);
24362
+ var autopayTextColor$1 = "".concat(REGENT_GREY);
24363
+ var fallbackValues$m = {
24364
+ textColor: textColor$2,
24365
+ autopayTextColor: autopayTextColor$1
24366
+ };
24367
+
23900
24368
  var CreditCardWrapper = styled.div.withConfig({
23901
24369
  displayName: "FormattedCreditCard__CreditCardWrapper",
23902
24370
  componentId: "sc-s0ta5l-0"
@@ -23912,32 +24380,6 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
23912
24380
  expireDate = _ref.expireDate,
23913
24381
  expirationStatus = _ref.expirationStatus,
23914
24382
  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
24383
  return /*#__PURE__*/React.createElement(CreditCardWrapper, null, /*#__PURE__*/React.createElement(CCIconWrapper, null, /*#__PURE__*/React.createElement(GenericCard, null)), /*#__PURE__*/React.createElement(Stack, {
23942
24384
  childGap: "0"
23943
24385
  }, /*#__PURE__*/React.createElement(Box, {
@@ -23948,14 +24390,14 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
23948
24390
  color: themeValues.textColor,
23949
24391
  textAlign: "left",
23950
24392
  extraStyles: "display: inline-block;"
23951
- }, "Card ending in ".concat(lastFour)), expireDate && /*#__PURE__*/React.createElement(Fragment$1, null, renderCardStatus())), autoPay && /*#__PURE__*/React.createElement(Text$1, {
24393
+ }, "Card ending in ".concat(lastFour)), expireDate && /*#__PURE__*/React.createElement(Fragment$1, null, renderCardStatus(expirationStatus, expireDate, "left", "p"))), autoPay && /*#__PURE__*/React.createElement(Text$1, {
23952
24394
  variant: "p",
23953
24395
  color: themeValues.autopayTextColor,
23954
24396
  extraStyles: "font-style: italic;"
23955
24397
  }, "Autopay Enabled")));
23956
24398
  };
23957
24399
 
23958
- var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$l);
24400
+ var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$m);
23959
24401
 
23960
24402
  var Hamburger = styled.button.withConfig({
23961
24403
  displayName: "HamburgerButton__Hamburger",
@@ -24037,7 +24479,7 @@ var fontSize$8 = {
24037
24479
  h5: "1.375rem",
24038
24480
  h6: "1.25rem"
24039
24481
  };
24040
- var fallbackValues$m = {
24482
+ var fallbackValues$n = {
24041
24483
  fontFamily: fontFamily$5,
24042
24484
  fontSize: fontSize$8
24043
24485
  };
@@ -24079,7 +24521,7 @@ var Heading = function Heading(_ref) {
24079
24521
  }, rest), safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
24080
24522
  };
24081
24523
 
24082
- var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$m, "h1");
24524
+ var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$n, "h1");
24083
24525
 
24084
24526
  var Jumbo = function Jumbo(_ref) {
24085
24527
  var showButton = _ref.showButton,
@@ -24153,7 +24595,7 @@ var fontWeight$4 = {
24153
24595
  pL: "600",
24154
24596
  h6: "700"
24155
24597
  };
24156
- var fallbackValues$n = {
24598
+ var fallbackValues$o = {
24157
24599
  fontWeight: fontWeight$4
24158
24600
  };
24159
24601
 
@@ -24181,7 +24623,7 @@ var LabeledAmount = function LabeledAmount(_ref) {
24181
24623
  }, amount));
24182
24624
  };
24183
24625
 
24184
- var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$n, "default");
24626
+ var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$o, "default");
24185
24627
 
24186
24628
  var weightTitle = {
24187
24629
  "default": "600",
@@ -24191,7 +24633,7 @@ var paragraphVariant = {
24191
24633
  "default": "pL",
24192
24634
  small: "pS"
24193
24635
  };
24194
- var fallbackValues$o = {
24636
+ var fallbackValues$p = {
24195
24637
  weightTitle: weightTitle,
24196
24638
  paragraphVariant: paragraphVariant
24197
24639
  };
@@ -24220,10 +24662,10 @@ var LineItem = function LineItem(_ref) {
24220
24662
  }, amount));
24221
24663
  };
24222
24664
 
24223
- var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$o, "default");
24665
+ var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$p, "default");
24224
24666
 
24225
24667
  var color$8 = "#15749D";
24226
- var fallbackValues$p = {
24668
+ var fallbackValues$q = {
24227
24669
  color: color$8
24228
24670
  };
24229
24671
 
@@ -24262,7 +24704,7 @@ var Spinner$1 = function Spinner(_ref4) {
24262
24704
  })));
24263
24705
  };
24264
24706
 
24265
- var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$p);
24707
+ var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$q);
24266
24708
 
24267
24709
  var Loading = function Loading() {
24268
24710
  return /*#__PURE__*/React.createElement(Box, {
@@ -24528,7 +24970,7 @@ var height$1 = {
24528
24970
  "default": "3rem",
24529
24971
  large: "192px"
24530
24972
  };
24531
- var fallbackValues$q = {
24973
+ var fallbackValues$r = {
24532
24974
  color: color$9,
24533
24975
  height: height$1
24534
24976
  };
@@ -24637,12 +25079,12 @@ var Placeholder = function Placeholder(_ref2) {
24637
25079
  }, text)))))))))));
24638
25080
  };
24639
25081
 
24640
- var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$q, "default");
25082
+ var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$r, "default");
24641
25083
 
24642
25084
  var backgroundColor$4 = {
24643
25085
  "default": "".concat(WHITE)
24644
25086
  };
24645
- var fallbackValues$r = {
25087
+ var fallbackValues$s = {
24646
25088
  backgroundColor: backgroundColor$4
24647
25089
  };
24648
25090
 
@@ -24670,7 +25112,7 @@ var ProcessingFee = function ProcessingFee(_ref) {
24670
25112
  }));
24671
25113
  };
24672
25114
 
24673
- var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$r, "default");
25115
+ var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$s, "default");
24674
25116
 
24675
25117
 
24676
25118
 
@@ -24732,7 +25174,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref) {
24732
25174
 
24733
25175
  var activeColor$5 = "".concat(MATISSE_BLUE);
24734
25176
  var inactiveColor = "".concat(GREY_CHATEAU);
24735
- var fallbackValues$s = {
25177
+ var fallbackValues$t = {
24736
25178
  activeColor: activeColor$5,
24737
25179
  inactiveColor: inactiveColor
24738
25180
  };
@@ -24822,12 +25264,12 @@ var RadioButton$1 = function RadioButton(_ref2) {
24822
25264
  })));
24823
25265
  };
24824
25266
 
24825
- var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$s);
25267
+ var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$t);
24826
25268
 
24827
25269
  var border$2 = {
24828
25270
  "default": "1px solid #caced8"
24829
25271
  };
24830
- var fallbackValues$t = {
25272
+ var fallbackValues$u = {
24831
25273
  border: border$2
24832
25274
  };
24833
25275
 
@@ -24902,7 +25344,7 @@ var SearchableSelect = function SearchableSelect(_ref) {
24902
25344
  })))));
24903
25345
  };
24904
25346
 
24905
- var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$t, "default");
25347
+ var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$u, "default");
24906
25348
 
24907
25349
  var borderColor$2 = {
24908
25350
  "default": "".concat(GREY_CHATEAU)
@@ -24910,7 +25352,7 @@ var borderColor$2 = {
24910
25352
  var borderSize = {
24911
25353
  "default": "1px"
24912
25354
  };
24913
- var fallbackValues$u = {
25355
+ var fallbackValues$v = {
24914
25356
  borderColor: borderColor$2,
24915
25357
  borderSize: borderSize
24916
25358
  };
@@ -24927,7 +25369,7 @@ var SolidDivider = function SolidDivider(_ref) {
24927
25369
  });
24928
25370
  };
24929
25371
 
24930
- var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$u, "default");
25372
+ var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$v, "default");
24931
25373
 
24932
25374
  var placeHolderOptionUS = {
24933
25375
  text: "Please select state",
@@ -35511,7 +35953,7 @@ var offBackground = "".concat(REGENT_GREY);
35511
35953
  var labelStyles = "\n display: flex;\n justify-content: flex-start;\n align-items: center;\n";
35512
35954
  var rightLabelStyles = "\n ".concat(labelStyles, "\n flex-direction: row;\n");
35513
35955
  var leftLabelStyles = "\n ".concat(labelStyles, "\n flex-direction: row-reverse;\n");
35514
- var fallbackValues$v = {
35956
+ var fallbackValues$w = {
35515
35957
  onBackground: onBackground,
35516
35958
  disabledBackground: disabledBackground,
35517
35959
  white: white,
@@ -35687,7 +36129,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
35687
36129
  }, label))));
35688
36130
  };
35689
36131
 
35690
- var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$v);
36132
+ var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$w);
35691
36133
 
35692
36134
  var background$1 = "".concat(ATHENS_GREY);
35693
36135
  var white$1 = "".concat(WHITE);
@@ -35736,7 +36178,7 @@ var backgroundColor$5 = WHITE;
35736
36178
  var imageBackgroundColor = INFO_BLUE;
35737
36179
  var headerBackgroundColor = STORM_GREY;
35738
36180
  var headerColor = WHITE;
35739
- var fallbackValues$w = {
36181
+ var fallbackValues$x = {
35740
36182
  backgroundColor: backgroundColor$5,
35741
36183
  imageBackgroundColor: imageBackgroundColor,
35742
36184
  headerBackgroundColor: headerBackgroundColor,
@@ -35759,11 +36201,11 @@ var CardImage = styled.img.withConfig({
35759
36201
 
35760
36202
  var titleColor = BRIGHT_GREY;
35761
36203
  var titleWeight = FONT_WEIGHT_BOLD;
35762
- var textColor$2 = BRIGHT_GREY;
35763
- var fallbackValues$x = {
36204
+ var textColor$3 = BRIGHT_GREY;
36205
+ var fallbackValues$y = {
35764
36206
  titleColor: titleColor,
35765
36207
  titleWeight: titleWeight,
35766
- textColor: textColor$2
36208
+ textColor: textColor$3
35767
36209
  };
35768
36210
 
35769
36211
  var CardText = function CardText(_ref) {
@@ -35784,7 +36226,7 @@ var CardText = function CardText(_ref) {
35784
36226
  color: themeValues.textColor
35785
36227
  }, text))));
35786
36228
  };
35787
- var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$x);
36229
+ var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$y);
35788
36230
 
35789
36231
  var CardHeader = function CardHeader(_ref) {
35790
36232
  var backgroundColor = _ref.backgroundColor,
@@ -35881,12 +36323,12 @@ var Card = function Card(_ref) {
35881
36323
  }), children)));
35882
36324
  };
35883
36325
 
35884
- var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$w);
36326
+ var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$x);
35885
36327
 
35886
36328
  var fontFamily$6 = "Public Sans, sans-serif";
35887
36329
  var activeColor$6 = MATISSE_BLUE;
35888
36330
  var linkColor$3 = CHARADE_GREY;
35889
- var fallbackValues$y = {
36331
+ var fallbackValues$z = {
35890
36332
  fontFamily: fontFamily$6,
35891
36333
  activeColor: activeColor$6,
35892
36334
  linkColor: linkColor$3
@@ -35919,7 +36361,7 @@ var NavTab = function NavTab(_ref) {
35919
36361
  }, label));
35920
36362
  };
35921
36363
 
35922
- var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$y);
36364
+ var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$z);
35923
36365
 
35924
36366
  var NavTabs = function NavTabs(_ref) {
35925
36367
  var tabsConfig = _ref.tabsConfig,
@@ -37877,7 +38319,7 @@ AddressForm.mapStateToProps = mapStateToProps$1;
37877
38319
  AddressForm.mapDispatchToProps = mapDispatchToProps;
37878
38320
 
37879
38321
  var backgroundColor$6 = "#ebeffb";
37880
- var fallbackValues$z = {
38322
+ var fallbackValues$A = {
37881
38323
  backgroundColor: backgroundColor$6
37882
38324
  };
37883
38325
 
@@ -37929,7 +38371,7 @@ var Banner = function Banner(_ref) {
37929
38371
  }, /*#__PURE__*/React.createElement(Image, null))));
37930
38372
  };
37931
38373
 
37932
- var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$z);
38374
+ var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$A);
37933
38375
 
37934
38376
  var ChangePasswordForm = function ChangePasswordForm(_ref) {
37935
38377
  var _newPasswordErrorMess;
@@ -38071,7 +38513,7 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
38071
38513
  var titleColor$1 = "#292A33";
38072
38514
  var headingBackgroundColor = "transparent";
38073
38515
  var bodyBackgroundColor = "transparent";
38074
- var fallbackValues$A = {
38516
+ var fallbackValues$B = {
38075
38517
  titleColor: titleColor$1,
38076
38518
  headingBackgroundColor: headingBackgroundColor,
38077
38519
  bodyBackgroundColor: bodyBackgroundColor
@@ -38198,7 +38640,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
38198
38640
  }, children))));
38199
38641
  };
38200
38642
 
38201
- var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$A);
38643
+ var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$B);
38202
38644
 
38203
38645
  var ClipboardIcon = function ClipboardIcon(_ref) {
38204
38646
  var themeValues = _ref.themeValues;
@@ -38459,8 +38901,8 @@ var EditableListItemControls = styled.div.withConfig({
38459
38901
  componentId: "sc-10ehkz7-1"
38460
38902
  })(["display:flex;justify-content:space-evenly;align-items:center;"]);
38461
38903
 
38462
- var ACTIVE$1 = "ACTIVE";
38463
- var EXPIRED$1 = "EXPIRED";
38904
+ var ACTIVE = "ACTIVE";
38905
+ var EXPIRED = "EXPIRED";
38464
38906
 
38465
38907
  var EditableList = function EditableList(_ref) {
38466
38908
  var _ref$title = _ref.title,
@@ -38517,13 +38959,13 @@ var EditableList = function EditableList(_ref) {
38517
38959
  modalOpen = _useState2[0],
38518
38960
  toggleModal = _useState2[1];
38519
38961
 
38520
- var expiredItem = (_item$expirationStatu = item === null || item === void 0 ? void 0 : item.expirationStatus) !== null && _item$expirationStatu !== void 0 ? _item$expirationStatu : ACTIVE$1;
38962
+ var expiredItem = (_item$expirationStatu = item === null || item === void 0 ? void 0 : item.expirationStatus) !== null && _item$expirationStatu !== void 0 ? _item$expirationStatu : ACTIVE;
38521
38963
  return /*#__PURE__*/React.createElement(EditableListItem, {
38522
38964
  listItemSize: !!item.id && autoPayMethods !== null && autoPayMethods !== void 0 && autoPayMethods.some(function (methodID) {
38523
38965
  return methodID === item.id;
38524
38966
  }) ? "big" : listItemSize,
38525
38967
  key: item.id || item,
38526
- disabled: expiredItem === EXPIRED$1
38968
+ disabled: expiredItem === EXPIRED
38527
38969
  }, /*#__PURE__*/React.createElement(Text$1, {
38528
38970
  variant: "p",
38529
38971
  color: CHARADE_GREY
@@ -38784,7 +39226,7 @@ EmailForm.mapDispatchToProps = mapDispatchToProps$3;
38784
39226
 
38785
39227
  var footerBackgroundColor = BRIGHT_GREY;
38786
39228
  var subfooterBackgroundColor = STORM_GREY;
38787
- var fallbackValues$B = {
39229
+ var fallbackValues$C = {
38788
39230
  footerBackgroundColor: footerBackgroundColor,
38789
39231
  subfooterBackgroundColor: subfooterBackgroundColor
38790
39232
  };
@@ -38816,7 +39258,7 @@ var FooterWithSubfooter = function FooterWithSubfooter(_ref) {
38816
39258
  }));
38817
39259
  };
38818
39260
 
38819
- var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$B);
39261
+ var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$C);
38820
39262
 
38821
39263
  var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
38822
39264
  var _EmailErrorMessages;
@@ -38866,10 +39308,10 @@ ForgotPasswordForm.reducer = reducer$4;
38866
39308
  ForgotPasswordForm.mapStateToProps = mapStateToProps$5;
38867
39309
  ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
38868
39310
 
38869
- var textColor$3 = "#ffffff";
39311
+ var textColor$4 = "#ffffff";
38870
39312
  var backgroundColor$7 = "#182848";
38871
- var fallbackValues$C = {
38872
- textColor: textColor$3,
39313
+ var fallbackValues$D = {
39314
+ textColor: textColor$4,
38873
39315
  backgroundColor: backgroundColor$7
38874
39316
  };
38875
39317
 
@@ -38925,7 +39367,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
38925
39367
  }), repeat( /*#__PURE__*/React.createElement(Box, null), boxesAfter))));
38926
39368
  };
38927
39369
 
38928
- var HighlightTabRow$1 = /*#__PURE__*/memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$C));
39370
+ var HighlightTabRow$1 = /*#__PURE__*/memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$D));
38929
39371
 
38930
39372
  var AccountBillIcon = function AccountBillIcon() {
38931
39373
  return /*#__PURE__*/React.createElement("svg", {
@@ -44077,7 +44519,7 @@ var backgroundColor$8 = {
44077
44519
  largeTitle: WHITE,
44078
44520
  small: WHITE
44079
44521
  };
44080
- var fallbackValues$D = {
44522
+ var fallbackValues$E = {
44081
44523
  fontSize: fontSize$9,
44082
44524
  fontWeight: fontWeight$5,
44083
44525
  fontColor: fontColor,
@@ -44136,7 +44578,7 @@ var Module = function Module(_ref) {
44136
44578
  }, children)));
44137
44579
  };
44138
44580
 
44139
- var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$D, "default"));
44581
+ var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$E, "default"));
44140
44582
 
44141
44583
  var backgroundColor$9 = {
44142
44584
  profile: "#3b414d",
@@ -44146,7 +44588,7 @@ var shadowColor = {
44146
44588
  profile: "#292A33",
44147
44589
  cms: "#292A33"
44148
44590
  };
44149
- var fallbackValues$E = {
44591
+ var fallbackValues$F = {
44150
44592
  backgroundColor: backgroundColor$9,
44151
44593
  shadowColor: shadowColor
44152
44594
  };
@@ -44187,7 +44629,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
44187
44629
  }, menuContent));
44188
44630
  };
44189
44631
 
44190
- var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$E, "profile");
44632
+ var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$F, "profile");
44191
44633
 
44192
44634
  var menu = posed.div({
44193
44635
  invisible: {
@@ -44243,7 +44685,11 @@ var NavMenuMobile = function NavMenuMobile(_ref) {
44243
44685
  }, menuContent));
44244
44686
  };
44245
44687
 
44246
- var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$E, "profile");
44688
+ var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$F, "profile");
44689
+
44690
+ var ACH_METHOD = "BANK_ACCOUNT";
44691
+ var CC_METHOD = "CREDIT_CARD";
44692
+ var CASH_METHOD = "CASH";
44247
44693
 
44248
44694
  var IconsModule = function IconsModule(_ref) {
44249
44695
  var icon = _ref.icon,
@@ -44300,7 +44746,7 @@ var activeColor$7 = "#0E506D";
44300
44746
  var linkColor$4 = "#3176AA";
44301
44747
  var fontWeight$6 = FONT_WEIGHT_REGULAR;
44302
44748
  var modalLinkHoverFocus = "outline: none;\n cursor: pointer;\n text-decoration: underline;\n text-decoration-color: #317D4F;";
44303
- var fallbackValues$F = {
44749
+ var fallbackValues$G = {
44304
44750
  color: color$a,
44305
44751
  hoverColor: hoverColor$5,
44306
44752
  activeColor: activeColor$7,
@@ -44324,13 +44770,27 @@ var AutopayModal = function AutopayModal(_ref) {
44324
44770
  isPaymentPlan = _ref.isPaymentPlan,
44325
44771
  nextAutopayDate = _ref.nextAutopayDate,
44326
44772
  dueDate = _ref.dueDate,
44327
- inactive = _ref.inactive;
44328
- var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
44773
+ inactive = _ref.inactive,
44774
+ description = _ref.description,
44775
+ subDescription = _ref.subDescription,
44776
+ allowedPaymentInstruments = _ref.allowedPaymentInstruments;
44777
+
44778
+ var generateMethodNeededText = function generateMethodNeededText(planText, allowedPaymentInstruments) {
44779
+ var allowsCard = allowedPaymentInstruments.includes(CC_METHOD);
44780
+ var allowsACH = allowedPaymentInstruments.includes(ACH_METHOD);
44781
+ var methodRequired = allowsCard && !allowsACH ? "debit or credit card payment method" : !allowsCard && allowsACH ? "checking account payment method" : "payment method";
44782
+ return "To setup ".concat(planText, " you must have a saved ").concat(methodRequired, " and address in your profile. Do you want to save these now?");
44783
+ };
44784
+
44785
+ var plan = isPaymentPlan ? "your payment plan" : "autopay";
44786
+ var shortPlan = isPaymentPlan ? "Payment Plan" : "Autopay";
44787
+ var deactivateText = "deactivate ".concat(shortPlan, " for ").concat(description, ": ").concat(subDescription);
44788
+ var activateText = "Set Up ".concat(shortPlan, " for ").concat(description, ": ").concat(subDescription);
44329
44789
  var nextDate = dueDate || nextAutopayDate;
44330
44790
  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",
44791
+ modalHeaderText: autoPayActive ? titleCaseString(deactivateText) : titleCaseString(activateText),
44792
+ 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),
44793
+ continueButtonText: autoPayActive ? "Disable ".concat(shortPlan) : "Add to Profile",
44334
44794
  useDangerButton: autoPayActive,
44335
44795
  continueAction: autoPayActive ? function () {
44336
44796
  deactivatePaymentSchedule(isPaymentPlan ? paymentPlanSchedule : autoPaySchedule, isPaymentPlan);
@@ -44346,7 +44806,7 @@ var AutopayModal = function AutopayModal(_ref) {
44346
44806
  case "secondary":
44347
44807
  {
44348
44808
  return /*#__PURE__*/React.createElement(ButtonWithAction, {
44349
- text: autoPayActive ? "Turn off ".concat(planType) : "Set Up ".concat(planType),
44809
+ text: autoPayActive ? "Turn off ".concat(shortPlan) : "Set Up ".concat(shortPlan),
44350
44810
  variant: "secondary",
44351
44811
  action: function action() {
44352
44812
  toggleModal(true);
@@ -44359,7 +44819,7 @@ var AutopayModal = function AutopayModal(_ref) {
44359
44819
  case "tertiary":
44360
44820
  {
44361
44821
  return /*#__PURE__*/React.createElement(ButtonWithAction, {
44362
- text: autoPayActive ? "Manage ".concat(planType) : "Set Up ".concat(planType),
44822
+ text: autoPayActive ? "Manage ".concat(shortPlan) : "Set Up ".concat(shortPlan),
44363
44823
  variant: "tertiary",
44364
44824
  action: function action() {
44365
44825
  toggleModal(true);
@@ -44391,12 +44851,12 @@ var AutopayModal = function AutopayModal(_ref) {
44391
44851
  e.key === "Enter" && toggleModal(true);
44392
44852
  },
44393
44853
  tabIndex: "0",
44394
- dataQa: "".concat(planType, " On"),
44854
+ dataQa: "".concat(shortPlan, " On"),
44395
44855
  color: SEA_GREEN,
44396
44856
  weight: themeValues.fontWeight,
44397
44857
  hoverStyles: themeValues.modalLinkHoverFocus,
44398
44858
  extraStyles: "padding-left: 0.25rem;"
44399
- }, "".concat(planType, " ").concat(nextAutopayDate))));
44859
+ }, "".concat(shortPlan, " ").concat(nextAutopayDate))));
44400
44860
  }
44401
44861
  }
44402
44862
  };
@@ -44412,7 +44872,7 @@ var AutopayModal = function AutopayModal(_ref) {
44412
44872
  }, modalExtraProps), renderAutoPayControl());
44413
44873
  };
44414
44874
 
44415
- var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$F);
44875
+ var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$G);
44416
44876
 
44417
44877
  var AmountModule = function AmountModule(_ref) {
44418
44878
  var totalAmountDue = _ref.totalAmountDue,
@@ -44423,7 +44883,10 @@ var AmountModule = function AmountModule(_ref) {
44423
44883
  autoPaySchedule = _ref.autoPaySchedule,
44424
44884
  paymentPlanSchedule = _ref.paymentPlanSchedule,
44425
44885
  isPaymentPlan = _ref.isPaymentPlan,
44426
- nextAutopayDate = _ref.nextAutopayDate;
44886
+ nextAutopayDate = _ref.nextAutopayDate,
44887
+ description = _ref.description,
44888
+ subDescription = _ref.subDescription,
44889
+ allowedPaymentInstruments = _ref.allowedPaymentInstruments;
44427
44890
 
44428
44891
  var _useState = useState(false),
44429
44892
  _useState2 = _slicedToArray(_useState, 2),
@@ -44452,7 +44915,10 @@ var AmountModule = function AmountModule(_ref) {
44452
44915
  paymentPlanSchedule: paymentPlanSchedule,
44453
44916
  isPaymentPlan: isPaymentPlan,
44454
44917
  nextAutopayDate: nextAutopayDate,
44455
- controlType: "link"
44918
+ controlType: "link",
44919
+ description: description,
44920
+ subDescription: subDescription,
44921
+ allowedPaymentInstruments: allowedPaymentInstruments
44456
44922
  })));
44457
44923
  };
44458
44924
 
@@ -44471,7 +44937,10 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
44471
44937
  isPaymentPlan = _ref.isPaymentPlan,
44472
44938
  nextAutopayDate = _ref.nextAutopayDate,
44473
44939
  obligationAssocID = _ref.obligationAssocID,
44474
- dueDate = _ref.dueDate;
44940
+ dueDate = _ref.dueDate,
44941
+ description = _ref.description,
44942
+ subDescription = _ref.subDescription,
44943
+ allowedPaymentInstruments = _ref.allowedPaymentInstruments;
44475
44944
  var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
44476
44945
 
44477
44946
  var _useState = useState(false),
@@ -44527,7 +44996,10 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
44527
44996
  autoPaySchedule: autoPaySchedule,
44528
44997
  paymentPlanSchedule: paymentPlanSchedule,
44529
44998
  isPaymentPlan: isPaymentPlan,
44530
- nextAutopayDate: nextAutopayDate
44999
+ nextAutopayDate: nextAutopayDate,
45000
+ description: description,
45001
+ subDescription: subDescription,
45002
+ allowedPaymentInstruments: allowedPaymentInstruments
44531
45003
  }))), /*#__PURE__*/React.createElement(Box, {
44532
45004
  padding: isMobile ? "16px" : "0"
44533
45005
  }, /*#__PURE__*/React.createElement(Cluster, {
@@ -44567,7 +45039,10 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
44567
45039
  paymentPlanSchedule: paymentPlanSchedule,
44568
45040
  isPaymentPlan: isPaymentPlan,
44569
45041
  nextAutopayDate: nextAutopayDate,
44570
- dueDate: dueDate
45042
+ dueDate: dueDate,
45043
+ description: description,
45044
+ subDescription: subDescription,
45045
+ allowedPaymentInstruments: allowedPaymentInstruments
44571
45046
  })), !isMobile && /*#__PURE__*/React.createElement(Box, {
44572
45047
  padding: "0"
44573
45048
  }, /*#__PURE__*/React.createElement(ButtonWithAction, {
@@ -44657,7 +45132,10 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
44657
45132
  dueDate = _ref.dueDate,
44658
45133
  agencyName = _ref.agencyName,
44659
45134
  configType = _ref.configType,
44660
- actions = _ref.actions;
45135
+ actions = _ref.actions,
45136
+ description = _ref.description,
45137
+ subDescription = _ref.subDescription,
45138
+ allowedPaymentInstruments = _ref.allowedPaymentInstruments;
44661
45139
 
44662
45140
  var _useState = useState(false),
44663
45141
  _useState2 = _slicedToArray(_useState, 2),
@@ -44696,7 +45174,10 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
44696
45174
  obligationAssocID: obligationAssocID,
44697
45175
  dueDate: dueDate,
44698
45176
  controlType: "secondary",
44699
- inactive: true
45177
+ inactive: true,
45178
+ description: description,
45179
+ subDescription: subDescription,
45180
+ allowedPaymentInstruments: allowedPaymentInstruments
44700
45181
  })), /*#__PURE__*/React.createElement(Box, {
44701
45182
  padding: "0",
44702
45183
  extraStyles: "flex-grow: 1;"
@@ -44738,7 +45219,7 @@ var InactiveTitleModule = function InactiveTitleModule(_ref) {
44738
45219
  };
44739
45220
 
44740
45221
  var Obligation = function Obligation(_ref) {
44741
- var _firstObligation$cust, _firstObligation$desc, _firstObligation$subD;
45222
+ var _obligations$, _firstObligation$cust;
44742
45223
 
44743
45224
  var config = _ref.config,
44744
45225
  obligations = _ref.obligations,
@@ -44773,7 +45254,13 @@ var Obligation = function Obligation(_ref) {
44773
45254
  The top level desc/subdesc for all obligations in a collection is the same
44774
45255
  (Collection accounts look different in the Account Details page)
44775
45256
  */
44776
- var firstObligation = obligations[0];
45257
+ var firstObligation = (_obligations$ = obligations === null || obligations === void 0 ? void 0 : obligations[0]) !== null && _obligations$ !== void 0 ? _obligations$ : {};
45258
+ var _firstObligation$allo = firstObligation.allowedPaymentInstruments,
45259
+ allowedPaymentInstruments = _firstObligation$allo === void 0 ? [CASH_METHOD, CC_METHOD, ACH_METHOD] : _firstObligation$allo,
45260
+ _firstObligation$desc = firstObligation.description,
45261
+ description = _firstObligation$desc === void 0 ? "Account" : _firstObligation$desc,
45262
+ _firstObligation$subD = firstObligation.subDescription,
45263
+ subDescription = _firstObligation$subD === void 0 ? obligationAssocID : _firstObligation$subD;
44777
45264
  var customAttributes = (_firstObligation$cust = firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.customAttributes) !== null && _firstObligation$cust !== void 0 ? _firstObligation$cust : {};
44778
45265
  var boxShadowValue = "0px 2px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
44779
45266
  var activeObligation = /*#__PURE__*/React.createElement(Box, {
@@ -44781,7 +45268,7 @@ var Obligation = function Obligation(_ref) {
44781
45268
  borderRadius: "4px",
44782
45269
  boxShadow: boxShadowValue,
44783
45270
  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),
45271
+ "aria-label": "".concat(description, " - ").concat(subDescription),
44785
45272
  border: "1px solid ".concat(GRECIAN_GREY),
44786
45273
  borderWidthOverride: "1px 0 0 0"
44787
45274
  }, /*#__PURE__*/React.createElement(Box, {
@@ -44810,8 +45297,8 @@ var Obligation = function Obligation(_ref) {
44810
45297
  iconValue: config.iconValue,
44811
45298
  customAttributes: customAttributes
44812
45299
  }), /*#__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,
45300
+ title: description,
45301
+ subtitle: subDescription,
44815
45302
  titleColor: BRIGHT_GREY,
44816
45303
  isMobile: isMobile
44817
45304
  }))), !isMobile && /*#__PURE__*/React.createElement(AmountModule, {
@@ -44825,7 +45312,10 @@ var Obligation = function Obligation(_ref) {
44825
45312
  autoPaySchedule: autoPaySchedule,
44826
45313
  paymentPlanSchedule: paymentPlanSchedule,
44827
45314
  isPaymentPlan: isPaymentPlan,
44828
- nextAutopayDate: nextAutopayDate
45315
+ nextAutopayDate: nextAutopayDate,
45316
+ description: description,
45317
+ subDescription: subDescription,
45318
+ allowedPaymentInstruments: allowedPaymentInstruments
44829
45319
  }))), !isMobile && /*#__PURE__*/React.createElement(PaymentDetailsActions, {
44830
45320
  obligations: obligations,
44831
45321
  autoPayEnabled: autoPayEnabled,
@@ -44840,7 +45330,10 @@ var Obligation = function Obligation(_ref) {
44840
45330
  isMobile: isMobile,
44841
45331
  isPaymentPlan: isPaymentPlan,
44842
45332
  nextAutopayDate: nextAutopayDate,
44843
- obligationAssocID: obligationAssocID
45333
+ obligationAssocID: obligationAssocID,
45334
+ description: description,
45335
+ subDescription: subDescription,
45336
+ allowedPaymentInstruments: allowedPaymentInstruments
44844
45337
  }))), isMobile && /*#__PURE__*/React.createElement(PaymentDetailsActions, {
44845
45338
  obligations: obligations,
44846
45339
  autoPayEnabled: autoPayEnabled,
@@ -44855,7 +45348,10 @@ var Obligation = function Obligation(_ref) {
44855
45348
  isMobile: isMobile,
44856
45349
  isPaymentPlan: isPaymentPlan,
44857
45350
  nextAutopayDate: nextAutopayDate,
44858
- obligationAssocID: obligationAssocID
45351
+ obligationAssocID: obligationAssocID,
45352
+ description: description,
45353
+ subDescription: subDescription,
45354
+ allowedPaymentInstruments: allowedPaymentInstruments
44859
45355
  }));
44860
45356
  var inactiveObligation = /*#__PURE__*/React.createElement(Box, {
44861
45357
  padding: "0",
@@ -44908,7 +45404,10 @@ var Obligation = function Obligation(_ref) {
44908
45404
  obligationAssocID: obligationAssocID,
44909
45405
  dueDate: dueDate,
44910
45406
  agencyName: agencyName,
44911
- configType: config.type
45407
+ configType: config.type,
45408
+ description: description,
45409
+ subDescription: subDescription,
45410
+ allowedPaymentInstruments: allowedPaymentInstruments
44912
45411
  }))), isMobile && /*#__PURE__*/React.createElement(InactiveControlsModule, {
44913
45412
  obligations: obligations,
44914
45413
  autoPayEnabled: autoPayEnabled,
@@ -44922,7 +45421,10 @@ var Obligation = function Obligation(_ref) {
44922
45421
  obligationAssocID: obligationAssocID,
44923
45422
  dueDate: dueDate,
44924
45423
  agencyName: agencyName,
44925
- configType: config.type
45424
+ configType: config.type,
45425
+ description: description,
45426
+ subDescription: subDescription,
45427
+ allowedPaymentInstruments: allowedPaymentInstruments
44926
45428
  }))));
44927
45429
  return inactive ? inactiveObligation : activeObligation;
44928
45430
  };
@@ -45224,7 +45726,7 @@ var labeledAmountTotal = {
45224
45726
  "default": "h6",
45225
45727
  small: "p"
45226
45728
  };
45227
- var fallbackValues$G = {
45729
+ var fallbackValues$H = {
45228
45730
  backgroundColor: backgroundColor$a,
45229
45731
  lineItem: lineItem,
45230
45732
  labeledAmountSubtotal: labeledAmountSubtotal,
@@ -45475,7 +45977,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
45475
45977
  });
45476
45978
  };
45477
45979
 
45478
- var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$G, "default");
45980
+ var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$H, "default");
45479
45981
 
45480
45982
  var linkColor$5 = {
45481
45983
  "default": "#3176AA"
@@ -45492,7 +45994,7 @@ var fontWeight$7 = {
45492
45994
  var modalLinkHoverFocus$1 = {
45493
45995
  "default": "outline: none; text-decoration: underline;"
45494
45996
  };
45495
- var fallbackValues$H = {
45997
+ var fallbackValues$I = {
45496
45998
  linkColor: linkColor$5,
45497
45999
  fontSize: fontSize$a,
45498
46000
  lineHeight: lineHeight$4,
@@ -45551,7 +46053,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
45551
46053
  }, link));
45552
46054
  };
45553
46055
 
45554
- var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$H, "default");
46056
+ var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$I, "default");
45555
46057
 
45556
46058
  var PaymentFormACH = function PaymentFormACH(_ref) {
45557
46059
  var _routingNumberErrors, _accountNumberErrors;
@@ -46157,7 +46659,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
46157
46659
  var bodyBackgroundColor$1 = "#eeeeee";
46158
46660
  var borderColor$3 = "".concat(GREY_CHATEAU);
46159
46661
  var focusStyles = "outline: none;";
46160
- var fallbackValues$I = {
46662
+ var fallbackValues$J = {
46161
46663
  headingBackgroundColor: headingBackgroundColor$1,
46162
46664
  headingDisabledColor: headingDisabledColor,
46163
46665
  bodyBackgroundColor: bodyBackgroundColor$1,
@@ -46174,7 +46676,8 @@ var fallbackValues$I = {
46174
46676
  hideRadioButton: boolean, (keeps section displayed but hides radio and disables open/close function),
46175
46677
  hidden: boolean, (hides section entirely)
46176
46678
  dataQa: string,
46177
- content: <React Component(s)> e.g.: <Box><Stack>cool content stuff</Stack></Box> (any collection of components will work)
46679
+ content: <React Component(s)> e.g.: <Box><Stack>cool content stuff</Stack></Box> (any collection of components will work),
46680
+ 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
46681
  }
46179
46682
 
46180
46683
  Also takes an "openSection" which should equal the id of the section that should be open
@@ -46187,10 +46690,6 @@ var fallbackValues$I = {
46187
46690
 
46188
46691
  */
46189
46692
 
46190
- var ACTIVE$2 = "ACTIVE";
46191
- var EXPIRING_SOON$1 = "EXPIRING_SOON";
46192
- var EXPIRED$2 = "EXPIRED";
46193
-
46194
46693
  var RadioSection = function RadioSection(_ref) {
46195
46694
  var themeValues = _ref.themeValues,
46196
46695
  isMobile = _ref.isMobile,
@@ -46213,34 +46712,6 @@ var RadioSection = function RadioSection(_ref) {
46213
46712
  }
46214
46713
  };
46215
46714
 
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
46715
  var wrapper = {
46245
46716
  open: {
46246
46717
  height: openHeight,
@@ -46294,13 +46765,13 @@ var RadioSection = function RadioSection(_ref) {
46294
46765
  return /*#__PURE__*/React.createElement(Motion, {
46295
46766
  tabIndex: section.hideRadioButton || section.disabled ? "-1" : "0",
46296
46767
  onKeyDown: function onKeyDown(e) {
46297
- return handleKeyDown(section.id, e);
46768
+ return !section.disabled && handleKeyDown(section.id, e);
46298
46769
  },
46299
46770
  onFocus: function onFocus() {
46300
- return setFocused(section.id);
46771
+ return !section.disabled && setFocused(section.id);
46301
46772
  },
46302
46773
  onBlur: function onBlur() {
46303
- return setFocused(null);
46774
+ return !section.disabled && setFocused(null);
46304
46775
  },
46305
46776
  hoverStyles: themeValues.focusStyles,
46306
46777
  animate: openSection === section.id ? "open" : "closed",
@@ -46315,7 +46786,7 @@ var RadioSection = function RadioSection(_ref) {
46315
46786
  onClick: isMobile && supportsTouch || section.disabled ? noop : function () {
46316
46787
  return toggleOpenSection(section.id);
46317
46788
  },
46318
- onTouchEnd: isMobile && supportsTouch || !section.disabled ? function () {
46789
+ onTouchEnd: isMobile && supportsTouch && !section.disabled ? function () {
46319
46790
  return toggleOpenSection(section.id);
46320
46791
  } : noop,
46321
46792
  key: "header-".concat(section.id),
@@ -46360,7 +46831,7 @@ var RadioSection = function RadioSection(_ref) {
46360
46831
  isMobile: isMobile,
46361
46832
  alt: icon.altText
46362
46833
  });
46363
- })), section.shouldDisplayCardExpiration && /*#__PURE__*/React.createElement(Fragment$1, null, renderCardStatus(section)))), /*#__PURE__*/React.createElement(AnimatePresence, {
46834
+ })), section.rightTitleContent && /*#__PURE__*/React.createElement(Fragment$1, null, section.rightTitleContent))), /*#__PURE__*/React.createElement(AnimatePresence, {
46364
46835
  initial: false
46365
46836
  }, openSection === section.id && /*#__PURE__*/React.createElement(Motion, {
46366
46837
  key: "content-".concat(section.id),
@@ -46376,7 +46847,7 @@ var RadioSection = function RadioSection(_ref) {
46376
46847
  })));
46377
46848
  };
46378
46849
 
46379
- var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$I);
46850
+ var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$J);
46380
46851
 
46381
46852
  var RegistrationForm = function RegistrationForm(_ref) {
46382
46853
  var _emailErrorMessages, _passwordErrorMessage;
@@ -46673,7 +47144,7 @@ var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
46673
47144
  var activeTabBackground = "#FFFFFF";
46674
47145
  var activeTabAccent = "#15749D";
46675
47146
  var activeTabHover = "#B8D5E1";
46676
- var fallbackValues$J = {
47147
+ var fallbackValues$K = {
46677
47148
  activeTabBackground: activeTabBackground,
46678
47149
  activeTabAccent: activeTabAccent,
46679
47150
  activeTabHover: activeTabHover
@@ -46752,12 +47223,12 @@ var Tabs = function Tabs(_ref) {
46752
47223
  }))));
46753
47224
  };
46754
47225
 
46755
- var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$J);
47226
+ var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$K);
46756
47227
 
46757
47228
  var activeTabBackground$1 = "#FFFFFF";
46758
47229
  var activeTabAccent$1 = "#15749D";
46759
47230
  var activeTabHover$1 = "#B8D5E1";
46760
- var fallbackValues$K = {
47231
+ var fallbackValues$L = {
46761
47232
  activeTabBackground: activeTabBackground$1,
46762
47233
  activeTabAccent: activeTabAccent$1,
46763
47234
  activeTabHover: activeTabHover$1
@@ -46813,7 +47284,7 @@ var TabSidebar = function TabSidebar(_ref) {
46813
47284
  })));
46814
47285
  };
46815
47286
 
46816
- var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$K);
47287
+ var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$L);
46817
47288
 
46818
47289
  var backgroundColor$b = {
46819
47290
  "default": "#ffffff",
@@ -46844,7 +47315,7 @@ var modalLinkHoverFocus$2 = {
46844
47315
  "default": standardInteractionStyles,
46845
47316
  footer: standardInteractionStyles
46846
47317
  };
46847
- var fallbackValues$L = {
47318
+ var fallbackValues$M = {
46848
47319
  backgroundColor: backgroundColor$b,
46849
47320
  linkColor: linkColor$6,
46850
47321
  border: border$3,
@@ -46906,7 +47377,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
46906
47377
  }, link));
46907
47378
  };
46908
47379
 
46909
- var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$L, "default");
47380
+ var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$M, "default");
46910
47381
 
46911
47382
  var TermsAndConditions = function TermsAndConditions(_ref) {
46912
47383
  var onCheck = _ref.onCheck,
@@ -46981,7 +47452,7 @@ var fontColor$1 = WHITE;
46981
47452
  var textAlign$1 = "left";
46982
47453
  var headerBackgroundColor$1 = BRIGHT_GREY;
46983
47454
  var imageBackgroundColor$1 = MATISSE_BLUE;
46984
- var fallbackValues$M = {
47455
+ var fallbackValues$N = {
46985
47456
  fontWeight: fontWeight$9,
46986
47457
  fontColor: fontColor$1,
46987
47458
  textAlign: textAlign$1,
@@ -47028,7 +47499,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
47028
47499
  })))));
47029
47500
  };
47030
47501
 
47031
- var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$M));
47502
+ var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$N));
47032
47503
 
47033
47504
  var WorkflowTile = function WorkflowTile(_ref) {
47034
47505
  var _ref$workflowName = _ref.workflowName,
@@ -47083,7 +47554,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
47083
47554
  };
47084
47555
 
47085
47556
  var pageBackground = "#FBFCFD";
47086
- var fallbackValues$N = {
47557
+ var fallbackValues$O = {
47087
47558
  pageBackground: pageBackground
47088
47559
  };
47089
47560
 
@@ -47130,7 +47601,7 @@ var CenterSingle = function CenterSingle(_ref) {
47130
47601
  })));
47131
47602
  };
47132
47603
 
47133
- var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$N));
47604
+ var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$O));
47134
47605
 
47135
47606
  var CenterStack = function CenterStack(_ref) {
47136
47607
  var header = _ref.header,
@@ -47172,7 +47643,7 @@ var CenterStack = function CenterStack(_ref) {
47172
47643
  })));
47173
47644
  };
47174
47645
 
47175
- var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$N));
47646
+ var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$O));
47176
47647
 
47177
47648
  var CenterSingle$2 = function CenterSingle(_ref) {
47178
47649
  var header = _ref.header,
@@ -47217,7 +47688,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
47217
47688
  })));
47218
47689
  };
47219
47690
 
47220
- var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$N));
47691
+ var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$O));
47221
47692
 
47222
47693
  var SidebarSingleContent = function SidebarSingleContent(_ref) {
47223
47694
  var header = _ref.header,
@@ -47271,7 +47742,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
47271
47742
  })));
47272
47743
  };
47273
47744
 
47274
- var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$N));
47745
+ var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$O));
47275
47746
 
47276
47747
  var SidebarStackContent = function SidebarStackContent(_ref) {
47277
47748
  var header = _ref.header,
@@ -47342,7 +47813,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
47342
47813
  })));
47343
47814
  };
47344
47815
 
47345
- var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$N));
47816
+ var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$O));
47346
47817
 
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 };
47818
+ 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
47819
  //# sourceMappingURL=index.esm.js.map